var Slideshow = new Class({
	Implements: [Options],				   
	options: {
		hasFade: true,
		showNav: true,
		loop: true,
		frameDelay: 4000,
		items: 'li',
		height: 400,
		width: 400
	},
	initialize: function(containerId, options) {
		this.container = $(containerId);
		//this.itemContainer = this.container.getElement('.mt-slideshow');
		this.setOptions(options);
		
		this.container.setStyles({
			position: 'relative',
			overflow: 'hidden',
			height: this.options.height,
			width: this.options.width			
		});

		this.myElements = this.container.getElements(this.options.items);
		
		if(this.myElements.length > 0 ){
			this.currentIndex = 0;
			this.zIndex = this.myElements.length;
			
			this.initElements();			
			this.myElements[this.currentIndex].setStyle('visibility', 'visible');

			if(this.options.showNav){
				this.initNav();
			}
			
			this.myTimer = this.goTo.delay(this.options.frameDelay, this, this.myElements[this.currentIndex]);	
			
		}		
	},
	initElements: function(){
		var tmpZ = this.zIndex;
		this.myElements.each(function(myElement){
			myElement.setStyles({
				zIndex: tmpZ,
				visibility: 'hidden',
				position: 'absolute',
				top: 0,
				left: 0,				
				height: this.options.height,
				width: this.options.width					
			});	
			tmpZ--;	
		}.bind(this));			
	},
	goTo: function(curElement) {
		// reset for loop
		(this.currentIndex == (this.myElements.length-1) && this.options.loop) ? this.currentIndex = 0 : this.currentIndex++;		
		this.zIndex++;	
	
		var nextElement = this.myElements[this.currentIndex];
		nextElement.setStyle('z-index', this.zIndex);

		if(this.options.hasFade){
			nextElement.setStyle('opacity', 0);
			var myFadeInEffect = new Fx.Morph(nextElement, {
				transition: Fx.Transitions.Sine.easeOut,
				onStart: function(){
					if(this.options.showNav){
						this.clearNavItems();
						this.navContainerItems[this.currentIndex].addClass('active');	
					}
				}.bind(this),
				onComplete: function() {
					this.myTimer = this.goTo.delay(this.options.frameDelay, this, nextElement);	
				}.bind(this)
			}).start({ 'opacity': [0, 1] });		
		} else {	
			this.myElements[this.currentIndex].setStyle('visibility', 'visible');
			this.myTimer = this.goTo.delay(this.options.frameDelay, this, nextElement);
		}
	},
	initNav: function(){
		this.container.setStyles({
			position: 'relative',
			overflow: 'hidden',
			height: this.options.height,
			width: this.options.width			
		});	

		this.navContainer = new Element('ul', { 
			'class':'mt-nav',
			'styles': { 
				'position': 'absolute',
				'zIndex': 2000000,
				'top': 10,
				'right': 10
			}
		}).inject(this.container);
		
		this.navContainerItems = new Array();
		
		this.myElements.each(function(myElement, index){
			var newListItem = new Element('li', { 
				'styles': { 
					'list-style': 'none',
					'float': 'left',
					'marginRight': 2
				}
			}).inject(this.navContainer);
			var newAnchor = new Element('a', { 
				'styles': { 
					'cursor': 'pointer'
				}
			}).inject(newListItem);
			
			this.navContainerItems.push(newListItem);
			if(index == 0){ newListItem.addClass('active'); }	
			
			newAnchor.addEvent('click', function(event){
				$clear(this.myTimer);
				this.zIndex++;
				this.currentIndex = index;
				this.clearNavItems();
				this.navContainerItems[index].addClass('active');
				this.myElements[index].setStyles({
					zIndex: this.zIndex,
					visibility: 'visible'					
				});
				this.myTimer = this.goTo.delay(this.options.frameDelay*3, this, this.myElements[this.currentIndex]);
			}.bind(this));
		}.bind(this));		
	},
	clearNavItems: function(){
		this.navContainerItems.each(function(myElement, index){	
			if(myElement.hasClass('active')){
				myElement.removeClass('active');
				return;
			}
		}.bind(this));
	}
});