$(document).ready(function() {

	$('body').append('<div id="page-loader"><p>Just a second...</p><img src="/graphics/loading.gif" alt="" /></div>');
		
// When all elements are loaded, build the page

	$(window).load(function(){
		$('#page-loader').delay(1000).animate({
			opacity: 0,
			}, 400);	
		$('#page-loader').delay(1500).css('z-index', '-1000');
		$('body').delay(1400).animate({
			backgroundColor: "#FF5E14"
			}, 400);
		$('#page').delay(1400).animate({
			opacity: 100,
			}, 400);
		$('#masthead').delay(2200).animate({
			opacity: 100,
			}, 1800);
		$('#site-info').delay(2200).animate({
			opacity: 100,
			}, 1800);
		$('#primary-navigation').delay(2800).animate({
			opacity: 100,
			}, 1800);
		$('#mark').delay(2800).animate({
			opacity: 100,
			}, 1800);
		$('#hello-content').delay(3400).animate({
			opacity: 100,
			}, 2200);
		$('#latest-content').delay(3400).animate({
			opacity: 100,
			}, 2200);
		$('#photos-content').delay(3400).animate({
			opacity: 100,
			}, 2200);			
		$('#status-content').delay(3400).animate({
			opacity: 100,
			}, 2200);
		$('#about-content').delay(3400).animate({
			opacity: 100,
			}, 2200);
	});


// Primary Navigation

	$('#masthead a').click(function() {
        $('html, body').animate({scrollTop:0}, 'slow');
        $('body').animate({
			backgroundColor: "#FF5E14"
			}, 400);
		$('.wayfinder').remove();
	});
	$('#latest-link a').click(function() {
		$('body').animate({
			backgroundColor: "#630909"
			}, 400);
		$('.wayfinder').remove();
		$('#primary-navigation').append('<div class="wayfinder" id="wayfinder-latest"></div>');		
	});
	$('#photos-link a').click(function() {
		$('body').animate({
			backgroundColor: "#0d4104"
			}, 400);
		$('.wayfinder').remove();
		$('#primary-navigation').append('<div class="wayfinder" id="wayfinder-photos"></div>');			
	});
	$('#status-link a').click(function() {
		$('body').animate({
			backgroundColor: "#5b8cab"
			}, 400);
		$('.wayfinder').remove();
		$('#primary-navigation').append('<div class="wayfinder" id="wayfinder-status"></div>');			
	});
	$('#about-link a').click(function() {
		$('body').animate({
			backgroundColor: "#eae8e8"
			}, 400);
		$('.wayfinder').remove();
		$('#primary-navigation').append('<div class="wayfinder" id="wayfinder-about"></div>');			
	});
		$('#mark a').click(function() {
        $('html, body').animate({scrollTop:0}, 'slow');
        $('body').animate({
			backgroundColor: "#FF5E14"
			}, 400);
		$('.wayfinder').remove();
	});


// Set up the custom Fancybox title for the photos

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    return '<div id="photo-info"><p id="photo-title">' + title + '</p>' + '<p id="photo-index">' + (currentIndex + 1) + ' of ' + currentArray.length + '</p><div id="photo-source"><a href="' + '#SOURCE' + '" id="photo-source-link">' + 'Source' + '</a></div></div>';
}

// Invoke Fancybox when photos are clicked

// Hide the wayfinder arrow before invoking Fancybox. On smaller screens, the Fancybox may not clear the arrow and the result looks sloppy.

	$('a.photo').click(function(){
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});
	$('a.photo').each(function() {
		$(this).fancybox({
			'overlayOpacity' : 0.0,
			'hideOnOverlayClick' : false,
			'transitionIn'	: 'fade',
			'transitionOut'	: 'fade',
			'titlePosition' : 'inside',
			'titleFormat' : formatTitle,
			'onComplete' : function() {	
			
// To play nice with Flickr's Community Guidelines, include a link back to the photo page on Flickr.com (not the image itself).
// Grab the Flickr user page URL from the "Via" link.

				sourceURL = $('#photos-source-url').attr('href');

// Then grab the photo URL, and do some regex to extract the photo ID.

				photoURL = $(this).attr('href');
				matchPattern = /http:.*flickr.com\/.*\//;
				photoID = photoURL.replace(matchPattern, '');
				matchPattern = /_.*/;
				photoID = photoID.replace(matchPattern, '');

// Then combine the user page URL with the photo ID, and assign that URL to the "photo source link" anchor.

				source = sourceURL + photoID;
				$('#photo-source-link').attr('href', source);
			}
		});
	});		
		
// About section link overlays

	$('#about-resume-link').click(function(){
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});
	$('#about-resume-link').fancybox({
		'overlayOpacity' : 0.0,
		'hideOnOverlayClick' : false,
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade'
	});
	$('#about-colophon-link').click(function(){
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});
	$('#about-colophon-link').fancybox({
		'overlayOpacity' : 0.0,
		'hideOnOverlayClick' : false,
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade'
	});


// Secondary navigation Fancybox overlays

// Hide the wayfinder arrow before invoking Fancybox. On smaller screens, the Fancybox may not clear the arrow and the result looks sloppy.

// '.contact-form-link' not only loads the Fancybox, it also clears the form, hides the "thanks" message, and hides the "loading" spinner. This is done in case the user has submitted the contact form, and then reinvokes the Fancybox.

	$('.contact-form-link a').click(function() {
		$('#thanks-message').css('display','none');
		$('#loader').css('display','none');
		$('#contact-form').clearForm();
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});
	$('.contact-form-link a').fancybox({
		'overlayOpacity' : 0.0,
		'hideOnOverlayClick' : false,
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade'
	});
	$('.resume-link a').click(function(){
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});	
	$('.resume-link a').fancybox({
		'overlayOpacity' : 0.0,
		'hideOnOverlayClick' : false,
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade'
	});
	$('.privacy-link a').click(function(){
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});	
	$('.privacy-link a').fancybox({
		'overlayOpacity' : 0.0,
		'hideOnOverlayClick' : false,
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade'
	});
	$('.legal-link a').click(function(){
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});	
	$('.legal-link a').fancybox({
		'overlayOpacity' : 0.0,
		'hideOnOverlayClick' : false,
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade'
	});
	$('.colophon-link a').click(function(){
		$('.wayfinder').animate({
			opacity: 0,
			}, 400);
	});	
	$('.colophon-link a').fancybox({
		'overlayOpacity' : 0.0,
		'hideOnOverlayClick' : false,
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade'
	});

// Show the wayfinder arrow again when the Fancybox is closed.

	$('#fancybox-close').click(function(){
		$('.wayfinder').animate({
			opacity: 100,
			}, 400);
	});	

// License info show/hide

	$('#author-info a').click(function() {
		$("#license").fadeIn(500);
		return false;
	});
	$('#license-close-button a').click(function() {
		$("#license").fadeOut(500);
	});

// This validates, then submits the "Contact" form

    $('#contact-form').validate({
		submitHandler: function(form) {
			$(form).ajaxSubmit({
				target: '#thanks',
				timeout: 10000,
				});
			$('#loader').css('display','block');
			$('#fancybox-content div').css('overflow', 'hidden');
		}
	});

// This adds validation rules and error messages to the form, which are used by the function above.

// "Email" is required, and must be formatted as an email address. "Name" and "Message" are required, but have no formating restrictions. 

    $('#email').rules('add', {
	 	required: true,
	 	email: true,
		messages: {
		required: 'Please include your email address.',
		email: 'Please check the formatting of your email address.'
		}
	});
	$('#name').rules('add', {
	 	required: true,
		messages: {
		required: 'Please include your name.',
		}
	});
	$('#message').rules('add', {
	 	required: true,
		messages: {
		required: 'Please include a message.',
		}
	});

// Close the Contact overlay from the "Thanks" message.

// Show the wayfinder, too.

	$('#mail-close-link a').click(function() {
		$.fancybox.close();
		$('.wayfinder').animate({
		opacity: 100,
		}, 400);
		return false;
	 });

});