/*  MoyoSlider v1.0
 *  (c) 2008 Rasmus Hansson, MainEdge
 *
 *  Class to slide div's. Depends on Scriptaculous and Prototype
 *  For details, contact moyostudios.com
 *
 *--------------------------------------------------------------------------*/


var Slider = Class.create({
	initialize: function(the_element,orientation, duration) {		
		this.the_element	= the_element;
		this.page 				= 1;
		this.pages  			= $(the_element).childElements().length; // Get the number of "pages"		
		this.subs					= $(the_element).childElements();				 // Get an array of the page elements
		this.orientation  = orientation;
		this.duration			= duration + 0.2;
		
		// just set the main element to hide additional content
		$(the_element).setStyle({  		
  		overflow: 'hidden',  		
  		visibility: 'visible',
  		position: 'relative'
		});		
		
		// Get the hight or width of the element and set all sub elements to same size, also float left if horizontal
		var i=0;
		if (orientation=='vertical') {			
			this.size				= $(the_element).getHeight();						
			while (i < this.pages) {						
				this.subs[i].setStyle({
					height: this.size+"px",
					display: 'block'					
				});
				i=i+1;
			}
		} else {		
			this.size	= $(the_element).getWidth();			
			while (i < this.pages) {						
				this.subs[i].setStyle({
					width: this.size+"px",
					float: 'left'
				});
				i=i+1;
			}			
		}				
				
		var content=$(the_element).innerHTML; // First grab the content within the Div and store it:		
		$(the_element).innerHTML=''; // Clear the content from the Div
		
		// Create the new Div to be inserted:
		var inner_div = new Element('div', { 'id': the_element+'_inner' });		
		$(the_element).insert(inner_div);
		// sets the width of the inner element automatically (total width of all pages)
		if (orientation=='vertical') {
			inner_div.setStyle({
				height: this.pages*this.size+"px",
				position: 'relative',
				overflow: 'hidden'
			});
		} else {		
			inner_div.setStyle({
				width: this.pages*this.size+"px",
				position: 'relative',
				overflow: 'hidden'
			});
		}
		
		// Now populate this new Div with the content that was in the Div:
		inner_div.innerHTML=content;				
	},

	moveToPrevious: function() {				
		if (this.page>1) {
			this.animatePage(this.size);			
			this.page--;
		} else {
			this.animatePage(-this.size*(this.pages-1));			
			this.page=this.pages;
		}
	},
	
	moveTo: function(position) {			
		var diff;
		
		// Change active button
		$('navigation').down('.active').className='';
		$('navigation').down('li',position-1).className='active';		
				
		if (position<=this.pages && position>=1) {			
			if (position<this.page) diff = (this.page-position)*this.size;
			else diff = (position-this.page)*(-this.size);					
			this.animatePage(diff);			
			this.page=position;
		}
	},
	
	moveToNext: function() {
		if (this.page==this.pages) {
			this.animatePage(this.size*(this.pages-1));
			this.page=1;
		} else {
			this.animatePage(-this.size);			
			this.page++;
		}
	},
	
	animatePage: function(size) {
		if (this.orientation=='vertical') {
			new Effect.Move(this.the_element+'_inner', { x: 0 , y: size, duration: this.duration, transition: Effect.Transitions.sinoidal, queue: 'end' });
		} else {
			new Effect.Move(this.the_element+'_inner', { x: size , y: 0, duration: this.duration, transition: Effect.Transitions.sinoidal, queue: 'end' });
		}
	}
	
});