var Carousel = function(){}
Carousel.prototype = {};

Carousel.prototype.setElement = function(element)
{
	this.element = element;
};

Carousel.prototype.init = function()
{
	this.i = 0;
	this.speed = 10000;
	this.sliding = false;
	this.width = this.element.getStyle('width').toInt();
	this.clipper = this.element.select('.clipper').first();
	this.slider = this.element.select('.slider').first();

	var childBoxes = this.element.select('.box');

	this.slides = {};
	this.slides.count = childBoxes.length;
	this.slides.width = childBoxes.first().getWidth();
	this.slides.height = childBoxes.first().getHeight();

	if ( Prototype.Browser.IE )
	{
		this.slides.marginRight = childBoxes.first().getStyle('margin').split(' ')[1].toInt();
		this.slides.marginBottom = childBoxes.first().getStyle('margin').split(' ')[2].toInt();
	}
	else
	{
		this.slides.marginRight = childBoxes.first().getStyle('margin-right').toInt();
		this.slides.marginBottom = childBoxes.first().getStyle('margin-bottom').toInt();
	}

	this.clipper.setStyle({ 'height': this.slides.height + 'px' });
	this.initControls();
	this.start();
	this.observeControls();
};

Carousel.prototype.initControls = function()
{
	var ul = new Element('ul');

	var li  = new Element('li', { 'class': 'control stop' });
	var a   = new Element('a', { 'href': '#stop', 'title': 'Stop' });
	var img = new Element('img', { 'src': '/images/stop.gif', 'alt': 'Stop' });
	ul.appendChild(li).appendChild(a).appendChild(img);

	var li  = new Element('li', { 'class': 'control start displayNone' });
	var a   = new Element('a', { 'href': '#start', 'title': 'Start' });
	var img = new Element('img', { 'src': '/images/start.gif', 'alt': 'Start' });
	ul.appendChild(li).appendChild(a).appendChild(img);

	for (var i = 0, j = this.slides.count; i < j; i++)
	{
		var li = new Element('li', { 'class': 'i' + ( i == 0 ? ' active' : '' ) });
		var name = this.element.select('.box')[i].down('h2 a').innerHTML;
		var a  = new Element('a', { 'data-carousel-i': i, 'href': '#box-' + (i + 1) }).update(name);
		ul.appendChild(li).appendChild(a);
	}

	this.element.select('.controls').first().appendChild(ul);
};

Carousel.prototype.start = function()
{
	carouselInterval = setInterval('carousel.slide()', carousel.speed);
	this.sliding = true;
};

Carousel.prototype.observeControls = function()
{
	this.element.select('.controls .start a').first().observe('click', this.startSliding);

	this.element.select('.controls .stop a').first().observe('click', this.stopSliding);

	this.element.select('.controls .i a').each(function(element){
		element.observe('click', function(){
			carousel.stopSliding();
			carousel.i = element.getAttribute('data-carousel-i') - 1;
			carousel.slide();
		});
	});
};

Carousel.prototype.startSliding = function()
{
	if ( carousel.sliding )
		return false;

	carousel.slide();
	carouselInterval = setInterval('carousel.slide()', carousel.speed);
	carousel.sliding = true;
	carousel.updateControls('start');
	return false;
};

Carousel.prototype.stopSliding = function()
{
	if ( !carousel.sliding )
		return false;

	clearInterval(carouselInterval);
	carousel.sliding = false;
	carousel.updateControls('stop');
	return false;
};

Carousel.prototype.updateControls = function(type)
{
	var controls = this.element.select('.controls .control');

	if ( type == 'stop' )
	{
		controls[0].addClassName('displayNone');
		controls[1].removeClassName('displayNone');
	}
	else
	{
		controls[1].addClassName('displayNone');
		controls[0].removeClassName('displayNone');
	}
};

Carousel.prototype.slide = function()
{
	this.i++;

	//var newx = - this.i * ( this.slides.width + this.slides.marginRight );
	var newy = - this.i * ( this.slides.height + this.slides.marginBottom );

	if ( this.i == this.slides.count )
	{
		//newx = 0;
		newy = 0;
		this.i = 0;
	}

	this.markActiveSlide();
	//new Effect.Move( this.slider, { 'x': newx, 'mode': 'absolute' } );
	new Effect.Move( this.slider, { 'y': newy, 'mode': 'absolute', 'duration': 0.7 } );
};

Carousel.prototype.markActiveSlide = function()
{
	this.element.select('.controls .i.active').each(function(element){
		element.removeClassName('active');
	});

	this.element.select('.controls .i a[data-carousel-i="' + this.i + '"]').first().up().addClassName('active');
};

String.prototype.toInt = function()
{
	this.replace('px', '');
	return parseInt(this);
}

var carousel = new Carousel;

document.observe('dom:loaded', function()
{
	if ( $('carousel') )
	{
		$('carousel').addClassName('carousel');
		carousel.setElement( $('carousel') );
		carousel.init();
	}
});