var Galerie = new Class({

  initialize: function($article) {
    this.article = $article;
    this.idPrecedente = null;
    this.idSuivante = null;

    this.div = null;
    this.closeButton = null;
    this.apercu = null;
    this.previousButton = null;
    this.libelle = null;
    this.nextButton = null;
  },

  build: function() {
    if (this.div)
      return;
    this.div = new Element("div", { "class": "galerieImage" });
    this.closeButton = new Element("img", { src: "images/close.gif", "class": "bouton", style: "float:right" });
    this.closeButton.addEvent("click", this.close.bind(this));
    this.apercu = new Element("img", { width: 300, height: 300, style: "margin:20px;display:block;" });
    this.apercu.addEvent("click", this.close.bind(this));
    this.previousButton = new Element("img", { src: "images/previous.gif", "class": "bouton", style: "margin-right:30px" });
    this.previousButton.addEvent("click", this.showPrevious.bind(this));
    this.libelle = new Element("span");
    this.nextButton = new Element("img", { src: "images/next.gif", "class": "bouton", style: "margin-left:30px" });
    this.nextButton.addEvent("click", this.showNext.bind(this));
    this.div.adopt(this.closeButton, this.apercu, this.previousButton, this.libelle, this.nextButton);
    document.body.appendChild(this.div);
  },

  show: function($image) {
    this.build();
    this.apercu.src = "images/empty.gif";
    this.apercu.style.background = "transparent url('images/ajax.gif') no-repeat center center";
    this.div.style.display = "block";
    this.div.position({ position: "center" });
    new Request.JSON({
      url: "sys.galerie.asp?ACTION=IMAGE_INFO&ARTICLE=" + this.article + "&IMAGE=" + $image,
      onSuccess: this.showHandler.bind(this)
    }).send();
  },

  showHandler: function($infos) {
    this.apercu.style.background = "";
    this.apercu.src = $infos.url;
    this.apercu.width = $infos.width;
    this.apercu.height = $infos.height;
    this.libelle.innerHTML = $infos.libelle;
    this.idPrecedente = $infos.previous;
    this.previousButton.style.visibility = $infos.previous ? "visible" : "hidden";
    this.idSuivante = $infos.next;
    this.nextButton.style.visibility = $infos.next ? "visible" : "hidden";
    this.div.unpin();
    this.div.position({ position: "center" });
    this.div.pin();
  },

  showPrevious: function() {
    if (this.idPrecedente)
      this.show(this.idPrecedente);
  },

  showNext: function() {
    if (this.idSuivante)
      this.show(this.idSuivante);
  },

  close: function() {
    this.div.style.display = "none";
  }

});