// PARAMETRES.
var _dir_images = ""; // répertoire de l'image à afficher.
/*
var _xlayer = 50; // position du bord gauche du layer relativement à la page.
var _ylayer = 10; // position du bord haut du layer relativement à la page.
*/
var _couleur_fond = "#ffffff"; // couleur du fond.
var _couleur_titre = "#000000"; // couleur du titre.
var _bordure_titre = "#eeeeee"; // couleur de la bordure autour du titre (pas de bordure indiquer : "").
var _police = "Verdana,Arial,Helvetica,sans serif"; // police du texte.
var _bouton_fermer = "./images/fermer.gif"; // bouton fermer la fenêtre en haut du layer.
var _id_layer = "popup_";
var _haut_titre = 25; // hauteur du titre en pixels (pour déterminer la hauteur de la zone permettant le déplacement).

var imgFalse = './images/check_false.gif';
var imgTrue  = './images/check_true.gif';
var imgNext  = './images/navigate_right.jpg';
var imgBack  = './images/navigate_left.jpg';
var imgCaddie = './images/img_pack/panier.gif';

// VARIABLES GLOBALES.
var nn4 = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
var obj_layer = null;
var larg_image = 0; // largeur de l'image.
var cache = true;
var X,Y,moveX,moveY,offsetX,offsetY;
var b_traine = false; // vrai, lorsqu'on est en train de déplacer le layer.

var Imgs = new Array();

function Add_array_instance(id,x,y)
{
	Imgs[id] = new Array(x,y);
}

// Création de l'objet obj_layer en fonction du navigateur :
// affecte le layer et lui donne son emplacement vertical.
function init_layer(x, y)
{
	if (dom && (document.getElementById(_id_layer))) {
		obj_layer = document.getElementById(_id_layer).style;
		X = iex ? "event.clientX": "e.clientX";
		Y = iex ? "event.clientY" : "e.clientY";
		offsetX = (iex) ? "document.body.scrollLeft" : "pageXOffset";
		offsetY = (iex) ? "document.body.scrollTop" : "pageYOffset";
	}
	else if (iex && (_id_layer)) {
		obj_layer = _id_layer.style;
		X="event.clientX";
		Y="event.clientY";
		offsetX="document.body.scrollLeft";
		offsetY="document.body.scrollTop";
	}
	else if (nn4 && (document.layers[_id_layer])) {
		obj_layer = document.layers[_id_layer];
		X="e.pageX";
		Y="e.pageY";
		offsetX="pageXOffset";
		offsetY="pageYOffset";
		document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
	}
	if (obj_layer) {
		obj_layer.left = x;
		obj_layer.top = y;
	}
}

// écrit le contenu dans le layer et le rend visible.
function contenu_layer(contenu)
{
	if (nn4) {
		obj_layer.document.write(contenu);
		obj_layer.document.close();
		obj_layer.visibility = "visible";
	}
	else if (dom) {
		document.getElementById(_id_layer).innerHTML = contenu;
		obj_layer.visibility = "visible";
	}
	else if (iex) {
		document.all[_id_layer].innerHTML = contenu;
		obj_layer.visibility = "visible";
	}
}

// cache le layer (seulement s'il est visible).
function fermer()
{
	if (!cache) {
		obj_layer.visibility = "hidden";
		cache = true;
	}
}

// positionne correctement le layer si on a fait défilé la page.
function scroll_layer(_xlayer,_ylayer)
{
	obj_layer.left = parseInt(_xlayer);
	obj_layer.top = parseInt(_ylayer);
}

// Affiche le titre.
function affiche_titre(id,texte,check_option,soustitre)
{
	var ch_texte = "";
	// si on a défini une bordure autour du titre, on entoure celui-ci de 2 tableaux imbriqués.
	// pour simuler une bordure : le 1er de la couleur de la bordure, le 2nd de la couleur du fond.
	// on écrit le titre.
	ch_texte += "<p><img src='"+imgBack+"' class='img_nav' alt='Précédente' onclick='Back_img("+id+","+check_option+","+soustitre+")'>";
	ch_texte += "<img src='"+imgNext+"' class='img_nav' alt='Suivante' onclick='Next_img("+id+","+check_option+","+soustitre+")'>";

	// puis le bouton de fermeture de la fenêtre.
	ch_texte += "<a href='javascript:fermer()'><img src='" + _bouton_fermer + "' class='img_nav' style='margin-right:4px;' alt='Fermer'></a>";
	ch_texte += "</p>";

	return ch_texte;
}

// Function add to caddie.
function add_to_caddie(id)
{
	document.forms['form_add_to_caddie'].elements['pop'].value = id;
	document.forms['form_add_to_caddie'].elements['cmded[]'].value = document.getElementById("check_"+id).value;
	
	document.forms['form_add_to_caddie'].submit();
}

// Affiche un sous-titre (en bas de la page).
function affiche_soustitre(texte,id)
{
	var txt = "";
	txt += "<tr><td align='center'" + (_bordure_titre ? " colspan='2'>" : ">") + "<font color='" + _couleur_titre + "' face='";
	txt += _police + "' size='2'><input type='button' onclick='add_to_caddie("+id+")' class='styform' value='Ajouter les images selectionnées dans le panier'></font></td></tr>";
	
	return txt;
}

