/** INFOBULLE
 * ----------
 * Jeremie Patonnier <jep@ibilab.net>
 * Version : 1.0
 * ----------
 * Objet JavaScript qui permet de créer des infobulles hautement personnalisées
 * ----------
 * Propriétés de l'objet :
 * 1 - infoBulle::decY : integer : Defaut : 20
 *                Décalage de l'infobulle par rapport au pointeur de la souris
 *                sur l'axe des Y.
 * 2 - infoBulle::decX : integer : Defaut : 0
 *                Décalage de l'infobulle par rapport au pointeur de la souris
 *                sur l'axe des X.
 * 3 - infoBulle::width : integer : Defaut : 210
 *                Largeur de l'infobulle (en pixel). il est conseillé que cette
 *                valeur soit egale à la valeur du style CSS width de l'infobulle. 
 * 4 - infoBulle::enableAlt  : Boolean : Defaut : false
 *                Indique si l'objet doit se baser sur le contenu de l'attribut
 *                alt pour générer le contenue de l'infobulle (true) ou bien 
 *                uniquement sur la contenue de l'attribut title (false).
 * 5 - infoBulle::enableDrag : Boolean : Defaut : true
 *                Indique si l'infobulle doit suivre la souris (true) ou rester
 *                à un emplacement fixe sur la page (false);  
 * ----------
 * Méthodes de l'objet :
 * 1 - infoBulle::setTo(OBJ, TEXTE): 
 *                Méthode qui permet d'assigner l'infobulle à l'objet OBJ et de 
 *                rajouter le texte TEXTE à la suite du texte de l'infobulle 
 *                pour cet objet.  
 * 2 - infoBulle::registerPointer(URLIMG): 
 *                Méthode permetant de rajouter un pointeur suivant la souris 
 *                à l'infobulle. Ce pointeur est une image dont l'URL est URLIMG.
 * 3 - infoBulle::registerFormat(REGEXP,FORMAT):
 *                Méthode permettant de spécifié des règles de formatage du texte.
 *                La portion de texte à formater est identifié grace à un objet 
 *                REGEXP, la règle de formatage est la chaine de caratère FORMAT.
 * ----------
 * Styliser l'infobulle :
 * Le texte de l'infobulle est à l'interieur d'une balise DIV identifié par #insideBulle
 * qui est elle même contenue dans une balise DIV identifié par #infoBulle
 * ---------- 
 * Exemple d'utilisation :
 *
 * <img src="test.jpg" id="test" alt="Photo test : Voici une infobulle personnalisé" />
 * <script type="text/javascript">
 *   bulle = new infoBulle();
 *   bulle.enableAlt = true; 
 *   bulle.setTo(document.getElementById("test"));
 *   bulle.registerFormat(/^(.*:)/,"<strong>$1</strong>");
 * </script>
 * <style type="text/css">
 *   #infoBulle{
 *     background:#FCC;
 *     border:1px solid #999; 
 *   }
 *   #insideBulle{
 *     margin:10px;
 *     font:0.8em Arial,Helvetica,sans-serif; 
 *   } 
 * </style>   
 *
 */

OPE = (window.opera)?true:false;
IE  = (document.all && !OPE)?true:false;
MOZ = (document.getELementById && !IE)?true:false;

if(!IE) document.captureEvents(Event.MOUSEMOVE);

function infoBulle(){
  // Creation des conteneurs
  d = document.getElementsByTagName("body");
  body = d[0];
  this.mainIB     = document.createElement('div');
  this.mainIB.id  = "infoBulle";
  this.mainIB.style.position = "absolute";
  this.mainTXT    = document.createElement('div');
  this.mainTXT.id = "insideBulle";
  this.mainIB.appendChild(this.mainTXT);
  body.appendChild(this.mainIB);
  
  //Decallage de l'infobulle
  this.decY = 20;
  this.decX = 0;
  
  //Prise en compte de l'attribut alt
  this.enableAlt = false;
  
  //L'infobulle doit-elle suivre la souris
  this.enableDrag = true;
  
  //Largeur de l'infobulle
  this.width = 210;
  
  //Régles de formatage
  this.format = new Array();
}

infoBulle.prototype.registerPointer = function(src){
  this.pointeur = document.createElement('img');
  this.pointeur.src = src;
  this.pointeur.style.position = "absolute";
  this.pointeur.style.top = 1 - this.pointeur.height + "px";
  this.mainIB.appendChild(this.pointeur);
}

infoBulle.prototype.registerFormat = function(rxp,str){
  if(typeof(rxp) == "function" || typeof(rxp) == "object"){
    this.format.push(new Array(rxp,str));
  }
}

infoBulle.prototype.setTo = function(obj,addtxt){
  if(!window.ibvar) window.ibvar = this;
  if(!obj.ibtxt) obj.ibtxt = (addtxt == undefined)?'':addtxt;
  
  obj.onmouseover = function(){
    txt = (window.ibvar.enableAlt && this.alt != "" && this.alt != undefined)? this.alt : this.title ;
    nbr = window.ibvar.format.length;
    for(i=0; i<nbr; i++){
      txt = txt.replace(window.ibvar.format[i][0],window.ibvar.format[i][1])
    }
	
	if(txt == 'undefined') txt = 'Cliquez ici';
	
    window.ibvar.setText(txt + this.ibtxt);
    this.st = this.title;
    this.title = '';
    if (window.ibvar.enableAlt && this.alt != undefined){
      this.sa = this.alt;
      this.alt = '';
    }
	window.ibvar.showHide('show');
    if(window.ibvar.enableDrag = true) window.ibvar.startDrag();
  }
  
  obj.onmouseout = function(){
    this.title = this.st;
    if (window.ibvar.enableAlt && this.sa != undefined){
      this.alt = this.sa;
    }
    window.ibvar.showHide('hide');
    window.ibvar.stopDrag();
  }
}

/* Méthodes privées */

infoBulle.prototype.setText = function(txt){
  this.mainTXT.innerHTML = txt;
}

infoBulle.prototype.showHide = function(dsp){
  shb = this.mainIB.style;
  if(dsp == undefined){
    shb.display = (shb.display == "block")?"none":"block";
  } else {
    shb.display = (dsp == 'show')?"block":"none";
  }
}

infoBulle.prototype.startDrag = function()
{
	if(!window.ibvar) window.ibvar = this;

	document.onmousemove = function(e){
		X = (IE)?event.clientX:e.pageX;
		Y = (IE)?event.clientY:e.pageY;
		window.ibvar.mainIB.style.top  = (Y+window.ibvar.decY) + "px";
		W = body.clientWidth;
		OBJW = (window.ibvar.width == 'auto') ? window.ibvar.mainIB.offsetWidth : window.ibvar.width;
		M = W - OBJW;
		window.ibvar.mainIB.style.left = Math.round(M*X/W) + window.ibvar.decX + "px";
		if(window.ibvar.pointeur)
		{
			pos = X - Math.round(M*X/W) - Math.floor(window.ibvar.pointeur.width/2)
			if(pos < 7) pos = 7;
			if(pos > OBJW-7-window.ibvar.pointeur.width) pos = OBJW-7-window.ibvar.pointeur.width;
			window.ibvar.pointeur.style.left = pos + "px";
		} 
	}
}

infoBulle.prototype.stopDrag = function(){
  document.onmousemove = function(e){};
}