// the tooltip object
var tooltip = {
    // setup properties of tooltip object
    id:"tooltip",
    offsetx : 10,
    offsety : 10,
    _x : 0,
    _y : 0,
    _tooltipElement:null,
    _saveonmouseover:null
}

/**
* 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) {

    // we save text of title attribute to avoid the showing of tooltip generated by browser
    var text=htmlelement.getAttribute("title");
    htmlelement.setAttribute("title","");
    htmlelement.setAttribute("title_saved",text);

	if(document.getElementById){
        this._tooltipElement = document.getElementById(this.id);
	}else if ( document.all ) {
        this._tooltipElement = document.all[this.id].style;
	}

    this._saveonmouseover = document.onmousemove;
    document.onmousemove = this.mouseMove;

    this._tooltipElement.innerHTML = text;

    this.moveTo(this._x + this.offsetx , this._y + this.offsety);

    if(this._tooltipElement.style){
        this._tooltipElement.style.visibility ="visible";
    }else{
        this._tooltipElement.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) {
    htmlelement.setAttribute("title",htmlelement.getAttribute("title_saved"));
    htmlelement.removeAttribute("title_saved");

    if(this._tooltipElement.style){
        this._tooltipElement.style.visibility ="hidden";
    }else{
        this._tooltipElement.visibility = "hidden";
    }
    document.onmousemove=this._saveonmouseover;
}

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

    if( e.pageX != undefined){ // gecko, konqueror,
        tooltip._x = e.pageX;
        tooltip._y = e.pageY;
    }else if(event != undefined && event.x != undefined && event.clientX == undefined){ // ie4 ?
        tooltip._x = event.x;
        tooltip._y = event.y;
    }else if(e.clientX != undefined ){ // IE6,  IE7, IE5.5
        if(document.documentElement){
            tooltip._x = e.clientX + ( document.documentElement.scrollLeft || document.body.scrollLeft);
            tooltip._y = e.clientY + ( document.documentElement.scrollTop || document.body.scrollTop);
        }else{
            tooltip._x = e.clientX + document.body.scrollLeft;
            tooltip._y = e.clientY + document.body.scrollTop;
        }
    /*}else if(event != undefined && event.x != undefined){ // IE6,  IE7, IE5.5
        tooltip.x = event.x + ( document.documentElement.scrollLeft || document.body.scrollLeft);
        tooltip.y = event.y + ( document.documentElement.scrollTop || document.body.scrollTop);
    */
    }else{
        tooltip._x = 0;
        tooltip._y = 0;
    }
    tooltip.moveTo( tooltip._x +tooltip.offsetx , tooltip._y + tooltip.offsety);

}

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

/****************************FAMILLE***************************************/

//the tooltip object
var tooltip_famille = {
 // setup properties of tooltip object
 id:"tooltip_famille",
 offsetx : 10,
 offsety : 10,
 _x : 0,
 _y : 0,
 _tooltipElement:null,
 _saveonmouseover:null
}

/**
* 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_famille.show = function (htmlelement) {

 // we save text of title attribute to avoid the showing of tooltip generated by browser
 var text=htmlelement.getAttribute("title");
 htmlelement.setAttribute("title","");
 htmlelement.setAttribute("title_saved",text);

	if(document.getElementById){
     this._tooltipElement = document.getElementById(this.id);
	}else if ( document.all ) {
     this._tooltipElement = document.all[this.id].style;
	}

 this._saveonmouseover = document.onmousemove;
 document.onmousemove = this.mouseMove;

 this._tooltipElement.innerHTML = text;

 this.moveTo(this._x + this.offsetx , this._y + this.offsety);

 if(this._tooltipElement.style){
     this._tooltipElement.style.visibility ="visible";
 }else{
     this._tooltipElement.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_famille.hide = function (htmlelement) {
 htmlelement.setAttribute("title",htmlelement.getAttribute("title_saved"));
 htmlelement.removeAttribute("title_saved");

 if(this._tooltipElement.style){
     this._tooltipElement.style.visibility ="hidden";
 }else{
     this._tooltipElement.visibility = "hidden";
 }
 document.onmousemove=this._saveonmouseover;
}

//Moves the tooltip element
tooltip_famille.mouseMove = function (e) {
// we don't use "this" because this method is assign to an event of document
// and so is dereferenced
 if(e == undefined)
     e = event;

 if( e.pageX != undefined){ // gecko, konqueror,
     tooltip_famille._x = e.pageX;
     tooltip_famille._y = e.pageY;
 }else if(event != undefined && event.x != undefined && event.clientX == undefined){ // ie4 ?
     tooltip_famille._x = event.x;
     tooltip_famille._y = event.y;
 }else if(e.clientX != undefined ){ // IE6,  IE7, IE5.5
     if(document.documentElement){
         tooltip_famille._x = e.clientX + ( document.documentElement.scrollLeft || document.body.scrollLeft);
         tooltip_famille._y = e.clientY + ( document.documentElement.scrollTop || document.body.scrollTop);
     }else{
         tooltip_famille._x = e.clientX + document.body.scrollLeft;
         tooltip_famille._y = e.clientY + document.body.scrollTop;
     }
 /*}else if(event != undefined && event.x != undefined){ // IE6,  IE7, IE5.5
     tooltip_famille.x = event.x + ( document.documentElement.scrollLeft || document.body.scrollLeft);
     tooltip_famille.y = event.y + ( document.documentElement.scrollTop || document.body.scrollTop);
 */
 }else{
     tooltip_famille._x = 0;
     tooltip_famille._y = 0;
 }
 tooltip_famille.moveTo( tooltip_famille._x +tooltip_famille.offsetx , tooltip_famille._y + tooltip_famille.offsety);

}

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