var xOffset = 6;
var yOffset = 10;

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
}

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) - document.documentElement.clientWidth / 2;
		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) + laBulle.offsetWidth / 2
		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 / 2) + "px"
		} 
		else 
		{
			if(curX < leftedge)
			{
				laBulle.style.left = "5px"
			}
			else
			{
				// la position horizontale de la souris
				laBulle.style.left = curX + xOffset + "px"
			}
		}

		// même chose avec la verticale
		if(bottomedge < laBulle.offsetHeight)
		{
			laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
		} 
		else 
		{
			laBulle.style.top = curY + yOffset + "px"
		}
	}
}
function showTooltip(bulle_id) 
{
	if (w3c || ie)
	{
		laBulle = document.all ? document.all[bulle_id] : document.getElementById ? document.getElementById(bulle_id) : ""
		laBulle.style.display = "block"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
		affiche = true;
	}
}

function hideTooltip() 
{
	if (w3c || ie)
	{
		affiche = false
		laBulle.style.display="none" // avoid the IE6 cache optimisation with hidden blocks
	}
}

function mouseoverFct(id) 
{
	var target = null;

/*	if (event.target)
		target = event.target;
	else if (event.srcElement) 
		target = event.srcElement;

	title = target.title;*/
	
	showTooltip(id);
}

function mouseoutFct() {
	hideTooltip();
}

function browseNodesForBulles(element)
{
	var nodes = element.childNodes;
	var i = 0;
	for (i = 0; i < nodes.length; i++)
	{
		node = nodes[i];
		if (node.attributes)
		{
			for (j = 0; j < node.attributes.length; j++)
			{
				attribute = node.attributes[j];
				if (node.nodeName.toLowerCase() == "a" && 
					attribute.nodeName.toLowerCase() == "class" && 
					attribute.nodeValue.toLowerCase() == "bulle")
				{
					var title = null;
					for (k = 0; k < node.attributes.length; k++)
					{
						attribute = node.attributes[k];
						if (attribute.nodeName.toLowerCase() == "title")
						{
							title = attribute.nodeValue;
							attribute.nodeValue = "";
						}
					}
					if (node.addEventListener) 
					{
						node.addEventListener ("mouseover", function(){mouseoverFct(title)}, false);
						node.addEventListener ("mouseout", mouseoutFct, false);
					} 
					else if (node.attachEvent) 
					{
						node.attachEvent ("onmouseover", function(){mouseoverFct(title)});
						node.attachEvent ("onmouseout", mouseoutFct);
					} else 
					{
						node.onmouseover = function(){mouseoverFct(title)};
						node.onmouseout = mouseoutFct;
					}
					node.href = "javascript:return false";
					node.href = "javascript:return false";
				}					
			}
		}
		browseNodesForBulles(node);
	}
}

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