//JavaScript Document
var myItems = [];
var scrollerLength;
var counter;
var space = 10;
var itemsLength;
var itemWidth;
var startX;
var liWidth;

var InfiniteScroller = Class.create({
	initialize: function(id){
	if(!$(id)) throw("Attempted to set up a scroller with the following ID: " + id + " which was not found.");
	//$('infinite-scroller').insert({top: '<a id="left" href="javascript:;"></a><a id="right" href="javascript:;"></a>'});
	this.addEvents();
	this.id = $(id)
	counter = 2;
	scrollerLength = $$('div#scroller-wrapper li').length;
	$$('div#scroller-wrapper li').each(function(elmt) {
		itemWidth = elmt.getWidth();
		liWidth = elmt.getStyle('width');
		myItems.push({myItem:elmt, width:elmt.getWidth()});
	});
	itemsLength = itemWidth * scrollerLength;
	startX = itemWidth - ((this.id.getWidth() - itemWidth) / 2);
	$('scroller-wrapper').setStyle({
		left: '-'+startX+'px'
	});
	
	// auto scroller setup
	this.autoScroll = false;
	this.autoScrollTime = 3000;
	this.autoScrollRight = false;
},
addEvents: function() {
	$('left').observe('click', this.leftHandler);
	$('right').observe('click', this.rightHandler);
	$('left').observe('mouseover', this.overOut);
	$('right').observe('mouseover', this.overOut);
	$('left').observe('mouseout', this.overOut);
	$('right').observe('mouseout', this.overOut);
},
removeEvents: function() {
	Event.stopObserving('left');
	Event.stopObserving('right');
},
leftHandler: function(event) {
	infiniteScroller.autoScrollStop();
	infiniteScroller.removeEvents();
	infiniteScroller.scrollRight();
	event.stop();
},
rightHandler: function(event) {
	infiniteScroller.autoScrollStop();
	infiniteScroller.removeEvents();
	infiniteScroller.scrollLeft();
	event.stop();
},
scrollRight: function(){
	new Effect.Move('scroller-wrapper', { x: itemWidth, duration: 0.3, afterFinish: finishedAnimate });
	counter--;
	if(counter <= 1) {
		infiniteScroller.cloneLeft();
		$('scroller-wrapper').setStyle({
			left: '-'+((itemsLength + startX))+'px'
		});
		counter = myItems.length +1;
	}
},
scrollLeft: function(){
	counter++;
	if(counter == scrollerLength) {
		infiniteScroller.cloneRight();
	}
	new Effect.Move('scroller-wrapper', { x: - itemWidth, duration: 0.3, afterFinish: finishedAnimate });
},
autoScrollStart: function(scrollTime, scrollRight){
	this.autoScroll = true;
	if(!scrollTime || !(typeof(input)=='number'&&parseInt(input)==input)){
		scrollTime = this.autoScrollTime;
	}
	if(scrollRight){
		autoScrollRight = true;
	}
	infiniteScroller.autoScroller(scrollTime);
},
autoScrollStop: function(){
	this.autoScroll = false;
	if(this.scrollTimer){
		clearTimeout(this.scrollTimer)
	}
},
autoScroller: function(scrollTime){
	if(this.autoScroll){
		this.scrollTimer = setTimeout(
				function(){
					if(this.autoScrollRight){
						infiniteScroller.scrollRight();
					}
					else{
						infiniteScroller.scrollLeft();
					}
					
					infiniteScroller.autoScroller(scrollTime);
				},
				scrollTime);
	}
},
cloneRight: function() {
	for (i=0;i<=myItems.length -1;i++) {
		$('myUl').insert({
			bottom: myItems[i].myItem.cloneNode(true)
		});
	}
	scrollerLength = $$('div#scroller-wrapper li').length;
},
cloneLeft: function() {
	for (i=myItems.length -1;i>=0;i--) {
		$('myUl').insert({
			top: myItems[i].myItem.cloneNode(true)
		});
	}
	scrollerLength = $$('div#scroller-wrapper li').length;
},
overOut: function(event){
	var element = Event.element(event);
	var myHeight;
	switch(event.type) {
	case 'mouseover':
		$(element.id).setStyle({
			backgroundPosition: '0px -39px'
		});
		break;
	case 'mouseout':
		$(element.id).setStyle({
			backgroundPosition: '0px 0px'
		});
		break;
	}
}
});
function finishedAnimate() {
infiniteScroller.addEvents();
}