// JavaScript Document


			// paramètres
			var vitea= 1100;	// (ms) durée de la transition de l'image arrivante
			var vited= 500;	// (ms) durée de la transition  de l'image sortante
			var fto	= 5000; // (ms) temps avant la première transition
			var nto	= 9000; // (ms) temps entre chaque transition
			var marge = 0;	// (px) éventuelle marge/décoration autour des images . important pour la constance de vitesse 
			var fine = 600;	// (ms) calcul fin du décalage entre les deux mouvements d'une transition

			$(document).ready(function()
			{
				// pour éviter tout effet de "saut" en attendant le window.onload (qui arrive que quand TOUSl es éléments de la page sont chargés), je commence déjà par cacher les images
				
				$('#vitrine li').css('opacity','0.01');
				
			});

			$(window).load(function()   // j'aurais pu utiliser document.onload, mais il faut impérativement que toutes les images soient chargées pour calculer leur hauteur
			{
				// js est compris et notre code interprété, on applique un style supplémentaire
				$('#vitrine').css('overflow','hidden');
				$('#vitrine li').css('opacity','1'); // j'enlève ma béquille précédente
				// je précalcule les offset hors images
				var bayrou = $('#vitrine').width()/2 -marge;	// centrage centriste (horizontal)
				var outd = $('#vitrine').width() +'px';

				// à cet effet, je calcule la largeur de la plus grande image
				outl=[];
				$('#vitrine img').each(function(){ outl.push($(this).width()); });
				var outg = (- marge*2 - Math.max.apply(Math,outl)) +'px';

				var freshen=false;

				$('#vitrine li').each(function(){
					$(this).css('top',172-marge-($(this).find('img').height()/2)+'px'); // centrage vertical . 177 = #vitrine.height / 2
					$(this).css('left',outg); 
				});
				
				var total = $('#vitrine li').size() -1;
				var disp  = 0;


				// on crée des zones fantomes de transition aka boutons minitel
				$('#vitrine').prepend('<p class="controls"><span id="retour">previous /</span><span id="suite"> next</span>');
				

				// on efface le patienteur
				$('#wait').remove();
				// on affiche la première image
				/*
				$('#vitrine li').eq(disp).css('left',bayrou-($('#vitrine li').eq(disp).find('img').width()/2)+'px'); 
				// on lance le premier évènement
				freshen=((new Date().getTime()) +fto);
				setTimeout(function(){ fresh(); },fto);*/
				gs(fto);
				
				$("#retour").click(function()
				{
					gr(fto);
				});
				
				$("#suite").click(function()
				{
					gs(fto);
				});
				
				$(document).keydown(function(e){
					if (e.keyCode == 37){ gr(fto); return false;};
					if (e.keyCode == 39){ gs(fto); return false;};
				});
				
				function gr(w)
				{
					retour();
					freshen=((new Date().getTime()) +w);
					setTimeout(function(){ fresh(); },w);
				}
				
				function gs(w)
				{
					suite();
					freshen=((new Date().getTime()) +w);
					setTimeout(function(){ fresh(); },w);
				}
				
				
				function fresh()
				{
					if (freshen <= (new Date().getTime()))
					{
						// il ne s'est rien passé depuis un bail, je fais un changement spontané
						gs(nto);
					} else {
						// si on a loupé le coche, je relance
						setTimeout(function(){ fresh(); },500);
					}
				}
				
				
				function retour()
				{
					var trans=disp>0?(disp-1):total;
					$("#vitrine li").eq(trans).css('left',outg).animate({ 
						left : bayrou-($("#vitrine li").eq(trans).find('img').width()/2)+'px'
					}, vitea );
					
					setTimeout(function(){
						$("#vitrine li").eq(disp).animate({ 
							left : outd
						}, vited );
						disp=trans;
					}, vitea-(fine+$("#vitrine li").eq(disp).width()/2+$("#vitrine li").eq(trans).width()/2+marge*2));
				}

				function suite()
				{
					var trans=disp<total?(disp+1):0;

					$("#vitrine li").eq(trans).css('left',outd).animate({ 
						left : bayrou-($("#vitrine li").eq(trans).find('img').width()/2)+'px'
					}, vitea );

					setTimeout(function(){
						$("#vitrine li").eq(disp).animate({ 
							left : outg
						}, vited );
						disp=trans;
					}, vitea-(fine+$("#vitrine li").eq(disp).width()/2+$("#vitrine li").eq(trans).width()/2+marge*2));
				}
			});