// Start function when DOM has completely loaded 
$(document).ready(function(){ 

	// Open the xml file
	$.get("xml/tourdates.xml",{},function(xml){
      	
		// Build an HTML string
		myHTMLOutput = '';
	 	myHTMLOutput += '<table width="98%" cellpadding="0" cellspacing="0">';
	  	
		// Run the function for each student tag in the XML file
		$('tourdate',xml).each(function(i) {
			showDate = $(this).find("date").text();
			showVenue = $(this).find("venue").text();
			showCity = $(this).find("city").text();
						
			// Build row HTML data and store in string
			mydata = buildTable(showDate,showVenue,showCity);
			myHTMLOutput = myHTMLOutput + mydata;
		});
		myHTMLOutput += '</table>';
		
		// Update the DIV called Content Area with the HTML string
		$("#XMLContent").append(myHTMLOutput);
	});
});
 
 
 
 function buildTable(showDate,showVenue,showCity){
	// Build HTML string and return
	output = '';
	output += '<tr>';
	output += '<td><span class="tourDate">'+ showDate + '</span></td>';
	output += '<td align="right"><span class="tourCity">'+ showCity +'</span></td></tr>';
	output += '<tr><td colspan="2"><span class="tourVenue">'+ showVenue +'</span></td>';
	output += '</tr>';
	return output;
}