// JavaScript Document

function Page() {
	
/*       recherche des hauteurs des composants de la page affichée     */

	//this.hauteurTop =  browser.GetElementHeight('entete');
	//this.hauteurGauche = browser.GetElementHeight('gauche')+ this.hauteurTop + 10;
	//this.hauteurDroit = browser.GetElementHeight('droit')+ this.hauteurTop + 10;		
	this.hauteurPage = browser.GetElementHeight('body');
	this.hauteurFenetre = browser.GetWindowHeight();	
	//  on détermine la plus grande  hauteur comme hauteur du fond 
	this.hauteur = (this.hauteurFenetre > this.hauteurPage) ? this.hauteurFenetre : this.hauteurPage;


/*       recherche de la largeur de la page       */

	this.largeurFenetre = browser.GetWindowWidth();
	
	
/*      Position dans la page       */

	if (window.pageYOffset) {
		this.scrollH = window.pageYOffset;
		this.scrollG = window.pageXOffset;
	} else {
		this.scrollH = document.body.scrollTop;
		this.scrollG = document.body.scrollLeft;
	}

/* les éléments du dom impliqué */

	this.fond = $('fond');	
	this.chargement = $('chargement');
	this.affichage = $('affichage'); // div contenant l'image pour affichage des images
	this.image = $('image');
	this.article = $('article');
	this.layer_erreur_syst = $('layer_erreur_syst');
	this.layer_erreur = $('layer_erreur');
	this.layer_info = $('layer_info');
	
		
/*	PARAMETRES MODIFIABLE	*/
	
/* paramètre d'affichage des images pouvant être modifié */
	this.cadreImgHauteur = 60;
	this.cadreImgLargeur = 60;
	this.cadreMarginHauteur = 60; // haut
	this.cadreMarginLargeur = 60; // largeur du cadre
	
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Donner les valeur au Layer conteneur
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ 
	this.SetLayer = function (idlayer, width, height){
		this.layer=$(idlayer);
		this.layerHauteur = height;
		this.layerLargeur = width;	
	}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Afficher le fond opacifié
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/  	
	this.AfficheFond = function (){
		this.fond.style.top = 0;
		this.fond.style.left = 0;
		this.fond.style.height = this.hauteur+'px';
		this.fond.style.width = this.largeurFenetre+'px';	
		this.fond.style.display = 'block';
	}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Affichage de l'animation pour le chargement
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/  		
	this.AfficheChargement = function (){
		this.chargement.style.left = this.scrollH + (this.largeurFenetre - this.chargement.width) / 2+'px';
		this.chargement.style.top = this.scrollG + (this.hauteurFenetre - this.chargement.height) / 2+'px';
		this.chargement.style.display = 'block';
		this.fond.style.display = 'block';
	}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Cache layer
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/  	
	this.CacheLayer = function (id_layer){

		$(id_layer).style.display = 'none';
		// on cache le fond si aucun autre layer est affiché	
		if(this.layer_erreur_syst.style.display != 'block' && this.layer_erreur.style.display != 'block' && this.layer_info.style.display != 'block' && this.article.style.display != 'block'&& this.affichage.style.display != 'block'){
			this.fond.style.display = 'none';
		}
		return false;
	}	
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Affichage de l'image
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/  	
	this.AfficheImage = function (imgZoom){
	
		img = new Image();
		img.onload=function() {
			var htmlElt = new Page();
			var imgl = img.width;
			var imgh = img.height;
			if (imgl + htmlElt.cadreImgLargeur > htmlElt.largeurFenetre) {
				imgl = htmlElt.largeurFenetre - htmlElt.cadreImgLargeur;
				imgh = img.height * imgl / img.width;
			}
			if (imgh + htmlElt.cadreImgHauteur > htmlElt.hauteurFenetre) {
				imgh = htmlElt.hauteurFenetre - htmlElt.cadreImgHauteur;
				imgl = img.width * imgh / img.height;
				
			}
			
			htmlElt.affichage.style.top = htmlElt.scrollH + (htmlElt.hauteurFenetre - imgh - htmlElt.cadreMarginHauteur) / 2+'px';
			htmlElt.affichage.style.left = htmlElt.scrollG + (htmlElt.largeurFenetre - imgl - htmlElt.cadreMarginLargeur) / 2+'px';
			htmlElt.affichage.style.width = imgl + htmlElt.cadreMarginLargeur + 'px';
			htmlElt.affichage.style.height = imgh + htmlElt.cadreMarginHauteur + 'px';
			htmlElt.image.src= imgZoom;
			htmlElt.image.width = imgl;
			htmlElt.image.height = imgh;
			htmlElt.affichage.style.display = 'block';
			htmlElt.chargement.style.display = 'none';
			return false;
		}
		img.src= imgZoom;
	
	}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Affichage centré d'un layer
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/  	
	this.AfficheLayer = function (){
	
		this.layer.style.left = this.scrollG + parseInt(this.largeurFenetre - this.layerLargeur) / 2+'px';
		this.layer.style.top = this.scrollH + parseInt(this.hauteurFenetre - this.layerHauteur ) / 2+'px';
		this.layer.style.display = 'block';
		this.fond.style.display = 'block';
		/*alert('scrollH = ' + this.scrollH + '\n ' +
					'largeurFenetre = ' + this.largeurFenetre + '\n  ' +
					'layerLargeur = ' + this.layerLargeur + '\n  ' +
					'layer.style.left = ' + this.layer.style.left);*/
	}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Cache l'image
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/  	
	this.CacheImage = function (){	
		this.fond.style.display = 'none';
		this.affichage.style.display = 'none';
		return false;
	}


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		Deplacement de l'image au centre
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/  	
	this.MouvImgCenter = function (){	
		if (this.fond.style.display != 'block') return;
		if (this.affichage.style.display != 'block') this.affichage = this.chargement;
		
		this.affichage.style.top = this.scrollH + (this.hauteurFenetre - parseInt(this.affichage.style.height) - this.cadreMarginLargeur) / 2+'px';
		this.affichage.style.left = this.scrollG + (this.largeurFenetre - parseInt(this.affichage.style.width) - this.cadreMarginHauteur) / 2+'px';
	}

}// fin class

	
/* POUR LE ZOOM DES IMAGES */
function ViewImage(imgZoom) {
	var page = new Page();	
	// affichage du fond
	page.AfficheFond();
	// Affichage de l'animation pour le chargement
	page.AfficheChargement();
	// affichage de 
	page.AfficheImage(imgZoom);
}

function cacherImage() {
	var page = new Page();	
	page.CacheImage('affichage');
}


function deplacerImage() {
	var page = new Page();	
	page.MouvImgCenter();
	
}