Carousel = Class.create(Object.prototype, {
	initialize: function(element) {
		this.list = $(element);
		if(this.list.nodeName != 'UL')
		{
			alert('Can not create a carousel, because selected Element is not an UL Element!');
			return;
		}

		this.options = Object.extend({
			width: '100%',
			onLoad: function() {},
			onRight: function() {},
			onLeft: function() {}
		}, arguments[1] || {});

		this.carousel = new Element('div', {'class': 'carousel', style: 'width: ' + this.options.width});
		this.leftButton = new Element('div', {'class': 'leftButton'});
		this.container = new Element('div', {'class': 'container'});
		this.rightButton = new Element('div', {'class': 'rightButton'});

		Event.observe(this.rightButton, 'mousedown', this.onMouseDownButtonRight.bindAsEventListener(this));
		Event.observe(this.leftButton, 'mousedown', this.onMouseDownButtonLeft.bindAsEventListener(this));	

		this.list.parentNode.insertBefore(this.carousel, this.list);
		
		this.carousel.insert(this.leftButton);
		this.carousel.insert(this.container);
		this.carousel.insert(this.rightButton);
		this.container.insert(this.list);

        this.list.setStyle({left: '0px'});
		this.adjustSize()

		this.options.onLoad(this);
		
	},
	
	adjustSize: function(wasPrepended){
		this.width = 0;
		var listItems = this.list.getElementsByTagName('LI');
		for(var i = 0; i < listItems.length; i++)
		{
			width += listItems[i].getWidth();
			width += parseInt(listItems[i].getStyle('margin-right'));
			width += parseInt(listItems[i].getStyle('margin-left'));
		}
		this.list.style.width = width + 'px';
	},

	onMouseDownButtonRight: function(event) {		
		var containerWidth = parseInt(this.container.getWidth()) - parseInt(this.leftButton.getWidth()) - parseInt(this.rightButton.getWidth());
		var listWidth = parseInt(this.list.getWidth());
		var listLeft = parseInt(this.list.getStyle('left'));
		
		if(listLeft.abs() + 2 * containerWidth > listWidth)
			new Effect.Move(this.list, { x: -listWidth + containerWidth, y: 0, mode: 'absolute' });
		else
			new Effect.Move(this.list, { x: -containerWidth, y: 0 });

		this.options.onRight(this);
	},

	onMouseDownButtonLeft: function(event) {		
		var containerWidth = parseInt(this.container.getWidth()) - parseInt(this.leftButton.getWidth()) - parseInt(this.rightButton.getWidth());
		var listWidth = parseInt(this.list.getWidth());
		var listLeft = parseInt(this.list.getStyle('left'));
		
		if(listLeft + containerWidth > 0)
			new Effect.Move(this.list, { x: 0, y: 0, mode: 'absolute' });
		else
			new Effect.Move(this.list, { x: containerWidth, y: 0 });

		this.options.onLeft(this);
	},
	
	prependItem: function(li){
		var first = this.list.getElementsByTagName('LI')[0];
		if(first){
			first.insert({before: li});
		}else{
			this.appendItem(li)
		}
		var oldWidth = this.list.getWidth();
		this.adjustSize();
		var currentLeft = parseInt(this.list.getStyle('left'));
		this.list.setStyle({
			left: (currentLeft - this.list.getWidth() + oldWidth)+'px'
		});
	},
	
	appendItem: function(li){
		this.list.insert(li);
		this.adjustSize();
	},
		
});