(function ($, win, doc) {
    var CityPicker = function (el, options) {
        this.el = $(el);
        this.options = options;
        this.provinces = provinces;
        this.pro = null;
        this.city = city;
        this.elType = this.el.is('a');

        this.init();
    };

    var p = CityPicker.prototype;

    p.init = function () {
        this.initEvent();
        this.preventPopKeyboard();

    };

    p.preventPopKeyboard = function () {
        if (this.elType) {
            this.el.prop("readonly", true);
        }
    };

    p.initEvent = function () {
        this.el.on("mousedown", function (e) {
            var pickerBox = $(".picker-box");
            if (pickerBox[0]) {
                pickerBox.show();
            } else {
                this.create();
            }
        }.bind(this));
    };

    p.create = function () {
        this.createCityPickerBox();
        this.createProList();
        this.proClick();
        this.createNavBar();
        this.navEvent();
    };

    p.createCityPickerBox = function () {
        var proBox = "<div class='picker-box'></div>";
        $("body").append(proBox);
    };

    p.createProList = function () {
        var provinces = this.provinces;
        var proBox;
        var dl = "";
        for (var letterKey in provinces) {
            var val = provinces[letterKey];
            if (provinces.hasOwnProperty(letterKey)) {
                var dt = "<dt id='" + letterKey + "'>" + letterKey + "</dt>";
                var dd = "";
                for (var proKey in val) {
                    if (val.hasOwnProperty(proKey)) {
                        dd += "<dd data-letter=" + letterKey + " data-id=" + val[proKey]['i'] + ">" + val[proKey]['n'] + "</dd>";
                    }
                }
                dl += "<dl>" + dt + dd + "</dl>";
            }
        }

        proBox = "<section class='pro-picker'>" 
				 +"<div class='choose-city-header'>"
				 +"<span onclick='closepicker()'>×</span>"
				 +"<h3>请选择城市</h3>"
				 +"</div>"
				 + dl 
				 + "</section>";

        $(".picker-box").append(proBox);
    };

    p.createCityList = function (id,letter, pro) {
        var cities = this.city[id];
        var ul, li = "";
        for(var i in cities){
            li += "<li id="+cities[i]['i']+">" + cities[i]['n'] + "</li>";
        }
        ul = "<ul class='city-picker'>" + li + "</ul>";
        $(".picker-box").find(".city-picker").remove().end().append(ul);

        this.cityClick();
    };

    p.proClick = function () {
        var that = this;
        $(".pro-picker").on("click", function (e) {
            var target = e.target;
            if ($(target).is("dd")) {
                that.pro = $(target).html();
                var letter = $(target).data("letter");
                var id = $(target).data("id");
                that.createCityList(id,letter, that.pro);

                $(this).hide();
            }
        });
        var that = this;
    };

    p.cityClick = function () {
        var that = this;
        $(".city-picker").on("click", function (e) {
            var target = e.target;
            if ($(target).is("li")) {
                var id = $(target).attr('id');
                var url = APP+'Mobile/Ajax/change_mobile_index_areacache';
                var query = new Object;
                query.id = id;
                $.ajax({
                    url: url,
                    type: "post",
                    data: query,
                    dataType: "json",
                    success: function (ret) {
						
                    $("input[name='city']").val($(target).html());
                        //alert(JSON.strinfgify(ret));
                    }
                });
                $('.header_area').html($(target).html()+'<i class="iconfont">&#xe661;</i>');
                $(".picker-box").hide();
                $(".pro-picker").show();
                $(this).hide();
				//window.location.reload();
            }
        });
    };

    p.createNavBar = function () {
        var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var arr = str.split("");
        var a = "";
        arr.forEach(function (item, i) {
            a += '<a href="#&#65279' + item + '">' + item + '</a>';
        });

        var div = '<div class="navbar">' + a + '</div>';

        $(".picker-box").append(div);
    };

    p.navEvent = function () {
        var that = this;
        var navBar = $(".navbar");
        var width = navBar.find("a").width();
        var height = navBar.find("a").height();
        navBar.on("touchstart", function (e) {
            $(this).addClass("active");
            that.createLetterPrompt($(e.target).html());
        });

        navBar.on("touchmove", function (e) {
            e.preventDefault();
            var touch = e.originalEvent.touches[0];
            var pos = {"x": touch.pageX, "y": touch.pageY};
            var x = pos.x, y = pos.y;
            $(this).find("a").each(function (i, item) {
                var offset = $(item).offset();
                var left = offset.left, top = offset.top;
                if (x > left && x < (left + width) && y > top && y < (top + height)) {
                    location.href = item.href;
                    that.changeLetter($(item).html());
                }
            });
        });

        navBar.on("touchend", function () {
            $(this).removeClass("active");
            $(".prompt").hide();
        })
    };

    p.createLetterPrompt = function (letter) {
        var prompt = $(".prompt");
        if (prompt[0]) {
            prompt.show();
        } else {
            var span = "<span class='prompt'>" + letter + "</span>";
            $(".picker-box").append(span);
        }
    };


    p.changeLetter = function (letter) {
        var prompt = $(".prompt");
        prompt.html(letter);
    };

    $.fn.CityPicker = function (options) {
        return new CityPicker(this, options);
    }
}(window.jQuery, window, document));