﻿function CityMenu(c) {
    this.getObjTop = function(e) {
        var t = e.offsetTop;
        while (e = e.offsetParent) {
            t += e.offsetTop;
        }
        return t;
    }
    
    this.getObjLeft = function(e) {
        var l = e.offsetLeft;
        while (e = e.offsetParent) {
            l += e.offsetLeft;
        }
        return l;
    }

    this.getStyle = function(){
        var str = "";
        str += '<style type="text/css">';
        str += '.div_city { position:absolute; border:1px solid #7DB7EA; background:#E9F3FF; padding:5px; width:400px; }';
        str += '.div_item { padding:5px; width:55px; font-size:12px; float:left; color:#20659f; font-weight:normal; }';
        str += '</style>';
        return str;
    }

    this.toString = function() {
        var arrCity = new Array();
        arrCity[0] = "<a name='lnkChongQin' id='lnkChongQin' href='http://www.px33.com/Area/ChongQin.htm'>重庆</a>";
        arrCity[1] = "<a name='lnkTianJin' id='lnkTianJin' href='http://www.px33.com/Area/TianJin.htm'>天津</a>";
        arrCity[2] = "<a name='lnkAnhui' id='lnkAnhui' href='http://www.px33.com/Area/Anhui.htm'>安徽</a>";
        arrCity[3] = "<a name='lnkFujian' id='lnkFujian' href='http://www.px33.com/Area/Fujian.htm'>福建</a>";
        arrCity[4] = "<a name='lnkGuangdong' id='lnkGuangdong' href='http://www.px33.com/Area/Guangdong.htm'>广东</a>";
        arrCity[5] = "<a name='lnkGuangxi' id='lnkGuangxi' href='http://www.px33.com/Area/Guangxi.htm'>广西</a>";
        arrCity[6] = "<a name='lnkGuizhou' id='lnkGuizhou' href='http://www.px33.com/Area/Guizhou.htm'>贵州</a>";
        arrCity[7] = "<a name='lnkHebei' id='lnkHebei' href='http://www.px33.com/Area/Hebei.htm'>河北</a>";
        arrCity[8] = "<a name='lnkHeilongjiang' id='lnkHeilongjiang' href='http://www.px33.com/Area/Heilongjiang.htm'>黑龙江</a>";
        arrCity[9] = "<a name='lnkHenan' id='lnkHenan' href='http://www.px33.com/Area/Henan.htm'>河南</a>";
        arrCity[10] = "<a name='lnkHubei' id='lnkHubei' href='http://www.px33.com/Area/Hubei.htm'>湖北</a>";
        arrCity[11] = "<a name='lnkHunan' id='lnkHunan' href='http://www.px33.com/Area/Hunan.htm'>湖南</a>";
        arrCity[12] = "<a name='lnkJiangsu' id='lnkJiangsu' href='http://www.px33.com/Area/Jiangsu.htm'>江苏</a>";
        arrCity[13] = "<a name='lnkJiangxi' id='lnkJiangxi' href='http://www.px33.com/Area/Jiangxi.htm'>江西</a>";
        arrCity[14] = "<a name='lnkJilin' id='lnkJilin' href='http://www.px33.com/Area/Jilin.htm'>吉林</a>";
        arrCity[15] = "<a name='lnkLiaoning' id='lnkLiaoning' href='http://www.px33.com/Area/Liaoning.htm'>辽宁</a>";
        arrCity[16] = "<a name='lnkNanhai' id='lnkNanhai' href='http://www.px33.com/Area/Nanhai.htm'>海南</a>";
        arrCity[17] = "<a name='lnkShandong' id='lnkShandong' href='http://www.px33.com/Area/Shandong.htm'>山东</a>";
        arrCity[18] = "<a name='lnkShanxi' id='lnkShanxi' href='http://www.px33.com/Area/Shan-Xi.htm'>山西</a>";
        arrCity[19] = "<a name='lnkShanxi' id='lnkShanxi' href='http://www.px33.com/Area/Shanxi.htm'>陕西</a>";
        arrCity[20] = "<a name='lnkSichuan' id='lnkSichuan' href='http://www.px33.com/Area/Sichuan.htm'>四川</a>";
        arrCity[21] = "<a name='lnkYunnan' id='lnkYunnan' href='http://www.px33.com/Area/Yunnan.htm'>云南</a>";
        arrCity[22] = "<a name='lnkZhejiang' id='lnkZhejiang' href='http://www.px33.com/Area/Zhejiang.htm'>浙江</a>";

        var str = "";
        str += this.getStyle();
        str += '<div class="div_city" id="divCityMenu" style="display:none;z-index:1000;" onmouseover="this.style.display=\'\'" onmouseout="this.style.display=\'none\'">';
        for (var i = 0; i < arrCity.length; i++) {
            str += '<div class="div_item">' + arrCity[i] + '</div>';
        }
        str += '</div>';
        return str;
    }

    this.show = function(e) {
        var divCityMenu = document.getElementById("divCityMenu");
        divCityMenu.style.top = (this.getObjTop(e) + 18) + "px";
        divCityMenu.style.left = (this.getObjLeft(e) - 360) + "px";
        divCityMenu.style.display = "";
    }

    this.hid = function() {
        var divCityMenu = document.getElementById("divCityMenu");
        divCityMenu.style.display = "none";
    }
}

var cityMenu = new CityMenu('cityMenu');
document.write(cityMenu);