KnxDiaporama = Class.create({
  initialize: function(opts) {
    opts = opts || {};
    
    /* configuration */
    this.image_holder = opts.image_holder?opts.image_holder:'image_holder'; // ID du container de l'image principale
    this.legend_holder = opts.legend_holder?opts.legend_holder:'legend_holder'; // ID du container de la légende de l'image
    this.image_swap = opts.image_swap?opts.image_swap:'image_swap'; // ID de l'image principale
    this.carousel = opts.carousel?opts.carousel:'horizontal_carousel'; // ID du carousel
    this.carousel_next =  opts.carousel_next?opts.carousel_next:'.next_button'; // class du bouton next du carousel
    this.carousel_previous =  opts.carousel_previous?opts.carousel_previous:'.previous_button'; // class du bouton previous du carousel
    this.carousel_disabled_suffix =  opts.carousel_disabled_suffix?opts.carousel_disabled_suffix:'_disabled'; // suffixe de class pour l'état off des boutons du carousel
    this.li = opts.li?opts.li:'li.photo-block'; // Selecteur des containers des image miniature
    this.photos = opts.photos?opts.photos:'li.photo-block img'; // Selecteuy des images miniature
    this.datalink = opts.datalink?opts.datalink:'data-link'; // Attribut de l'image miniature servant pour récupérer le lien de l'image grand format
    this.datasrc = opts.datasrc?opts.datasrc:'data-src'; // Attribut de l'image miniature servant pour récupérer la source de l'image grand format
    this.datalegend = opts.datalegend?opts.datalegend:'title'; // Attribut de l'image miniature servant pour récupérer la légend de l'image grand format
    this.datawidth = opts.datawidth?opts.datawidth:'data-width'; // Attribut de l'image miniature servant pour récupérer la largeur de l'image grand format
    this.dataheight = opts.dataheight?opts.dataheight:'data-height'; // Attribut de l'image miniature servant pour récupérer la hauteur de l'image grand format
    this.img_number = opts.img_number?opts.img_number:'img-number'; // ID de l'élément contenant l'index actuel (X sur N images)
    this.img_total = opts.img_total?opts.img_total:'img-total'; // ID de l'élément contenant le compte d'images complet
    this.next_img = opts.next_img?opts.next_img:'next_img'; // ID du bouton next du diaporama
    this.previous_img = opts.previous_img?opts.previous_img:'previous_img'; // ID du bouton previous du diaporama
    this.nolinkclass = opts.nolinkclass?opts.nolinkclass:'nolink'; // class ajoutée aux bouton previous et next du diaporama lorsqu'on atteint le début ou la fin du diaporama
    this.loadingclassname = opts.loadingclassname?opts.loadingclassname:'loading'; // class du loader
    this.duration_fade =  opts.duration_fade?opts.duration_fade:'0.3';
    this.duration_morph =  opts.duration_morph?opts.duration_morph:'0.3';
    this.legend_opacity = opts.legend_opacity?opts.legend_opacity:'0.5'
        
    this.carousel = new UI.Carousel($(this.carousel),{previousButton:this.carousel_previous, nextButton: this.carousel_next, disabledButtonSuffix: this.carousel_disabled_suffix });
    $(this.image_swap).setStyle({'display':'none'});
    $(this.img_total).update($$(this.photos).size());
    $$(this.photos).each(function (elt,index) {
      elt.ancestors()[0].removeClassName(this.loadingclassname);
      elt.setOpacity(0.5);
      elt.observe('click',function(evt) {
        var elem = Event.element(evt);
        this.swapImage(index);
      }.bind(this));
    }.bind(this));
    $(this.next_img).observe('click',function(evt) {
      Event.stop(evt);
      if (parseInt($(this.img_number).innerHTML)<$$(this.photos).size()) {
        this.swapImage($(this.img_number).innerHTML);
      }
    }.bind(this));
    /*$(this.image_swap).up(0).observe('click',function(evt) {
      Event.stop(evt);
      if (parseInt($(this.img_number).innerHTML)<$$(this.photos).size()) {
        this.swapImage($(this.img_number).innerHTML);
      }
    }.bind(this));*/
    $(this.previous_img).observe('click',function(evt) {
      Event.stop(evt);
      if ($(this.img_number).innerHTML>1) {
        this.swapImage(parseInt($(this.img_number).innerHTML)-2);
      }
    }.bind(this));
    $(this.image_holder).observe('mouseenter',function(evt){
      Event.stop(evt);
      new Effect.Appear($(this.legend_holder),{
      from:0,
      to:this.legend_opacity,
      duration: this.duration_fade,
      queue: { position: 'end', scope: 'legendscope', limit: 1 }});
    }.bind(this));
    $(this.image_holder).observe('mouseleave',function(evt){
      Event.stop(evt);
      new Effect.Fade($(this.legend_holder),{
      from:this.legend_opacity,
      to:0,
      duration: this.duration_fade,
      queue: { position: 'end', scope: 'legendscope', limit: 1 }});
    }.bind(this));
    this.swapImage(0);
  },
  swapImage : function (index) {
    $$(this.photos).each(function (elem) {
      elem.setOpacity(0.5);
    });
    this.carousel.scrollTo(index);
    $$(this.li)[index].childElements()[0].setOpacity(1);
    new Effect.Fade(this.image_swap,{
      duration: this.duration_fade,
      beforeStart: function() {
        $(this.legend_holder).hide();
      }.bind(this),
      queue: { position: 'end', scope: 'diaposcope', limit: 1 }
    });
    var ratio = $$(this.photos)[index].readAttribute(this.datawidth)/$$(this.photos)[index].readAttribute(this.dataheight);
    var zHeight = parseInt($(this.image_holder).getWidth()/ratio);
    $(this.image_swap).setStyle({width:$(this.image_holder).getWidth()+'px'});
    new Effect.Morph(this.image_holder,{
      duration: this.duration_morph,
      style : {
        height: zHeight+'px'
      },
      queue: { position: 'end', scope: 'diaposcope', limit: 2 },
      afterFinish:function() {
        $(this.image_swap).src=$$(this.photos)[index].readAttribute(this.datasrc);
        $(this.image_swap).up(0).writeAttribute({'onclick': $$(this.photos)[index].readAttribute(this.datalink)});
        $(this.image_swap).up(0).setStyle({'cursor': ($$(this.photos)[index].readAttribute(this.datalink) != '') ? 'pointer' : 'default'});
        new Effect.Appear(this.image_swap,{
          duration: this.duration_fade,
          afterFinish: function() {
            if ($(this.legend_holder)) {
              $(this.legend_holder).down(0).update($$(this.photos)[index].readAttribute(this.datalegend));
            }
          }.bind(this)
        });
        $(this.img_number).update(parseInt(index)+1);
        if (parseInt(index)==0) {
          $(this.previous_img).addClassName('nolink');
        } else {
          $(this.previous_img).removeClassName('nolink');
        }
        if (parseInt(index)+1==$$(this.photos).size()) {
          $(this.next_img).addClassName('nolink');
        } else {
          $(this.next_img).removeClassName('nolink');
        }
      }.bind(this)
    });
  }
});