var SubMenuHandler = Class.create({
  
  initialize: function(main_menu) {
    // $$('#main-menu > li > a').each( function(a) {
    //   a.observe('mouseenter', this.mainMenuItemEnter.bindAsEventListener(this));
    //   a.observe('mouseleave', this.mainMenuItemLeave.bindAsEventListener(this));
    // }.bind(this));
    
     $$('#main-menu > li').each( function(li) {
        li.observe('mouseenter', this.mainMenuListItemEnter.bindAsEventListener(this));
        li.observe('mouseleave', this.mainMenuListItemLeave.bindAsEventListener(this));
      }.bind(this));
    
    $$('#main-menu > li > ul.children').each( function(sub_menu) {
     
      sub_menu.observe('mouseenter', this.subMenuEnter.bindAsEventListener(this));
      sub_menu.observe('mouseleave', this.subMenuLeave.bindAsEventListener(this));
    }.bind(this));
  },
  
  debug: function(event, action) {
    $('debug').update( event.element().inspect().escapeHTML() + ' ' + action);
  },
  
  mainMenuItemEnter: function(event) {
    event.element().up('li').addClassName('item-hover');
  },
  
  mainMenuItemLeave: function(event) {
    event.element().up('li').removeClassName('item-hover');
  },
  
  mainMenuListItemEnter: function(event) {
    event.element().addClassName('item-hover');
    Cufon.refresh('.nav a');
  },
  
  mainMenuListItemLeave: function(event) {
    event.element().removeClassName('item-hover');
    Cufon.refresh('.nav a');
  },
  
  subMenuEnter: function(event) {
    event.element().up('#main-menu > li').addClassName('child-hover');
  },
  
  subMenuLeave: function(event) {
    event.element().up('#main-menu > li').removeClassName('child-hover');
    Cufon.refresh('.nav a');
  }
  
});

document.observe('dom:loaded', function() {
  var menu_handler = new SubMenuHandler();
});