$(document).ready(function() {

	// about me
	$('li.aboutme').click( function()
	{
		if ($('div#aboutme').css("display") != "none")
		{
			// Window is nog open! Dus moet ff checken of contact form is beeld is
			if ($('div.contact').css("display") != "none")
			{
				// Hij is in beeld! Schuiven die handel
				$('div.contact').fadeOut(100, function()
				{
					$('div.aboutme').fadeIn();
				});
			}else{
				$('div#aboutme').slideToggle(500);
			}
			
		}else{
			
			$('div.contact').hide();
			$('div.aboutme').show();

			$('div#aboutme').slideToggle(500, function ()
			{
				$('div.contact').hide();
			});	
		}
	})
	
	// contact
	$('li.contact').click( function()
	{
		if ($('div#aboutme').css("display") != "none")
		{
			// Window is nog open! Dus moet ff checken of contact form is beeld is
			if ($('div.aboutme').css("display") != "none")
			{
				// Hij is in beeld! Schuiven die handel
				$('div.aboutme').fadeOut(100, function()
				{
					$('div.contact').fadeIn();
				});
			}else{
				$('div#aboutme').slideToggle(500);
			}
			
		}else{
			
			$('div.aboutme').hide();
			$('div.contact').show();

			$('div#aboutme').slideToggle(500, function ()
			{
				$('div.aboutme').hide();
			});	
		}
	})
	
	
	$('li.work').mouseenter(handlerIn).mouseleave(handlerOut)
	$('ul#work').mouseleave(handlerBigOut);
	
	function handlerIn()
	{
		$(this).fadeTo(90, 1);
		$(this).find('h2').fadeTo(90, 1)
		$('li.work').not(this).fadeTo(90, 0.3);
		$('div#tags').fadeTo(90, 0.3);
	}
	
	function handlerOut()
	{
		$(this).find('h2').fadeTo(90, 0);
	}
	
	function handlerBigOut()
	{
		$('li.work').not(this).fadeTo(90, 1);
		$('div#tags').fadeTo(90, 1);
	}
	
	$('span#back').mouseenter(spanBackIn).mouseleave(spanBackOut);
	
	function spanBackIn()
	{
		$('span#back').animate(
			{
				width: '+=20',
			}, 50)
	}
	
	function spanBackOut()
	{
		$('span#back').animate(
			{
				width: '-=20',
			}, 50)
	}
	
	
});