function dColorPicker(id, basestyle, barstyle, bartitle, handlerfunction) {
	clrPop = standardPop(id, basestyle, barstyle, bartitle, true);
	clrPop.setWidth(300);
	dColor(clrPop.cdiv, clrPop, handlerfunction);
	clrPop.center();
	clrPop.show();

}


function dColor(appendto, basepop, handler) {

	// build container div
	var box = document.createElement("div");
	appendto.appendChild(box);
	box.style.textAlign = "center";
	box.id = "box_"+basepop.id;
	box.basepop = basepop;
	box.selectColor = selectColor;
	box.handler = handler;

	function selectColor(color, name) {
		if(name) {
			box.selected.value = name;
		} else {
			box.selected.value = color;
		}
		if((color.match(/^#([0-9a-f]{1,2}){3}$/i)) || (color == 'transparent')) {
			box.selectdiv.style.backgroundColor = color;
		} else {
			box.selected.value = 'none';
		}
	}

	// simple colorpicker
	
	box.simdiv = document.createElement("div");
	box.appendChild(box.simdiv);
	box.simdiv.style.padding = "3px";

	// wrapper table
	box.simtable = document.createElement("table");
	box.simdiv.appendChild(box.simtable);
	box.simtable.style.width = "95%";
	box.simtable.style.margin = "auto";
	box.simtbod = document.createElement("tbody");
	box.simtable.appendChild(box.simtbod);
	box.simtr = document.createElement("tr");
	box.simtbod.appendChild(box.simtr);
	box.simtdleft = document.createElement("td");
	box.simtr.appendChild(box.simtdleft);

	// array simple colorpicker
	var colors = new Array('#000000','#0000AA','#AA00AA', '#AA0000', '#00AA00', '#AAAA00', '#AA3300', 
							'#000000', '#0000FF', '#FF00FF', '#FF0000', '#00FF00', '#FFFF00', '#FFA000', 
							'#444444', '#3333FF', '#FF33FF', '#FF3333', '#33FF33', '#FFFF33', '#FFA333', 
							'#777777', '#6666FF', '#FF66FF', '#FF6666', '#66FF66', '#FFFF66', '#FFA666',
							'#AAAAAA', '#9999FF', '#FF99FF', '#FF9999', '#99FF99', '#FFFF99', '#FFB999', 
							'#FFFFFF', '#CCCCFF', '#FFCCFF', '#FFCCCC', '#CCFFCC', '#FFFFCC', '#FFEDCC');

	//array page colors

	// simple colorpicker
	box.simcolortable = document.createElement("table");
	box.simtdleft.appendChild(box.simcolortable);
	box.simcolortable.style.margin = "auto";
	box.simclrbod = document.createElement("tbody");
	box.simcolortable.appendChild(box.simclrbod);
	box.simclrtr = document.createElement("tr");
	box.simclrbod.appendChild(box.simclrtr);

	// fill simple color picker table
	for(var i=0; i < colors.length; i++) {
		if(i == 7 || i == 14 || i == 21 || i == 28 || i == 35) {
			box.simclrtr = document.createElement("tr");
			box.simclrbod.appendChild(box.simclrtr);
		}
		box.simclrtd = document.createElement("td");
		box.simclrtd.style.height = "15px";
		box.simclrtd.style.width = "15px";		
		box.simclrtd.style.border = "1px solid #000000"
		box.simclrtd.id = basepop.id+"_sc_"+colors[i];
		box.simclrtd.style.backgroundColor = colors[i];
		box.simclrtr.appendChild(box.simclrtd);
		box.simclrtd.style.marginLeft = "3px";
		box.simclrtd.style.cursor = "pointer";
		box.simclrtd.onclick = new Function("document.getElementById('box_"+basepop.id+"').selectColor('"+colors[i]+"')");
	}

	// wrapper td right
	box.simtdright = document.createElement("td");
	box.simtr.appendChild(box.simtdright);

	// page color picker

	box.pagecolortable = document.createElement("table");
	box.simtdright.appendChild(box.pagecolortable);
	box.pagecolortable.style.margin = "auto";
	box.pageclrbod = document.createElement("tbody");
	box.pagecolortable.appendChild(box.pageclrbod);

	// build transparent picker

	box.pageclrtr = document.createElement("tr");
	box.pageclrbod.appendChild(box.pageclrtr);
	box.pageclrtd = document.createElement("td");
	box.pageclrtd.style.border = "1px solid #000000"
	box.pageclrtd.style.height = "15px";
	box.pageclrtd.style.width = "60px";
	box.pageclrtd.id = basepop.id+"_pg_transparent";
	box.pageclrtd.style.backgroundColor = "transparent";
	box.pageclrtr.appendChild(box.pageclrtd);
	box.pageclrtd.style.cursor = "pointer";
	box.pageclrtd.style.color = '#000000';
	box.pageclrtd.innerHTML = "transparent";
	box.pageclrtd.onclick = new Function("document.getElementById('box_"+basepop.id+"').selectColor('transparent')");


	// fill pagecolor table
	for(var i=0; i < SYS_COLORS.length; i++) {
		box.pageclrtr = document.createElement("tr");
		box.pageclrbod.appendChild(box.pageclrtr);
		box.pageclrtd = document.createElement("td");
		box.pageclrtd.style.border = "1px solid #000000"
		box.pageclrtd.style.height = "15px";
		box.pageclrtd.style.width = "60px";
		box.pageclrtd.id = basepop.id+"_pg_"+SYS_COLORS[i]['id'];
		box.pageclrtd.style.backgroundColor = SYS_COLORS[i]['value'];
		box.pageclrtr.appendChild(box.pageclrtd);
		box.pageclrtd.style.marginTop = "8px";	
		box.pageclrtd.style.cursor = "pointer";
		box.pageclrtd.style.color = SYS_COLORS[i]['contrast'];
		box.pageclrtd.innerHTML = SYS_COLORS[i]['name'];
		box.pageclrtd.onclick = new Function("document.getElementById('box_"+basepop.id+"').selectColor('"+SYS_COLORS[i]['value']+"', 'sys_"+SYS_COLORS[i]['id']+"')");
	}
	
	box.selectdiv = document.createElement("div");
	box.appendChild(box.selectdiv);
	box.selectdiv.style.textAlign = "left";
	box.selectdiv.style.margin = "15px";
	box.selectdiv.style.marginLeft = "30px";
	box.selectdiv.style.marginRight = "30px";
	box.selectdiv.style.padding =  "5px";
	box.selectdiv.style.textAlign = "center";
	box.selectdiv.style.border = "1px solid black";

	box.selected = document.createElement("input");
	box.selectdiv.appendChild(box.selected);
	box.selected.id = "color_"+basepop.id;
	box.selected.style.fontFamily = "monospace";
	box.selected.value = "none";
	box.selected.style.width = "60px";
	box.selected.style.border = "1px solid black";
	box.selected.onkeydown = function(event) {
		try { //IE
			var whatkey = event.keyCode;
		} catch (e) {
			try { //FF	
				var whatkey = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
			} catch (e) {
				try { //IE again. get me Bi... ah, never mind :(
					var whatkey = window.event.keyCode;
				} catch (e) {
					alert('Cannot read event');
				}
			}
		}
		if(whatkey == 13) { //enter
			box.selectColor(box.selected.value);
		}
	}

	// submit 
	box.subdiv = document.createElement("div");
	box.appendChild(box.subdiv);
	box.subdiv.style.textAlign = "right";
	box.subdiv.style.paddingTop = "8px";

	box.annbut = document.createElement("button");
	box.subdiv.appendChild(box.annbut);
	box.annbut.style.margin = "3px";
	box.annbut.innerHTML = "Cancel";
	box.annbut.onclick = function () {
		box.basepop.destroy();
	}

	box.submbut = document.createElement("button");
	box.subdiv.appendChild(box.submbut);
	box.submbut.style.margin = "3px";
	box.submbut.innerHTML = "Select";
	box.submbut.onclick = function() {
		if(box.selected.value.substr(0, 4) == 'sys_') {
			var strippedcolor = box.selected.value.split("_");
			var color = getSystemColorById(strippedcolor[1]);
			box.handler(color, basepop.id);
			box.basepop.destroy();
		} else if(box.selected.value == 'transparent') {
			box.handler(box.selected.value, basepop.id);
			box.basepop.destroy();
		} else if(box.selected.value.match(/^#([0-9a-f]{1,2}){3}$/i)) {
			box.handler(box.selected.value, basepop.id);
			box.basepop.destroy();
		} else {
			box.selected.value = 'none';
		}
	}
}

function getSystemColorById(id) {
	for(var i=0; i < SYS_COLORS.length; i++) {
		if(SYS_COLORS[i]['id'] == id) {
			return SYS_COLORS[i]['value'];
		}
	}
	return false;
}