var CURRENT_PAGE_ID = "#pageOne"; // global ID for the current page.

jQuery(document).ready(function () {
    // Initialize the height of main elements.
    setupPages();
    jQuery("#pages-inner").css({
        overflow: 'hidden',
        position: 'relative'
    });
    jQuery('#pages').css({
        overflow: 'hidden',
        position: 'relative' 	// fix for IE bug with overflow:hidden.
    });

    // Hook up the link events
    var links = jQuery("#links a");
    links.each(function (i) {
        jQuery(this).click(function (e) {
            goToPage(jQuery(this).attr('href'), true);
            e.preventDefault();
        });
    });

    // Add hookup for when the user resizes the window.
    jQuery(window).bind("resize", function (e) {
        // Readjust the size of main elements.
        setupPages();
        // Readjust the scroll position of the pages.
        var page = jQuery(CURRENT_PAGE_ID);
        jQuery('#pages-inner').css({ top: '-' + page.position().top + 'px' });
        jQuery('#pages').css({ height: page.height() + 'px' });
    });

    // Directly go to the requested page based on the #hash of the adress bar.
    // (by default, go to the first page)
    var requestedAnchor = window.location.hash;
    if (requestedAnchor == '' || requestedAnchor == '#')
        requestedAnchor = '#one';

    jQuery('html, body').scrollTop(0);
    goToPage(requestedAnchor, false);
});


function setupPages() {
    var windowHeight = jQuery(window).height() - jQuery("#header").outerHeight(true) - jQuery("#links").outerHeight(true) - jQuery("#footer").outerHeight(true);
    jQuery(".page").css({'min-height': 233 + 'px'});
}

function goToPage(pageId, animate) {
    // Animate by default.
    if (animate === undefined) animate = true;

    var pageMap = { '#one': '#pageOne', '#two': '#pageTwo', '#three': '#pageThree', '#four': '#pageFour', '#five': '#pageFive' };
    var page = jQuery(pageMap[pageId]);
    if (animate) {
        jQuery('#pages-inner').animate({
            top: '-' + page.position().top + 'px'
        }, 200);
        jQuery("#pages").animate({
            height: page.height() + 'px'
        }, 200);
    } else {
        jQuery('#pages-inner').css({ top: '-' + page.position().top + 'px' });
        jQuery('#pages').css({ height: page.height() + 'px' });
    }

    jQuery("#links a").removeClass("selected");
    jQuery("#links a[href='" + pageId + "']").addClass("selected");

    CURRENT_PAGE_ID = pageMap[pageId];
}