/* -------------------------------------------------------------------
Title: Portfolio
Author: Justin Herrera
--------------------------------------------------------------------*/
//add css if js is enabled
//document.write('<link rel="stylesheet" href="css/js_enabled.css" type="text/css" media="screen" />');
document.write('<style type="text/css">img{display:none;}img[id^=first]{display:block;} * html img{display:block;}</style>');
$(document).ready(function(){
	//Valid Exteral Links
	$("a[rel=external]").click(function(){
		window.open(this.href);
		return false;
	});

	//Append expand/close and not human, meaning JS is enabled
	$("#work div img").nextAll("img").hide();	
	$(".prevnext").append("<a class=\"prevbtn\" href=\"#\">Previous image</a> &#124; <a class=\"nextbtn\" href=\"#\">Next image</a>");
	
	//CSS Rules-meaning js is enabled
	$("#work,#about,#contact").css("margin-bottom","0");
	$("#work,#about,#contact").css("border-bottom","none");
	$("p.visible:not(p.visible:first)").hide();
	//Remove anchors
	$('a.work').attr('href',"#");
	$('a.about').attr('href',"#");
	$('a.contact').attr('href',"#");
	
	//Make the main navigation work and fade in
	$(".work").addClass("active");
	$("#about").hide();
	$("#contact").hide();
	$(".work").click(function(){
		$(".about").removeClass("active");
		$(".contact").removeClass("active");
		$("#about").hide();	
		$("#contact").hide();
		$(".work").addClass("active");
		$("#work").show();
		return false;
	});
	$(".about").click(function(){
		$(".work").removeClass("active");
		$(".contact").removeClass("active");
		$("#work").hide();					   	
		$("#contact").hide();	
		$(".about").addClass("active");
		$("#about").show();
		return false;
	});
	$(".contact").click(function(){
		$(".about").removeClass("active");
		$(".work").removeClass("active");
		$("#work").hide();					   	
		$("#about").hide();	
		$(".contact").addClass("active");
		$("#contact").show();
		return false;
	});
	
	//Make images switch
	//Next Previous btns
	$(".nextbtn").click(function(){
		var target = $(this).parent().siblings("img:visible").attr('class');
		target = parseInt(target);
		var newtarget = target+1;
		var theLastId = $(this).parent().siblings('img[class=' + target  + ']').attr('id');
		var lastIdArray = theLastId.split('_');
		if(lastIdArray[0] == 'last') {
			$(this).parent().siblings("img").hide();
			$(this).parent().siblings('img[class=1]').animate({opacity: "show"}, 200);
		}else {
			$(this).parent().siblings("img").hide();
			$(this).parent().siblings('img[class=' + newtarget  + ']').animate({opacity: "show"}, 200);
		
		}
		return false;
	});
	$(".prevbtn").click(function(){
		var target = $(this).parent().siblings("img:visible").attr('class');
		target = parseInt(target);
		var newtarget = target-1;
		var theFirstId = $(this).parent().siblings('img[class=' + target  + ']').attr('id');
		var firstIdArray = theFirstId.split('_');
		if(firstIdArray[0] == 'first') {
			$(this).parent().siblings("img").hide();
			$(this).parent().siblings('img[id^=last]').animate({opacity: "show"}, 200);
		}else {
			$(this).parent().siblings("img").hide();
			$(this).parent().siblings('img[class=' + newtarget  + ']').animate({opacity: "show"}, 200);		
		}
		return false;
	});
	
	//Erase default, but not what user inputs
	var name=0;
	var email=0;
	var message = 0;
	var human2 = 0;
	//Name
	$("[name=name]").focus(function () {
         if(name==0) {
		 	$(this).val("");
			name=1;
		 }
    });
	$("[name=name]").blur(function () {
		if($(this).val() == "") {
			$(this).val("Your name...")
			name=0;
		}else {
			$(this).removeClass("error");		
		}
    });
	//email
	$("[name=email]").focus(function () {
         if(email==0) {
		 	$(this).val("");
			email=1;
		 }
    });
	$("[name=email]").blur(function () {
		if($(this).val() == "") {
			$(this).val("Your email...")
			email=0;
		}else {
			$(this).removeClass("error");	
		}
    });
	//message
	$("[name=message]").focus(function () {
         if(message==0) {
		 	$(this).val("");
			message=1;
		 }
    });
	$("[name=message]").blur(function () {
		if($(this).val() == "") {
			$(this).val("A message...")
			message = 0;
		}else {
			$(this).removeClass("error");	;	
		}
    });
	/*human?
	$("[name=human]").focus(function () {
         if(human2==0) {
		 	$(this).val("");
			human2=1;
		 }
    });
	$("[name=human]").blur(function () {
		if($(this).val() == "") {
			$(this).val("My home planet is?")
			human2=0;
		}else {
			$(this).removeClass("error");	
		}
    });*/
	
	//Form
	$("form").submit(function() {
		//Are all required fields filled?
		$("#error,#email,#human").text(" ");
		var send1 = 0;
		var send2 = 0;
		var send3 = 0;
		var send4 = 0;
		var send5 = 0;
		var send6 = 0;
		var arr = new Array($("#contact_form [name=name]").val(),$("#contact_form [name=thing]").val(),$("#contact_form [name=message]").val()); //,$("#contact_form [name=human]").val()
		//Check the email!
		var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
		if(!re.test(arr[1])) {
			$("#thing").css("margin-top","-8px");
			$("[name=thing]").addClass("error");
			$("#thing").text("Please insert a valid email.");
			send1 = 1;
		}else {
			send1 = 0;	
		}
		//Check to see if they left defaults as values
		if(arr[0] == "Your name...") {
			$("#error").text("Please fill out all fields.");
			$("#contact_form [name=name]").addClass("error");
			send2=1;
		}else {
			send2=0;	
		}
		if(arr[1] == "Your email...") {
			$("[name=thing]").addClass("error");
			$("#error").text("Please fill out all fields.");
			send3=1;
		}else {
			send3=0;	
		}
		if(arr[2] == "A message...") {
			$("[name=message]").addClass("error");
			$("#error").text("Please fill out all fields.");
			send4=1;
		}else {
			send4=0;	
		}
		/*Check the human question
		if(arr[3].toLowerCase() != "earth") {
			$("#human").css("margin-top","-8px");
			$("#human").text("I do not allow non-humans to email me at this time.");
			$("[name=human]").addClass("error");	
			send5=1;	
		}else {
			$("#human").css("margin-top","0px");
			send5=0;
		}*/
		//All stages of validation are clear, send the email
		if(send1==0 && send2==0 && send3==0 && send4==0 && send5==0 ) {//&& send6 == 0
			var data = $("#contact_form").serialize();
			$("#contact_form").hide();
			$("#error").append("Sending...");
			if($("[name=email]").val() == '' || $("[name=human]").val() == '' ){
				$.ajax({
					  type: "POST",
					  url: "send_email.php",
					  data: data,
					  success: function(data){
							 $("#error").text("Thank you for your email. I will respond as quick as I can.");
					  }
				});
			}else{
				$("#error").text("Message sent. Thank you, I will get back to you shortly.");	
			}
		}
		return false;
    });
});