$(document).ready(function() {
  $('.content').click(function(e) {
    loadContent(e, this);
  })
  
  anchor = window.location.hash.toString(); // get anchor if there is one
  if (anchor == '') { // test to see if there's an anchor
    $('#display').load('pages/about.html'); // load about page if nothing is selected
  } else {
    anchor = anchor.replace('#', ''); // remove the hash symbol
    $('.content').removeClass('selected'); // remove '.selected' from all nav links
    $('a[href*="'+anchor+'"]').parent().addClass('selected'); // add '.selected' to
    $('#display').load(location.protocol + '//' + location.hostname + location.pathname + 'pages/' + anchor + '.html', checkScroll) // load the page into #display and scoll up if too far down
  }
});

function loadContent (e, newThis) {
  e.preventDefault(); // don't let it actually load that html
  
  contentLink = newThis.firstChild.href.split('/'); // split into an array by the '/' mark
  contentLink = contentLink[contentLink.length-1]; // get the last element
  contentLink = contentLink.replace('\.html', ''); // remove '.html'
  window.location.hash = "#" + contentLink; // add the result to the url bar
  
  $('.content').removeClass('selected'); // remove '.selected' from all nav links
  $(newThis).addClass('selected'); // add '.selected' to the link you just clicked
  $('#display').unload(); // clear the #display box
  $('#display').load(newThis.firstChild.href , function() {
    $('#display').hide();
    $('#display').fadeIn('fast');
    checkScroll(); // scroll up if too far down
  }); // load the page in the #display box
}

function checkScroll () {
  var scrollTop = $(document).scrollTop(); // how far down the document is scrolled
  var totalTillDisplay = $('#content-wrapper').offset().top; // the top of #content-wrapper
  var contentWrapperPadding = parseInt($('#content-wrapper').css("padding-top").replace('px', '')); // the top-padding of #content-wrapper parsed to be an int
  var scrollPoint = totalTillDisplay + contentWrapperPadding*0.66; // the golden ratio of the distance between the header and content
  
  if (scrollTop > totalTillDisplay) {
    $('html,body').animate({ scrollTop: scrollPoint }, '500');
  }
}

/*
function checkScroll () {
  var totalTillDisplay = $('#content-wrapper').offset().top;
  var scrollTop = $(document).scrollTop();
  var offset = (scrollTop > totalTillDisplay) ? (scrollTop - totalTillDisplay) : 0;
  
  $("#display").css('top', offset);
  
}*/