/* *
 * 全局空间 Vcity
 * */
var Vcity = {};
Vcity.inputname = "";
/* *
 * 静态方法集
 * @name _m
 * */
Vcity._m = {
    /* 选择元素 */
    $:function (arg, context) {
        var tagAll, n, eles = [], i, sub = arg.substring(1);
        context = context || document;
        if (typeof arg == 'string') {
            switch (arg.charAt(0)) {
                case '#':
                    return document.getElementById(sub);
                    break;
                case '.':
                    if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                    tagAll = Vcity._m.$('*', context);
                    n = tagAll.length;
                    for (i = 0; i < n; i++) {
                        if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    },

    /* 绑定事件 */
    on:function (node, type, handler) {
        node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
    },

    /* 获取事件 */
    getEvent:function(event){
        return event || window.event;
    },

    /* 获取事件目标 */
    getTarget:function(event){
        return event.target || event.srcElement;
    },

    /* 获取元素位置 */
    getPos:function (node) {
        var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                scrollt = document.documentElement.scrollTop || document.body.scrollTop;
        var pos = node.getBoundingClientRect();
       
        if (node.id == "y16" || node.id == "y17" || node.id == "y18" || node.id == "y19" || node.id == "y20" || node.id == "y21" || node.id == "y22" || node.id == "y23" || node.id == "y24" || node.id == "y25" || node.id == "y26" || node.id == "y27" || node.id == "y28" || node.id == "y29" || node.id == "y30") {
            return { top: pos.top + scrollt, right: pos.right + scrollx, bottom: pos.bottom + scrollt, left: pos.left + scrollx }
        }
        else {
            return { top: pos.top + scrollt, right: pos.right + scrollx, bottom: pos.bottom + scrollt - 30, left: pos.left + scrollx + 283 }
        }
    },

    /* 添加样式名 */
    addClass:function (c, node) {
        if(!node)return;
        node.className = Vcity._m.hasClass(c,node) ? node.className : node.className + ' ' + c ;
    },

    /* 移除样式名 */
    removeClass:function (c, node) {
        var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
        if(!Vcity._m.hasClass(c,node))return;
        node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
    },

    /* 是否含有CLASS */
    hasClass:function (c, node) {
        if(!node || !node.className)return false;
        return node.className.indexOf(c)>-1;
    },

    /* 阻止冒泡 */
    stopPropagation:function (event) {
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    },
    /* 去除两端空格 */
    trim:function (str) {
        return str.replace(/^\s+|\s+$/g,'');
    }
};

/* 所有城市数据,可以按照格式自行添加（北京|beijing|bj），前16条为热门城市 */

//Vcity.allCity = ['鸡脯肉|jipurou|jpr', '花生米|huashengmi|hsm', '葱|chong|c', '姜|jiang|j', '干辣椒|ganlanjiao|glj', '花椒|huajiao|hj', '色拉油|shelayou|sly', '食盐|shiyan|sy', '料酒|liaojiu|lj', '味精|weiji|wj', '酱油|jiangyou|jy', '白糖|baitang|bt', '醋|chu|c', '水淀粉|shuidianhun|sdh', '电子称|dianzicheng|dzc', '封口机|fengkouji|fkj', '搅拌机|jiaobanji|jbj', '塑料盒|shuliaohe|slh', '铁盒子|tiehezi|thz'];
//Vcity.allCity = ['草鱼|caoyu|cy', '重草鱼|caoyu|cy', '斤重鳜鱼|jueyu|jy', '整鸡|zhengji|zj', '鳜鱼|jueyu|jy', '鲈鱼|luyu|ly', '重草鱼|caoyu|cy', '2斤重大鲜墨鱼|daxianmoyu|dxmy', '3斤重三黄鸡|sanhuangji|shj', '502胶水|jiaoshui|js', '安格斯小牛柳|angeshixiaoniuliu|agsxll', '安佳淡奶油|anjiadannaiyou|ny', '白菜|baicai|bc', '白酒醋|baijiuchu|bjc', '白兰地|bailandi|bld', '白萝卜|bailuobo|blb', '白糖|baitang|bt', '白芝麻|baizima|bzm', '宝塔菜|baotacai|btc', '冰冻薯条|bingdongshutiao|bdst', '冰鲜大虾|bingxiandaxia|bxdx', '菠萝|boluo|bl', '薄荷叶|boheye|bhy', '菜油|caiyou|cy', '草茴香|caohuixiang|chx', '草莓顶料|caomeidingliao|cmdl', '车达芝士片|chedazhishipian|cdzsp', '橙子|chengzi|cz', '刺身金枪鱼|chishengjingqiangyu|csjqy', '葱|chong|c', '醋|chu|c', '大葱|dacong|dc', '大枣|dazao|dz', '带皮青笋|daipiqingsun|dpqs', '带皮猪坐臀肉|daipizhuzhudunrou|dpzzzr''淡奶油|dainaiyou|dny', '蛋黄酱|danhuangjiang|dhj', '电子称|dianzicheng|dzc', '刁草|diaocao|dc', '冬荫功酱|dongyingongjiang|dygj', '冻鸡脯|dongjipu|djp', '冻鸡腿|dongjitui|djt', '豆腐|doufu|df', '豆沙软|dousha|ds', '豆沙馅|doushaxian|dsx', '法香|faxiang|fx', '番茄膏|fangqiegao|fqg', '蕃茄|fangqie|fq', '封口机|fengkouji|fkj', '伏特加|futiejia|ftj', '干辣椒|ganlajiao|glj', '狗芽生菜|gouyashengcai|gysc', '枸杞|gouji|gj', '灌装装小洋葱|guanzhuangxiaoyangcong|gzxyc', '广胡|guanghu|gh', '哈密瓜|hamigua|hmg', '核桃仁|hetangren|htr', '黑椒碎|heijiaoshui|hjs', '红葱头|hongcongtou|hct', '红尖椒|hongjianjiao|hjj', '红咖喱酱|honggalijiang|hglj', '红曲粉|hongqufen|hqf', '红小米椒|hongxiaomijiao|hxmj', '红心红薯|hongxinhongshu|hxhs', '花椒|huajiao|hj', '花椒粉|huangjiaofen|hjf', '花生米|huashengmi|hsm', '黄瓜|huanggua|hglj', '黄咖喱粉|huanggalifen|hglf', '黄汁粉|huangzifen|hzf', '茴香根|huixianggen|hxg', '火龙果|huolongguo|hlg', '鸡蛋|jidan|jd', '鸡脯肉|jipurou|jpr', '鸡爪|jizhua|jz', '姜|jiang|j', '豇豆|gangdou|gd', '酱油|jiangyou|jy', '搅拌机|jiaobaoji|jbj', '金华火腿|jinghuahuotui|jhht', '净青笋|jingqingsun|jqs', '净猪里脊|jingzhuliji|jzlj', '九层塔|jiucenta|jct', '韭菜|jiucai|jc', '咖喱油|galiyou|gly', '矿泉水|kuangquanshui|kqs', '蓝莓干|lanmeigan|lmg', '朗姆酒|langmujiu|lmj', '梨子|lizhi|lz', '李锦记旧庄耗油|lijingjijiuzhuanghangyou|hy', '料酒|liaojiu|lj', '芦笋|lusun|ls', '卤鸭脯|luyapu|lyp', '绿茶粉|lucafen|lcf', '绿咖喱酱（美人牌）|lugalijiang|lglj', '罗马生菜|luomashengcai|lmsc', '麦芽糖|maiyatang|myt', '蔓越莓干|mayumeigan|mymg', '猕猴桃|mihoutao|mht', '面包糠|mianbaotang|mbt', '蘑菇|mogu|mg', '奶油芝士|naiyouzishi|nyzs', '南瓜粉|nanguafen|ngf', '南姜|nanjiang|nj', '柠檬|ningmeng|nm', '柠檬叶|ningmengye|nmy', '牛边角肉|niubianjiaorou|nbjr', '牛骨|niugu|ngf', '牛里脊|niuliji|nlj', '牛柳|niuliu|nl', '牛腩|niunan|nn', '牛肉|niurou|nr', '糯米粉|luomifen|lmf', '糯米纸蝴蝶|luomizhihudie|lmzhd', '欧芹|ouqin|oq', '藕|ou|o', '培根|peigeng|pg', '瓢儿白|piaoerbai|peb', '苹果|pingguo|pg', '葡萄干|putaogan|ptg', '巧克力酱|qiaokelijiang|qklj', '茄子|qiezi|qz', '芹菜|qincai|qc', '青豆|qingdou|qd', '青二金条|qingerjingtiao|qejt', '青椒|qingjiao|qj', '青咖喱酱|qinggalijiang|qglj', '青豌豆|qingwandou|qwd', '青小米椒|qingxiaomijiao|qxmj', '琼脂|qingzhi|qz', '去骨鸡腿肉|qugujituirou|qgjtr', '去皮猪后腿肉|qupizhuhoutuirou|qpzhtr', '肉蟹|rouxie|rx', '三花淡奶|sanhuadannai|shdn', '三文鱼|sanwenyu|swy', '三文治火腿|sanwenzihuotui|swzht', '三月瓜|sanyuegua|syg', '色拉油|selayou|sly', '沙拉米肠|salamicang|slmc', '生蚝|shenghao|sh', '生猪板油|shengzhubanyou|szby', '圣女果|shengnvguo|sng', '食盐|shiyan|sy', '手工韭菜水饺|shougoujiucaishuijiao|sgjcsj', '寿司醋|sousichu|ssc', '寿司海苔|sousihaitai|ssht', '熟黄豆粉|shuhuangdoufen|shdf', '熟卤牛肉|shuluniurou|slnr', '熟猪大肠头|shuzhudacangtou|szdct', '水淀粉|shuidianhun|sdh', '水果类12|shuiguolei|sgl', '水果类3|shuiguolei|sgl', '水果类4|shuiguolei|sgl', '四季豆|sijidou|sjd', '塑料盒||', '蒜苗|shuanmiao|sm', '蒜泥|suanni|sn', '梭子蟹|shuozixie|szx', '泰国香米|taiguoxiangmi|tgxm', '泰国圆茄子|taiguoyuanqiezi|tgyqz', '糖粉|tangfen|tf', '甜椒|tianjiao|tj', '铁盒子||', '土豆|tudou|td', '吐司|tusi|ts', '吐司面包|tusimianbao|tsmb', '吞拿鱼|tunlayu|tny', '娃娃菜|wawacai|wwc', '味精||', '五彩牙签|wucaiyaqian|wcyq', '五香豆腐干|wuxiangdoufugan|wxdfg', '五香粉|wuxiangfen|wxf', '西瓜|xigua|xg', '西兰花|xilanhua|xlh', '西芹|xiqin|xq', '西洋菜|xiyangcai|xyc', '鲜薄荷叶|xianboheye|xbhy', '鲜草菇|xiancaogu|xcg', '鲜鸡中翅|xiangjizhongci|xjzc', '鲜罗勒|xianluole|xll', '鲜鱿鱼须|xianyouyuxu|xyyx', '香槟酒|xiangbingjiu|xbj', '香菜|xiangcai|xc', '香草豆荚|xiangcaodoujia|xcdj', '香葱|xiangcong|xc', '香菇|xianggu|xg', '香蕉|xiangjiao|xj', '香茅草|xiangmaocao|xmc', '小白菜|xiaobaicai|xbc', '小活鳝鱼（笔杆粗）|xiaohuosanyu|xhsy', '心里美|xinlimei|xlm', '新鲜草莓|caomei|cm', '新鲜橙汁|chengzhi|cz', '杏仁粉|xinrefei|xrf', '鳕鱼|xueyu|xy', '烟熏三文鱼|yanxusanwenyu|yxswy', '烟熏鸭胸|yanxuyaxiong|yxyx', '洋葱|yangcong|yc', '腰果|yaoguo|yg', '意大利面|yidalimian|ydlm', '银耳|yiner|ye', '银鱼柳|yinyuliu|yyl', '樱桃小番茄|yintaoxiaofanqie|ytxfq', '鹰粟粉|yingsufen|ysf', '鱼骨|yugu|yg', '鱼胶片|yujiaopian|yjp', '玉米粉|yumifen|ymf', '玉米笋罐头|yumisunguantou|ymsgt', '原味酸奶|yuanweisuannai|ywsn', '珍珠米|zhengzhumi|zzm', '芝麻菜|zhimacai|zmc', '直叶生菜|zhiyeshengcai|zysc', '植脂鲜奶油|zhizixiannaiyou|zzxny', '中筋粉|zongjiefen|zjf', '猪肥膘|zhufeipiao|zfp', '猪绞肉|zhujiaorou|zjr', '紫金椒酱|zhijingjiaojiang|zjjj'];
Vcity.allCity = ['安格斯小牛柳|angeshixiaoniuliu|agsxll', '安佳淡奶油|anjiadannaiyou|ny', '白菜|baicai|bc', '白酒醋|baijiuchu|bjc', '白兰地|bailandi|bld', '白萝卜|bailuobo|blb', '白糖|baitang|bt', '白芝麻|baizima|bzm', '宝塔菜|baotacai|btc', '冰冻薯条|bingdongshutiao|bdst', '冰鲜大虾|bingxiandaxia|bxdx', '菠萝|boluo|bl', '薄荷叶|boheye|bhy', '菜油|caiyou|cy', '草茴香|caohuixiang|chx', '草莓顶料|caomeidingliao|cmdl', '草鱼|caoyu|cy', '车达芝士片|chedazhishipian|cdzsp', '橙子|chengzi|cz', '刺身金枪鱼|chishengjingqiangyu|csjqy', '葱|chong|c', '醋|chu|c', '大葱|dacong|dc', '大枣|dazao|dz', '带皮青笋|daipiqingsun|dpqs', '带皮猪坐臀肉|daipizhuzhudunrou|dpzzzr', '淡奶油|dainaiyou|dny', '蛋黄酱|danhuangjiang|dhj', '电子称|dianzicheng|dzc', '刁草|diaocao|dc', '冬荫功酱|dongyingongjiang|dygj', '冻鸡脯|dongjipu|djp', '冻鸡腿|dongjitui|djt', '豆腐|doufu|df', '豆沙软|dousha|ds', '豆沙馅|doushaxian|dsx', '法香|faxiang|fx', '番茄膏|fangqiegao|fqg', '蕃茄|fangqie|fq', '封口机|fengkouji|fkj', '伏特加|futiejia|ftj', '干辣椒|ganlajiao|glj', '狗芽生菜|gouyashengcai|gysc', '枸杞|gouji|gj', '灌装装小洋葱|guanzhuangxiaoyangcong|gzxyc', '广胡|guanghu|gh', '哈密瓜|hamigua|hmg', '核桃仁|hetangren|htr', '黑椒碎|heijiaoshui|hjs', '红葱头|hongcongtou|hct', '红尖椒|hongjianjiao|hjj', '红咖喱酱|honggalijiang|hglj', '红曲粉|hongqufen|hqf', '红小米椒|hongxiaomijiao|hxmj', '红心红薯|hongxinhongshu|hxhs', '花椒|huajiao|hj', '花椒粉|huangjiaofen|hjf', '花生米|huashengmi|hsm', '黄瓜|huanggua|hglj', '黄咖喱粉|huanggalifen|hglf', '黄汁粉|huangzifen|hzf', '茴香根|huixianggen|hxg'];
/* 正则表达式 筛选中文城市名、拼音、首字母 */

Vcity.regEx = /^([\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*$/i;
Vcity.regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/;

/* *
 * 格式化城市数组为对象oCity，按照a-h,i-p,q-z,hot热门城市分组：
 * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}
 * */
(function () {
    var citys = Vcity.allCity, match, letter,
            regEx = Vcity.regEx,
            reg2 = /^[a-b]$/i, reg3 = /^[c-d]$/i, reg4 = /^[e-g]$/i,reg5 = /^[h]$/i,reg6 = /^[j]$/i,reg7 = /^[k-l]$/i,reg8 =  /^[m-p]$/i,reg9 =  /^[q-r]$/i,reg10 =  /^[s]$/i,reg11 =  /^[t]$/i,reg12 =  /^[w]$/i,reg13 =  /^[x]$/i,reg14 =  /^[y]$/i,reg15 =  /^[z]$/i;
    if (!Vcity.oCity) {
        Vcity.oCity = {hot:{},AB:{},CD:{},EFG:{},H:{},J:{},KL:{},MNP:{},QR:{},S:{},T:{},W:{},X:{},Y:{},Z:{}};
        //console.log(citys.length);
        for (var i = 0, n = citys.length; i < n; i++) {
            match = regEx.exec(citys[i]);
            letter = match[3].toUpperCase();
            if (reg2.test(letter)) {
                if (!Vcity.oCity.AB[letter]) Vcity.oCity.AB[letter] = [];
                Vcity.oCity.AB[letter].push(match[1]);
            } else if (reg3.test(letter)) {
                if (!Vcity.oCity.CD[letter]) Vcity.oCity.CD[letter] = [];
                Vcity.oCity.CD[letter].push(match[1]);
            } else if (reg4.test(letter)) {
                if (!Vcity.oCity.EFG[letter]) Vcity.oCity.EFG[letter] = [];
                Vcity.oCity.EFG[letter].push(match[1]);
            }else if (reg5.test(letter)) {
                if (!Vcity.oCity.H[letter]) Vcity.oCity.H[letter] = [];
                Vcity.oCity.H[letter].push(match[1]);
            }else if (reg6.test(letter)) {
                if (!Vcity.oCity.J[letter]) Vcity.oCity.J[letter] = [];
                Vcity.oCity.J[letter].push(match[1]);
            }else if (reg7.test(letter)) {
                if (!Vcity.oCity.KL[letter]) Vcity.oCity.KL[letter] = [];
                Vcity.oCity.KL[letter].push(match[1]);
            }else if (reg8.test(letter)) {
                if (!Vcity.oCity.MNP[letter]) Vcity.oCity.MNP[letter] = [];
                Vcity.oCity.MNP[letter].push(match[1]);
            }else if (reg9.test(letter)) {
                if (!Vcity.oCity.QR[letter]) Vcity.oCity.QR[letter] = [];
                Vcity.oCity.QR[letter].push(match[1]);
            }else if (reg10.test(letter)) {
                if (!Vcity.oCity.S[letter]) Vcity.oCity.S[letter] = [];
                Vcity.oCity.S[letter].push(match[1]);
            }else if (reg11.test(letter)) {
                if (!Vcity.oCity.T[letter]) Vcity.oCity.T[letter] = [];
                Vcity.oCity.T[letter].push(match[1]);
            }else if (reg12.test(letter)) {
                if (!Vcity.oCity.W[letter]) Vcity.oCity.W[letter] = [];
                Vcity.oCity.W[letter].push(match[1]);
            }else if (reg13.test(letter)) {
                if (!Vcity.oCity.X[letter]) Vcity.oCity.X[letter] = [];
                Vcity.oCity.X[letter].push(match[1]);
            }else if (reg14.test(letter)) {
                if (!Vcity.oCity.Y[letter]) Vcity.oCity.Y[letter] = [];
                Vcity.oCity.Y[letter].push(match[1]);
            }else if (reg15.test(letter)) {
                if (!Vcity.oCity.Z[letter]) Vcity.oCity.Z[letter] = [];
                Vcity.oCity.Z[letter].push(match[1]);
            }

            /* 热门城市 前16条 */
            if(i<20){
                if(!Vcity.oCity.hot['hot']) Vcity.oCity.hot['hot'] = [];
                Vcity.oCity.hot['hot'].push(match[1]);
            }
        }
    }
})();


/* 城市HTML模板 */
Vcity._template = [
    '<p class="tip">直接输入可搜索原料(支持汉字/拼音)</p>',
    '<ul>',
    '<li class="on">热门原料</li>',
    '<li>AB</li>',
    '<li>CD</li>',
    '<li>EFG</li>',
    '<li>H</li>',
    '<li>J</li>',
    '<li>KL</li>',
    '<li>MNP</li>',
    '<li>QR</li>',
    '<li>S</li>',
    '<li>T</li>',
    '<li>W</li>',
    '<li>X</li>',
    '<li>Y</li>',
    '<li>Z</li>',
    '</ul>'
];

/* *
 * 城市控件构造函数
 * @CitySelector
 * */

Vcity.CitySelector = function () {
    this.initialize.apply(this, arguments);
};

Vcity.CitySelector.prototype = {

    constructor:Vcity.CitySelector,

    /* 初始化 */

    initialize :function (options) {
        var input = options.input;
        this.input = Vcity._m.$('#' + input);
        Vcity.inputname = input.id;
        this.inputEvent();
    },

    /* *
        

    /* *
     * @createWarp
     * 创建城市BOX HTML 框架
     * */

    createWarp:function(){
        var inputPos = Vcity._m.getPos(this.input);
        var div = this.rootDiv = document.createElement('div');
        var that = this;

        // 设置DIV阻止冒泡
        Vcity._m.on(this.rootDiv,'click',function(event){
            Vcity._m.stopPropagation(event);
        });

        // 设置点击文档隐藏弹出的城市选择框
        Vcity._m.on(document, 'click', function (event) {
            event = Vcity._m.getEvent(event);
            var target = Vcity._m.getTarget(event);
            if(target == that.input) return false;
            //console.log(target.className);
            if (that.cityBox)Vcity._m.addClass('hide', that.cityBox);
            if (that.ul)Vcity._m.addClass('hide', that.ul);
            if(that.myIframe)Vcity._m.addClass('hide',that.myIframe);
        });
        div.className = 'citySelector';
        div.style.position = 'absolute';
        div.style.left = inputPos.left + 'px';
        div.style.top = inputPos.bottom + 5 + 'px';
        div.style.zIndex = 999999;

        // 判断是否IE6，如果是IE6需要添加iframe才能遮住SELECT框
        var isIe = (document.all) ? true : false;
        var isIE6 = this.isIE6 = isIe && !window.XMLHttpRequest;
        if(isIE6){
            var myIframe = this.myIframe =  document.createElement('iframe');
            myIframe.frameborder = '0';
            myIframe.src = 'about:blank';
            myIframe.style.position = 'absolute';
            myIframe.style.zIndex = '-1';
            this.rootDiv.appendChild(this.myIframe);
        }

        var childdiv = this.cityBox = document.createElement('div');
        childdiv.className = 'cityBox';
        childdiv.id = 'cityBox';
        childdiv.innerHTML = Vcity._template.join('');
        var hotCity = this.hotCity =  document.createElement('div');
        hotCity.className = 'hotCity';
        childdiv.appendChild(hotCity);
        div.appendChild(childdiv);
        this.createHotCity();
    },

    /* *
     * @createHotCity
     * TAB下面DIV：hot,a-h,i-p,q-z 分类HTML生成，DOM操作
     * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{},QRSTUVWXYZ:{}}
     **/

    createHotCity:function(){
        var odiv,odl,odt,odd,odda=[],str,key,ckey,sortKey,regEx = Vcity.regEx,
                oCity = Vcity.oCity;
        for(key in oCity){
            odiv = this[key] = document.createElement('div');
            // 先设置全部隐藏hide
            odiv.className = key + ' ' + 'cityTab hide';
            sortKey=[];
            for(ckey in oCity[key]){
                sortKey.push(ckey);
                // ckey按照ABCDEDG顺序排序
                sortKey.sort();
            }
            for(var j=0,k = sortKey.length;j<k;j++){
                odl = document.createElement('dl');
                odt = document.createElement('dt');
                odd = document.createElement('dd');
                odt.innerHTML = sortKey[j] == 'hot'?'&nbsp;':sortKey[j];
                odda = [];
                for(var i=0,n=oCity[key][sortKey[j]].length;i<n;i++){
                    str = '<a href="#">' + oCity[key][sortKey[j]][i] + '</a>';
                    odda.push(str);
                }
                odd.innerHTML = odda.join('');
                odl.appendChild(odt);
                odl.appendChild(odd);
                odiv.appendChild(odl);
            }

            // 移除热门城市的隐藏CSS
            Vcity._m.removeClass('hide',this.hot);
            this.hotCity.appendChild(odiv);
        }
        document.body.appendChild(this.rootDiv);
        /* IE6 */
        this.changeIframe();

        this.tabChange();
        this.linkEvent();
    },

    /* *
     *  tab按字母顺序切换
     *  @ tabChange
     * */

    tabChange:function(){
        var lis = Vcity._m.$('li',this.cityBox);
        var divs = Vcity._m.$('div',this.hotCity);
        var that = this;
        for(var i=0,n=lis.length;i<n;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(var j=0;j<n;j++){
                    Vcity._m.removeClass('on',lis[j]);
                    Vcity._m.addClass('hide',divs[j]);
                }
                Vcity._m.addClass('on',this);
                Vcity._m.removeClass('hide',divs[this.index]);
                /* IE6 改变TAB的时候 改变Iframe 大小*/
                that.changeIframe();
            };
        }
    },

    /* *
     * 城市LINK事件
     *  @linkEvent
     * */

    linkEvent:function(){
        var links = Vcity._m.$('a',this.hotCity);
        var that = this;
        for(var i=0,n=links.length;i<n;i++){
            links[i].onclick = function(){
                that.input.value = this.innerHTML;
                Vcity._m.addClass('hide',that.cityBox);
                /* 点击城市名的时候隐藏myIframe */
                Vcity._m.addClass('hide',that.myIframe);
            }
        }
    },

    /* *
     * INPUT城市输入框事件
     * @inputEvent
     * */

    inputEvent:function(){
        var that = this;
        Vcity._m.on(this.input, 'click', function (event) {
            
            event = event || window.event;
            if(!that.cityBox){
                that.createWarp();
            }else if(!!that.cityBox && Vcity._m.hasClass('hide',that.cityBox)){
                // slideul 不存在或者 slideul存在但是是隐藏的时候 两者不能共存
                if(!that.ul || (that.ul && Vcity._m.hasClass('hide',that.ul))){
                    Vcity._m.removeClass('hide',that.cityBox);

                    /* IE6 移除iframe 的hide 样式 */
                    //alert('click');
                    Vcity._m.removeClass('hide',that.myIframe);
                    that.changeIframe();
                }
            }

            
            
        });
        //Vcity._m.on(this.input,'focus',function(){
        //that.input.select();
        //if(that.input.value == '城市名') that.input.value = '';
        // });
        Vcity._m.on(this.input,'blur',function(){
            // if(that.input.value == '') that.input.value = '城市名';
            
            var value = Vcity._m.trim(that.input.value);
            if(value != ''){
                var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
                var flag=0;
                for (var i = 0, n = Vcity.allCity.length; i < n; i++) {
                    if (reg.test(Vcity.allCity[i])) {
                        flag++;
                    }
                }
                if(flag==0){
                    that.input.value= '';
                }else{
                    var lis = Vcity._m.$('li',that.ul);
                    if(typeof lis == 'object' && lis['length'] > 0){
                        var li = lis[0];
                        var bs = li.children;
                        if(bs && bs['length'] > 1){
                            that.input.value = bs[0].innerHTML;
                        }
                    }else{
                        that.input.value = '';
                    }
                }
            }

        });
        Vcity._m.on(this.input,'keyup',function(event){
            event = event || window.event;
            var keycode = event.keyCode;
            Vcity._m.addClass('hide',that.cityBox);
            that.createUl();

            /* 移除iframe 的hide 样式 */
            Vcity._m.removeClass('hide',that.myIframe);

            // 下拉菜单显示的时候捕捉按键事件
            if(that.ul && !Vcity._m.hasClass('hide',that.ul) && !that.isEmpty){
                that.KeyboardEvent(event,keycode);
            }
        });
    },

    /* *
     * 生成下拉选择列表
     * @ createUl
     * */

    createUl:function () {
        //console.log('createUL');
        var str;
        var value = Vcity._m.trim(this.input.value);
        // 当value不等于空的时候执行
        if (value !== '') {
            var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
            // 此处需设置中文输入法也可用onpropertychange
            var searchResult = [];
            for (var i = 0, n = Vcity.allCity.length; i < n; i++) {
                if (reg.test(Vcity.allCity[i])) {
                    var match = Vcity.regEx.exec(Vcity.allCity[i]);
                    if (searchResult.length !== 0) {
                        str = '<li><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                    } else {
                        str = '<li class="on"><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                    }
                    searchResult.push(str);
                }
            }
            this.isEmpty = false;
            // 如果搜索数据为空
            if (searchResult.length == 0) {
                this.isEmpty = true;
                str = '<li class="empty">系统无<em>' + value + '</em> ，请点击上方“添加新原料”！</li>';
                searchResult.push(str);
            }
            // 如果slideul不存在则添加ul
            if (!this.ul) {
                var ul = this.ul = document.createElement('ul');
                ul.className = 'cityslide mCustomScrollbar';
                this.rootDiv && this.rootDiv.appendChild(ul);
                // 记录按键次数，方向键
                this.count = 0;
            } else if (this.ul && Vcity._m.hasClass('hide', this.ul)) {
                this.count = 0;
                Vcity._m.removeClass('hide', this.ul);
            }
            this.ul.innerHTML = searchResult.join('');

            /* IE6 */
            this.changeIframe();

            // 绑定Li事件
            this.liEvent();
        }else{
            Vcity._m.addClass('hide',this.ul);
            Vcity._m.removeClass('hide',this.cityBox);

            Vcity._m.removeClass('hide',this.myIframe);

            this.changeIframe();
        }
    },

    /* IE6的改变遮罩SELECT 的 IFRAME尺寸大小 */
    changeIframe:function(){
        if(!this.isIE6)return;
        this.myIframe.style.width = this.rootDiv.offsetWidth + 'px';
        this.myIframe.style.height = this.rootDiv.offsetHeight + 'px';
    },

    /* *
     * 特定键盘事件，上、下、Enter键
     * @ KeyboardEvent
     * */

    KeyboardEvent:function(event,keycode){
        var lis = Vcity._m.$('li',this.ul);
        var len = lis.length;
        switch(keycode){
            case 40: //向下箭头↓
                this.count++;
                if(this.count > len-1) this.count = 0;
                for(var i=0;i<len;i++){
                    Vcity._m.removeClass('on',lis[i]);
                }
                Vcity._m.addClass('on',lis[this.count]);
                break;
            case 38: //向上箭头↑
                this.count--;
                if(this.count<0) this.count = len-1;
                for(i=0;i<len;i++){
                    Vcity._m.removeClass('on',lis[i]);
                }
                Vcity._m.addClass('on',lis[this.count]);
                break;
            case 13: // enter键
                this.input.value = Vcity.regExChiese.exec(lis[this.count].innerHTML)[0];
                Vcity._m.addClass('hide',this.ul);
                Vcity._m.addClass('hide',this.ul);
                /* IE6 */
                Vcity._m.addClass('hide',this.myIframe);
                break;
            default:
                break;
        }
    },

    /* *
     * 下拉列表的li事件
     * @ liEvent
     * */

    liEvent:function(){
        var that = this;
        var lis = Vcity._m.$('li',this.ul);
        for(var i = 0,n = lis.length;i < n;i++){
            Vcity._m.on(lis[i],'click',function(event){ 
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                that.input.value = Vcity.regExChiese.exec(target.innerHTML)[0];
                Vcity._m.addClass('hide',that.ul);
                /* IE6 下拉菜单点击事件 */
                Vcity._m.addClass('hide',that.myIframe);
            });
            Vcity._m.on(lis[i],'mouseover',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                Vcity._m.addClass('on',target);
            });
            Vcity._m.on(lis[i],'mouseout',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                Vcity._m.removeClass('on',target);
            })
        }
    }
};