function AreaSelecter(selecterName) {
    this.selecterName = selecterName;
    this.divCityData = null;
    this.objCityName = null;
    this.objProvinceID = null;
    this.objCityID = null;
    this.showProvince = null;

    this.init = function(objCityName, objProvinceID, objCityID, showProvince) {
        this.objCityName = objCityName;
        this.objProvinceID = objProvinceID;
        this.objCityID = objCityID;
        this.showProvince = showProvince;

        if (this.objProvinceID.value != "") this.openCity(this.objProvinceID.value);
        this.objCityName.value = this.getSelectedCityName();
        //this.setDefaultCity();
    }

    this.getStyle = function() {
        var str = '';
        str += '<style type="text/css">';
        str += 'a.pro_open, a.pro_close, a.city, a.selcity{ font-size:12px; float:left;padding:4px 5px 4px 20px;width:76px;color:#000;text-decoration:none; }';
        str += 'a.pro_open, a.pro_close:hover, a.selcity:hover{ background-color:#FFCC00; }';
        str += 'a.pro_open { background:url(http://images.hr33.com/image/dialog/open.gif) no-repeat 5px center; font-weight:bold; }';
        str += 'a.pro_close { background:url(http://images.hr33.com/image/dialog/close.gif) no-repeat 5px center; }';
        str += 'a.city{ padding:1px 1px 1px 5px; width:96px;cursor:default; }';
        str += 'a.selcity{ background:url(http://images.hr33.com/image/dialog/del.gif) no-repeat 5px center; padding:3px 0px 0px 22px; width:88px; }';
        str += 'a.selcity:hover{ background:#FFCC00 url(http://images.hr33.com/image/dialog/delhover.gif) no-repeat 5px center; }';
        str += '</style>';
        return str;
    }

    this.getDivBack = function() {
        var str = '<div id="divCityBack" style="filter:Alpha(Opacity=40);opacity:.4;background:#fff;z-index:999;position:absolute;left:0px;top:0px;"></div>';
        return str;
    }
    
    this.getIframe = function(){
        var str = '<iframe id="ifrCityMain" style="filter:Alpha(Opacity=0);opacity:0;position:absolute;width:650px;height:430px;display:none;"></iframe>';
        return str;
    }

    this.getDivCityData = function() {
        var str = '';
        str += '            <div style="padding:5px;height:22px;"><span style="font-size:12px; float:left; font-weight:bold; line-height:20px">' + arrlang[6] + '</span><span id="divCitySelected"></span></div>'; //已选项
        str += '            <div style="font-size:12px; background-color:#E9F8FE;border-top:1px dashed #006699;font-weight:bold;padding:5px;clear:both;color:#006699;">' + arrlang[0] + '</div>';
        str += '            <div id="divImportant">' + this.getImportantCity() + '</div>'; //重要城市
        str += '            <div style="font-size:12px; background-color:#E9F8FE;border-top:1px dashed #006699;font-weight:bold;padding:5px; clear:both;color:#006699;">' + arrlang[3] + '</div>';
        str += '            <div id="divProvince">' + this.getProvince() + '</div>'; //省份
        str += '            <div id="divCity">' + this.getCity() + '</div>'; //市区
        this.divCityData = str;
        return str;
    }

    this.getDivCityMain = function() {
        var str = '';
        str += this.getStyle();
        str += this.getDivBack();
        str += this.getIframe();
        str += '<div id="divCityMain" style="position:absolute;width:650px; display:none;">';
        str += '<table cellpadding="0" cellspacing="0" style="width:100%;cursor:move;" id="tbCityTitle">';
        str += '    <tr>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_t_l.gif);width:5px;height:30px;"></td>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_t_c.gif);"><div style="float:left;color:#ffffff;font-weight:bold;font-size:14px;padding:5px;">' + arrlang[1] + '(Ver 1.0 beta)</div><div style="float:right;"><a id="btnClose" href="javascript:void(0);"><img onmousedown="' + this.selecterName + '.closeDiv()" src="http://images.hr33.com/image/dialog/dia_ok.gif" style="border:0px;" /></a></div></td>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_t_r.gif);width:5px;height:30px;"></td>';
        str += '    </tr>';
        str += '</table>';
        str += '<table cellpadding="0" cellspacing="0" style="width:100%;">';
        str += '    <tr>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_m_l.gif);width:5px;"></td>';
        str += '        <td style="height:400px; background-color:#ffffff;" valign="top">';
        str += '        <div style="padding:8px 4px 5px 1px;" id="divCityData">';
        str += this.getDivCityData();
        str += '        </div>';
        str += '        </td>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_m_r.gif);width:6px;"></td>';
        str += '    </tr>';
        str += '    <tr>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_b_l.gif);width:5px;height:6px;"></td>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_b_c.gif);height:6px;"></td>';
        str += '        <td style="background:url(http://images.hr33.com/image/dialog/dia_b_r.gif);width:6px;height:6px;"></td>';
        str += '    </tr>';
        str += '</table>';
        str += '</div>';
        return str;
    }
    
    this.getImportantCity = function(){
        var str = '';
        str += '<table border="0" width="100%" cellpadding="0" cellspacing="5">';
        for(var i=0;i<arrimp.length;i++)
        {
            str += '    <tr>';
            str += '        <td style="width:80px;padding-top:3px;font-size:12px;" valign="top"><strong>' + arrimp[i][0] + '</strong></td>';
            str += '        <td valign="top">'
            for(var j=1;j<arrimp[i].length;j++)
            {
                str += '        <div id="divImpCity' + arrimp[i][j].itemid + '" style="float:left;width:78px;font-size:12px;"><input type="checkbox" id="chImpCity' + arrimp[i][j].itemid + '" value="' + arrimp[i][j].itemid + '" onclick="return ' + this.selecterName + '.selectCity(this, \'' + arrimp[i][j].itemname + '\')" /><label for="chImpCity' + arrimp[i][j].itemid + '">' + arrimp[i][j].itemname + '</label></div>';
            }
            str += '        </td>';
            str += '    </tr>';
        }
        str += '</table>';
        return str;
    }
    
    this.getProvince = function(){
        var str = '';
        str += '<table border="0" width="100%" cellpadding="0" cellspacing="5">';
        str += '    <tr>';
        str += '        <td>'
        for(var i=0;i<arrpro.length;i++) {
            if (!this.isProvinceShow(arrpro[i].classid)) continue;
            str += '        <a title="' + arrpro[i].classname + '" id="linkPro' + arrpro[i].classid + '" class="pro_close" href="javascript:' + this.selecterName + '.openCity(' + arrpro[i].classid + ')">' + arrpro[i].classname + '</a>';
        }
        str += '        </td>';
        str += '    </tr>';
        str += '</table>';
        return str;
    }

    this.getCity = function() {
        var str = '';
        for (var j = 0; j < arrpro.length; j++) {
            if (!this.isProvinceShow(arrpro[j].classid)) continue;
            str += '<div id="divCity' + arrpro[j].classid + '" style="display:none">';
            str += '<table border="0" width="100%" cellpadding="0" cellspacing="5">';
            str += '    <tr>';
            str += '        <td><a class="pro_open" style="float:left;width:auto;" href="javascript:' + this.selecterName + '.openCity(' + arrpro[j].classid + ')">' + arrpro[j].classname + '</a><a style="font-size:12px; float:left; margin-left:10px; padding-top:2px;text-decoration:none;color:#000;" href="javascript:' + this.selecterName + '.openCity(' + arrpro[j].classid + ')">[ ' + arrlang[7] + ' ]</a></td>';
            str += '    </tr>';
            str += '    <tr>';
            str += '        <td id="tdCity' + arrpro[j].classid + '"></td>'
            str += '    </tr>';
            str += '</table>';
            str += '</div>';
        }
        return str;
    }

    this.isProvinceShow = function(provinceID) {
        for (var i = 0; i < arrdis.length; i++) {
            if (provinceID == arrdis[i]) { return false; }
        }
        return true;
    }

    this.trimString = function(str, cnLen, enLen) {
        var maxLen = isEnglish ? enLen : cnLen;
        if (str.length > maxLen)
            str = str.substr(0, maxLen) + "...";
        return str;
    }

   this.getCityName = function(cityid)
   {
        var i;
        for(i=0;i<arrcity.length;i++)
        {
            if(arrcity[i].itemid==cityid)
                return arrcity[i].itemname; 
        }
        return ""; 
   }
   
   this.getSelectedCityName = function()
   {
        var idstr = this.objCityID.value;
        if(idstr=="") return "";
        if(idstr.indexOf(",")==-1) return this.getCityName(idstr);
        var arrid=idstr.split(",");
        var rvalue="";
        for(var i=0;i<arrid.length;i++)
        {
            var cityName = this.getCityName(arrid[i]);
            if(rvalue=="") rvalue = cityName;
            else if(cityName != ""){ rvalue += "、" + cityName; }
        }
        return rvalue;
   }
    
    this.selectCity = function(sender, cityName)
    {
        var chImpCity = document.getElementById("chImpCity" + sender.value);
        var chCity = document.getElementById("chCity" + sender.value);
    
        if(sender.checked)
        {
            var val = this.objCityID.value.split(",");
            if(val.length > 4)
            {
                alert(arrlang[5]);  
                return false; 
            }
            if(this.objCityID.value == "") this.objCityID.value = sender.value;
            else this.objCityID.value += ',' + sender.value;
            this.objCityName.value = this.getSelectedCityName();
            this.addCity(sender.value, cityName);

            if(chImpCity && sender != chImpCity) chImpCity.checked = true;
            if(chCity && sender != chCity) chCity.checked = true;
            
            // 如果选择省不限
            if(parseInt(sender.value) >= 1000) this.delOtherCity(parseInt(sender.value) / 1000);
        }
        else
        {
            if(chImpCity && sender != chImpCity) chImpCity.checked = false;
            if(chCity && sender != chCity) chCity.checked = false;
            this.delCity(sender.value);
            
            // 如果选择省不限
            if(parseInt(sender.value) >= 1000) this.setProvinceDisabled(parseInt(sender.value) / 1000, "");
        }
    }

    this.addCity = function(cityID, cityName) {
        var linkSelCity = getElem("linkSelCity" + cityID, "a", document.getElementById("divCitySelected"));
        linkSelCity.className = "selcity";
        linkSelCity.innerHTML = this.trimString(cityName, 6, 14);
        linkSelCity.href = "javascript:" + this.selecterName + ".delSelectedCity(" + cityID + ")";
        linkSelCity.title = arrlang[4] + cityName;
    }
    
    this.delSelectedCity = function(cityID)
    {
        this.delCity(cityID);
        
        var chImpCity = document.getElementById("chImpCity" + cityID);
        var chCity = document.getElementById("chCity" + cityID);
        if(chImpCity) chImpCity.checked = false;
        if(chCity) chCity.checked = false;
        
        // 如果选择省不限
        if(cityID >= 1000) this.setProvinceDisabled(cityID / 1000, "");
    }
    
    this.delCity = function(cityID)
    {
        var val = this.objCityID.value.split(",");
        var cityvalue = "";
        for(var i=0;i<val.length;i++)
        {
            if(val[i] != cityID)
            { 
                if(cityvalue=="") cityvalue = val[i];
                else cityvalue += ',' + val[i];
            }
        }
        this.objCityID.value = cityvalue;
        this.objCityName.value = this.getSelectedCityName();
        
        var linkSelCity = document.getElementById("linkSelCity" + cityID);
        var divCitySelected = document.getElementById("divCitySelected");
        if(linkSelCity) divCitySelected.removeChild(linkSelCity);
   }
    
   this.delOtherCity = function(provinceID)
   {
        for(var i=0;i<arrcity.length;i++)
        {
            if(arrcity[i].classid == provinceID && arrcity[i].itemid<1000)
            {
                this.delSelectedCity(arrcity[i].itemid);
                this.setCityDisabled(arrcity[i].itemid, "disabled");
            }
        }
   }
   
   this.setProvinceDisabled = function(provinceID, disabled)
   {
        for(var i=0;i<arrcity.length;i++)
        {
            if(arrcity[i].classid == provinceID && arrcity[i].itemid<1000)
            {
                var chCity = document.getElementById("chCity" + arrcity[i].itemid);
                var chImpCity = document.getElementById("chImpCity" + arrcity[i].itemid);
                if(chCity) chCity.disabled = disabled;
                if(chImpCity) chImpCity.disabled = disabled;
            }
        }
   }
   
   this.setCityDisabled = function(cityID, disabled)
   {
        var chCity = document.getElementById("chCity" + cityID);
        var chImpCity = document.getElementById("chImpCity" + cityID);
        if(chCity) chCity.disabled = disabled;
        if(chImpCity) chImpCity.disabled = disabled;
   }
    
   this.getProvinceID = function(cityid)
   {
        var i;
        for(i=0;i<arrcity.length;i++)
        {
            if(arrcity[i].itemid==cityid)
                return arrcity[i].classid; 
        }
        return 0; 
   }
    
    this.closeDiv = function()
    {
        var divCityBack = document.getElementById("divCityBack");
        divCityBack.style.display = "none";

        var divCityMain = document.getElementById("divCityMain");
        divCityMain.style.display = "none";
        
        var ifrCityMain = document.getElementById("ifrCityMain");
        ifrCityMain.style.display = "none";
    }

    this.getTdCityData = function(provinceId) {
        var str = '';
        for (var i = 0; i < arrcity.length; i++) {
            if (arrcity[i].classid == provinceId) {
                if (this.showProvince || arrcity[i].itemid < 1000) {
                    str += '        <a title="' + arrcity[i].itemname + '" id="linkCity' + arrcity[i].itemid + '" class="city" href="javascript:void(0)"' + (arrcity[i].itemid >= 1000 ? 'style="width:100%;"' : '') + '><input type="checkbox" id="chCity' + arrcity[i].itemid + '" value="' + arrcity[i].itemid + '" onclick="return ' + this.selecterName + '.selectCity(this, \'' + arrcity[i].itemname + '\')" /><label for="chCity' + arrcity[i].itemid + '">' + (arrcity[i].itemid >= 1000 ? arrcity[i].itemname : this.trimString(arrcity[i].itemname, 5, 12)) + '</label></a>';
                } 
            }
        }
        return str;
    }

    this.openCity = function(provinceId) {
        var divProvince = document.getElementById("divProvince");
        var divCity1 = document.getElementById("divCity" + provinceId);
        var tdCity1 = document.getElementById("tdCity" + provinceId);
        var linkPro1 = document.getElementById("linkPro" + provinceId);

        if (divCity1.style.display == "") {
            divProvince.style.display = "";
            divCity1.style.display = "none";
            linkPro1.className = "pro_close";
        }
        else {
            //            for(var i=0;i<arrpro.length;i++)
            //            {
            //                var divCity2 = document.getElementById("divCity" + arrpro[i].classid);
            //                var linkPro2 = document.getElementById("linkPro" + arrpro[i].classid);
            //                
            //                divCity2.style.display = "none";
            //                linkPro2.className = "pro_close";
            //            }
            if (tdCity1.innerHTML == "") {
                tdCity1.innerHTML = this.getTdCityData(provinceId);
                this.setDefaultCity();
            }
            divProvince.style.display = "none";
            divCity1.style.display = "";
            linkPro1.className = "pro_open";
        }
    }

    this.setDefaultCity = function() {
        var idstr = this.objCityID.value;
        if (idstr == "") return;
        var arrid = idstr.split(",");
        
        for (var i = 0; i < arrid.length; i++) {
            // 在选择器中显示默认选中城市
            this.addCity(arrid[i], this.getCityName(arrid[i]));

            // 如果选择省不限
            if (arrid[i] >= 1000) this.setProvinceDisabled(arrid[i] / 1000, "disabled");

            // 把默认选中的城市打上勾
            var chCity = document.getElementById("chCity" + arrid[i]);
            var chImpCity = document.getElementById("chImpCity" + arrid[i]);
            if (chCity) chCity.checked = true;
            if (chImpCity) chImpCity.checked = true;
        }
    }

    this.show = function(objCityName, objProvinceID, objCityID) {
        var divCityBack = document.getElementById("divCityBack");
        divCityBack.style.width = document.documentElement.clientWidth + "px";
        divCityBack.style.height = document.documentElement.scrollHeight + "px";
        if (getInt(divCityBack.style.height) < 768) divCityBack.style.height = "768px";
        divCityBack.style.display = "";

        var divCityMain = document.getElementById("divCityMain");
        divCityMain.style.left = ((document.documentElement.clientWidth - getInt(divCityMain.style.width)) / 2) + "px";
        divCityMain.style.top = ((screen.availHeight - 500) / 2 + document.documentElement.scrollTop - 100) + "px";
        divCityMain.style.zIndex = 1000;
        divCityMain.style.display = "";

        var ifrCityMain = document.getElementById("ifrCityMain");
        ifrCityMain.style.left = divCityMain.style.left;
        ifrCityMain.style.top = divCityMain.style.top;
        ifrCityMain.style.zIndex = divCityMain.style.zIndex - 1;
        ifrCityMain.style.display = "";

        var tbCityTitle = document.getElementById("tbCityTitle");
        tbCityTitle.onmousedown = function(evt) {
            curMoveObj = divCityMain;
            curMoveIframe = ifrCityMain;
            if (evt) { //firefox
                pX = evt.pageX - getInt(curMoveObj.style.left);
                pY = evt.pageY - getInt(curMoveObj.style.top);
            }
            else { //ie
                pX = event.x - curMoveObj.style.pixelLeft;
                pY = event.y - curMoveObj.style.pixelTop;
            }
        }

        // 复原数据区
        var divCityData = document.getElementById("divCityData");
        divCityData.innerHTML = this.divCityData;

        // 隐藏不限选项
        if (!this.showProvince) {
            for (var i = 0; i < arrpro.length; i++) {
                var divImpCity = document.getElementById("divImpCity" + (arrpro[i].classid * 1000));
                if (divImpCity) divImpCity.style.display = "none";
            }
        }

        // 初始化控件
        this.init(objCityName, objProvinceID, objCityID, this.showProvince);

        // 显示默认选中城市
        this.setDefaultCity();
    }
    
    this.toString = function(){
        return this.getDivCityMain();
    }
}

var areaSelecter = new AreaSelecter("areaSelecter");
document.write(areaSelecter);