//This function adds click events to any element given the element id and content page to load.
function displayNewContent(id, page){
    $(id).click(function(){
        $("#dynamicContent").fadeOut("slow", function(){
            $("#dynamicContent").load(page, null, function(){
                $("#dynamicContent").fadeIn("slow");
            });
        });
        $("#nav").find("li").each(function() {
           $(this).removeAttr("id");
        });
        $(id).parent()[0].id = 'current';
    });
}

$(document).ready(function(){
    //When the document is ready add all the click events

    // Below we add the click events for each of the navigation elements and tell it what content to load.
    // The first parameter is the ID of the nav element and the second is the html content file to load.
    displayNewContent("#homeNav", "./frontpage.html");
    displayNewContent("#functionsNav", "./functions.html");
    displayNewContent("#estatesNav", "./estates.html");
    displayNewContent("#adviceNav", "./advice.html");
    displayNewContent("#contactNav", "./contactus.html");

    //Load the main dynamic content
    if(document.getElementById("contactsuccess") == null) {
        $("#dynamicContent").load("./frontpage.html");
    } else {
        window.location = "./index.html";
        $("#dynamicContent").load("./contactsuccess.html");
    }

});