// Next & Back functions.
function Next_img(id,check_option,soustitre)
{
	id++;
	if(document.getElementById("img_"+id))
	{
		agrandir_image(id, check_option, '', soustitre);
	}
}

function Back_img(id,check_option,soustitre)
{
	id--;
	if(id > 0 && document.getElementById("img_"+id))
	{
		agrandir_image(id, check_option, '', soustitre);
	}
}

// CheckChange
function checkChange(id) {
	var Input = document.getElementById("check_"+id);
	var InputBut = document.getElementById("input_"+id);
	
	if(Input.checked) {
		Input.checked = '';
		InputBut.value = "Sélectionner";
		document.getElementById('checkImage_'+id).src=imgFalse;
	} else {
		Input.checked = 'checked';
		InputBut.value = "Désélectionner";
		document.getElementById('checkImage_'+id).src=imgTrue;
	}
}

// CheckGetChange
function checkGetChange(id) {
	var Input = document.getElementById("check_"+id);
	var InputBut = document.getElementById("input_"+id);
	
	if(Input) {	
		if(Input.checked) {
			document.getElementById('checkImage_'+id).src=imgTrue;
			InputBut.value = "Désélectionner";
		} else {
			document.getElementById('checkImage_'+id).src=imgFalse;
			InputBut.value = "Sélectionner";
		}
	}
	else {
		document.getElementById('checkImage_'+id).src=imgCaddie;
		InputBut.style.display = 'none';
	}
}

// agrandir_image
// affiche une image en surimpression.
// avec un texte au-dessus et éventuellement un sous-titre en bas.
// 4 arguments : l'id image, option_ckeck : afficher ou pas la case à cocher, le titre (en haut) et le sous-titre (en bas).

function agrandir_image(id, check_option, titre, soustitre)
{
	// reinitialise le layer.
	
	if(!document.getElementById("img_"+id)) return;
	
	var Imgx = Imgs[id][0];
	var Imgy = Imgs[id][1];
	
	var fimage = document.getElementById("img_"+id).value;
	
	titre = "Aperçu...";
	
	var windowWidth, windowHeight;
  
	if (self.innerHeight) {	// all except Explorer.
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode.
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers.
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict.
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) { // all other Explorers.
		yScroll = document.body.scrollTop;
	}
  
	x = (windowWidth  - Imgx)/2;
	y = (windowHeight - Imgy)/2;
	
	x = parseInt(x);
	y = parseInt(y);
	
	y += yScroll;
	
	init_layer(x,y);
	scroll_layer(x,y);
	
	document.getElementById("popup_").style.top = y+"px";
	document.getElementById("popup_").style.left = x+"px";
	
	// si le layer existe, on affiche titre et image dans un tableau de fond _couleur_fond (défini dans les paramètres).
	if (obj_layer) {
		obj_layer.left = x;
		obj_layer.top = y;
		larg_image = Imgx;
		
		cache = false;
		var ch_texte = '<div class="popup_nav">';

		// affiche le titre en haut.
		
		// affiche l'image.

		ch_texte += "<img src='" + _dir_images + fimage + "' width='"+Imgx+"' height='"+Imgy+"'>";
		ch_texte += affiche_titre(id,titre,check_option,soustitre);
		// if (soustitre) ch_texte += affiche_soustitre(soustitre,id);
		ch_texte += "</div>";
		
		// replace le layer, si on a fait défilé la fenêtre;
		// scroll_layer(x,y);
		// affecte ch_texte au contenu du layer;
		contenu_layer(ch_texte);
		if(check_option) checkGetChange(id);
	}
}

// DEPLACEMENT DU LAYER AVEC LA SOURIS.
// initialisation lorsqu'on appuye sur le bouton de la souris (début du déplacement).
// l'argument "e" est nécessaire pour Netscape 4.

function init_traine(e)
{
	if (obj_layer && !cache) {
		var Xin = eval(X);
		var Yin = eval(Y);
		var L = parseFloat(obj_layer.left);
		var T = parseFloat(obj_layer.top);
		
		var offX = (nn4)?0 : eval(offsetX);
		var offY = (nn4)?0 : eval(offsetY);
		// détermine si la souris est dans la zone supérieure du layer.
		/*
		if (Xin>(L-offX) && Xin<(L-offX+larg_image) && Yin>(T-offY) && Yin<(T-offY+_haut_titre)) {
			b_traine = true;
			moveX = Xin-L;
			moveY = Yin-T;
		}
		else b_traine = false;
		*/
	}
	else b_traine = false;
}

function stop_traine()
{
	if (b_traine) {
		moveX = null;
		moveY = null;
		b_traine = false;
	}
}

function traine_layer(e)
{
	if (b_traine) {
		var Xin = eval(X);
		var Yin = eval(Y);
		// déplacement.
		var Ltop = Yin - moveY;
		var Lleft = Xin - moveX;
		// alert(Ltop+" "+Lleft);
		obj_layer.top = Ltop;
		obj_layer.left = Lleft;
	}
}

document.onmousedown = init_traine;
document.onmousemove = traine_layer;
document.onmouseup = stop_traine;