var dom=document.getElementById;
var ie=(document.all && !dom);
var canevas, imagen;
var cadre1, cadre2, cadre3, cadre4, cadre5, cadre6, cadre7, cadre8, cadre9;
var serieA, serieB, serieC, serieD, serieE;
var titulo, tamano, tecnica;
var counter;
var tableh = "470";
var pict = new Array();
var ppict = new Array();
var indices;

function initVars(){
  // On initialise les objets div
  // Réceptacle de l'image
  canevas=ie? document.all.canevas : document.getElementById("canevas");
  // Indices de 1 à 9 du numéro d'image
  cadre1=ie? document.all.cadre1 : document.getElementById("cadre1");
  cadre2=ie? document.all.cadre2 : document.getElementById("cadre2");
  cadre3=ie? document.all.cadre3 : document.getElementById("cadre3");
  cadre4=ie? document.all.cadre4 : document.getElementById("cadre4");
  cadre5=ie? document.all.cadre5 : document.getElementById("cadre5");
  cadre6=ie? document.all.cadre6 : document.getElementById("cadre6");
  cadre7=ie? document.all.cadre7 : document.getElementById("cadre7");
  cadre8=ie? document.all.cadre8 : document.getElementById("cadre8");
  cadre9=ie? document.all.cadre9 : document.getElementById("cadre9");
  // Tableau des indices
  indices = new Array(cadre1, cadre2, cadre3, cadre4, cadre5, cadre6, cadre7, cadre8, cadre9);

  // Indices de A à E du numéro de série
  serieA=ie? document.all.serieA : document.getElementById("serieA");
  serieB=ie? document.all.serieB : document.getElementById("serieB");
  serieC=ie? document.all.serieC : document.getElementById("serieC");
  serieD=ie? document.all.serieD : document.getElementById("serieD");
  serieE=ie? document.all.serieE : document.getElementById("serieE");
  // Eléments de la légende de l'image
  titulo=ie? document.all.titulo : document.getElementById("titulo");
  tamano=ie? document.all.tamano : document.getElementById("tamano");
  tecnica=ie? document.all.tecnica : document.getElementById("tecnica");
  //Légende de la première image
  setcaption(0);
  // On rend le compteur visible et transparent
  counter=ie? document.all.counter : document.getElementById("counter");
  changeOpac(0, counter);
  counter.style.visibility = 'visible';
  // Preload de images
  preloadimg();
}

function display(obj){
  // Afficher l'image de la position cliquée
  imagen = obj.src;
  imagen = imagen.substr(imagen.lastIndexOf('/') + 1, 2);
  // On affiche l'image avec l'animation
  fade();
}

function fill(obj){
  var serie = obj.id.substr(5, 1);
  serieA.className = 'numserie';
  serieA.onclick = function onclick(event){fill(this);};
  serieB.className = 'numserie';
  serieB.onclick = function onclick(event){fill(this);};
  serieC.className = 'numserie';
  serieC.onclick = function onclick(event){fill(this);};
  serieD.className = 'numserie';
  serieD.onclick = function onclick(event){fill(this);};
  serieE.className = 'numserie';
  serieE.onclick = function onclick(event){fill(this);};
  obj.className = 'numcourant';
  obj.onclick = function onclick(event){};
  // Afficher les images de la position cliquée
  for(var i = 0; i < 10; i++){
    indices[i].innerHTML = '<table height="110" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle"><img src="images/' + serie + (i + 1) + '.jpg" onclick="display(this)" border="0"></td></tr></table>';
  }
}

function getindice(imag){
  for(var i = 0; i <= indmax; i++){
    if (imagenes[i] == imag){return i;}
  }
}

function setcaption(indc){
     // Afficher la légende en fonction de la langue
     // On utilise des tableaux remplis à partir de la base de données
     if (idioma == 'fr'){
        titulo.innerHTML = caption_fr[indc][0];
        tamano.innerHTML = caption_fr[indc][1];
        tecnica.innerHTML = caption_fr[indc][2];
     }
     else if (idioma == 'en'){
        titulo.innerHTML = caption_en[indc][0];
        tamano.innerHTML = caption_en[indc][1];
        tecnica.innerHTML = caption_en[indc][2];
     }
     else{
        titulo.innerHTML = caption_es[indc][0];
        tamano.innerHTML = caption_es[indc][1];
        tecnica.innerHTML = caption_es[indc][2];
     }
}

