// GaleriePhotos.js
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
// Historique de mise à jour
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
// 2009-01-11 : Vincent
//				Création du script
 
 
function GaleriePhotos() {
	this.init = GaleriePhotos_Init;
}
 
 
 
// Crée un nouvel objet GaleriePhotos
function GaleriePhotos_Init ( eThumbnails, oConfig ) {
	// Propriétés
	this.config  = oConfig;
	this.photos  = new Array();
	this.photoCourante = null;
	this.visible = false;
	this.fade = this.config.fade ? true : false;
	this.thumbnails;
	this.contenant;
	this.fenetre;
	this.fond;
	this.blocPhoto;
	this.btPrecedent, this.btSuivant, this.btFermer;
	this.pageCount;
	this.langue = new String();
	
	if ( this.thumbnails = document.getElementById(eThumbnails) ) {
		
		// Méthodes
		this.creer           = GaleriePhotos_Creer;
		this.creerContenant  = GaleriePhotos_CreerContenant;
		this.creerFenetre    = GaleriePhotos_CreerFenetre;
		this.creerFond       = GaleriePhotos_CreerFond;
		this.creerBoutons    = GaleriePhotos_CreerBoutons;
		this.creerContenu    = GaleriePhotos_CreerContenu;
		this.positionner     = GaleriePhotos_Positionner;
		this.afficher        = GaleriePhotos_Afficher;
		this.afficherPhoto   = GaleriePhotos_AfficherPhoto;
		this.ajouterPhotos   = GaleriePhotos_AjouterPhotos;
		
		
		// Définit la langue si possible
		var eBody = document.documentElement.getElementsByTagName("body")[0];
		if ( eBody.className.length )
			this.langue = eBody.className.substring(0, 2);
			
		
		this.ajouterPhotos();
	}
}
 
 
 
// Crée la galerie
function GaleriePhotos_Creer () {
	this.creerContenant();
	this.creerFenetre();
	this.creerFond();
	this.creerBoutons();
	this.creerContenu();
	
	// Ajoute les listener à l'objet
	var me = this;
	if ( window.addEventListener ) {
		window.addEventListener("resize", function(event) { me.positionner(); }, false);
		window.addEventListener("scroll", function(event) { me.positionner(); }, false);
	} else if ( window.attachEvent ) {
		window.attachEvent("onresize", function(event) { me.positionner(); } );
		window.attachEvent("onscroll", function(event) { me.positionner(); } );
	}
}
 
 
 
// Crée le contenant de la galerie
function GaleriePhotos_CreerContenant() {
	this.contenant = document.createElement("div");
	this.contenant.refObject      = this;
	this.contenant.className      = "GaleriePhotos_Contenant";
	this.contenant.style.display  = "none";
	this.contenant.style.position = "absolute";
	this.contenant.style.top      = "0";
	this.contenant.style.left     = "0";
	this.contenant.style.zIndex   = "10000000";
	
	document.documentElement.getElementsByTagName("body")[0].appendChild(this.contenant);
}
 
 
 
// Crée la fenêtre de la galerie
function GaleriePhotos_CreerFenetre() {
	this.fenetre = document.createElement("div");
	this.fenetre.className = "GaleriePhotos_Fenetre";
	this.fenetre.style.position = "absolute";
	this.fenetre.style.zIndex   = "10000002";
	
	this.contenant.appendChild(this.fenetre);
}
 
 
 
// Créee le fond du contenant (celui à qui on peut mettre une couleur ou une image en transparence, genre)
function GaleriePhotos_CreerFond() {
	this.fond = document.createElement("div");
	this.fond.className = "GaleriePhotos_Fond";
	this.fond.style.position = "absolute";
	this.fond.style.top      = "0";
	this.fond.style.left     = "0";
	this.fond.style.zIndex   = "10000001";
	this.fond.style.opacity  = ".85";
	this.fond.style.filter   = "alpha(opacity=85)";
	
	this.fond.oGaleriePhotos = this;
	this.fond.onclick = function() { this.oGaleriePhotos.afficher(false); return false; };
	
	this.contenant.appendChild(this.fond);
}
 
 
 
