var xOffset=6
var yOffset=5

var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;

if (ie||w3c) {
var laBulle
var laPointe
}

function ietruebody(){ // retourne le bon corps...
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function deplacer(e) {
	if(affiche){
		var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
		var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
		
		var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
		var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
		
		var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
		var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
		
		var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
		
		// modifier la largeur de l'objet s'il est trop grand...
		if(laBulle.offsetWidth > winwidth / 3){
			laBulle.style.width = winwidth / 3
		}
		
		// si la largeur horizontale n'est pas assez grande pour l'info bulle
		if(rightedge < laBulle.offsetWidth){
			// bouge la position horizontale de sa largeur à gauche
			laBulle.style.left = curX - laBulle.offsetWidth + "px"
			laPointe.style.left = curX - laPointe.offsetWidth - 15 + "px"
		} else {
			if(curX < leftedge){
				laBulle.style.left = "5px"
				laPointe.style.left = "15px"
			} else{
		// la position horizontale de la souris
				//var test = document.getElementById("ensemble");
				//var decalX = test.offsetLeft;
				var decalX = curX + xOffset - 20
				laBulle.style.left = decalX + "px"
				laPointe.style.left = decalX + 15 + "px"
			}
		}
	
		// même chose avec la verticale
		if(bottomedge < laBulle.offsetHeight){
			laBulle.style.top = curY - laBulle.offsetHeight - yOffset - laPointe.offsetHeight + "px"
			laPointe.style.top = curY - yOffset - laPointe.offsetHeight - 1 + "px"
			laPointe.className = 'pointe2'
		} else {
			laBulle.style.top = curY + yOffset + 30 + "px"
			laPointe.style.top = curY + yOffset + 31 - laPointe.offsetHeight + "px"
			laPointe.className = 'pointe'
		}
	}
}

function showTooltip(text, titre, img, classe) {
	if (w3c||ie){
	
		if(classe== undefined){
			classe = "infobulle";	
		}
		
		debut = "<div class="+classe+">"; //<div id=\"pointe\" name=\"pointe\" class=pointe></div>
		if(titre == undefined || titre == '') {
			titre = "";
		} else {
			titre = "<h4>"+titre+"</h4>";
		}
		
		if(img == undefined || img == '') {
			img = "";	
		} else {
			img = "<img src=\""+img+"\" /><br />";	
		}

		fin = "</div>";
	
		laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : "";
		laBulle.innerHTML = ""+debut+titre+img+text+fin+"";
		laBulle.style.visibility = "visible";
		laBulle.style.display = "block";
		
		laPointe = document.all ? document.all["pointe"] : document.getElementById ? document.getElementById("pointe") : "";
		laPointe.style.visibility = "visible";
		laPointe.style.display = "block";
		
		affiche = true;
	}
}

function hideTooltip() {
	if (w3c||ie){
		laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : "";
		affiche = false;
		laBulle.style.visibility="hidden";
		laBulle.style.display="none";
		laBulle.style.top = '-100000px';
		laBulle.style.backgroundColor = '';
		laBulle.style.width = '';
		
		laPointe = document.all ? document.all["pointe"] : document.getElementById ? document.getElementById("pointe") : "";
		laPointe.style.visibility="hidden";
		laPointe.style.display="none";
		laPointe.style.top = '-100000px';
		//laPointe.style.backgroundColor = '';
		//laPointe.style.width = '';
	}
}

document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.