( function($) {
	$( function() {
	
		$().ready( function() {
			// validate the comment form when it is submitted
			// validate signup form on keyup and submit
			jQuery.validator.addMethod("alphaNumericCheck", function(value, element) {
				var reg = /^[a-zA-Z0-9]+$/;
				return this.optional(element) || reg.test(value);
			}, " the format is not valid");
			
			jQuery.validator.addMethod("nameCheck", function(value, element) {
				var reg = /^[a-zA-Z. '-]+$/;
				return this.optional(element) || reg.test(value);
			}, " the format is not valid");
			
			jQuery.validator.addMethod("phoneCallMeCheck", function(value, element) {
				var flag = false;
				var reg = /^\d{3}-\d{3}-\d{4}$/;
				flag = reg.test(value);
				if (flag && $("#callUserAjax #phoneExt").val() != "") {
					reg = /^\d+$/;
					flag = reg.test($("#callUserAjax #phoneExt").val());
				}
				return this.optional(element) || flag;
			}, " the format is not valid");
			
			// avoid submitting from form directly with incorrect parameters
			$("#callUserAjax").submit(function() {
				return false;
			});
			var validator = $("#callUserAjax").validate( {
				errorClass: "red",
				onfocusin: function(element) {
					this.lastActive = element;
				},
				onfocusout: function(element) {
				},
				onkeyup: function(element) {
				},
				onclick: function(element) {
					//this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass );
					// this.errorsFor(element).hide();
				},
				highlight: function(element, errorClass) {
					$("#callUserAjax").find("label[for=" + element.id + "]").css("color", "#F00");
					$("#callUserAjax").find("label[for=" + element.id + "]").css("display", "block");
					
					/* set bg yellow */
					$("#callUserAjax table").addClass("borderSpacing");
					$("#callUserAjax").find("label[for=" + element.id + "]").parent().css( {
						background: "#FEF7D0"
					});
				},
				unhighlight: function(element, errorClass) {
					$("#callUserAjax").find("label[for=" + element.id + "]").css("color", "#746C61");
					$("#callUserAjax").find("label[for=" + element.id + "]").css("display", "block");
					
					/* reset bg yellow */
					$("#callUserAjax").find("label[for=" + element.id + "]").parent().css( {
						background: "none"
					});
				},
				check: function(element) {
					$("#callUserAjax").find("label[for=" + element.id + "]").css("display", "block");
				},
				rules: {
					"firstName": {
						required: true,
						maxlength: 24,
						nameCheck: true
					},
					"lastName": {
						required: true,
						maxlength: 24,
						nameCheck: true
					},
					"phone": {
						required: true,
						phoneCallMeCheck: true,
						rangelength: [12, 12]
					}
				},
				messages: {
					"firstName": {
						required: "Please fill in First Name.",
						maxlength: "Please enter valid First Name using letters only.",
						nameCheck: "Please enter valid First Name using letters only."
					},
					"lastName": {
						required: "Please fill in Last Name.",
						maxlength: "Please enter valid Last Name using letters only.",
						nameCheck: "Please enter valid Last Name using letters only."
					},
					"phone": {
						required: "Please fill in Phone Number.",
						phoneCallMeCheck: "Please enter valid Phone Number using numbers only.",
						rangelength: "Please enter valid Phone Number using numbers only."
					}
				}
			});
			
			$("#callUserAjax #phoneOne").keyup( function() {
				if ($("#callUserAjax #phoneOne").val().length == 3)
					$("#callUserAjax #phoneSecond").focus();
			});
			
			$("#callUserAjax #phoneSecond").keyup( function() {
				if ($("#callUserAjax #phoneSecond").val().length == 3)
					$("#callUserAjax #phoneThird").focus();
			});
			
			$("#callUserAjax #phoneThird").keyup( function() {
				if ($("#callUserAjax #phoneThird").val().length == 4)
					$("#callUserAjax #phoneExt").focus();
			});

			$("#callUserAjax #callBtn").click( function(e) {
				e.preventDefault();
				$("#callUserAjax #phone").attr("value", "");
				if ($("#callUserAjax #phoneOne").val() != "" || $("#callUserAjax #phoneSecond") != "" || $("#callUserAjax #phoneThird").val() != "") {
					$("#callUserAjax #phone").attr("value", $("#callUserAjax #phoneOne").val() + "-" + $("#callUserAjax #phoneSecond").val() + "-" + $("#callUserAjax #phoneThird").val());
				}
				if (validator.form()) {
					$(this).userCall();
					$("#callUserAjax #firstName").attr("value", "");
					$("#callUserAjax #lastName").attr("value", "");
				}
			});

			// for enter keyboard submit
			$("#callUserAjax :input").each( function() {
				$(this).keypress( function(e) {
					var key = window.event ? e.keyCode : e.which;
					if (key.toString() == "13") {
						$("#callUserAjax #callBtn").click();
					}
				});
			});

			$("#callThanks #goBackBtn").click( function(e) {
				e.preventDefault();
				$("#callThanks").css("display", "none");
				$("#call").css("display", "block");
				$(this).userCancel();
			});

		});
	});

	$.fn.userCall = function() {
		var phoneVal = $("#callUserAjax #phone").val();
		if ($("#callUserAjax #phoneExt").val() != "") {
			phoneVal += " ext. " + $("#callUserAjax #phoneExt").val();
		}
		var options = {
			success: function(result) {
				if (result.success == false) {
					if (result.isCall == false) {
						$("#call").css("display", "none");
						$("#serviceDisable").css("display", "none");
						$("#callUnavailable").css("display", "block");
					} else {
						$("#callUserAjax #message").html("<label class='error'>" + result.message + "</label>");
					}
					return;
				} else {
					if (result.serviceDisable) {
						$("#call").css("display", "none");
						$("#callUnavailable").css("display", "none");
						$("#serviceDisable").css("display", "block");
					} else {
						$("#call").css("display", "none");
						$("#callThanks").css("display", "block");
						$("#callThanks #callMeNowThanksPhone").html(phoneVal);
					}
				}
			},
			error: function(xhr, status) {
				if (xhr.status > 200 && xhr.status <= 500) {
					alert("error communication.");
				}
			},
			complete: function(xhr, status) {
			},
			dataType: "json"
		};

		$("#callUserAjax").ajaxSubmit(options);
	}

	$.fn.userCancel = function() {
		var options = {
			success: function(result) {
			},
			error: function(xhr, status) {
			},
			complete: function(xhr, status) {
			},
			dataType: "json"
		};

		$("#cancelUserAjax").ajaxSubmit(options);
	}

})(jQuery);