var SlideShow = new Class({
	Implements: [Options, Events],
	
	options:{
		container:'',
		startIndex:0,
		elementSelector:'div',
		styleVisible:{},
		styleHidden:{},
		transitionShow:Fx.Transitions.Cubic.easeOut,
		transitionHide:Fx.Transitions.Cubic.easeOut,
		durationShow:500,
		durationHide:500,
		period:6000,
		gap:500,
		onChangeComplete:null,
		onChangeBegin:null
	},

	initialize:function(options){
		this.setOptions(options);
		this.elements = $(this.options.container).getElements(this.options.elementSelector);
		this.elementCount = this.elements.length;
		this.elementCurrent = this.options.startIndex;
		this.hasStarted = false;

		this.startLoop();
	},

	loop:function(){
		if(this.hasStarted){
			if(this.options.gap > 0){
				this.hide(this.previousCounter());
				this.show.delay(this.options.gap, this, this.elementCurrent);
			}else{
				this.show(this.elementCurrent);
				this.hide.delay(Math.abs(this.options.gap), this, this.previousCounter());
			}
		}else{
			this.hasStarted = true;
			this.show(this.elementCurrent);
		}
		this.updateCounter();
	},

    startLoop:function(){
        this.periodicalTimer = this.loop.periodical(this.options.period, this);
		this.loop();
    },
	
	updateCounter:function(){
		this.elementCurrent = (this.elementCount > this.elementCurrent + 1) ? this.elementCurrent + 1 : 0;
	},
	
	previousCounter:function(){
		return (0 <= this.elementCurrent - 1) ? this.elementCurrent - 1 : this.elementCount - 1;
	},

	show:function(index){
		this.elements[index].set('morph', {duration:this.options.durationShow, transition:this.options.transitionShow});
		this.elements[index].morph(this.options.styleVisible);
	},
	
	hide:function(index){
		this.elements[index].set('morph', {duration:this.options.durationHide, transition:this.options.transitionHide});
		this.elements[index].morph(this.options.styleHidden);
	}
	
});