// Crée les boutons de navigation et de fermeture
function GaleriePhotos_CreerContenu() {
	this.blocPhoto = document.createElement("div");
	this.blocPhoto.className = "GaleriePhotos_BlocPhoto";
	
	
	for ( var cPhotos = 0; cPhotos < this.photos.length; cPhotos++ ) {
		var photo = this.photos[cPhotos];
		
		var conteneurImage = document.createElement("div");
			conteneurImage.style.display = "none";
		
		var img = document.createElement("img");
			img.idPhoto = cPhotos;
			img.src = photo.src;
			
		var description = document.createElement("p");
			description.innerHTML = photo.description;
		
		conteneurImage.appendChild(img);
		conteneurImage.appendChild(description);
		
		this.blocPhoto.appendChild(conteneurImage);
	}
	
	this.fenetre.appendChild(this.blocPhoto);
}
 
 
 
// Crée les boutons de navigation et de fermeture
function GaleriePhotos_CreerBoutons() {
	// Bouton Fermer
	this.btFermer = document.createElement("a");
	this.btFermer.href = "#";
	this.btFermer.className = "GaleriePhotos_Fermer";
	this.btFermer.oGaleriePhotos = this;
	this.btFermer.onclick = function() { this.oGaleriePhotos.afficher(false); return false; };
	var btFermerSpan = document.createElement("span");
		btFermerSpan.appendChild(document.createTextNode(this.config.fermer ? this.config.fermer : libelle = "X"));
	this.btFermer.appendChild(btFermerSpan);
	
	// Bouton Précédent
	this.btPrecedent = document.createElement("a");
	this.btPrecedent.href = "#";
	this.btPrecedent.className = "GaleriePhotos_Precedent";
	this.btPrecedent.oGaleriePhotos = this;
	this.btPrecedent.onclick = function() {
			this.oGaleriePhotos.afficherPhoto(this.oGaleriePhotos.photoCourante - 1);
			return false;
		};
	var btPrecedentSpan = document.createElement("span");
		btPrecedentSpan.appendChild(document.createTextNode(this.config.precedent ? this.config.precedent : libelle = "«"));
	this.btPrecedent.appendChild(btPrecedentSpan);
	
	// Bouton Suivant
	this.btSuivant = document.createElement("a");
	this.btSuivant.href = "#";
	this.btSuivant.className = "GaleriePhotos_Suivant";
	this.btSuivant.oGaleriePhotos = this;
	this.btSuivant.onclick = function() {
			this.oGaleriePhotos.afficherPhoto(this.oGaleriePhotos.photoCourante + 1);
			return false;
		};
	var btSuivantSpan = document.createElement("span");
		btSuivantSpan.appendChild(document.createTextNode(this.config.suivant ? this.config.suivant : libelle = "»"));
	this.btSuivant.appendChild(btSuivantSpan);
	
	
	// Page count
	this.pageCount = document.createElement("span");
	this.pageCount.className = "GaleriePhotos_Count";
	
	
	this.fenetre.appendChild(this.btPrecedent);
	this.fenetre.appendChild(this.pageCount);
	this.fenetre.appendChild(this.btSuivant);
	this.fenetre.appendChild(this.btFermer);
}
 
 
 
// Positionne les éléments de la galerie
function GaleriePhotos_Positionner() {
	if ( this.visible ) {
		this.contenant.style.width  = String(document.documentElement.clientWidth) + "px";
		this.contenant.style.height = String(document.documentElement.clientHeight) + "px";
		this.contenant.style.top    = window.pageYOffset != undefined ? String(window.pageYOffset) + "px" : document.documentElement.scrollTop + "px";
		this.contenant.style.left   = window.pageXOffset != undefined ? String(window.pageXOffset) + "px" : document.documentElement.scrollLeft + "px";
		
		this.fond.style.width  = this.contenant.style.width;
		this.fond.style.height = this.contenant.style.height;
		
		this.fenetre.style.left = String((document.documentElement.clientWidth / 2) - (this.fenetre.offsetWidth / 2)) + "px";
		this.fenetre.style.top  = String((document.documentElement.clientHeight / 2) - (this.fenetre.offsetHeight / 2)) + "px";
	}
}
 
 
 
