( function($) {
	$( function() {
		// search form, hide it, search labels to modify, filter classes nocmx and error
		// $('#callUser').hide().find( 'p>label:not(.nocmx):not(.error)' ).each(
		// function() {
		// var $this = $(this);
		// var labelContent = $this.html();
		// var labelWidth ="200px";
		// // create block element with width of label
		// var labelSpan = $("<span>")
		// .css("display", "block")
		// .width(labelWidth)
		// .html(labelContent);
		// // change display to mozilla specific inline-box
		// $this.css("display", "-moz-inline-box")
		// // remove children
		// .empty()
		// // add span element
		// .append(labelSpan);
		// // show form again
		// }).end().show();
	});

	$( 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 reg = /^\d{3}-\d{3}-\d{4}$/;
				return this.optional(element) || reg.test(value);
			}, " 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;
					// this.settings.unhighlight &&
					// this.settings.unhighlight.call( this, element,
					// this.settings.errorClass );
					// this.errorsFor(element).hide();
				},
				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");if($.browser.msie && ($.browser.version=='6.0' || $.browser.version=='7.0')){
						$(element).parents('table').attr("cellspacing", "4");
					} 
					$("#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: "The First Name you have entered is invalid.",
						nameCheck: "The First Name you have entered is invalid."
					},
					"lastName": {
						required: "Please fill in Last Name.",
						maxlength: "The Last Name you have entered is invalid.",
						nameCheck: "The Last Name you have entered is invalid."
					},
					"phone": {
						required: "Please fill in Phone Number.",
						phoneCallMeCheck: "Please enter valid Phone Number.",
						rangelength: "Please enter valid Phone Number."
					}
				}
			});

			// this is not used?
			var validatorConnect = $("#callUserAjaxConnect").validate( {
				rules: {
					"firstName": {
						required: true,
						maxlength: 24,
						alphaNumericCheck: true
					},
					"lastName": {
						required: true,
						maxlength: 24,
						lastNameCheck: true
					},
					"phone": {
						required: true,
						phoneCheck: true,
						rangelength: [12, 12]
					}
				},
				messages: {
					"firstName": {
						required: "<label color='red'>Please fillin first name is required.</lable>",
						maxlength: "<label color='red'>First Name must enter no more than 24 characters.</lable>",
						alphaNumericCheck: "<label color='red'>First Name must be alpha or numeric.</lable>"
					},
					"lastName": {
						required: "<label color='red'>Please fill in last name is required.</lable>",
						maxlength: "<label color='red'>Last Name must enter no more than 24 characters.</lable>",
						lastNameCheck: "<label color='red'>Last Name must be alpha, numeric, or quot.</lable>"
					},
					"phone": {
						required: "<label color='red'>Please fill in phone number.</lable>",
						phoneCheck: "<label color='red'>Please enter valid phone number.</lable>",
						rangelength: "<label color='red'>Please enter valid phone number.</lable>"
					}
				}
			});
			
			$("#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 #phoneOne").click( function() {
//				$("#callUserAjax").find("label[for=phone]").css("color", "#746C61");
//				if ($("#callUserAjax label[for=phone]").length > 1)
//					$("#callUserAjax label[for=phone]:last").css("display", "none");
//			});
//
//			$("#callUserAjax #phoneTwo").click( function() {
//				$("#callUserAjax").find("label[for=phone]").css("color", "#746C61");
//				if ($("#callUserAjax label[for=phone]").length > 1)
//					$("#callUserAjax label[for=phone]:last").css("display", "none");
//			});
//
//			$("#callUserAjax #phoneThird").click( function() {
//				$("#callUserAjax").find("label[for=phone]").css("color", "#746C61");
//				if ($("#callUserAjax label[for=phone]").length > 1)
//					$("#callUserAjax label[for=phone]:last").css("display", "none");
//			});

			$("#callUserAjax #callBtn").click( function() {
				$("#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()) {
					$("#callUserAjax table").removeClass("borderSpacing");

					if($.browser.msie && ($.browser.version=='6.0' || $.browser.version=='7.0')){
						$("#callUserAjax table").attr("cellspacing", "0");
					} 
					$(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();
					}
				});
			});

			$("#cancelUserAjax #cancelBtn").click( function() {
				$(this).userCancel();
			});

			$("#cancelUserAjax #goBackBtn").click( function() {
				$("#cancelInfo").css("display", "none");
				$("#call").css("display", "block");
				$("#callConnect").css("display", "block");
			});

			$("#callUserAjaxConnect #callBtn").click( function() {
				$("#callUserAjaxConnect #phone").attr("value", "");
				if ($("#callUserAjaxConnect #phoneOne").val() != "" || $("#callUserAjaxConnect #phoneSecond") != "" || $("#callUserAjaxConnect #phoneThird").val() != "") {
					$("#callUserAjaxConnect #phone").attr("value", $("#callUserAjaxConnect #phoneOne").val() + "-" + $("#callUserAjaxConnect #phoneSecond").val() + "-" + $("#callUserAjaxConnect #phoneThird").val());
				}
				if (validatorConnect.form()) {
					$(this).userCallConnect();
					$("#callUserAjaxConnect #firstName").attr("value", "");
					$("#callUserAjaxConnect #lastName").attr("value", "");
				}
			});

			$("#cancelUserAjaxConnect #cancelBtn").click( function() {
				$(this).userCancelConnect();
			});
		});
	});

	$.fn.userCall = function() {
		var options = {
			success: function(result) {
				//var jsonArray = eval(result);
				// jsonObj = jsonArray[0];
	
				if (result.success == false) {
					$("#callUserAjax #message").html("<label class='error'>" + result.message + "</label>");
					return;
				} else {
					$("#call").css("display", "none");
					$("#cancel").css("display", "block");
					// $("#callConnect").css("display","none");
					// $("#cancelConnect").css("display","block");
				}
			},
			error: function(xhr, status) {
				if (xhr.status > 200 && xhr.status <= 500) {
					alert("error comminucation.");
				}
			},
			complete: function(xhr, status) {
				//var height = 130+$("#formPanl3").height();
				// $(window.parent.document).find("#submitPage").height(height);
			},
			dataType: "json"
		};

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

	$.fn.userCancel = function() {
		var options = {
			success: function(result) {
				//var jsonArray = eval(result);
				// jsonObj = jsonArray[0];
	
				if (result.success == false) {
					$("#cancelUserAjax #message").html("<label class='error'>" + result.message + "</label>");
					return;
				} else {
					$("#callUserAjax #phoneOne").attr("value", result.phoneOne);
					$("#callUserAjax #phoneSecond").attr("value", result.phoneSecond);
					$("#callUserAjax #phoneThird").attr("value", result.phoneThird);
					$("#callUserAjax #firstName").attr("value", result.firstName);
					$("#callUserAjax #lastName").attr("value", result.lastName);
					$("#cancel").css("display", "none");
					$("#cancelConnect").css("display", "none");
					$("#cancelInfo").css("display", "block");
				}
			},
			error: function(xhr, status) {
				alert("error comminucation.");
			},
			complete: function(xhr, status) {
				//var height = 130+$("#formPanl3").height();
				// $(window.parent.document).find("#submitPage").height(height);
			},
			dataType: "json"
		};

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

	$.fn.userCallConnect = function() {
		var options = {
			success: function(result) {
				//var jsonArray = eval(result);
				// jsonObj = jsonArray[0];
	
				if (result.success == false) {
					$("#callUserAjaxConnect #message").html("<label class='error'>" + result.message + "</label>");
					return;
				} else {
					$("#call").css("display", "none");
					$("#cancel").css("display", "block");
					$("#callConnect").css("display", "none");
					$("#cancelConnect").css("display", "block");
				}
			},
			error: function(xhr, status) {
				alert("error comminucation.");
			},
			complete: function(xhr, status) {
				//var height = 130+$("#formPanl3").height();
				// $(window.parent.document).find("#submitPage").height(height);
			},
			dataType: "json"
		};

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

	$.fn.userCancelConnect = function() {
		var options = {
			success: function(result) {
				//var jsonArray = eval(result);
				// jsonObj = jsonArray[0];
	
				if (result.success == false) {
					$("#cancelUserAjaxConnect #message").html("<label class='error'>" + result.message + "</label>");
					return;
				} else {
					$("#callUserAjaxConnect #phoneOne").attr("value", result.phoneOne);
					$("#callUserAjaxConnect #phoneSecond").attr("value", result.phoneSecond);
					$("#callUserAjaxConnect #phoneThird").attr("value", result.phoneThird);
					$("#callUserAjaxConnect #firstName").attr("value", result.firstName);
					$("#callUserAjaxConnect #lastName").attr("value", result.lastName);
					$("#call").css("display", "block");
					$("#cancel").css("display", "none");
					$("#callConnect").css("display", "block");
					$("#cancelConnect").css("display", "none");
				}
			},
			error: function(xhr, status) {
				alert("error comminucation.");
			},
			complete: function(xhr, status) {
				//var height = 130+$("#formPanl3").height();
				// $(window.parent.document).find("#submitPage").height(height);
			},
			dataType: "json"
		};

		$("#cancelUserAjaxConnect").ajaxSubmit(options);
	}
})(jQuery);