// ============================================================================
// Une fois les infos sur l'image récupérées, on peut l'afficher
function chargePopup(ajaxReturn){
	
	listePhotos = listePhotos.split(",");

	// Infos sur l'image
	var imgInfos 		= ajaxReturn.split("|");
	var popupSrc 		= imgInfos[0];
	var imgWidth 		= imgInfos[1];
	var imgHeight 	= imgInfos[2];
	var imgTitle 		= imgInfos[3];
	var imgCaption 	= imgInfos[4];
	var imgID 			= imgInfos[5];
	
	// Définition de la clé photo en cours
	var currentKey = getKeyFromID(imgID);
	var nextKey = (currentKey+1 >= listePhotos.length)? 0 : currentKey+1;
	previousKey = (currentKey-1 < 0)? listePhotos.length-1 : currentKey-1;
	
	// Dimensions diverses
	var hauteurTitre = (imgTitle!="")? 20 : 0;
	var hauteurLegende = (imgCaption!="")? 24 : 0;
	
	// Dimensions de la zone visible
	var W = getWidth();
	var H = getHeight();
	
	// 20% de marge
	var marginW = W*20/100;
	var marginH = H*20/100; 
	
	W -= marginW;
	H -= marginH;
	
	// REDIMENSIONNEMENT
	inputFormat  = imgWidth / imgHeight;
	outputFormat = W / H;
	
	if(inputFormat > outputFormat){
		coef  = imgWidth / W;
		largeurImg = W;
		hauteurImg = imgHeight / coef;
	} else if(inputFormat < outputFormat){
		coef  = imgHeight / H;
		hauteurImg = H;
		largeurImg = imgWidth / coef;
	} else if(inputFormat == outputFormat){
		largeurImg = W;
		hauteurImg = H;
	}

largeur = largeurImg;
hauteur = hauteurImg + hauteurTitre + hauteurLegende;
if(hauteurTitre!=0 || hauteurLegende!=0) hauteur += 20;

var titre = "<div style='height:"+hauteurTitre+"px;font-family:Trebuchet ms;font-size:12px;font-weight:bold'>"+imgTitle+"</div>";
var legende = "<div style='line-height:12px;overflow:auto;height:"+hauteurLegende+"px;font-family:Trebuchet ms;font-size:10px'>"+imgCaption+"</div>";
var caption = "<div style='background-color:#ebebeb;padding:10px 20px;margin:0'>"+titre+legende+"</div>";

// AFFICHAGE
	document.getElementById("popup_message").style.width = (document.all)?1+largeur+"px":largeur+"px";
	document.getElementById("popup_message").style.height = (document.all)?1+hauteur+"px":hauteur+"px";
	document.getElementById("popup_message").style.marginLeft = "-"+largeur/2+"px";
	document.getElementById("popup_message").style.marginTop = "-"+hauteur/2+"px";
	// Fermer
	document.getElementById("popup_message").innerHTML = "<a class style='-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;line-height:25px;width:25px;height:25px;font-weight:bold;font-family:Verdana;background:#FFFFFF;font-size:12px;text-decoration:none;text-align:center;left:"+ (largeur-25) +"px;position:absolute;color:#000000;' href='#' onclick='fermePopup();return false;'>X</a>";
	// Suivant
	document.getElementById("popup_message").innerHTML += "<a class style='-moz-border-radius-topleft:10px;-moz-border-radius-bottomleft:10px;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;line-height:100px;height:100px;width:20px;font-weight:bold;font-family:Arial;padding:0 0 0 4px;background:#FFFFFF;font-size:25px;text-decoration:none;text-align:center;top:"+ (hauteurImg/2-50) +"px;left:"+ (largeur-24) +"px;position:absolute;color:#000000;' href='#' onclick='ouvrePopup"+idPopup+"("+listePhotos[nextKey]+");return false;'>&gt;</a>";
	// Précédent
	document.getElementById("popup_message").innerHTML += "<a class style='-moz-border-radius-topright:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;line-height:100px;height:100px;width:20px;font-weight:bold;font-family:Arial;padding:0 4px 0 0;background:#FFFFFF;font-size:25px;text-decoration:none;text-align:center;top:"+ (hauteurImg/2-50) +"px;left:0px;position:absolute;color:#000000;' href='#' onclick='ouvrePopup"+idPopup+"("+listePhotos[previousKey]+");return false;'>&lt;</a>";
	// Photo
	document.getElementById("popup_message").innerHTML += "<img style='display:block;width:"+largeurImg+"px;height:"+hauteurImg+"px;' src='../medias/images/"+popupSrc+"' />";
	
	if(hauteurTitre!=0 || hauteurLegende!=0) document.getElementById("popup_message").innerHTML += caption;
}

