/**
 * Created with JetBrains PhpStorm.
 * User: xuheng
 * Date: 12-9-26
 * Time: 下午1:09
 * To change this template use File | Settings | File Templates.
 * 上面这部分是代码的文件头注释，通常由开发工具自动生成，包含了创建文件所使用的编辑器（JetBrains PhpStorm）、作者（xuheng）、创建日期以及关于修改模板相关的提示信息等，主要用于代码的溯源和基本信息记录
 */
// 定义一个名为charsContent的数组，数组中每个元素都是一个对象，用于存储不同类型的字符相关信息
var charsContent = [
    // 第一个对象，代表一种字符类型（这里可能是特殊符号之类的，从包含的字符推测），有name、title、content三个属性
    { name:"tsfh", title:lang.tsfh, content:toArray("、,。,·,ˉ,ˇ,¨,〃,々,—,～,‖,…,‘,’,“,”,〔,〕,〈,〉,《,》,「,」,『,』,〖,〗,【,】,±,×,÷,∶,∧,∨,∑,∏,∪,∩,∈,∷,√,⊥,∥,∠,⌒,⊙,∫,∮,≡,≌,≈,∽,∝,≠,≮,≯,≤,≥,∞,∵,∴,♂,♀,°,′,″,℃,＄,¤,￠,￡,‰,§,№,☆,★,○,●,◎,◇,◆,□,■,△,▲,※,→,←,↑,↓,〓,〡,〢,〣,〤,〥,〦,〧,〨,〩,㊣,㎎,㎏,㎜,㎝,㎞,㎡,㏄,㏎,㏑,㏒,㏕,︰,￢,￤,℡,ˊ,ˋ,˙,–,―,‥,‵,℅,℉,↖,↗,↘,↙,∕,∟,∣,≒,≦,≧,⊿,═,║,╒,╓,╔,╕,╖,╗,╘,╙,╚,╛,╜,╝,╞,╟,╠,╡,╢,╣,╤,╥,╦,╧,╨,╩,╪,╫,╬,╭,╮,╯,╰,╱,╲,╳,▁,▂,▃,▄,▅,▆,▇,�,█,▉,▊,▋,▌,▍,▎,▏,▓,▔,▕,▼,▽,◢,◣,◤,◥,☉,⊕,〒,〝,〞")},
    { name:"lmsz", title:lang.lmsz, content:toArray("ⅰ,ⅱ,ⅲ,ⅳ,ⅴ,ⅵ,ⅶ,ⅷ,ⅸ,ⅹ,Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ,Ⅶ,Ⅷ,Ⅸ,Ⅹ,Ⅺ,Ⅻ")},
    { name:"szfh", title:lang.szfh, content:toArray("⒈,⒉,⒊,⒋,⒌,⒍,⒎,⒏,⒐,⒑,⒒,⒓,⒔,⒕,⒖,⒗,⒘,⒙,⒚,⒛,⑴,⑵,⑶,⑷,⑸,⑹,⑺,⑻,⑼,⑽,⑾,⑿,⒀,⒁,⒂,⒃,⒄,⒅,⒆,⒇,①,②,③,④,⑤,⑥,⑦,⑧,⑨,⑩,㈠,㈡,㈢,㈣,㈤,㈥,㈦,㈧,㈨,㈩")},
    { name:"rwfh", title:lang.rwfh, content:toArray("ぁ,あ,ぃ,い,ぅ,う,ぇ,え,ぉ,お,か,が,き,ぎ,く,ぐ,け,げ,こ,ご,さ,ざ,し,じ,す,ず,せ,ぜ,そ,ぞ,た,だ,ち,ぢ,っ,つ,づ,て,で,と,ど,な,に,ぬ,ね,の,は,ば,ぱ,ひ,び,ぴ,ふ,ぶ,ぷ,へ,べ,ぺ,ほ,ぼ,ぽ,ま,み,む,め,も,ゃ,や,ゅ,ゆ,ょ,よ,ら,り,る,れ,ろ,ゎ,わ,ゐ,ゑ,を,ん,ァ,ア,ィ,イ,ゥ,ウ,ェ,エ,ォ,オ,カ,ガ,キ,ギ,ク,グ,ケ,ゲ,コ,ゴ,サ,ザ,シ,ジ,ス,ズ,セ,ゼ,ソ,ゾ,タ,ダ,チ,ヂ,ッ,ツ,ヅ,テ,デ,ト,ド,ナ,ニ,ヌ,ネ,ノ,ハ,バ,パ,ヒ,ビ,ピ,フ,ブ,プ,ヘ,ベ,ペ,ホ,ボ,ポ,マ,ミ,ム,メ,モ,ャ,ヤ,ュ,ユ,ョ,ヨ,ラ,リ,ル,レ,ロ,ヮ,ワ,ヰ,ヱ,ヲ,ン,ヴ,ヵ,ヶ")},
    { name:"xlzm", title:lang.xlzm, content:toArray("Α,Β,Γ,Δ,Ε,Ζ,Η,Θ,Ι,Κ,Λ,Μ,Ν,Ξ,Ο,Π,Ρ,Σ,Τ,Υ,Φ,Χ,Ψ,Ω,α,β,γ,δ,ε,ζ,η,θ,ι,κ,λ,μ,ν,ξ,ο,π,ρ,σ,τ,υ,φ,χ,ψ,ω")},
    { name:"ewzm", title:lang.ewzm, content:toArray("А,Б,В,Г,Д,Е,Ё,Ж,З,И,Й,К,Л,М,Н,О,П,Р,С,Т,У,Ф,Х,Ц,Ч,Ш,Щ,Ъ,Ы,Ь,Э,Ю,Я,а,б,в,г,д,е,ё,ж,з,и,й,к,л,м,н,о,п,р,с,т,у,ф,х,ц,ч,ш,щ,ъ,ы,ь,э,ю,я")},
    { name:"pyzm", title:lang.pyzm, content:toArray("ā,á,ǎ,à,ē,é,ě,è,ī,í,ǐ,ì,ō,ó,ǒ,ò,ū,ú,ǔ,ù,ǖ,ǘ,ǚ,ǜ,ü")},
    { name:"yyyb", title:lang.yyyb, content:toArray("i:,i,e,æ,ʌ,ə:,ə,u:,u,ɔ:,ɔ,a:,ei,ai,ɔi,əu,au,iə,εə,uə,p,t,k,b,d,g,f,s,ʃ,θ,h,v,z,ʒ,ð,tʃ,tr,ts,dʒ,dr,dz,m,n,ŋ,l,r,w,j,")},
    { name:"zyzf", title:lang.zyzf, content:toArray("ㄅ,ㄆ,ㄇ,ㄈ,ㄉ,ㄊ,ㄋ,ㄌ,ㄍ,ㄎ,ㄏ,ㄐ,ㄑ,ㄒ,ㄓ,ㄔ,ㄕ,ㄖ,ㄗ,ㄘ,ㄙ,ㄚ,ㄛ,ㄜ,ㄝ,ㄞ,ㄟ,ㄠ,ㄡ,ㄢ,ㄣ,ㄤ,ㄥ,ㄦ,ㄧ,ㄨ")}
];

