var layerWidth = 330;
var layerHeight = 50;
var currentId = "";
var orgColor ="";
function openPicker(id){
	currentId = id;
	removeLayer("picker");
	Obj = document.getElementById(id);
	orgColor = Obj.value;
	createLayer("picker",findPosX(Obj)+Obj.offsetWidth+20,findPosY(Obj));
}

function createLayer(id,left,top){
	var width = layerWidth;
	var height = layerHeight;
	var zindex = 1000;
	var bgcolor = "#ffffff";
	var txtcolor = "#000000";
	var msg = getPickerContent();
	if (document.layers) {
		if (document.layers[id]) {
		   return;
		}
		var layer=document.layers[id]=new Layer(width);
		layer.className = "picker_layer"; 
		layer.name = id;
		layer.left=left;
		layer.top=top;
		layer.clip.height=height;
		layer.visibility = 'show';
		layer.zIndex=zindex;
		layer.bgColor=bgcolor;
		layer.innerHTML = msg;
	}else if (document.all) {
		if (document.all[id]) {
			return
		}
  		var layer= '\n<DIV class="picker_layer" id='+id+' style="position:absolute'
		+'; left:'+left+"px"
		+'; top:'+top+"px"
		+'; height:'+height		
		+'; visibility:visible'
		+'; z-index:'+zindex
		+';text-align:left">'
		+ msg
		+'</DIV>';
		document.body.insertAdjacentHTML("BeforeEnd",layer);
	}else if(document.getElementById){
		var layer = document.createElement ('div');
		layer.setAttribute ('id', id);
		document.body.appendChild (layer); 
		var ly = document.getElementById(id);
		ly.className = "picker_layer"; 
		ly.style.position= "absolute";
		ly.style.left= left+"px";
		ly.style.top= top+ "px";
		ly.style.height= height+ "px";		
		ly.style.textAlign= "left";
		ly.innerHTML = msg;	
	}
}
function showClr(color){
	Obj = document.getElementById(currentId);
	Obj.value = color;
	Obj.style.backgroundColor=color;	
	Obj = document.getElementById("gcpicker_colorSample");
	//Obj.style.backgroundColor=color;
	Obj = document.getElementById("gcpicker_colorCode");
	//Obj.innerHTML = color;
	
}
function setClr(color){
	Obj = document.getElementById(currentId);
	Obj.value = color;
	Obj.style.backgroundColor=color;	
	currentId = "";
	removeLayer("picker");
	
}
function cancel(){
	Obj = document.getElementById(currentId);
	//Obj.value = orgColor;
	//Obj.style.backgroundColor=orgColor;	
	removeLayer("picker");
}
function removeLayer(id){
	if(document.getElementById(id) ==null){
		return;	
	}
	if (document.layers && document.layers[id]) {
  		document.layers[id].visibility='hide'
		delete document.layers[id]
	}
	if (document.all && document.all[id]) {
		document.all[id].innerHTML=''
		document.all[id].outerHTML=''
	}else if(document.getElementById){
		 var b = document.body;
 		 var layer = document.getElementById(id);
	 	 b.removeChild(layer);
	}
}
function getPickerContent(){
	var content = 	'<table border="0" cellpadding="0" cellspacing="0" class="color_table"><tr><td>';
	content += '<table width="100%" border="0" cellpadding="0" cellspacing=0" style="position:absolute;margin-top:-10px;right:-10px"><tr><td align=right valign=top><a href="javascript:void(0);" onclick="cancel()" ><img src="../images/icons/close.png"></a></td></tr></table>';
	content += colorTable()+'</td></tr></table>';
	return content;	
}
function colorTable(){

	if (currentId=='ctl00_Color1')
	{	var clrfix = Array("#FDFAF5","#F5E6C9","#53585C","#343844");	
	
		var table ='<table border="0"  cellpadding="0" cellspacing="5" bgcolor="#ffffff" style="border:1px solid #ccc;"><tr>';
		table += '';
		for(var j=1;j<2;j++){
			table += '<td width="100%"><table bgcolor="#ffffff"  border="0"  cellpadding="0" cellspacing="3"  class="color_table"><tr>';
			for(var i=0;i<4;i++){
				var clr ='#ffffff';
				if(j==1){
					clr = clrfix[i];	
				}
				table += '<td width="168" bgcolor="'+clr+'" class="cell_color" onmouseover="showClr('+"'"+clr+"'"+')" onclick="setClr('+"'"+clr+"'"+')"></td>';
				
				if (i==5){table += '</tr><tr>';}
			}
			table += '</tr></table></td>';		
		}
	}
	else if (currentId=='ctl00_Color2')
	{	var clrfix = Array("#ff3333","#ffce3c","#ccff33","#0afec1","#3dceff","#cc33ff","#fb06be","#ffbcbc","#cc0000","#cc9900","#99cc00","#00cc99","#0099cc","#9900cc","#cc0099","#bb7777","#820101","#654c01","#4a6101","#017054","#015977","#6c018f","#8d016a","#922828");	
	
		var table ='<table border="0"  cellpadding="0" cellspacing="5" bgcolor="#ffffff" style="border:1px solid #ccc;"><tr>';
		table += '';
		for(var j=1;j<2;j++){
			table += '<td width="100%"><table bgcolor="#ffffff"  border="0"  cellpadding="0" cellspacing="3"  class="color_table"><tr>';
			for(var i=0;i<24;i++){
				var clr ='#ffffff';
				if(j==1){
					clr = clrfix[i];	
				}
				table += '<td width="168" bgcolor="'+clr+'" class="cell_color" onmouseover="showClr('+"'"+clr+"'"+')" onclick="setClr('+"'"+clr+"'"+')"></td>';
				
				if (i==7 || i==15){table += '</tr><tr>';}
			}
			table += '</tr></table></td>';		
		}
	}
	else if (currentId=='ctl00_Color3')
	{	var clrfix = Array("#ff3333","#ffce3c","#ccff33","#0afec1","#3dceff","#cc33ff","#fb06be","#ffbcbc","#cc0000","#cc9900","#99cc00","#00cc99","#0099cc","#9900cc","#cc0099","#bb7777","#820101","#654c01","#4a6101","#017054","#015977","#6c018f","#8d016a","#922828");	
	
		var table ='<table border="0"  cellpadding="0" cellspacing="5" bgcolor="#ffffff" style="border:1px solid #ccc;"><tr>';
		table += '';
		for(var j=1;j<2;j++){
			table += '<td width="100%"><table bgcolor="#ffffff"  border="0"  cellpadding="0" cellspacing="3"  class="color_table"><tr>';
			for(var i=0;i<24;i++){
				var clr ='#ffffff';
				if(j==1){
					clr = clrfix[i];	
				}
				table += '<td width="168" bgcolor="'+clr+'" class="cell_color" onmouseover="showClr('+"'"+clr+"'"+')" onclick="setClr('+"'"+clr+"'"+')"></td>';
				
				if (i==7 || i==15){table += '</tr><tr>';}
			}
			table += '</tr></table></td>';		
		}
	}
	
	table +='<td><table border="0" cellpadding="0" cellspacing="0">';	
	for (var c = 0; c<0; c++) {
		if(c==0 || c==3){
			table +="<tr>";	
		}
		table += "<td>"	
		
		table = table+'<table border="0" cellpadding="0" cellspacing="1" class="color_table"> ';
		for (var j = 0; j<6; j++) {
			table +="<tr>";
			for (var i = 0; i<6; i++) {
				var clrhex = rgb2hex(j*255/5,i*255/5,c*255/5);
				table += '<td bgcolor="'+clrhex+'" class="cell_color" onmouseover="showClr('+"'"+clrhex+"'"+')" onclick="setClr('+"'"+clrhex+"'"+')"></td>';
			}
			table +="</tr>";
		}
		table +="</table>";
		table += "</td>"	
		if(c==2 || c==5){
			table +="</tr>";	
		}	
	}
	table +='</table></td></tr></table>';	
	return table;
}

function findPosX(obj){
	var curleft = 0;
	if(obj.offsetParent)
        while(1){
			curleft += obj.offsetLeft;
			if(!obj.offsetParent)
			break;
			obj = obj.offsetParent;
		}
	else if(obj.x)
	curleft += obj.x;
	return curleft;
}
function findPosY(obj){
	var curtop = 0;
	if(obj.offsetParent){
		while(1){
			curtop += obj.offsetTop;
			if(!obj.offsetParent){
				break;
			}
			obj = obj.offsetParent;
		}
    }else if(obj.y){
		curtop += obj.y;
	}
	return curtop;
}

function rgb2hex(red, green, blue)
{
    var decColor = red + 256 * green + 65536 * blue;
    var clr = decColor.toString(16);
	for(var i =clr.length;i<6;i++){
		clr = "0"+clr;	
	}
	return "#"+clr;
}