//*********************************************
// CUSTOM SETTINGS
//	please edit the section below that's
//	 	rule: {}
//		message: {}
//*********************************************
$(function() {
		var loader = jQuery('<div id="loader" title="this is a title" style="text-align:center;">connecting to server ... <img src="/images/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_restaurant_name: {
				required: true
			},
			frm_Reservation_Month: {
				required: true
			},
			frm_Reservation_Day: {
				required: true
			},
			frm_Reservation_Year: {
				required: true
			},
			frm_Reservation_Time: {
				required: true
			},
			frm_email: {
				required: true,
				email: true,
				maxlength: 50
			},
			frm_Phone: {
				required: true,
				minlength: 10,
				maxlength: 16
			},
			frm_Contact_Name: {
				required: true
			}
		},
		messages: {
			frm_restaurant_name: {
				required: "Please choose Restaurant Name."
			},
			frm_Reservation_Month: {
				required: "Please select Reservation Month."
			},
			frm_Reservation_Day: {
				required: "Please select Reservation Day."
			},
			frm_Reservation_Year: {
				required: "Please select Reservation Year."
			},
			frm_Reservation_Time: {
				required: "Please select Reservation Time."
			},
			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_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_Contact_Name: {
				required: "Please enter contact person's name."
			}
		}
	});

		
});

// 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").dialog("close");
		$("#frmForm").resetForm();
		pageChange4Group(0);
	} else {
		$("div#loader").html(responseText);
	}
//    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
//        '\n\nThe output div should have already been updated with the responseText.'); 
}