
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();

		this.container.clone()
			.setStyles({ width: 'inherit', height: 'inherit', overflow: 'inherit', opacity: 1 })
			.set('tween', {
				duration: this.options.duration,
				onStart: function(el) {
					this.container.setStyle('backgroundImage', 'url('+this.slides[this._index].img.src+')');
				}.bind(this),
				onComplete: function(el) {
					el.destroy();
					this._start_timer();
				}.bind(this)
			})
			.inject(this.container)
			.tween('opacity', 0);
	}


});












