var contentSlider = Class.create(
{
	speed: 0.4,
	initialize: function(handleClassName, slideContainerId, dirBtnObj, speed)
	{
		if(!$(slideContainerId))
			return false;
			
		if(!$('slideNavigator'))
			return false;
		
		$$('.'+handleClassName).each(function(elem)
		{
			$('slideNavigator').appendChild($(elem));
		});
		var clearer = new Element('div', { style : 'clear:both;'});
		$('slideNavigator').appendChild($(clearer));
		
		var self = this;
		this.active = false;
		if(speed != undefined)
			this.speed = speed;
			
		var AllElem = $$('.'+handleClassName);
		var Slides = $$('#'+slideContainerId+' div.slide');
		
		if(AllElem[0])
		{
			$(AllElem[0]).addClassName('active');
			AllElem.each(function(elem, index)
			{
				$(elem).observe('click', function()
				{
					if(self.active == false)
					{
						$($$('.'+handleClassName+'.active')[0]).removeClassName('active');
						self.slideElem(AllElem.indexOf(this), slideContainerId, Slides[AllElem.indexOf(this)]);
						$(elem).addClassName('active');
					}
				});
			});
		}			
		
		if(dirBtnObj)
		{
			if($(dirBtnObj.nextBtnId))
			{
				Event.observe(dirBtnObj.nextBtnId, 'click', function()
				{
					if(self.active == false)
					{
						if((self.currentIndex+1) == AllElem.length)
						{
							$($$('.'+handleClassName+'.active')[0]).removeClassName('active');
							self.slideElem(0, slideContainerId, Slides[0]);
							$(AllElem[0]).addClassName('active');
						}
						else
						{
							$($$('.'+handleClassName+'.active')[0]).removeClassName('active');
							self.slideElem((self.currentIndex+1), slideContainerId, Slides[(self.currentIndex+1)]);
							$(AllElem[(self.currentIndex)]).addClassName('active');
						}
					}
				});
			}
			else
				return false;	
						
			if($(dirBtnObj.prevBtnId))
			{
				Event.observe(dirBtnObj.prevBtnId, 'click', function()
				{
					if(self.active == false)
					{
						if((self.currentIndex-1) == -1)
						{
							$($$('.'+handleClassName+'.active')[0]).removeClassName('active');
							self.slideElem((AllElem.length-1), slideContainerId, Slides[(AllElem.length-1)]);
							$(AllElem[(AllElem.length-1)]).addClassName('active');
						}
						else
						{
							$($$('.'+handleClassName+'.active')[0]).removeClassName('active');
							self.slideElem((self.currentIndex-1), slideContainerId, Slides[(self.currentIndex-1)]);
							$(AllElem[(self.currentIndex)]).addClassName('active');
						}
					}
				});
			}
			else
				return false;			
		}
		
		
		this.currentLength = 0;
		this.currentIndex = 0;
	},
	
	slideElem: function(lengthNr, slideId, contentObj)
	{
		//$(contentObj).addClassName('active');
		var self = this;
		this.currentIndex = lengthNr;
		var slideLengthE = contentObj.offsetWidth;
		lengthNr = lengthNr * eval(contentObj.offsetWidth);
		var StandardLength = contentObj.offsetWidth;
		var slideNr = lengthNr / StandardLength;

		if(slideNr == this.currentLength) { return false;}
		if(slideNr == (this.currentLength+1))
		{
			var actLength = -(StandardLength);
		}
		else if(slideNr > (this.currentLength+1))
		{
			var actLength = -((slideNr*StandardLength)-(this.currentLength*StandardLength));
		}
		if(slideNr == (this.currentLength-1))
		{
			var actLength = (StandardLength);
		}
		else if(slideNr < (this.currentLength-1))
		{
				var actLength = -eval($(slideId).getStyle('left').replace('px','')) - eval(slideNr*StandardLength);
		}
		this.currentLength = lengthNr/StandardLength;

		new Effect.Move(slideId,
		{
			x: actLength,
			mode: 'relative',
			duration: self.speed,
			transition: Effect.Transitions.sinoidal,
			queue: { position : 'end', scope: 'contentSlider'},
			beforeStart: function()
			{
				self.active = true;
			},
			afterFinish: function()
			{
				self.active = false;
			}
		});
	}
});
Event.observe(window, 'load', function()
{
	var productDetailSlider = new contentSlider('slideBtn', 'slideContainer',
	{
		nextBtnId: 'nextBtn',
		prevBtnId: 'prevBtn'
	}, 0.8);
});