$(document).ready(function(){
$("#contenant2").prepend('<div id="vignettes"> vignettes </div><div id="grandes"><a href="#" alt="" id="prec" style="display: none"><img src="img/prec.gif" title="Image précédente" /></a><a href="#" alt="" id="suiv"><img src="img/suiv.gif" title="Image suivante" /></a> <div id="fermer"><a href="#">Retour<img src="img/fermer.gif" title="Retour"></a></div><h1></h1><img src=""></div><div id="cache"></div>');


/*clic sur les images de départ*/
		$("div.carres a").click(function(){
		
		compteur = 0;
		images = $("#preload_" + $(this).attr('title') + " a")
		nb_im = images.length; //nb d'im ds le div de preload
	
		suivant = images.eq(1).attr('alt');

		
		
		
		/*On copie le bon div de preload ds le div vignette*/
			$("#vignettes").html($("#preload_"+$(this).attr('title')).html());
			$("#vignettes a:first").addClass('actif');
			$("#grandes h1").html($(this).attr("alt"));
			
		/*charger la première grande*/
			$("#grandes > img").attr("src",				
				$("#preload_"+$(this).attr("title")+" > a").attr("alt")
			);
		/*affichage*/				
				$("#vignettes").fadeIn("slow",function(){
					$("#cache").fadeIn("slow",function(){
						$("#grandes").fadeIn("fast");
					});
				});
				
			/*mettre les bonnes valeurs pour précédente et suivante*/
			$("#prec").attr('alt',images.eq(compteur-1).attr('alt'));
			$("#suiv").attr('alt',images.eq(compteur+1).attr('alt'));

function actualiser(compteur_){
	/*style de la bonne vignette*/
	$("#vignettes a.actif").removeClass("actif");

	$("#vignettes a[@title="+compteur_+"]").addClass('actif');

	/*Maj des valeurs*/
	$("#suiv").attr('alt',images.eq(compteur_+1).attr('alt'));
	$("#prec").attr('alt',images.eq(compteur_-1).attr('alt'));
	
	/*affichage ou non des bt prec/suiv*/
	if(compteur_ == 0){
		$("#prec").css({display: 'none'});
	}
	else{
		$("#prec").css({display: 'block'});
	}
	
	if(compteur_+1 == nb_im){
		$("#suiv").css({display: "none"});
		}	
	else{
		$("#suiv").css({display: 'block'});
	}	
}


/*action sur les boutons*/
			$("#prec").click(function(){
				$("#grandes > img").attr("src",$(this).attr("alt"));
				compteur --;
				actualiser(compteur);
			});
			
			$("#suiv").click(function(){
				/*affichage gde im*/
				$("#grandes > img").attr("src",$(this).attr("alt"));
				compteur ++;
				actualiser(compteur);
				
			});
		
//lancer au clic sur chaque vignette l'affichage des grandes 
			$("#vignettes a").click(function(){			
				$("#grandes > img").attr("src",$(this).attr("alt"));
				/*actualiser la var compteur*/				
				compteur = parseInt($(this).attr('title'));	
				actualiser(compteur);
			});

			return false;	
		});
		
/*fermer*/	
	$("#fermer, #grandes > img").click(function(){
		$("#cache, #grandes, #vignettes").fadeOut("fast");
		$("#vignettes a, #suiv, #prec").unbind();
		compteur = 0;
		$("#suiv").css({display: 'block'});
		$("#prec").css({display: 'none'}	);
	});

	
});