var Slideshow = new Class({
	options: {
		show_controls: true,
		counter_class: 'counter',
		active_class: 'counter-active',
		direction: 'vertical',
		interval: 4500,
		fxDuration: 700
	},
	
	Implements: [Options,Events],
	
	initialize: function(container, innerContainer, elements, options) {
		this.setOptions(options);
		//Set widths
		var slides = $$(elements);
		var innerContainer = $(innerContainer);
		var slides_total = slides.length;
		var slide_width = 100/slides_total;
		var innerContainer_width = slides_total * 100;
		//make the slide visible again. Hidden with CSS for first loads.
		slides.setStyles({'width': slide_width + '%', 'visibility':'visible' });
		innerContainer.setStyle('width', innerContainer_width + '%');
		var slideWidthPx = slides[0].getSize().x;
		
		innerContainer.set('tween',{ duration: this.options.fxDuration });
		
		this.slideWidthPx = slideWidthPx;
		this.slideWidth = slide_width;
		this.innerContainer = innerContainer;
		this.slides_total = slides_total;
		this.container = $(container);
		this.elements = $$(elements);
		this.slideInterval = this.options.interval;
		this.direction = this.options.direction;
		this.currentIndex = 0;
		this.height = this.container.getSize().y;
		if(this.options.show_controls) this.counter = [];

		
		//pagination	
		if(this.options.show_controls) {
			var controls = new Element('div',{
				'id': 'slider-controls',
				'styles': {
					'visibility': 'hidden',
					'opacity': 0
				}
			}).inject(this.container);
			
			this.controls = controls;
		}
		this.elements.each(function(el,i){
			if(this.options.show_controls && slides_total > 1) {
				this.counter.push(new Element('a',{
					href: '#',
					'class': this.options.counter_class + (i == 0 ? ' ' + this.options.active_class : ''),
					events: {
						click: function(e) {
							if(e) e.stop();
							this.stop();
							this.show(i);
						}.bind(this)
					}
				}).inject(controls));
			}
			if(this.direction == 'vertical'){
				//Get elements other than the first one out of the container and place them in the right x coordinates
				if(i > 0) el.setStyles({'top': this.height.toInt(), 'right': slide_width * i + '%'}); else el.setStyle('top', 0);
			}
			
		},this);
		if(this.options.show_controls) {
			if(slides_total > 1) this.createControls();
		}
		
		// Add hover events to the container
		this.container.addEvents({
			mouseenter: function() { 
				if(this.options.show_controls) {
					controls.fade('in');
				} 
				this.stop(); 
			}.bind(this),
			
			mouseleave: function() { 
				if(this.options.show_controls) {
					controls.fade('out');
				} 
				this.start(); 
			}.bind(this)
		});

	},
	
	show: function(to) {
		if(this.direction == 'vertical'){

			//Get the active item off the container and remove the class from the pagination
			this.elements[this.currentIndex].tween('top', this.height.toInt());
			
			if(this.options.show_controls) this.counter[this.currentIndex].removeClass(this.options.active_class);
			
			//Bring the next item to the container and set the active class on the corresponding pagination link		
			this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))].tween('top', 0);
			
			if(this.options.show_controls) this.counter[this.currentIndex].addClass(this.options.active_class);
		}
		
		else{

			//Remove the active class
			if(this.options.show_controls) this.counter[this.currentIndex].removeClass(this.options.active_class);
			
			//Change the current index
			this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))
			
			//slide!
			this.innerContainer.tween('margin-left', -this.slideWidthPx*(this.currentIndex));
			
			//Addthe active class
			if(this.options.show_controls) this.counter[this.currentIndex].addClass(this.options.active_class);

		}
	},
	
	start: function() {
		if(this.slides_total > 1) this.interval = this.show.bind(this).periodical(this.slideInterval);
	},
	
	stop: function() {
		$clear(this.interval);
	},
	
	createControls: function() {
 		var previous = new Element('a',{
			href: '#',
			id: 'slider-previous',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop(); 
					this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
				}.bind(this)
			}
		}).inject(this.controls, 'top');
		
		var next = new Element('a',{
			href: '#',
			id: 'slider-next',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop(); 
					this.show();
				}.bind(this)
			}
		}).inject(this.controls);
	}
});