function pickColor(posId,imgId){
	document.getElementById(posId).innerHTML = "";
	var img = document.getElementById(imgId);
	img.open = false;
	var portletSample = document.getElementById("portlet");
	var sampleContent = portletSample.innerHTML;
	portletSample.innerHTML = sampleContent;
}

function mouseMoveColor(color,objId,boxId){

	var d = document.getElementById(objId);
	d.value = color;
	var header = document.getElementById("header");
    var title = document.getElementById("portletTitle");
	var box = document.getElementById(boxId);
	if(objId==Config.TITLE_BACKGROUND_COLOR){
        	headerBar.style.background = "none";
			headerBar.style.backgroundImage = "none";
        	header.style.backgroundColor= color;
        }
        else if(objId==Config.TITLE_FONT_COLOR){
        	title.style.color = color;
        	//document.getElementById("colora").style.backgroundColor = color;
        }
        else if(objId==Config.TITLE_BORDER_COLOR){
        	header.style.borderColor = color;
        }
        else if(objId==Config.CONTENT_BACKGROUND_COLOR){
        	box.style.backgroundColor = color;
        }
        else if(objId==Config.CONTENT_BORDER_COLOR){
        	box.style.borderColor = color;
        }
        else if(objId==Config.CONTENT_FONT_COLOR){
        	box.style.color = color;
        }
}

function showColorPicker(objId,posId,imgId,boxId){
		var colors = new Array("#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099","#3300CC",
	"#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099",
	"#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066",
	"#FF0099","#FF00CC","#FF00FF","#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333",
	"#333366","#333399","#3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300",
	"#993333","#993366","#993399","#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF",
	"#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#006600","#006633","#006666","#006699","#0066CC",
	"#0066FF","#336600","#336633","#336666","#336699","#3366CC","#3366FF","#666600","#666633","#666666","#666699",
	"#6666CC","#6666FF","#996600","#996633","#996666","#996699","#9966CC","#9966FF","#CC6600","#CC6633","#CC6666",
	"#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF","#009900","#009933",
	"#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999","#3399CC","#3399FF","#669900",
	"#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999","#9999CC","#9999FF",
	"#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999","#FF99CC",
	"#FF99FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99",
	"#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66",
	"#99CC99","#99CCCC","#99CCFF","#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33",
	"#FFCC66","#FFCC99","#FFCCCC","#FFCCFF","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00",
	"#33FF33","#33FF66","#33FF99","#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF",
	"#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC",
	"#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF");
	var total = colors.length;
	var width = 18;
	var cp_contents = "";
	cp_contents += "<TABLE style='border-collapse:collapse;' BORDER=0>";
	for(var i=0;i<total;i++){
		if((i % width) == 0){
			cp_contents += "<TR height='5'>";
		}

		var mo = 'onmouseover="mouseMoveColor(\''+colors[i]+'\',\''+ objId + '\',\'' + boxId + '\')"';
		cp_contents += '<TD  BGCOLOR="'+colors[i]+'"><img border="0" onClick="pickColor(\'' + posId + '\',\'' + imgId + '\');return false;" '+mo+' STYLE="cursor:hand;color:' + colors[i] + '" width=\"12\" height=\"9\"></img></TD>';
		if( ((i+1)>=total) ||(((i+1) % width) == 0)){
			cp_contents += "</TR>";
		}
	}
	cp_contents += "</TABLE>";
	if(posId){
		//if(document.getElementById(posId).innerHTML!=""){
		//	document.getElementById(posId).innerHTML = "";
		//}else{
			document.getElementById(posId).innerHTML = "<div style='position:absolute;left:0;top:0;z-index:100' >" + cp_contents + "</div><iframe name='colorframe' style='position:absolute;left:0;top:0;z-index:-1' width='252' height='132' frameborder=\"0\"></iframe>";
		//}
	}
	
}