var Slider = Class.create ({
	
	initialize: function(content, options)
	{
		
		/**
		 *	Default options
		 */
		this.options = 
		{
			cellHeight: 90,
			width: 400,		
			cellWidth: 90,
			cellPadding: 5,
			cellBackground: 'white',
			sliderBackground: 'white',
			controlWidth: 25,
			controlLeftBackground: 'black',
			controlRightBackground: 'black',
			controlLeftBackgroundRollover: false,
			controlRightBackgroundRollover: false,	
			display: 4,
			slideDuration: 0.5,
			cycle: true,
			sliderContainer: 'ul',
			itemContainer: 'li'
		};
		
		this.items = new Array();
		
		options = options ? options : {};
		this.setOptions(options);
		
		this.content = $(content);
		
		var container = this.content.getElementsBySelector(this.options.sliderContainer);
		
		if (container.length <= 0)
		{
			return false;
		}
		
		this.sliderContainer = container[0];
		
		this.start();
	},
	
	start: function()
	{
		this.currentPosition = 0;
		
		this.sliderContainer.getElementsBySelector(this.options.itemContainer).each(function(item)
			{
				this.items[this.items.length] = item;
			}.bind(this));
	
		this.build();
	},
	
	build: function()
	{
		this.content.setStyle({
			listStyle: 'none',
			width: (this.options.width + 2*(this.options.controlWidth)) + 'px',
			display: 'block',
			position: 'relative'
		});

		this.sliderContainer.setStyle({
			position: 'relative',
			listStyle: 'none',
			left: '0px',
			display: 'block',
			height: this.options.height + 'px',
			padding: 0,
			margin: 0
		});
		
		this.leftButton = new Element('div').observe('click', this.goLeft.bindAsEventListener(this));
		this.leftButton.setStyle({
			width: this.options.controlWidth + 'px',
			float: 'left',
			height: this.options.height + 'px',
			background: this.options.controlLeftBackground
		});
		
		if (this.options.controlLeftBackgroundRollover)
		{
			this.leftButton.observe('mouseover', function(){
				this.leftButton.setStyle({
					background: this.options.controlLeftBackgroundRollover
				});
			}.bind(this));
			
			this.leftButton.observe('mouseout', function(){
				this.leftButton.setStyle({
					background: this.options.controlLeftBackground
				});
			}.bind(this));
		}
		
		this.content.appendChild(this.leftButton);
		
		this.container = new Element('div');
		
		this.container.setStyle({
			overflow:'hidden',
			position: 'relative',
			float: 'left',
			width: this.options.width + 'px',
			height: this.options.height + 'px',
			background: this.options.sliderBackground
		});
		
		
		this.container.appendChild(this.sliderContainer);
		this.content.appendChild (this.container);
		
		this.rightButton = new Element('div').observe('click', this.goRight.bindAsEventListener(this));
		
		if (this.options.controlRightBackgroundRollover)
		{
			this.rightButton.observe('mouseover', function(){
				this.rightButton.setStyle({
					background: this.options.controlRightBackgroundRollover
				});
			}.bind(this));
			
			this.rightButton.observe('mouseout', function(){
				this.rightButton.setStyle({
					background: this.options.controlRightBackground
				});
			}.bind(this));
		}
		
		this.rightButton.setStyle({
			width: this.options.controlWidth + 'px',
			float: 'left',
			height: this.options.height + 'px',
			background: this.options.controlRightBackground
		});
		this.content.appendChild(this.rightButton);
		
		this.items.each(function(item){
			item.setStyle({
				position:'absolute', 
				top: this.options.cellPadding + 'px', 
				height: this.options.cellHeight + 'px', 
				width: this.options.cellWidth + 'px', 
				background:this.options.cellBackground,
				float: 'left',
				textAlign: 'center',
				padding: 0
			});
		}.bind(this));
				
		for (var i=0; i < this.items.length; i++)
		{
			this.items[i].setStyle({left: ((i * (this.options.width/this.options.display)) + this.options.cellPadding) + 'px'});
		}
	},
	
	setOptions: function(options)
	{
		for (var key in this.options)
		{		
			if (options && options[key])
			{
				this.options[key] = options[key];
			}
		}
		
		this.options.itemWidth = this.options.cellWidth + 2*(this.options.cellPadding);
		this.options.height = this.options.cellHeight + 2*(this.options.cellPadding);
		this.options.width = (this.options.itemWidth * this.options.display);
	},
	
	goLeft: function(event)
	{
		if (this.items.length <= this.options.display)
		{
			return false;
		}
		
		if(this.currentPosition  == 0 && this.options.cycle)
		{
			this.shiftRight();
		}
		
		if (this.currentPosition > 0)
		{
			this.currentPosition--;
		}
		this.animate();
	},
	
	goRight: function ()
	{
		if (this.items.length <= this.options.display)
		{
			return false;
		}
		
		if((this.currentPosition  == (this.items.length - this.options.display)))
		{
			this.shiftLeft();
			
		}
		if (this.options.cycle)
		{
			this.currentPosition++;
		}
	
		if (this.currentPosition <= (this.items.length - this.options.display - 1) && !this.options.cycle)
		{
			this.currentPosition++;
		}
		
		this.animate();
	},
	
	shiftLeft: function()
	{
		if (this.items.length > 1)
		{
			var newLast = this.items[0];

			for (var i=0; i < this.items.length - 1; i++)
			{
				
				this.items[i] = this.items[i+1];
				this.items[i].setStyle({left: ((i * (this.options.width/this.options.display)) + this.options.cellPadding) + 'px'});
			}
			
			var i = this.items.length - 1;
			this.items[i] = newLast;
			this.items[i].setStyle({left: ((i * (this.options.width/this.options.display)) + this.options.cellPadding) + 'px'});
			
			this.currentPosition--;
			
			value = '-' + (this.options.itemWidth * (this.currentPosition)) + 'px';
			//alert(value);
			this.sliderContainer.setStyle({left: value});
			
		}
	},
	
	shiftRight: function()
	{
		if (this.items.length > 1)
		{
			var newFirst = this.items[this.items.length - 1];

			for (var i=this.items.length - 2; i >= 0; i--)
			{
				
				this.items[i+1] = this.items[i];
				this.items[i+1].setStyle({left: (((i+1) * (this.options.width/this.options.display)) + this.options.cellPadding) + 'px'});
			}
			
			var i = 0;
			this.items[i] = newFirst;
			this.items[i].setStyle({left: ((i * (this.options.width/this.options.display)) + this.options.cellPadding) + 'px'});
			
			this.currentPosition++;
			
			value = '-' + (this.options.itemWidth * (this.currentPosition)) + 'px';
			this.sliderContainer.setStyle({left: value});
			
		}
	},
	
	animate: function()
	{
		new Effect.Morph(this.sliderContainer, {
			  style: 'left: -' + (this.options.itemWidth * this.currentPosition) + 'px;', // CSS Properties
			  duration: this.options.slideDuration // Core Effect properties
			});
	}
	
});

document.observe('dom:loaded', function(){
	if ($('slider'))
	{
		var slider = new Slider($('slider'), 
		{
			cellHeight: 122,
			width: 630,		
			cellWidth: 170,
			cellPadding: 10,
			cellBackground: 'transparent',
			sliderBackground: 'transparent',
			controlWidth: 30,
			controlLeftBackground: 'url(../images/slider/left.png) no-repeat 0 38px',
			controlRightBackground: 'url(../images/slider/right.png) no-repeat 0 38px',
			controlLeftBackgroundRollover: 'url(../images/slider/leftOn.png) no-repeat 0 38px',
			controlRightBackgroundRollover: 'url(../images/slider/rightOn.png) no-repeat 0 38px',	
			display: 3,
			slideDuration: 0.5,
			cycle: true,
			sliderContainer: 'ul',
			itemContainer: 'li'
			
		});
	}
});