//When the document has finished loading add java script events to the function menu
$(document).ready(function () {


    function showMenu(menuId) {
        //Expand the menu
        $(menuId + ' .functioncontent').slideDown('slow');

        //Close the bounce 
        $(menuId + ' .spacer').slideUp(100);

        //The menu is expanded
        menuId.expanded = true;
    };

    function hideMenu(menuId) {
        //Collapse the menu
        $(menuId + " > .wrapper > .functioncontent").slideUp('slow');

        //The menu is collapsed
        menuId.expanded = false;
    };


    //
    //Expand/collapse function menus
    //

    $("#function1").click(function () {
        showMenu('#function1');
    })
    .mouseleave(function () {
        hideMenu('#function1');
    });

    $("#function2").click(function () {
        showMenu('#function2');
    })
    .mouseleave(function () {
        hideMenu('#function2');
    });


    $("#function3").click(function () {
        showMenu('#function3');
    })
    .mouseleave(function () {
        hideMenu('#function3');
    });

    $("#function4").click(function () {
        showMenu('#function4');
    })
    .mouseleave(function () {
        hideMenu('#function4');
    });



    //
    //Bounce function menus
    //
    $("#function1 .wrapper").mouseenter(function () {
        t1 = setTimeout(function () {
            showMenu('#function1');
        }, 400);

        //Check if the menu (parent container) is expanded
        if (!this.parentNode.parentNode.expanded) {
            //Let the menu bounce
            $('#function1 .spacer').slideDown(100);
        }
    })
    .mouseleave(function () {
        //Check if the menu (parent container) is expanded
        if (!this.parentNode.parentNode.expanded) {
            //Let the menu bounce
            clearTimeout(t1);
            $('#function1 .spacer').slideUp(100);
        }
    });

    $("#function2 .wrapper").mouseenter(function () {
        t2 = setTimeout(function () {
            showMenu('#function2');
        }, 400);

        //Check if the menu (parent container) is expanded
        if (!this.parentNode.parentNode.expanded) {
            //Let the menu bounce
            $('#function2 .spacer').slideDown(100);
        }
    })
    .mouseleave(function () { //Check if the menu (parent container) is expanded

        if (!this.parentNode.parentNode.expanded) {
            clearTimeout(t2);
            //Let the menu bounce
            $('#function2 .spacer').slideUp(100);
        }
    });

    $("#function3 .wrapper").mouseenter(function () {
        t3 = setTimeout(function () {
            showMenu('#function3');
        }, 400);

        //Check if the menu (parent container) is expanded
        if (!this.parentNode.parentNode.expanded) {
            //Let the menu bounce
            $('#function3 .spacer').slideDown(100);
        }
    })
    .mouseleave(function () { //Check if the menu (parent container) is expanded

        if (!this.parentNode.parentNode.expanded) {
            clearTimeout(t3);
            //Let the menu bounce
            $('#function3 .spacer').slideUp(100);
        }
    });

    $("#function4 .wrapper").mouseenter(function () {
        t4 = setTimeout(function () {
            showMenu('#function4');
        }, 400);

        //Check if the menu (parent container) is expanded
        if (!this.parentNode.parentNode.expanded) {
            //Let the menu bounce
            $('#function4 .spacer').slideDown(100);
        }
    })
    .mouseleave(function () {

        //Check if the menu (parent container) is expanded
        if (!this.parentNode.parentNode.expanded) {
            clearTimeout(t4);
            //Let the menu bounce
            $('#function4 .spacer').slideUp(100);
        }

    });
});