$(document).ready(function(){	
	//Add AJAX to form to override 
	$('#contact').submit(function() {
		if(checkEmail($("#email")) && checkMessage($("#message"))){
			var email = $("#email").val();
			var message = $("#message").val();
			$("#submit").hide();
			$(".loading").show();
			var dataString = 'email=' + email + '&message=' + message;
			$.ajax({
				type: "POST",
				url: "mail.php",
				data: dataString,
				success: function(){
					$("h4").text("Success! Send Me Another?");
					$("#close").hide();
					$(form).slideUp('slow', function(){
						$(".contact-box-open").animate({
								width: '16em'
							}, 500, function(){
								$(form).detach();
							}
						).removeClass("contact-box-open").find("h4").css({ opacity: 0.4 });
					});
					$("#email, #message").val("");
					$(".loading").hide();
					$("#submit").show();
				}
			});
		}
		return false;
	});
	
	//Attach email validation
	$("#email").focusout(function(){
		checkEmail($(this));
	});
	
	//Attach message validation
	$("#message").focusout(function(){
		checkMessage($(this));
	});
	
	$(".contact-box-open").prepend("<a id=\"close\" href=\"javascript:void(0);\"><span>Close</span></a>") //Add Close
		.removeClass("contact-box-open") //Remove the open class (since we want it collapsed
		.find("h4").css({ opacity: 0.4 });

	//Add Hover and Click listeners to the contact box
	$(".contact-box:not(.contact-box-open)").live({
		mouseenter:
		   function(){
				$(this).find("h4").css({ opacity: 1.0 });
		   },
		mouseleave:
		   function(){
				$(this).find("h4").css({ opacity: 0.4 });
		   },
		click:
			function(){
				$(this).animate({
						width: '24em'
					}, 500, function(){
						$(this).addClass("contact-box-open").append(form);
						$("#close").css({ display: 'block' });
						$(form).slideDown('slow');
						$(this).find("h4").css({ opacity: 1 }).text("Get In Touch With Me");
					}
				);
			}
	   });
	//Add click listener for close button
	$("#close").live('click', function(){
		$("#close").hide();
		$(form).slideUp('slow', function(){
			$(".contact-box-open").animate({
					width: '16em'
				}, 500, function(){
					$(form).detach();
				}
			).removeClass("contact-box-open").find("h4").css({ opacity: 0.4 });
		});
	});
	$("#submit").after("<img class='loading' src='loading.gif' />");
	$(".loading").hide();
	$("#email").after("<div class=\"error-text\">Please enter a valid email address</div>");
	$("#message").after("<div class=\"error-text\">Please enter a message</div>");
	var form = $("#contact").hide().detach(); //Remove form from Dom
});

function is_valid_email (email){
	return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email);
}

function checkEmail (field){
	if(is_valid_email($(field).val())){
		$(field).removeClass("error").next(".error-text").hide();
		return true;
	}
	else {
		$(field).addClass("error").next(".error-text").show();
		return false;
	}
}

function checkMessage(field){
	if($(field).val().length != 0){
		$(field).removeClass("error").next(".error-text").hide();
		return true;
	}
	else {
		$(field).addClass("error").next(".error-text").show();
		return false;
	}
}