/**
 * Created with JetBrains PhpStorm.
 * User: xuheng
 * Date: 12-12-19
 * Time: 下午4:55
 * To change this template use File | Settings | File Templates.
 * 上面这部分是代码的文件头注释，包含了创建文件所使用的编辑器（JetBrains PhpStorm）、作者（xuheng）、创建日期以及关于修改模板相关的提示信息等，主要用于代码的溯源和基本信息记录
 */
// 定义一个立即执行函数，用于创建一个独立的作用域，避免变量污染全局环境
(function () {
    // 获取页面中id为J_title的元素，通常这些元素可能是与表格编辑相关的表单元素（如复选框等），以下类似的获取操作同理
    var title = $G("J_title"),
        titleCol = $G("J_titleCol"),
        caption = $G("J_caption"),
        sorttable = $G("J_sorttable"),
        autoSizeContent = $G("J_autoSizeContent"),
        autoSizePage = $G("J_autoSizePage"),
        tone = $G("J_tone"),
        me,
        preview = $G("J_preview");

    // 定义一个名为editTable的构造函数，用于创建编辑表格相关功能的对象实例
    var editTable = function () {
        me = this;
        // 调用对象自身的init方法进行初始化操作
        me.init();
    };
    // 将editTable的原型对象进行扩展，添加一系列方法，用于实现具体的表格编辑相关功能
    editTable.prototype = {
        // init方法，用于初始化各种状态、绑定事件等操作
        init:function () {
            // 创建一个UE.ui.ColorPicker实例，用于选择颜色，传入编辑器对象（这里的editor应该是外部定义好的编辑器相关对象）
            var colorPiker = new UE.ui.ColorPicker({
                    editor:editor
                }),
                // 创建一个UE.ui.Popup实例，用于弹出颜色选择器相关的界面，传入编辑器对象，并将颜色选择器作为其内容
                colorPop = new UE.ui.Popup({
                    editor:editor,
                    content:colorPiker
                });

            // 根据编辑器中"inserttitle"命令的状态（-1可能表示未启用之类的情况）来设置title复选框的选中状态
            title.checked = editor.queryCommandState("inserttitle") == -1;
            titleCol.checked = editor.queryCommandState("inserttitlecol") == -1;
            caption.checked = editor.queryCommandState("insertcaption") == -1;
            sorttable.checked = editor.queryCommandState("enablesort") == 1;

            // 获取编辑器中"enablesort"命令的状态
            var enablesortState = editor.queryCommandState("enablesort"),
                disablesortState = editor.queryCommandState("disablesort");

            // 根据"enablesort"和"disablesort"命令的状态来设置sorttable复选框的选中和禁用状态，并设置提示标题（如果两个状态都小于0可能表示不可用情况等）
            sorttable.checked =!!(enablesortState < 0 && disablesortState >=0);
            sorttable.disabled =!!(enablesortState < 0 && disablesortState < 0);
            sorttable.title = enablesortState < 0 && disablesortState < 0? lang.errorMsg:'';

            // 调用对象自身的方法创建表格，传入相关复选框的选中状态作为参数
            me.createTable(title.checked, titleCol.checked, caption.checked);
            // 调用对象自身的方法设置表格自动尺寸相关逻辑
            me.setAutoSize();
            // 调用对象自身的方法设置表格颜色，传入获取到的颜色值作为参数
            me.setColor(me.getColor());

            // 给title元素绑定点击事件处理函数，点击时调用对象自身的titleHanler方法
            domUtils.on(title, "click", me.titleHanler);
            // 给titleCol元素绑定点击事件处理函数，点击时调用对象自身的titleColHanler方法
            domUtils.on(titleCol, "click", me.titleColHanler);
            // 给caption元素绑定点击事件处理函数，点击时调用对象自身的captionHanler方法
            domUtils.on(caption, "click", me.captionHanler);
            // 给sorttable元素绑定点击事件处理函数，点击时调用对象自身的sorttableHanler方法
            domUtils.on(sorttable, "click", me.sorttableHanler);
            // 给autoSizeContent元素绑定点击事件处理函数，点击时调用对象自身的autoSizeContentHanler方法
            domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler);
            // 给autoSizePage元素绑定点击事件处理函数，点击时调用对象自身的autoSizePageHanler方法
            domUtils.on(autoSizePage, "click", me.autoSizePageHanler);

            // 给tone元素绑定点击事件处理函数，点击时显示颜色选择器弹出框，并定位到tone元素位置
            domUtils.on(tone, "click", function () {
                colorPop.showAnchor(tone);
            });
            // 给document文档对象绑定鼠标按下事件处理函数，点击时隐藏颜色选择器弹出框
            domUtils.on(document, 'mousedown', function () {
                colorPop.hide();
            });
            // 给颜色选择器添加"pickcolor"事件的监听器，当选择颜色时调用对象自身的setColor方法设置颜色，并隐藏弹出框
            colorPiker.addListener("pickcolor", function () {
                me.setColor(arguments[1]);
                colorPop.hide();
            });
            // 给颜色选择器添加"picknocolor"事件的监听器，当不选择颜色（比如取消选择）时调用对象自身的setColor方法设置为空颜色，并隐藏弹出框
            colorPiker.addListener("picknocolor", function () {
                me.setColor("");
                colorPop.hide();
            });
        },

        // 创建表格的方法，根据传入的是否有标题、标题列、标题说明等参数来构建表格的HTML结构
        createTable:function (hasTitle, hasTitleCol, hasCaption) {
            var arr = [],
                sortSpan = '<span>^</span>';
            // 将表格开始标签添加到数组中，后续通过join方法拼接成完整的HTML字符串
            arr.push("<table id='J_example'>");
            // 如果传入的hasCaption为true，表示有标题说明，则添加标题说明的HTML结构到数组中
            if (hasCaption) {
                arr.push("<caption>" + lang.captionName + "</caption>")
            }
            // 如果传入的hasTitle为true，表示有标题行，则添加标题行的HTML结构到数组中
            if (hasTitle) {
                arr.push("<tr>");
                // 如果同时有标题列（hasTitleCol为true），则添加标题列的表头单元格HTML结构到数组中
                if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>"); }
                // 循环添加5个普通表头单元格的HTML结构到数组中
                for (var j = 0; j < 5; j++) {
                    arr.push("<th>" + lang.titleName + "</th>");
                }
                arr.push("</tr>");
            }
            // 循环添加6行表格数据行的HTML结构到数组中
            for (var i = 0; i < 6; i++) {
                arr.push("<tr>");
                if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>") }
                for (var k = 0; k < 5; k++) {
                    arr.push("<td>" + lang.cellsName + "</td>")
                }
                arr.push("</tr>");
            }
            // 将表格结束标签添加到数组中
            arr.push("</table>");
            // 将拼接好的HTML字符串设置为preview元素的innerHTML，用于在页面中显示表格示例
            preview.innerHTML = arr.join("");
            // 调用对象自身的updateSortSpan方法更新排序相关的显示内容（比如排序箭头等）
            this.updateSortSpan();
        },
        // 处理title复选框点击事件的方法
        titleHanler:function () {
            var example = $G("J_example"),
                frg=document.createDocumentFragment(),
                // 获取表格中第一个td单元格的边框颜色，用于后续设置颜色等操作
                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
                colCount = example.rows[0].children.length;

            // 如果title复选框被选中
            if (title.checked) {
                // 在表格的第一行插入新行（用于添加标题行）
                example.insertRow(0);
                // 循环根据表头列数量创建表头单元格元素，并添加到文档片段中
                for (var i = 0, node; i < colCount; i++) {
                    node = document.createElement("th");
                    node.innerHTML = lang.titleName;
                    frg.appendChild(node);
                }
                // 将包含表头单元格的文档片段添加到新插入的第一行中
                example.rows[0].appendChild(frg);

            } else {
                // 如果title复选框取消选中，移除表格的第一行（也就是移除标题行）
                domUtils.remove(example.rows[0]);
            }
            // 调用对象自身的setColor方法设置表格颜色，传入获取到的颜色值
            me.setColor(color);
            // 调用对象自身的updateSortSpan方法更新排序相关的显示内容
            me.updateSortSpan();
        },
        // 处理titleCol复选框点击事件的方法
        titleColHanler:function () {
            var example = $G("J_example"),
                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
                colArr = example.rows,
                colCount = colArr.length;

            // 如果titleCol复选框被选中
            if (titleCol.checked) {
                // 循环遍历每一行，在每行的第一个位置插入表头单元格元素
                for (var i = 0, node; i < colCount; i++) {
                    node = document.createElement("th");
                    node.innerHTML = lang.titleName;
                    colArr[i].insertBefore(node, colArr[i].children[0]);
                }
            } else {
                // 如果titleCol复选框取消选中，循环移除每行的第一个元素（也就是移除之前添加的表头单元格）
                for (var i = 0; i < colCount; i++) {
                    domUtils.remove(colArr[i].children[0]);
                }
            }
            // 调用对象自身的setColor方法设置表格颜色，传入获取到的颜色值
            me.setColor(color);
            // 调用对象自身的updateSortSpan方法更新排序相关的显示内容
            me.updateSortSpan();
        },
        // 处理caption复选框点击事件的方法
        captionHanler:function () {
            var example = $G("J_example");
            // 如果caption复选框被选中
            if (caption.checked) {
                // 创建一个caption元素（标题说明元素），设置其innerHTML为相应的文本内容
                var row = document.createElement('caption');
                row.innerHTML = lang.captionName;
                // 将创建的caption元素插入到表格的第一个子元素位置（也就是作为标题说明）
                example.insertBefore(row, example.firstChild);
            } else {
                // 如果caption复选框取消选中，移除表格中的标题说明元素（通过获取第一个caption元素来移除）
                domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
            }
        },
        // 处理sorttable复选框点击事件的方法，主要是更新排序相关的显示内容
        sorttableHanler:function(){
            me.updateSortSpan();
        },
        // 处理autoSizeContent单选框点击事件的方法，移除表格的宽度属性，使表格根据内容自适应宽度
        autoSizeContentHanler:function () {
            var example = $G("J_example");
            example.removeAttribute("width");
        },
        // 处理autoSizePage单选框点击事件的方法，设置表格宽度为100%，并移除表格内每个td单元格的宽度属性，使表格根据页面宽度自适应
        autoSizePageHanler:function () {
            var example = $G("J_example");
            var tds = example.getElementsByTagName(example, "td");
            utils.each(tds, function (td) {
                td.removeAttribute("width");
            });
            example.setAttribute('width', '100%');
        },
        // 更新排序相关显示内容的方法，比如添加或移除排序箭头等
        updateSortSpan: function(){
            var example = $G("J_example"),
                row = example.rows[0];

            var spans = domUtils.getElementsByTagName(example,"span");
            utils.each(spans,function(span){
                span.parentNode.removeChild(span);
            });
            if (sorttable.checked) {
                utils.each(row.cells, function(cell, i){
                    var span = document.createElement("span");
                    span.innerHTML = "^";
                    cell.appendChild(span);
                });
            }
        },
        // 获取表格颜色的方法，通过获取当前选择位置所在单元格的边框颜色来确定，如果没有获取到则返回默认颜色#DDDDDD
        getColor:function () {
            var start = editor.selection.getStart(), color,
                cell = domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
            color = cell && domUtils.getComputedStyle(cell, "border-color");
            if (!color)  color = "#DDDDDD";
            return color;
        },
        // 设置表格颜色的方法，设置表格中所有td、th、caption元素的边框颜色，并更新tone元素（可能是显示颜色的输入框之类的）的值
        setColor:function (color) {
            var example = $G("J_example"),
                arr = domUtils.getElementsByTagName(example, "td").concat(
                    domUtils.getElementsByTagName(example, "th"),
                    domUtils.getElementsByTagName(example, "caption")
                );

            tone.value = color;
            utils.each(arr, function (node) {
                node.style.borderColor = color;
            });

        },
        // 设置表格自动尺寸的方法，默认选中autoSizePage单选框，并调用其对应的处理方法来设置表格尺寸
        setAutoSize:function () {
            var me = this;
            autoSizePage.checked = true;
            me.autoSizePageHanler();
        }
    };

    // 创建一个editTable的实例，启动整个表格编辑相关的功能逻辑
    new editTable;

    // 给dialog对象（可能是对话框相关对象）的onok属性设置一个函数，当点击对话框的确定按钮时执行以下逻辑
    dialog.onok = function () {
        editor.__hasEnterExecCommand = true;

        var checks = {
            title:"inserttitle deletetitle",
            titleCol:"inserttitlecol deletetitlecol",
            caption:"insertcaption deletecaption",
            sorttable:"enablesort disablesort"
        };
        // 触发编辑器的'saveScene'事件
        editor.fireEvent('saveScene');
        for(var i in checks){
            var cmds = checks[i].split(" "),
                input = $G("J_" + i);
            if(input["checked"]){
                editor.queryCommandState(cmds[0])!=-1 &&editor.execCommand(cmds[0]);
            }else{
                editor.queryCommandState(cmds[1])!=-1 &&editor.execCommand(cmds[1]);
            }
        }

        editor.execCommand("edittable", tone.value);
        autoSizeContent.checked?editor.execCommand('adaptbytext') : "";
        autoSizePage.checked? editor.execCommand("adaptbywindow") : "";
        editor.fireEvent('saveScene');

        editor.__hasEnterExecCommand = false;
    };
})();