var enabletip = false ; //la fonctionnalite boite de dialogue est-elle activee ou non
var ie = document.all ; //script execute sur IE ou non
var ns6 = document.getElementById && ! document.all ; //script execute sur FF ou non
var dhtmltooltip = ""; //l'objet boite de dialogue
var curX = ""; //position X de la souris
var curY = ""; //position Y de la souris
var timeMasque = ""; //la variable correspondant au setTimeout de la fonction masque()
var ratio = 2; //rapport entre largeur de la grande image et largeur de la petite image ici 800 et 400


/** #########################################
* Permet de recuperer l'objet dhtmltooltipId. Cette objet est une boite de dialogue qui va suivre les mouvements de la souris
* @params :
*    - dhtmltooltipId : l'id du bloc correspondant a cette boite
*    - targetparent : la fonction est-elle appele d'une iframe
*/
function getHtmlToolTip(dhtmltooltipId, targetparent) {
	var tipobj;
	
	//cas d'un appel depuis une iframe
	if (targetparent) {
		if (parent.document.getElementById) {
			tipobj = parent.document.getElementById(dhtmltooltipId);
		} 
		else if (document.all) {
			tipobj = document.all(dhtmltooltipId);
		} 
		else {
			tipobj = document.dhtmltooltipId;
		}
	}
	//cas d'un appel en pleine page else {
	else{	
		if (document.getElementById) {
			tipobj = document.getElementById(dhtmltooltipId);
		} else if (document.all) {
			tipobj = document.all(dhtmltooltipId);
		} else {
			tipobj = document.dhtmltooltipId;
		}
	}
	
	dhtmltooltip = tipobj
	return tipobj;
}

/** #########################################
* Permet de recuperer l'objet BODY de la page html
*/
function ietruebody() {
	return (document.compatMode && document.compatMode != "BackCompat")? document.documentElement: document.body
}

/** #########################################
* Permet de copier un texte dans la boite de dialogue
*@params:
*    - thetext : texte a afficher
*    - thecolor : couleur de fond de la boite de dialogue
*    - thewidth : taille en largeur de la boite
*    =================> N'EST PLUS UTILISE
*/
function ddrivetip(thetext, thecolor, thewidth) {
	var tipobj = getHtmlToolTip();	//recuperation de la boite de dialogue
	
	if (typeof thewidth != "undefined") tipobj.style.width = thewidth + "px";	//on fixe la taille en largeur de la boite
	if (typeof thecolor != "undefined" && thecolor != "") tipobj.style.backgroundColor = thecolor;	//on fixe la couleur de fond
	tipobj.innerHTML = thetext;	//on copie le texte dans la boite
	enabletip = true;	//on active le mouvement de la boite en fonction de la souris
	return false
}

/** #########################################
* Permet de copier le contenu d'un bloc div dans la boite de dialogue
*@params:
*    - imgObj : l'objet image sur lequel est appele cette fonction (FACULTATIF, peut valoir "")
*    - divId : l'id du bloc a copier dans la boite de dialogue
*    - thecolor : couleur de fond de la boite de dialogue
*    - thewidth : taille en largeur de la boite
*    - dhtmltooltipId : l'identifiant de la boite de dialogue
*    - targetparent : appel du script depuis une iframe
*/
function ddrivetip2(imgObj, divId, thecolor, thewidth, dhtmltooltipId, targetparent) {
	document.onmousemove = positiontip;
	//on lance le calcul du positionnement de la souris
	
	var tipobj = getHtmlToolTip(dhtmltooltipId, targetparent);
	//recuperation de la boite de dialogue
	
	if (typeof thewidth != "undefined") tipobj.style.width = thewidth + "px";
	//on fixe la taille en largeur de la boite
	if (typeof thecolor != "undefined" && thecolor != "") tipobj.style.backgroundColor = thecolor;
	//on fixe la couleur de fond
	
	var divObj = document.getElementById(divId);
	//on recuperer le bloc div a copier
	
	if (divObj != null) {
		tipobj.innerHTML = divObj.innerHTML;
		//on copier le contenu du bloc div dans la boite de dialogue
		
		//Si la fonction a ete appele depuis une image, on desactive le texte alternatif sur cette image
		if (typeof imgObj == "string") {
			var imageObj = document.getElementById(imgObj);
			if (imageObj) {
				imageObj.alt = "";
				imageObj.title = "";
			}
		} else {
			if (imgObj) {
				imgObj.alt = "";
				imgObj.title = "";
			}
		}
		
		enabletip = true;
		//on active le mouvement de la boite en fonction de la souris
		return false
	}
}

