/*
Copyright 2012, KISSY UI Library v1.30rc
MIT Licensed
build time: Jul 11 21:28
*/
/**
 * table dialog
 * @author yiminghe@gmail.com
 */
KISSY.add("editor/plugin/table/dialog", function (S, Editor, Overlay4E, MenuButton) {
    var Node = S.Node,
        DOM = S.DOM,
        UA = S.UA,
        trim = S.trim,
        showBorderClassName = "ke_show_border",
        collapseTableClass = "k-e-collapse-table",
        Dialog = Overlay4E.Dialog,
        IN_SIZE = 6,
        alignStyle = 'margin-left:2px;',
        MIDDLE = "vertical-align:middle;",
        TABLE_HTML = "<div style='padding:20px 20px 10px 20px;'>" +
            "<table class='ks-editor-table-config' style='width:100%'>" +
            "<tr>" +
            "<td>" +
            "<label>行数： " +
            "<input " +
            " data-verify='^(?!0$)\\d+$' " +
            " data-warning='行数请输入正整数' " +
            " value='2' " +
            " class='ks-editor-table-rows ks-editor-table-create-only ks-editor-input' " +
            "style='" + alignStyle + MIDDLE + "'" +
            " size='" +
            IN_SIZE +
            "'" +
            " />" +
            "</label>" +
            "</td>" +
            "<td>" +
            "<label>宽&nbsp;&nbsp;&nbsp;度： " +
            "<input " +
            " data-verify='^(?!0$)\\d+$' " +
            " data-warning='宽度请输入正整数' " +
            "value='200' " +
            "style='" +
            alignStyle + MIDDLE + "' " +
            "class='ks-editor-table-width ks-editor-input' " +
            "size='" + IN_SIZE + "'/>" +
            "</label> " +
            "<select class='ks-editor-table-width-unit' title='宽度单位'>" +
            "<option value='px'>像素</option>" +
            "<option value='%'>百分比</option>" +
            "</select>" +
            "</td>" +
            "</tr>" +
            "<tr>" +
            "<td>" +
            "<label>列数： " +
            "<input " +
            " data-verify='^(?!0$)\\d+$' " +
            " data-warning='列数请输入正整数' " +
            "class='ks-editor-table-cols ks-editor-table-create-only ks-editor-input' " +
            "style='" + alignStyle + MIDDLE + "'" +
            "value='3' " +
            "size='" +
            IN_SIZE + "'/>" +
            "</label>" +
            "</td>" +
            "<td>" +
            "<label>高&nbsp;&nbsp;&nbsp;度： " +
            "<input " +
            " data-verify='^((?!0$)\\d+)?$' " +
            " data-warning='高度请输入正整数' " +
            "value='' " +
            "style='" +
            alignStyle + MIDDLE + "'" +
            "class='ks-editor-table-height ks-editor-input' " +
            "size='" + IN_SIZE + "'/>" +
            "</label> &nbsp;像素" +
            "</td>" +
            "</tr>" +
            "<tr>" +
            "<td>" +
            "<label>对齐： </label>" +
            "<select class='ks-editor-table-align' title='对齐'>" +
            "<option value=''>无</option>" +
            "<option value='left'>左对齐</option>" +
            "<option value='right'>右对齐</option>" +
            "<option value='center'>中间对齐</option>" +
            "</select>" +
            "</td>" +
            "<td>" +
            "<label>标题格：</label> " +
            "<select class='ks-editor-table-head ks-editor-table-create-only' title='标题格'>" +
            "<option value=''>无</option>" +
            "<option value='1'>有</option>" +
            "</select>" +
            "</td>" +
            "</tr>" +
            "<tr>" +
            "<td>" +
            "<label>边框： " +
            "<input " +
            " data-verify='^\\d+$' " +
            " data-warning='边框请输入非负整数' " +
            "value='1' " +
            "style='" +
            alignStyle + MIDDLE + "'" +
            "class='ks-editor-table-border ks-editor-input' " +
            "size='" + IN_SIZE + "'/>" +
            "</label> &nbsp;像素" +
            " " +
            '<label><input ' +
            'type="checkbox" ' +
            'style="vertical-align: middle; margin-left: 5px;" ' +
            'class="ks-editor-table-collapse" ' +
            '/> 合并边框' +
            "</label>" +
            "</td>" +
            "<td>" +
            "<label " +
            "class='ks-editor-table-cellpadding-holder'" +
            ">边&nbsp;&nbsp;&nbsp;距： " +
            "<input " +
            " data-verify='^(\\d+)?$' " +
            " data-warning='边框请输入非负整数' " +
            "value='0' " +
            "style='" +
            alignStyle + MIDDLE + "'" +
            "class='ks-editor-table-cellpadding ks-editor-input' " +
            "size='" + IN_SIZE + "'/>" +
            " &nbsp;像素</label>" +
            "</td>" +
            "</tr>" +
            "<tr>" +
            "<td colspan='2'>" +
            "<label>" +
            "标题： " +
            "<input " +
            "class='ks-editor-table-caption ks-editor-input' " +
            "style='width:380px;" +
            alignStyle + MIDDLE + "'>" +
            "</label>" +
            "</td>" +
            "</tr>" +
            "</table>" +
            "</div>",
        footHtml = "<div style='padding:5px 20px 20px;'>" +
            "<a " +
            "class='ks-editor-table-ok ks-editor-button ks-inline-block' " +
            "style='margin-right:20px;'>确定</a> " +
            "<a " +
            "class='ks-editor-table-cancel ks-editor-button ks-inline-block'>取消</a>" +
            "</div>",
        addRes = Editor.Utils.addRes,
        destroyRes = Editor.Utils.destroyRes;


    function valid(str) {
        return trim(str).length != 0;
    }

    function TableDialog(editor) {
        var self = this;
        self.editor = editor;
        Editor.Utils.lazyRun(self, "_prepareTableShow", "_realTableShow");
    }

    S.augment(TableDialog, {
        _tableInit:function () {
            var self = this,
                d = new Dialog({
                    autoRender:true,
                    width:"500px",
                    mask:true,
                    headerContent:"表格", //属性",
                    bodyContent:TABLE_HTML,
                    footerContent:footHtml
                }),
                dbody = d.get("body"),
                foot = d.get("footer");
            d.twidth = dbody.one(".ks-editor-table-width");
            d.theight = dbody.one(".ks-editor-table-height");
            d.tborder = dbody.one(".ks-editor-table-border");
            d.tcaption = dbody.one(".ks-editor-table-caption");
            d.talign = MenuButton.Select.decorate(dbody.one(".ks-editor-table-align"), {
                prefixCls:'ks-editor-big-',
                elAttrs:{
                    hideFocus:"hideFocus"
                },
                width:80,
                menuCfg:{
                    prefixCls:'ks-editor-',
                    render:dbody
                }
            });
            d.trows = dbody.one(".ks-editor-table-rows");
            d.tcols = dbody.one(".ks-editor-table-cols");
            d.thead = MenuButton.Select.decorate(dbody.one(".ks-editor-table-head"), {
                prefixCls:'ks-editor-big-',
                elAttrs:{
                    hideFocus:"hideFocus"
                },
                width:80,
                menuCfg:{
                    prefixCls:'ks-editor-',
                    render:dbody
                }
            });
            d.cellpaddingHolder = dbody.one(".ks-editor-table-cellpadding-holder");
            d.cellpadding = dbody.one(".ks-editor-table-cellpadding");
            d.tcollapse = dbody.one(".ks-editor-table-collapse");
            var tok = foot.one(".ks-editor-table-ok"),
                tclose = foot.one(".ks-editor-table-cancel");
            d.twidthunit = MenuButton.Select.decorate(dbody.one(".ks-editor-table-width-unit"), {
                prefixCls:'ks-editor-big-',
                elAttrs:{
                    hideFocus:"hideFocus"
                },
                width:80,
                menuCfg:{
                    prefixCls:'ks-editor-',
                    render:dbody
                }
            });
            self.dialog = d;
            tok.on("click", self._tableOk, self);

            tclose.on("click", function (ev) {
                ev && ev.halt();
                d.hide();
            });
            addRes.call(self, d, d.twidthunit, tok, tclose);
        },
        _tableOk:function (ev) {
            ev && ev.halt();
            var self = this,
                tableDialog = self.dialog,
                inputs = tableDialog.get("el").all("input");

            if (tableDialog.twidthunit.get("value") == "%") {
                var tw = parseInt(tableDialog.twidth.val());
                if (
                    !tw || (
                        tw > 100 ||
                            tw < 0
                        )
                    ) {
                    alert("宽度百分比：" + "请输入1-100之间");
                    return;
                }
            }
            var re = Editor.Utils.verifyInputs(inputs);
            if (!re) return;
            self.dialog.hide();
            setTimeout(function () {
                if (!self.selectedTable) {
                    self._genTable();
                } else {
                    self._modifyTable();
                }
            }, 0);
        },
        _modifyTable:function () {
            var self = this,
                d = self.dialog,
                selectedTable = self.selectedTable,
                caption = selectedTable.one("caption"),
                talignVal = d.talign.get("value"),
                tborderVal = d.tborder.val();

            if (valid(talignVal))
                selectedTable.attr("align", trim(talignVal));
            else
                selectedTable.removeAttr("align");

            if (valid(tborderVal)) {
                selectedTable.attr("border", trim(tborderVal));
            } else {
                selectedTable.removeAttr("border");
            }
            if (!valid(tborderVal) || tborderVal == "0") {
                selectedTable.addClass(showBorderClassName, undefined);
            } else {
                selectedTable.removeClass(showBorderClassName, undefined);
            }

            if (valid(d.twidth.val()))
                selectedTable.css("width",
                    trim(d.twidth.val()) + d.twidthunit.get("value"));
            else
                selectedTable.css("width", "");
            if (valid(d.theight.val()))
                selectedTable.css("height",
                    trim(d.theight.val()));
            else
                selectedTable.css("height", "");

            if (d.tcollapse[0].checked) {
                selectedTable.addClass(collapseTableClass, undefined);
            } else {
                selectedTable.removeClass(collapseTableClass, undefined);
            }

            d.cellpadding.val(parseInt(d.cellpadding.val()) || 0);
            if (self.selectedTd)self.selectedTd.css("padding", d.cellpadding.val());
            if (valid(d.tcaption.val())) {
                var tcv = Editor.Utils.htmlEncode(trim(d.tcaption.val()));
                if (caption && caption[0])
                    caption.html(tcv);
                else {
                    //不能使用dom操作了, ie6 table 报错
                    //http://msdn.microsoft.com/en-us/library/ms532998(VS.85).aspx
                    var c = selectedTable[0].createCaption();
                    DOM.html(c, "<span>"
                        + tcv
                        + "</span>");
                    // new Node("<caption><span>" + tcv + "</span></caption>");
                    // .insertBefore(selectedTable[0].firstChild);
                }
            } else if (caption) {
                caption.remove();
            }

        },
        _genTable:function () {
            var self = this,
                d = self.dialog,
                html = "<table ",
                i,
                cols = parseInt(d.tcols.val()) || 1,
                rows = parseInt(d.trows.val()) || 1,
            //firefox 需要 br 才能得以放置焦点
                cellpad = UA['ie'] ? "&nbsp;" : "&nbsp;<br/>",
                editor = self.editor;

            if (valid(d.talign.get("value")))
                html += "align='" + trim(d.talign.get("value")) + "' ";

            if (valid(d.tborder.val()))
                html += "border='" + trim(d.tborder.val()) + "' ";

            var styles = [];


            if (valid(d.twidth.val())) {
                styles.push("width:" + trim(d.twidth.val())
                    + d.twidthunit.get("value") + ";");
            }

            if (valid(d.theight.val())) {
                styles.push("height:" + trim(d.theight.val()) + "px;");
            }

            if (styles.length) {
                html += "style='" + styles.join("") + "' ";
            }

            var classes = [];

            if (!valid(d.tborder.val())
                || String(trim(d.tborder.val())) == "0") {
                classes.push(showBorderClassName);
            }

            if (d.tcollapse[0].checked) {
                classes.push(collapseTableClass);
            }
            if (classes.length) {
                html += "class='" + classes.join(" ") + "' ";
            }

            html += ">";
            if (valid(d.tcaption.val())) {
                html += "<caption><span>" + Editor.Utils.htmlEncode(trim(d.tcaption.val()))
                    + "</span></caption>";
            }
            if (d.thead.get("value")) {
                html += "<thead>";
                html += "<tr>";
                for (i = 0; i < cols; i++)
                    html += "<th>" + cellpad + "</th>";
                html += "</tr>";
                html += "</thead>";
                rows -= 1;
            }

            html += "<tbody>";
            for (var r = 0; r < rows; r++) {
                html += "<tr>";
                for (i = 0; i < cols; i++) {
                    html += "<td>" + cellpad + "</td>";
                }
                html += "</tr>";
            }
            html += "</tbody>";
            html += "</table>";

            var table = new Node(html, null, editor.get("document")[0]);
            editor.insertElement(table);
        },
        _fillTableDialog:function () {
            var self = this,
                d = self.dialog,
                selectedTable = self.selectedTable,
                caption = selectedTable.one("caption");
            if (self.selectedTd) {
                d.cellpadding.val(
                    parseInt(self.selectedTd.css("padding"))
                        || "0");
            }

            d.talign.set("value", selectedTable.attr("align") ||
                "");


            d.tborder.val(selectedTable.attr("border") ||
                "0");
            var w = selectedTable.style("width") ||
                ("" + selectedTable.width());

            d.tcollapse[0].checked = selectedTable.hasClass(collapseTableClass, undefined);

            //忽略pt单位
            d.twidth.val(w.replace(/px|%|(.*pt)/i, ""));
            if (w.indexOf("%") != -1) {
                d.twidthunit.set("value", "%");
            } else {
                d.twidthunit.set("value", "px");
            }

            d.theight.val((selectedTable.style("height") || "")
                .replace(/px|%/i, ""));
            var c = "";
            if (caption) {
                c = caption.text();
            }
            d.tcaption.val(c);
            var head = selectedTable.first("thead"),
                rowLenth = (selectedTable.one("tbody") ?
                    selectedTable.one("tbody").children().length : 0)
                    + (head ? head.children("tr").length : 0);
            d.trows.val(rowLenth);
            d.tcols.val(selectedTable.one("tr") ?
                selectedTable.one("tr").children().length : 0);
            d.thead.set("value", head ? '1' : '');
        },
        _realTableShow:function () {
            var self = this,
                d = self.dialog;

            if (self.selectedTable) {
                self._fillTableDialog();
                d.get("el")
                    .all(".ks-editor-table-create-only")
                    .attr("disabled", "disabled");
                d.thead.set('disabled', true);
            } else {
                d.get("el").all(".ks-editor-table-create-only")
                    .removeAttr("disabled");
                d.thead.set('disabled', false);
            }
            if (self.selectedTd) {
                d.cellpaddingHolder.show();
            } else {
                d.cellpaddingHolder.hide();
            }
            self.dialog.show();
        },
        _prepareTableShow:function () {
            var self = this;
            self._tableInit();
        },
        show:function (cfg) {
            var self = this;
            S.mix(self, cfg);
            self._prepareTableShow();
        },
        destroy:function () {
            destroyRes.call(this);
        }
    });

    return TableDialog;
}, {
    requires:['editor', '../overlay/', '../menubutton/']
});
