var Diaporama = Class.create();
var effectDuration = 0.7;
var showDelay = 3000;
var fps_effect = 15.0;

Diaporama.prototype =  {
    images            : [],
    lis               : [],
    current_image_idx : 0,

    initialize: function() {
        if (!document.getElementsByTagName){ return; }

        var fadeContainer = $('diaporama');
        var ulElt = document.createElement('ul');
        

        var count = 1;
        fadeContainer.immediateDescendants().each(function(d) {
            if (d.nodeName == 'DIV' && d.firstChild && d.firstChild.nodeName == 'IMG') {
                d.id = 'fondu_' + this.images.size();
                this.images.push(d);
                anchor = document.createElement('a');
                anchor.innerHTML = count;
                var current_count = count;
                anchor.onclick = function() { 
                  //this.switchImage(current_count);
                  return false; 
                }.bind(this);
                //anchor.href = '#';
                liElt = document.createElement('li');
                liElt.appendChild(anchor);
                this.lis.push(liElt);
                count++;
            }
        }.bind(this));

        for(i=(this.lis.length - 1); i >= 0; i--) {
          ulElt.appendChild(this.lis[i]);
        }

        fadeContainer.appendChild(ulElt);

        setInterval(function() {
          this.switchImage();
        }.bind(this), showDelay);

        if (firstLi = $(this.lis[0])) {
          firstLi.addClassName('on');
        }
        new Effect.Appear(
            this.images[0].id, 
            { duration: effectDuration, from:0.0, to:1.0 }
        );
    },

    switchImage: function(next_idx) {
      new Effect.Fade(
        this.images[this.current_image_idx].id, 
        { duration: effectDuration, from:1.0, to:0.0, fps: fps_effect }
      );
      if (previousLi = $(this.lis[this.current_image_idx])) {
        previousLi.removeClassName('on');
      }
      if (next_idx) {
        this.current_image_idx = next_idx;
      } else {
        this.current_image_idx++;
      }

      if (this.current_image_idx >= this.images.length ) this.current_image_idx = 0;

      if (nextLi = $(this.lis[this.current_image_idx])) {
        nextLi.addClassName('on');
      }

      new Effect.Appear(
        this.images[this.current_image_idx].id, 
        { duration: effectDuration, from:0.0, to:1.0, fps: fps_effect }
      );
    }

}
function initDiaporama() { myDiaporama = new Diaporama(); }
Event.observe(window, 'load', initDiaporama, false);