if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
{
     HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
     {
        switch (where)
        {
            case 'beforeBegin':
                this.parentNode.insertBefore(parsedNode,this);
                break;
            case 'afterBegin':
                this.insertBefore(parsedNode,this.firstChild);
                break;
            case 'beforeEnd':
                this.appendChild(parsedNode);
                break;
            case 'afterEnd':
                if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
                    else this.parentNode.appendChild(parsedNode);
                break;
         }
     };

     HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
     {
         var r = this.ownerDocument.createRange();
         r.setStartBefore(this);
         var parsedHTML = r.createContextualFragment(htmlStr);
         this.insertAdjacentElement(where,parsedHTML);
     };

     HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
     {
         var parsedText = document.createTextNode(txtStr);
         this.insertAdjacentElement(where,parsedText);
     };
}

/***********************************************************************
** Author: 	Truly
** Web:		http://Truly.cnblogs.com
** Date:	2006.11.10
** Desc:	模拟select控件，实现自定义下拉图片和自定义边框颜色
**			initSelect(id,width,height)进行初始化，
**			setSelectByIndex(id,index)进行某项的选中
**			body 的 onclick=HideSel(event),onload=initSelect('下拉框select的id'),兼容IE和FireFox
** Note:	注意修改<img src=''>中的下拉图片地址
***********************************************************************/
var imgPath = "/Shop/inc/Input_Select/darrow.gif";
var blOut = true;
var nowOpenedSelectBox = null;
function gid(){return document.getElementById(arguments[0]);}
function initSelect(id, width, height){
	var id,width,height;
    var sel = gid(id);
    var a = sel.childNodes;
	var oTable,oTBody, oRow, oCell,oSelect;
	
	if(!gid('O' + id )) {
	    var strWidth = "";
	    if(width != null)	strWidth=width+"px";
	    else strWidth = gid(id).offsetWidth + "px";
		
		var strHeight = "";
		if(height != null)	strHeight=height+"px";
	    else strHeight = gid(id).offsetWidth + "px";
	    
	    var strWidth2 = parseInt(strWidth) - 22 + 'px';
	    
		var arr = new Array(a.length);
		for (var i=0,j=a.length;i<j; i++)
		{
			if(a[i].text!=undefined){
				arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + HtmlEncode(a[i].text) + "</td></tr>";
			}
		}
		// 虽然用insertAdjacentElement可以获得更好的性能，但是由于如果用insertAdjacentElement势必多次使用innerHTML处理，因此就全局来看这里调用1次insertAdjacentElement，反而取得更好的效果。
	    sel.insertAdjacentHTML("beforeBegin","\
		<table border=0 cellpadding=0 cellspacing=0 style='width:" + strWidth + "'>\
			<tr>\
				<td>\
					<table style='width:" + strWidth + "' cellpadding=0 cellspacing=0 border=0 class='sel_normal' onclick=\"showHide('O" + id + "')\" onmouseout=\"blOut = false;\">\
	    				<tr bgcolor=white>\
							<td style='padding-left:3px;padding-right:3px;' nowrap><input type=\"hidden\" id=\"C_O" + id + "\"><DIV class='fixedWidth' style='padding-top:3px;width:" + strWidth2 + "' id=\"S_O" + id + "\">下拉选项</DIV></td>\
							<td width=\"15\"><img src='" + imgPath + "' /></td>\
						</tr>\
					</table>\
				</td>\
			<tr>\
				<td>\
					<div id=\"O" + id + "\" class=\"select\" style='width:" + strWidth + "' onselectstart=\"return false\" onmouseover=\"HoverOptions(event);\" onmouseout=\"OutOptions(event);\" onclick=\"ClickOptions(event, 'O" + id + "');\">\
		    			<table cellsapcing=\"0\" cellspadding=\"0\" border=\"0\" width='100%'><tbody>\
					    " + arr.join('') + "\
						</tbody></table>\
					</div>\
				</td>\
			</tr>\
		</table>");

	}
	else
	{
	    oSelect = gid('O' + id );
	    var arr = new Array(a.length);
		for (var i=0,j=a.length;i<j; i++)
		{	if(a[i].text!=undefined){
				arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + a[i].text + "</td></tr>";
			}
		}
		oSelect.parentNode.innerHTML = "<div id=\"O" + id + "\" style=\"position:absolute;\" onselectstart=\"return false\" onmouseover=\"HoverOptions(event);\" onmouseout=\"OutOptions(event);\" onclick=\"ClickOptions(event, 'O" + id + "');\">\
		    <table cellsapcing=\"0\" cellspadding=\"3\" border=\"0\" style='width:" + strWidth + "'>\
		    <tbody>" + arr.join('') + "</tbody>\
		    </table></div>";
	}
	
    oSelect = gid("O"+id);
    
    sel.style.display='none';
    
    // 如果超过8项，下拉框出现滚动条
    if(a.length > 8)
    {
        oSelect.style.overflowY = 'scroll';
        oSelect.style.height = strHeight;
    }
    else
    {
        oSelect.style.overflowY = 'hidden';
        oSelect.style.height = null;
    }
	
	// 加载原始下拉框的选中项
	if(sel.selectedIndex > -1)
	{
	    setSelectByIndex(id, sel.selectedIndex);
	}
	else if(sel.options.length > 0)
	{
	    setSelectByIndex(id, 0);
	}
}

