var MenuController = Class.create({
  
  initialize:function()
  {
    $$('#nav li').each(function(liElement) {
      liElement.observe('mouseenter', this.mouseEnter.bind(this));
      liElement.observe('mouseleave', this.mouseLeave.bind(this));
      
      if (liElement.down('ul'))
        liElement.down('a').observe('click', this.mouseClicked.bind(this));
    }.bind(this));
  },
  
  mouseEnter:function(mouseEvent) {
    mouseEvent.element().addClassName('sfhover');
  },
  
  mouseLeave:function(mouseEvent) {
    if (mouseEvent.pointerX() < 0)
      return; // debug IE firing mouseleave when hovering over a <select> menu
    
    mouseEvent.element().removeClassName('sfhover');
  },
  
  mouseClicked:function(mouseEvent) {
    mouseEvent.stop();
    
    if (mouseEvent.element().up('li').hasClassName('sfclicked'))
      mouseEvent.element().up('li').removeClassName('sfclicked');
    else
      mouseEvent.element().up('li').addClassName('sfclicked');
  }
});

var menuController = false;
document.observe('dom:loaded', function() {
  menuController = new MenuController();
});