$(document).ready(function()
{
    var menus = $(document).find("div.waterfall");

    if (menus.size()) {

        menus.each(function()
        {
            var currentMenuDiv = $(this);
            var menuVerticalOffset = $(this).offset().top;
            var menuVerticalHeight = $(this).find("ul").outerHeight(true);
            var menuVerticalY = menuVerticalOffset + menuVerticalHeight;
            var divHeight = menuVerticalHeight+10;
            $(this).css("height", divHeight);

            // Check for my-inner class if the current user is admin
            if ($(this).parent().parent().attr('class') == 'manage') {
                var columnDiv = $(this).parent().parent().parent().parent().parent();
                var columnOffset = $(this).parent().parent().parent().parent().parent().offset().top;
                var columnHeight = $(this).parent().parent().parent().parent().parent().outerHeight(true);
                var columnY = columnOffset + columnHeight;
            } else {
                var columnDiv = $(this).parent().parent();
                var columnOffset = $(this).parent().parent().offset().top;
                var columnHeight = $(this).parent().parent().outerHeight(true);
                var columnY = columnOffset + columnHeight;
            }            

            var orgHeight = columnHeight;
            var orgY = columnY;

            currentMenuDiv.find("ul > li").mouseover(function()
            {
                var currentLi = $(this);

                if (currentLi.find("ul").size()) {

                    if ($.browser.msie) {
                        var innerOffset = currentLi.offset().top;
                    } else {
                        var innerOffset = currentLi.find('ul').offset().top;
                    }

                    var innerHeight = currentLi.find('ul').outerHeight('true');
                    var innerY      = innerOffset + innerHeight;

                    if (innerY > columnY) {
                        var diff = innerY - columnY;
                        orgHeight = columnHeight;
                        columnHeight = columnHeight + diff;
                        orgY = columnY;
                        columnY = innerY;
                        columnDiv.css("height", columnHeight+10);
                    }
                }
            });

           /* Commented by mohammad this is not a dummy code,
            * with this you can change the height of the page back
            * to the original height when the submenu disapears
            
            currentMenuDiv.find("ul > li").mouseout(function()
            {
                if (columnY > orgY) {
                    columnHeight = orgHeight;
                    columnY = orgY;
                    columnDiv.css("height", orgHeight);
                }
            });
            */
        });
    }
});