/*---
description: This provides a simple Drop Down menu with infinit levels
license: MIT-style
authors: - Arian Stolwijk
requires: - core/1.2.4: '*'
provides: [MooDropMenu,Element.MooDropMenu]
---*/

var MooDropMenu = new Class({
    Implements: [Options, Events],
    options: {
        onOpen: function (el) {
            // open the menu
            el.set('opacity', 1);
        },
        onClose: function (el) {
            // close the menu
            el.set('opacity', 0);
        },
        onInitialize: function (el) {
            // set menu to hide
            el.set('opacity', 0);
        },
        mouseoutDelay: 200
    },

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

        if ($type(level) == 'number') {
            this.menu = document.id(menu); //attach menu to object
            this.fireEvent('initialize', menu);

            // hook up menu's parent with event to trigger menu
            this.menu.pel.addEvents({

                'mouseover': function () {
                    // Set the DropDownOpen status to true			
                    this.menu.pel.mel.store('DropDownOpen', true);

                    // Fire the event to open the menu
                    this.fireEvent('open', this.menu.pel.mel);

                    // Clear the timer of the delay
                    $clear(this.timer);
                }.bind(this),

                'mouseout': function () {
                    // Set the DropDownOpen status to false
                    this.menu.pel.mel.store('DropDownOpen', false);

                    // Build a delay before the onClose event get fired
                    this.timer = (function () {
                        if (!this.menu.pel.mel.retrieve('DropDownOpen')) {
                            this.fireEvent('close', this.menu.pel.mel);
                        }
                    }).delay(this.options.mouseoutDelay, this);

                }.bind(this)
            });
        }
        else {
            level = 0;
            this.menu = $(menu);
        }

        // grab all of the menus children - LI's in this case		
        // loop through children
        this.menu.getChildren('li').each(function (item, index) {
            var list = item.getFirst('ul'); // Should be an A tag
            // if there is a sub menu UL
            if ($type(list) == 'element') {
                item.mel = list; // pel = parent element
                list.pel = item; // mel = menu element
                new MooDropMenu(list, options, level + 1); // hook up the subMenu
            }
        });
    },

    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) {
        new MooDropMenu(this, options);
        return this;
    }
});

#nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav li {
	position: relative;
    float: left;
}
#nav ul {
	position: absolute;
	top: 23px;							/* How far is the submenu from the parent item */
	margin: 0;
	padding: 0;
	list-style: none;
	width: 136px;
	border: 1px solid #aaa;
	background: #f1f1f1;
	-webkit-box-shadow: 1px 1px 5px #aaa;
	-moz-box-shadow: 1px 1px 5px #aaa;
	box-shadow: 1px 1px 5px #aaa;
}
#nav ul li {
	float: none;
	padding: 0;
	text-align:left;
}
#nav ul li a {
	width: 123px;
	background: #f1f1f1;
	padding: 3px 3px 3px 10px;
	display: block;
	font-weight: normal;
}
#nav ul li a:hover { background: #cdcdcd; }
#nav ul ul {
	left: 137px;
	top: 0;
}
#pillmenu a{ float:none !important; }	/* Fix a display error in rhuk_milkyway */

 <script src="/templates/<?php echo $this->template ?>/js/moodropmenu.js" type="text/javascript"></script>
<link href="/templates/<?php echo $this->template ?>/css/menu.css" type="text/css" rel="stylesheet" /> 

 <script type="text/javascript">
<!-- 
    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});
            }
        });
    });
// -->
</script>