function showHide(id){

    HideSel();
	blOut = true;
	nowOpenedSelectBox = id;
	var sh={block:"none",none:"block"};
	if(gid(id).style.display=='') gid(id).style.display='none';
	gid(id).style.display=sh[gid(id).style.display];
}

function HideSel(event)
{
	if(!blOut && nowOpenedSelectBox && gid(nowOpenedSelectBox))
		gid(nowOpenedSelectBox).style.display = 'none';
}
function HoverOptions(event)
{
	blOut = true;
	var obj = event.srcElement ? event.srcElement : event.target;
	if(obj.tagName=="TD"){
	    obj.className='option_hover';
	}
}
function OutOptions(event)
{
	blOut = false;
	var obj = event.srcElement ? event.srcElement : event.target;
	if(obj.tagName=="TD"){
	    obj.className='option_out';
	} 
}
function ClickOptions(event, id)
{
	var obj = event.srcElement ? event.srcElement : event.target;
	if(obj.tagName=="TD"){
        showHide(obj.parentNode.parentNode.parentNode.parentNode.id);
        gid('S_'+id).innerHTML=obj.innerHTML;
        gid('C_'+id).value=obj.value;

        var sourceObj = gid(id.substr(1));
        sourceObj.selectedIndex = obj.parentNode.rowIndex;
        if (sourceObj.onchange) sourceObj.onchange();
	} 
}
// 根据指定索引选中下拉框
function setSelectByIndex(id,index)
{
    if(index <0) index = 0;
    gid(id).selectedIndex = index;
    gid('S_O'+id).innerHTML=gid(id).options[index].text;
    gid('C_O'+id).value=gid(id).value;
    
    gid(id).onchange;
}
// 根据指定值选中下拉框
function setSelectByValue(id, value) {
    setSelectByIndex(id, getIndex(id, value));
    gid(id).fireEvent('onchange');
}
function getIndex(id, value)
{
	var selectBox = gid(id);
    var arOptions = selectBox.options;
    var strCompare = new String(value).toLowerCase();
    var intCompareLen = strCompare.length;
    var i, j; 
 
    for (i = 0; i < arOptions.length; i++) {
        if (strCompare == arOptions[i].value.substring(0,intCompareLen).toLowerCase()) {  
            for(j = 0; j < arOptions.length; j++) 
                ; 
            return i;
            break;
            }
    }
}
// 隐藏和显示某项
function HideItem(id, index)
{
    gid("O" + id).childNodes[0].rows[index].style.display = 'none';    
}
function ShowItem(id, index)
{
    gid("O" + id).childNodes[0].rows[index].style.display = 'block';    
}
function HtmlEncode(text)
{
	var re = {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'};
	for (i in re) text = text.replace(new RegExp(i,'g'), re[i]);
	return text;
}