// JavaScript Document

$(document).ready(function() {
	
	$('div.nav > ul > li').css({ opacity: 0.4 });
	
	$('div.nav > ul > li').first().addClass('fullOpacity');
	
	$('#content > article').hide();
	
	$('#content > article').first().show();
	
	$('#content > aside').hide();
	
	$('#content > aside').first().show();
	
	$('div.nav > ul > li').hover(function()
		{
			$(this).animate({ opacity: 1 }, 200);
		},
		function()
		{
			$(this).animate({ opacity: 0.4 }, 200);
		}
	);
	
	$('div.nav > ul > li').click(function()
		{
			$('div.nav > ul > li').removeClass('fullOpacity');
			$(this).addClass('fullOpacity');
			
			if($(this).parent().parent().nextUntil('div.nav').is(':hidden'))
				{
					$('#content > article').hide();
					$('#content > aside').hide();
					$(this).parent().parent().nextUntil('div.nav').show();
				}	
		}
	);
	
	$('nav#thumbs > ul > li > img').css({ opacity: 0.4 });
	
	$('nav#thumbs > ul > li > img').first().addClass('fullOpacity');
	
	$('nav#thumbs > ul > li > img').hover(function()
		{
			$(this).animate({ opacity: 1 }, 200);
		},
		function()
		{
			$(this).animate({ opacity: 0.4 }, 200);
		}
	);
		
	$('section.imageShower').hide();
	
	$('section.imageShower').first().show().addClass('fullOpacity');
	
	$('aside.imageDesc').hide();
	
	$('aside.imageDesc').first().show().addClass('fullOpacity');
		
	$('nav#thumbs > ul > li > img').click(function()
		{
			if($(this).hasClass('fullOpacity'))
			{
				$('nav#thumbs > ul > li > img').removeClass('fullOpacity');
				$(this).addClass('fullOpacity');
			}
			else
			{
				$('nav#thumbs > ul > li > img').removeClass('fullOpacity');
				$(this).addClass('fullOpacity');
				
				var title = $(this).attr('title');
				
				$('section.fullOpacity').fadeOut('slow').removeClass('fullOpacity');
				$('section[title="' + title + '"]').delay(500).fadeIn('slow').addClass('fullOpacity');
				
				$('aside.fullOpacity').fadeOut('slow').removeClass('fullOpacity');
				$('aside[title="' + title + '"]').delay(200).fadeIn('slow').addClass('fullOpacity');
			}
		}
	);
	
	$('.opacity_hover').css({opacity: 0.5});
	
	$('.opacity_hover').hover(function()
		{
			$(this).animate({opacity:1}, 200)
		},function()
		{
			$(this).animate({opacity:0.5}, 200)
		}
	);
	
});