/*======================================================================*\
|| #################################################################### ||
|| # Youjoomla LLC - YJ- Licence Number 1432KM584
|| # Licensed to - Stefan Stojanovic
|| # ---------------------------------------------------------------- # ||
|| # Copyright ©2006-2009 Youjoomla LLC. All Rights Reserved.           ||
|| # This file may not be redistributed in whole or significant part. # ||
|| # ---------------- THIS IS NOT FREE SOFTWARE ---------------- #      ||
|| # http://www.youjoomla.com | http://www.youjoomla.com/license.html # ||
|| #################################################################### ||
 @author		Constantin Boiangiu <info [at] constantinb.com>
\*======================================================================*/

var SlidingMenu = new Class({
	initialize: function(options) {
		this.options = Object.extend({
			menuContainer : null, // the list id
			highlightClass: null, // css class for the background sliding element
			highlighted: null, // highlighted element. Starts from 0 ( ie: if the current page is the third link from the menu, set it to 2 ) 
			hoveredLink:{ 'color':'#FFFFFF' }, // anchors have their own effects. Set here what you want changed when hovered
			outLink: { 'color':'c70101' }, // set this as the default instance of the anchor
			duration:900, // effect duration
			slidesContainer: null,
			innerContainer: null,
			slideClass: null,
			slideEvent: 'click', // can be click or mouseover
			autoslide: 3000, // in milliseconds; set to null to stop autosliding
			stopOnClick: false,
			slideEffect: Fx.Transitions.Back.easeOut
		}, options || {});
		
		this.menuContainer = $(this.options.menuContainer);
		this.slidesContainer = $(this.options.slidesContainer);
		this.elements = this.menuContainer.getElements('li');
		this.slides = this.slidesContainer.getElements(this.options.slideClass);
		this.currentElement = this.options.highlighted||0;
		this.begin();
		
	},
	
	begin: function(){
		this.inject();
		this.prepareSlides();
		this.fx = new Fx.Styles(this.highlight, {
			duration:this.options.duration, 
			wait:false, 
			transition:Fx.Transitions.sineInOut
		});
		
		this.highlighted = this.currentElement;
		
		this.elements.each(function(elem, i){
			elem['left'] = elem.offsetLeft - elem.getStyle('margin-left').toInt();
			elem['fx'] = new Fx.Styles(elem.getElement('a'), {
				duration:this.options.duration*1.2, 
				wait:false, 
				transition:Fx.Transitions.sineInOut
			});
			
			elem.addEvent('mouseover', function(event){
				$clear(this.periodical);
				this.fx.start({'width':elem.offsetWidth, 'left':elem['left']});				
				
				
				this.elements[this.highlighted]['fx'].start( this.options.outLink );
				
				elem['fx'].start( this.options.hoveredLink );
				if(this.options.slideEvent == 'mouseover')
					this.switchSlide(i);
				this.highlighted = i;	
								
			}.bind(this));			
			
			elem.addEvent('mouseout', function(event){
				this.elements[this.currentElement].fireEvent('mouseover');	
				if( this.options.autoslide && !this.options.stopOnClick )
					this.periodical = this.startRotation();		
			}.bind(this));
			
			elem.addEvent('click', function(event){
				$clear(this.periodical);
				new Event(event).stop();
				if(this.options.slideEvent == 'click')
					this.switchSlide(i);
				this.currentElement = i;	
				
			}.bind(this));
			
			if( i == this.currentElement ){
				elem.fireEvent('mouseover');	
				this.switchSlide(i);
			}
			
		}.bind(this));
		
		if( this.options.autoslide ){
			this.periodical = this.startRotation();	
			this.slidesContainer.addEvent('mouseover', function(){
				$clear(this.periodical);
			}.bind(this));
			this.slidesContainer.addEvent('mouseout', function(){
				this.periodical = this.startRotation();	
			}.bind(this));
		}
			
	},
	
	startRotation: function(){
		return this.rotate.periodical(this.options.autoslide, this);
	},
	
	stopRotation: function(){
		$clear(this.periodical);
	},
	
	rotate: function(){
		slide = this.currentElement < this.slides.length-1 ? this.currentElement+1 : 0;
		this.switchSlide(slide);	
		this.fx.start({'width':this.elements[slide].offsetWidth, 'left':this.elements[slide]['left']});
		this.elements[this.currentElement]['fx'].start( this.options.outLink );
		this.elements[slide]['fx'].start( this.options.hoveredLink );
		this.currentElement = this.highlighted = slide;		
	},
	
	prepareSlides: function(){
		var dummy = new Element('div').setStyles({'width':this.slides[0].offsetWidth,'display':'block','float':'left','height':this.slides[0].offsetHeight});
		dummy.injectBefore(this.slides[0]);
		this.scrollFx = new Fx.Scroll(this.options.slidesContainer, {
			wait: false,
			duration: this.options.duration,
			transition: this.options.slideEffect
		});
		
		$(this.options.innerContainer).setStyle('width', (this.slides.length+2)*this.slides[0].offsetWidth );
	},
	
	switchSlide: function(slide){
		this.scrollFx.toElement(this.slides[slide]);
	},
	
	inject: function(){
		this.highlight = new Element('li').addClass(this.options.highlightClass);
		var right = new Element('div').addClass('right').injectInside(this.highlight);
		this.menuContainer.adopt(this.highlight);
	}
	
});