//调色板;
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
var clickColor=null;
var clickImage=null;
var colorTop=0;
var colorBottom=0;
var colorpanelWidth=0;
var colorpanelHeight=0;
var cTempValue='';				//原颜色值
document.write("<DIV id='colorpanel' style='z-index:800'></DIV>");

function intocolor(nump,strnone)
{
	cTempValue=document.getElementById(nump+'c').value;
	cTempValue=replaceWord(cTempValue);
	var colorTable=''
	for (i=0;i<2;i++)
	{
		for (j=0;j<6;j++)
		{
			colorTable=colorTable+'<tr height=12>'
			colorTable=colorTable+'<td width=11 style="background-color:#000000">'
			if (i==0)
			{
				colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'
			} 
			else
			{
				colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'
			}
			colorTable=colorTable+'<td width=11 style="background-color:#000000">'
			for (k=0;k<3;k++)
			{
				for (l=0;l<6;l++)
				{
					colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
				}
			}
		}
	}
	colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
           +'<tr height=30><td colspan=21 bgcolor=#E1E1E1>'
           +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
           +'<tr><td width="3"><td><input type="text" id="DisColor" name="DisColor" size="2" disabled style="height:20px;width:20px;border:solid 1px #000000;background-color:#ffff00"></td>'
           +'<td width="3"><td><span style="position:relative;top:-2px;right:2px">#</span><input onkeyup=colorDownClick(this) onBlur=blurColor(this,"'+nump+'") type="text" maxlength=6 name="HexColor" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="000000"></td><td>&nbsp;&nbsp;&nbsp;&nbsp;<button onClick=doTouMing("'+nump+'") style="display:'+strnone+'"><img src="http://pic.51.com/spacesetimg/i/ucnocolor.gif" align="absmiddle"> 无色透明</button></td></tr></table></td></table>'
           +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000"   onmouseover="doOver()" onmouseout="doOut()" onclick=doclick("'+nump+'") style="cursor:hand;">'
           +colorTable+'</table>'
		   +'<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-top:none;border-collapse: collapse" bordercolor="000000"><tr height=35><td bgcolor=#E1E1E1 align=center><input type=button value="确定" onClick=doCancel("'+nump+'",1)> <input type=button value="取消" onClick=doCancel("'+nump+'",2)></td></tr></table>'
           +colorTable+'</table>';
	document.all('colorpanel').innerHTML=colorTable;
	document.getElementById('DisColor').style.backgroundColor=cTempValue;
	document.getElementById('HexColor').value=cTempValue;
}

function colorDownClick(obj)
{
	var ptncolor=/^[0-9a-z]{0,10}$/i;
	if(!ptncolor.test(obj.value))
	{
		obj.value=cTempValue;
		alert('颜色值只能是数字或字母');
	}
	document.getElementById('DisColor').style.backgroundColor=obj.value;
}
function blurColor(obj,objnum)
{
	if(obj.value.length<=0)
		var tempV='';
	else
	{
		var tempV='#'+obj.value;
		document.all('DisColor').style.backgroundImage="none";
	}
	document.getElementById(objnum).value=tempV;
}
function replaceWord(str,num)
{
	if(str)
	{
		if(!num)
			str=str.replace('#','');
		else if(num==1)
			str='#'+str;
		return str;
	}
	else
		return '';
}

//鼠标移动到表格上面时，略
function doOver() 
{
	if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) 
	{
        if (current!=null)
		{
			current.style.backgroundColor = current._background.toUpperCase();
		}     
		//document.all('DisColor').style.background="url()";
        event.srcElement._background = event.srcElement.style.backgroundColor.toUpperCase();
        //DisColor.style.backgroundColor = event.srcElement.style.backgroundColor.toUpperCase();
        //HexColor.value = event.srcElement.style.backgroundColor.toUpperCase();
        event.srcElement.style.backgroundColor = "white";
        current = event.srcElement;
     }
}

//鼠标移出表格时，略
function doOut() {

    if (current!=null) current.style.backgroundColor = current._background
/*	
	if(clickColor)
	{
		document.all('DisColor').style.backgroundColor=clickColor;
		document.all('HexColor').value=clickColor;
	}
	if(clickImage)
	{
		document.all('DisColor').style.background="url(http://pic.51.com/spacesetimg/i/ucnocolorb.gif)";
		document.all('HexColor').value='';
	}
*/
}

function doclick(objj)
{
	if (event.srcElement.tagName=="TD")
	{
		document.all('DisColor').style.backgroundImage="none";
		//event.srcElement._background = event.srcElement.style.backgroundColor.toUpperCase();
		//clickColor=event.srcElement._background;
		//clickImage=null;
		document.all(objj).value=event.srcElement._background;
		document.getElementById('DisColor').style.backgroundColor=event.srcElement._background;
		document.getElementById('HexColor').value=replaceWord(event.srcElement._background);
	}
}

function doTouMing(objj)
{
	document.all('DisColor').style.background="url(http://pic.51.com/spacesetimg/i/ucnocolorb.gif)";
	document.all('HexColor').value="";
	clickColor='';
	clickImage=1;
	document.all(objj).value='';
}

//colorTemp为1表示"确定"，2表示"取消"
function doCancel(nump,colorTemp)
{
	if(colorTemp==1)
	{
		document.all(nump+'c').value=document.getElementById(nump).value;
	}
	else
	{
		document.all(nump).value=document.all(nump+'c').value
	}

	//面板隐藏
	document.all('colorpanel').style.display='none';
	colorShowElement("SELECT");
}

function showColor(str,strnone)
{
	var obj  = event.srcElement;
	colorTop=obj.offsetTop;

	var objParent=obj.offsetParent;
	while(objParent.tagName.toUpperCase()!='BODY')
	{
		colorTop+=objParent.offsetTop;
		objParent=objParent.offsetParent;
	}

	colorBottom=colorTop+obj.offsetHeight;
	document.all('colorpanel').style.position="absolute";
	document.all('colorpanel').style.top=colorBottom+1;
	document.all('colorpanel').style.left=1;
	document.all('colorpanel').style.display='';
	intocolor(str,strnone);
	colorpanelWidth=document.all('colorpanel').offsetWidth;
	colorpanelHeight=document.all('colorpanel').offsetHeight;
	colorHideElement("SELECT");
}

//隐藏元素
function colorHideElement(elmID)
{
	for (i = 0; i < document.all.tags(elmID).length; i++)
	{
		var obj = document.all.tags(elmID)[i];
		if (! obj || ! obj.offsetParent)
			continue;
		objTop    = obj.offsetTop;
		objParent = obj.offsetParent;
		while (objParent.tagName.toUpperCase() != "BODY")
		{
			objTop   += objParent.offsetTop;
			objParent = objParent.offsetParent;
		}

		if(objTop > (colorBottom + colorpanelHeight));
		else if(objTop<colorTop);
		else
		
			obj.style.visibility = "hidden";
	}
}

//显示元素
function colorShowElement(elmID)
{
	for (i = 0; i < document.all.tags(elmID).length; i++)
	{
		obj = document.all.tags(elmID)[i];
		if (! obj || ! obj.offsetParent)
			continue;
		obj.style.visibility = "";
	}
}

