// Color Picker Dropdown Javascript File v1.0
       function showColors()
        {
            
            var colors = document.getElementById("colorDropdown");
            //.setAttribute('style', 'display:inline');
            colors.style.display = "inline";
        }
        function hideColors()
        {
            var colors = document.getElementById("colorDropdown");
            colors.style.display = "none";
            
        }
        function setColor(hex, name, productId)
        {
            var selectedHex, selectedColor;
            
            selectedHex = document.createElement('div');
            
            selectedHex.style.cssText = 'float:left;width:30px;height:12px; background-color:#' + hex + ';border:solid 1px black;';
            
            selectedColor = document.createElement('div');
            
            selectedColor.style.cssText = 'float:left;font-size:x-small;font-family:Tahoma; margin:2px 0px 0px 5px;';
            var nameNode = document.createTextNode(name);
            selectedColor.appendChild(nameNode);
            var topColor = document.getElementById("topLevelColor");

            removeChildNodes(topColor);
            topColor.appendChild(selectedHex);
            topColor.appendChild(selectedColor);
            
            var hidHex = document.getElementById("hidHex");
            hidHex.value = hex;
            var hidColor = document.getElementById("hidSelectedColor");
            hidColor.value = name;
            hideColors();
            LoadSizes(name,productId);
        }
        function removeChildNodes(ctrl){  while (ctrl.childNodes[0])  {    ctrl.removeChild(ctrl.childNodes[0]);  }}

        function overColor(sender)
        {
            sender.style.bgcolor ="#f0f0f0";
        }   
        function overColor(sender)
        {
            sender.style.bgcolor ="#fff";
        }  
        
        // gets the basic information about the product
function LoadColorInfo(idProd)
{
    try
	{
		obj1=new XMLHttpRequest();
	}
	catch(e)
	{
		try
		{
			obj1 = new ActiveXObject("Microsoft.XMLHTTP");			
		}
		catch(e1)
		{
			obj1 = null;
		}
	}	
	if(obj1!=null)
	{
		obj1.onreadystatechange = ProcessProductColors;
		obj1.open("GET", "get-productcolors.asp?idpr="+ idProd,  true);
		obj1.send(null);         
	}
	return false;
}

function ProcessProductColors()
{
	if(obj1.readyState == 4)
	{	
		if(obj1.status == 200)
		{
			//alert(options); 
			try
			{
			    //clear colors if any exist
			    removeChildNodes(document.getElementById("colorDropdown"));
			    var root = obj1.responseXML.documentElement.childNodes;
			    //alert(root[0].childNodes[0].firstChild.nodeValue);
			    for(var i = 0; i < root.length; i++)
			    {  
			        
			        var hex = root[i].childNodes[0].firstChild.nodeValue;
			        var colorText = root[i].childNodes[1].firstChild.nodeValue;
			        var prodId = root[i].childNodes[2].firstChild.nodeValue;
	
			        
			        var optionNode = document.createElement('div');
			        var clearNode = document.createElement('div');
			        clearNode.style.cssText = 'clear:both;';
			        //optionNode.setAttribute('class', 'colorRow');
			        var colorBlock = document.createElement('span');
			        //colorBlock.setAttribute('style', 'float:left;width:30px;height:12px; background-color:#' + root[i].childNodes[0].firstChild.nodeValue + ';border:solid 1px black; margin-top:2px;');
			        colorBlock.style.cssText = 'float:left;width:30px;height:12px; background-color:#' + root[i].childNodes[0].firstChild.nodeValue + ';border:solid 1px black; margin-top:2px;';
			        //colorBlock.setAttribute('onclick', "setColor('" + root[i].childNodes[0].firstChild.nodeValue  + "','" + root[i].childNodes[1].firstChild.nodeValue + "','" + root[i].childNodes[2].firstChild.nodeValue + "')");
			        colorBlock.onclick = new Function("setColor('" + hex + "', '" + colorText + "','" + prodId + "')");
			        //colorBlock.onclick = function() {setColor(root[i].childNodes[0].firstChild.nodeValue,root[i].childNodes[1].firstChild.nodeValue,root[i].childNodes[2].firstChild.nodeValue); }
			        var textBlock = document.createElement('span');
			        textBlock.setAttribute('style', 'float:left;font-size:x-small;font-family:Tahoma; margin:2px 0px 0px 5px;');
			        //textBlock.setAttribute('onclick', "setColor('" + root[i].childNodes[0].firstChild.nodeValue  + "','" + root[i].childNodes[1].firstChild.nodeValue + "','" + root[i].childNodes[2].firstChild.nodeValue + "')");
			        textBlock.onclick = new Function("setColor('" + hex + "', '" + colorText + "', '" + prodId + "')");
			        //textBlock.onclick = function() {setColor(root[i].childNodes[0].firstChild.nodeValue,root[i].childNodes[1].firstChild.nodeValue,root[i].childNodes[2].firstChild.nodeValue); }
			        textBlock.innerHTML = root[i].childNodes[1].firstChild.nodeValue;
			        var breakElement = document.createElement('br');
			        optionNode.appendChild(colorBlock);
			        optionNode.appendChild(textBlock);
			        optionNode.appendChild(breakElement);
			        document.getElementById("colorDropdown").appendChild(optionNode);
			        document.getElementById("colorDropdown").appendChild(clearNode);
			    }
			    
			    var clearNode2 = document.createElement('div');
			    clearNode2.style.cssText = 'clear:both;';
			    document.getElementById("colorDropdown").appendChild(clearNode2);
			}
			catch(e)
			{
			    alert(e);
			}
		}
	}
	return false;
}