// ============================================================================
// Ferme la popup
function fermePopup() {
	var _body = document.getElementById('body');
	var container = document.getElementById('popup_container');
	_body.removeChild(container);
}

// ============================================================================
// On créé la popup
function creerPopup(){
	// Body
	var _body = document.getElementById('body');
	
	// Conteneur
	var container = document.createElement("div");
	// voile
	var voile = document.createElement("div");
	// popup
	var popup = document.createElement("div");
	
	// ID'S
	container.setAttribute("id","popup_container");
	voile.setAttribute("id","popup_voile");
	popup.setAttribute("id","popup_message");
	
	// Dimensions de la zone visible
	W = getWidth();
	H = getHeight(); 
	
	// Récupère le top & left
	T = getTop();
	L = getLeft();
	
	// STYLES
	// IE
	if (document.all) {
		container.style.setAttribute("cssText","position:absolute; left: 0px; top:"+T+"px; width: "+W+"px; height: "+H+"px;z-index: 1001;");
		voile.style.setAttribute("cssText","width: "+W+"px; height: "+H+"px; background: #000000; opacity: 0.6; MozOpacity: 0.6; KhtmlOpacity: 0.6; filter: alpha(opacity=60); z-index: 1;");
		popup.style.setAttribute("cssText","border:1px solid #FFFFFF;position:absolute;left: 50%; top: 50%; background:#FFFFFF;z-index: 2;");
	// FF
	}else{
		container.setAttribute("style","position:absolute; left: 0px; top:"+T+"px; width: "+W+"px; height: "+H+"px;z-index: 1001");
		voile.setAttribute("style","width: "+W+"px; height: "+H+"px; background: #000000; opacity: 0.6; MozOpacity: 0.6; KhtmlOpacity: 0.6; filter: alpha(opacity=60); z-index: 1;");
		popup.setAttribute("style","border:1px solid #FFFFFF;position: fixed;left: 50%; top: 50%; background:#FFFFFF;z-index: 2;");
	}
	
	// Evt au clic sur la popup ou le voile
	container.onclick=fermePopup;
			
	// Ajout au DOM
	container.appendChild(voile);
	container.appendChild(popup);
	_body.appendChild(container);
	
}

// ============================================================================
// Renvoie l'index du tableau correspondant à l'ID de la photo
function getKeyFromID(id){
	for(i=0;i<listePhotos.length;i++){
		if(listePhotos[i]==id) return i;
	}
}

// ============================================================================
// On ajuste le voile quand on redimensionne la fenetre
window.onresize = function(){
	if(document.getElementById('popup_container')){
		var W = getWidth();
		var H = getHeight(); 
		var T = getTop();
		var L = getLeft();
		document.getElementById('popup_container').style.top = T+"px";
		document.getElementById('popup_container').style.left = L+"px";
		
		document.getElementById('popup_container').style.width = W+"px";
		document.getElementById('popup_container').style.height = H+"px";
		document.getElementById('popup_voile').style.width = W+"px";
		document.getElementById('popup_voile').style.height = H+"px";
	}
};

// ============================================================================
// On ajuste le voile quand on scrolle la fenetre
window.onscroll = function(){
	if(document.getElementById('popup_container')){
		var T = getTop();
		var L = getLeft();
		document.getElementById('popup_container').style.top = T+"px";
		document.getElementById('popup_container').style.left = L+"px";
	}
};

// ============================================================================
// récupère la largeur de la zone visible du document
function getWidth(){
	// IE
	if (document.all) {
		return document.documentElement.clientWidth;
	// FF
	}else{
		return window.innerWidth;
	}
}

// ============================================================================
// récupère la hauteur de la zone visible du document
function getHeight(){
	// IE
	if (document.all) {
		return document.documentElement.clientHeight;
	// FF
	}else{
		return window.innerHeight;
	}
}

// ============================================================================
// récupère le top de la zone visible du document
function getTop(){
	if (typeof(window.pageYOffset) != 'undefined'){
   return window.pageYOffset;
	}else if (typeof(document.documentElement.scrollTop) != 'undefined' && document.documentElement.scrollTop > 0){
	 return document.documentElement.scrollTop;
	}else if (typeof(document.body.scrollTop) != 'undefined'){
   return document.body.scrollTop;
	}
}

// ============================================================================
// récupère le left de la zone visible du document
function getLeft(){
	if (typeof(window.pageYOffset) != 'undefined'){
   return window.pageXOffset;
	}else if (typeof(document.documentElement.scrollLeft) != 'undefined' && document.documentElement.scrollLeft > 0){
	 return document.documentElement.scrollLeft;
	}else if (typeof(document.body.scrollLeft) != 'undefined'){
   return document.body.scrollLeft;
	}
}