// 定义一个立即执行函数，传入charsContent作为参数，用于创建选项卡相关的DOM结构以及绑定交互逻辑
(function createTab(content) {
    // 循环遍历传入的content数组（也就是charsContent）
    for (var i = 0, ci; ci = content[i++];) {
        // 创建一个<span>元素，后续用于作为选项卡的标题之类的显示元素
        var span = document.createElement("span");
        // 给创建的<span>元素设置一个自定义属性tabSrc，值为当前对象的name属性（用于后续识别和关联）
        span.setAttribute("tabSrc", ci.name);
        // 将当前对象的title属性值设置为<span>元素的innerHTML，也就是显示的文本内容
        span.innerHTML = ci.title;
        // 如果是第一个选项卡（索引为1，因为索引从0开始，这里实际是第二个元素，但符合通常第一个选项卡默认选中的逻辑），给它添加名为"focus"的类名，用于样式上突出显示（比如改变背景色等）
        if (i == 1)span.className = "focus";
        // 给<span>元素绑定点击事件处理函数
        domUtils.on(span, "click", function () {
            // 获取id为tabHeads的元素的所有子元素（可能是所有选项卡标题元素）
            var tmps = $G("tabHeads").children;
            // 循环遍历这些子元素，将它们的类名都清空，用于取消之前的选中状态样式
            for (var k = 0, sk; sk = tmps[k++];) {
                sk.className = "";
            }
            // 获取id为tabBodys的元素的所有子元素（可能是各个选项卡对应的内容区域元素）
            tmps = $G("tabBodys").children;
            // 循环遍历这些子元素，将它们的display样式设置为"none"，也就是隐藏起来
            for (var k = 0, sk; sk = tmps[k++];) {
                sk.style.display = "none";
            }
            // 将当前点击的<span>元素的类名设置为"focus"，表示选中状态
            this.className = "focus";
            // 根据当前点击<span>元素的tabSrc属性值，获取对应的id的元素，并将其display样式设置为空字符串（一般就是显示出来，恢复默认显示状态）
            $G(this.getAttribute("tabSrc")).style.display = "";
        });
        // 将创建并设置好的<span>元素添加到id为tabHeads的元素中，作为其子元素
        $G("tabHeads").appendChild(span);
        // 在添加的<span>元素后面插入一个换行的文本节点，用于排版美化之类的（可能影响页面布局呈现效果）
        domUtils.insertAfter(span, document.createTextNode("\n"));

        // 创建一个<div>元素，用于作为选项卡的内容区域容器
        var div = document.createElement("div");
        // 设置该<div>元素的id为当前对象的name属性值，方便后续通过id查找和操作
        div.id = ci.name;
        // 如果是第一个选项卡（索引为1），将其display样式设置为空字符串（显示出来），否则设置为"none"（隐藏起来）
        div.style.display = (i == 1)? "" : "none";
        // 获取当前对象的content属性值（是一个数组，包含了具体的字符内容）
        var cons = ci.content;
        // 循环遍历这个content数组
        for (var j = 0, con; con = cons[j++];) {
            // 创建一个<span>元素，用于显示单个字符
            var charSpan = document.createElement("span");
            // 将当前字符内容设置为<span>元素的innerHTML，也就是显示出来
            charSpan.innerHTML = con;
            // 给这个用于显示字符的<span>元素绑定点击事件处理函数
            domUtils.on(charSpan, "click", function () {
                // 调用editor对象的execCommand方法，执行"insertHTML"命令，将当前点击的<span>元素的innerHTML（也就是字符内容）插入到编辑器中（这里的editor应该是外部定义好的编辑器相关对象）
                editor.execCommand("insertHTML", this.innerHTML);
                // 调用dialog对象的close方法，关闭对话框（这里的dialog应该也是外部定义好的相关对象，用于展示这个字符选择的界面等）
                dialog.close();
            });
            // 将创建并设置好的用于显示字符的<span>元素添加到对应的选项卡内容区域的<div>元素中
            div.appendChild(charSpan);
        }
        // 将整个选项卡内容区域的<div>元素添加到id为tabBodys的元素中，作为其子元素
        $G("tabBodys").appendChild(div);
    }
})(charsContent);

// 定义一个函数toArray，用于将传入的字符串按照逗号进行分割，返回分割后的数组
function toArray(str) {
    return str.split(",");
}