// PARAMETRES
var _xlayer = 50; // position du bord gauche du layer relativement à la page
var _ylayer = 50; // position du bord haut du layer relativement à la page
var _id_layer = "popup";
var _haut_titre = 25; // hauteur du titre en pixels (pour déterminer la hauteur de la zone permettant le déplacement) 

// VARIABLES GLOBALES
var nn4 = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
var obj_layer = null;
var larg_image = 800; // largeur de l'image
var cache = true;
var X,Y,moveX,moveY,offsetX,offsetY;
var b_traine = false; // vrai, lorsqu'on est en train de déplacer le layer

// création de l'objet obj_layer en fonction du navigateur :
// affecte le layer et lui donne son emplacement vertical
function init_layer() {
  if (dom && (document.getElementById(_id_layer))) {
    obj_layer = document.getElementById(_id_layer).style;
    X = iex ?  "event.clientX": "e.clientX";
    Y = iex ?  "event.clientY" : "e.clientY";
    offsetX = (iex) ? "document.body.scrollLeft" : "pageXOffset";
    offsetY = (iex) ? "document.body.scrollTop" : "pageYOffset";
  }
  else if (iex && (_id_layer)) {
    obj_layer = _id_layer.style;
    X="event.clientX";
    Y="event.clientY";
    offsetX="document.body.scrollLeft";
    offsetY="document.body.scrollTop";
  }
  else if ((document.layers) && (document.layers[_id_layer])) {
    obj_layer = document.layers[_id_layer];
    X="e.pageX";
    Y="e.pageY";
    offsetX="pageXOffset";
    offsetY="pageYOffset";
    document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
  }
  if (obj_layer) {
    obj_layer.left = _xlayer;
    obj_layer.top = _ylayer;
  }
  
}


// écrit le contenu dans le layer et le rend visible
function contenu_layer(contenu) {
  if ((document.layers)) {
    obj_layer.document.write(contenu);
    obj_layer.document.close();
    //document.layers[_id_layer].width = document.layers["mainImage"].width;
    obj_layer.visibility = "visible";
    //larg_image = obj_layer.width;
  }
  else if (dom) {
    document.getElementById(_id_layer).innerHTML = contenu;
    //document.getElementById(_id_layer).width = document.getElementById("mainImage").width;
    obj_layer.visibility = "visible";
    //larg_image = obj_layer.width;
  }
  else if (iex) {
    document.all[_id_layer].innerHTML = contenu;
    //_id_layer.width = document.all["mainImage"].width;
    obj_layer.visibility = "visible";
    //larg_image = obj_layer.width;
  }
  //obj_layer.width = 200;
  //alert(obj_layer.width);
  //alert(document.getElementById("mainImage").width);
}

// cache le layer (seulement s'il est visible)
function fermer() {
  if (!cache) {
    obj_layer.visibility = "hidden";
    cache = true;
  }
}

// positionne correctement le layer si on a fait défilé la page
function scroll_layer() {
    if (document.all) {
        obj_layer.left = parseInt(document.body.scrollLeft + _xlayer);
        obj_layer.top = parseInt(document.body.scrollTop + _ylayer);
    }
    else {
        obj_layer.left = parseInt(window.pageXOffset + _xlayer);
        obj_layer.top = parseInt(window.pageYOffset + _ylayer);
    }
}


function show_screenShot( strString)
{
  // reinitialise le layer
  init_layer();
  /*image = new Image();
  image.src = strString;
  var test = false;
  var i = 0;
  while( !test && i < 100 )
  {
    if(image.complete)
    {
      test = true;
    }
    i++;
  }
  if( i == 100 )
  {
    taille_w = 600;
    taille_h = 400;
  }
  else
  {
    taille_w = image.width;
    taille_h = image.height;
  }*/
  // si le layer existe, on affiche titre et image dans un tableau de fond _couleur_fond (défini dans les paramètres)
  if (obj_layer) {
    cache = false;
//Mise en forme des images
    
    
    var images = "<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'>\n";
    images += "  <TR>\n";
    images += "    <TD valign='top' align='center'><BR><span class='titlelevel2'><IMG onClick='fermer();' src='"+strString+"' border=0  id='mainImage' name='mainImage'><BR></SPAN><BR><BR></TD>\n";
    images += "  </TR>\n";
    if((document.layers))
      images += "</TABLE>\n";
    // width='" + taille_w + "' height='" + taille_h + "'  width='"+(taille_w+60)+"'
// Mise en forme de la fenetre

    var contenu = "";
    contenu += "<table border='0' cellpadding='0' cellspacing='1' bgcolor='#666666'>\n";
    contenu += "  <tbody>\n";
    contenu += "    <tr>\n";
    contenu += "      <TD width='100%'>\n";
    contenu += "        <TABLE width='100%' cellpadding='0' cellspacing='0' bgcolor='#FFFFFF'>\n";
    contenu += "          <tr>\n";
    contenu += "            <TD class='title' align='left' color='#FFFFFF' valign='middle'>&nbsp;&nbsp;Screen shot</TD>\n";
    contenu += "            <TD class='title' align='right' color='#FFFFFF' valign='middle'><a href=\"javascript:fermer();\"><img border='0' src='../images/close.png'></A>&nbsp;</TD>\n";
    contenu += "          </TR>\n";
    contenu += "        </TABLE>\n";
    contenu += "        <TABLE width='100%' bgcolor='#FFFFFF' cellpadding='1' cellspacing='0'>\n";
    contenu += "          <tr>\n";
    contenu += "            <TD width='19'>&nbsp;</TD>\n";
    contenu += "            <TD width='605'>\n" + images + "</TD>\n";
    contenu += "            <TD width='19'>&nbsp;</TD>\n";
    contenu += "          </TR>\n";
    contenu += "        </TABLE>\n";
    contenu += "      <TD>\n";
    contenu += "    </tr>\n";
    contenu += "  </tbody>\n";
    contenu += "</table>\n";
    
    // replace le layer, si on a fait défilé la fenêtre
    scroll_layer();
    // affecte ch_texte au contenu du layer
    contenu_layer(contenu, strString);
  }
}
  
