/**
A Horizontal scroller. 

totalwidth is the width that the entire scroller will be made to fit, 
itemWidth is the width of each if the rendered items (NOTE: you must enforce this in your css, it won't do it for you).

You must implement drawItem in derived classes.

*/
var BaseHorizontalScroller = Class.create({
    initialize: function (targetElem, items, totalWidth, itemWidth, options)
    {
       this.targetElem = targetElem;
       this.items = items;
       this.totalWidth = totalWidth;
       this.itemWidth = itemWidth;
       this.options = Object.extend(
           {
             buttonWidth:20,
             scrollInterval:.025,
             scrollAmount:10,
             useTurbo:true,
             turboAmount:20,
             useMouseOver:true,
             mouseOverClass:"hover"
           }, this.options)
    },
    start : function ()
    {
        this.targetElem.update(this.drawScroller());
        return this;
    },
    drawScroller : function ()
    {
       var btnWidth = this.options.buttonWidth;
       var scrWidth = this.totalWidth - (2 * btnWidth);
       var allItemWidth = this.itemWidth * this.items.length +5;
       if (allItemWidth < this.totalWidth)
       {
         return $N("div", {className:"hScroller noScroll"}, $N(".itemElem", {style:"width:"+this.totalWidth+"px"}, this.drawItems()));
       }
       var elem = $N(".hScroller", 
          [
           this.leftBtn = $N(".leftButton", {style:"width:"+btnWidth+"px"}),
           this.scrollElem = $N(".scroller", {style:"width:"+scrWidth+"px"}, 
               [
                this.itemElem = $N(".itemElem", {style:"width:"+ allItemWidth+ "px" }, this.drawItems())
               ]),
           this.rightBtn = $N(".rightButton", {style:"width:"+btnWidth +"px"})
          ])
       Event.observe(this.leftBtn, "mouseover", this.startScroll.bind(this, "left"));
       Event.observe(this.rightBtn, "mouseover", this.startScroll.bind(this, "right"));
       Event.observe(this.leftBtn, "mouseout", this.stopScroll.bind(this));
       Event.observe(this.rightBtn, "mouseout", this.stopScroll.bind(this));
       if (this.options.useTurbo)
       {
         Event.observe(this.leftBtn, "click", this.setTurbo.bind(this));
         Event.observe(this.rightBtn, "click", this.setTurbo.bind(this));
       }
       if (this.options.useMouseOver)
       {
         Event.observe(elem, "mouseover", this.handleMouseOverChanged.bind(this, elem, true));
         Event.observe(elem, "mouseout", this.handleMouseOverChanged.bind(this, elem, false));
       }
       return elem;
    },
    handleMouseOverChanged:function (elem, isAdd)
    {
      if(isAdd)
      {
        elem.addClassName(this.options.mouseOverClass);
      }
      else
      {
        elem.removeClassName(this.options.mouseOverClass);
      }
      
    },
    drawItems: function ()
    {
      return this.items.collect(this.drawItem.bind(this));
    },
    drawItem: function ()
    {
      throw "Not Implemented"; 
    },
    setTurbo: function ()
    {
      this.currentScrollAmt = this.options.turboAmount;
    },
    startScroll: function (direction)
    {
      this.currentScrollAmt = this.options.scrollAmount;
      this.scrollTimer = new PeriodicalExecuter(this.scroll.bind(this, direction), this.options.scrollInterval);
    },
    stopScroll : function ()
    {
      if (this.scrollTimer)
      {
        this.scrollTimer.stop();
      }
      this.rightBtn.removeClassName("active");
      this.leftBtn.removeClassName("active");
    },
    scroll: function (direction)
    {
      if (direction == "left")
      {
        this.leftBtn.addClassName("active");
        if( this.scrollElem.scrollLeft > this.currentScrollAmt)
        {
          this.scrollElem.scrollLeft = this.scrollElem.scrollLeft - this.currentScrollAmt; 
        }
        else
        {
          this.scrollElem.scrollLeft = 0;
        }
      }
      else if (direction == "right")
      {
        this.rightBtn.addClassName("active");
        if (this.scrollElem.scrollLeft < this.itemElem.getWidth() - this.currentScrollAmt)
        {
          this.scrollElem.scrollLeft = this.scrollElem.scrollLeft +this.currentScrollAmt;
        }
        else
        {
          this.scrollElem.scrollLeft = this.itemElem.getWidth() + this.currentScrollAmt;
        }
      }       
    }
});