var Menu = Class.create();

Menu.prototype =
{
  activeItem: null,
  timerHideBox: null,
  timerShowBox: null,
  delay: 375,

  initialize: function()
  {
    this.container = $('navigation');

    $$('#mega-nav li').each((function(li){
      this.addEvents(li);
      this.activeItem = li;
    }).bind(this))

  },

  addEvents: function(li)
  {
    box = li.down('.menu');


    if ( ! box ) return;
    li.hover(
      (function(event) { this.itemOver(li) }).bind(this),
      (function(event) { this.itemOut(li)  }).bind(this)
    );

  },

  itemOver: function(li)
  {
    //$('banner').insert('<h4>+ ' + li.id + '</h4>');

    clearTimeout(this.timer);
    this.timer = null;

    var self = this;
    self.timer = setTimeout(function() { self.show( li ); self.timer = null; }, this.delay);

  },

  itemOut: function(li)
  {
    //$('banner').insert('<h4>- ' + li.id + '</h4>');
    clearTimeout(this.timer);
    this.timer = null;

    var self = this;
    self.timer = setTimeout(function() { self.hide( li ); self.timer = null; }, this.delay);
  },

  show: function(li)
  {
    //$('banner').insert('<h3>SHOW</h3>');
    this.hideAll();
    li.addClassName('hover');
  },

  hide: function(li)
  {
    //$('banner').insert('<h3>HIDE '+li.id+'</h3>');
    li.removeClassName('hover');
  },
  hideAll: function()
  {
    $$('#mega-nav li').each((function(li){
      box = li.down('.menu');
      if (box) this.hide(li);
    }).bind(this));
  }

};


Event.observe(window, 'load', function(){
  new Menu;
});