var clickTemp = 0;  //click中的临时变量
//封装类
function DropDownList() {
    var dfAttr = {
        "id": "id1",
        "height": 22,
        "width": 97,
        "float": "none",
        "display": "inline-block",
        "margin": "",
        "position": "relative",
        "top": "",
        "left": "",
        "border": "solid 1px #CDD89D",
        "dropBtnWidth": 22,
        "dropBtnColor": "#CDD89D",
        "dropBtnColorHover": "#F8C038",
        "dropBtnBoder": "solid 1px #CDD89D",
        "dropBtnBackground": "#FFFFFF",
        "dropBtnBackgroundHover": "#FFFFFF",
        "dropBtnText": "v",
        "bodyColor": "black",
        "bodyBackground": "#FFFFFF",
        "listNodeBorder": "1px solid #D3D4E6",
        "listNodeBackground": "#FFFFFF",
        "valueNodeBackground": "#FFFFFF",
        "valueNodeColor": "#4C4C4C",
        "valueNodeLineHeight": "20px",
        "valueNodeColorHover": "blue",
        "valueNodeBackgroundHover": "Gray",
        "dfValue": "",
        "dfValueColor": "black",
        "listFix":""
    };
    var curAttr = {};

    var dropListNode;
    var bodyNode;
    var listNode;
    var ulNode;

    function CreateDropDownList(attr) {
        curAttr = attr;
        dropListNode = document.createElement("div");

        //给当前属性赋值
        if (!curAttr.id) {
            var tempIdName = dfAttr.id;
            while (document.getElementById(tempIdName)) {
                var i = (tempIdName.substring(2)) * 1;
                i++;
                tempIdName = "id" + i;
            }
            curAttr.id = tempIdName;
        }
        curAttr.height = curAttr.height || dfAttr.height;
        curAttr.width = curAttr.width || dfAttr.width;
        curAttr.border = curAttr.border || dfAttr.border;
        curAttr.cssFloat = curAttr.cssFloat || dfAttr.cssFloat;
        curAttr.display = curAttr.display || dfAttr.display;
        curAttr.margin = curAttr.margin || dfAttr.margin;
        curAttr.position = curAttr.position || dfAttr.position;
        curAttr.top = curAttr.top || dfAttr.top;
        curAttr.left = curAttr.left || dfAttr.left;
        curAttr.dropBtnWidth = curAttr.dropBtnWidth || dfAttr.dropBtnWidth;
        curAttr.dropBtnColor = curAttr.dropBtnColor || dfAttr.dropBtnColor;
        curAttr.dropBtnColorHover = curAttr.dropBtnColorHover || dfAttr.dropBtnColorHover;
        curAttr.dropBtnBoder = curAttr.dropBtnBoder || dfAttr.dropBtnBoder;
        curAttr.dropBtnBackground = curAttr.dropBtnBackground || dfAttr.dropBtnBackground;
        curAttr.dropBtnBackgroundHover = curAttr.dropBtnBackgroundHover || dfAttr.dropBtnBackground;
        curAttr.dropBtnText = curAttr.dropBtnText || dfAttr.dropBtnText;
        curAttr.bodyColor = curAttr.bodyColor || dfAttr.bodyColor;
        curAttr.bodyBackground = curAttr.bodyBackground || dfAttr.bodyBackground;
        curAttr.listNodeBorder = curAttr.listNodeBorder || dfAttr.listNodeBorder;
        curAttr.listNodeBackground = curAttr.listNodeBackground || dfAttr.listNodeBackground;
        curAttr.valueNodeBackground = curAttr.valueNodeBackground || dfAttr.valueNodeBackground;
        curAttr.valueNodeColor = curAttr.valueNodeColor || dfAttr.valueNodeColor;
        curAttr.valueNodeLineHeight = curAttr.valueNodeLineHeight || dfAttr.valueNodeLineHeight;
        curAttr.valueNodeColorHover = curAttr.valueNodeColorHover || dfAttr.valueNodeColorHover;
        curAttr.valueNodeBackgroundHover = curAttr.valueNodeBackgroundHover || dfAttr.valueNodeBackgroundHover;
        curAttr.dfValue = curAttr.dfValue || dfAttr.dfValue;
        curAttr.dfValueColor = curAttr.dfValueColor || dfAttr.dfValueColor;
        curAttr.listFix=curAttr.listFix||dfAttr.listFix;

        //创建总体的框框
        dropListNode.setAttribute("id", curAttr.id);
        dropListNode.style.cssText = "left:" + curAttr.left + "; top:" + curAttr.top + "; position:" + curAttr.position + "; margin:" + curAttr.margin + "; display:" + curAttr.display + ";float:" + curAttr.cssFloat + "; height:" + curAttr.height + "px;width:" + curAttr.width + "px;border:" + curAttr.border + "";

        //创建内容框
        bodyNode = document.createElement("div");
        bodyNode.setAttribute("id", curAttr.id + "_body");
        bodyNode.style.cssText = "background:" + curAttr.bodyBackground + "; color:" + curAttr.bodyColor + "; height:" + curAttr.height + "px;line-height:" + curAttr.height + "px;width:" + (curAttr.width - curAttr.dropBtnWidth - 1) + "px;float:left;display:inline;overflow:hidden";

        var dfstr = "<p class='" + curAttr.id + "_bodyValue!' id='" + curAttr.id + "_bodyIndex!' style='color:" + curAttr.dfValueColor + "; margin:0px; margin-left:4px; line_height:" + curAttr.height + "px;'>" + curAttr.dfValue + "</p>";
        bodyNode.innerHTML = dfstr;

        dropListNode.appendChild(bodyNode);

        //创建下拉按钮框
        var dropNode = document.createElement("div");
        dropNode.setAttribute("id", curAttr.id + "_drop");
        dropNode.style.cssText = "height:" + curAttr.height + "px;width:" + curAttr.dropBtnWidth + "px;float:left;display:inline;border-left:" + curAttr.dropBtnBoder + ";cursor:pointer;background:" + curAttr.dropBtnBackground + ";color:" + curAttr.dropBtnColor + ";";
        var dropBtn = document.createElement("p");
        dropBtn.innerHTML = curAttr.dropBtnText;
        dropBtn.style.cssText = "line-height:" + curAttr.height + "px;height:" + curAttr.height + "px;text-align:center;vertical-align:bottom;font-weight:bold;fontSize:16px;";
        dropNode.appendChild(dropBtn);
        dropListNode.appendChild(dropNode);

        //创建清楚浮动层
        var clearNode = document.createElement("div");
        clearNode.setAttribute("id", curAttr.id + "_clear");
        clearNode.style.cssText = "clear:both;font-size:0px;line-height:0px;height:0px;overflow:hidden;display:block;";
        dropListNode.appendChild(clearNode);

        //创建下拉框
        listNode = document.createElement("div");
        listNode.setAttribute("id", curAttr.id + "_list");
        if (curAttr.listFix.toLowerCase() == "fix") {
            listNode.style.cssText = "width:" + curAttr.width + "px; top:" + curAttr.height + "px;left:0px; display:none; position:absolute;z-index:99900; border:" + curAttr.listNodeBorder + ";background-color:" + curAttr.listNodeBackground + ";";
        }
        else {
            listNode.style.cssText = "top:" + curAttr.height + "px;left:0px; display:none; position:absolute;z-index:99900; border:" + curAttr.listNodeBorder + ";background-color:" + curAttr.listNodeBackground + ";";
        }
        
        dropListNode.appendChild(listNode);
        //        listNode.innerHTML = "<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>";

        //添加弹出下拉框事件
        if (dropBtn.attachEvent) {
            dropBtn.attachEvent("onclick", DropBtnClick(listNode, dropNode));
            bodyNode.attachEvent("onclick", DropBtnClick(listNode, dropNode));
        }
        else if (dropBtn.addEventListener) {
            dropBtn.addEventListener("click", DropBtnClick(listNode, dropNode), false);
            bodyNode.addEventListener("click", DropBtnClick(listNode, dropNode), false);
        }

        //隐藏下拉框事件
        if (document.body.attachEvent) {
            document.body.attachEvent("onclick", BodyClick(listNode, dropNode));
        }
        else if (document.body.addEventListener) {
            document.body.addEventListener("click", BodyClick(listNode, dropNode), false);
        }
        //        this.selectValue=curAttr.id;

    }

    //隐藏下拉框
    function BodyClick(listNode, dropNode) {

        return function() {
            
            listNode.style.display = "none";
            dropNode.style.backgournd = curAttr.dropBtnBackground;
            dropNode.style.color = curAttr.dropBtnColor;
            clickTemp = 0;
        }
    }

    //弹出下拉菜单的方法
    var DropBtnClick = function(listNode, dropNode) {
        return function(event) {
            if (clickTemp == 0) {
                listNode.style.display = "block";
                dropNode.style.backgournd = curAttr.dropBtnBackgroundHover;
                dropNode.style.color = curAttr.dropBtnColorHover;
                clickTemp = 1;
                var e = (event) ? event : window.event;
                if (window.event) {
                    e.cancelBubble = true;
                }
                else {
                    e.stopPropagation();
                }
                return false;
            }
            if (clickTemp == 1) {
                listNode.style.display = "none";
                dropNode.style.backgournd = curAttr.dropBtnBackground;
                dropNode.style.color = curAttr.dropBtnColor;
                clickTemp = 0;
                return false;
            }
        }
    }

    //插入到指定的容器里面--IdValue
    function WriteTo(nodeIdName, childNodeIdName) {
        if (arguments.length == 1) {
            var node = document.getElementById(nodeIdName);
            node.appendChild(dropListNode);
        }
        else if (arguments.length == 2) {
            var firstNode = document.getElementById(nodeIdName);
            var childNode = document.getElementById(childNodeIdName);
            firstNode.insertBefore(dropListNode, childNode);
        }
    }

    //绑定数据
    function DataBind(textList, valueList) {
        valueList = valueList || textList;
        ulNode = document.createElement("ul");
        ulNode.setAttribute("id", curAttr.id + "_listValue");
        listNode.appendChild(ulNode);
        var listStr = "";
        for (var i = 0; i < textList.length; i++) {
            listStr += "<li class='" + curAttr.id + "_listValue!" + valueList[i] + "' style='display:block; white-space: nowrap; zoom:1;list-style:none; margin-left:4px;cursor:pointer; line-height:" + curAttr.valueNodeLineHeight + "; color:" + curAttr.valueNodeColor + "; background:" + curAttr.valueNodeBackground + ";' id='" + curAttr.id + "_listIndex!" + i + "'>" + textList[i] + "</li>";
        }
        ulNode.innerHTML = listStr;

        if (textList.length > 18) {
            ulNode.style.cssText = "height:240px; overflow-y:scroll;";
        }
        var lis = ulNode.getElementsByTagName("li");
        for (i = 0; i < lis.length; i++) {

            //添加移入移出事件
            if (lis[i].attachEvent) {
                lis[i].attachEvent("onmouseover", MouseIn(lis[i]));
                lis[i].attachEvent("onmouseout", MouseOut(lis[i]));
                lis[i].attachEvent("onclick", SelectItem(bodyNode, lis[i]));
            }
            else if (lis[i].addEventListener) {
                lis[i].addEventListener("mouseover", MouseIn(lis[i]), false);
                lis[i].addEventListener("mouseout", MouseOut(lis[i]), false);
                lis[i].addEventListener("click", SelectItem(bodyNode, lis[i]), false);
            }
        }
    }
    function SelectItem(bodyNode, liNode) {
        return function() {
        var pstr = "<p class='" + curAttr.id + "_bodyValue!" + liNode.className.split('!')[1] + "' id='" + curAttr.id + "_bodyIndex!" + liNode.getAttribute("id").split('!')[1] + "' style='margin:0px; margin-left:4px; line_height:" + curAttr.height + "px;'>" + liNode.innerHTML + "</p>"
            bodyNode.innerHTML = pstr;

        }
    }

    //鼠标移出的方法
    function MouseOut(liNode) {
        return function() {
            liNode.style.cssText = " display:block; white-space: nowrap; zoom:1; list-style:none; margin-left:4px;cursor:pointer; line-height:" + curAttr.valueNodeLineHeight + "; color:" + curAttr.valueNodeColor + "; background:" + curAttr.valueNodeBackground + ";";
        }
    }
    //鼠标移入的方法
    function MouseIn(liNode) {
        return function() {

            liNode.style.cssText = " display:block; white-space: nowrap; zoom:1; list-style:none; margin-left:4px;cursor:pointer; line-height:" + curAttr.valueNodeLineHeight + "; color:" + curAttr.valueNodeColorHover + "; background:" + curAttr.valueNodeBackgroundHover + ";";
        }
    }

    DropDownList.prototype.CreateDropDownList = CreateDropDownList;
    DropDownList.prototype.WriteTo = WriteTo;
    DropDownList.prototype.DataBind = DataBind;


}

//得到相应dropdownlist的值、索引、内容
function GetDropDownListSelect(nodeIdName) {
    nodeIdName = nodeIdName + "_body";
    var pValueNode = document.getElementById(nodeIdName).getElementsByTagName("p").item(0);
    var selectValue = (pValueNode.className.split('!')[1]) || "";
    var selectIndex = (pValueNode.getAttribute("id").split('!')[1]) || "";
    var selectText = pValueNode.innerHTML;
    var jsonValue = { "selectValue": selectValue, "selectIndex": selectIndex, "selectText": selectText };
    return jsonValue;
}