function printZSelectBox(selectBox,option) {
	var tmp, name, value, outString, action;
	var id = selectBox["id"];
	var width = selectBox["width"];
	var height = selectBox["height"];
	var bordercolor = selectBox["bordercolor"];
	var bgcolor = selectBox["bgcolor"];
	var fontcolor = selectBox["fontcolor"];
	var focusbgcolor = selectBox["focusbgcolor"];
	var fontsize = selectBox["fontsize"];
	var padding = selectBox["padding"];
	var bullet = selectBox["bullet"];
	var onChange = selectBox["onChange"];
	var select = option["select"];
	var direction = selectBox["direction"];

	if(bordercolor==null) bordercolor = "#888888";
	if(direction==null || direction == "") direction = "down";
	if(bgcolor==null) bgcolor= "#ffffff";
	if(fontcolor==null) fontcolor="#333333";
	if(focusbgcolor==null) focusbgcolor= "#ededed";
	if(width==null) width=100;
	if(height!=null) height="height="+height; else height = "";
	if(fontsize==null) fontsize="9";
	if(padding==null) padding="1";
	if(bullet==null) bullet="กไ";

	var topPX = "";
	if (direction == "up"){
		topPX = "top:" + document.body.scrollHeight - 400 + ";"
	}

	outString = "<input type=hidden name='"+id+"'>";
	outString += "<table width="+width+" "+height+" border=0 cellspacing=1 cellpadding=0 bgcolor="+bordercolor+" style='table-layout:fixed;cursor:hand' onClick=\"showZSelectBox('layer_"+id+"', '" + direction + "')\">\n";
	outString += "<tr bgcolor="+bgcolor+">\n";
	outString += "<td>\n";
	outString += "<table border=0 width=100% height=100% cellspacing=0 cellpadding="+padding+" style='table-layout:fixed;'>\n";
	outString += "<col width=></col><col width=15></col>\n";
	outString += "<tr>\n";
	outString += "<td style='line-height:100%;padding-top:3px;padding-left:3px;' onMouseOver=this.style.backgroundColor='"+focusbgcolor+"' onMouseOut=this.style.backgroundColor=''><div id="+id+"_value style=color:"+fontcolor+";font-size:"+fontsize+"pt;>Select</div></td>\n";
	outString += "<td style='font-size:"+fontsize+"pt;padding:0px;color:"+fontcolor+";' align=center width=18>"+bullet+"</td>\n";
	outString += "</tr>\n";
	outString += "</table>\n";
	outString += "</td>\n";
	outString += "</tr>\n";
	outString += "</table>\n";

	outString += "<div id='layer_"+id+"' style='z-index:100; position:absolute; display:none;" + topPX + "' onMouseOver=\"showZSelectBox('layer_"+id+"', '" + direction + "');\" onMouseOut=hideZSelectBox('layer_"+id+"')>\n";
	outString += "<table border=0 cellspacing=1 cellpadding=0 bgcolor="+bordercolor+" width="+width+">\n";
	outString += "<tr bgcolor="+bgcolor+">\n";
	outString += "<td>\n";
	outString += "<table border=0 cellspacing=0 cellpadding=0 width=100% style=table-layout:fixed>\n";
	outString += "<col style=padding-left:3px;font-size:"+fontsize+"pt;color:"+fontcolor+" width=></col>\n";
	for(i=0;i<option.length;i++) {
		tmp = option[i].split(",");
		name = tmp[0];
		value = tmp[1];
		if(value==null) value = "";

		if(onChange!=null && value!=""){
			if (direction == "up"){
				action=  "window.open('"+value+"');";
			}else{
				action=  "location.href='"+value+"';";
			}
		}//else action = "\"selectZSelectBox('"+name+"','"+value+"','"+id+"')\"";

		outString += "<tr onMouseOver=this.style.backgroundColor='"+focusbgcolor+"' onMouseOut=this.style.backgroundColor='' style=cursor:hand><td onClick=\""+action+"\" style='padding-top:1px;font-size:"+fontsize+"pt;color:"+fontcolor+"'>"+name+"</td></tr>\n";
	}
	
	outString += "</table>\n";
	outString += "</td>\n";
	outString += "</tr>\n";
	outString += "</table>\n";
	outString += "</div>\n";
	document.writeln(outString);

	if(select!=null) {
		tmp = option[select].split(",");
		name = tmp[0];
		value = tmp[1];
		if(value==null) value = "";
		document.all[id+"_value"].innerHTML = name;
		document.all[id].value = value;
	}
}

function showZSelectBox(id, direction) {
	var topPX = "";

	if (direction == "up"){
		//topPX = document.body.scrollHeight - 153;
		if(document.getElementById("floater").style.top == ""){
			topPX = 708;
		}else{
			topPX = parseInt(document.getElementById("floater").style.top.replace("px", "")) + 830;
		}
		document.all[id].style.top = topPX;
	}
	document.all[id].style.display = 'block';
}

function hideZSelectBox(id) {
	document.all[id].style.display = 'none';
}

function selectZSelectBox(name,value,id) {
	document.all[id+"_value"].innerHTML = name;
	document.all[id].value=value;
	document.all["layer_"+id].style.display = 'none';
}

