var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.

var defaultimageheight = 40;	// maximum image size.
var defaultimagewidth = 40;	// maximum image size.

var timer;

var mouse_x = 0;
var mouse_y = 0;

var window_height = 0;

document.onmousemove = suivre_souris1;

function suivre_souris1(e) {
	if (navigator.appName=="Microsoft Internet Explorer") {
		mouse_x = event.clientX + document.body.scrollLeft;
		mouse_y = event.clientY;
		
	}
	else {
		mouse_x = e.pageX;
		mouse_y = e.clientY;
	}
	
}


function gettrailobj(){
if (document.getElementById)
return document.getElementById("preview_div").style
}

function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("preview_div")
}


function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function hidetrail(){	
	gettrailobj().display= "none";
	document.getElementById('preview_div_arrow').style.display = 'none';
	
	gettrailobj().left="-500px"
	clearTimeout(timer);
}

function showtrail(imagename,title,width,height){
	i = imagename
	t = title
	w = width
	h = height
	timer = setTimeout("show('"+i+"',t,w,h);",200);
}
function show(imagename,title,width,height){
	
	window_height = getWindowHeight();
	
	
  	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

	if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {
		( width == 0 ) ? width = defaultimagewidth: '';
		( height == 0 ) ? height = defaultimageheight: '';
			
		width+=0
		height+=0
		defaultimageheight = height
		defaultimagewidth = width
		
		var datas_arrow = setArrowPos(title);
		
		if (datas_arrow['show'] == true) {
		
			if (datas_arrow['hpos'] == 'left') {
				
				var pic_orientation = 'gauche';
				
				if (datas_arrow['idim'] == 'l') {
					newLeft = datas_arrow['left']+=17;
				} else {
					newLeft = datas_arrow['left']+=20;
				}
				
				var marginLeftPic = '8px';
				var marginTopPic = '7px';
				
			} else {
				
				var pic_orientation = 'droite';
				
				if (datas_arrow['idim'] == 'l') {
					newLeft = datas_arrow['left']-324;
				} else {
					newLeft = datas_arrow['left']-262;
				}
				
				
				var marginLeftPic = '-9px';
				var marginTopPic = '11px';
				
			}
			
			if (datas_arrow['idim'] == 'h') {
				
				var main_div_width = '290';
				var main_div_height = '400';
				
				var img_width = '174';
				var img_height = '260';
								
				var marginLeftPic = '-103px';
				
				if (datas_arrow['hpos'] != 'left') {
				
					marginLeftPic = '5px';
				
				}
				
				var pic_dim = 'vert';
				
			} else {
				
				var main_div_width = '333';
				var main_div_height = '232';
				var marginLeftPic = '8px';
				
				if (pic_orientation == 'gauche') {
				
					marginLeftPic = '-6px';
					marginTopPic = '9px';
									
				}
				
				var pic_dim = 'horiz';
				
			}
			document.getElementById('preview_div').style.height = main_div_height+'px';
			
				
			newHTML = '<div style="width:'+ main_div_width +'px;height:'+ main_div_height +'px;background: url(\'img/bulle_rollover_' + pic_dim + '_' + pic_orientation + '.png\') no-repeat;behavior: url(iepngfix.htc);"><div id="loader_container"><div id="loader"><div align="center">Loading image preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';

	    	newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0" style="width:'+img_width+'px;height:'+img_height+'px;margin-left: ' + marginLeftPic+';margin-top: ' + marginTopPic + ';"></div>';
			newHTML = newHTML + '</div>'; 
			
			gettrailobjnostyle().innerHTML = newHTML;
			
			gettrailobj().display="block";
			document.getElementById('preview_div_arrow').style.display = 'block';
			
			var mid_width_center = (getPos(document.getElementById("preview_tof")).x + (document.getElementById("preview_tof").offsetWidth/2));
					
			topLine = getPos(document.getElementById(title)).y;
			
			newTop = datas_arrow['vpos'];
			
			gettrailobj().left=newLeft  + "px";
			gettrailobj().top=newTop + "px";
	
		}

	}
	
}

var arrowId = '';
var arrowStyle = '';
var arrowClassName = '';
var arrowTitle = '';
var arrowWidth = '';
var arrowHeight = '';

