var finishSize = 50;
	var oDiv = null;

    function getY( oElement )	{
		var iReturnValue = 0;
		while( oElement != null ) {
			iReturnValue += oElement.offsetTop;
			oElement = oElement.offsetParent;
		}
		return iReturnValue;
	}
	
	 function getX( oElement )	{
		var iReturnValue = 0;
		while( oElement != null ) {
			iReturnValue += oElement.offsetLeft;
			oElement = oElement.offsetParent;
		}
		return iReturnValue;
	}
		
/*	function showFinishes(recordId) {
	
		var strAllData = document.getElementById(recordId + '_finishes').value;
		
		var finishData = strAllData.split(':');
		var output = '';

		for (var i=0; i<finishData.length; i++) {
			thisData = finishData[i].split('|');
			var sku = thisData[0];
			var catalog = thisData[1];
			var alt = thisData[2];
			var img = thisData[3];
			output = output + '<a href="detail.jsp?R=' + catalog + ':' + sku + '"><img vspace="6" width="' + finishSize + '" alt="' + alt + '" src="' + img + '"></a><br>';
		}

		document.getElementById('finishPopup').style.top = getY(document.getElementById(recordId + '_img')) + 100 - (((finishSize+20) * finishData.length)/2);
		document.getElementById('finishPopup').style.left = getX(document.getElementById(recordId + '_img')) + 135;
		document.getElementById('finishPopup').style.width = finishSize;
		document.getElementById('finishPopup').style.height = 20 + (finishSize * finishData.length);
 
		
		var nDiv = document.createElement("div");
	 	nDiv.innerHTML = output;
	 	var pcontainer = document.getElementById("finishPopup");
	 	if (oDiv) {
	 		x = pcontainer.replaceChild(nDiv,oDiv);
	 	} else {
	 		x = pcontainer.appendChild(nDiv);
	 	}
	 	oDiv = nDiv;
		
	 	document.getElementById('finishPopup').style.display = '';
	 	
	}
	*/
	        function showFinishes(recordId) {
	
		var strAllData = document.getElementById(recordId + '_finishes').value;
		
		var finishData = strAllData.split('|||');
		var output = '';
		var specs = '';
       
		for (var i=0; i<finishData.length; i++) {
			thisData = finishData[i].split('|');
			var sku = thisData[0];
			var brand = thisData[1];	
			if (i>0) specs = specs + "+";
			specs = specs + brand + ':' + sku;
		}
		
		for (var i=0; i<finishData.length; i++) {
			thisData = finishData[i].split('|');
			var sku = thisData[0];
			var brand = thisData[1];
			var alt = thisData[2];
			var img = thisData[3];
			
			output = output + '<a href="detail.jsp?Epr=' + brand + ':' + sku + '&R=' + specs + '"><img vspace="6" width="' + finishSize + '" alt="' + alt + '" src="' + img + '"></a><br>';
		}
		
		document.getElementById('finishPopup').style.top = (getY(document.getElementById(recordId + '_img')) + 100 - (((finishSize+20) * finishData.length)/2)) + 'px';
	//	document.getElementById('finishPopup').style.left = (getX(document.getElementById(recordId + '_img')) + 135) + 'px';
	    document.getElementById('finishPopup').style.left = (getX(document.getElementById(recordId + '_img')) + 90) + 'px';
		document.getElementById('finishPopup').style.width = (finishSize) + 'px';
		document.getElementById('finishPopup').style.height = (20 + (finishSize * finishData.length)) + 'px';
 
		
		var nDiv = document.createElement("div");
	 	nDiv.innerHTML = output;
	 	var pcontainer = document.getElementById("finishPopup");
	 	if (oDiv) {
	 		x = pcontainer.replaceChild(nDiv,oDiv);
	 	} else {
	 		x = pcontainer.appendChild(nDiv);
	 	}
	 	oDiv = nDiv;
		
	 	document.getElementById('finishPopup').style.display = '';
	 	
	} // end of showFinishes();
	 
	 function hideFinishes() {
			
		document.getElementById('finishPopup').width = '1px';
		document.getElementById('finishPopup').height = '1px';
	 	document.getElementById('finishPopup').style.display = 'none';	

	 }

	 function showComparePopup(recordId) {
		document.getElementById('comparePopup').style.top = (getY(document.getElementById('qm_' + recordId )) + 20) + 'px';
		document.getElementById('comparePopup').style.left = (getX(document.getElementById('qm_' + recordId)) - 115) + 'px';
		document.getElementById('comparePopup').style.width = '130px';
		document.getElementById('comparePopup').style.height = '66px';

	 	document.getElementById('comparePopup').style.display = '';	

	 }
	 
	 function hideComparePopup() {
			
		document.getElementById('comparePopup').width = '1px';
		document.getElementById('comparePopup').height = '1px';
	 	document.getElementById('comparePopup').style.display = 'none';	

	 }