var ifiMenu = Class.create({
  initialize: function(ul, options) {
    this.options = Object.extend({
      subnav: 'subnav'
    }, options || {});
    
    $A(ul.childElements()).each(function(li) {
      if (li.tagName == 'LI') {
        li.isIn = false;
        li.observe('mouseover', this.activateMenu.bind(this, li));
        li.observe('mouseout', this.deactivateMenu.bind(this, li));
      }
    }.bind(this))
  },

  activateMenu: function(el) {
    clearTimeout(el.outTimeout);
    if (!el.isIn) {
      el.addClassName('active');
    }
    el.isIn = true;
  },
    
  deactivateMenu: function(el) {
    el.outTimeout = setTimeout(function() { this.deactivateMenu2(el); }.bind(this), 300);    
  },

  deactivateMenu2: function(el) {
    el.removeClassName('active');
    el.isIn = false;
  }
  
});

Event.observe(window, 'load', function() { 
  var nav = new ifiMenu($('mainnav'), { subnav: '.subnav' }); 
});