gistfile1.js

$(document).ready(function()
{
	// Set active page
	$('a[href$="'+window.location.origin+window.location.pathname+'"]').parent().addClass('active');
	
	// push the state into the history with its content
	history.pushState({
			"html": $('#content').html()
		},
		'', 
		window.location.pathname
	);
	
	// When they press back / forward we will resume the states html
	window.onpopstate = function(e)
	{
	    if(e.state)
	    {
	        $('#content').html(e.state.html);
	    }
	};

	// set the circles on what should be active on dom ready
	update_circles();
});

// On any link 
$(document).on('click','a', function(e)
{
    e.preventDefault();
    
    // make sure its one of our own
    if ($(this).attr('href').indexOf('<?php echo Uri::Base(); ?>') === 0)
    {
    	// do not reload the current page
	if($(this).attr('href') != window.location.origin+window.location.pathname)
	{
		// get the new url
		new_url = $(this).attr('href');
		
		// ajax get the new content
		$.get($(this).attr('href'), function(data) 
		{
			// set content
			$('#content').html( data );
			
			// store history
			history.pushState({
					"html": data
				}, 
				'',
				new_url
			);
			
			// google analytics page view
			ga('send', 'pageview', window.location.pathname)
		});

		// reove the active class 
		$('.active').removeClass('active');
		
		// set the active class on the nav
		if ($(this).parent().parent().hasClass('nav'))
		{
		    $(this).parent().addClass('active');
		}
		else
		{
			$('#sub-nav li').first().addClass('active');
		}
		// update the cirlces 
		update_circles();

	}
    }
    // otherwise go to their link
    else
    {
        window.open($(this).attr('href'));
    }
});
	
// Updates the navigation circles to what should be active
function update_circles()
{
	$('.circles').remove();
	// Adds circles to active link
	$('#sub-nav .active a').append('\
	    <div class="circles visible-md visible-lg">\
	        <span class="circle"></span>\
	        <span class="circle"></span>\
	        <span class="circle"></span>\
	    </div>\
	 ');
	 $('#sub-nav a').append('\
	    <div class="circles visible-md visible-lg">\
	        <span class="circle"></span>\
	    </div>\
	');
}