/**
 *
 * Can show a tooltip over an element
 * Content of tooltip is the title attribute value of the element
 * Tested with Firefox, IE6, IE5.5, IE7, Konqueror
 *
 * 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 ! :-)
 *
 * @version 1.1
 * @copyright 2004-2007 Laurent Jouanneau. 
 * @link http://ljouanneau.com/soft/javascript
 * @licence release under LGPL Licence
 */


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

}

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

    // 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.moveTo(-101 , -1000,100);
	
	
	
				
	
	
	
		tooltip._lp = lppourcent;		//enregistre la largeure du popup en pourcent
		
		
	
	
    this._saveonmouseover = document.onmousemove;
    document.onmousemove = this.mouseMove;

    this._tooltipElement.innerHTML = text;

    if(this._tooltipElement.style){
        this._tooltipElement.style.visibility ="visible";
		this._tooltipElement.style.display = "block";
    }else{
        this._tooltipElement.visibility = "visible";
		this._tooltipElement.display = "block";
    }
   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";
		this._tooltipElement.style.display = "none";
		
    }else{
        this._tooltipElement.visibility = "hidden";
		this._tooltipElement.display = "none";
    }
    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;
    }
	
	
		//taille de la fenetre
		var largeur = 0, hauteur = 0;
		if( typeof( window.innerWidth ) == 'number' ) 
		{
			largeur = window.innerWidth;
			hauteur = window.innerHeight;
		}
				
		else 
			if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
			{
				largeur = document.documentElement.clientWidth;
				hauteur = document.documentElement.clientHeight;
			}
			else 
				if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
				{
					largeur = document.body.clientWidth;
					hauteur = document.body.clientHeight;
				}
				else 
				{
					largeur = -1;
					hauteur = -1;
				}
	
		

	
		
		var lp = tooltip._lp;
		
		//alert(tooltip._lp);
		
		

		lppx = largeur * lp / 100;
		
		
		
		var largeurmargedroite = largeur/10-10;
		//si le popup est trop a droite, il le deplace a gauche;
		if(tooltip._x>largeur-lppx-largeurmargedroite)
		{
			tooltip._x = largeur-lppx-largeurmargedroite;
		}
	
    tooltip.moveTo( tooltip._x +tooltip.offsetx , tooltip._y + tooltip.offsety,lppx);
}

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