/// when the page loads....
$(document).ready(function(){

	// fade in the primary nav 
	$('ul#topNav').fadeIn(1000);
	
	// on click fade in sub nav
	$('.topNavLink').click(function () {
		$('#introPanel').hide();
		// assign the id of the current link to a variable so we can extract the identifier (number)
		var linkId = $(this).attr('id');
		// extract the identifier number from the link's id
		var subLinkId = linkId.substr(6,2);
		// hide any sub navs if they are showing
		$('.subNav').hide();
		// hide any panels if they are showing
		if( $('.panelItem:visible').hide("slide", { direction: "right" }, 500));
		
		// remove existing on-states and add back in for the new on item
		$('.topNavLink').removeClass('onColor');
		$(this).addClass( 'onColor' );
		
		// fade in the required subnav
      	$('#nav'+subLinkId).fadeIn(1000);
	});
	
	// on click fade in main content
	$('.subNavLink').click(function () {
		// assign the id of the current link to a variable so we can extract the identifier (number)
		var linkId = $(this).attr('id');
		// extract the identifier number from the link's id
		var subLinkId = linkId.substr(6,2);
		// hide any panels if they are showing
		if( $('.panelItem:visible').hide("slide", { direction: "right" }, 500));
		
		// remove existing on-states and add back in for the new on item
        $('.subNavLink').removeClass('onColor');
        $(this).addClass('onColor');
		
		// fade in the required subnav
      	$('#panel'+subLinkId).show("slide", { direction: "left" }, 500);
		
	});
	
});