// File: sqacr.js

// Start function when DOM has completely loaded 
$(document).ready(function(){ 
	
	// Open the xml file
	$.get("sqacr2011.xml",{},function(xml){
      
  	
		// Build an HTML string
		myHTMLOutput = '';
	 	myHTMLOutput += '<table class="square1" cellspacing="0">';
		myHTMLOutput += '<tr><td class="title" colspan="3">Square Acrylic Prints</td></tr>'
	  	myHTMLOutput += '<tr><td class="hed" colspan="1">Imperial</td><td class="hed" colspan="1">Metric</td><td class="hed" colspan="1">Retail Price</td></tr>';
	  	
		// Run the function for each size tag in the XML file
		$('size',xml).each(function(i) {
			sizeImphsqacr = $(this).find("imphsqacr").text();
			sizeImpvsqacr = $(this).find("impvsqacr").text();
			sizeMetrichsqacr = $(this).find("metrichsqacr").text();
			sizeMetricvsqacr = $(this).find("metricvsqacr").text();
			sizePricesqacr = $(this).find("pricesqacr").text();
			sizeX = ' x ' 
			
			// Build row HTML data and store in string
			mydata = BuildSizeHTML(sizeImphsqacr,sizeX,sizeImpvsqacr,sizeMetrichsqacr,sizeMetricvsqacr,sizePricesqacr); 
			myHTMLOutput = myHTMLOutput + mydata;
		});
		myHTMLOutput += '</table>';
		
		// Update the DIV called Content Area with the HTML string
		$(".sqacr").append(myHTMLOutput);
});
});


 
 function BuildSizeHTML(sizeImphsqacr,sizeX,sizeImpvsqacr,sizeMetrichsqacr,sizeMetricvsqacr,sizePricesqacr){
	

	
	// Build HTML string and return
	output = '';
	output += '<tr>';
	output += '<td class="light">'+ sizeImphsqacr + sizeX + sizeImpvsqacr +'</td>';
	output += '<td class="light">'+ sizeMetrichsqacr + sizeX + sizeMetricvsqacr +'</td>';
	output += '<td class="light">'+ sizePricesqacr +'</td>';
	output += '</tr>';
	return output;
}