var ImageSlide = new Class({
	Implements: [Options, Events],

	options: {
		autoplay: true,
		effect: 'fade',
		duration: 1000,
		imagesClass : 'images',
		frameClass : 'frame',
		interval: 5000,
		width: 883,
		height: 360
	},

	initialize: function(container, options) {
		this.container = $(container);
		this.setOptions(options);

		// Create containers for the images, the frame, and the info box but don't insert it yet to the DOM
		this.imagesContainer = new Element('div', {'class': this.options.imagesClass});
		this.frameContainer = new Element('div', {'class': this.options.frameClass});

		// Create global variables
		this.images = new Array();

		this.currentImage = 0;
		this.previousImage = 0;

		this.start();
		this.prepareNav();
	},

	start: function() {

		// Get all the elements that will be shown in the slideshow. Default is anchors with the image inside. But IMG is also acceptable
		this.container.getChildren().each(function(e){
			this.imagesContainer.grab(this.prepareImage(e));
		}, this);

		// True if the transition animation is running
		this.transitioning = false;

		// Insert the containers inside the main container
		this.container.grab(this.frameContainer);
		this.container.grab(this.imagesContainer);

		// Display the first image
		this.images[0].setStyles({opacity: 1});

		// Add the autoplay events
		this.addEvent('complete', function(){
			if (this.options.autoplay) {
				this.transition = this.startEffect.delay(this.options.interval, this);
			};
			this.transitioning = false;
		}.bind(this));

		this.addEvent('start', function(){
			this.transitioning = true;

			// Clear any time triggered calls
			$clear(this.transition);
		}.bind(this));

		// Play the slideshow
		if (this.options.autoplay) {
			this.startEffect.delay(this.options.interval, this);
		};
	},

	prepareImage: function(e){

		var info = {};

		if (e.tagName == 'A') {
			var image = $(e).getFirst('img');
			info.url = $(e).get('href');
		}else {
			var image = $(e);
			info.url = $empty;
		};

		info.title = image.get('alt'),
		info.description = image.get('title');

		image.store('info', info);

		this.prepareEffect(image);

		this.images.push(image);

		return image;
	},

	prepareEffect: function(e) {
		var options = {
			duration: this.options.duration,
			onComplete: function() {
				this.fireEvent('complete');
			}.bind(this)
		};

		switch(this.options.effect) {
			default:
				e.setStyles({opacity: 0, position: 'absolute', left: 0, top: 0});
				options.property = 'opacity';
				e.fx = new Fx.Tween(e, options);
			break;
		}
	},

	startEffect: function() {

		if (this.transitioning) {
			return false;
		};

		this.currentImage++;

		if (this.currentImage >= this.images.length) {
			this.currentImage = 0;
		}

		var current = this.images[this.currentImage];
		var previous = this.images[this.previousImage];

		this.endEffect(previous);

		switch(this.options.effect) {
			default:
				current.fx.start(1);
				this.fireEvent('start');
			break;
		}

		this.previousImage = this.currentImage;

		this.fireEvent('next', this);
	},

	endEffect: function(e) {
		switch(this.options.effect) {
			default:
				 e.get('tween', {property: 'opacity', duration: this.options.duration}).start(0);
			break;
		}
	},

	getCurImage: function() {
		return this.images[this.currentImage];
	},

	getNextImage: function() {
		var next = this.currentImage + 1;

		if (next >= this.images.length) {
			next = 0;
		}

		return this.images[next];
	},

	getPrevImage: function() {
		var prev = this.currentImage - 1;

		if (prev <= 0) {
			prev = this.images.length - 1;
		}

		return this.images[prev];
	},

	getCurInfo: function() {
		return this.getCurImage().retrieve('info');
	},

	prepareNav: function() {
		var next = new Element('a', {
			'class': 'next',
			'text': this.getNextImage().retrieve('info').title,
			'href': '#',
			'styles' :{
				'z-index': Number(this.frameContainer.getStyle('z-index')) + 1
			},
			'events': {
				'click': function(e) {
					if (this.transitioning) {
						return false;
					};

					this.startEffect();
					return false;
				}.bind(this)
			}
		});

		var prev = new Element('a', {
			'class': 'prev',
			'text': this.getPrevImage().retrieve('info').title,
			'href': '#',
			'styles' :{
				'z-index': Number(this.frameContainer.getStyle('z-index')) + 1
			},
			'events': {
				'click': function(e) {
					if (this.transitioning) {
						return false;
					};

					if (this.currentImage == 0) {
						this.currentImage = this.images.length - 2;
						this.startEffect();
						return false;
					};

					this.currentImage = this.currentImage - 2;
					this.startEffect();
					return false;
				}.bind(this)
			}
		});

		this.container.adopt(next, prev);
	}
});