/** #########################################
* Permet de calculer la position X et Y de la souris
*@params:
*    - e : l'evenement
*/
function positioncurseur(e) {
	curX =(ns6)? e.pageX: event.clientX + ietruebody().scrollLeft;
	curY =(ns6)? e.pageY: event.clientY + ietruebody().scrollTop;
}


/** #########################################
* Permet de calculer la position X et Y de la souris et d'afficher la boite de dialogue aupres du pointeur
*@params:
*    - e : l'evenement
*/
function positiontip(e) {
	var tipobj = dhtmltooltip;
	//boite de dialogue
	
	if (enabletip) {
		positioncurseur(e);
		
		var offsetxpoint = -300; //placement x de la souris par rapport a la boite
		var offsetypoint = 15; //placement y de la souris par rapport a la boite
		
		if (typeof isPageFamille != "undefined" && isPageFamille) {
			offsetxpoint = -250;			//placement x de la souris par rapport a la boite
			offsetypoint = -525;			//placement y de la souris par rapport a la boite
			
			var curXTop = (screen.width - 1024)/2 ; // Position du curseur X dans le coin en haut à gauche de l'image
			var positionScreenCurX = (ns6)? e.pageX: event.clientX + ietruebody().scrollLeft;
			
			var positionImageCurX = positionScreenCurX - curXTop;
			if (positionImageCurX > 500) {
				offsetxpoint = - 450;
			}
			
			if(getElt("#vignettes").html()){
				offsetypoint = -700 ;
			}
		}
		
		var rightedge = ie && ! window.opera? ietruebody().clientWidth - event.clientX - offsetxpoint: window.innerWidth - e.clientX - offsetxpoint - 20
		var bottomedge = ie && ! window.opera? ietruebody().clientHeight - event.clientY - offsetypoint: window.innerHeight - e.clientY - offsetypoint - 20
		
		var leftedge =(offsetxpoint < 0)? offsetxpoint *(- 1): - 1000
		
		if (rightedge < tipobj.offsetWidth) {
			tipobj.style.left = ie? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + "px": window.pageXOffset + e.clientX - tipobj.offsetWidth + "px"
		} else if (curX < leftedge) {
			tipobj.style.left = "5px"
		} else {
			tipobj.style.left = curX + offsetxpoint + "px"
		}
		if (bottomedge < tipobj.offsetHeight) {
			tipobj.style.top = ie? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + "px": window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + "px"
		} else {
			tipobj.style.top = curY + offsetypoint + "px"
		}
		
		tipobj.style.visibility = "visible"
	}
}

/** #########################################
* Permet de cacher la boite de dialogue
*@params:
*    - dhtmltooltipId : l'identifiant de la boite de dialogue
*    - targetparent : appel du script depuis une iframe
*/
function hideddrivetip(dhtmltooltipId, targetparent) {
	var tipobj = getHtmlToolTip(dhtmltooltipId, targetparent);
	
	//on reinitialise les donnees de la boite de dialogue
	enabletip = false;
	tipobj.style.visibility = "hidden";
	tipobj.style.left = "-1000px";
	tipobj.style.backgroundColor = '';
	tipobj.style.width = '0px';
	tipobj.innerHTML = "";
	
	curX = "";
	curY = "";
}

/** #########################################
* Permet de bouger l'image HD en fonction de l'image SD
* Cette fonction utilise la position du curseur curX et curY
*/
var initMasque = true;
var decalageX = 50; // Position du curseur X dans le coin en haut à gauche de l'image

var curXTop = 0 ;//(document.body.clientWidth - 1024)/2 + decalageX ; 
var curYTop = 147; //Position du curseur Y dans le coin en haut à gauche de l'image
var isAfficheZoomHd = '1' ;


