$(document).ready(function(){ 

	// Open the students.xml file
	$.get("public/data/dealers.xml",{},function(xml){
      	
		// Build an HTML string
		myHTMLOutput = '';
	 	myHTMLOutput += '<table id="dealer_table">';
	  	myHTMLOutput += '<thead><tr><th>Name</th><th>Address</th><th>County</th><th>Postcode</th><th>Phone</th></tr></thead>';
		myHTMLOutput += '<tbody>';
	  	
		// Run the function for each student tag in the XML file
		$('dealer',xml).each(function(i) {
			dealerName = $(this).find("name").text();
			dealerAddress = $(this).find("address").text();
			dealerCounty = $(this).find("county").text();
			dealerPostcode = $(this).find("postcode").text();
			dealerPhone = $(this).find("phone").text();
			
			// Build row HTML data and store in string
			mydata = BuildDealerHTML(dealerName, dealerAddress, dealerCounty, dealerPostcode, dealerPhone);
			myHTMLOutput = myHTMLOutput + mydata;
		});
		myHTMLOutput += '</tbody>';
		myHTMLOutput += '</table>';
				
		// Update the DIV called Content Area with the HTML string
		$("#dealer_list div.loading").remove();
		$("#dealer_list").append(myHTMLOutput);
		$("#dealer_table").tablesorter({
			widgets: ['zebra'],
			sortList: [[0,0]]
		}); 

		$("#dealer_table").trigger("update"); 
		$("#dealer_table tbody tr").hover(function(){
		  $(this).addClass('highlight');
		}, function(){
		  $(this).removeClass('highlight');
		});
		
	});
});
 
 
function BuildDealerHTML(dealerName, dealerAddress, dealerCounty, dealerPostcode, dealerPhone){
			output = '';
			output += '<tr>';
			output += '<td>'+ dealerName +'</td>';
			output += '<td>'+ dealerAddress +'</td>';
			output += '<td>'+ dealerCounty +'</td>';
			output += '<td>'+ dealerPostcode +'</td>';
			output += '<td>'+ dealerPhone +'</td>';
			output += '</tr>';
			return output;
}