var gLastMouseX, gLastMouseY;
var gActiveTooltip, gImgCount, gFailImage;

function tooltip_update(e) {
  var docRef, mouseX, mouseY;
  
  // Récupére la position de la souris
  if (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  else { // Spécifique IE
    mouseX = event.clientX;
    mouseY = event.clientY;
    
    // Il faut traiter le CAS des DOCTYPE sous IE
    if( document.documentElement && document.documentElement.clientWidth) // Donc DOCTYPE
      docRef = document.documentElement;   // Dans ce cas c'est documentElement qui est réfèrence
    else
      docRef = document.body;                    // Dans ce cas c'est body qui est réfèrence
    
    // On rajoute la position liée aux ScrollBars
    mouseX += docRef.scrollLeft;
    mouseY += docRef.scrollTop;
  }

  
  // Si un tooltip nécessaire on le place aux coordonnées souris
  if (gActiveTooltip.length > 0) {
    var elemTp = document.getElementById(gActiveTooltip + "-tooltip");
    var elemParent = elemTp.parentNode;
    if (elemParent) {
      mouseX -= elemParent.offsetLeft;
      mouseY -= elemParent.offsetTop;
    }

    // Affiche le tooltip si nécessaire
    if (elemTp.style.display != "block") {
      elemTp.style.display = "block";
      //elemTp.style.width = elemTp.offsetWidth+"px";
    }

    if (gActiveTooltip == "P1") {
      elemTp.style.left =  360 + "px";
      elemTp.style.top = -200 + "px";
    } else {
      elemTp.style.left =  -280 + "px";
      elemTp.style.top = -220 + "px";
    }
  }
  gLastMouseX = mouseX;
  gLastMouseY = mouseY;
}

function tooltip_mouseover(elemId) {
  // Charge les images dynamiques
  var elemTp = document.getElementById(elemId + "-tooltip");
  var imgs = elemTp.getElementsByTagName("img"); 
  var i, id, imgWaiter;

  for (i = 0; i < imgs.length; i++) {   
    id = imgs[i].getAttribute("id");
    if (id) 
      if (id.length >= 8) 
        if (id.substring(0, 8) == "dynimg::") {
          imgs[i].setAttribute("id", "loadimg::" + imgs[i].imgIdx);
          imgs[i].onload = function() {tooltip_onimageload(elemId, this.imgIdx);};
          imgs[i].onerror = function() {tooltip_onimagefail(elemId, this.imgIdx);};
          imgs[i].setAttribute("src", imgs[i].imgFile); 
        }
  }

  // Le div invisible pointe l'element propriétaire du tooltip
  gActiveTooltip = elemId;
}

function tooltip_mouseout(elemId) {
  // Cache le tooltip
  var elemTp = document.getElementById(elemId + "-tooltip");
  elemTp.style.display = "none";
  
  // Le div invisible ne pointe pas d'elements propriétaires de tooltips
  gActiveTooltip = "";  
}

function tooltip_onimageload(elemId, imgIdx) {
  var img = document.getElementById("loadimg::" + imgIdx);
  var imgWaiter = document.getElementById("dynimg-waiter::" + imgIdx);
  var elemTp = document.getElementById(elemId + "-tooltip");

  img.setAttribute("id", "loadedimg::" + imgIdx);
  imgWaiter.style.display = "none";
  img.style.display = "block";
  //elemTp.style.left = gLastMouseX + 10 + "px";
  //elemTp.style.top = gLastMouseY - elemTp.offsetHeight - 10 + "px";
  if (elemId == "P1") {
    elemTp.style.left =  360 + "px";
    elemTp.style.top = -200 + "px";
  } else {
    elemTp.style.left =  -280 + "px";
    elemTp.style.top = -220 + "px";
  }
}

function tooltip_onimagefail(elemId, imgIdx) {
  var img = document.getElementById("loadimg::" + imgIdx);
  var imgWaiter = document.getElementById("dynimg-waiter::" + imgIdx);
  var elemTp = document.getElementById(elemId + "-tooltip");

  img.setAttribute("src", gFailImage);
}

function tooltip_init(elemId, waitImage) {
  // Affecte les fonctions d'entrée/sortie de la souris à l'element propriétaire du tooltip
  var elem = document.getElementById(elemId);
  elem.onmouseover = function() {tooltip_mouseover(elemId);};
  elem.onmouseout = function() {tooltip_mouseout(elemId);};
  
  // Affecte les fonctions d'entrée/sortie de la souris au tooltip
  var elemTp = document.getElementById(elemId + "-tooltip");
  elemTp.onmouseover = function() {tooltip_mouseover(elemId);};
  elemTp.onmouseout = function() {tooltip_mouseout(elemId);};

  // Cache le tooltip
  elemTp.style.position = "absolute";
  elemTp.style.display = "none";

  // Place les noms d'images dans le tableau et crée les balises img
  var divs = elemTp.getElementsByTagName("div"); 
  var i, dData, fileName, img, imgWaiter, parentDiv, newDiv;

  for (i = 0; i < divs.length; i++) {   
    dData = divs[i].innerHTML;
    if (dData) 
      if (dData.length >= 8) 
        if (dData.substring(0, 8) == "dynimg::") {
          fileName = dData.substring(8, dData.length);

          newDiv = document.createElement("div");
          newDiv.setAttribute("align", "center");

          parentNode = divs[i].parentNode;
          parentNode.replaceChild(newDiv, divs[i]);

          img = document.createElement("img");
          img.setAttribute("id", "dynimg::" + gImgCount);
          img.imgIdx = gImgCount;
          img.imgFile = fileName;
          img.style.display = "none";
          img.style.width = "300px";

          imgWaiter = document.createElement("img");
          imgWaiter.setAttribute("id", "dynimg-waiter::" + gImgCount);
          imgWaiter.setAttribute("src", waitImage);
          
          newDiv.appendChild(imgWaiter);
          newDiv.appendChild(img);
          
          gImgCount++;
        }
  } 
}

function tooltips_init(waitImage, failImage) {
  // Affecte la fonction de gestion des mouvements de la souris à l'événement onmousemove
  document.onmousemove = tooltip_update;

  // Initialisation des tooltips
  var divs = document.getElementsByTagName("div"); 
  var i, id;

  gImgCount = 0;
  gActiveTooltip = "";

  for (i = 0; i < divs.length; i++) { 
    id = divs[i].getAttribute("id"); 
    if (id) 
      if (id.length >= 8) 
        if (id.substring(id.length - 8, id.length) == "-tooltip")
          tooltip_init(id.substring(0, id.length - 8), waitImage);
  }

  gFailImage = failImage;
}