// Positionne la fleche et définit son orientation
function setArrowPos(title) {
	
	var return_datas = new Array();
	
	var mid_height = (window_height / 2);
	var wpos = getWindowPos(document.getElementById(title));
	var pos = getPos(document.getElementById(title));
	var elwidth = document.getElementById(title).offsetWidth;
	var elheight = document.getElementById(title).offsetHeight;
	var order_title = document.getElementById('titre_'+title).offsetWidth;
	
	// pour visuel du panier
	elheight = eval('height_'+title);
	elwidth = eval('width_'+title);
	
	var mid_width_center = (getPos(document.getElementById("preview_tof")).x + (document.getElementById("preview_tof").offsetWidth/2));
	
	var picUrl = '';
	
	// Si l'image est dans la partie gauche de l'écran
	if (mid_width_center > mouse_x) {
			
		picUrl = 'img/fleche-gauche.png';
			
		
		return_datas['hpos'] = 'left';
		
		//x_pos = (elwidth-13);
		var depart = 0
		if(mes_commandes) depart = 25;
		else depart = 20;
		
		if(elwidth>elheight) x_pos = order_title + depart;
		else if(elheight>elwidth) x_pos = order_title + depart;
		// Si l'image est dans la partie droite de l'écran
	} else {
		
		return_datas['hpos'] = 'right';
		
		picUrl = 'img/fleche-droite.png';
			
		
		x_pos = -13;
		
	}
	
	
	// Si l'image est plus haute que large
	if (elwidth < elheight) {
		
		return_datas['idim'] = 'h';
		
		// La hauteur de la bulle est de 380 pixels
		var bubble_height = 380;
		
		var half_bubble_height = (bubble_height/2) - 20;
		
		var ywpos = wpos.y;
		
		//alert( half_bubble_height + ' 140 ' + ywpos + ' ' + window_height );
		var pos_bottom_bubble = (half_bubble_height+ 140 + ywpos)-window_height;
		
		var pos_top_bubble = ((ywpos+(elheight/2))-half_bubble_height);
		
		var left = pos.x+x_pos;
		
		return_datas['left'] = left;
		
		// Si l'image dépasse en haut
		if (pos_top_bubble < 0) {
			
			document.getElementById('preview_div_arrow').style.left = left + 'px';
			document.getElementById('preview_div_arrow').style.top = (pos.y+(elheight-26))+'px';
			
			return_datas['show'] = true;
			
			if ( (pos.y+(elheight-26)-document.body.scrollTop) < 7 ) {
				
				return_datas['show'] = false;
				
			}
			
			return_datas['vpos'] = (document.body.scrollTop+1);
			
			// Si l'image dépasse en  bas
		} else if (pos_bottom_bubble > 0) {
			
			document.getElementById('preview_div_arrow').style.left = left + 'px';
			document.getElementById('preview_div_arrow').style.top = (pos.y - 6)+'px';
			
			return_datas['show'] = true;
			
			if ( ((document.body.scrollTop + window_height) - (pos.y - 6) ) < 44 ) {
				
				return_datas['show'] = false;
				
			}
			
			return_datas['vpos'] = ((document.body.scrollTop+window_height)-(bubble_height+11));
			
			// Si l'image est dans le milieu de l'écran
		} else {
			
			return_datas['show'] = true;
			
			document.getElementById('preview_div_arrow').style.left = left+'px';
			//document.getElementById('preview_div_arrow').style.top = (pos.y + (elheight / 2) - 20)+'px';
			//return_datas['vpos'] = (pos.y + (elheight / 2) - half_bubble_height);
			
			
			//pour panier cadre horizontal
			document.getElementById('preview_div_arrow').style.top = (pos.y - 6)+'px';
			return_datas['vpos']=(pos.y - (elheight / 2));
		}
		
		// Si l'image est plus large que haute
	} else {
		
		return_datas['idim'] = 'l';
		
		// La hauteur de la bulle est de 220 pixels
		var bubble_height = 220;
		
		var half_bubble_height = (bubble_height/2) - 20;
		
		var ywpos = wpos.y;
		
		var pos_bottom_bubble = (half_bubble_height+ 140 + ywpos)-window_height;
		
		var pos_top_bubble = ((ywpos+(elheight/2))-half_bubble_height);
		
		var left = pos.x+x_pos;
		
		
		return_datas['left'] = left;
		
		// Si l'image dépasse en haut
		if (pos_top_bubble < 0) {
			
			document.getElementById('preview_div_arrow').style.left = left + 'px';
			document.getElementById('preview_div_arrow').style.top = (pos.y+(elheight-26))+'px';
			
			return_datas['show'] = true;
			
			if ( (pos.y+(elheight-26)-document.body.scrollTop) < 7 ) {
				
				return_datas['show'] = false;
				
			}
			
			return_datas['vpos'] = (document.body.scrollTop+1);
			
			// Si l'image dépasse en  bas
		} else if (pos_bottom_bubble > 0) {
			
			document.getElementById('preview_div_arrow').style.left = left+'px';
			document.getElementById('preview_div_arrow').style.top = (pos.y - 6)+'px';
			
			return_datas['show'] = true;
			
			if ( ((document.body.scrollTop + window_height) - (pos.y - 6) ) < 44 ) {
				
				return_datas['show'] = false;
				
			}
			
			return_datas['vpos'] = ((document.body.scrollTop+window_height)-(bubble_height+11));
			
			// Si l'image est dans le milieu de l'écran
		} else {
			
			return_datas['show'] = true;
			
			document.getElementById('preview_div_arrow').style.left = left+'px';
			/*document.getElementById('preview_div_arrow').style.top = (pos.y + (elheight / 2) - 20)+'px';
			return_datas['vpos'] = (pos.y + (elheight / 2) - half_bubble_height);*/
			
			//pour panier cadre vertical
			document.getElementById('preview_div_arrow').style.top = (pos.y - 6)+'px';
			return_datas['vpos']=(pos.y - (elheight / 2));
			
		}
		
	}
	
	document.getElementById('preview_div_arrow').innerHTML = '<img src="' + picUrl + '" width="33" height="26" id="img_arrow" class="png" onload="fixArrow();" />';
	
	
	return return_datas;
	
}

