$(document).ready(function() {

    $(".menuItem").mouseenter(function() {
        var $btnHolders = $(this).find("DIV").filter(
            function(i) {
                if ($(this).attr("class") == "menuButtonHolder") {
                    return $(this);
                }

                return null;
            }
        );

        if ($btnHolders != null && $btnHolders.length > 0) {
            var $btn = $($btnHolders[0]);
            var $cells = $btn.find("DIV");

            $cells.each(
            function(i) {
                var $elem = $($cells[i]);
                var style = $elem.attr("class");
                if (style.indexOf("Hover") == -1) {
                    $elem.attr("class", style + "Hover");
                }
            });

            var $listHolders = $(this).find("DIV").filter(
                function(i) {
                    if ($(this).attr("class") == "menuListHolder") {
                        return $(this);
                    }

                    return null;
                }
            );

            if ($listHolders != null && $listHolders.length > 0) {
                $list = $($listHolders[0]);                

                var pos = $(this).position();
                if (pos.left + $list.outerWidth() > $list.offsetParent().outerWidth()) {
                    if (pos.left - $list.outerWidth() + $(this).outerWidth() > 0)
                        $list.css('left', (pos.left - $list.outerWidth() + $(this).outerWidth()) + "px");
                    else
                        $list.css('left', "0px");
                }
                else {
                    $list.css('left', pos.left + "px");
                }

                $list.css('top', (pos.top + $(this).outerHeight() - 2) + "px");
                    
                //$list.animate({ height: "toggle", opacity: "toggle" }, 500);
                $list.css('display', 'block');
            }
        }

    });

    $(".menuItem").mouseleave(function() {
        var $btnHolders = $(this).find("DIV").filter(
            function(i) {
                if ($(this).attr("class") == "menuButtonHolder") {
                    return $(this);
                }

                return null;
            }
        );

        if ($btnHolders != null && $btnHolders.length > 0) {
            var $btn = $($btnHolders[0]);
            var $cells = $btn.find("DIV");

            $cells.each(
            function(i) {
                var $elem = $($cells[i]);
                var style = $elem.attr("class");
                $elem.attr("class", style.replace("Hover", ""));
            });

            var $listHolders = $(this).find("DIV").filter(
                function(i) {
                    if ($(this).attr("class") == "menuListHolder") {
                        return $(this);
                    }

                    return null;
                }
            );

            if ($listHolders != null && $listHolders.length > 0) {
                var $list = $($listHolders[0]);
                
                //$list.animate({ height: "toggle", opacity: "toggle" }, 500);                
                $list.css('display', 'none');
            }
        }
    });

});