var Carousel = Class.create();

Carousel.prototype = {
	
	initialize: function( options )
	{
		this.initOptions( options );
		this.element = $( this.elementId );
		this.isAlreadyMoving = false;
		this.firstIndex = 0;
		this.itemContainer = this.element.getElementsByClassName('itemContainer')[0];
		this.wrapperElement = this.itemContainer.down();
		this.items = this.wrapperElement.childElements();
		
		this.leftArrow = this.element.getElementsByClassName('leftArrow')[0];
		this.leftArrowOrigSrc = this.leftArrow.down().src;
		this.rightArrow = this.element.getElementsByClassName('rightArrow')[0];
		this.rightArrowOrigSrc = this.rightArrow.down().src;

		this.initEventHandlers();
		this.initWrapperWidth();
		this.updateArrowVisibility();
	},
	
	
	initOptions: function( options )
	{
		options.id ? this.elementId = options.id : this.elementId = 'carousel';
		options.itemWidth ? this.itemWidth = options.itemWidth : this.itemWidth = 161;
		options.itemSpace ? this.itemSpace = options.itemSpace : this.itemSpace = 5;
		options.itemCount ? this.itemCount = options.itemCount : this.itemCount = 4;
		options.scrollDuration ? this.scrollDuration = options.scrollDuration : this.scrollDuration = 0.5;
		options.leftArrInactive ? this.leftArrInactiveSrc = options.leftArrInactive : 0;
		options.rightArrInactive ? this.rightArrInactiveSrc = options.rightArrInactive : 0;
	},
	
	
	initEventHandlers: function()
	{
		Event.observe( this.leftArrow, 'click', this.goLeft.bind( this ) );
		Event.observe( this.rightArrow, 'click', this.goRight.bind( this ) );
	},
	
	
	initWrapperWidth: function()
	{
		var width = 1+this.items.length * (this.itemWidth + this.itemSpace);

		if (navigator.appName == "Opera")
			width += 10;

		var container_width = ((this.itemCount * this.itemWidth) + (this.itemCount) * this.itemSpace-1);

		this.wrapperElement.style.width = width / 12 + 'em';
		this.itemContainer.style.width = container_width / 12 + 'em';
		this.element.style.width = (container_width + 47) / 12 + 'em';

	},

	getItemWidth: function()
	{
		if (navigator.appName == "Opera")
			return this.itemContainer.getElementsByClassName( 'carouselItem' )[0].getWidth() + this.itemSpace;

		return this.itemContainer.getElementsByClassName( 'carouselItem' )[0].getWidth() + this.itemSpace - 1;
	},
	
	goLeft: function()
	{
		if (this.isAlreadyMoving || this.firstIndex <= 0)
			return;

		var width = this.getItemWidth();

		this.firstIndex--;
		this.isAlreadyMoving = true;
		this.moveImages( width );
	},
	
	
	goRight: function()
	{
		if (this.isAlreadyMoving || this.firstIndex + this.itemCount >= this.items.length )
			return;

		var width = this.getItemWidth();

		this.firstIndex++;
		this.isAlreadyMoving = true;
		this.moveImages( -width );
	},
	
	moveImages: function( amount )
	{
		new Effect.Move(
				this.wrapperElement, 
				{ 
					x:amount, 
					duration:this.scrollDuration, 
					afterFinish:function(){ this.isAlreadyMoving = false }.bind( this ) 
				} );

		this.updateArrowVisibility();
	},
	
	updateArrowVisibility: function()
	{

		this.firstIndex <= 0 ? this.leftArrow.down().src = this.leftArrInactiveSrc : this.leftArrow.down().src = this.leftArrowOrigSrc;
		this.firstIndex + this.itemCount >= this.items.length ? this.rightArrow.down().src  = this.rightArrInactiveSrc : this.rightArrow.down().src = this.rightArrowOrigSrc;
	}
};