function PopupControl(namePrefix) {
    var _this = this;
    _this.Level = 2; //默认为显示2层的数据。
    _this.SelectedCount = 5; //最多选择几项，默认为5个。
    _this.ColumnNum = 3;
    _this.Prefix = "";
    _this.RootDataUrl = "";
    _this.ChildDataUrl = "";
    _this.SelectedValueUrl = "";
    _this.PopWindow = null;
    _this.divSelected = null; //显示选中框。
    _this.BtnOK = null;
    _this.BtnCancel = null;
    _this.RootControl = null;
    _this.RootControlTagName = "select";
    _this.ChildControlTagName = "";
    _this.RootDataDiv = null;
    _this.ChildDataDiv = null;
    _this.SelectedDataDiv = null;
    _this.SelectedValue = "";
    _this.SelectedName = "";
    _this.BgIframe = null;

    var init = function() {
        _this.Prefix = namePrefix;

        _this.PopWindow = document.getElementById(namePrefix + "divPopup");
        _this.divSelected = document.getElementById(namePrefix + "divSelected");
        _this.BtnOK = document.getElementById(namePrefix + "btnOk");
        _this.BtnCancel = document.getElementById(namePrefix + "btnCancel");

        _this.RootDataDiv = document.getElementById(namePrefix + "divRootData");
        _this.ChildDataDiv = document.getElementById(namePrefix + "divChildData");
        _this.SelectedDataDiv = document.getElementById(namePrefix + "divSelectedData");

        _this.PopWindow.style.display = "none";


        _this.divSelected.onclick = function() {
            Show();
        }

        _this.BtnOK.onclick = function() {
            SelectOk();
        }

        _this.BtnCancel.onclick = function() {
            Close();
        }
    }
    init();

    _this.GetChildDataList = function() {
        var selectedDataList = _this.ChildDataDiv.getElementsByTagName("input");
        return selectedDataList;
    }

    _this.GetSelectedDataList = function() {
        var selectedDataList = _this.SelectedDataDiv.getElementsByTagName("input");
        return selectedDataList;
    }

    _this.GetJsonData = function(url) {
        var xmlhttp;
        if (document.all)
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        else
            xmlhttp = new XMLHttpRequest();

        xmlhttp.open("GET", url, false);
        xmlhttp.send("");
        var jsonStr = xmlhttp.responseText;
        //alert(jsonStr);
        var data;
        try {
            data = JSON.parse(jsonStr);
        } catch (e) {
            data = null;
        }
        return data;
    }

    _this.InitRootData = function() {

        switch (_this.Level) {
            case 1:
                var childControl;
                var childLabel;
                var childDataArray = _this.GetJsonData(_this.ChildDataUrl);

                if (childDataArray == null)
                    break;

                var ul = document.createElement("ul");
                var li = null;
                var column = 0;
                for (var index = 0; index < childDataArray.length; index++) {
                    li = document.createElement("li");
                    li.style.width = 400 / _this.ColumnNum + "px";
                    childControl = document.createElement("input");
                    childControl.setAttribute("id", _this.Prefix + "childData");
                    childControl.setAttribute("name", _this.Prefix + "childData");
                    childControl.setAttribute("type", "checkbox");
                    childControl.setAttribute("value", childDataArray[index].Value);
                    //childControl.disabled = parentControl.checked;
                    childControl.defaultChecked = IsSelected(childDataArray[index].Value);

                    childControl.onclick = function() {
                        Select(this);
                    }

                    childLabel = document.createTextNode(childDataArray[index].Name);
                    li.appendChild(childControl);
                    li.appendChild(childLabel);
                    ul.appendChild(li);
                }
                _this.ChildDataDiv.appendChild(ul);
                break;
            case 2:
                var rootDataArray = _this.GetJsonData(_this.RootDataUrl);
                if (rootDataArray == null)
                    break;
                _this.RootControl = document.createElement(_this.RootControlTagName);
                _this.RootControl.setAttribute("id", _this.Prefix + "rootControl");
                _this.RootDataDiv.appendChild(_this.RootControl);

                _this.RootControl.onchange = function() {
                    GetChildData(this.value);
                }

                var firstItem = new Option("请选择大类", "");
                _this.RootControl.options.add(firstItem);

                for (var index = 0; index < rootDataArray.length; index++) {
                    var item = new Option(rootDataArray[index].Name, rootDataArray[index].Value);
                    _this.RootControl.options.add(item);
                }
                break;
        }
    }

    var GetChildData = function(parentValue) {
        var parentName = GetRootName(parentValue);
        var parentControl;
        var parentLabel;
        var parentMsg;
        var childControl;
        var childLabel;

        _this.ChildDataDiv.innerHTML = "";
        var childDataArray = _this.GetJsonData(_this.ChildDataUrl + parentValue);
        if (childDataArray == null)
            return;

        parentControl = document.createElement("input");
        parentControl.setAttribute("id", _this.Prefix + "parentData");
        parentControl.setAttribute("name", _this.Prefix + "parentData");
        parentControl.setAttribute("type", "checkbox");
        parentControl.setAttribute("value", parentValue);

        parentControl.defaultChecked = IsSelected(parentValue);

        parentControl.onclick = function() {
            Select(this);
        }

        parentLabel = document.createTextNode(GetRootName(parentValue));
        parentMsg = document.createTextNode("(选择此大类,则包括以下所有小类)");

        var b = document.createElement("b");

        b.appendChild(parentControl);
        b.appendChild(parentLabel);
        b.appendChild(parentMsg);

        _this.ChildDataDiv.appendChild(b);

        var ul = document.createElement("ul");
        var li = null;

        for (var index = 0; index < childDataArray.length; index++) {
            li = document.createElement("li");
            li.style.width = 400 / _this.ColumnNum + "px";
            childControl = document.createElement("input");
            childControl.setAttribute("id", _this.Prefix + "childData");
            childControl.setAttribute("name", _this.Prefix + "childData");
            childControl.setAttribute("type", "checkbox");
            childControl.setAttribute("value", childDataArray[index].Value);
            childControl.disabled = parentControl.checked;
            childControl.defaultChecked = IsSelected(childDataArray[index].Value);

            childControl.onclick = function() {
                Select(this);
            }

            childLabel = document.createTextNode(childDataArray[index].Name);
            li.appendChild(childControl);
            li.appendChild(childLabel);
            ul.appendChild(li);
        }

        _this.ChildDataDiv.appendChild(ul);
    }

    var IsSelected = function(dataValue) {
        //用于同步已经选中的项。
        var selectedDataList = _this.GetSelectedDataList();
        var isSelected = false;
        for (var i = 0; i < selectedDataList.length; i++) {
            //alert(selectedDataList[i].value + "==" + dataValue);
            if (selectedDataList[i].value == dataValue) {
                isSelected = true;
                break;
            }
        }
        return isSelected;
    }

    var GetRootName = function(rootValue) {
        //alert(_this.RootControl.options.length);
        for (var i = 0; i < _this.RootControl.options.length; i++) {
            if (_this.RootControl.options[i].value == rootValue) {
                return _this.RootControl.options[i].text;
                break;
            }
        }
        return "";
    }

    var Select = function(obj) {
        var childDataList = _this.GetChildDataList();
        var selectedDataList = _this.GetSelectedDataList();

        if (obj.name == _this.Prefix + "parentData") {//选中大类时。
            for (var i = 0; i < childDataList.length; i++) {
                if (childDataList.item(i).name == _this.Prefix + "childData")
                    childDataList.item(i).disabled = obj.checked; //选择大类时，禁用或启用小类。
                else
                    continue;

                if (obj.checked) {
                    childDataList.item(i).checked = false;
                    for (var j = 0; j < selectedDataList.length; j++) {//选中大类时，去掉已经选择的小类。
                        if (selectedDataList.item(j).value == childDataList.item(i).value) {
                            _this.SelectedDataDiv.removeChild(selectedDataList.item(j).nextSibling);
                            _this.SelectedDataDiv.removeChild(selectedDataList.item(j));
                        }
                    }
                }
            }
        } //选中大类时结束。
        var needAdd = true;
        for (var i = 0; i < selectedDataList.length; i++) {

            if (selectedDataList[i].value == obj.value) {
                if (obj.checked) {
                    needAdd = false;
                    break;
                } else {
                    needAdd = false;
                    _this.SelectedDataDiv.removeChild(selectedDataList[i].nextSibling);
                    _this.SelectedDataDiv.removeChild(selectedDataList[i]);
                }
            }
        }

        if (needAdd) {
            if (selectedDataList.length >= _this.SelectedCount) {
                obj.checked = false;
                alert("最多选择" + _this.SelectedCount + "项。");
            }
            else {
                //str = '<input type="checkbox" checked="checked" name="cblSelectedCity" onclick="RemoveSelected(this);" value="' + obj.value + '"/>';
                var selectedData = document.createElement("input");
                selectedData.setAttribute("name", _this.Prefix + "selectedData");
                selectedData.setAttribute("type", "checkbox");
                selectedData.setAttribute("value", obj.value);
                selectedData.defaultChecked = obj.checked;
                //alert(selectedData.checked);

                selectedData.onclick = function() {
                    _this.RemoveSelected(this);
                }

                _this.SelectedDataDiv.appendChild(selectedData);
                _this.SelectedDataDiv.appendChild(document.createTextNode(obj.nextSibling.nodeValue));
            }
        }
    }

    var AddToSelected = function(objValue) {
        var selectedData = document.createElement("input");
        selectedData.setAttribute("name", _this.Prefix + "selectedData");
        selectedData.setAttribute("type", "checkbox");
        selectedData.setAttribute("value", obj.value);
        selectedData.defaultChecked = obj.checked;

        selectedData.onclick = function() {
            _this.RemoveSelected(this);
        }

        _this.SelectedDataDiv.appendChild(selectedData);
        _this.SelectedDataDiv.appendChild(document.createTextNode(obj.nextSibling.nodeValue));
    }

    _this.RemoveSelected = function(obj) {
        var selectedDataList = this.GetSelectedDataList();
        for (var i = 0; i < selectedDataList.length; i++) {

            if (selectedDataList[i].value == obj.value) {
                _this.SelectedDataDiv.removeChild(selectedDataList[i].nextSibling);
                _this.SelectedDataDiv.removeChild(selectedDataList[i]);

                var childDataList = _this.ChildDataDiv.getElementsByTagName("input");
                for (var j = 0; j < childDataList.length; j++) {
                    childDataList[j].disabled = false;
                    if (childDataList[j].value == obj.value) {
                        childDataList[j].checked = obj.checked;
                    }
                }
            }

        }
    }

    var SelectOk = function() {
        var SelectedValueName = "";
        _this.SelectedValue = "";
        var tagList = _this.GetSelectedDataList();

        for (var i = 0; i < tagList.length; i++) {
            if (SelectedValueName.length == 0) {
                SelectedValueName = tagList[i].nextSibling.nodeValue;
                _this.SelectedValue = tagList[i].value;
            } else {
                SelectedValueName += "," + tagList[i].nextSibling.nodeValue;
                _this.SelectedValue += "," + tagList[i].value;
            }
        }
        _this.divSelected.innerHTML = "";
        _this.divSelected.appendChild(document.createTextNode(SelectedValueName));
        Close();
    }
        
    var getAbsolutePos = function(el) {
        var SL = 0, ST = 0;
        var is_div = /^div$/i.test(el.tagName);
        if (is_div && el.scrollLeft)
            SL = el.scrollLeft;
        if (is_div && el.scrollTop)
            ST = el.scrollTop;
        var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
        if (el.offsetParent) {
            var tmp = getAbsolutePos(el.offsetParent);
            r.x += tmp.x;
            r.y += tmp.y;
        }
        return r;
    }

    var SetPosition = function() {
        var pos = getAbsolutePos(_this.divSelected);
        var left = pos.x,
        top = pos.y + _this.divSelected.offsetHeight,
        popWindowWidth = _this.PopWindow.offsetWidth,
        popWindowHeight = _this.PopWindow.offsetHeight;
        if (document.body.offsetHeight < (top + popWindowHeight)) {
            top = pos.y - popWindowHeight;
        }
        if (document.body.offsetWidth < (pos.x + popWindowWidth)) {
            left = pos.x + _this.divSelected.offsetWidth - popWindowWidth;
        }

        if (left < 0) left = 0;
        if (top < 0) top = 0;
        _this.PopWindow.style.left = left;
        _this.PopWindow.style.top = top;

    }

    var GetPopWindowBg = function() {
        var popWindoBg = document.getElementById("popWindoBg");
        if (popWindoBg == null) {
            popWindoBg = document.createElement("div");
            popWindoBg.id = "popWindoBg";
            popWindoBg.className = "popWindowBg";

            if (IsIE6() == true) {

                var bgIframe = null;
                bgIframe = document.createElement("iframe");
                bgIframe.setAttribute("src", "");

                bgIframe.style.cssText = "position:absolute;top:0px;left:0px;width:100%;height:100%; filter: alpha(opacity=0); opacity: 0; z-index:-1;";
                popWindoBg.appendChild(bgIframe);

            }

            document.body.appendChild(popWindoBg);
        }
        popWindoBg.style.display = "none";
        return popWindoBg;
    }

    var IsIE6 = function() {
        var b = new Browser();
        if (b.isIE == true && b.version == "6")
            return true;
        else
            return false;
    }
    
    var Show = function() {
        if (_this.IsInit == false) {
            document.body.appendChild(_this.PopWindow);
            _this.InitRootData();
        }

        var popWindoBg = GetPopWindowBg();
        popWindoBg.style.display = 'block';
        _this.PopWindow.style.display = "block";

        SetPosition();
    }

    var Close = function() {
        _this.PopWindow.style.display = "none";
        var popWindoBg = GetPopWindowBg();
        popWindoBg.style.display = 'none';
    }

    _this.SetSelectedValue = function(selectedValue) {
        _this.SelectedValue = selectedValue;
        var list = _this.GetJsonData(_this.SelectedValueUrl + selectedValue);
        if (list == null)
            return;

        _this.SelectedName = "";

        _this.SelectedDataDiv.innerHTML = "";

        for (var i = 0; i < list.length; i++) {
            if (_this.SelectedName.length == 0) {
                _this.SelectedName = list[i].Name;
            } else {
                _this.SelectedName += "," + list[i].Name;
            }

            var selectedData = document.createElement("input");
            selectedData.setAttribute("name", _this.Prefix + "selectedData");
            selectedData.setAttribute("type", "checkbox");
            selectedData.setAttribute("value", list[i].Value);
            selectedData.defaultChecked = true;

            selectedData.onclick = function() {
                _this.RemoveSelected(this);
            }

            _this.SelectedDataDiv.appendChild(selectedData);
            _this.SelectedDataDiv.appendChild(document.createTextNode(list[i].Name));
        }

        _this.divSelected.innerHTML = "";
        _this.divSelected.appendChild(document.createTextNode(_this.SelectedName));
    }
}
function Browser() {

    var ua, s, i;

    this.isIE = false;   // Internet Explorer
    this.isNS = false;   // Netscape
    this.version = null;

    ua = navigator.userAgent;

    s = "MSIE";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
    }

    s = "Netscape6/";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
    }

    // Treat any other "Gecko" browser as NS 6.1.

    s = "Gecko";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = 6.1;
        return;
    }
}