$(document).ready(function(){
	
	var difference=0;
	//var p = $("p:last");
	
	//Position initiale du slide bleu :
	$("#slide").css("margin-left","0px");
	//Largeur initiale du slide bleu :
	$("#slide").css("width","56px");

	
	//Au clic sur un item
	$("li").click(function(){
		
		var largeurItem=$(this).width(); //Récupération de la largeur de l'item
		var posItem=$(this).offset(); //Récupération de la position de l'item
		var posSlide=$("#slide").offset(); //Récupération de la position du slide
		var largeurSlide=$("#slide").width();  //Récupération de la largeur du slide
		
		//Modification de la largeur du slide (largeur du slide = largeur de l'item) :
		$("#slide").css("width",largeurItem);
		
		//Calcul de la différence de position par rapport à la gauche entre l'item et le slide
		difference = (posItem.left - posSlide.left);
		//Affichage des données :
		//p.html( "Largeur Item : " + largeurItem + ". LargeurSlide : "+largeurSlide+". Position Item : " + posItem.left +". Positon Slide : "+posSlide.left+". Difference de position : "+difference);
		
		if( (difference>(-572)) && (difference<572) ){
			//Animation du slide :
			$("#slide").animate({"left": "+="+difference}, "slow", "easeInOutBack");
		}
		
	});
	//$("li").dblclick(function(){ });
	
});