$(document).ready(function() {

    var $panels = $('.slider div[class*=panel]');

    //width of the first panel (make sure all panels are the SAME width);
    panelWidth = $panels[0].offsetWidth;

    // calculate a new width for the slider (so it holds all panels) and set it
    $('.slider').css('width', panelWidth * $panels.length);

    // bind the buttons
    $('#nav li').find('a').bind('click', function(event) {
        event.preventDefault(); //stop the link from going to href
        fadeImage(this);
    });

    //logoLink
    $('#logoLink').bind('click', function(event) {
    $('body').animate({ backgroundColor: "#032C50" }, "slow");
        $('.slider').animate({ 'left': '0px' }, 'slow', AfterSlideEffect);
        $('#nav li').find('a').removeClass('activeLink');
        $('#nav li.home').find('a').addClass('activeLink');
    });

    function fadeImage(source) {
        var thisLink = $(source).parent().attr('class');

        $('#nav li').find('a').removeClass('activeLink');

        switch (thisLink) {
            case "home":
                $('body').animate({ backgroundColor: "#032C50" }, "slow");
                $('.slider').animate({ 'left': '0px' }, 'slow', AfterSlideEffect);
                $(source).addClass('activeLink');
                break;
            case "one":
                $('body').animate({ backgroundColor: "#D6B00B" }, "slow"); //#663333
                $('.slider').animate({ 'left': '-800px' }, 'slow', AfterSlideEffect);
                $(source).addClass('activeLink');
                break;
            case "two":
                $('body').animate({ backgroundColor: "#473259" }, "slow");
                $('.slider').animate({ 'left': '-1600px' }, 'slow', AfterSlideEffect); //'-925px'
                $(source).addClass('activeLink');
                break;
            case "three":
                $('body').animate({ backgroundColor: "#3B2714" }, "slow"); //#79878A
                $('.slider').animate({ 'left': '-2400px' }, 'slow', AfterSlideEffect); //'-1850px'
                $(source).addClass('activeLink');
                break;
            case "four":
                $('body').animate({ backgroundColor: "#A28A7E" }, "slow");
                $('.slider').animate({ 'left': '-3200px' }, 'slow', AfterSlideEffect); //'-2775px'
                $(source).addClass('activeLink');
                break;
            case "five":
                $('body').animate({ backgroundColor: "#000000" }, "slow");
                $('.slider').animate({ 'left': '-4000px' }, 'slow', AfterSlideEffect); //'-3700px' 
                $(source).addClass('activeLink');
                break;
            case "six":
                $('body').animate({ backgroundColor: "#006699" }, "slow");
                $('.slider').animate({ 'left': '-4800px' }, 'slow', AfterSlideEffect); //'-4625px'
                $(source).addClass('activeLink');
                break;
            case "seven":
                $('body').animate({ backgroundColor: "#003300" }, "slow");
                $('.slider').animate({ 'left': '-5600px' }, 'slow', AfterSlideEffect); //'-5550px'
                $(source).addClass('activeLink');
                break;
        }
    }

    function AfterSlideEffect() { }



});