//this is usually the best place to attach all other event handlers and run other jQuery code
//The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.
$().ready( function() {
	$.ajax({
		//The type of request to make ("POST" or "GET"), default is "GET". Note:  Other HTTP request methods, 
		//such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
	   type: "POST",
	   //A string containing the URL to which the request is sent.
	   url: "servlet/CateringOptionsServlet",
	 //Data to be sent to the server
	   data: 'operation=LOADCATERINGOPTIONS',
	   //The type of data that you're expecting back from the server
	   dataType: 'xml',
	   //Set a local timeout (in milliseconds) for the request.
	   timeout: 1000,
	   //save some data to the server and notify the user once it's complete.
	 //success is called if the request succeeds.
	   success: function(xml){
			$(xml).find('Menu').each(function(){
				var catering_text = "";
				var isOddRow = false;
		        $(this).find('Catering').each(function(){
		        	var count = 1;
		        	//get the data from servlet and it display in table 
		        	var style = "font:bold 1.7em Verdana, Arial, Helvetica, sans-serif;font-variant:small-caps;color:white;font-weight:bold;";
		        	catering_text = catering_text+'<thead valign="top"><tr>';
		        	catering_text = catering_text+'<th style=\"'+style+'\" scope="col">&nbsp;</th>';
		        	catering_text = catering_text+'<th style=\"'+style+'\" scope="col">'+$(this).find('OptionName').text()+'</th>';
		        	catering_text = catering_text+'<th style=\"'+style+'\" scope="col">($'+$(this).find('OptionPrice').text()+')</th>';
		        	catering_text = catering_text+'<th style=\"'+style+'\" scope="col">Min Qty:'+$(this).find('OptionMinQuantity').text()+'</th>';
		        	catering_text = catering_text+'</tr></thead><tbody>';
		        	$(this).find('OptionItems').each(function(){
			        	var oddRow = "";
				        if(isOddRow){
				        	oddRow = "class=\"odd\"";
				        	isOddRow = false;
				        }else{
				        	isOddRow = true;
				        }

				        catering_text = catering_text+'<tr '+oddRow+'>';
				        catering_text = catering_text+'<td width=\"20\" >'+ count++ +'.</td>';
				        catering_text = catering_text+'<td width=\"300\" colspan=\"3\"><div><b>'+$(this).find('OptionItemName').text()+'</b></div><div>'+$(this).find('OptionItemDetails').text()+'</div></td></tr></tbody>';
			        });
		        });

		        if("" == catering_text){
		        	catering_text = catering_text+'<thead><tr><td width=\"500\">Our Catering Options For You</td></tr></thead><tbody><tr><td width=\"500\" align=\"center\" colspan=\"4\"><b>Your Catering Options List is Empty</b></td></tr></tbody>';
			    }
//add html syntax to html function
		        $('#Catering_Item_Table').html(catering_text);
		    });
	   }
	});
});