var SlideShow = new Class({
	
	initialize: function(container, options){
		this.setOptions({
			display: 4000,
			transition: 1000,
			random: false,
			images: []
		}, options);
		
		this.i = 0;
		
		this.container = container.setStyles({
			'position' : 'relative',
			'padding': '0'
		});
		
		this.image = container.getElement('img');
		
		this.overlay = new Element('img').setProperties({
			'border': this.image.getProperty('border'),
			'usemap': this.image.getProperty('usemap')
		}).setStyles({
			'position' : 'absolute',
			'visibility' : 'hidden',
			'top': '0px',
			'left': '0px',
			'z-index' : 2
		}).addEvent('load', function(){
			(function(){ this.show() }.bind(this)).delay(this.options.display/4);
		}.bind(this)).injectInside(this.container);
		
		this.swap();
	},
	
	show: function() {
		this.overlay.setStyles({
			'opacity': 1
		});
		(function(){ this.load() }.bind(this)).delay(this.options.display/4);
	},
	
	load: function() {
		if (this.options.random) {
			var r = Math.floor((Math.random() * this.options.images.length) + 1);
			if (this.i == r) {
				this.i = r+1;
			} else {
				this.i = r;
			}
		} else {
			this.i++;
		}
		if (this.i >= this.options.images.length) {
			this.i = 0;
		}
		this.image.setProperty('src', this.options.images[this.i]);
	},
	
	swap: function() {
		this.overlay.setProperty('src', this.image.getProperty('src'));
		(function() { this.fade() }.bind(this)).delay(this.options.display);
	},
	
	fade: function() {
		this.overlay.effects({
			duration: this.options.transition,
			wait: false,
			onComplete : function() {
				this.swap();
			}.bind(this)
		}).start({'opacity': 0});
	}
	
});

SlideShow.implement(new Events, new Options);