var ProductScroller = Class.create ();

ProductScroller.prototype = {
	
	initialize: function (scrollerDiv)
	{
		this.scrollerDiv    = $(scrollerDiv);
		this.scrollerWidth  = Element.getDimensions(this.scrollerDiv).width;
		this.scrollerOffset = Position.cumulativeOffset($('content'))[0] + Position.positionedOffset(this.scrollerDiv)[0];
		this.step           = 1;
		this.duration       = 0.03;
		//this.scrollerOffset = Position.cumulativeOffset(this.scrollerDiv)[0];
		this.scrollerDelta  = 0;
		this.scrollerAccel  = 3; 
		this.contentDiv     = $('scontainers');
        this.items          = $$('div.sitem');
        this.scroll          = 0;
		this.contentWidth   = 0;
		this.executer	    = null;
		
	
              //var items = $$('div.sitem');
        for (var i = 0; i < this.items.length; i++)
		{
			this.contentWidth += Element.getDimensions(this.items[i]).width + 3;
		}
		/*
		for (var i = 0; i < items.length; i++)
		{
			this.contentWidth += Element.getDimensions(items[i]).width + 3;
		}
          */    
		Element.setStyle(this.contentDiv, { width: this.contentWidth + "px" });
		//Element.setStyle(this.contentDiv, { float: "left" });
        Element.setStyle(this.scrollerDiv, { width: this.scrollerWidth + "px" });
        //Element.setStyle(this.scrollerDiv, { width: "100%" });
        
		this.scrollerDiv.onmouseover = this.onMouseOver.bindAsEventListener(this);
		this.scrollerDiv.onmouseout  = this.onMouseOut.bindAsEventListener(this);
		Event.observe(window, "resize", this.onWindowResized.bindAsEventListener(this), false);
		
		Element.setStyle(this.scrollerDiv, { visibility: "visible" });
		
		this.firstStyle = {
            top: this.contentDiv.getStyle('top'),
            left: this.contentDiv.getStyle('left') };
        /*
		if (items.length > 0 && this.contentWidth > this.scrollerWidth)
		{
			this.start();

		}*/
		if (this.items.length > 0 && this.contentWidth > this.scrollerWidth)
		{
		   this.scroll = 1;
		}
		
		this.start();
	},
	
	onMouseOver: function (e)
	{
	 if(this.scroll>0)
		Event.observe(this.scrollerDiv, "mousemove", this.onMouseMoved.bindAsEventListener(this), true);
	},
	
	onMouseOut: function (e)
	{
	 
		Event.stopObserving(this.scrollerDiv, "mousemove", this.onMouseMoved.bindAsEventListener(this), true);
		//this.scrollerAccel = 3 * (this.scrollerAccel == 0 ? 1 : (this.scrollerAccel / Math.abs(this.scrollerAccel)));
		this.scrollerAccel =  3*(this.scrollerAccel == 0 ? 1 : (this.scrollerAccel / Math.abs(this.scrollerAccel)));
	},
	
	onMouseMoved: function (e)
	{
       if(this.scroll > 0)
		this.scrollerAccel = 5 * Math.round((Event.pointerX(e) - this.scrollerOffset - (this.scrollerWidth / 2)) * 10 / this.scrollerWidth);       
	},
	
	start: function ()
	{
		this.executer = new PeriodicalExecuter(this.doScroll.bindAsEventListener(this), 0.1);
	},
	
	doScroll: function ()
	{ 
            if(this.scroll > 0)
            {
             var currStyle = {
             top: this.contentDiv.getStyle('top'),
             left: this.contentDiv.getStyle('left') };
            


		if (this.scrollerAccel < 0 )//&& this.scrollerDelta - this.scrollerAccel > 0)
		{
                if(this.scrollerOffset  <= (parseInt(currStyle.left,10) + this.scrollerOffset))
                {
                 Element.setStyle(this.contentDiv, { left: 0 +"px" });   
                 this.scrollerAccel = -1 *this.scrollerAccel; 				 
      		  }
		  else
		  {
                 new Effect.Move(this.contentDiv, 
                 { x:  -1*this.scrollerAccel * this.step, y: 0, duration: this.duration, afterFinishInternal: function(effect) {}});
                }			
		}
		else if (this.scrollerAccel > 0 )//&& this.scrollerDelta + this.contentWidth - this.scrollerWidth - this.scrollerAccel < 0)
		{
		      
		   if(this.scrollerOffset + this.scrollerWidth - this.contentWidth >= (parseInt(currStyle.left,10)+this.scrollerOffset))
                {
                 Element.setStyle(this.contentDiv, { left: ( this.scrollerWidth - this.contentWidth) +"px" });         
                 this.scrollerAccel = -1 *this.scrollerAccel;
                 //alert('going left '+this.scrollerOffset+' '+ this.firstStyle.left + ' '+this.contentDiv.getStyle('left'))
		  }
		  else
		  {			
                    new Effect.Move(this.contentDiv, 
                    { x:  -1*this.scrollerAccel * this.step, y: 0, duration: this.duration, afterFinishInternal: function(effect) {}});
                }

			//this.scrollerDelta = -this.contentWidth + this.scrollerWidth;
		}
		else
		{
			//this.scrollerDelta = this.scrollerDelta - this.scrollerAccel;
                     new Effect.Move(this.contentDiv, 
                     { x:  -1*this.scrollerAccel*this.step, y: 0, duration: this.duration, afterFinishInternal: function(effect) {}});

			//Element.setStyle(this.contentDiv, { left: this.scrollerDelta + "px" });
		}
	  }
	},
	onWindowResized: function()
	{
		
		Element.setStyle(this.scrollerDiv, { width: Element.getDimensions($('content')).width + "px" });
		this.scrollerWidth  = Element.getDimensions(this.scrollerDiv).width;		
		if (this.items.length > 0 && this.contentWidth > this.scrollerWidth )
		{
			this.scroll = 1;
		}
		else
		this.scroll = 0;
	}
}