var NavMenu = Class.create({
  
  initialize: function() {
    this.ulSelected = false;
    this.nav = $('nav').down('ul');
    this.subLists = this.nav.select('ul');
    this._setupObservers();
  }, 
  
  toggleMenu: function(event, ul, li) {
    if (this.activeLi == li) return;
    
    this.activeUl = ul;
    this.activeLi = li;
    
    $$('ul.sublist').invoke('hide');
    ul.show();
    
    document.observe('mouseover', this.documentRegisteredMouseOver.bindAsEventListener(this, ul, li));
  },
  
  documentRegisteredMouseOver: function(event, ul, li) {
    var element = event.findElement();
    
    if (element == ul || element == li || element.descendantOf(ul) || element.descendantOf(li)) {}
    else {
      document.stopObserving('mouseover');
      ul.hide(); 
      this.activeUl = null;
      this.activeLi = null;
    }
  },
  
  _setupObservers: function() {
    this.subLists.each(function(ul){
      var li = ul.up('li');
      this._positionUnder(ul, li);
      li.observe('mouseover', this.toggleMenu.bindAsEventListener(this, ul, li));
    }, this);
  }, 
  
  _positionUnder: function(subList, parent) {
    $$('body')[0].insert({ top:subList });
    var offset = parent.cumulativeOffset();
    subList.setStyle({
      position: 'absolute', 
      top: (offset.top + parent.getHeight()) + 'px', 
      left: offset.left + 'px'
    });
  }
  
});

$(document).observe('dom:loaded',function(){
  var navMenu = new NavMenu();
})