var nowopenedselectbox = "";
var mouseposition = "";

function selectthisvalue(thisid,thisindex,thisvalue,thisstring) {
    var objid = thisid;
    var nowindex = thisindex;
    var valuestring = thisstring;
    var sourceobj = document.getelementbyid(objid);
    var nowselectedvalue = document.getelementbyid(objid+"selectboxoptionvalue"+nowindex).value;
    hideoptionlayer(objid);
    if (sourceobj) sourceobj.value = nowselectedvalue;
    settingvalue(objid,valuestring);
    selectboxfocus(objid);
    if (sourceobj.onchange) sourceobj.onchange();
}

function settingvalue(thisid,thisstring) {
    var objid = thisid;
    var valuestring = thisstring;
    var selectedarea = document.getelementbyid(objid+"selectboxselectedvalue");
    if (selectedarea) 
	{
		if(navigator.appname.indexof("explorer") > -1)
			selectedarea.innertext = valuestring;
		else
			selectedarea.textcontent = valuestring;
	}
}

function viewoptionlayer(thisid) {
    var objid = thisid;
    var optionlayer = document.getelementbyid(objid+"selectboxoptionlayer");
    if (optionlayer) optionlayer.style.display = "";
    nowopenedselectbox = objid;
    setmouseposition("inbox");
}

function hideoptionlayer(thisid) {
    var objid = thisid;
    var optionlayer = document.getelementbyid(objid+"selectboxoptionlayer");
    if (optionlayer) optionlayer.style.display = "none";
}

function setmouseposition(thisvalue) {
    var positionvalue = thisvalue;
    mouseposition = positionvalue;
}

function clickmouse() {
    if (mouseposition == "out") hideoptionlayer(nowopenedselectbox);
}

function selectboxfocus(thisid) {
    var objid = thisid;
    var obj = document.getelementbyid(objid + "selectboxselectedvalue");
    obj.classname = "selectboxselectedareafocus";
    obj.focus();
}

function selectboxblur(thisid) {
    var objid = thisid;
    var obj = document.getelementbyid(objid + "selectboxselectedvalue");
    obj.classname = "selectboxselectedarea";

}

function makeselectbox(thisid, imgsrc) {
    var downarrowsrc = imgsrc + "/templates/default/images/down.gif";
    var downarrowsrcwidth = 13;
    var optionheight = 20;
    var optionmaxnum = 5;
    var optioninnerlayerheight = "";
    var objid = thisid;
    var obj = document.getelementbyid(objid);
    var selectboxwidth = parseint(obj.style.width);
    var selectboxheight = parseint(obj.style.height);
    if (obj.options.length > optionmaxnum) optioninnerlayerheight = "height:"+ (optionheight * optionmaxnum) + "px";
    newselect  = "<div><table id='" + objid + "selectboxoptionlayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onmouseover=\"viewoptionlayer('"+ objid + "')\" onmouseout=\"setmouseposition('out')\">";
    newselect += "    <tr>";
    newselect += "        <td height='" + selectboxheight + "px' style='cursor:hand;' onclick=\"hideoptionlayer('"+ objid + "')\"></td>";
    newselect += "    </tr>";
    newselect += "    <tr>";
    newselect += "        <td height='0'></td>";
    newselect += "    </tr>";
    newselect += "    <tr>";
    newselect += "        <td bgcolor='#d3d3d3'>";
    newselect += "        <div class='selectboxoptioninnerlayer' style='width:" + (selectboxwidth) + "px;" + optioninnerlayerheight + "'>";
    newselect += "        <table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";
    for (var i=0 ; i < obj.options.length ; i++) {
        var nowvalue = obj.options[i].value;
        var nowtext = obj.options[i].text;
        newselect += "            <tr>";
        newselect += "                <td onmouseover=this.style.backgroundcolor='#abadb3';return true;  onmouseout=this.style.backgroundcolor='#7b7b7b';return true; bgcolor=#7b7b7b height='" + optionheight + "px' class='selectboxoption' onmouseover=\"this.classname='selectboxoptionover'\" onmouseout=\"this.classname='selectboxoption'\" onclick=\"selectthisvalue('"+ objid + "'," + i + ",'" + nowvalue + "','" + nowtext + "')\" style='cursor:hand;' >" + nowtext + "</td>";
        newselect += "                <input type='hidden' id='"+ objid + "selectboxoptionvalue" + i + "' value='" + nowvalue + "'>";
        newselect += "            </tr>";
    }
    newselect += "        </table>";
    newselect += "        </div>";
    newselect += "        </td>";
    newselect += "    </tr>";
    newselect += "</table>";
    newselect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#abadb3' onclick=\"viewoptionlayer('"+ objid + "')\" style='cursor:hand;border-top:0px #bec3ca solid;'>";
    newselect += "    <tr>";
    newselect += "        <td style='padding-left:0px' bgcolor='#7b7b7b'>";
    newselect += "        <table cellpadding='0' cellspacing='0' border='0'>";
    newselect += "            <tr>";
    newselect += "                <td><div id='" + objid + "selectboxselectedvalue' class='selectboxselectedarea' style='width:" + (selectboxwidth - downarrowsrcwidth - 3) + "px;height:" + (selectboxheight - 2) + "px;overflow:hidden;' onblur=\"selectboxblur('" + objid + "')\" ></div></td>";
    newselect += "                <td><img src='" + downarrowsrc + "' width='" + downarrowsrcwidth + "' border='0'></td>";
    newselect += "            </tr>";
    newselect += "        </table>";
    newselect += "        </td>";
    newselect += "    </tr>";
    newselect += "</table></div>";
    document.write(newselect);
    
    var haveselectedvalue = false;
    for (var i=0 ; i < obj.options.length ; i++) {
        if (obj.options[i].selected == true) {
            haveselectedvalue = true;
            settingvalue(objid,obj.options[i].text);
        }
    }
    if (!haveselectedvalue) settingvalue(objid,obj.options[0].text);

}


document.onmousedown = clickmouse;