var HXAreaJsonData = [{"Id":"403","AreaName":"\u9752\u5c9b","Domain":"qd","Hot":"1","Color":"#ff0000","PinYin":"qingdao","PY":"qd"},{"Id":"404","AreaName":"\u6d4e\u5357","Domain":"jn","Hot":"1","Color":"#ff0000","PinYin":"jinan","PY":"jn"}];var HXAreaDialogItemCss =
'<style type="text/css">' +
'.HXAreaDialogPopTop{position: absolute;top: -5px;left: -10px;font-size: 16px;color: #56b02a;width: 96px;height: 22px;border-top: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;padding: 4px 0px 0px 9px;background: #fff;z-index: 20;cursor: pointer;}' +
'.HXAreaDialogPopTop span{font-size: 16px;color: #56b02a;display: inline-block;}' +
'.HXAreaDialogPopTop i{display: inline-block;width: 8px;height: 6px;background: url("http://home.houxue.com/asset/images/sprite_header.png") no-repeat -46px -94px;padding-left: 5px;overflow: hidden;}' +
'.HXAreaDialogPopMid{width: 454px;height: auto;min-height: 212px;position: absolute;left: -10px;top: 21px;background: #fff;border: 1px solid #dedede;padding: 10px;z-index: 19;}' +
'.HXAreaDialogPopMidSearch{margin-top:5px;clear: both;}' +
'.HXAreaDialogPopMidSearch span{float: left;font-size: 12px;color: #666;font-weight: bold;height: 25px;line-height: 25px;display: inline-block;}' +
'.HXAreaDialogPopMidSearch input{ float: left;width: 202px;height: 25px;line-height: 25px;border: 1px solid #ddd;text-indent: 5px;font-size: 12px;outline: none;}' +
'.HXAreaDialogPopMidSearchRst{display:none;position:absolute;left:75px;top:38px;background-color:#fff;border:1px solid #ddd;border-top:0;width:99px;}'+
'.HXAreaDialogPopMidSearchRst div{border-bottom: 1px dashed gray;padding: 2px;}'+
'.HXAreaDialogPopMidSearchRst li{padding: 2px;}'+
'.HXAreaDialogPopMidSearchRst li:hover{background-color: #c8e3fc;}'+
'.HXAreaDialogPopMidSearchRst li a{display:block;}'+
'.HXAreaDialogPopMidTab{ clear: both;margin-top: 42px;width: 100%;height: 24px;border-bottom: 1px solid #ccc;line-height: 24px;}' +
'.HXAreaDialogPopMidTab a{display: block;float: left;border-top: 2px solid #fff;width: 66px;text-align: center;height: 23px;font-size: 12px;}' +
'.HXAreaDialogPopMidTab a.on{border-top: 2px solid #ed232f;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background: #fff;color: #ed232f;font-weight: bold;}' +
'.HXAreaDialogPopMidContItem{/*display:none;*/line-height:25px;margin-top:10px;}' +
'.HXAreaDialogPopMidContItem li{float: left;}' +
'.HXAreaDialogPopMidContItem li a{color:#666;padding:0 8px;float: left;margin-right: 10px;display: inline-block;overflow: hidden;white-space: nowrap;font-size:12px;}' +
'.HXAreaDialogPopMidContItem li a:hover{background:#F8F8F8;}' +
'.HXAreaDialogPopMidContItemLiL{text-align: center;width: 50px;color: #f4535c;}'+
'.HXAreaDialogPopMidContItemLiR{width:390px;}'+
'</style>',

HXAreaDialogItemTPL =
'<div class="HXAreaDialogPop">'+
    '<div class="HXAreaDialogPopTop"><span></span><i></i></div>'+
    '<div class="HXAreaDialogPopMid">'+
        '<div class="HXAreaDialogPopMidSearch">' +
            '<span>城市搜索：</span><input type="text" placeholder="拼音简码/中文">' +
            '<div class="HXAreaDialogPopMidSearchRst"><div></div><ul></ul><p></p></div>' +
            '</div>'+
        '<div class="HXAreaDialogPopMidTab"><a href="javascript:;" class="on">热门城市</a> <a href="javascript:;" class="">ABCD</a> <a href="javascript:;" class="">EFGHJ</a> <a href="javascript:;" class="">KLMNP</a> <a href="javascript:;" class="">QRSTW</a> <a href="javascript:;" class="">XYZ</a> </div>'+
        '<div class="HXAreaDialogPopMidCont"></div>'+
        '</div>'+
    '</div>';

