/**
*
* Can show a tooltip over an element
* Content of tooltip is the title attribute value of the element
* copyright 2004 Laurent Jouanneau. http://ljouanneau.com/soft/javascript
* release under LGPL Licence
* works with dom2 compliance browser, and IE6. perhaps IE5 or IE4.. not Nestcape 4
*
* To use it :
* 1.include this script on your page
* 2.insert this element somewhere in your page
* <div id="tooltip"></div>
* 3. style it in your CSS stylesheet (set color, background etc..). You must set
* this two style too :
* div#tooltip { position:absolute; visibility:hidden; ... }
* 4.the end. test it ! :-)
*
*/


// create the tooltip object
function tooltip(){}

// setup properties of tooltip object
tooltip.id="infobulle";
tooltip.offsetx = -55; //position axiale de la bulle
tooltip.offsety = -40; //position verticale de la bulle
tooltip.x = 0;
tooltip.y = 0;
tooltip.snow = 0;
tooltip.tooltipElement=null;
tooltip.title_saved='';
tooltip.saveonmouseover=null;
tooltip.ie4 = (document.all)? true:false; // check if ie4
tooltip.ie5 = false;
if(tooltip.ie4) tooltip.ie5 = (navigator.userAgent.indexOf('MSIE 5')>0 || navigator.userAgent.indexOf('MSIE 6')>0);
tooltip.dom2 = ((document.getElementById) && !(tooltip.ie4||tooltip.ie5))? true:false; // check the W3C DOM level2 compliance. ie4, ie5, ns4 are not dom level2 compliance !! grrrr >:-(


/**
* Open ToolTip. The title attribute of the htmlelement is the text of the tooltip
* Call this method on the mouseover event on your htmlelement
* ex : <div id="myHtmlElement" onmouseover="tooltip.show(this)"...></div>
*/
tooltip.show = function (htmlelement) {

if ( this.ie4 || this.dom2 ) {
// we save text of title attribute to avoid the showing of tooltip generated by browser
text=htmlelement.getAttribute("title");
this.title_saved=text;
htmlelement.setAttribute("title","");
}
if(this.dom2){
this.tooltipElement = document.getElementById(this.id);
this.saveonmouseover=document.onmousemove;
document.onmousemove = this.mouseMove;
}else if ( this.ie4 ) {
this.tooltipElement = document.all[this.id].style;
this.saveonmouseover=document.onmousemove;
document.onmousemove = this.mouseMove;
}

if ( this.ie4 || this.dom2 ) {
if(this.ie4) document.all[this.id].innerHTML = text;
else if(this.dom2) document.getElementById(this.id).innerHTML=text;

this.moveTo(this.x + this.offsetx , this.y + this.offsety);

if(this.ie4) this.tooltipElement.visibility = "visible";
else if(this.dom2) this.tooltipElement.style.visibility ="visible";
}
return false;
}

/**
* hide tooltip
* call this method on the mouseout event of the html element
* ex : <div id="myHtmlElement" ... onmouseout="tooltip.hide(this)"></div>
*/
tooltip.hide = function (htmlelement) {
if ( this.ie4 || this.dom2 ) {
htmlelement.setAttribute("title",this.title_saved);
this.title_saved="";

if(this.ie4) this.tooltipElement.visibility = "hidden";
else if(this.dom2) this.tooltipElement.style.visibility = "hidden";

document.onmousemove=this.saveonmouseover;
}
}



// Moves the tooltip element
tooltip.mouseMove = function (e) {
// we don't use "this", but tooltip because this method is assign to an event of document
// and so is dreferenced

if(tooltip.ie4 || tooltip.dom2){

if(tooltip.dom2){
tooltip.x = e.pageX;
tooltip.y = e.pageY;
}else{
if(tooltip.ie4) { tooltip.x = event.x; tooltip.y = event.y; }
if(tooltip.ie5) { tooltip.x = event.x + document.body.scrollLeft;
tooltip.y = event.y + document.body.scrollTop; }
}
tooltip.moveTo( tooltip.x +tooltip.offsetx , tooltip.y + tooltip.offsety);
}
}

// Move the tooltip element
tooltip.moveTo = function (xL,yL) {
if(this.dom2){
this.tooltipElement.style.left = xL +"px";
this.tooltipElement.style.top = yL +"px";
}else if(this.ie4){
this.tooltipElement.left = xL;
this.tooltipElement.top = yL;
}
}