var scrollMenu = Class.create();
scrollMenu.prototype = {
  initialize: function(obj, speed){
    this.obj = $(obj);
    this.speed = speed || 2;
    Element.cleanWhitespace(this.obj);
    this.title = this.obj.childNodes[0];
    this.menu = this.obj.childNodes[1];
    Element.setStyle(this.menu, {
      visibility:'hidden',
      left:'140px',
      position:'absolute',
      overflow:'hidden',
      display:'block',
      height:'1px'
    });
    Event.observe(this.obj, 'mouseover', this.start.bind(this), false);
    Event.observe(this.obj, 'mouseout', this.stop.bind(this), false);
  },

  start: function(){
    var bkp = Element.getStyle(this.menu, 'height');
    Element.setStyle(this.menu, {height:''});
    this.height = Element.getHeight(this.menu);
    var value = Position.cumulativeOffset(this.title);
    var left = value[0];
    var top  = value[1] + Element.getHeight(this.title);
    Element.setStyle(this.menu, {
//      left:left,
      top:top,
      visibility:'visible',
      height:bkp
    });
    if(this.tid) clearTimeout(this.tid);
    this.tid = setInterval(this.show.bind(this), 10);
  },

  show: function(){
    var height = parseInt(Element.getStyle(this.menu, 'height'));
    height += this.speed;
    if(height >= this.height){
      height = this.height;
      clearTimeout(this.tid);
    }
    Element.setStyle(this.menu, {height:height + 'px'});
  },

  stop: function(){
    if(this.tid) clearTimeout(this.tid);
    this.tid = setInterval(this.hide.bind(this), 10);
  },

  hide: function(){
    var height = parseInt(Element.getStyle(this.menu, 'height'));
    height -= this.speed;
    if(height <= 1){
      height = 1;
      Element.setStyle(this.menu, {
        visibility:'hidden'
      });
      clearTimeout(this.tid);
    }
    Element.setStyle(this.menu, {height:height + 'px'});
  }
}
//
Event.observe(window, 'load', function(){
  new scrollMenu('menu1');
  new scrollMenu('menu2');
  new scrollMenu('menu3');

}, false);