// carousel

var Carousel = new Class
({
	Implements: [ Options ],

	options:
	{
	},

	initialize: function(container, options)
	{
		this.container = $(container);
		
		this.elements = this.container.getElements('div.palette');
		
		this.limit = this.elements.length;
		
		this.gap = this.elements[0].getElement('div.title').getCoordinates().height - this.elements[0].getElement('div.title').getStyle('padding-bottom').toInt();
		
		if( Browser.Engine.trident ) this.gap = this.elements[0].getElement('div.title').getCoordinates().width - this.elements[0].getElement('div.title').getStyle('padding-bottom').toInt();
		
		this.space = this.container.getCoordinates().width - ( this.gap * ( this.limit - 1 ) );
		
		this.fxs = [];
		
		this.elements.each
		(
			function(element, index)
			{
				var effect = new Fx.Morph
				(
					element,
					{
						link: 'cancel',
						duration: 750,
						transition: 'expo:in:out'
					}
				);
				
				this.fxs.push(effect);
				
				element.setStyles
				({
					'left': this.gap * index,
					'width': this.space,
					'z-index': index + 1
				});
				
				element.addEvent
				(
					'click', function()
					{
						this.index = index;
						this.focus();
					}
					.bind(this),
					
					'click', function()
					{
						this.index = index;
						this.focus();
					}
					.bind(this)
				);
				
				new Element('span').addClass('palette-name').set('html', element.getElement('div.title').getElement('h2').innerHTML ).inject(element).setStyle('opacity',.5);
				
				this.initSlideShow(element);
			}
			.bind(this)
		);
		
		this.index = this.container.getElement('var').innerHTML - 1;
		
		this.speedfocus();
	},
	
	focus: function()
	{
		// preceding elements
		for ( a = 0 ; a < this.index ; a++ )
		{
			this.fxs[a].start
			({
				'left': this.gap * a,
				'width': this.gap
			});
		}
		
		// following elements
		for ( a = this.index+1 ; a < this.limit ; a++ )
		{
			this.fxs[a].start
			({
				'left': this.space + ( this.gap * (a-1) ),
				'width': this.gap
			});
		}
		
		// current element
		this.fxs[this.index].start
		({
			'left': this.gap * this.index,
			'width': this.space
		});
	},
	
	speedfocus: function()
	{
		// preceding elements
		for ( a = 0 ; a < this.index ; a++ )
		{
			this.fxs[a].set
			({
				'left': this.gap * a,
				'width': this.gap
			});
		}
		
		// following elements
		for ( a = this.index+1 ; a < this.limit ; a++ )
		{
			this.fxs[a].set
			({
				'left': this.space + ( this.gap * (a-1) ),
				'width': this.gap
			});
		}
		
		// current element
		this.fxs[this.index].set
		({
			'left': this.gap * this.index,
			'width': this.space
		});
	},
	
	initSlideShow: function(element)
	{
		var images = element.getElement('div.background').getElements('img');
		
		var fxs = [];
		
		images.each
		(
			function(image, index)
			{
				if ( index == 0 ) image.setStyle('visibility', 'visible');
				if ( index != 0 ) image.setStyle('opacity', 0);
				
				var fx = new Fx.Morph
				(
					image,
					{
						link: 'cancel',
						duration: 2000,
						transition: 'expo:in:out'
					}
				);
				
				fxs.push(fx);
			}
			.bind(this)
		);
		
		var current = 0;
		
		var previous = 'z';
		
		var routine =
		(
			function()
			{
				if( previous != 'z' )
				{
					fxs[previous].start
					({
						'opacity': 0
					});
				}
				
				current++;
				
				fxs[current].start
				({
					'opacity': 1,
					'visibility': 'visible'
				});
				
				previous = current;
				
				if( current >= images.length-1 )
				{
					current = -1;
				}
			}
		)
		.periodical(4000);
		
	}
});