var SlideAnimation = new Class({
	Implements: Options,
	
	options: {
		delay: 2,
		padding: 10,
		duration: 1,
		width: 200,
		height:200
	},

	initialize: function(container, imageUrls, options) {
		
		this.setOptions(options);
		
		this.container = this.prepareContainer(container);
		this.imageUrls = imageUrls;
		this.slot = this.createSlot();
		this.currentIndex = 0;
		this.previousImage = null;
		this.currentImage = this.createImage(0);
		this.nextImage = this.createImage(1);
		
		if (this.currentImage.get('loaded')) this.firstDelay();
		else this.currentImage.addEvent('load', this.firstDelay.bindWithEvent(this));
	},
	clear: function() {
		$clear(this.timer);
		this.timer = null;
		this.container.destroy();
		
	},
	
	prepareContainer: function(element) {
		return $(element).empty().setStyles({
			'overflow': 'hidden'
		});
	},
	
	createSlot: function() {
		return new Element('div', {
			styles: {
				'width': '5000px',
				'margin': 0,
				'padding': 0
			},
			tween: {
				duration: this.options.duration * 1000,
				property: 'margin-left',
				onComplete: this.cleanupTransition.bindWithEvent(this)
			}
		}).inject(this.container);
	},
	
	createImage: function(index) {
		var img = new Element('img', {
			styles: {
				'margin': 'auto',
				'vertical-align': 'middle',
				'padding': 0
			},
			events: {
				'load': function(e) { this.set('loaded', true); }
			}
		});
		img.src = this.imageUrls[index];
		var imgContainer = new Element('div', {
			styles: {
				'float': 'left',
				'margin': 0,
				'padding': 0,
				'padding-right': this.options.padding + 'px',
				'width': this.options.width + 'px',
				'height': this.options.height + 'px',
				'background-color': '#ffffff'
			}
		});
		imgContainer.inject(this.slot);
		img.inject(imgContainer);
		return img;
	},
	
	firstDelay: function() {
		this.autosizeContainer();
		this.timer = this.next.delay(this.options.delay * 1000, this);
	},
	
	autosizeContainer: function() {
		var size = this.currentImage.getSize();
		this.container.setStyles({
			'width': this.options.width + "px",
			'height': this.options.height + "px"
		});
	},
	
	next: function(animate) {
		this.currentIndex = this.nextIndex();
		this.previousImage = this.currentImage;
		this.currentImage = this.nextImage;
		this.nextImage = this.createImage(this.nextIndex());
		
		if (this.currentImage.get('loaded')) this.startTransition();
		else this.currentImage.addEvent('load', this.startTransition.bindWithEvent(this));
	},
	
	nextIndex: function() {
		return (this.currentIndex + 1 < this.imageUrls.length) ? this.currentIndex + 1 : 0;
	},
	
	startTransition: function() {
		var delta = -this.container.getSize().x;
		this.slot.tween(delta);
	},
	
	cleanupTransition: function() {
		if(this.previousImage.getParent()) this.previousImage.getParent().destroy();
		this.previousImage.removeEvents().destroy();
		this.slot.setStyle('margin-left', 0);
		$clear(this.timer);
		if(this.timer) this.timer = this.next.delay(this.options.delay * 1000, this);
	}
});