// File: ptacr.js

// Start function when DOM has completely loaded 
$(document).ready(function(){ 
	
	// Open the xml file
	$.get("ldacr2011.xml",{},function(xml){
      
  	
		// Build an HTML string
		myHTMLOutput = '';
	 	myHTMLOutput += '<table class="square1" cellspacing="0">';
		myHTMLOutput += '<tr><td class="title" colspan="3">Portrait 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) {
			sizeImphldacr = $(this).find("imphldacr").text();
			sizeImpvldacr = $(this).find("impvldacr").text();
			sizeMetrichldacr = $(this).find("metrichldacr").text();
			sizeMetricvldacr = $(this).find("metricvldacr").text();
			sizePriceldacr = $(this).find("priceldacr").text();
			sizeX = ' x ' 
			
			// Build row HTML data and store in string
			mydata = BuildSizeHTML(sizeImpvldacr,sizeX,sizeImphldacr,sizeMetricvldacr,sizeMetrichldacr,sizePriceldacr); 
			myHTMLOutput = myHTMLOutput + mydata;
		});
		myHTMLOutput += '</table>';
		
		// Update the DIV called Content Area with the HTML string
		$(".ptacr").append(myHTMLOutput);
});
});


 
 function BuildSizeHTML(sizeImpvldacr,sizeX,sizeImphldacr,sizeMetricvldacr,sizeMetrichldacr,sizePriceldacr){
	

	
	// Build HTML string and return
	output = '';
	output += '<tr>';
	output += '<td class="light">'+ sizeImpvldacr + sizeX + sizeImphldacr +'</td>';
	output += '<td class="light">'+ sizeMetricvldacr + sizeX + sizeMetrichldacr +'</td>';
	output += '<td class="light">'+ sizePriceldacr +'</td>';
	output += '</tr>';
	return output;
}