//*********************************************
// CUSTOM SETTINGS
//	please edit the section below that's
//	 	rule: {}
//		message: {}
//*********************************************
$(function() {
	$.validator.addMethod('postalcode', function(value, element) {
		return this.optional(element) || /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s*\d[A-Z]\d))$/.test(value);
	}, 'Your POSTAL CODE must be in the formart of A9A 9A9 or A9A9A9');
		   	   
		var loader = jQuery('<div id="loader" title="" style="text-align:center;height:100px;">connecting to server ... <img src="form_img/loading.gif" alt="loading..." /></div>')
//			.css({position: "relative", top: "1em", left: "25em"})
			.appendTo("body")
		$("#loader").dialog({ 
			modal: true, 
			overlay: { 
				opacity: 0.5, 
				background: "black" 
			},
			autoOpen: false,
			draggable: false,
			resizable: false,
			stack: true,
			model: true,
			height: 100
		});		
		jQuery().ajaxStart(function() {
			loader.dialog("open");
		}).ajaxStop(function() {
//			loader.dialog("close");
		}).ajaxError(function(a, b, e) {
			throw e;
		});
		
	var container = $('div.container');
	// validate the form when it is submitted
	var validator = $("#frmForm").validate({
		submitHandler: function(form) {
			jQuery(form).ajaxSubmit({
				success: showResponse
			});
		},
		errorContainer: container,
		errorLabelContainer: $("ol", container),
		wrapper: 'li',
		meta: "validate",
//*********************************************
// CUSTOM SETTINGS
// 	 	validation rules & messages
//*********************************************
		rules: {
			frm_firstname: {
				required: true,
				minlength: 2
			},
			frm_lastname: {
				required: true,
				minlength: 2
			},
			frm_address: {
				required: false,
				minlength: 5
			},
			frm_pcode: {
				required: false,
				postalcode: true,
				maxlength: 7
			},
			frm_phone: {
				required: true,
				minlength: 10,
				maxlength: 16
			},
			frm_email: {
				required: true,
				email: true,
				maxlength: 50
			},
			frm_selectDate: {
				required: true
			},
			frm_selectTime: "required",
			frm_guests: {
				required: true,
				number: true
			}
		},
		messages: {
			frm_firstname: {
				required: "Please enter your First Name.",
				minlength: "First Name must consist of at least 2 characters."
			},
			frm_lastname: {
				required: "Please enter your Last Name.",
				minlength: "Last Name must consist of at least 2 characters."
			},
			frm_address: {
				required: "Please enter your Address.",
				minlength: "Address must consist of at least 5 characters."
			},
			frm_pcode: {
				required: "Please enter your Postal Code.",
				maxlength: "Postal Code must not exit 7 characters."
			},
			frm_phone: {
				required: "Please enter your Phone Number.",
				minlength: "Phone Number must consist of at least 10 characters.",
				maxlength: "Phone Number must not exit 16 characters."
			},
			frm_email: {
				required: "Please enter your E-Mail Address.",
				email: "Please enter a valid E-Mail Address.",
				maxlength: "E-Mail Address must not exit 50 characters."
			},
			frm_selectDate: {
				required:"Please select a Date of Reservation."
			},
			frm_selectTime: "Please select a Time of Reservation.",
			frm_guests: {
				required: "Please enter Number of Guests.",
				number: "Number of Guests must be a numeric value."
			}
		}
	});


});


// post-submit callback 
function showResponse(responseText, statusText)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
 	if(responseText == '') {
		$("div#loader").html('Thank You');
		$("#frmForm").resetForm();
	} else {
		$("div#loader").html(responseText);
	}
//    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
//        '\n\nThe output div should have already been updated with the responseText.'); 
}