var HXAreaDialogItem = function (options){this.init(options);};
HXAreaDialogItem.prototype = {
    init: function (options) {
        this.options = options;

        this.pop = $(HXAreaDialogItemTPL);
        this.popMidTop = this.pop.find('.HXAreaDialogPopTop');
        this.popMidSearchInput = this.pop.find('.HXAreaDialogPopMidSearch input');
        this.popMidSearchRst = this.pop.find('.HXAreaDialogPopMidSearchRst');
        this.popMidTab = this.pop.find('.HXAreaDialogPopMidTab');
        this.popMidCont = this.pop.find('.HXAreaDialogPopMidCont');

        //当前URI
        this.uri = '';
        if (window.location.pathname.indexOf('/') != -1) {
            var path =  window.location.pathname.split('/');
            if (path[1]) this.uri = path[1] + '/';
        }

        //当前城市名
        this.popMidTop.find('span').html(this.options.curAreaName);
        //渲染tab框架html
        var html = '';
        var tabs = [{'id':'1','name':'热门城市'},{'id': '2','name':'ABCD'}, {'id':'3','name':'EFGHJ'}, {'id':'4','name':'KLMNP'},{'id':'5','name':'QRSTW'},{'id':'6','name':'XYZ'}];
        for(var k in tabs){
            var tab = tabs[k];
            if(k==0){
                html += '<div class="HXAreaDialogPopMidContItem" style="display:block;">';
                html += '<ul><li class="HXAreaDialogPopMidContItemLiL">&nbsp;</li><li class="HXAreaDialogPopMidContItemLiR HXAreaDialogPopMidContItemHotLi"></li></ul>';
                html += '</div>';
            }else{
                html += '<div class="HXAreaDialogPopMidContItem">';
                var chars = tab.name.split('');
                for(var kk in chars){
                    var char = chars[kk];
                    html += '<ul><li class="HXAreaDialogPopMidContItemLiL">'+ char +'</li><li class="HXAreaDialogPopMidContItemLiR HXAreaDialogPopMidContItemLiR-'+ char +'"></li></ul>';
                }
                html += '</div>';
            }
        }
        this.popMidCont.append(html);

        //渲染城市html
        for(var k in HXAreaJsonData){
            var d = HXAreaJsonData[k];
            var ahtml = '<a href="http://'+d.Domain+'.smxuexi.com/'+ this.uri +'" data-aid="'+d.Id+'" data-domain="'+d.Domain+'"><font style="'+(d.Color!=undefined&&d.Color!='' ? 'color:'+d.Color : '')+'">'+ d.AreaName +'</font></a>';
            if(d.Hot!=undefined&&d.Hot){
                this.popMidCont.find('.HXAreaDialogPopMidContItemHotLi').append(ahtml);
            }
            var letter = d.PinYin.substr(0,1).toUpperCase();
            this.popMidCont.find('.HXAreaDialogPopMidContItemLiR-'+letter).append(ahtml);
        }
        this.pop.appendTo('#'+this.options.contId);

        var that = this;
        //绑定tab事件
        this.popMidTab.children().each(function(i){
            $(this).bind(that.options.eTabType, function(){
                that.popMidCont.children().hide().eq(i).show();
                $(this).addClass('on').siblings().removeClass('on');
                return false;
            });
            if( $(this).hasClass('on') ) {
                that.popMidCont.children().hide().eq(i).show();
            }
        })
        //绑定搜索事件
        this._search();
        //绑定a标签事件，改为a href点击取消此处
       // this._contAOnclick();
        //绑定主事件
        $('#'+this.options.id).mouseenter(function(){
            $('#'+that.options.contId).show();
        }).mouseleave(function(){
            $('#'+that.options.contId).hide();
        });
    },
    _search:function(){
        var that = this;
        this.popMidSearchInput.keyup(function(event){
            event = event || window.event;
            var text = $(this).val();
            if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 37 && event.keyCode != 39 && event.keyCode != 13 && event.keyCode != 9) {
                that._searchCity(text);
            }
        });
    },
    _searchCity: function (P) {
        //清空
        this.searchData = [];
        this.popMidSearchRst.children().first().html('');
        this.popMidSearchRst.find('p').html('');
        this.popMidSearchRst.hide();

        if (P.length == 0) {
            return;
        }
        var N = [];
        var M = /[^A-z]/.test(P);
        for(var k in HXAreaJsonData){
            var d = HXAreaJsonData[k];
            if (this._searchCityMatch(d, P, M)) {
                N.push(d);
            }
        }
        this.searchData = N;
        //结果提示
        var html = '';
        if(this.searchData.length>0){
            html += '按"<font color=red>' + this.popMidSearchInput.val() + '</font>"检索：';
        }else{
            html += '无法匹配:"<font color=red>' + this.popMidSearchInput.val() + '</font>';
        }
        this.popMidSearchRst.children().first().html(html);
        //结果内容
        this._searchShowCity(1);
    },
    _searchShowCity:function(page){
        if(this.searchData.length>0){
            var totalpages = Math.ceil(this.searchData.length/6);
            page = page>0 ? (page<totalpages ? page : totalpages) : 1;

            if(totalpages>1){
                var A = this.searchData.slice(6*(page-1),6*page);
            }else{
                var A = this.searchData;
            }

            var html = '';
            for(var k in A){
                var d = A[k];
                html += '<li><a href="http://'+d.Domain+'.smxuexi.com/'+ this.uri +'" data-aid="'+d.Id+'" data-domain="'+d.Domain+'">'+ d.AreaName +'</a></li>';
            }
            this.popMidSearchRst.find('ul').html(html);
           //取消a标签点击监听
           // this._searchLiAOnclick();

            html = '';
            if(totalpages>1){
                if(page>1) html += '<a href="javascript:void(0);" style="float:left;" data-page="'+(page-1)+'">« 向前</a>';
                if(page<totalpages)html += '<a href="javascript:void(0);" style="float:right;" data-page="'+(page+1)+'">向后» </a>';
                this.popMidSearchRst.find('p').html(html);
                this._searchPAOnclick();
            }
        }
        this.popMidSearchRst.show();
    },
    _aOnclick:function(aid,domain){
        var that = this;
        document.cookie = "houxue_aid=" + aid + ";path=/;domain=.smxuexi.com";
        if(that.options.eAType=='refresh'){
            window.location.reload();
        }
        if(that.options.eAType=='jump'){
            if(domain!='') window.location.href = 'http://'+ domain +'.smxuexi.com';
        }
        this.pop.hide();
    },
    _contAOnclick:function(){
        var that = this;
        this.popMidCont.find('a').click(function(){
            var aid = $(this).data('aid');
            var domain = $(this).data('domain');
            that._aOnclick(aid,domain);
        });
    },
    _searchLiAOnclick:function(){
        var that = this;
        this.popMidSearchRst.find('li a').click(function(){
            var aid = $(this).data('aid');
            var domain = $(this).data('domain');
            that._aOnclick(aid,domain);
        });
    },
    _searchPAOnclick:function(){
        var that = this;
        this.popMidSearchRst.find('p a').click(function(){
            var page = $(this).data('page');
            that._searchShowCity(page);
        });
    },
    _searchCityMatchReplaceChar: function(M, O, N) {
        return M.substr(0, O) + N + M.substr(O + 1, M.length - 1)
    },
    _searchCityMatch: function(R, U, O) {
        var U = U.toLowerCase();
        var N = [R.PY.toLowerCase(), R.AreaName, R.PinYin.toLowerCase()];
        var T = -1;
        var Q = -1;
        if (O) {
            U = U.split("");
            for (var P = 0; P < U.length; P++) {
                var W = N[1].indexOf(U[P]);
                if (W > T && W <= P) {
                    N[1] = this._searchCityMatchReplaceChar(N[1], W, "-");
                    T = W
                } else {
                    return false
                }
            }
        } else {
            U = U.split("");
            var M = true;
            var S = true;
            for (var P = 0; P < U.length; P++) {
                var W = N[0].indexOf(U[P]);
                if (W > T && W <= P) {
                    N[0] = this._searchCityMatchReplaceChar(N[0], W, "-");
                    T = W
                } else {
                    M = false;
                    break
                }
            }
            for (var P = 0; P < U.length; P++) {
                var V = N[2].indexOf(U[P]);
                if (V > Q && V <= P) {
                    N[2] = this._searchCityMatchReplaceChar(N[2], V, "-");
                    Q = V
                } else {
                    S = false;
                    break
                }
            }
            if ((M == false) && (S == false)) {
                return false
            }
        }
        return true
    }
};

var HXAreaDialog = function(options){
    options = options || {};
    options = $.extend(true, {}, HXAreaDialog.defaultSetting, options);

    api = HXAreaDialog.list[options.id];
    if(api) {return api.focus();}

    return HXAreaDialog.list[options.id] = new HXAreaDialogItem( options );
};

//对象列表
HXAreaDialog.list = {};
//默认设置
HXAreaDialog.defaultSetting = {
    id:'',
    contId:'',
    curAreaName:'青岛',
    eTabType:'mouseover',
    eAType:'select'    //refresh  jump  select
};
//加载css样式
document.write(HXAreaDialogItemCss);