var MooDropMenu = new Class({

  Implements: [Options, Events],

  options: {
    onOpen: function(el){
      el.removeClass('close').addClass('open');
    },
    onClose: function(el){
      el.removeClass('open').addClass('close');
    },
    onInitialize: function(el){
      el.removeClass('open').addClass('close');
    },
    mouseoutDelay: 200,
    mouseoverDelay: 0,
    listSelector: 'ul',
    itemSelector: 'li'
  },

  initialize: function(menu, options, level){
    this.setOptions(options);
    options = this.options;

    var menu = this.menu = document.id(menu);

    menu.getElements(options.itemSelector + ' > ' + options.listSelector).each(function(el){

      this.fireEvent('initialize', el);

      var parent = el.getParent(options.itemSelector),
        timer;

      parent.addEvents({

        'mouseenter': function(){
          parent.store('DropDownOpen', true);

          clearTimeout(timer);
          if (options.mouseoverDelay) timer = this.fireEvent.delay(options.mouseoverDelay, this, ['open', el]);
          else this.fireEvent('open', el);

        }.bind(this),

        'mouseleave': function(){
          parent.store('DropDownOpen', false);

          clearTimeout(timer);
          timer = (function(){
            if (!parent.retrieve('DropDownOpen')) this.fireEvent('close', el);
          }).delay(options.mouseoutDelay, this);

        }.bind(this)
      });

    }, this);
  },

  toElement: function(){
    return this.menu
  }

});

/* So you can do like this $('nav').MooDropMenu(); or even $('nav').MooDropMenu().setStyle('border',1); */
Element.implement({
  MooDropMenu: function(options){
    return this.store('MooDropMenu', new MooDropMenu(this, options));
  }
});

window.addEvent('domready',function(){

  $('nav').MooDropMenu({
    onOpen: function(el){
      el.fade('in')
    },
    onClose: function(el){
      el.fade('out');
    },
    onInitialize: function(el){
      el.fade('hide').set('tween', {duration:500});
    }
  });

});