var initPage = function() {
    initMenu();
}

var initMenu = function() {
    var nav = $('.menu');

    var lis = nav.find('li');
    lis.mouseover(function() {
        $(this).addClass('hover');
    }).mouseout(function() {
        $(this).removeClass('hover');
    });

    $('.flag').click(function() {
        var flagLi = $("li.flag");
        var subFlagsDiv = $("div.sub_flag");

        if (subFlagsDiv.find('li').length == 0) return false;

        if (subFlagsDiv.css("display") == "block") {
            hideFlags();
        } else {
            //show the flags
            //get position for flags
            var flagLiTop = flagLi.position().top;
            var flagLiBottom = flagLiTop + flagLi.outerHeight();
            var flagLiLeft = flagLi.position().left;

            //set position flags
            subFlagsDiv.css("top", (flagLiBottom));
            subFlagsDiv.css("left", flagLiLeft);
            subFlagsDiv.css("position", "absolute");
            subFlagsDiv.css("display", "block");
        }
        return false;
    });

    $(document).click(function() {
        $('.sub_flag').hide();
    });
}

var hideFlags = function() {
    var subFlagsDiv = $("div.sub_flag");
    subFlagsDiv.css("display", "none");
}

$(document).ready(initPage);