$(document).ready(initialiserGalerie);


// ********************
// STRUCTURE DE LA GALERIE
// (Pour ne pas s'y perdre avec les CSS…)
//
// <div id="galerie-visionneuse">
//     <p id="galerie-vignettes">
//         <a href="[grande image]"><img src="[vignette]"></a>
//         ...
//     </p>
//     <div id="galerie-image">
//         <img src="[grande image]">
//         <dl>
//             <dt>[titre de l'œvre]</dt>
//             <dd>[infos sur l'œvre]</dd>
//             <dd>[autres infos]</dd>
//             ...
//         <dl>
//     </div>
// </div>

function initialiserGalerie() {
	// Vérifie s’il y a une galerie à initialiser en premier lieu, autrement ça
	// a l'aire cave à essayer de tourner dans le vide…
	if (document.getElementById("galerie")) {
		var listeImages = document.getElementById("galerie").getElementsByTagName("dl");
		var listePrechargement = new Array(); // liste des grosses images (à être préchargées)
		
		// ****************
		// La galerie à proprement parler avec toutes ses propriétés…
		// ****************
		var galerie = document.createElement("div");
		galerie.conteneurVignettes = document.createElement("p");
		galerie.conteneurImageAffichee = document.createElement("div");
		galerie.imageAffichee = document.createElement("img");
		galerie.infosImageAffichee = document.createElement("dl");
		galerie.listeVignettes = new Array();
		galerie.vignetteActive = 0;
		// …et ses méthodes
		galerie.changerImage = function(noVignette) {
			this.listeVignettes[this.vignetteActive].desactiver();
			this.listeVignettes[noVignette].activer();
			this.vignetteActive = noVignette;
			
			this.afficherImage();
			}
		galerie.afficherImage = function() {
			this.imageAffichee.style.opacity = 0;
			this.imageAffichee.src = this.listeVignettes[this.vignetteActive].href;
			this.infosImageAffichee.innerHTML = "<dt>"+this.listeVignettes[this.vignetteActive].titre+"</dt>\n"+this.listeVignettes[this.vignetteActive].desc;
			
			// Un effet de fade-in jQuerysé pour rendre la transition plus sexy…
			$(this.imageAffichee).fadeTo(500,1);
			}
		
		// Utilisabilité : cliquer sur la grosse image avance d’une image
		galerie.imageAffichee.onclick = function() {
			if (galerie.vignetteActive == galerie.listeVignettes.length-1) {
				galerie.changerImage(0);
				}
			else {
				galerie.changerImage(galerie.vignetteActive+1);
				}
			}
		
		// *************
		// Les vignettes
		// *************
		for (var cpt = 0; cpt<listeImages.length; cpt++) {
			var vignette = listeImages[cpt].getElementsByTagName("a")[0].cloneNode(true);
			
			// Propriétés
			vignette.numero = cpt;
			vignette.titre = listeImages[cpt].getElementsByTagName("dt")[0].innerHTML;
				// (petit nettoyage pour pouvoir récupérer le reste d'un coup…)
				listeImages[cpt].removeChild(listeImages[cpt].getElementsByTagName("dt")[0]);
				listeImages[cpt].removeChild(listeImages[cpt].getElementsByTagName("dd")[0]);
			vignette.desc = listeImages[cpt].innerHTML;
			
			// Méthodes
			vignette.onclick = function() {
				galerie.changerImage(this.numero);
				return false;
				}
			vignette.activer = function() {
				this.className = "vignette-active";
				}
			vignette.desactiver = function() {
				this.removeAttribute("class");
				}
			
			// Insersion dans la galerie
			galerie.listeVignettes[cpt] = vignette;
			galerie.conteneurVignettes.appendChild(vignette);
			
			// Ajout de l'image à la liste de préchargement
			listePrechargement[cpt] = vignette.href;
			}
			
		// **************
		// Démarage du préchargement
		// **************
		prechargerImages(listePrechargement);
		
		// **************
		// Le tout est assemblé et inséré dans le document
		// **************
		galerie.appendChild(galerie.conteneurVignettes);
		galerie.appendChild(galerie.conteneurImageAffichee);
			galerie.conteneurImageAffichee.appendChild(galerie.imageAffichee);
		galerie.conteneurImageAffichee.appendChild(galerie.infosImageAffichee);
		document.getElementById("galerie").parentNode.replaceChild(galerie, document.getElementById("galerie"));
		
		// Quelques attributs utiles…
		galerie.id = "galerie-visionneuse";
		galerie.conteneurVignettes.id = "galerie-vignettes"
		galerie.conteneurImageAffichee.id = "galerie-image";
		galerie.conteneurImageAffichee.title = "Cliquez pour voir l'image suivante";
		
		// Une fois que tout est terminé, la première image s’affiche
		galerie.afficherImage();
		}
	}

// Fonction de préchargement des images, pour éviter que le contenu se palce 
// bizarement pendant que la taille des image est indéterminée
function prechargerImages(listeImages) {
	// Une image bidon qui est sauvagement exploitée juste pour son attribut src…
	var imageBidon = new Image;
	
	// Chaque image de la liste passe dans l'attribut src de l'image bidon pour
	// forcer le navigateur à la mettre en cache
	for(var cpt=0; cpt<listeImages.length; cpt++) {
		imageBidon.src = listeImages[cpt];
		}
	}