var cached3rdLevel = null;

var multiLevelMenu = {
  add: function() {
    $$('#nav>li').each(function(child) {
      multiLevelMenu.hover(child);
    })
    $$('#nav>li>ul>li').each(function(child) {
      multiLevelMenu.cache(child);
      multiLevelMenu.indicate(child);
    })
    $$('.level3').each(function(list) {
      multiLevelMenu.position(list);
    })
  },
  hover: function(item) {
    Event.observe(item, 'mouseover', function(event){
      item.addClassName('over');
    })
    Event.observe(item, 'mouseout', function(event){
      item.removeClassName('over');
    })
  },
  cache: function(item) {
    Event.observe(item, 'mouseover', function(event){
      item.addClassName('over');
      // Using mouseout causes the menu to flicker in IE
      // so we store cache the current 3rd Level menu instead
      if (cached3rdLevel && (cached3rdLevel != item)) {
        cached3rdLevel.removeClassName('over');
      }
      cached3rdLevel = item;
    })
  },
  position: function(list) {
    var parentLI = list.up('li');
    var parentUL = list.up('ul');
    list.setStyle({marginLeft: parentUL.getWidth()-1 + 'px', marginTop: '-22px'});
  },
  indicate: function(item) {
    if (item.down('ul')) {
      item.down('a').addClassName('indicate');
    }
  }
}

Event.onDOMReady(function() { 
  multiLevelMenu.add();
})