/*
Class: Slider
	Creates a slider with two elements: a knob and a container. Returns the values.
	
Note:
	The Slider requires an XHTML doctype.

Arguments:
	element - the knob container
	knob - the handle
	options - see Options below

Options:
	steps - the number of steps for your slider.
	mode - either 'horizontal' or 'vertical'. defaults to horizontal.
	offset - relative offset for knob position. default to 0.
	
Events:
	onChange - a function to fire when the value changes.
	onComplete - a function to fire when you're done dragging.
	onTick - optionally, you can alter the onTick behavior, for example displaying an effect of the knob moving to the desired position.
		Passes as parameter the new position.
*/

function CacherEtapes() {
	
	var Compteur = -1;
	
	var lEtapes = $$("#timeline .etape");
	lEtapes.each(function(el, index){
		Compteur ++ ;
	})
	
	// On cache toutes les étapes
	for(i=0;i<=Compteur;i++) {
		if($("etape" + i).hasClass("offscreen") == false) {
			$("etape" + i).addClass("offscreen");
		}
	}
}

var Slider = new Class({

	options: {
		onChange: Class.empty,
		onComplete: Class.empty,
		onTick: function(pos){
			this.knob.setStyle(this.p, pos);
		},
		mode: 'horizontal',
		steps: 100,
		offset: 0
	},

	initialize: function(el, knob, options){
		this.element = $(el);
		this.knob = $(knob);
		this.setOptions(options);
		this.previousChange = -1;
		this.previousEnd = -1;
		this.step = -1;

		//this.element.addEvent('mousedown', this.clickedElement.bindWithEvent(this));
		var mod, offset;
		switch(this.options.mode){
			case 'horizontal':
				this.z = 'x';
				this.p = 'left';
				mod = {'x': 'left', 'y': false};
				offset = 'offsetWidth';
				break;
			case 'vertical':
				this.z = 'y';
				this.p = 'top';
				mod = {'x': false, 'y': 'top'};
				offset = 'offsetHeight';
		}
		this.max = this.element[offset] - this.knob[offset] + (this.options.offset * 2);
		this.half = this.knob[offset]/2;
		this.getPos = this.element['get' + this.p.capitalize()].bind(this.element);
		this.knob.setStyle('position', 'relative').setStyle(this.p, - this.options.offset);
		var lim = {};
		lim[this.z] = [- this.options.offset, this.max - this.options.offset];
		this.drag = new Drag.Base(this.knob, {
			limit: lim,
			modifiers: mod,
			snap: 0,
			onStart: function(){
				this.draggedKnob();
			}.bind(this),
			onDrag: function(){
				this.draggedKnob();
			}.bind(this),
			onComplete: function(){
				this.draggedKnob();
				this.end();
			}.bind(this)
		});
		if (this.options.initialize) this.options.initialize.call(this);
	},

	/*
	Property: set
		The slider will get the step you pass.

	Arguments:
		step - one integer
	*/

	set: function(step){
		this.step = step.limit(0, this.options.steps);
		this.checkStep();
		this.end();
		this.fireEvent('onTick', this.toPosition(this.step));
		return this;
	},

	clickedElement: function(event){
		var position = event.page[this.z] - this.getPos() - this.half;
		position = position.limit(-this.options.offset, this.max -this.options.offset);
		this.step = this.toStep(position);
		this.checkStep();
		this.end();
		this.fireEvent('onTick', position);
	},

	draggedKnob: function(){
		this.step = this.toStep(this.drag.value.now[this.z]);
		this.checkStep();
	},

	checkStep: function(){
		if (this.previousChange != this.step){
			this.previousChange = this.step;
			this.fireEvent('onChange', this.step);
		}
	},

	end: function(){
		if (this.previousEnd !== this.step){
			this.previousEnd = this.step;
			this.fireEvent('onComplete', this.step + '');
		}
		
		var myPos = this.toPosition(this.step);
		
	},

	toStep: function(position){
		return Math.round((position + this.options.offset) / this.max * this.options.steps);
	},

	toPosition: function(step){
		return this.max * step / this.options.steps;
	}

});



