$(document).ready(function(){
	//Trois déclarations de variables
	//On démarre par la diapo 1:)
	var numerodiapo = 1;
	//Notre slideshow comporte 4 diapo
	var nombrediapo = $("#questions li.small").size();
	//Notre slideshow va démarrer au chargement de la page et donc initialisé à 'on';
	var diaporama = 'on';
	
    //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.
	$('#faq').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"
			$('li.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)
			$('li.small:eq('+numerodiapo+')').addClass('selected');
			//3- On enlève à toute les diapositives la classe "selected"
			$('li.big').removeClass('selected');
			//4- On ajoute la classe selected à la diapositive courante
			$('li.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.
	$("li.small").hover(
		  function () {
			diaporama = 'off';
			numerodiapo = $('li.small').index(this);
			$('li.big').removeClass('selected');
			$('li.big:eq('+numerodiapo+')').addClass('selected');
			$('li.small').removeClass('selected');
			$(this).addClass('selected');
		  }, 
		  function () {
		    diaporama = 'on';
		  }
		);
		
		//Roll-Over sur les grosses images.
		$("li.big").hover(
		  function () {
			diaporama = 'off';
			numerodiapo = $('li.big').index(this);
			//$('p.legend_big').removeClass('selected');
			//$(this).children('p').addClass('selected');
		  }, 
		  function () {
		    //$('p.legend_big').removeClass('selected');
		  	diaporama = 'on';
		  }
		);
});