$(function(){
	
	//Navigation animation initiation (sounds so cool!)
	slide("#nav", 25, 15, 150, .8);
	
	var title = document.title;
	
	// Hides all center-content items- for accessibility
	$("#main > div.post, #centercontainer > div, #hire-form, #contact-form").hide();
	
	// Enables #URLS to act like real URLS and show appropriate content
	var hash = window.location.hash.substr(1);
	
	var href = $('#nav li a').each(function(){  
		var href = $(this).attr('href').substr(1);  
		if(hash==href){
			var id = "#" + href;
			
			$('#main > div.post').animate(
				{ opacity: "hide" },
				"normal",
				function(){
					$("#p-"+href).animate(
						{ opacity: "show" },
						"slow"
					);
				}					  
			);

			hideContent();
			showContent(id);
			
			//Removes Active State from Home nav item and adds it to new nav item
			$("#nav > li").removeClass("active");
			$(this).parent().addClass("active");
			
			// Changes Title to reflect current content
			
			var capHash = hash.substr(0,1).toUpperCase()+hash.substr(1);
	
			if(hash&&hash!="home"){
				var newTitle = title+' - '+capHash;
				document.title = newTitle;
			}

		}
		if(hash==""){
			$('#p-home').animate({ opacity: "show" },"slow");
		}
	});

	// Mojo from clicking nav items- hiding other content, showing new, etc.
	$("#nav li a").click(function(){
	
		var id = $(this).attr("href");
		var name = id.replace("#", "");
		
		if(id == "#home"){			
			hideContent();
			$('#main > div.post').animate({ opacity: "hide" },
				"normal", function(){$('#p-home').animate({ opacity: "show" },
				"slow");}					  
			);
		}
		
		if($(id).is(':hidden')){
		
			if($("#p-"+name).is(':hidden')){
				$('#main > div.post:not(#p-'+name+')').hide(
					function(){$("#p-"+name).fadeIn("slow")}					  
				);
			}
		
			if($('#centercontainer > div').is(':visible')){				
				hideContent();
			}
			
			showContent(id);
			
		}
		
		//Removes Active state from old nav item and adds it to new				
		$('#nav > li').removeClass("active");
		$(this).parent().addClass("active");
		
		var capName = name.substr(0,1).toUpperCase()+name.substr(1);
		
		// Changes Title to reflect current content
		if(document.title!=title){
			document.title=title;
		}
		if(name!="home"){
			var newTitle = title+' - '+capName;
			document.title = newTitle;
		}
		
		slide("#nav", 25, 15, 150, .8);
		
		
	});
	
	$("a.p-right").hover(
		function(){$(".arrow").css({"text-decoration" : "underline"});},
		function(){$(".arrow").css({"text-decoration" : "none"});}
	);
	
	$("#contact-submit").click(function(){					   				   
		$(".error, .contact-error").hide();
		$('#contact-name, #contact-email, #contact-subject, #contact-message').css({"border" : $(this).css("border")});
		
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		
		var nameVal = $("#contact-name").val();
		if(nameVal == '') {
			$('#contact-name').css({border : "2px solid #ff0000"}).select();
			$('.contact-error').show();
			$("#contact-form ul").append('<li class="error">You forgot to enter your name.</li>');
			hasError = true;
		}
		
		var emailVal = $("#contact-email").val();
		if(emailVal == '') {
			$('#contact-email').css({border : "2px solid #ff0000"}).select();
			$('.contact-error').show();
			$("#contact-form ul").append('<li class="error">You forgot to enter the email address to send from.</li>');
			hasError = true;
		} else if(!emailReg.test(emailVal)) {
			$('#contact-email').css({border : "2px solid #ff0000"}).select();
			$('.contact-error').show();
			$("#contact-form ul").append('<li class="error">Enter a valid email address to send from.</li>');
			hasError = true;
		}
		
		var subjectVal = $("#contact-subject").val();
		if(subjectVal == '') {
			$('#contact-subject').css({border : "2px solid #ff0000"}).select();
			$('.contact-error').show();
			$("#contact-form ul").append('<li class="error">You forgot to enter the subject.</li>');
			hasError = true;
		}
				
		var messageVal = $("#contact-message").val();
		if(messageVal == '') {
			$('#contact-message').css({border : "2px solid #ff0000"}).select();
			$('.contact-error').show();
			$("#contact-form ul").append('<li class="error">You forgot to enter the message.</li>');
			hasError = true;
		}		
		
		if(hasError == false) {
			$(this).hide();
			$("#contact-form .buttonHolder").append('<img src="/images/loading.gif" alt="Loading" id="loading" />');
			
			$.post("./bin/contact-process.php",
   				{ contactemail: emailVal, contactname: nameVal, contactsubject: subjectVal, contactmessage: messageVal },
   					function(data){
						$("#contact-form form").fadeOut("slow", function() {				   
							
							$("#contact-form").html('<h3>Success</h3><p>Your email was sent. We try to answer all emails within 48 hours of recieving them.</p>');											
						});
   					}
				 );
		}
		
		return false;
	});
	
	$("#hireus > a, #contactus > a").click(function(){
		
		var toShow = $(this).attr("href");
		
		$("#contact-s-container").fadeOut(
			"slow",
			function(){ $(toShow).fadeIn("slow");}
		);
		
		return false;
	});
	
	//Hire Form : Hides Other stages
	$("#hire-s2, #hire-s3, #hire-s4, #hire-nav-4").hide();
	$("#hire-nav-1").show();
	
	//Hover for hints

	
	//Hire Form : Stage Transitions
	$("#hire-form input[type='button']").click(function(){
		//isolates the number in the id, which is "hire-goto-sx" - Will be ID# of NEXT fieldset
		var id = $(this).attr("id").substr(11);
		//Subtract 1 to get ID of THIS fieldset
		var nextID = id--;		
		
		$(".error").hide();
		$('input:not(.buttonHolder input)').css({"border" : "1px solid #777"});
		$('input').hover(
			function(){$(this).css({"border" : "1px solid #000"});},
			function(){$(this).css({"border" : "1px solid #777"});}
		);
		
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				
		var nameVal = $("#name").val();
		if(($("#name").is(':visible')) && (nameVal == '')) {
			$("#name").siblings('.formHint').append('<span class="error"><br />You forgot to enter your name.</span>');
			$("#name").css({"border" : "2px solid #ff0000"}).select();
			hasError = true;
		}
		
		var emailVal = $("#email").val();
		if(($("#email").is(':visible')) && (emailVal == '')) {
			$("#email").siblings('.formHint').append('<span class="error"><br />You forgot to enter the email address.</span>');
			$("#email").css({"border" : "2px solid #ff0000"}).select();
			hasError = true;
		} else if(($("#email").is(':visible')) && (!emailReg.test(emailVal))) {	
			$("#email").siblings('.formHint').append('<span class="error"><br />Enter a valid email address.</span>');
			$("#email").css({"border" : "2px solid #ff0000"}).select();
			hasError = true;
		}
		
		var timelineVal = $("#timeline").val();
		if(($("#timeline").is(':visible')) && (timelineVal == '')) {
			$("#timeline").siblings('.formHint').append('<span class="error"><br />You forgot to enter your timeline.</span>');
			$("#timeline").css({"border" : "2px solid #ff0000"}).select();
			hasError = true;
		}
		
		var pagesVal = $("#pages").val();
		if(($("#pages").is(':visible')) && (pagesVal == '')) {
			$("#pages").siblings('.formHint').append('<span class="error"><br />You forgot to enter your expected pages.</span>');
			$("#pages").css({"border" : "2px solid #ff0000"}).select();
			hasError = true;
		}
		
		var budgetVal = $("#budget").val();
		if(($("#budget").is(':visible')) && (budgetVal == '')) {
			$("#budget").siblings('.formHint').append('<span class="error"><br />You forgot to enter your expected budget.</span>');
			$("#budget").css({"border" : "2px solid #ff0000"}).select();
			hasError = true;
		}
		
		if(hasError == false) {
			
			//Create's review Items for Review Page
			if(id=="3"){
			
				$("#hire-form fieldset:not(#hire-s4)").each(function(){
					var number = $(this).attr("id").substr(6)
					
					$("#hire-summary").append("<dl id='hire-summary-s"+number+"'>");
					
					$("#hire-s"+number+" input:not(:button), #hire-s"+number+" textarea").each(
						function(){
							$("#hire-summary").append("<dt>"+$(this).attr("id")+"</dt>");
							if ($(this).is(':checkbox') && $(this).is(':not(:checked)')){
								$("#hire-summary").append("<dd>---</dd>");
							} else {
								$("#hire-summary").append("<dd>"+$(this).val()+"</dd>");	
							}
							if($(this).val()==""){
								$("#hire-summary").append("<dd>---</dd>");	
							}
						}
					);
					
					$("#hire-summary").append("</dl>");
				});

			}
			
			//Changes to Correct State with fade
			$("#hire-s"+id).fadeOut(
				"slow",
				function(){ $("#hire-s"+nextID).fadeIn("slow");}
			);
			$("#hire-nav-"+id).fadeOut(
				"slow",
				function(){ $("#hire-nav-"+nextID).fadeIn("slow");}
			);

		}

	});
	
	//Hire Form : Submit Function
	$("#hire-submit").click(function(){	

		$(this).hide();
		$("#hire-form .buttonHolder").append('<img src="/images/loading.gif" alt="Loading" id="loading" />');
		var str = $("#hire-form form").serialize();
		
		$.ajax({
		   type: "POST",
		   url: "./bin/hire-process.php",
		   data: str,
		   success: function(data){
					$("#hire-form form").slideUp("normal", function() {				   
						
						$("#hire-form").html('<h3>Success</h3><p>Your email was sent.</p>');											
					});
				}
		});
		
		return false;
	});
	
	// Hire Nav: Link Mojo
	$("ul.hirenav li a").click(function(){
		var number = $(this).attr("href").substr(7);
		
		$("#hire-form fieldset:visible").fadeOut(
			"slow",
			function(){ $("#hire-s"+number).fadeIn("slow");}
		);
		$(".hirenav:visible").fadeOut(
			"slow",
			function(){ $("#hire-nav-"+number).fadeIn("slow");}
		);
		
		return false;
	});
	
	// Portfolio
	$("#portfolio-box > div:not(#portfolio-all), #portfolio-box > h3:not(.all), ul.portfolio-items > li").hide();
	
	$("#portfolio-all li a").hover(
		function(){$(this).children("img").addClass("blackborder");},
		function(){$(this).children("img").removeClass("blackborder");}
	);
	
	$('#portfolio-nav a').click(function() {
		$('#portfolio-nav .current').removeClass('current');
		$(this).addClass('current');
		
		var class = $(this).attr("href").substr(11);
		
		if(!$('#portfolio-all').is(':visible')){				
			$('#portfolio-box > div, #portfolio-box > div > ul.portfolio-items li').fadeOut(
				"slow",
				function(){
					$('#portfolio-all').fadeIn("slow");
				}
			);
		}
				
		if(class == 'all') {
			$('#portfolio-box h3').hide().addClass('hidden');
			$('#portfolio-all > ul > li.hidden, h3.all').fadeIn('slow').removeClass('hidden');
		} else {
			$('#portfolio-all > ul > li').each(function() {
				if(!$(this).hasClass(class)) {
					$(this).hide().addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
			$('#portfolio-box h3').each(function() {
				if(!$(this).hasClass(class)) {
					$(this).hide().addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
		
		return false;
	});
	
	$('#portfolio-all > ul > li > a, .portfolio-list a').click(function(){

		$('#portfolio-all, ul.portfolio-items > li').hide();
		
		var portItem = $(this).attr("href");
		
		var portStr = portItem.split("-", 2);
		var portBox = portStr[0]+"-"+portStr[1];
		
		$('#portfolio-nav .current').removeClass('current');
		$('#portfolio-nav a[href="'+portBox+'"]').addClass('current');
		
		$(portBox+", "+portItem).fadeIn("slow");
		
		$(portBox+' .portfolio-list .current').removeClass('current');
		$(portBox+' .portfolio-list a[href="'+portItem+'"]').addClass('current');
		
		$('#portfolio-box h3').each(function() {
			if(!$(this).hasClass(portStr[1])) {
				$(this).hide().addClass('hidden');
			} else {
				$(this).fadeIn('slow').removeClass('hidden');
			}
		});
		
		return false;
	});
	
});

//End document.ready


function hideContent(){
	$("#centercontainer, #centercontainer > div").hide("slow");
}

function showContent(id){
		
	$("#centercontainer").show("slow");
	$(id).show("slow");
	
}

// Navigation Animation
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
	
	// initiates the timer used for the sliding animation
	var timer = 0;
	
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}