function diapo(lien, scroll) {
  var ladiapo = document.getElementById("ladiapo");
  var nom = document.getElementById("nom").firstChild;
  var dim = document.getElementById("dim").firstChild;
  var desc = document.getElementById("desc").firstChild;
  var vendu = document.getElementById("vendu").firstChild;
  var title = lien.getAttribute("title");
  var splittitle = title.split(",");
  if (scroll) {
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;
    ladiapo.st = scrollTop;
    ladiapo.sl = scrollLeft;
  }
  ladiapo.setAttribute("title", title);
  nom.nodeValue = splittitle[0];
  dim.nodeValue = splittitle[1];
  desc.nodeValue = splittitle[2];
  if (splittitle[3] == undefined) vendu.nodeValue = "";
  else vendu.nodeValue = splittitle[3];
  ladiapo.index = lien.index;
  ladiapo.src = lien.href;
  document.body.className = "show";
  document.documentElement.scrollTop = 0;
}

function nodiapo() {
  var ladiapo = document.getElementById("ladiapo");
  ladiapo.src = "images/galerie.jpg";
  document.body.className = "galerie";
  document.documentElement.scrollTop = ladiapo.st;
  document.documentElement.scrollLeft = ladiapo.sl;
  return false;
}

function lancerDiaporama () {
  var liens =  document.getElementById("vignettes").getElementsByTagName("a");
  diapo(liens[0], true);
  departDiaporama();
  return false;
}

function departDiaporama() {
  var diaporama = document.getElementById("diaporama");
  diaporama.bouge = setInterval(voirSuivant, 3000);
  diaporama.className = "auto";
  return false;
}

function stopDiaporama() {
  var diaporama = document.getElementById("diaporama");
  diaporama.className = "";
  clearTimeout(diaporama.bouge);
  return false;
}

function voirPrecedent () {
  var ladiapo = document.getElementById("ladiapo");
  var index = ladiapo.index;
  var liens =  document.getElementById("vignettes").getElementsByTagName("a");
  if (index == 0)
    index = liens.length;
  diapo(liens[index-1], false);
  return false;
}

function voirSuivant () {
  var ladiapo = document.getElementById("ladiapo");
  var index = ladiapo.index;
  var liens = document.getElementById("vignettes").getElementsByTagName("a");
  index++;
  if (index == liens.length)
    index = 0;
  diapo(liens[index], false);
  return false;
}


/*
      <div id="diaporama"> 
	<div class="boutons">
	  <a href="#" id="depart" title="Affiche une photo toutes les 3 secondes" class="navbouton">Diaporama</a>
	  <a href="#" id="stop" title="Arrêt du diaporama" class="navbouton">Stop </a>
	</div>
	<ul id="nav" class="boutons">
	  <li><a href="#" id="precedent" title="Précédent" class="navbouton"><span>Precedent</span></a></li>
	  <li><a href="#" id="retour" title="Retour galerie" class="navbouton"> Retour </a></li>
	  <li><a href="#" id="suivant" title="Suivant" class="navbouton"><span>Suivant</span></a></li>
	</ul>
	<h2 id="nom"> Nom </h2>
	<h3 id="dim"> Dimension </h3>
	<h3 id="desc"> Technique </h3>
	<h3 id="vendu"> Disponible </h3>
	<div id="conteneur">
	  <img src="images/galerie.jpg" alt="le tableau" title="le tableau" id="ladiapo" />
	</div>
      </div>
*/

function prepareDiapo() {
  document.body.className = "";
  var diaporama = document.createElement("div");
  diaporama.innerHTML = '<div class="boutons"><a href="#" id="depart" title="Affiche une photo toutes les 3 secondes" class="navbouton">Diaporama</a><a href="#" id="stop" title="Arrêt du diaporama" class="navbouton">Stop </a></div><ul id="nav" class="boutons"><li><a href="#" id="precedent" title="Précédent" class="navbouton"><span>Precedent</span></a></li><li><a href="#" id="retour" title="Retour galerie" class="navbouton"> Retour </a></li><li><a href="#" id="suivant" title="Suivant" class="navbouton"><span>Suivant</span></a></li></ul><h2 id="nom"> Nom </h2><h3 id="dim"> Dimension </h3><h3 id="desc"> Technique </h3><h3 id="vendu"> Disponible </h3><div id="conteneur"> <img src="images/galerie.jpg" alt="le tableau" title="le tableau" id="ladiapo" /></div>';
  diaporama.setAttribute("id","diaporama");
  var vignettes =  document.getElementById("vignettes");
  var contenu = vignettes.parentNode;
  contenu.parentNode.insertBefore(diaporama,contenu);
  var liens = vignettes.getElementsByTagName("a");
  var retour = document.getElementById("retour");
  var precedent = document.getElementById("precedent");
  var suivant = document.getElementById("suivant");
  var liendiapo = document.getElementById("ladiapo").parentNode;
  var depart = document.getElementById("depart");
  var stop = document.getElementById("stop");
  var lancement = document.getElementById("lancement");
  lancement.onclick = lancerDiaporama;

  retour.onclick = nodiapo;
  /* liendiapo.onclick = nodiapo;*/
  for(var i = 0; i<liens.length; i++) {
    liens[i].index = i;
    liens[i].onclick = function () {
      diapo(this, true);
      return false;
    }
  }
  precedent.onclick = voirPrecedent;
  suivant.onclick = voirSuivant;
  depart.onclick = departDiaporama;
  stop.onclick = stopDiaporama;
}

addLoadEvent(prepareDiapo);