$(document).ready(function(){

    // On essaie de détecter MSIE en Quirks Mode...
    // (on utilise une astuce de compilation conditionnelle de MS)
    var is_ie/*@cc_on = {
      quirksmode : (document.compatMode=="BackCompat"),
      version : parseFloat(navigator.appVersion.match(/MSIE (.+?);/)[1])
    }@*/;

    // On crée un objet pour afficher le cadre sur les "area"
    $("body").append('<a id="cadre" href=""></a>');

    $("#cadre").hide();
    $("#scroll > div").hide();
    $("#scroll #infos").fadeOut("slow").fadeIn("slow");

    // Quand on entre dans une zone "area"
    $("area").mouseover(function(){
      montrerCadre(this.id);
    });

    // Quand on quitte le cadre qui a été affiché sur la zone "area"
    $("#cadre").mouseout(function(){
      alert("hide");
      cacherCadre();
    });

    // Quand on clique sur une zone "area" (n'est pas utilisé car la zone est
    // couverte par le cadre)
    $("area").click(function(){
      montrerTexte(this.id);
      return false; // On ne veut pas suivre le href de la balise <a>
    });

    function cacherCadre(){
      $("#cadre").hide();
    }

    function montrerCadre(areaid){
      var tarea, imgorg, ca, x, y, w, h;

      tarea = document.getElementById(areaid);
      imgorg = document.getElementById("imgorg");
      
      ca = tarea.coords.split(',');
      if (tarea.shape.toLowerCase() == "rect") {
        x = parseInt(ca[0]);
        y = parseInt(ca[1]);
        w = parseInt(ca[2]) - x;
        h = parseInt(ca[3]) - y;
      } else {
        var r = parseInt(ca[2]);
        x = parseInt(ca[0]) - r;
        y = parseInt(ca[1]) - r;
        w = 2 * r;
        h = 2 * r;
      }

      x += imgorg.offsetLeft;
      y += imgorg.offsetTop;
      
      x += imgorg.parentNode.offsetLeft;
      y += imgorg.parentNode.offsetTop;
      
      // Le cadre cache la zone cliquable => on duplique le lien !
      $("#cadre").unbind().click(function(){
        montrerTexte(tarea.id);
        return false; // On ne veut pas suivre le href de la balise <a>
      });

      // Quand on quitte le cadre qui a été affiché sur la zone "area"
      $("#cadre").mouseout(function(){
        cacherCadre();
      });

      // Affichage du cadre
      if (!is_ie || (is_ie && is_ie.version >= 7 && !is_ie.quirksmode)) {
        // prise en compte de la taille de la bordure
        w -= 6;
        h -= 6;
      }
      $("#cadre").css("left", x+"px");
      $("#cadre").css("top", y+"px");
      $("#cadre").css("width", w+"px");
      $("#cadre").css("height", h+"px");
      $("#cadre").show();
      
      return true;
    }

  var showntextid = "infos";

  function montrerTexte(areaid){
      var tarea, textid, ca, x, y, w, h;

      tarea = document.getElementById(areaid);
      textid = "txt" + areaid;
      
      if (showntextid == textid) return true;

      // On montre les infos correspondant au bloc "cliqué"
      // après avoir mis ce bloc à la fin...
      $("#scroll div#"+textid).appendTo("#scroll").fadeIn("slow");

      // On cache tous les blocs d'informations détaillées
      // $("#scroll div").not("#"+textid).slideUp(1000);
      $("#scroll div#"+showntextid).slideUp(500);

      showntextid = textid;

      return true;
    }

  });