// JavaScript Document

$(document).ready(function ()
	{
		$('.navButton').bind('click', sectionOpen);
		$('.infoButton').bind('click', infoOpen);
		var infoArray= ['#aboutKatSection', '#myClientsSection', '#skillsSection'];
		var len = infoArray.length;
		infoSort("#aboutKatSection");
	
		function sectionOpen()
		{
			var targetMask = $("#"+$(this).attr('id')+"Content").parent();
			var targetHeight = $("#"+$(this).attr('id')+"Content").height() + 20;
			targetMask.animate({'height':targetHeight},505);
			$(this).css({'color':'#780000'});
			
			$(this).unbind('click', sectionOpen);
			$(this).bind('click', sectionClose);
		}
	
		function sectionClose()
		{
			var targetMask = $("#"+$(this).attr('id')+"Content").parent();
			targetMask.animate({'height':1},100);
			$(this).css({'color':'#000'});

			$(this).unbind('click', sectionClose);
			$(this).bind('click', sectionOpen);
		}
		
		function infoOpen()
		{
			var targetSection = '#' + $(this).attr('id')+ 'Section';
			var targetHeight = $(targetSection).height() + $('#aboutButtons').height();
			infoSort(targetSection);
			$("#aboutMask").height(targetHeight + 10);
		}
		
		function infoSort(targetSection)
		{
			
			for (var i = 0; i < len; i++)
			{
				var buttonName = infoArray[i].substring(0, infoArray[i].length -7);
				if (targetSection != infoArray[i])
				{
					$(infoArray[i]).fadeOut(50);
					$(buttonName).css({'color':'#000'});
				}
				else
				{
					$(infoArray[i]).fadeIn(60);
					$(buttonName).css({'color':'#780000'});
				}
			}
		}
		
		function infoClose()
		{
			
			
		}
	}
);