// Pour IE6, corrige la fleche
function fixArrow() {
	
	if (typeof correctPNG != 'undefined') {
			
		 var img = document.getElementById('img_arrow');
		 var imgName = img.src.toUpperCase()
		 if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
			 var imgID = (img.id) ? "id='" + img.id + "' " : "";
			 var imgClass = (img.className) ? "class='" + img.className + "' " : "";
			 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
			 var imgStyle = "display:inline-block;" + img.style.cssText ;
			 if (img.align == "left") imgStyle = "float:left;" + imgStyle;
			 if (img.align == "right") imgStyle = "float:right;" + imgStyle;
			 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
			 var strNewHTML = "<span " + imgID + imgClass + imgTitle
			 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
		     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
			 
			 img.outerHTML = strNewHTML;
			 
			 
			 i = i-1
		 }
		
		 
			
	}	
}

function fixBubble() {
	
	if (typeof correctPNG != 'undefined') {
			
		 var img = document.getElementById('img_arrow');
		 var imgName = img.src.toUpperCase()
		 if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
			 var imgID = (img.id) ? "id='" + img.id + "' " : "";
			 var imgClass = (img.className) ? "class='" + img.className + "' " : "";
			 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
			 var imgStyle = "display:inline-block;" + img.style.cssText ;
			 if (img.align == "left") imgStyle = "float:left;" + imgStyle;
			 if (img.align == "right") imgStyle = "float:right;" + imgStyle;
			 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
			 var strNewHTML = "<span " + imgID + imgClass + imgTitle
			 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
		     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
			 
			 img.outerHTML = strNewHTML;
			 
			 
			 i = i-1
		 }
		
		 
			
	}	
}


function getWindowHeight() {
    var h = 0;
    if (typeof(window.innerHeight) == 'number') { // Netscape
        h = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
    	
        h = document.documentElement.clientHeight;
    } else if (document.body && document.body.offsetHeight) { //client
        h = document.body.offsetHeight;
    } else if (document.body && document.body.clientHeight) { //client
        h = document.body.offsetHeight;
    }
    
    return h;
}

function setWindowHeight() {
	
	window_height = getWindowHeight();
	
}

if (window.addEventListener) {
	
	if (window.addEventListener("resize", setWindowHeight, false)) {
		
		
	}
	
} else {
	
	window.attachEvent("onresize", setWindowHeight, false);
	
}

function followmouse(e){

	var xcoord=offsetfrommouse[0]
	var ycoord=offsetfrommouse[1]

	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

	if (typeof e != "undefined"){
		if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
			xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
		} else {
			xcoord += e.pageX;
		}
		if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
			ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
		} else {
			ycoord += e.pageY;
		}

	} else if (typeof window.event != "undefined"){
		if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
			xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
		} else {
			xcoord += truebody().scrollLeft+event.clientX
		}
		if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
			ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
		} else {
			ycoord += truebody().scrollTop + event.clientY;
		}
	}
	gettrailobj().left=xcoord+"px"
	gettrailobj().top=ycoord+"px"

}

function getPos (obj) {
	
	var pos = {x: obj.offsetLeft||0, y: obj.offsetTop||0};
		while(obj = obj.offsetParent) {
			pos.x += obj.offsetLeft||0;
			pos.y += obj.offsetTop||0;
		}
	return pos;
}

function getWindowPos (obj) {
	
	var p = getPos(obj);
	p.x -= document.body.scrollLeft;
	p.y -= document.body.scrollTop;
		
	return p;
}

function getSize(obj){
	return {w: obj.offsetWidth||0, h: obj.offsetHeight||0}
}

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}