/// <reference path="../js/jquery-3.3.1.min.js" />
/// <reference path="ke.js" />
/// <reference path="ke.ui.js" />

/**
  * 表单控件扩展库
**/
(function ($) {
    var base = $.fn.input.methods;

    $.fn.label = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        this.skin.parse({ removeHTML: false, valueFormat: null, lang: false });
        this.initSkin = function () {
            this.skin.autoCreateStore = false;
            base.initSkin.call(this);
            this.skin.css += " label";
            this.skin.html = "<div class=\"box\"><div {attributes}></div></div>";
            this.skin.value = (this.skin.value || this.html());
        }
        this.initHandler = function () {
            this.$text = this.$value = $(this.find(".box").children(0));
            if (this.skin.removeHTML) {
                this.$value.val = function () {
                    if (arguments.length == 0)
                        return this[0].innerText;
                    else
                        this.html(arguments[0]);
                }
            }
            else
                this.$value.val = this.$value.html;
            base.initHandler.call(this);
        }
        this.set = function (v) {
            if (this.skin.valueFormat)
                v = this.skin.valueFormat(v);
            if (this.skin.lang)
                v = ke.ui.lang(v);
            base.set.call(this, v);
        }
        this.disable = function () { }
        return this;
    }

    $.fn.hidden = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        this._extend($.fn.input, arguments);
        this.initSkin = function () {
            base.initSkin.call(this);
            this.isHidden = true;
            this.skin.hidden = true;
            this.skin.width = 1;
            this.skin.height = 1;
            this.skin.html = "<input type=\"hidden\" {attributes}/>";
        }
        this.initHandler = function () {
            this.$text = this.$value = this.find("input[type='hidden']");
            base.initHandler.call(this);
        }
        return this;
    }

    $.fn.textbox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        var sk = this.skin;
        this.skin.parse({ multiline: false, multilineAutoHeight: false, password: false });
        if (!sk.placeholder && !sk.readonly)
            sk.placeholder = "请输入" + (sk.multilineAutoHeight ? " 支持换行" : "");
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.css += " textbox";
            if (sk.multiline || sk.multilineAutoHeight) {
                sk.html = "<div class=\"box\"><textarea rows='1' {attributes}></textarea></div>";
                sk.css += sk.multiline ? " textbox-multiline" : " textbox-multiline-auto";
            }
            else {
                sk.html = "<div class=\"box\"><input type=\"" + (this.skin.password ? "password" : "text") + "\" {attributes}/></div>";
            }
        }
        this.initHandler = function () {
            this.$text = this.$value = $(this.find(".box").children(0));
            if (sk.multilineAutoHeight) {
                this.$text.keyup(this, function (e) { e.data.autoHeight(); });
            }
            if (ke.ui.mobile) {
                if (this.store) {
                    this.find(".box").append("<div class=\"icon-btn icon-right\"></div>");
                    this.find(".icon-btn").click(this, function (e) { e.data.showLayer(); });
                }
                else {
                    this.find(".box").append("<div class=\"icon-btn icon-pencil\"></div>");
                    this.find(".icon-btn").click(this, function (e) { e.data.focus(); });
                }
            }
            base.initHandler.call(this);
        }
        this.autoHeight = function () {
            this.$text[0].style.height = "auto";
            var h = this.$text[0].scrollHeight;
            if (h < 16)
                h = ((this.$text.val().match(new RegExp('\n', 'g')) || []).length + 1) * 16;
            this.$text.height(h);
        },
        this.set = function (v) {
            base.set.call(this, v);
            if (sk.multilineAutoHeight)
                this.autoHeight();
        }
        return this;
    }

    $.fn.numberbox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        var sk = this.skin;
        if (!sk.placeholder && !sk.readonly)
            this.skin.placeholder = "请输入数字";
        this.initSkin = function () {
            base.initSkin.call(this);
            sk.type = ke.types.float;
            sk.reg = /^[\+\-]?\d*?\.?\d{0,8}?$/;
            sk.css += " numberbox"
            sk.html = "<div class=\"box\"><input type=\"text\" {attributes}{placeholder} maxlength=\"20\" /></div>";
        }
        this.initHandler = function () {
            base.initHandler.call(this);
            this.$text.bind("focus", this, function (e) { e.data.$text.val(e.data.format()); });
            this.$text.blur(this, function (e) { e.data.set(e.data.format(null, true)); });
            this.$text.keyup(this, function (e) {
                if (e.which != 8) {
                    e.data.$text.val(e.data.format());
                }
            });
        }
        this.format = function (v, formatLast) {
            v = v || this.$text.val();
            var r = "";
            for (var i = 0; i < v.length && r.length < 20; i++) {
                var ch = v.charCodeAt(i);
                if ((ch >= 48 && ch <= 57) || (ch == 46 && v.indexOf(".") == i) || (ch == 45 && v.indexOf("-") == i))
                    r += v[i];
            }
            return r;
        }
        return this;
    }

    $.fn.combobox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        var sk = this.skin;
        if (!sk.placeholder && !sk.readonly)
            sk.placeholder = "请选择";
        this.initSkin = function () {
            base.initSkin.call(this);
            $.extend(sk.layerOptions, {
                bodyCls: "combobox-layer",
                minWidth: this.skin.layerOptions.minWidth || 80,
                allowOverflow: false
            });
            sk.css += " combobox";
            var cls = "icon-down";
            if (ke.ui.mobile) {
                cls = "icon-right";
            }
            sk.html = "<div class=\"box\"><input  type=\"text\" {attributes}{placeholder}/><input type=\"hidden\" /><div class=\"icon-btn " + cls + "\"></div></div>";
            sk.valueInStore = true;
        }
        this.initHandler = function () {
            base.initHandler.call(this);
            this.$value = this.find("input[type='hidden']");
            this.$text = this.find("input[type='text']");
            this.$text.change(this, function (e) {
                if (!e.data.$value.val())
                    e.data.set(null);
            });
            this.find(".icon-btn").click(this, function (e) { e.data.showLayer(); });
            this.$text.keyup(this, function (e) {
                if (e.which != 9) { //不能是tab事件
                    if (e.which == 46) {
                        e.data.set(null);
                    }
                    e.data.$value.val("");
                    e.data.showLayer(e.data.$text.val());
                }
            });
        }
        this.set = function (v) {
            base.set.call(this, v);
            this.$text.val(this.selectedRows.joinField(this.skin.textField, this.skin.separator));
        }
        return this;
    }

    $.fn.checkbox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.parse({ switch: false });
            this.skin.outputAttr = true;
            if (this.skin.switch) {
                this.skin.css += " switch-checkbox unselect";
                this.skin.html = "<label>{title}</label><div class=\"box\"><div class=\"switch-checkbox-point\"></div><div class=\"switch-checkbox-bar \"></div></div><input type=\"hidden\" />";
            }
            else {
                this.skin.css += " checkbox unselect";
                this.skin.html = "<div class=\"box\"><div class=\"checkbox-rect\"></div></div><label>{title}</label><input type=\"hidden\" />";
            }
        }
        this.initHandler = function () {
            this.$value = this.find("input[type='hidden']");
            var fn = function (e) { e.data.click(); e.data.change(); };
            if (!this.skin.switch) {
                this.$text = this.children("label");
                this.find(".checkbox-rect").bind("click", this, fn);
                this.$text.bind("click", this, fn);
            }
            else {
                this.$text = this.$value;
                this.find(".switch-checkbox-bar").bind("click", this, fn);
                this.find(".switch-checkbox-point").bind("click", this, fn);
            }
        }
        this.setTitle = function (val) {
            if (!this.skin.switch)
                this.$text.html(ke.ui.lang(val));
            else
                base.setTitle.call(this, val);
        }
        this.click = function () {
            this.set(this.get() != "1");
        },
        this.set = function (v) {
            if (v == "1" || v === true) {
                this.addClass("checkbox-selected");
                v = 1;
            }
            else {
                this.removeClass("checkbox-selected");
                v = 0;
            }
            base.set.call(this, v)
        }
        return this;
    }

    $.fn.triggerbox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        if (!this.skin.placeholder)
            this.skin.placeholder = (this.skin.readonly ? "请选择" : "请输入或选择");
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.parse({ textAppend: null });
            this.skin.css += " triggerbox";
            var htm = "<div class=\"box inline-clear\">";
            htm += "<input type=\"text\" {attributes}{placeholder}/><input type=\"hidden\" /><label class=\"icon-btn icon-zoom\" ></label></div>";
            this.skin.html = htm;
        }
        this.initHandler = function () {
            base.initHandler.call(this);
            this.$text = this.find("input[type='text']");
            if (this.skin.textAppend)
                this.$value = this.find("input[type='hidden']");
            else
                this.$value = this.$text;
            this.find(".icon-zoom").click(this, function (e) { e.data.triggerClick(); });
        }
        this.triggerClick = function () {
            ke.bindOrTrriger(this, "triggerClick", arguments);
        }
        this.set = function (v) {
            base.set.call(this, v);
            if (this.skin.textAppend)
                v += " " + this.skin.textAppend.get();
            this.$text.val(v);
        }
        return this;
    }

    $.fn.datebox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        this.ymd = [];
        $.fn.input.apply(this, arguments);
        if (!this.skin.placeholder)
            this.skin.placeholder = (this.skin.readonly ? "请选择" : "请输入或选择");
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.css += " datebox";
            this.skin.reg = /[\d]{4,4}[-]{1}[\d]{1,2}[-]{1}[\d]{1,2}/g;
            this.skin.layerOptions.syncOwnerWidth = false;
            this.skin.layerOptions.bodyCls = "date-layer";
            this.skin.layerOptions.height = 400;
            this.skin.html = "<div class=\"box\"><input type=\"text\" {attributes}{placeholder}/><div class=\"icon-btn icon-calendar\"></div></div>";
        }
        this.initHandler = function () {
            this.$value = this.find("input[type='text']");
            this.$text = this.find("input[type='text']");
            base.initHandler.call(this);
            this.find(".icon-btn").click(this, function (e) { e.data.showLayer(); });
            this.bind("layerShowBefore", this, function (e) {
                if (e.data.get() != "")
                    e.data.ymd = ke.getYMD(e.data.get());
                else
                    e.data.ymd = ke.getYMD(new Date());
            });
            //弹出层事件
            this.unbind("layerShowAfter").bind("layerShowAfter", this, function (e) {
                datePickerHandler(e.data);
            });
            this.$text.mouseup(this, function (e) { autoSelectTxt(e.target); });
            this.change(this, function (e) {
                var txt = ke.getDate(e.data.$value.val());
                if (isNaN(txt.getTime()))
                    e.data.set(null);
                else
                    e.data.set(txt);
            });
        }
        function datePickerHandler(c) {
            var lay = c.layerCompnent;
            lay.find(".icon-btn").click(function (e) {
                var obj = $(e.target);
                if (obj.hasClass("icon-backward"))
                    c.addMonth(-1, 0);
                else if (obj.hasClass("icon-left"))
                    c.addMonth(0, -1);
                else if (obj.hasClass("icon-forward"))
                    c.addMonth(1, 0);
                else if (obj.hasClass("icon-right"))
                    c.addMonth(0, 1);
            });
            lay.find(".date-btn-today").click(function () { c.today(); });
            lay.find(".date-days div").click(function (cell) { c.select($(cell.target).attr("data-value")); });
            lay.find(".data-select-header .fll").click(function (e) { c.layerHide(); })
        }
        function autoSelectTxt(dom) {
            var val = dom.value;
            var s = dom.selectionStart;
            if (val) {
                if (s <= 5) {
                    dom.selectionStart = 0;
                    dom.selectionEnd = 4;
                }
                else if (s > 5 && s <= 7) {
                    dom.selectionStart = 5;
                    dom.selectionEnd = 7;
                }
                else if (s >= 8) {
                    dom.selectionStart = 8;
                    dom.selectionEnd = val.length;
                }
            }
        }

        this.select = function (v) {
            this.set(v);
            this.layerHide();
        }
        this.set = function (v) {
            this.$value.val(ke.getDateTip(v));
            this.validate();
        }
        this.get = function (type) {
            type = type || this.skin.type;
            if (type == ke.types.int) {
                return ke.getTimeSpan(this.$value.val()) || "";
            }
            else
                return this.$value.val();
        }
        this.addMonth = function (m, y) {
            this.ymd[1] += m;
            this.ymd[0] += y;
            if (this.ymd[1] < 1) {
                this.ymd[1] = 12;
                this.ymd[0] -= 1;
            }
            else if (this.ymd[1] > 12) {
                this.ymd[1] = 1;
                this.ymd[0] += 1;
            }
            this.layerCompnent.loadHtml(this.layerHtml());
            this.layerCompnent.show();
            datePickerHandler(this);
        }
        this.today = function () {
            this.ymd = ke.getYMD(new Date());
            this.layerCompnent.loadHtml(this.layerHtml());
            this.layerCompnent.show();
            datePickerHandler(this);
        }
        this.layerHtml = function () {
            var year = this.ymd[0];
            var month = this.ymd[1];
            var day = this.ymd[2];
            var now_dt = ke.getYMD(new Date());
            var val_dt = ke.getYMD(this.get());
            var header = ["日", "一", "二", "三", "四", "五", "六"];
            var items = [];
            var sub = year + "年" + (month < 10 ? "0" : "") + month + "月";
            var htm_header = "<div class=\"date-header clear\"><div class=\"icon-btn icon-backward fll\"></div><div class=\"icon-btn icon-left fll\"></div>" + sub + " <div class=\"flr\"><div class=\"icon-btn icon-right\"></div><div class=\"icon-btn icon-forward\"></div></div></div>";
            htm_header += "<div class=\"date-weekof clear\">";
            var htm = "<div class=\"date-days clear\">";
            var sdt = new Date(year, month - 1, 1);
            for (var i = 0; i < 7; i++) {
                htm_header += "<div>" + header[i] + "</div>";
                if (i < sdt.getDay())
                    htm += "<div>&nbsp;</div>";
            }
            htm_header += "</div>";
            for (var i = 0; i < 31; i++) {
                temp = new Date(sdt.getTime() + 86400000 * i);
                _mon = temp.getMonth() + 1;
                _day = (i + 1);
                var weekDay = temp.getDay();
                if (_mon == month) {
                    var cls = [];
                    if (temp.getFullYear() == val_dt[0] && _mon == val_dt[1] && _day == val_dt[2])//选中的日期
                        cls.push("date-selected");
                    else if (_mon == now_dt[1] && _day == now_dt[2])//当前日期
                        cls.push("date-today");
                    if (weekDay == 0 || weekDay == 6)
                        cls.push("date-weekend");
                    htm += "<div data-value=\"" + ke.getDateTip(temp) + "\" ";
                    if (cls.length > 0)
                        htm += "class=\"" + cls.join(' ') + "\"";
                    htm += ">" + _day + "</div>";
                }
                else
                    break;
            }
            if (ke.ui.mobile) {
                htm_header = "<div class=\"data-select-header clear\"><div class=\"fll\" onclick=''>取消</div><div class=\"flr\">" + this.skin.title + "</div></div>" + htm_header;
            }
            //计算按钮的位置
            return htm_header + htm + "</div>";
        }
        return this;
    }

    $.fn.timebox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        if (!this.skin.placeholder)
            this.skin.placeholder = (this.skin.readonly ? "请选择" : "请输入或选择");
        this.radix = [23, 59, 59];
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.parse({ enableSecond: false });
            if (this.skin.enableSecond) {
                this.skin.layerOptions.minWidth = 150;
                this.skin.reg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
            }
            else {
                this.skin.layerOptions.minWidth = 100;
                this.skin.reg = /^(20|21|22|23|[0-1]\d):[0-5]\d$/;
            }
            this.skin.css += " timebox";
            this.skin.layerOptions.bodyCls = "time-layer";
            this.skin.html = "<div class=\"box\"><input type=\"text\" maxlength=\"" + (this.skin.enableSecond ? 8 : 5) + "\" {attributes}/><div class=\"icon-btn icon-clock\"></div></div>";
        }
        this.initHandler = function () {
            base.initHandler.call(this);
            this.find(".icon-btn").click(this, function (e) { e.data.showLayer(); });
            this.$text.bind("focus", this, function (e) { e.data.$text.val(e.data.format()); });
            this.$text.blur(this, function (e) { e.data.set(e.data.format(null, true)); });
            this.$text.mouseup(this, function (e) {
                var dom = e.target;
                var val = dom.value;
                var s = dom.selectionStart;
                if (val) {
                    if (s <= 3) {
                        dom.selectionStart = 0;
                        dom.selectionEnd = 2;
                    }
                    else if (s <= 5) {
                        dom.selectionStart = 3;
                        dom.selectionEnd = 5;
                    }
                    else {
                        dom.selectionStart = 6;
                        dom.selectionEnd = val.length;
                    }

                }
            });
        }
        this.format = function (v, formatLast) {
            v = v || this.$text.val();
            var hms = [];
            var ts = "";
            for (var i = 0; i < v.length && hms.length < 3; i++) {
                var ch = v.charCodeAt(i);
                if (ch >= 48 && ch <= 57)
                    ts += v[i];
                else if (v[i] == ":" && ts.length == 1)
                    ts = "0" + ts;
                if (ts.length == 2) {
                    if (parseInt(ts) > this.radix[hms.length])
                        ts = this.radix[hms.length];
                    hms.push(ts);
                    ts = "";
                }
            }
            if (formatLast && ts.length == 1) ts = "0" + ts;
            hms.push(ts);
            v = hms.join(":");
            return v.substr(0, this.skin.enableSecond ? 8 : 5);
        }
        this.getHms = function (v) {
            var r = [0, 0];
            if (this.skin.enableSecond)
                r.push(0);
            var items = null;
            if ($.isNumeric(v))
                items = ke.getYMD(v, "time");
            else
                items = (v || this.$value.val()).split(':');
            for (var i = 0; i < r.length ; i++) {
                if (items.length > i) {
                    var ms = parseInt(items[i]);
                    if (ms)
                        r[i] = ms > this.radix[i] ? this.radix[i] : ms;
                }
            }
            return r;
        }
        this.set = function (v) {
            if (v != null && v != "")
                this.$value.val(this.format(this.getHms(v).join(":"), true));
            else
                this.$value.val("");
            this.validate();
        }
        this.get = function (type) {
            type = type || this.skin.type;
            if (type == ke.types.int) {
                var sec = [3600, 60, 1];
                var r = 0;
                this.getHms().forEach(function (d, i) { r += d * sec[i]; })
                return r;
            }
            else
                return this.$value.val()
        }
        this.layerHtml = function () {
            var r = this.getHms();
            var parts = [24, 60];
            if (this.skin.enableSecond)
                parts.push(60);
            var htm = "";
            parts.forEach(function (d, k) {
                htm += "<div class=\"fll scroller\">";
                for (var i = 0; i < d; i++) {
                    htm += "<div data-index=\"" + k + "\" class=\"data-item";
                    if (r[k] == i) htm += " data-item-selected";
                    htm += "\">" + (i < 10 ? "0" : "") + i + "</div>";
                }
                htm += "</div>";
            });
            if (ke.ui.mobile) {
                htm = "<div class=\"data-select-header clear\"><div class=\"fll\" onclick=''>取消</div><div class=\"flr\">" + this.skin.title + "</div></div>" + htm;
            }
            return htm;
        }
        this.itemClick = function (dom) {
            var r = this.getHms();
            dom = $(dom);
            r[ke.getInt(dom.attr("data-index"))] = ke.getInt(dom.html());
            this.set(r.join(":"));
            this.layerHide();
        }
        return this;
    }

    $.fn.switchbox = function (config) {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        var con = this.combobox(config);
        con.initSkin = function () {
            $.fn.input.methods.initSkin.call(this);
            this.skin.parse({ radio: false });
            this.skin.valueInStore = true;
            this.skin.css += this.skin.radio ? " radiobox" : " switchbox";
            this.skin.html = "<div class=\"box\"></div><input type=\"hidden\" {attributes} />";
            this.html("");
            this.skin.clickShowLayer = false;
        }
        con.bindStore = function (store) {
            var htm = "";
            if (this.skin.radio)
                htm = "<div title=\"{title}\" class=\"radiobox-item unselect\" data-value=\"{" + this.skin.valueField + "}\"><div class=\"radiobox-rect\"><div></div></div>{" + this.skin.textField + "}</div>";
            else
                htm = "<div title=\"{title}\" class=\"switchbox-item unselect\" data-value=\"{" + this.skin.valueField + "}\">{" + this.skin.textField + "}</div>";
            var tabs = ke.formatForeach(htm, store.toArray());
            this.find(".box").html(tabs);
            this.find(this.skin.radio ? ".radiobox-item" : ".switchbox-item").click(this, function (e) {
                e.data.itemClick(e.target);
            });
            $.fn.input.methods.bindStore.call(this, store);
        }
        con.initHandler = function () {
            this.$text = this.$value = this.find("input[type='hidden']");
            this.setTitle(this.skin.title);
        }
        con.set = function (v) {
            var con = this;
            con.find(".selected").removeClass("selected");
            $.fn.input.methods.set.call(con, v);
            this.selectedRows.forEach(function (d) {
                con.find("[data-value=\"" + d[con.skin.valueField] + "\"]").addClass("selected");
            });
        }
        return con;
    }

    $.fn.menubox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.valueInStore = true;
            this.skin.css += " menubox";
            this.skin.html = "<div class=\"box\"><div {attributes}></div><input type=\"hidden\" /></div>";
        }
        this.initHandler = function () {
            base.initHandler.call(this);
            this.$value = this.find("input[type='hidden']");
            this.$text = this.find(".box div");
        }
        this.set = function (v) {
            base.set.call(this, v);
            var txt = this.selectedRows.joinField(this.skin.textField, this.skin.separator);
            this.$text.html(txt);
        }
        return this;
    }

    $.fn.checkboxGroup = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        this.initSkin = function () {
            $.fn.input.methods.initSkin.call(this);
            this.skin.parse({ split: "," });
            this.skin.css += " checkbox-group";
            this.skin.clickShowLayer = false;
            this.skin.html = "<div class=\"box clear\" {attributes}></div><input type=\"hidden\"/>";
        }
        this.bindStore = function (store) {
            if (store) {
                store.singleSelect = false;
                var htm = ke.formatForeach("<div class=\"input checkbox\" data-options=\"{rowIndex}\"><div class=\"box\"><div class=\"checkbox-rect\"></div></div><label>{" + this.skin.textField + "}</label></div>", store.toArray());
                this.store = store;
                this.find(".box").html(htm);
                this.find(".box .checkbox").click(this, function (e) { e.data.itemClick(e); });
            }
        }
        this.initHandler = function () {
            this.$text = this.$value = this.find("input[type='hidden']");
            $.fn.input.methods.initHandler.call(this);
        }
        this.set = function (v) {
            var items = v ? v.split(this.skin.split) : [];
            var eles = this.find(".box .checkbox");
            for (var i = 0; i < eles.length; i++) {
                var row = this.store.rows[i];
                this.store.rows[i].selected = items.indexOf(row.data[this.skin.valueField]) > -1;
                $(eles[i]).toggleClass("checkbox-selected", this.store.rows[i].selected);
            }
        }
        this.get = function () {
            var r = "";
            var id = this.skin.valueField;
            this.store.getSelected().forEach(function (d) {
                r += "," + d.data[id]
            });
            if (r) r = r.substr(1);
            return r;
        }
        this.itemClick = function (e) {
            var ele = $(e.target);
            while (ele.length && !ele.hasClass("checkbox"))
                ele = ele.parent();
            var index = ke.getInt(ele.attr("data-options"));
            var row = this.store.rows[index];
            row.selected = !row.selected;
            ele.toggleClass("checkbox-selected", row.selected);
        }
        return this;
    }

    $.fn.htmlbox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        var self = this;
        this._value = "";
        this._disable = false;
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.parse($.fn.htmlbox.defaults);
            this.skin.css += " htmlbox";
            var url = window.KEUI_CONFIG.path + "ueditor/editor.html?con=" + this.skin.id;
            this.skin.html = "<div class=\"box\"><iframe  frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" border=\"0\" width=\"100%\" height=\"100%\" src=\"" + url + "\"></iframe></div>";
            this.skin.value = (this.skin.value || this.html());
        }
        this.initHandler = function () {
            this.$value = this.$text = this.find(".box");
            this.setTitle(this.skin.title);
            base.initHandler.call(this);
        }
        this.initSize = function (first) {
            base.initSize.call(this, first);
            if (this.skin.fullscreen) {
                this.$text._setSize(true, ke.ui.winWidth, ke.ui.winHeight);
            }
            else {
                var h = this.autoSizeBox.height();
                this.$text._setSize(true, null, h);
            }
        }
        this.getEditor = function () {
            try {
                var r = this.find("iframe");
                var win = r[0].contentWindow;
                if (win.view && win.view.editor)
                    return win.view;
            }
            catch (e) {
                return null;
            }
        },
        this.get = function () {
            var e = this.getEditor();
            if (e)
                this._value = e.getContent();
            return this._value;
        }
        this.set = function (v) {
            this._value = v;
            var e = this.getEditor();
            if (e)
                e.setContent(v);
        }
        this.disable = function (v) {
            this._disable = v;
            var e = this.getEditor();
            if (e)
                e.disable(v);
        },
        this.fullscreen = function (v) {
            if (v == null)
                v = !this.skin.fullscreen;
            this.toggleClass("fullscreen", v);
            this.skin.fullscreen = v;
            this.initSize();
        }
        this.changeDisplayMode = function () {
            this._value = this.get();
            this.skin.displayMode = (this.skin.displayMode == "simple" ? "full" : "simple");
            var url = window.KEUI_CONFIG.path + "ueditor/editor.html?con=" + this.skin.id;
            this.find("iframe").attr("src", url);
        }
        this.setInitialStyle = function (css) {
            this.skin.initialStyle = css;
            this._value = this.get();
            var url = window.KEUI_CONFIG.path + "ueditor/editor.html?con=" + this.skin.id;
            this.find("iframe").attr("src", url);
        }
        return this;
    }
    $.fn.htmlbox.defaults = {
        displayMode: "simple",//支持 simple,full 两种
        fullscreen: false,
        initialStyle: ""//内联样式类
    }

    $.fn.structurebox = function () {
        if (ke.ui.exists(this)) return ke.ui.find(this[0]);
        $.fn.input.apply(this, arguments);
        var self = this;
        this._value = "";
        this._disable = false;
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.parse($.fn.htmlbox.defaults);
            this.skin.css += " htmlbox";
            var url = window.KEUI_CONFIG.path + "jsme/editor.html?con=" + this.skin.id;
            this.skin.html = "<div class=\"box\"><iframe  frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" border=\"0\" width=\"100%\" height=\"100%\" src=\"" + url + "\"></iframe></div>";
            this.skin.value = (this.skin.value || this.html());
        }
        this.initHandler = function () {
            this.$value = this.$text = this.find(".box");
            this.setTitle(this.skin.title);
            base.initHandler.call(this);
        }
        this.getEditor = function () {
            try {
                var r = this.find("iframe");
                var win = r[0].contentWindow;
                if (win.view && win.view.editor)
                    return win.view;
            }
            catch (e) {
                return null;
            }
        },

        this.get = function () {
            var e = this.getEditor();
            if (e)
                this._value = e.getSmiles();

            return this._value;
        }
        this.set = function (v) {
            this._value = v;
            var e = this.getEditor();
            if (e)
                e.setSmiles(v);
        }
        this.getMol = function (v) {

        }
        this.disable = function (v) {
            this._disable = v;
            var e = this.getEditor();
            if (e)
                e.disable(v);
        }
        return this;
    }
})(jQuery);