var CleanMenu = Class.create({
  sub_uls: [],
  zIndex: 10000,
  initialize: function(element_id) {
    
    this.element = $(element_id);    
    $$('#'+element_id+' ul').each(function(ul) {
      this.sub_uls.push(new CleanMenu.SubUl(ul, this));
    }.bind(this));

  
    Event.observe(document, 'click', this.hideAll.bindAsEventListener(this));
  }, 
  
  hideAll: function() {
    this.sub_uls.each(function(sub) {
      if(sub.ul) sub.ul.hide();
    });
  }
});

CleanMenu.SubUl = Class.create({
  initialize: function(ul, menu) {
    
    if(ul.descendants().size() == 0) return;
    
    this.ul = ul;
    this.menu = menu;
    
    this.ul.hide();
    // Add showevent on parent
    this.ul.up('li').observe('mouseover', this._show.bindAsEventListener(this));
    // add hideevent on parent
    this.ul.up('li').observe('mouseout', function() {
      // this.style.backgroundColor = this.old_parent_link_color;
      // this.style.borderColor = this.old_parent_link_color;
      this.timeout_id = window.setTimeout(this._hide.bind(this), 350);
    }.bindAsEventListener(this));
    
    this.ul.observe('mouseover', function() {
      // Clear parent ul timeout
      window.clearTimeout(this.timeout_id);
    }.bindAsEventListener(this));
  },
  
  _show: function(event) {
    if(this.appearing || this.disappearing) return;
    this.appearing = true;
    window.clearTimeout(this.timeout_id);
    
    var ul = this.ul;
    var parent_link = ul.up('li').down('a');
    
    parent_link.addClassName('active_parent');

    ul.style.zIndex = this.menu.zIndex = this.menu.zIndex + 1;
    if(ul.up('ul').id == this.menu.element.id) {
      // First level
      ul.style.top  = parent_link.cumulativeOffset().top + parent_link.getHeight() + 'px';
      ul.style.left = parent_link.cumulativeOffset().left + 'px';
    } else {
      // subsequent levels
      ul.style.left = parent_link.getWidth() + 'px';
      if(Prototype.Browser.IE) {
        ul.style.top = (parent_link.cumulativeOffset().top - this.menu.element.down('ul').cumulativeOffset().top)  + 'px';
      } else {
        ul.style.top  = parent_link.offsetTop + 'px';
      }
    }
    
    ul.appear({duration: 0.2, afterFinish: function() {
      this.appearing = false;
    }.bind(this)});
    

  },
  
  _hide: function() {
    if(this.disappearing || this.appearing) return;
    this.disappearing = true;
    
    var parent_link = this.ul.up('li').down('a');
    parent_link.removeClassName('active_parent');
    
    this.ul.fade({duration: 0.1, afterFinish: function() {
      this.disappearing = false;
    }.bind(this)});

  }
  
  
});