var Slideshow = new Class({
	imageCounter: 0,
	currentImage: null,
	effect: null,
	setOptions: function(options){
		this.options = {
			interval: 5000,
			duration: 2000
		}
		Object.extend(this.options, options || {});
	},
	initialize: function(slideshowContainer, images, options){
		this.container = slideshowContainer;
		this.images = images;
		this.setOptions(options);
		if (this.options.duration > this.options.interval) { this.options.interval = this.options.duration + 2000 }
		this.periodicalTimer = this.transist.periodical(this.options.interval, this);
		//console.log('finished initializing '+this.options.instance);
	},
	transist: function(){
		this.currentImage = this.images[this.images.length - this.imageCounter -1];
		//console.log('Instance '+this.options.instance+' is at image '+this.imageCounter);
		
		this.effect = new Fx.Style(this.currentImage, 'opacity', {duration: this.options.duration, onComplete: this.repositionElement.bind(this)});
		this.effect.start(1,0);
		
		if(this.imageCounter >= this.images.length -1) { 
			this.imageCounter = 0;
		} else { 
			this.imageCounter++;
		}
	},
	repositionElement: function(){
		this.currentImage.setStyles({
			visibility: 'visible',
			opacity: 1
		});
		this.currentImage.injectBefore(this.container.getFirst());
	}
})

fireEvent = window.ie ? 'load' : 'domready';
window.addEvent(fireEvent, function(){
	ss1 = new Slideshow( $('headerSlideshow'), $$('#headerSlideshow img') , {duration: 2000, interval: 5000, instance: "ss1"} );
	//ss2 = new Slideshow( $('ss2'), $$('#ss2 img') , {duration: 2000, interval: 5000, instance: "ss2"} );
	//new Slideshow( $('ss3'), $$('#ss3 img') , {duration: 2000, interval: 5000, instance: "ss3"} );
});