var DEFAULT_PAGE = 'home.html';

$(function() {
  
    // Bind an event to window.onhashchange that, when the history state changes,
    // gets the url from the hash and displays either our cached content or fetches
    // new content to be displayed.
    $(window).bind( 'hashchange', function(e) {
    
        // Get the hash (fragment) as a string, with any leading # removed. Note that
        // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
        var url = e.fragment ? e.fragment : DEFAULT_PAGE;
        
        // Remove .bbq-current class from any previously "current" link(s).
        $( 'a.bbq-current' ).removeClass( 'bbq-current' );
        
        // Hide any visible ajax content.
        $( '.bbq-content' ).children( '.bbq-item' ).remove();
        
        // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
        url && $( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
        
        // Show "loading" content while AJAX content loads.
        $( '.bbq-loading' ).show();
          
        // Create container for this url's content and store a reference to it in
        // the cache.
        $( '<div class="bbq-item"/>' )
        
        // Append the content container to the parent container.
        .appendTo( '.bbq-content' ).hide()
        
        // Load external content via AJAX.
        .load( url, function() {
            // Content loaded, hide "loading" content.
            $( '.bbq-loading' ).hide();
        }).fadeIn();
    })
  
    // Since the event is only triggered when the hash changes, we need to trigger
    // the event now, to handle the hash the page may have loaded with.
    $(window).trigger( 'hashchange' );
  
});