//A METTRE DANS LE PROGRAMME PRINCIPAL

//var listeImages = Array();
//listeImages[0] = "photo1.jpg";
//listeImages[1] = "photo2.jpg";
//listeImages[2] = "photo3.jpg";	
//var largeur = 77;
//var hauteur = 77;
//var marge = 15;
//var nbImages = 4;
//var origineX = 80;
//var origineY = 300;
//var position = largeur;
//var largeurOpacite = largeur*1.5;
//var pause = 20;
//var pas = 1;

var isRunning = true;

// fonction pour obtenir le chemin de la prochaine image
var nextImage = 0;
function getNextImage()
{
	im = listeImages[nextImage];
	nextImage = (nextImage + 1) % listeImages.length;
	return im;
}

// Affichage des vignettes à leurs positions absolues respectives
function positionnerImages()
{	
	$("img.vignette").css("top", origineY);
	var i=0;
	$("img.vignette").each(function(){
		x = origineX + position + i*(largeur + marge);
		$(this).css("left", x);
		if (x < origineX + largeurOpacite) $(this).fadeTo(0, (x - origineX)/largeurOpacite);		
		if (x > origineX + (nbImages-1)*(largeur+marge)+largeur-largeurOpacite) $(this).fadeTo(0, (origineX + nbImages*largeur + (nbImages-1)*marge - x)/largeurOpacite);
		i++;
	});
	
	$("img.vignette:eq("+(i-1)+")").show();
}

function insererImage()
{
	$("#slideImages").append("<img class='vignette' src='' style='position:absolute; width:"+largeur+"px; height:"+hauteur+"px'/>");
	$("img.vignette:last").bind("mouseenter", function() {
		isRunning=false;
		imBig = $(this).attr('src');
		imBig = imBig.substr(0, imBig.length-4) + "_big.jpg";
		
		var imTmp = new Image;
		var margeLeft, margeTop;		
		imTmp.onload = function() {
			margeLeft = (530 - imTmp.width) / 2;
			margeTop = (290 - imTmp.height) / 2;
			$("#imageBig").css("background", "black url("+imBig+") no-repeat "+margeLeft+"px "+margeTop+"px");
			$("#imageBig").hide().css("visibility", "visible").fadeIn(200);
		};		
		imTmp.src = imBig;
	});
	$("img.vignette:last").bind("mouseleave", function() {
		isRunning=true;
		$("#imageBig").css("background", "black").css("visibility", "hidden");
	});
}

function slideImages()
{
	if (isRunning)
	{
		position -= pas;		
		positionnerImages();
		
		if (position < 0)
		{
			position += largeur+marge;
			$("img.vignette:first").remove();
			insererImage();
			$("img.vignette:last").hide().attr("src", getNextImage());
		}
	}	
	setTimeout(slideImages, pause);
}

function startSlideImage()
{
	// Création des <img> dans body
	for (i=0; i<nbImages; i++) 	insererImage();
	
	// On affecte les sources aux images et on les cache
	$("img.vignette").each(function(){$(this).hide().attr("src", getNextImage());});
	
	// On positionne une première fois les images puis on fait apparaitre le résultat
	positionnerImages();	
	$("img.vignette").show();
	
	// C'est parti pour le défilement !
	setTimeout(slideImages, pause);	
}