var SlideShow = Class.create({
  
  initialize: function(element, options) {
    this.element = element;
    this.suppliedOptions = options;

    this.defaultOptions = $H({
      slideDuration: 7.0,
      transitionDuration: 3.0
    });

    // assign the options to internal variables
    this.options = this.defaultOptions.merge(this.suppliedOptions).each(function(option){
      this[option[0]] = option[1];
    }.bind(this));

    this.registerStart();
  },
 
  registerStart: function() {
    if (!$(this.element)) return;
    this.id = $(this.element).id;
    
    this.slides = $$('#' + String(this.id) + ' li');
    this.currentIndex = 0;
    
    // fire off the first transition. We use a smaller time here, since the first pic is already displayed
    this.transition.bind(this).delay(this.slideDuration - this.transitionDuration);
  },
  
  transition: function() {
    var nextIndex    = (this.currentIndex + 1) % this.slides.length;
    var currentSlide = this.slides[this.currentIndex];
    var nextSlide    = this.slides[nextIndex];

    currentSlide.fade({duration: this.transitionDuration});
    nextSlide.appear({duration: this.transitionDuration});
    
    this.currentIndex = nextIndex;
    this.transition.bind(this).delay(this.slideDuration);
  }

});

document.observe('dom:loaded', function() {
  new SlideShow('slideshow', { slideDuration: 7.0, transitionDuration: 3.0 });
});