function masque(e) {
	if (typeof isAfficheZoomHd != "undefined" && isAfficheZoomHd == '1') {
		if (initMasque) {			
			//on affiche le bloc zoom
			displayBlocId("bloczoom");
			
			curXTop = (document.body.clientWidth - 1024)/2 + decalageX ;
			
			//on cache les avis oxylane
			var avisBloc = getElement("oxylaneRecapAvis");
			if (avisBloc && avisBloc.style.display != "none") {
				isAfficheAvis = true;
				var oxylaneBloc = getElement("oxylaneRecapAvis");
				if (oxylaneBloc) {
					oxylaneBloc.style.visibility = "hidden";
				}
			}
			
			//on cache les prix
			var prixBloc = getElement("libelle_prix");
			if (prixBloc && prixBloc.style.display != "none") {
				isAffichePrix = true;
				hideBloc(prixBloc);
			}
			
			initMasque = false;
		}
		var cadrezoom = getElement("cadrezoom");
		cadrezoom.onmousemove = masque;
				
		//on lance le calcul du positionnement de la souris
		if (e || typeof event != "undefined") {
			var positionScreenCurX = (ns6)? e.pageX: event.clientX + ietruebody().scrollLeft;
			var positionScreenCurY = (ns6)? e.pageY: event.clientY + ietruebody().scrollTop;			
			
			var positionImageCurX = positionScreenCurX - curXTop;
			var positionImageCurY = positionScreenCurY - curYTop;

			var nouvellePositionImageCurX = positionImageCurX - 100;
			var nouvellePositionImageCurY = positionImageCurY - 100;
			
			//on va determiner le positionnement du cadre
			if (cadrezoom) {
				//On rajoute l'effet du cadre pour zoomer
				cadrezoom.style.border = "1px solid #666";
				cadrezoom.style.width = "200px";
				cadrezoom.style.height = "200px";
				cadrezoom.style.backgroundColor = "#eee";
				
				if (positionImageCurY < 100) {
					nouvellePositionImageCurY = 0;
				}
				if (positionImageCurY > 300) {
					nouvellePositionImageCurY = 200;
				}
				if (positionImageCurX < 100) {
					nouvellePositionImageCurX = 0;
				}
				if (positionImageCurX > 300) {
					nouvellePositionImageCurX = 200;
				}
				cadrezoom.style.left = nouvellePositionImageCurX + "px";
				cadrezoom.style.top = nouvellePositionImageCurY + "px";
			}
			
			//on va maintenant determiner le positionnement du zoom HD
			var zoomHDBgX = nouvellePositionImageCurX * 2;
			var zoomHDBgY = nouvellePositionImageCurY * 2;
			
			document.getElementById("zoom").style.backgroundPosition = "-" + zoomHDBgX + "px -" + zoomHDBgY + "px";
		}
	} else {
		if (curX == "" && curY == "") {
			document.onmousemove = positioncurseur;
			//on lance le calcul du positionnement de la souris
		}
		var positionPointeur = (screen.height * 100)/1024 ; // la position du pointeur est calculee en fonction de la resolution 1024px en hauteur
		timeMasque = setTimeout("masque()", 10);
		var bgX = (curX - positionPointeur) * - ratio;
		//position du background en abscisse
		bgX = bgX + ietruebody().scrollLeft * ratio;
		//position du background en abscisse + positionnement du scroll
		var bgY = (curY - positionPointeur) * - ratio;
		//position du background en ordonnee
		bgY = bgY + ietruebody().scrollTop * ratio;
		//position du background en ordonnee + positionnement du scroll
		document.getElementById("zoom").style.backgroundPosition = bgX + "px " + bgY + "px";
	}
}


/** #########################################
* Permet de detruire l'appel a la fonction masque
*/
function deactiveMasque() {
	if (typeof isAfficheZoomHd != "undefined" && isAfficheZoomHd == '1') {
		initMasque = true;
		var cadrezoom = getElement("cadrezoom");
		if (cadrezoom) {
			cadrezoom.style.border = "0px";
			cadrezoom.style.width = "400px";
			cadrezoom.style.height = "400px";
			cadrezoom.style.backgroundColor = "transparent";
			cadrezoom.style.left = "0px";
			cadrezoom.style.top = "0px";
		}
		
		//on cache le bloc zoom
		hideBlocId("bloczoom");
		
		//on reaffiche les avis oxylane
		if (isAfficheAvis) {
			if (getElement("oxylaneRecapAvis")) {
				var oxylaneBloc = getElement("oxylaneRecapAvis");
				if (oxylaneBloc) {
					oxylaneBloc.style.visibility = "visible";
				}
			}
		}
		
		//on reaffiche les prix
		var prixBloc = getElement("libelle_prix");
		if (prixBloc) {
			displayBloc(prixBloc);
		}
	} else {
		clearTimeout(timeMasque);
	}
}

function affichetooltip(imgObj, divId, thecolor, thewidth, targetparent) {
	return ddrivetip2(imgObj, divId, thecolor, thewidth, 'dhtmltooltip2', targetparent);
}

function cachetooltip(divId, targetparent) {
	return hideddrivetip('dhtmltooltip2', targetparent);
}