// affiche une image en surimpression
// avec un texte au-dessus et éventuellement un sous-titre en bas
// 4 arguments : le fichier image, sa largeur en pixels, le titre (en haut) et le sous-titre (en bas)
function show_screenShot_multi()
{
  // reinitialise le layer
  init_layer();
  // si le layer existe, on affiche titre et image dans un tableau de fond _couleur_fond (défini dans les paramètres)
  if (obj_layer) {
    cache = false;
//Mise en forme des images (a la taille de la premiere image)
    
    if(show_screenShot_multi.arguments.length > 1)
    {
      var images = "<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'>\n";
      images += "  <TR>\n";
      images += "    <TD height='50' width='700'>\n";
      for(var i = 0; i < show_screenShot_multi.arguments.length ; i = i + 2 )
      {
        images += "      <img src='../../images/bulred.gif' width='8' height='10' align='absmiddle' border='0'><a class='biglink' href=\"javascript:show('" + show_screenShot_multi.arguments[i] + "');\">" + show_screenShot_multi.arguments[i+1] + "</a>&nbsp;&nbsp;&nbsp;&nbsp;\n";
      }
      images += "    </TD>\n";
      images += "  </TR>\n";
      images += "  <TR>\n";
      images += "    <TD valign='top' align='center'><BR><span class='titlelevel2'><IMG onClick='fermer();' src='"+show_screenShot_multi.arguments[0]+"' border=0  id='mainImage' name='mainImage' width='700'><BR></SPAN><BR><BR></TD>\n";
      images += "  </TR>\n";
      if((document.layers))
        images += "</TABLE>\n";
    }
    
// Mise en forme de la fenetre

    var contenu = "";
    contenu += "<table border='0' cellpadding='0' cellspacing='1' bgcolor='#666666'>\n";
    contenu += "  <tbody>\n";
    contenu += "    <tr>\n";
    contenu += "      <TD width='100%'>\n";
    contenu += "        <TABLE width='100%' cellpadding='0' cellspacing='0' bgcolor='#FFFFFF'>\n";
    contenu += "          <tr>\n";
    contenu += "            <TD class='title' align='left' color='#FFFFFF' valign='middle'>&nbsp;&nbsp;Screen shot</TD>\n";
    contenu += "            <TD class='title' align='right' color='#FFFFFF' valign='middle'><a href=\"javascript:fermer();\"><img border='0' src='../../images/close.png'></A>&nbsp;</TD>\n";
    contenu += "          </TR>\n";
    contenu += "        </TABLE>\n";
    contenu += "        <TABLE width='100%' bgcolor='#FFFFFF' cellpadding='1' cellspacing='0'>\n";
    contenu += "          <tr>\n";
    contenu += "            <TD width='19'>&nbsp;</TD>\n";
    contenu += "            <TD width='605'>\n" + images + "</TD>\n";
    contenu += "            <TD width='19'>&nbsp;</TD>\n";
    contenu += "          </TR>\n";
    contenu += "        </TABLE>\n";
    contenu += "      <TD>\n";
    contenu += "    </tr>\n";
    contenu += "  </tbody>\n";
    contenu += "</table>\n";
    
    // replace le layer, si on a fait défilé la fenêtre
    scroll_layer();
    // affecte ch_texte au contenu du layer
    contenu_layer(contenu);
  }
}

function show(file)
{
  //document.mainImage.src = file;
  //document.images["mainImage"].src = file;
  if ((document.layers)) {
    document.layers["mainImage"].src = file;
  }
  else if (dom) {
    document.getElementById("mainImage").src = file;
  }
  else if (iex) {
    document.all["mainImage"].src = file;
  }
}

// DEPLACEMENT DU LAYER AVEC LA SOURIS

// initialisation lorsqu'on appuye sur le bouton de la souris (début du déplacement)
// l'argument "e" est nécessaire pour Netscape 4
function init_traine(e) {
  if (obj_layer && !cache) {
    var Xin = eval(X);
    var Yin = eval(Y);
    var L = parseFloat(obj_layer.left);
    var T = parseFloat(obj_layer.top);
    var offX = ((document.layers))? 0 : eval(offsetX);
    var offY = ((document.layers))? 0 : eval(offsetY);
    // détermine si la souris est dans la zone supérieure du layer
    //alert(Xin>(L-offX) && Xin<(L-offX+larg_image) && Yin>(T-offY) && Yin<(T-offY+_haut_titre));
    if (Xin>(L-offX) && Xin<(L-offX+larg_image) && Yin>(T-offY) && Yin<(T-offY+_haut_titre)) {
      b_traine = true;
      moveX=Xin-L;
      moveY=Yin-T;
    }
    else b_traine = false;
  }
  else b_traine = false;
}

function stop_traine() {
  if (b_traine) {
    moveX = null;
    moveY = null;
    b_traine = false;
  }
}

function traine_layer(e) {
  if (b_traine) {
    var Xin = eval(X);
    var Yin = eval(Y);
   // déplacement
    obj_layer.top = Yin - moveY;
    obj_layer.left = Xin - moveX;
  }
}

document.onmousedown=init_traine;
document.onmousemove=traine_layer;
document.onmouseup=stop_traine;