// JavaScript Document
var displayForm = false;

// Captcha
var borderColor = ""; /* border color hex or left it null if you don't want to change border color*/
var captchaDir = "/js/captcha" /* path to captcha files (if you use domain www.example.com path should present all subfolders after that, start with "/") */
var url = captchaDir + "/process.php" /* this is name of form action */
var formId = "contactUs" /* id of your form */
var items = Array("pencil", "scissors", "clock", "heart", "note"); 

jQuery(document).ready(function(){
	var options = { 
    	target: '#resultTarget', // target identifies the element(s) to update with the server response 
		clearForm: false,		 // clear all form fields after successful submit
		url: 'process.php',		 // override for form's 'action' attribute  
		success: showResponse	 // post-submit callback 
	}; 

	jQuery('#resultTarget').hide();
	jQuery("#txtZip").mask("99999");
	jQuery("#txtPhone").mask("(999) 999-9999");
	jQuery('#capcha').captcha();

	// add * to required field labels
	//$('label.required').append('&nbsp;<font color="#990000"><b>*</b></font>&nbsp;');

	// show a simple loading indicator
	var loader = jQuery('<div id="loader" style="background-color:#000000;color:#ffffff;padding:10;border: 1px solid #000;z-index: 99;">&nbsp;&nbsp;Processing...<br/><img src="/VPanel/images/loader.gif" alt="loading..." /></div>')
		.css({position: "absolute", top: "25em", left: "35em"})
		.appendTo("body")
		.hide();
	jQuery().ajaxStart(function() {
		loader.show();
	}).ajaxStop(function() {
		loader.hide();
	}).ajaxError(function(a, b, e) {
		throw e;
	});

	var v = jQuery("#contactUs").validate({
		errorClass: "error",
		onkeyup: false,
		onblur: false,
		submitHandler: function(form) {
			jQuery(form).ajaxSubmit(options);
		},
		rules: {
			txtName: {
				required: true,
				minlength: 2
			},
			txtPhone: {
				required: true,
				minlength: 10
			},
			txtEmail: {
				required: true,
				email: true
			},
			dpdAvailability: "required",
			dpdAvailable: "required",
			captcha: "required"
		},
		messages: {
			txtName: {
				required: "Please enter your name",
				minlength: "Name must consist of at least 2 characters"
			},
			txtPhone: {
				required: "Please enter your phone number",
				minlength: "Phone Number must consist of at least 10 characters"
			},
			txtEmail: {
				required: "We need your email address to contact you",
				email: "Your email address must be in the format of name@domain.com"
			},
			dpdAvailability: "Please specify your Availability",
			dpdAvailable: "Please specify your Available Time",
			captcha: "Please choose the security image "
		}
	});

}); 

// post-submit callback 
function showResponse(responseText, statusText)  { 
	if(!displayForm) {
		jQuery('#htmlForm').hide();
		jQuery('html, body').animate({scrollTop:0}, 'slow');
	}
	jQuery('#resultTarget').fadeIn('slow'); 
}