$(document).ready(function() {
	
		leftback = 0;
	
		$("#acc li").each(function() {
			liclass = $(this).attr("class");
			
			switch(liclass) {
				
				case "li1":
				leftback = -247;
				break;
				
				case "li2":
				leftback = -125;
				break;
				
				case "li3":
				leftback = -243;
				break;
				
				case "li4":
				leftback = -315;
				break;
			}
			$(this).css("backgroundPosition", leftback+"px 0");
		
		});
		
			
	
		$("#acc li").width("176px").hover(function() {
			
			
				$("#acc li").not(this).animate({"width":"35px"},{queue: false, duration: 1500}).each(function() {
				
					//$(this).animate({"backgroundPosition":"35px 0px"}, {queue: false, duration: 1500});
					$(this).find("img").attr("src","../i/"+$(this).attr("class")+"_OFF.jpg");
			
				
				
				});
				
			$(this).animate({"width":"598px", "backgroundPosition" : "35px -358px"}, {queue: false, duration: 1500, complete: function() { 
				
				$(this).css("backgroundPosition", "35px -358px");}
				
			}).find("img").attr("src","../i/"+$(this).attr("class")+"_ON.jpg");				
		
												
		
		});
		
		
	});



$animation = function(){
	// On masque l'image que l'on vient d'afficher
	$("#diapo a:visible").fadeOut(1200);
	// On incremente le compteur pour changer d'image à la prochaine apparition
	num++;
	// Si on est à la derniere image on recommence le défilement des images depuis le debut
	if( num > ( $("#diapo > a").length)-1 ) num = 0 ; 
	// On fait apparaitre l'image
	$("#diapo > a").eq(num).fadeIn(1200);
}


$(document).ready(function(){
	// Compteur de diaporama
	//num = 0;
	// Au premier chargement on cache toutes les images
	//$("#diapo > a ").hide();
	// On fait apparaitre la premiere image du diapo
	//$("#diapo > a ").eq(num).fadeIn(1200);
	// On on change l'image du diapo toutes les 5 secondes
	//setInterval($animation, 5000);
});