$(document).ready(function () {
    var hash = window.location.hash.substr(1);

    var href = $('#nav li a, .pagestack .column a').each(function () {
        var href = $(this).attr('href');

        if (hash == href.substr(0, href.length - 5)) {
            var toLoad = hash + '.html #content';
            $('#content').load(toLoad)
        }
    });

    /**
     * This function makes any matching elements load the URL in their "href" attribute
     * via AJAX into the target element.
     * Only the HTML within <!--CMS START--> and <!--CMS END--> in the received document
     * is inserted, everything else is discarded.
     *
     * @param {string} what A CSS selector expression for which elements to apply the magic behaviour to (usually links)
     * @param {string} contentTarget The ID of the target element where to place the content.
     *
     * @note MAILTO: links are automatically excluded
     */
    var makeLinksMagic = function (what, contentTarget)
    {
        // load subpages within 'About Oil'

        $(what).click(function () {

            if ($(this).attr('href').match(/^mailto:/i)) {
                // do not apply magic to email links...
                return true;
            }

            $(this).addClass("live");

            var toLoad = $(this).attr('href');

            // add a function here to remove './static_content/' from the address bar

            window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

            var loadContent = function () {
                $.ajax({
                    url: toLoad,
                    dataType: "text",
                    success: showNewContent
                });
            }

            var showNewContent = function(content) {
                content = content.match(new RegExp('<!--CMS START-->([\\s\\S]*)<!--CMS END-->', "m"))[1];

                document.getElementById(contentTarget).innerHTML = content;
                $('#content').show('fast');

                // This recursively applies the "magic links" behaviour to any links loaded via the new
                // AJAX content:
                makeLinksMagic('#content .column a', 'content');
            }

            $('#content').hide('fast', loadContent);

            // add a function that makes the 'active' link highlighted
            //    $(this).addClass("live");

            return false;
        });
    };

    $("#nav li a, #nav li").hover(function () {
        var myLinkText = $(this).html();
        $(this).addClass("live");
    }, function () {
        $(this).removeClass("live");
    });


    // scroll up and down the page
    $('.topnav li a').click(function() {
        var hash = this.hash;
        var targetElement = $(hash);
        var scrollMe = navigator.userAgent.indexOf("Safari") === -1 ? 'html' : 'body';

        if (targetElement.length) {
            $(scrollMe).animate( { scrollTop: targetElement.offset().top }, 1500, "linear", function () {
                location.hash = hash;
            });
            return false;
        }
    });

    makeLinksMagic('#nav li a, #content .column a', 'content');
});