var SimpleSlideShow = new Class(
{
	Implements: [Options, Events],
	options:
	{
		slide_elements_selector: '#imageContainer img'
	},
	initialize: function( options )
	{
		this.setOptions( options );
		this.slide_elements = $$( this.options.slide_elements_selector );
		this.counter = 0;

		//initialize
		this.slide_elements.each(function(item, index)
		{
			var effect = new Fx.Tween(item, { property:'opacity' });
			//store on the element
			item.store('effect', effect);

			if(index>0)
			{
				item.retrieve('effect').set(0)
			}
		}, this);

		var intervalID2 = this.fade_in_out.periodical(5000, this);
	},

	fade_in_out: function()
	{
		// if key exists
		if(this.slide_elements[this.counter]) {
			//fade out current slide group
			this.slide_elements[this.counter].retrieve('effect').start([1,0]);

			if(this.counter<(this.slide_elements.length-1))
				this.counter++;
			else
				this.counter=0;

			//slide in
			this.slide_elements[this.counter].retrieve('effect').start([0,1]);
		}
	}
});


var SimpleSlideShowOverFade = new Class
({
	Extends: SimpleSlideShow,
	//options:{},

	initialize: function( options )
	{
		this.setOptions( options );
		this.slide_elements = $$( this.options.slide_elements_selector );
		this.counter = 0;

		//initialize
		this.slide_elements.each(function(item, index)
		{
			var effect = new Fx.Tween(item, 
			{
				property:'opacity',
				duration:1000,
				onComplete: this.fade_out.bind(this)
			});
			//store on the element
			item.store('effect', effect);

			if(index>0)
			{
				item.retrieve('effect').set(0)
			}
		}, this);

		var intervalID2 = this.fade_over.periodical(3000, this);
	},

	fade_over: function()
	{
		// if key exists
		if(this.slide_elements[this.counter]) {

			//first change the z-indexdes of the images so that we do not have
			//problems fading one on top of the other

			//prev slide
			//this.slide_elements[this.counter].setStyle('z-index', 100);

//			console.log(this.counter+" : counter3");
//			console.log(this.slide_elements+" : elements");
//			console.log(this.slide_elements.length+" : length");

			if(this.counter < (this.slide_elements.length-1) )
				this.counter++;
			else
				this.counter=0;

			//console.log(this.counter);

			//next slide
			this.slide_elements[this.counter].setStyle('z-index', 200);

			//fade over effect
			var fade_over_effect = this.slide_elements[this.counter].retrieve('effect').start([0,1]);
			//fade_over_effect.start([0,1]);
		}
	},

	fade_out: function()
	{

//		var prev_key;
//
		if( this.counter == 0 )
			prev_key = (this.slide_elements.length-1);
		else
			prev_key = (this.counter)-1;

		this.slide_elements[prev_key].retrieve('effect').set(0);
		this.slide_elements[this.counter].setStyle('z-index', 100);



//		if(this.counter<(this.slide_elements.length-1))
//			this.counter++;
//		else
//			this.counter=0;
	}

});