// Affiche ou masque la galerie
function GaleriePhotos_Afficher( etat ) {
	if ( etat == undefined ) etat = true;
	this.visible = etat;
	
	if ( this.visible ) {
		this.contenant.style.display = "block";
		this.positionner();
	} else
		this.contenant.style.display = "none";
}
 
 
// Affiche l'image demandée
function GaleriePhotos_AfficherPhoto(idPhoto) {
	
	if ( idPhoto >= 0 && idPhoto < this.photos.length ) {
		if ( this.photoCourante != null )
			this.blocPhoto.getElementsByTagName("div")[this.photoCourante].style.display = "none";
		
		this.pageCount.innerHTML = String(idPhoto + 1) + "/" + String(this.photos.length);
		
		this.photoCourante = idPhoto;
		var ePhoto = this.blocPhoto.getElementsByTagName("div")[this.photoCourante];
		
		// Ajoute un style inactif au bouton Précédent s'il s'agit de la première photo
		if ( this.photoCourante == 0 ) {
			this.btPrecedent.className = "GaleriePhotos_Inactif " + this.btPrecedent.className;
			this.btPrecedent.style.opacity = "0";
			this.btPrecedent.style.filter = "alpha(opacity=0)";
		} else {
			this.btPrecedent.className = this.btPrecedent.className.replace(/GaleriePhotos_Inactif/gi, "");
			this.btPrecedent.style.opacity = "1";
			this.btPrecedent.style.filter = "alpha(opacity=100)";
		}
		
		
		// Ajoute un style inactif au bouton Suivant s'il s'agit de la dernière photo
		if ( this.photoCourante == this.photos.length - 1 ) {
			this.btSuivant.className = "GaleriePhotos_Inactif " + this.btSuivant.className;
			this.btSuivant.style.opacity = "0";
			this.btSuivant.style.filter = "alpha(opacity=0)";
		} else {
			this.btSuivant.className = this.btSuivant.className.replace(/GaleriePhotos_Inactif/gi, "");
			this.btSuivant.style.opacity = "1";
			this.btSuivant.style.filter = "alpha(opacity=100)";
		}
		
		
		if ( this.fade ) {
			ePhoto.getElementsByTagName("img")[0].style.opacity = "0";
			ePhoto.getElementsByTagName("img")[0].style.filter = "alpha(opacity=0)";
			ePhoto.getElementsByTagName("img")[0].style.display = "block";
			
			ePhoto.style.display = "block";
			
			var fader = new Fader(ePhoto.getElementsByTagName("img")[0]);
			fader.fadeIn();
		} else
			ePhoto.style.display = "block";
	}
	
	if ( !this.visible ) this.afficher();
}
 
 
 
// Ajoute les photos à la galerie
function GaleriePhotos_AjouterPhotos() {
	var aImg = this.thumbnails.getElementsByTagName("img");
	for ( var cImg = 0; cImg < aImg.length; cImg++ ) {
		aImg[cImg].parentNode.galerieObject = this;
		aImg[cImg].parentNode.photoID = cImg;
		aImg[cImg].parentNode.onclick = function() { this.galerieObject.afficherPhoto(this.photoID); };
		//this.photos.push({src: aImg[cImg].src.replace(/_thumb/gi, ""), description: aImg[cImg].parentNode.getElementsByTagName("p")[0].innerHTML });
		// Remplacement car TYPO3 génère lui même les thumbnails du coup on a pas de contrôle sur le nom
		// j'ai ajouté à la place un nouvel attribut rsrc qui contient la vraie source de l'image
		this.photos.push({src: aImg[cImg].getAttribute('rsrc'), description: aImg[cImg].parentNode.getElementsByTagName("p")[0].innerHTML });
	}
	
	this.creer();
}