//		
//		slideMachine version 1.0
//		mootools 1.3
//		


var slideMachine = new Class
({
	Implements: [ Options ],
	
 	options:
	{
		gap: 30,						// type num
		arrows: false,					// true, false
		pager: 'top',					// top, bottom, false
		label: null,					// tag
		view: 1,						// type num
		mode: 'horizontal',				// horizontal, vertical, fade, direct
		autoplay: null,					// true, false
		duration: 500,					// type num
		transition: 'expo:in:out'		// expo, cubic, back, bounce, quad... http://mootools.net/docs/core/Fx/Fx.Transitions#Fx-Transitions 
	},
	
	initialize: function(elements, options)
	{
		this.setOptions(options);
		
		this.elements = elements;
		
		this.elements.setStyles
		({
			'overflow': 'hidden'
		});
		
		this.element_ref = this.elements[0];
		
		if( this.element_ref.getParent('ul') )
		{
			this.area = new Element('div').addClass('items-area').inject(this.element_ref.getParent('ul'), 'before');
		}
		else
		{
			this.area = new Element('div').addClass('items-area').inject(this.element_ref, 'before');
		}
		
		this.area.setStyle('position','relative');
		
		this.layer = new Element('div').addClass('items-layer').inject(this.area);
		
		if( this.element_ref.getParent('ul') )
		{
			this.container = this.element_ref.getParent('ul').addClass('items-container').inject(this.layer);
			
			this.container.setStyles
			({
				'margin': 0,
				'padding': 0
			});
		}
		else
		{
			this.container = new Element('div').addClass('items-container').inject(this.layer);
		}
		
		this.container.setStyles
		({
			'overflow': 'hidden'
		});
		
		this.pager = new Element('ul').addClass('pager').inject(this.area, this.options.pager);
		
		if(! this.options.pager ) this.pager.setStyle('display','none');
		
		this.pages = [];
		
		this.start = 0;
		
		if( this.area.getParent().getElement('var') ) this.start = this.area.getParent().getElement('var').setStyle('display','none').innerHTML - 1;
		
		this.layer_fx = new Fx.Morph
		(
			this.layer,
			{
				link: 'cancel',
				duration: this.options.duration,
				transition: this.options.transition
			}
		);
		
		this.container_fx = new Fx.Morph
		(
			this.container,
			{
				link: 'cancel',
				duration: this.options.duration,
				transition: this.options.transition
			}
		);
		
		this.css_h = this.element_ref.getStyle('border-left-width').toInt() + this.element_ref.getStyle('border-right-width').toInt() + this.element_ref.getStyle('padding-left').toInt() + this.element_ref.getStyle('padding-right').toInt();
		
		this.css_v = this.element_ref.getStyle('border-top-width').toInt() + this.element_ref.getStyle('border-bottom-width').toInt() + this.element_ref.getStyle('padding-top').toInt() + this.element_ref.getStyle('padding-bottom').toInt();
		
		this.width = this.element_ref.getCoordinates().width;
		
		this.height = this.element_ref.getCoordinates().height;
		
		this.gap = this.options.gap;
		
		this.elements.each
		(
			function(element, index)
			{
				var w = this.width / this.options.view;
				
				var gap = 0;
				
				if( this.options.view > 1 ) gap = this.gap / this.options.view;
				
				if( this.options.mode != 'vertical' )
				{
					element.setStyles
					({
						'width': w - this.css_h - gap,
						'float': 'left',
						'margin-right': this.gap
					});
				}
				else
				{
					element.setStyles
					({
						'margin-bottom': this.gap
					});
				}
				
				element.inject(this.container);
				
				var page = new Element('li').set('html', index+1).addClass('p-' + index).inject(this.pager);
				
				if( this.options.label )
				{
					if( this.options.label == 'img' )
					{
						page.set('html', element.getElement(this.options.label).alt);
					}
					else
					{
						page.set('html', element.getElement(this.options.label).innerHTML);
					}
				}
				
				this.pages.push(page);
				
				page.addEvent
				(
					'click', function()
					{
						if( this.options.mode == 'horizontal' )
						{
							this.container_fx.start
							({
								'margin-left': - ( w + this.gap - gap ) * index
							});
							
							this.layer_fx.start
							({
								'height': element.getCoordinates().height
							});
						}
						else if( this.options.mode == 'vertical' )
						{
							var h = 0;
							
							for( var a = index ; a < index + this.options.view ; a++ )
							{
								h += this.elements[a].getCoordinates().height + this.gap;
							}
							
							this.layer_fx.start
							({
								'height': h - this.gap
							});
							
							this.container_fx.start
							({
								'margin-top': - element.getCoordinates(element.getParent()).top
							});
						}
						else if( this.options.mode == 'direct' )
						{
							for( var a = index ; a < index + this.options.view ; a++ )
							{
								h = Math.max( h, this.elements[a].getCoordinates().height );
							}
							
							this.container_fx.set
							({
								'margin-left': - ( w + this.gap - gap ) * index
							});
							
							this.layer_fx.set
							({
								'height': h
							});
						}
						else if( this.options.mode == 'fade' )
						{
							for( var a = index ; a < index + this.options.view ; a++ )
							{
								h = Math.max( h, this.elements[a].getCoordinates().height );
							}
							
							this.container_fx.start
							({
								'opacity': 0
							})
							.chain
							(
								function()
								{
									this.container.setStyles
									({
										'margin-left': - ( w + this.gap - gap ) * index
									});
									
									this.container_fx.start
									({
										'opacity': 1
									});
								}
								.bind(this)
							);
							
							this.layer_fx.start
							({
								'height': element.getCoordinates().height
							});
						}
						
						if( this.current ) this.current.removeClass('selected');
						
						page.addClass('selected');
						
						this.current = page;
						this.start = index;
					}
					.bind(this)
				);
				
			}
			.bind(this)
		);
		
		if( this.element_ref.getParent('ul') )
		{
			new Element('div').addClass('clear').inject(this.container, 'after');
		}
		else
		{
			new Element('div').addClass('clear').inject(this.container);
		}
		
		this.max_width = (this.width + this.gap) * this.elements.length;
				
		this.max_height = (this.height + this.gap) * this.elements.length;
		
		if( this.options.mode == 'horizontal' || this.options.mode == 'direct' || this.options.mode == 'fade' )
		{
			this.container.setStyle('width', this.max_width + ( this.css_h * this.elements.length ) );
		}
		else if( this.options.mode == 'vertical' )
		{
			this.layer.setStyle('height', this.height * this.options.view );
		}
		
		this.layer.setStyles
		({
			'overflow': 'hidden',
			'position': 'relative'
		});
		
		this.pages[this.start].fireEvent('click');
		
		if( this.options.arrows ) this.addArrows();
		
		if( this.options.autoplay ) this.autoplay();
	},
	
	addArrows: function()
	{
		this.prev_button = new Element('div.arrow.prev[text=<]').inject(this.layer, 'after');
		this.next_button = new Element('div.arrow.next[text=>]').inject(this.layer, 'after');
		
		this.prev_button.addEvent
		(
			'click', function()
			{
				this.start--;
				if( this.start < 0 ) this.start = this.pages.length - this.options.view;
				this.pages[this.start].fireEvent('click');
			}
			.bind(this)
		);
		
		this.next_button.addEvent
		(
			'click', function()
			{
				this.start++;
				if( this.start > this.pages.length - this.options.view ) this.start = 0;
				this.pages[this.start].fireEvent('click');
			}
			.bind(this)
		);
	},
	
	autoplay: function()
	{
		this.routine =
		(
			function()
			{
				this.start++;
				if( this.start > this.pages.length - this.options.view ) this.start = 0;
				this.pages[this.start].fireEvent('click');
			}
			.bind(this)
		)
		.periodical(this.options.autoplay);
		
		this.area.addEvents
		({
			'mouseenter': function()
			{
				window.clearInterval(this.routine);
			}
			.bind(this),
			
			'mouseleave': function()
			{
				this.area.removeEvents();
				this.autoplay();
			}
			.bind(this)
		});
	}
});