Slider.implement(new Events);
Slider.implement(new Options);

var positionnerKnob;
var EtapeEnCours;


function positionnerKnob(){
		var knobPos = $("knob").getPosition().x - $$("#timeline .positions")[0].getPosition().x + 13;
		var plusproche = 1000000;
		var elPlusProche = null
		var indexPlusProche = null
		var lEtapes = $$("#timeline .etape");
		
		lEtapes.each(function(el, index){
			var left = el.getPosition().x - $$("#timeline .positions")[0].getPosition().x +7;
			if(Math.abs(left - knobPos) < plusproche){
				elPlusProche = el;
				plusproche = Math.abs(left - knobPos);
				indexPlusProche = index;
			}
		})
	
		CacherEtapes();
		
		// On affiche l'étape sélectionné
		EtapeEnCours = elPlusProche.getAttribute('id');
		EtapeEnCours = EtapeEnCours.replace('point', 'etape');
		$(EtapeEnCours).removeClass("offscreen");
		

		var pourcentage = elPlusProche.getPosition().x - $$("#timeline .positions")[0].getPosition().x;
		$("knob").setStyle("left",(pourcentage)+"px")
		
		//goto(indexPlusProche+1);
	}

function InitSlider() {

	$("area").addClass("actif");
	$("timeline").addClass("actif");
	var derniereEtape = 0;
	var lEtapes = $$("#timeline .etape");
	var objEtape = null;
	lEtapes.each(function(el,index){
		var left = el.getStyle("left").toInt()
		if(derniereEtape < left){
			derniereEtape = left;
			objEtape = el;
		}
		
	})
	
	var widthArea = objEtape.getPosition().x - $$("#timeline .positions")[0].getPosition().x +26; 
	$("area").setStyle("width", widthArea+"px");
	$("knob").setAttribute("title", "Déplacez le curseur pour visionner les autres étapes");
		
	var mySlide = new Slider($('area'), $('knob'), {
		steps: 900,
		onComplete: function(step){positionnerKnob();}
	}).set(900)
}
	
function PrepareEvents() {

	$('libelles').getElements('li').addEvent("focus",function(){
	
		CacherEtapes();
			
		// On affiche l'étape sélectionné
		EtapeEnCours = this.getAttribute('id');
		BoutonRelie = EtapeEnCours.replace('etape', 'point');
		$(EtapeEnCours).removeClass("offscreen");
		
		var pourcentage = $(BoutonRelie).getPosition().x - $$("#timeline .positions")[0].getPosition().x;
		$("knob").setStyle("left",(pourcentage)+"px")
		
		goto(EtapeEnCours+1);
	})

	
	var derniereEtape = 0;
	var objEtape = null
	var lEtapes = $$("#timeline .etape");

	lEtapes.each(function(el,index){
		var left = el.getStyle("left").toInt()
		if(derniereEtape < left){
			derniereEtape = left;
			objEtape = el;
		}
		
	})
		
	var etapeActuel;
	lEtapes.each(function(el, index){
		el.addEvent("mouseover",function(){
		
			CacherEtapes();
			
			// On affiche l'étape survolée
			var EtapeHover = el.getAttribute('id');
			EtapeHover = EtapeHover.replace('point', 'etape');
			$(EtapeHover).removeClass("offscreen");

		})
		el.addEvent("mouseout",function(){
			var EtapeHover = el.getAttribute('id');
			EtapeHover = EtapeHover.replace('point', 'etape');
			$(EtapeHover).addClass("offscreen");
			
			$(EtapeEnCours).removeClass('offscreen');
		})
		
		el.addEvent("click",function(){
		
			CacherEtapes();
			
			var EtapeHover = el.getAttribute('id');
			EtapeHover = EtapeHover.replace('point', 'etape');
			$(EtapeHover).removeClass("offscreen");
						
			EtapeEnCours = EtapeHover;
			
			var pourcentage = this.getPosition().x - $$("#timeline .positions")[0].getPosition().x;
			$("knob").setStyle("left",(pourcentage)+"px")
			
			goto(index+1);
		})
	})
}