var SWATCHTHUMBSIZEWIDTH = 30;
var SWATCHTHUMBSIZEHEIGHT = 30;
var ACTUALSWATCHES = new Array();

function writeSwatchName(name){
	var spnActualColorName = getObj('COLORNAME');
	if(spnActualColorName){
		spnActualColorName.innerHTML = name;
	}
}

function loadSwatches(productid){

	/*****************
	/** BUILDS THE FOLLOWING STRUCTURE

		<div class="UI_Swatch">
			<a href="javascript:void(0);" onclick="PopupProduct(1, 'swatches', 0);" onmouseover="writeSwatchName('Swatch Image 1');">
				<img src="/images/quiltsetc_swatch_image.jpg" width="30" height="30" border="0" alt="Swatch Image 1" />
			</a>
		</div>
		
	********************/
	
	if(SWATCHES.length < 1){
	
		$('UI_Swatches_Wrapper').hide();
		$('UI_Contents_Wrapper').setStyle({
			height: CONTENTHEIGHT_TALL
		});
		
	}
	
	
	for(i=0; i<=SWATCHES.length-1; i++){
	
		//alert(SWATCHES[i][1]);
	
		if(SWATCHES[i][0] != ""){
		
			ACTUALSWATCHES.push(SWATCHES[i]);
			
			var div = Builder.node('div', {
				className: "UI_Swatch"
			});
			div = $(div);
			
			var a = Builder.node('a', {
				href: "javascript:void(0);", 
				onclick: "PopupProduct(" + productid + ", 'swatches', CURRENTIMAGE);", 
				onmouseover: "writeSwatchName('" + SWATCHES[i][1] + "');"
			});
			a = $(a);
			div.appendChild(a);
			
			var img = Builder.node('img', {
				src: SWATCHES[i][0], 
				width: SWATCHTHUMBSIZEWIDTH, 
				height: SWATCHTHUMBSIZEHEIGHT, 
				alt: SWATCHES[i][1], 
				border: "0"
			});
			img = $(img);
			a.appendChild(img);
			
			$('UI_Swatches').appendChild(div);
			
		}
		
	}
}