$(document).ready(function(){

    $("#nav > li li:has(ul)").find("a:first").wrap('<span></span>');


    var flipped = null;
    var parentFlipped = null;

    // 2nd Level menus
    $('#nav > li li').hover(function(){

        var childMenu = $(this).find('ul:first');
        if (childMenu.length) {

            childMenu.css('display','block');
            var viewportWidth = $('body').width();
            var startPos = childMenu.offset().left;
            var elementWidth = childMenu.width();
            var endPos = startPos + elementWidth;

            if (endPos > viewportWidth) {
                flipped = true;
                childMenu.css('left','auto');
                childMenu.css('right','100%');
            }

        }


    }, function(){

        var childMenu = $(this).find('ul:first');
        if (childMenu.length) {

            childMenu.css('display','none');

            if (flipped) {
                flipped = null;
                childMenu.css('left','100%');
                childMenu.css('right','auto');
            }

        }

    });




    // 1st level menu
    $('#nav > li').hover(function(){

        var childMenu = $(this).find('ul:first');
        childMenu.css('display','block');
        var viewportWidth = $('body').width();
        var startPos = childMenu.offset().left;
        var elementWidth = childMenu.width();
        var endPos = startPos + elementWidth;

        if (endPos > viewportWidth) {
            parentFlipped = true;
            childMenu.css('left','auto');
            childMenu.css('right','0px');
        }

    },function(){
        var childMenu = $(this).find('ul:first');
        childMenu.css('display','none');
        if (parentFlipped) {
            parentFlipped = null;
            childMenu.css('left','0px');
            childMenu.css('right','auto');
        }

    });
});