$(function() {

//	$('#navigation li a').append('<span class="hover"></span>');
	// span whose opacity will animate when mouse hovers.  
	$('#navigation li a .empty').hide();
	$('#navigation li a .hover').hide();
	
	$('#navigation li a').hover(
		function() {
			$('.hover', this)
				.stop()
				.show(0)
				.animate( 
					{ 'opacity' : 1 },
					700, 
					'easeOutSine');
		},
		function() {
			$('.hover', this).stop()
			.animate( 
				{'opacity' : 0 },
				700, 
				'easeOutQuad')
			.hide(0);
		}
	);
	
	//onclick event to ensure active tab keeps the same hover state
	$('#navigation li a').click(
		function() {
//			$('.default', this)
//				.hide(0);
			$('#navigation .active:visible')
				.fadeOut(600)
				.delay(600)
				.hide(0);
//			$('.empty', this)
//				.slideDown(300)
//				.slideUp(300);
			$('.active', this)
//				.delay(300)
//				.show(0)
				.fadeIn(600);
//			$('.default',this)
//				.delay(600)
//				.show(0);
		}
	);
});