$(document).ready(function ()
{
	
	
	//// PREP ////
	
	
	// set up vars to keep track of where we are
	var nav_level = 0;
	var nav_category = '';
	var detail_page = '';
		
	// figure out what category was requested
	if (window.location.hash != '' && window.location.hash != '#')
	{
		var url_parts = window.location.hash.split('/');		
		if (url_parts.length < 2)
		{
			select_nav(1, true);
			show_gallery(url_parts[0].substring(1), true);
		}
		else
		{
			select_nav(2, true);
			show_gallery(url_parts[0].substring(1), true);
			show_detail(url_parts[1], true);
		}
	}
	
	
	//// NAVIGATION FUNCTIONS ////
	
	
	// moves navigation up/down
	function select_nav(level, instant)
	{
		if (instant == null)
			instant = false;
		if (nav_level != level)
		{
			var new_top = 100 - (level * 40);
			if (!instant) {
				$('h1#logo, ul#nav').animate({ 'margin-top': new_top + "", });
				$('ul#nav').animate({ 'margin-top': new_top + "", });
			} else {
				$('h1#logo, ul#nav').css('margin-top', new_top); // insta-load!
				$('ul#nav').css('margin-top', new_top); // insta-load!
			}
			nav_level = level; // now we're at this nav level
		}
	}
	
	// shows appropriate gallery items for category
	function show_gallery(category, instant)
	{
		if (instant == null)
			instant = false;
		if (nav_category != category || nav_level == 2 || nav_level == 1)
		{
			nav_category = category; // now we're in this category
			$('ul#nav li a').removeClass('selected').filter('[name="' + category + '"]').addClass('selected'); // update selection
			if (nav_level == 2)
				category = '';
			if (!instant)
				$('#gallery li').fadeOut(200).filter('li.' + category + '_item').delay(210).fadeIn(200);
			else
				$('#gallery li').hide().filter('li.' + category + '_item').show(); // insta-load!
			
		}
		
		
	}
	
	// loads project detail asynchronously if necessary
	function load_detail(slug, instant)
	{
		if($('.detail').filter('[name="' + slug + '"]').size() < 1) // does this already exist?
		{
			// haven't loaded this project detail yet, so load it
			$.get('detail.php?slug=' + slug, function(return_data) {
				$('#copyright').before(return_data);
				show_detail(slug, instant);
				// create lightbox for new content
				$('.detail[name="' + slug + '"] ul.thumbnails a').lightBox();
			});
			return false;
		}
		return true;
	}
	
	// shows project detail
	function show_detail(slug, instant)
	{
		if (instant == null)
			instant = false;
		if (detail_page != slug)
		{
			if (slug != '' && !load_detail(slug, instant))
				return; // gotta do an async load so let that handle the display
			if (!instant)
				$('.detail').fadeOut(200).filter('[name="' + slug + '"]').delay(210).fadeIn(200);
			else
				$('.detail').hide().filter('[name="' + slug + '"]').show(); // insta-load!
			detail_page = slug; // now we're looking at this detail page
		}
	}
	
	
	//// EVENT LISTENERS ////
	
	
	// select logo
	$('h1#logo a').click(function ()
	{
		select_nav(0);
		show_gallery('');
		show_detail('');
	});
	
	// select category
	$('ul#nav a').click(function()
	{
		$('ul.contents').fadeOut(150); // so contents don't overlap gallery awkwardly
		if($(this).attr('href') == '#about')
		{
			$('a[name="me"]').click();
			window.location.hash = '#about/me'
			return false;
		}
		select_nav(1);
		show_gallery($(this).attr('name'));
		show_detail('');
	});
	
	// select item for detail
	$('ul#gallery a').click(function()
	{
		select_nav(2);
		show_gallery($(this).parent('ul#gallery li').attr('name'));
		show_detail($(this).attr('name'));
		$('ul#gallery .rollover').fadeOut('slow');
	}).hover
	(
		function ()
		{
			$(this).children('.rollover').fadeIn('fast');
		},
		function ()
		{
			$(this).children('.rollover').fadeOut('fast');
		}
	);
	
	// navigation hover effect
	$('ul#nav a').hover
	(
		function ()
		{
			if (nav_level != 0)
				return;
			$(this).siblings('ul.contents').stop().animate
			(
				{
					opacity: 'show',
					//top: '20',
				},
				200,
				function ()
				{
					$(this).css('opacity', 1);
				}
			);
		},
		function ()
		{
			$(this).siblings('ul.contents').stop().animate
			(
				{
					opacity: 'hide',
					//top: '25',
				},
				200,
				function ()
				{
					//$(this).css('top', '15px');
				}
			);
		}
	);
});