/* / http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html*/
	jQuery(function($){
		var settings = { 
			thumbListId: "thumbs", 												// *   thumbListId qui représentera l'identifiant donné à notre liste de vignettes dans le code HTML
			imgViewerId: "viewer",  												// *   imgViewerId qui contiendra l'identifiant appliqué au paragraphe nouvellement créé
			activeClass: "active", 												// *   la photo active
            activeTitle: "Photo en cours de visualisation" ,				    // *   la photo active
			loaderTitle: "Chargement en cours",  								// *   le loader
  		    loaderImage: "../images/loadingAnimation.gif"   									// *   le loader
		}; 
		var bigg=document.getElementById('bigg');
		
		// récupère l'url des images
    	var thumbLinks = $("#"+settings.thumbListId).find("a"), 
   		firstThumbLink = thumbLinks.eq(0);
		
		highlight = function(elt){ 
			thumbLinks.removeClass(settings.activeClass).removeAttr("title"); 
			elt.addClass(settings.activeClass).attr("title",settings.activeTitle); 
   	    };
		loader = $(document.createElement("img")).attr({ 
			alt: settings.loaderTitle, 
		 	title: settings.loaderTitle, 
		 	src: settings.loaderImage 
    	});
		
		highlight(firstThumbLink); //appliquera à l'élément qui l'appelle tout ce dont il a besoin pour se faire distinguer. 
		
		//permet de générer une boîte HTML (un paragraphe en l'occurrence) qui fera office de récepteur pour les images grand format. Ce conteneur qu'on nommera viewer va être généré directement après notre liste #thumbs			
		 $("#bigg")                                        // 1.   je récupère l'élément ayant pour identifiant thumbs  grâce au sélecteur $("#thumbs"),je lui applique la méthode after() qui permet de générer un contenu après ce dernier
   				.attr("id",settings.imgViewerId) 								   //3. j'applique à ce nouveau paragraphe créé un identifiant viewer grâce à la méthode attr()
				.append( 
				  $(document.createElement("img")).attr({           	          //crée la grande image grace à l'url récupéré dans firstthumblink
					alt: "", 
					src: firstThumbLink.attr("href") 
				  }) 
				
  		); 
 
																		
 		 var imgViewer = $("#"+settings.imgViewerId);                             //Nous allons également en profiter pour faire de cette image grand format une variable bigPic qui nous servira plus tard. 
		 bigPic = imgViewer.children("img"); 									  // bigPic = image enfant de imgviewer
		 
		 thumbLinks 															  //L'événement click() permet de définir une fonction qui sera déclenchée au clic sur chaque élément ciblé. 
			.click(function(e){ 													  // Nous allons appliquer cette méthode pour tous les liens contenus dans #thumbs, maintenant définis par la propriété thumbLinks: 
			  e.preventDefault(); 												  //La première étape consiste à annuler l'événement par défaut lors du clic sur un lien (représenté par le paramètre e) afin que le navigateur ne suive pas la cible du lien: 
			  var $this = $(this),												  //La vignette cliquée sera référencée par l'objet $(this) lui-même stocké dans une variable $this pour s'abstenir de parcourir plusieurs fois le DOM inutilement. 
		      target = $this.attr("href"); 
		      if (bigPic.attr("src") == target) return; 
			  highlight($this); 
			  imgViewer.html(loader);  
			  bigPic 
			   	.load(function(){ 
					  imgViewer.html($(this).fadeIn(850)); 
				}) 
			   	.attr("src",target);
		}); 
	});
	
	function goficheZoom(photo) { 
	
		$.getScript("includes/thickbox.js");
		
	    // clean le lien avant
		elt=document.getElementById("ficheZoom") ;
		elt_inclus=document.getElementById("lien") ;
		elt_rejete=elt.removeChild(elt_inclus) ;
		
		
		var ficheZoom=document.getElementById('ficheZoom');
		
		var lien = document.createElement("a");
		lien.setAttribute("href", "images/produits/Gimgs/"+photo);
		lien.setAttribute("class", "thickbox");
		lien.setAttribute("id", "lien");
		ficheZoom.appendChild(lien);
		
		var lien=document.getElementById('lien');
		
		
		var loupe = document.createElement("img");
		loupe.setAttribute("src","images/picto_loupe.png");
		loupe.setAttribute("width","18");
		loupe.setAttribute("height","18");
		
		lien.appendChild(loupe);
		
		var linkText=document.createTextNode('Cliquer ici pour zoomer');
		lien.appendChild(linkText);
		
	}