Convert Responsive Menu from jQuery to MooTools 1.4.x

Question

This appears to be a pretty simple jQuery menu drop-down effect. I understand the mechanics of what is happening; however, I do not understand MooTools syntax. Can anyone help? JSFiddle link: http://jsfiddle.net/S2ku7/4/

jQuery Version

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 768) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 768) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
             // must be attached to li so that mouseleave is not triggered when hover over submenu
             $(this).toggleClass('hover');
        });
    }
}

My Best Attempt in MooTools

var ww = window.getSize();

window.addEvent('domready', function() {
    $$('ul.nav li a').each(function(link) {
        if(link.getSiblings().length > 0) {
            link.addClass('parent');
        }
    })

    $('a.toggleMenu').addEvent('click', function(elem) {
            elem.stop();
            $('.toggleMenu').toggleClass('active');
            $('.nav').toggle();
    });
    adjustMenu();
});

window.addEvent('resize', function() {  
    ww = window.getSize();
    adjustMenu();
});

var adjustMenu = function() {
    if (ww.x < 716) {
        $('a.toggleMenu').setStyle('display', 'inline-block');

        if (!$('a.toggleMenu').hasClass('active')) {
            $('ul.nav').setStyle('display', 'none');
        } else {
            $('ul.nav').setStyle('display', 'block');
        }

        $$('ul.nav li').each( function(elem) {      
            elem.removeEvent('mouseenter');
            elem.removeEvent('mouseleave');     
        });

        $$('ul.nav li a.parent').each( function(elem) {
            elem.removeEvent('click');      
            elem.addEvent('click', function(e){
                e.stop();
                elem.getParent('li').toggleClass('hover');
            });
        });
    } 
    else if(ww.x >= 716) {
        $('a.toggleMenu').setStyle('display', 'none');
        $('ul.nav').setStyle('display', 'block');

        $$('ul.nav li').each(function(elem) {
            elem.removeClass("hover");
        });

        $$('ul.nav li a').each(function(elem){      
            elem.removeEvent('click');
        });

        $$('ul.nav li').each( function(elem ){
            elem.removeEvent('mouseenter');
            elem.removeEvent('mouseleave');

            elem.addEvents({
                'mouseenter' : function(){ 
                    elem.toggleClass('hover');
                },
                'mouseleave' : function(){  
                    elem.toggleClass('hover');          
                }
            }); 
        });     
    }   
}

Answer 1

Here is the final JSFiddle link: http://jsfiddle.net/S2ku7/13/

Final Code

var ww = window.getSize();

var adjustMenu = function() {
    if (ww.x < 768) {
        $$('a.toggleMenu').setStyle('display', 'inline-block');

        if (!$$('a.toggleMenu').hasClass('active')) {
            $$('ul.nav').setStyle('display', 'none');
        } else {
            $$('ul.nav').setStyle('display', 'block');
        }

        $$('ul.nav li').each( function(elem) {      
            elem.removeEvents('mouseenter');
            elem.removeEvents('mouseleave');        
        });

        $$('ul.nav li a.parent').each(function(elem) {
            elem.removeEvents('click');     
            elem.addEvent('click', function(e){
                e.stop();
                elem.getParent('li').toggleClass('hover');
            });
        });
    } 
    else if(ww.x >= 768) {
        $$('a.toggleMenu').setStyle('display', 'none');
        $$('ul.nav').setStyle('display', 'block');

        $$('ul.nav li').each(function(elem) {
            elem.removeClass("hover");
        });

        $$('ul.nav li a').each(function(elem){      
            elem.removeEvents('click');
        });

        $$('ul.nav li').each( function(elem ){
            elem.removeEvents('mouseenter');
            elem.removeEvents('mouseleave');

            elem.addEvents({
                'mouseenter' : function(){
                    elem.toggleClass('hover');
                },
                'mouseleave' : function(){  
                    elem.toggleClass('hover');          
                }
            }); 
        });     
    }   
}

window.addEvent('domready', function() {
    $$('ul.nav li a').each(function(link) {
        if(link.getSiblings().length > 0) {
            link.addClass('parent');
        }
    })

    $$('a.toggleMenu').addEvent('click', function(elem) {
            elem.stop();
            $$('a.toggleMenu').toggleClass('active');
            $$('ul.nav').toggle();
    });
    adjustMenu();
});

window.addEvent('resize', function() {  
    ww = window.getSize();
    adjustMenu();
});

Problems with Original

• use '$$' instead of '$' when selecting classes
• needed MooTools-More enabled for the toggle() function call

Thanks for all the help @n3on on #mootools IRC chat!