function fade(){
  // Animation à partir de la bibliothèque yui
  // Fade de l'image
  var myAnim = new YAHOO.util.Anim("canevas");
  myAnim.attributes.opacity = { from: 1, to: 0.1 };
  myAnim.duration = 0.5;
  myAnim.method = YAHOO.util.Easing.easeIn;
  myAnim.animate();
  // A la fin on opère le changement d'image
  myAnim.onComplete.subscribe(changeImg);

  // Fade des légendes
  var taAnim = new YAHOO.util.Anim("tamano");
  taAnim.attributes.opacity = { from: 1, to: 0.1 };
  taAnim.duration = 0.5;
  taAnim.method = YAHOO.util.Easing.easeIn;
  taAnim.animate();

  var tiAnim = new YAHOO.util.Anim("titulo");
  tiAnim.attributes.opacity = { from: 1, to: 0.1 };
  tiAnim.duration = 0.5;
  tiAnim.method = YAHOO.util.Easing.easeIn;
  tiAnim.animate();

  var teAnim = new YAHOO.util.Anim("tecnica");
  teAnim.attributes.opacity = { from: 1, to: 0.1 };
  teAnim.duration = 0.5;
  teAnim.method = YAHOO.util.Easing.easeIn;
  teAnim.animate();
}

function unfade(){
  // Unfade de l'image
  var myAnim = new YAHOO.util.Anim("canevas");
  myAnim.attributes.opacity = { from: 0.1, to: 1 };
  myAnim.duration = 0.5;
  myAnim.method = YAHOO.util.Easing.easeIn;
  myAnim.animate();

  // Unfade des légendes
  var taAnim = new YAHOO.util.Anim("tamano");
  taAnim.attributes.opacity = { from: 0.1, to: 1 };
  taAnim.duration = 0.5;
  taAnim.method = YAHOO.util.Easing.easeIn;
  taAnim.animate();

  var tiAnim = new YAHOO.util.Anim("titulo");
  tiAnim.attributes.opacity = { from: 0.1, to: 1 };
  tiAnim.duration = 0.5;
  tiAnim.method = YAHOO.util.Easing.easeIn;
  tiAnim.animate();

  var teAnim = new YAHOO.util.Anim("tecnica");
  teAnim.attributes.opacity = { from: 0.1, to: 1 };
  teAnim.duration = 0.5;
  teAnim.method = YAHOO.util.Easing.easeIn;
  teAnim.animate();
}

function changeImg(){
   // On change d'image
   canevas.innerHTML = '<table height="' + tableh + '" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle"><img src="images/' + imagen + 'G.jpg" border="0"></td></tr></table>';
   setcaption(getindice(imagen));
   // On unfade le tout
   unfade();
}

function changeOpac(opacity, idobj) {
    // Changement de l'opacité en fonction du navigateur
    var object = idobj.style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function show(obj){
   // On rend le compteur visible en bas à droite du cadre
   changeOpac(100, obj);
   // On le fade automatiquement
   var mAnim = new YAHOO.util.Anim(obj);
   mAnim.attributes.opacity = { from: 1, to: 0 };
   mAnim.duration = 5;
   mAnim.method = YAHOO.util.Easing.easeIn;
   mAnim.animate();
}

function preloadimg(){
  // Préchargement des images
  for (var i = 1; i <= 9; i++) {
      pict[i - 1] = new Image();
      pict[i - 1].src = "images/A" + i + "G.jpg";
      ppict[i - 1] = new Image();
      ppict[i - 1].src = "images/A" + i + ".jpg";
  }
  for (var i = 1; i <= 9; i++) {
      pict[i + 8] = new Image();
      pict[i + 8].src = "images/B" + i + "G.jpg";
      ppict[i + 8] = new Image();
      ppict[i + 8].src = "images/B" + i + ".jpg";
  }
  for (var i = 1; i <= 9; i++) {
      pict[i + 17] = new Image();
      pict[i + 17].src = "images/C" + i + "G.jpg";
      ppict[i + 17] = new Image();
      ppict[i + 17].src = "images/C" + i + ".jpg";
  }
  for (var i = 1; i <= 9; i++) {
      pict[i + 26] = new Image();
      pict[i + 26].src = "images/D" + i + "G.jpg";
      ppict[i + 26] = new Image();
      ppict[i + 26].src = "images/D" + i + ".jpg";
  }
  for (var i = 1; i <= 9; i++) {
      pict[i + 35] = new Image();
      pict[i + 35].src = "images/E" + i + "G.jpg";
      ppict[i + 35] = new Image();
      ppict[i + 35].src = "images/E" + i + ".jpg";
  }
}