function displayProductImage(id)
{
	// Create and send the AJAX xall
	createRequest();

	var url = "/js/ajax/portfolio/getProductDetail.php?id=" + id;
	request.open("GET",url,true);
	request.onreadystatechange = updateDetail;
	request.send(null);
}

function updateDetail()
{
	if (request.readyState == 4)
	{
		var delimiter = "[::]";
		var updatedInfo = request.responseText;
		
		// alert(updatedInfo);
		
		var aUpdated = new Array();
		aUpdated = updatedInfo.split(delimiter);
		
		if (aUpdated[0] == "SUCCESS")
		{
			// alert("AM I HERE?");
			// var i = 0;
			// for (i = 0; i < aUpdated.length; i++)
				// alert(aUpdated[i]);
			
			// update the fields with the correct information
			if (aUpdated[3] != "EMPTY") 
			{
				var image = "/images/product/" + aUpdated[3];
				var imageWidth = aUpdated[4];
				var imageHeight = aUpdated[5];
				var imageEl = document.getElementById('overlay_product_actual_image');
				var imageWrapEl = document.getElementById('overlay_product_image_wrapper');
				imageEl.src = image; 
				var pTop = Math.ceil((480 - imageHeight) / 2);
				var pLeft = Math.ceil((480 - imageWidth) / 2);
				imageWrapEl.style.paddingTop = pTop + "px"
				imageWrapEl.style.paddingLeft = pLeft + "px"
				imageWrapEl.style.height = (480 - pTop) + "px"
				imageWrapEl.style.width = (480 - pLeft) + "px"
			}
			else 
			{
				var imageEl = document.getElementById('overlay_product_actual_image');
				var imageWrapEl = document.getElementById('overlay_product_image_wrapper');
				imageEl.src = "/images/portfolio/240608_temp_large450h.jpg"; 
				var pTop = Math.ceil((480 - 450) / 2);
				var pLeft = Math.ceil((480 - 300) / 2);
				imageWrapEl.style.paddingTop = pTop + "px"
				imageWrapEl.style.paddingLeft = pLeft + "px"
				imageWrapEl.style.height = (480 - pTop) + "px"
				imageWrapEl.style.width = (480 - pLeft) + "px"
			}
				 
			if (aUpdated[1] != "EMPTY") 
			{
				// check to see if there is a link.
				if (aUpdated[6] != "EMPTY")
				{
					document.getElementById('overlay_product_link').href = aUpdated[6];
					replaceText(document.getElementById('overlay_product_name'),aUpdated[1]); 
					
					//document.getElementById('overlay_product_name').style.display = "none";
					document.getElementById('overlay_product_link_wrapper').style.display = "block";
				}
				else
				{
					replaceText(document.getElementById('overlay_product_name'),aUpdated[1]); 
					
					document.getElementById('overlay_product_link').style.display = "none";
					document.getElementById('overlay_product_name').style.display = "inline";
				}
				
			}
			else {
				replaceText(document.getElementById('overlay_product_name'),""); }
			
			if (aUpdated[2] != "EMPTY") {
				replaceText(document.getElementById('overlay_product_awards'),aUpdated[2]); }
			else {
				replaceText(document.getElementById('overlay_product_awards'),""); }
			
			/*if (aUpdated[4] != "EMPTY") {
				replaceText(document.getElementById('people_detail_content_quote'),'"' + aUpdated[4]) + '"'; }
			else {
				replaceText(document.getElementById('people_detail_content_quote'),""); }*/
						
			var myWidth = 0, myHeight = 0; 
			// FULL HEIGHT
			if( window.innerHeight && window.scrollMaxY ) // Firefox
			{
				myWidth = window.innerWidth + window.scrollMaxX;
				myHeight = window.innerHeight + window.scrollMaxY;
			}
			else if( document.body.scrollHeight > document.body.offsetHeight ) // all but Explorer Mac
			{
				myWidth = document.body.scrollWidth;
				myHeight = document.body.scrollHeight;
			}
			else // works in Explorer 6 Strict, Mozilla (not FF) and Safari
			{
				myWidth = document.body.offsetWidth + document.body.offsetLeft;
				myHeight = document.body.offsetHeight + document.body.offsetTop;
			}
			// VIEWPORT HEIGHT
			if( typeof( window.innerWidth ) == 'number' ) {
				//Non-IE
				screenWidth = window.innerWidth;
				screenHeight = window.innerHeight;
			} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
				//IE 6+ in 'standards compliant mode'
				screenWidth = document.documentElement.clientWidth;
				screenHeight = document.documentElement.clientHeight;
			} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
				//IE 4 compatible
				screenWidth = document.body.clientWidth;
				screenHeight = document.body.clientHeight;
			}


			//window.alert( 'Width = ' + myWidth );
			//window.alert( 'Height = ' + myHeight ); document.body.scrollHeight + 
			// alert(document.body.scrollHeight);
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;
			var topPadding = scrollTop + ((screenHeight/2)-287);
			var leftPadding = ((screenWidth/2)-255);
			
			document.getElementById('overlay_box').style.height = myHeight + "px";
			//alert(document.getElementById('overlay_product_image').style.top + "TOP PADDING TO ADD: " + topPadding);
			document.getElementById('overlay_product_image').style.top = topPadding + "px";
			
			document.getElementById('overlay_product_image').style.left = leftPadding + "px";
			//document.getElementById('overlay_box').style.top = window.scrollY + "px";
			//document.body.scroll = "no";

			document.getElementById('overlay_box').style.display = "block";
			document.getElementById('overlay_product_image').style.display = "block";
		}
		else
		{
			alert('error'); // development only... 
		}
	}	
}

function closeImageOverlay()
{
	document.getElementById('overlay_product_image').style.display = "none";
	document.getElementById('overlay_box').style.display = "none";
}