SlideShow = new Class({
	Implements: [Options],
	options: {
		delay: 5000,
		duration: 1000,
		slides: []
	},

	container: null,
	slides: [],

	_timer: null,
	_index: 0,

	initialize: function(container, options) {
		this.container = $(container);
		if(!this.container) return;

		this.setOptions(options);

		var tmp = $splat(this.options.slides);
		this.slides = [];

		for(var i=0; i<tmp.length; ++i) {
			if(typeof(tmp[i]) != 'object') tmp[i] = { src: tmp[i] };
			tmp[i].img = new Image();
			tmp[i].img.src = tmp[i].src;

			this.slides.push( tmp[i] );
		}
		if(this.slides.length <= 1) return;

		this.container.setStyle('background-image', 'url('+this.slides[this._index].img.src+')');
		this.container.setStyle('overflow', 'hidden');
		this.container.empty();

		this._start_timer();
	},

	next: function() {
		this._clear_timer();
		++this._index;
		if(this._index >= this.slides.length) this._index = 0;
		this._transition();
	},

	_start_timer: function() {
		this._clear_timer();
		this._timer = setTimeout(function() {
			this.next();
		}.bind(this), this.options.delay);

	},

	_clear_timer: function() {
		clearTimeout(this._timer);
	},

	_transition: function() {
		this._clear_timer();
		this.container.empty();

		var newEl = new Element('div', {
			styles: {
				opacity: 1,
				width: this.container.getWidth(),
				height: this.container.getHeight(),
				background: this.container.getStyle('background')
			}
		}).inject(this.container);

		this.container.setStyle('backgroundImage', 'url('+this.slides[this._index].img.src+')');

		new Fx.Tween(newEl, {
			duration: this.options.duration,
			onComplete: function() {
				newEl.destroy();
				this._start_timer();
			}.bind(this)
		}).start('opacity', 0);
	}


});