var Slideshow = Class.create();

Slideshow.prototype = {

	initialize : function(options) {
		this.slidenum  = 0;
    this.slidetime = 8 || options.slidetime;  // seconds each slide is shown
    this.fadetime  = 2 || options.fadetime;   // seconds fading
    this.images = [];
    this.labels = [];
  	Event.observe(window, 'load', this.start.bind(this));
	},

	start: function() {
    $$('#slideshow_labels h2').each(
      function(h2) {
        this.images.push(h2.getAttribute('image'));
        this.labels.push(h2);
      }, this);
    
    this.image1 = new Element('img').addClassName('slide-image').setOpacity(0);
    this.image2 = new Element('img').addClassName('slide-image').setOpacity(0);
    this.image1.src = this.images[0];
    this.image2.src = this.images[0];
    $('slideshow').appendChild(this.image1);
    $('slideshow').appendChild(this.image2);
    this.cycle();
		new PeriodicalExecuter(this.cycle.bind(this), this.slidetime); 
	},

  cycle: function() {
    if (this.slidenum == this.images.length)
      this.slidenum = 0;
    
    var tmp = this.image1;
    this.image1 = this.image2;
    this.image2 = tmp;
    this.image2.src = this.images[this.slidenum];

  	new Effect.Parallel(
     [new Effect.Fade(  this.image1, {sync:true}),
	  	new Effect.Appear(this.image2, {sync:true})],
			{ duration: this.fadetime, fps:20 }	);

    this.slidenum++;
  }
  
};