/**
 * MooSlider - mootools 1.1 slider
 * @version		1.0.0
 * @MooTools version 1.1
 * Copyright Youjoomla LLC
 * @author		Constantin Boiangiu <info [at] constantinb.com>
 */
var MooSlider = new Class({
	initialize: function(options) {
		this.options = Object.extend({
			container: null,
			slides: null,
			navs:null,
			transition: Fx.Transitions.Sine.easeOut,
			effectDuration: 500,
			fromTop: 500,
			topDist: 100,
			slideDelay: 5000
		}, options || {});
		
		if(!$(this.options.container)) return;
		this.start();	
	},
	
	start: function(){
		this.elements = $(this.options.container).getElements(this.options.slides);
		this.navs = $(this.options.container).getElements(this.options.navs);
		this.currentElement = 0;
		
		this.elements.each(function(elem, i){
			var nav = this.navs[i];
			
			if(i==this.currentElement){
				nav.addClass('selected');				
			}
			elem.setStyles({
				'position':'absolute',
				'top':0,
				'left':0,
				'opacity':( i==this.currentElement ? 1 : 0 )
			});
			
			this.elements[i]['fx'] = new Fx.Styles(elem, {
				duration:this.options.effectDuration, 
				wait:false, 
				transition:this.options.transition
			});
			this.elements[i]['nav'] = nav;
			
			elem.addEvents({
				'mouseenter': function(){
					$clear(this.period);
				}.bind(this),
				'mouseleave': function(){
					if( this.options.slideDelay )
						this.period = this.rotate.periodical(this.options.slideDelay, this);
				}.bind(this)			
			});
			
			nav.addEvent('click', function(event){
				
				if(this.currentElement==i) return;
				new Event(event).stop();				
				$clear(this.period);
				this.changeSlide(i);
				if( this.options.slideDelay )
					this.period = this.rotate.periodical(this.options.slideDelay, this);
				
			}.bind(this));
			
		}.bind(this));
		if( this.options.slideDelay )
			this.period = this.rotate.periodical(this.options.slideDelay, this);
		
	},
	
	rotate: function(){
		var i = this.currentElement+1 < this.elements.length ? this.currentElement+1 : 0;
		this.changeSlide(i);
	},
	
	changeSlide: function(i){
		//$(this.options.navigationContainer).addClass('preload');
		var cEl = this.currentElement;
		this.elements[this.currentElement]['fx'].start({'opacity':0, 'left':1500});
		
		this.elements[i]['fx'].set({'left':0});
		this.elements[i]['fx'].start({'opacity':1, 'top':[500,0]}).chain(function(){
			//$(this.options.navigationContainer).removeClass('preload');			
		}.bind(this));
		
		this.elements[this.currentElement]['nav'].removeClass('selected');
		this.elements[i]['nav'].addClass('selected');
		
		this.currentElement = i;
	}
})