var SlideMenu = Class.create({
  initialize: function() {
    this.element = $(arguments[0]);
    this.options = Object.extend({
      delay: 0.01,
      itemWidth: 200,
      speed: 10
    }, arguments[1] || {});

    this.items = this.element.select('li');
    this.sp = this.options.speed;
    this.st = this.options.itemWidth;
    var sl = this.options.initElement;
    this.l = this.items.size();
    this.width = this.element.offsetWidth;
    this.gw = this.width / this.l;
    this.ot = Math.floor((this.width-this.st)/(this.l-1));

    this.items.each(function(item) {
      item.style.width = this.gw+'px';
      item.observe("mouseover", function(){
        this.stop();
        this.timer = this.start(item);
      }.bindAsEventListener(this));
      item.observe("mouseout", function(){
        this.stop();
        this.htimer = this.start(item, true);
      }.bindAsEventListener(this));
    }.bind(this));

    if (sl != null) {
      this.timer = new PeriodicalExecuter(function(item){this.slide(item)}.bind(this, this.items[sl-1]), this.options.delay);
    }
  },

  start: function(item, c) {
    return new PeriodicalExecuter(this.slide.bind(this, item, c), this.options.delay);
  },

  stop: function() {
    if (this.htimer) this.htimer.stop();
    if (this.timer) this.timer.stop();
  },

  slide: function(s,c){
    var cw = parseInt(s.style.width);
    if((cw<this.st && !c) || (cw>this.gw && c)){
      var owt=0; var i=0;
      for(i;i<this.l;i++){
        if(this.items[i]!=s){
          var o,ow; var oi=0; o=this.items[i]; ow=parseInt(o.style.width);
          if(ow<this.gw && c){oi=Math.floor((this.gw-ow)/this.sp); oi=(oi>0)?oi:1; o.style.width=(ow+oi)+'px';
          }else if(ow>this.ot && !c){oi=Math.floor((ow-this.ot)/this.sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
          if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
      s.style.width=(this.width-owt)+'px';
    }else{
      this.stop();
    }
  }
});