//Trois déclarations de variables
//On démarre par la diapo 1:)
var numerodiapo = 1;
//Notre slideshow comporte 4 diapo
var nombrediapo = 4;
//Notre slideshow va démarrer au chargement de la page et donc initialisé à 'on';
var diaporama = 'on';

$(document).ready(function(){
	
    //Plutôt que de passer par un timeout on utiliser le plugin jQuery Timers et la fonction everyTime
	//Cette première fonction gère donc le passage d'une image à une autre, toutes les 3 secondes.
	$('#home_diaporama').everyTime(3000,function() {										 
		    if(diaporama=='on'){
			//On vérifie que le diaporama est sur 'on' avant de faire quoi que ce soit puis :
			//1- On enlève à toute les miniatures la classe "selected"
			$('div.small').removeClass('selected');
			//2- On ajoute la classe selected à la miniature correspondant au numéro courant de diapositive
			//via le sélecteur jQuery eq(n)
			$('div.small:eq('+numerodiapo+')').addClass('selected');
			//3- On enlève à toute les diapositives la classe "selected"
			$('div.big').removeClass('selected');
			//4- On ajoute la classe selected à la diapositive courante
			$('div.big:eq('+numerodiapo+')').addClass('selected');
			//Et tout çà dans la limite du nombre de nos diapositives
			if(numerodiapo<(nombrediapo-1)){
			numerodiapo++;
			}
			else{
			numerodiapo=0;
			}
			}
		
	});
	
	//Il reste désormais à gérer les rollovers.
	//Qui doivent interrompre la lecture du slideshow et afficher la bonne image si je
	//Passe la souris sur une miniature ou afficher la légende si je passe sur une grosse image.
	//Cerise sur le gateau, lorsque le rollover se termine, on s'assure de bien relancer le slideshow
	//Là où on l'a laissé.
	
	
	//Roll-Over sur les miniatures.
	$("div.small").hover(
		  function () {
			diaporama = 'off';
			numerodiapo = $('div.small').index(this);
			$('div.big').removeClass('selected');
			$('div.big:eq('+numerodiapo+')').addClass('selected');
			$('div.small').removeClass('selected');
			$(this).addClass('selected');
		  }, 
		  function () {
		    diaporama = 'on';
		  }
		);
		
		//Roll-Over sur les grosses images.
		$("div.big").hover(
		  function () {
			diaporama = 'off';
			numerodiapo = $('div.big').index(this);
			$('p.legend_big').removeClass('selected');
			$(this).children('p').addClass('selected');
		  }, 
		  function () {
		  $('p.legend_big').removeClass('selected');
		  	diaporama = 'on';
		  }
		);
});// JavaScript Document