$(document).ready(function() {	
	
	/*Etape 13 : opacité des vignettes*/
	$('#vignette_wrapper li').css('opacity','0.5');	
	$('#vignette_wrapper li').hover(function(){
		$(this).fadeTo("fast", 1);
	},function(){
		if(!$(this).hasClass('actif')){
			$(this).fadeTo("fast", 0.5);
		}
	});
	
	/*Etape 14 : première vignette*/
	$('#vignette_wrapper li:first-child').fadeTo("fast", 1);
	$('#vignette_wrapper li:first-child').addClass('actif');
	
	/*Etape 14 à 17 : clic sur une vignette*/
	$('#vignette_wrapper li').click(function(){
		$('#vignette_wrapper li.actif').fadeTo("fast", 0.5);
		$('#vignette_wrapper li').removeClass('actif');
		
		$(this).addClass('actif');
		$('#grande_img').attr('title',$(this).children('a').attr('title'));			
		$('#grande_img').attr('src',$(this).children('a').attr('href'));	
		
		/*Etape 16 et 17  : positionnement et contenu de la légende */
		var titre = $(this).children('a').attr('title');
		window.setTimeout(function(){
			$('#legende_texte').html(titre);
			$('#legende').css('top',$('#grande_img').position().top);		
			$('#legende').css('left',$('#grande_img').position().left);	
		}, 10);		
		return false;
	});
	
	/*Etape 18 : affichage de la légende*/
	$('#legende').toggle(function(){
		$('#legende_texte').fadeIn();
	},function(){
		$('#legende_texte').fadeOut();
	});
	
	/*Etape 19 : initialisation de la navigation*/
	var taille_vignette = $('#vignette_wrapper li').width() + 14;	
	var affiche_vignette = Math.round($('#vignette_wrapper').width()/taille_vignette);	
	var compteur = 0;
	var nb_vignette = $('#vignette_wrapper li').length;
	/*Etape 20 : navigation à gauche*/
	$('#gauche').click(function(){		
		if(compteur<0){
			compteur++;
			var margin = (compteur*taille_vignette);
			$('#vignette_wrapper UL').css('margin-left',margin+'px');
		}
	});
	/*Etape 21 : navigation à droite*/
	$('#droite').click(function(){
		if(compteur>-(nb_vignette-affiche_vignette)){
			compteur--;
			var margin = (compteur*taille_vignette);
			$('#vignette_wrapper UL').css('margin-left',margin+'px');		
		}
	});
});