// JavaScript Document

$(document).ready(function(){

	$.get("wine.xml",{},function(xml){
			var pic = $("red1",xml).find('pic').text();
			var pdf = $("red1",xml).find('pdfLink').text();
			var description = $("red1",xml).find('description').text();
			$("#wineImage").html('<img src="images/'+ pic +'" />');
			$("#linkContainer").html('<a href="content/'+ pdf +'" id="pdfButton"><img src="images/pdf_btn.jpg" /></a>');
			$("#wineContent p").html(description);
	});
	
	// targets the a tag when clicked to gather the info from the xml doc
	$("a").click(function() {
		// this variable stores the targeted id (i.e. #red1)
		var getId = $(this).attr("id");
		//alert(getId);
		// this is the function to search the xml
		$.get("wine.xml",{},function(xml){
			// variable that stores the image text from the xml
			var pic = $(getId,xml).find('pic').text();
			// variable that stores the pdf text from the xml
			var pdf = $(getId,xml).find('pdfLink').text();
			// variable that stores the description text from the xml
			var description = $(getId,xml).find('description').text();
			// here we place the image from the variable into the div containet in the html
			$("#wineImage").html('<img src="images/'+ pic +'" />');
			// here we place the pdf link from the variable into the div containet in the html
			$("#linkContainer").html('<a href="content/'+ pdf + '" id="pdfButton"><img src="images/pdf_btn.jpg" /></a>');
			// here we place the description from the variable into the div containet in the html
			$("#wineContent p").html(description);
		});
	});
	
});