$(document).ready(function() {	
	
		var spinnerOpts = {
		  lines: 12, // The number of lines to draw
		  length: 7, // The length of each line
		  width: 5, // The line thickness
		  radius: 10, // The radius of the inner circle
		  color: '#004e69', // #rbg or #rrggbb
		  speed: 1, // Rounds per second
		  trail: 100, // Afterglow percentage
		  shadow: false // Whether to render a shadow
		};
			
		var options = { 
			
			beforeSubmit: validate,  // pre-submit callback 
			success: success,
			resetForm: true
			
		}; 
		
		var spinner;
		
		$("form[name=submitForm]").ajaxForm(options);
	
		var cssField = "#f7f7f7";
		var cssFieldError = "#c00";
		
		$.get("token.php",function(token) {
			$(".contactForm").append('<input type="hidden" name="ts" value="' +token + '" />');
		});
	
		
		function resetForm() {
		
			with ($("input[name=fullName]")) {
				css("background", cssField);
			}
			
			with ($("input[name=email]")) {
				css("background", cssField);
			}
			
			with ($("input[name=cellphone]")) {
				css("background", cssField);
				val("+63");
			}
			
			with ($("textarea[name=urls]")) {		
				css("background", cssField);
				val("http://");
			}
			
			with ($("input[type=file]")) {		
				css("background", cssField);
				val("");
			}
			
		}
		
		//select all the a tag with name equal to modal
		$('a[name=modal]').click(function(event) {
			
			//Cancel the link behavior
			event.preventDefault();
					
			//Get the A tag
			var id = $(this).attr('href');
		
			//Get the screen height and width
			var maskHeight = $(document).height();
			var maskWidth = $(window).width();
		
			//Set heigth and width to mask to fill up the whole screen
			$('#mask').css({'width':maskWidth,'height':maskHeight});
			
			//transition effect		
				
			$('#mask').fadeTo("slow",0.8);	
		
			//Get the window height and width
			var winH = $(document).height();
			var winW = $(window).width();
				  
			//Set the popup window to center
			
			//$(id).css('left', winW/2-$(id).width()/2);
			//$(id).css('top', 200);
			//$(id).css('top',  winH/2-$(id).height()/2);
			
			
			
			resetForm();
			
			var position = $(this).attr("title");
			$("h2#position").html("Apply: " + position);
			$("input[name=position]").val(position);
			
			$("#popup #response").hide();
			$("#popup .contactForm").show();
			
			//transition effect
			$(id).fadeIn(); 
		
		});
		
		//if close button is clicked
		$('.window .close').click(function(event) {
			//Cancel the link behavior
			event.preventDefault();
			
			$('#mask').fadeOut();
			$('.window').fadeOut();
			
		});		
		
		//if mask is clicked
		$('#mask').click(function() {
			$(this).fadeOut();
			$('.window').fadeOut();
			
		});		
		
		
		function validate(formData, jqForm, options) {
		
			var valid = true;
		
			var fullName = $("input[name=fullName]");
			
			if (!$.trim(fullName.val()).length) {
				$(fullName).css("background", cssFieldError);
				valid = false;
			} else {
				$(fullName).css("background", cssField);
			}
		
			var email = $("input[name=email]");
			if (!$.trim(email.val()).length) {
				$(email).css("background", cssFieldError);
				valid = false;
			} else {
				
				var pattern = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				if (!pattern.test($.trim(email.val()))) {
					valid = false;
					$(email).css("background", cssFieldError);
				} else {
					$(email).css("background", cssField);
				}
			}
			
			var cellphone = $("input[name=cellphone]");
			if (!$.trim(cellphone.val()).length) {
				$(cellphone).css("background", cssFieldError);
				valid = false;
			} else {
				$(cellphone).css("background", cssField);
			}
			
			var urls = $("textarea[name=urls]");
			if (!$.trim(urls.val()).length) {
				$(urls).css("background", cssFieldError);
				valid = false;
			} else {
				$(urls).css("background", cssField);
			}
			
			
			var resume = $("input[type=file]");
			if (!$.trim(resume.val()).length) {
				$(resume).css("background", cssFieldError);
				valid = false;
			} else {
				
				var ext = $.trim(resume.val()).split(".").pop().toLowerCase();
				if ($.inArray(ext, ['doc','docx','pdf']) == -1) {
					$(resume).css("background", cssFieldError);
    				valid = false;
				} else {
					$(resume).css("background", cssField);
				}
			}
			
			if (valid) {
			
				var target = document.getElementById('popup');
				spinner = new Spinner(spinnerOpts).spin(target);
			
			}
			
			return valid;	
			
		}
		
		function success(responseText, statusText, xhr, $form)  { 
	 
	 		spinner.stop();
			
			$("#popup .contactForm").hide();
			$("#popup h2").html("Thank you");
			$("#popup #response").fadeIn();
		}
		
	});