// Object container for all code.
var KP = {
    nav: {},
    content: {}
};

$(document).ready(function () {

    // Save fequently used elements to the object container.

    KP.nav.nav = $("#nav");
    KP.nav.home = $("#nav-home");
    KP.nav.about = $("#nav-about");
    KP.nav.projects = $("#nav-projects");
    KP.nav.contact = $("#nav-contact");

    KP.content.content = $("#content");
    KP.content.home = $("#content-home");
    KP.content.about = $("#content-about");
    KP.content.projects = $("#content-projects");
    KP.content.contact = $("#content-contact");

    // Add event listeners.

    KP.nav.home.click(function (e) {

        KP.nav.nav.find("li.active").removeClass("active");
        KP.nav.home.parent().addClass("active");

        KP.content.content.fadeOut("normal", function () {
            $("#content > div").css("display", "none");
            KP.content.home.css("display", "block");
        });
        
        KP.content.content.fadeIn();

    });
    KP.nav.about.click(function (e) {

        KP.nav.nav.find("li.active").removeClass("active");
        KP.nav.about.parent().addClass("active");

        KP.content.content.fadeOut("normal", function () {
            $("#content > div").css("display", "none");
            KP.content.about.css("display", "block");
        });

        KP.content.content.fadeIn();

    });
    KP.nav.projects.click(function (e) {

        KP.nav.nav.find("li.active").removeClass("active");
        KP.nav.projects.parent().addClass("active");

        KP.content.content.fadeOut("normal", function () {
            $("#content > div").css("display", "none");
            KP.content.projects.css("display", "block");
        });

        KP.content.content.fadeIn();

    });
    KP.nav.contact.click(function (e) {

        KP.nav.nav.find("li.active").removeClass("active");
        KP.nav.contact.parent().addClass("active");

        KP.content.content.fadeOut("normal", function () {
            $("#content > div").css("display", "none");
            KP.content.contact.css("display", "block");
        });

        KP.content.content.fadeIn();

    });
    
});