$(document).ready(function () {

    var menuCollection = $("#menu > div.menu-item");
    var menuBackground;
    var menuColor;
    var menuBorder;

    menuCollection.hover(show, hide);
    menuCollection.each(color);

    function color() {
        var menuFloat = $(this).children(".menu-float");

        if (menuFloat.length) {
            $(this).css("backgroundColor", menuFloat.children("div").css("background-color"));
            $(this).css("color", menuFloat.children("div").css("color"));
        }
    }

    function show() {
        var menuFloat = $(this).children(".menu-float");

        if (menuFloat.length) {
            // Store current colors prior to hover
            menuBackground = $(this).css("backgroundColor");
            menuColor = $(this).css("color");

            // Get new colors
            $(this).css("backgroundColor", menuFloat.children("div").css("background-color"));
            $(this).css("color", menuFloat.children("div").css("color"));
            $(this).addClass("selected");

            // Css positioning
            menuFloat.css("top", $(this).outerHeight() - 0);

            if ($(this).position().left > ($("#menu").width() / 2)) {
                menuFloat.css("left", ($(this).position().left - menuFloat.width() + $(this).width()));
            }
            else {
                menuFloat.css("left", $(this).position().left);
            }

            // Show menu item
            menuFloat.show();
        }
    }

    function hide() {
        var menuFloat = $(this).children(".menu-float");

        if (menuFloat.length) {
            // Reset tabs colors to original
            if (menuBackground) $(this).css("background-color", menuBackground);
            if (menuColor) $(this).css("color", menuColor);
            $(this).removeClass("selected")

            menuFloat.hide();
        }
    }

});

$(document).ready(function () {

    var menuDuration = 350;
    var menuPanes = $("#menu div.menu-container div.menu-pane");

    var menuCurrent = $("#menu div.menu-container div.menu-links").filter(":visible").filter(":first").parent().children(".menu-pane");

    //var menuCurrent = menuPanes.filter(":first");
    var panelWidth = menuCurrent.parent().children(".menu-links").width();
    //menuCurrent.parent().children(".menu-links").show();

    // Event handlers
    menuPanes.click(expandMenuPanel);

    // Panel pane click
    function expandMenuPanel() {
        // Check the currnet panel is not the clicked panel
        if ($(this) != menuCurrent) {
            // Panels
            var menuLinks = $(this).parent().children(".menu-links");
            var menuLinksCurrent = menuCurrent.parent().children(".menu-links");

            // Toggle panels
            if (menuLinks)
                if (menuLinks.is(":visible") == false)
                    togglePanels(menuLinks, menuLinksCurrent);
        }

        // Set the current panel
        menuCurrent = $(this);
    }

    // Toggle panels function
    function togglePanels(showPanel, hidePanel) {

        // Animation object
        objAnimate = new animate(
            menuDuration,
            function (percent) {
                var growWidth = Math.round(panelWidth * percent);
                var shrinkWidth = panelWidth - growWidth;

                if (showPanel.is(":visible") == false)
                    showPanel.show();

                showPanel.css("opacity", percent);
                showPanel.width(growWidth);
                hidePanel.width(shrinkWidth);
                hidePanel.css("opacity", 1 - percent);
            },
            function () {
                showPanel.width(panelWidth);
                hidePanel.hide();
            }
        );
    }

    // animation class for sync animations
    function animate(duration, handler, complete) {

        // Globals
        var intDuration = duration;
        var objTimer = new timer();
        var intTimer = setInterval(nextFrame, 0);

        // Timer class
        function timer() {
            this.startTime = new Date().getTime();

            // Class duration function
            this.duration = function () {
                return new Date().getTime() - this.startTime;
            };
        }

        // Frame advance
        function nextFrame() {
            var percent = ((100 / intDuration) * objTimer.duration()) / 100;

            if (handler) handler(percent);

            if (objTimer.duration() >= duration) {
                // Clear interval timer
                clearInterval(intTimer);

                // Handle last step
                if (handler) handler(1);

                // Complete handler
                if (complete) complete();
            }
        }

    }

});