var TabSlider = Class.create();

TabSlider.prototype =
{
  slide_amount: 92,
  current_effect: [],
  initialize: function()
  {
    $$('ul.sliders li').each((function(li, index){
      this.addEvents(li, index);
    }).bind(this));

  },

  addEvents: function(li, index)
  {
    li.hover(
      (function(event) { this.slideOut(li, index) }).bind(this),
      (function(event) { this.slideIn(li, index)  }).bind(this)
    );

  },


  slideOut: function(li, index)
  {
    offset = li.positionedOffset();
    amount = this.slide_amount - offset.left;
    this.slide(amount, li, index);
  },

  slideIn: function(li, index)
  {
    offset = li.positionedOffset();
    amount = offset.left * -1;
    this.slide(amount, li, index);
  },

  slide: function(amount, li, index)
  {
    if (this.current_effect[index]) this.current_effect[index].cancel();
    this.current_effect[index] = new Effect.MoveBy(li, 0, amount);
  }

};


Event.observe(window, 'load', function(){
  new TabSlider;
});