Facemark = {
    icons: {
        "laugh": [
            [ '(◎´∀｀)ノ', 'ヽ(´▽｀)/', '(*^-^)', 'o(*^▽^*)o', '(o^-^o)' ],
            [ '(ﾟ▽ﾟ*)', '(ﾟｰﾟ)', '(*ﾟ▽ﾟ)ﾉ', ';:ﾞ;｀(ﾟ∀ﾟ)｀;:ﾞ', '(ﾟｍﾟ*)' ],
            [ '(￣ー￣)ﾆﾔﾘ', '(￣▽￣)', '（￣ー+￣）', '(*￣ー￣*)', '( ＾ω＾ )' ],
            [ '(｡･ｗ･｡ )', '(*^m^)', '(○ﾟεﾟ○)', '(≧∇≦)', '(≧ｍ≦）' ],
            [ '(*≧ｍ≦*)', '( ´艸｀)ﾌﾟﾌﾟﾌﾟ', 'ψ(｀∇´)ψ', '(v^ー゜)ヤッタネ!!', '(･∀･)ｲｲ!' ],
            [ 'ヽ(*≧ε≦*)φ', '(*^ω^*)ﾉ彡', 'ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ', '(・∀・)ﾆﾔﾆﾔ' ],
            [ '(ﾉ∀｀)･ﾟ･｡ ｱﾋｬﾋｬﾋｬﾋｬ', '｀;:ﾞ;｀;･(ﾟεﾟ )ﾌﾞｯ!!', '(*^ーﾟ)bｸﾞｯｼﾞｮﾌﾞ!!' ],
            [ '（´,_ゝ｀）ﾌﾟｯ', 'm9（＾Д＾）プギャー', '（　＾ω＾）おっおっおっ' ]
        ],
        "angry":[
            [ '(-ε-)', '(｀ε´)', 'ヽ( )｀ε´( )ノ', '＼(*｀∧´)／', '（ﾟДﾟ）ﾊｧ?' ],
            [ '(｀Д´)', '(≧ヘ≦)', '(-゛-ﾒ)', '(｀◇´*)', '凸(｀､´X）' ],
            [ '(-_-X)', '(＃￣З￣)', '( #` ￢´#)', '(*｀ε´*)ノ' ],
            [ '(＃｀皿´)', '（○｀ε´○）', '(#`Д´)', 'p(`ε´q）', '(;-ω-)ﾉ' ],
            [ '(# ﾟДﾟ) ﾑｯｶｰ', '(#ﾟДﾟ)y-~~ｲﾗｲﾗ', '(　ﾟ皿ﾟ)ｷｰｯ!!', '凸(｀Д´メ)' ],
            [ 'щ(ﾟДﾟщ)ｶﾓｫｫｫﾝ', '(!!｀З゜※!Pq)', '(*`pЗ´q)', '( ﾟдﾟ)､ﾍﾟｯ' ],
            [ '（・A・）ｲｸﾅｲ', 'ﾓﾑｰﾘ！o(ﾟДﾟ)っ', '(ﾟ⊿ﾟ)ｲﾗﾈ', 'o(｀ω´*)oﾌﾟﾝｽｶﾌﾟﾝｽｶ!!' ],
            [ 'o(#ﾟДﾟ)_‐=o)`Дﾟ)･;', 'ヽ(#ﾟДﾟ)ﾉ┌┛)`Дﾟ)･;' ]
        ],
        "cry": [
            [ '（；ω；）', '（ρ＿；）', '(;д;)', '(｡＞0＜｡)', '(ノд・。)' ],
            [ '(ﾉ_-｡)', '(/□≦､)', '(ﾉω･､)', 'ﾟﾟ(´O｀)°ﾟ', '。・ﾟﾟ･(≧д≦)･ﾟﾟ･｡' ],
            [ '。゜゜(´□｀｡)°゜。', '(p_q*)', 'o(；△；)o', 'ヾ(；□；)э' ],
            [ '(p´□`q）゜o。。', '(ノ＿≦。)', '(||li｀ωﾟ∞)', '( ´；ω；`)ﾌﾞﾜｯ' ],
            [ '(´；ω；｀)ｳｳ･･･', '(´・ω・｀)ｼｮﾎﾞｰﾝ', '。*((艸д・。`*)゜*。', '(つд⊂)ｴｰﾝ' ],
            [ 'つД`)･ﾟ･｡･ﾟﾟ･*:.｡', '(´Д⊂ｸﾞｽﾝ', '(;´Д⊂', 'つД｀)', '（u＿u。)' ]
        ],
        "hurry": [
            [ '(^-^;', '(ﾟｰﾟ;', '＼(;ﾟ∇ﾟ)/', '(￣Д￣；；', '(＠Д＠；' ],
            [ '(;;;´Д｀)', '(；´Д`A ```', '(〃ﾟдﾟ；A　AﾟÅﾟ；)ゝ ﾟ+:.' ],
            [ 'ヾ(；´Д`A', '((･(ｪ)･；))', '（;´▽｀A``', '(;;;´Д｀)ゝ', '(;´д｀)ﾄﾎﾎ…' ],
            [ '((ﾉ)ﾟω(ヾ))', 'ヽ(;´Д`ヽ)(ノ;´Д`)ノ', '(￣◆￣；)' ],
            [ '(A；´･ω･)ｱｾｱｾ', '(￣○￣;)!', '~(°°;)))ｵﾛｵﾛ(((；°°）~' ],
            [ '(´Д｀;≡;´Д｀)ｱﾜｱﾜ', 'Σ(;・∀・)', 'ι(´Д｀υ)ｱｾｱｾ' ]
        ],
        "surprise": [
            [ '!!(ﾟﾛﾟ屮)屮', 'w(ﾟoﾟ)w', '……(ﾉﾟοﾟ)ﾉﾐ(ﾉ _ _)ﾉ', 'Σ(￣ロ￣lll)' ],
            [ '∑q|ﾟДﾟ|p', 'Σ(ﾟдﾟ;)', 'ヾ(.;.;ﾟДﾟ)ﾉ', '(lllﾟДﾟ)', '(　Д)　ﾟ　ﾟ' ],
            [ 'Σ(ﾟ□ﾟ(ﾟ□ﾟ*)', '∑(=ﾟωﾟ=;)', '(ﾟ０ﾟ)', '∑(ﾟ∇ﾟ|||)', 'ヾ(*ﾟA｀)ﾉ' ],
            [ 'Σ(｀0´*)', '！(･oﾉ)ﾉ', '∑ヾ(￣0￣;ﾉ', 'Σ(･ω･ﾉ)ﾉ！', 'Σ（ﾟдﾟlll）ｱﾌﾞﾅｯ !' ],
            [ 'ｱﾌﾞﾈ━━Σ(ﾟдﾟ;)━━!!', 'ﾓﾋｬ━━((゜Д゜Uu))━━!!!!!!' ],
            [ 'ｱﾜ((ﾟﾟддﾟﾟ ))ﾜﾜ!!', 'Σ((oÅO艸＊)', 'ﾋｨｰ(((ﾟДﾟ)))ｶﾞﾀｶﾞﾀ', 'Σ( ゜Д゜)ﾊｯ！' ]
        ],
        "embarrass": [
            [ '(*´vﾟ*)ゞ', '(*ﾟｰﾟ*)', '(*´σｰ｀)' ],
            [ '(*^.^*)', 'ヾ(´ε｀*)ゝ', 'c(＞ω＜)ゞ', '(=´Д｀=)ゞ', '(*´ｪ`*)' ],
            [ '(*´Д`*)', '(/ｰ＼*)', '(´∀`)σ)Д`*)' ],
            [ '(*v.v)｡', '(*ﾉv｀)', '(*ﾟ∀ﾟ)=3ﾊｧﾊｧ', '((w´ω｀w))' ],
            [ '゜.+:。(*´v｀*)゜.+:。', '* ´З｀)σ', 'r(^ω^*)))', 'ﾓｼﾞ(((*´ε｀ *)(* ´З｀*)))ﾓｼﾞ' ],
            [ '(/ω＼)ﾊｽﾞｶｼｰｨ', '(*´д｀*)ﾊｧﾊｧ', 'ﾓｼﾞﾓｼﾞ(｡_｡*)))', 'ヾ(´ε｀*)ゝ ｴﾍﾍ' ]
        ],
        "amaze": [
            [ '(　´,_ゝ｀)ﾊｲﾊｲ', '┐(´д｀)┌ﾔﾚﾔﾚ', '┐(￣ヘ￣）┌ ﾌｩｩ～' ],
            [ '（ ´_ゝ`）ﾌｰﾝ', '（´ρ｀）ぽか～ん', '( ﾟдﾟ)ﾎﾟｶｰﾝ', '(・_・)エッ....?' ],
            [ 'ﾔｯﾃﾗﾚﾝﾜ…ヽ(○´3`)ﾉ ﾌｯ', '┐(´-｀)┌', '(ﾉ∀`) ｱﾁｬｰ' ],
            [ 'ﾔﾚﾔﾚ ┐(´(エ)｀)┌ｸﾏｯﾀﾈ ', 'ε-(￣ヘ￣)┌ ﾀﾞﾐﾀﾞｺﾘｬ…' ]
        ],
        "greeting": [
            [ '(ｏ・ω・)ノ))', '(=ﾟωﾟ)ﾉ　o(_ _)oﾍﾟｺｯ', '（=゜ω゜）ノぃょぅ' ],
            [ '(○｀･ｪ･)ノ【こ】【ん】【に】【ち】【ゎ】', '´ω｀)ノﾄﾞﾓ', '(*￣0￣)ノ' ],
            [ '(｡･ω･)ﾉﾞ ｺﾝﾁｬ♪', '( ´_ゝ`)ﾉﾎﾞﾝｼﾞｭｰﾙ♪' ],
            [ 'm(_ _)m', '人(￣ω￣;) ｽﾏﾇ', 'ヾ(_ _*)ﾊﾝｾｲ･･･' ],
            [ '(*_ _)人ゴメンナサイ ', '（人＞＜。）', 'm(.￣　￣.)mス・スイマセーン' ],
            [ '(TωT)ﾉ~~~ ﾊﾞｲﾊﾞｲ', 'ｻﾖｰﾅﾗｰ(_´Д｀)ﾉ~~', '(○゜ε゜○)ノ~~' ],
            [ '(/ ^^)/アリガトネ', '（．＿．)アリガト', 'さんくす♪(o￣∇￣)/' ]
        ],
        "other1": [
            [ 'ｷﾀﾜｧ*･゜ﾟ･*:.｡..｡.:*･゜(n‘∀‘)ηﾟ･*:.｡..｡.:*･゜ﾟ･* !!!!!', 'ﾏﾀﾞｧ-? （･∀･ ）っ/凵⌒☆ﾁﾝﾁﾝ' ],
            [ 'ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!', '⊂二二二（　＾ω＾）二⊃　ﾌﾞｰｰｰﾝ' ],
            [ 'ぅぉぉぉーヽ（ﾟωﾟ ）ﾉヽ（ ﾟωﾟ）ﾉヽ（ﾟωﾟ ）ﾉぅぉぉぉーヽ（ ﾟωﾟ）ﾉヽ（ﾟωﾟ ）ﾉ　ぅぉぉぉー' ],
            [ '（0゜・∀・）ﾜｸﾜｸﾃｶﾃｶ', 'ﾟ.+:｡(･ω･)bﾟ.+:｡', '（｀・∞・´）', '( ´･ω･`)' ],
            [ '(||´Д｀)ｏ=3=3=3 ｺﾞﾎｺﾞﾎ', '(∩ﾟдﾟ)ｱｰｱｰきこえなーい', 'φ(・ω・ )ﾒﾓﾒﾓ' ],
            [ '(ﾟεﾟ)ｷﾆｼﾅｲ!!', '||Φ|(|ﾟ|∀|ﾟ|)|Φ||', '（´～｀）。゜○', '（-.-）zZ', '(´△｀)Zzzz・・・｡o○' ],
            [ '( ﾟДﾟ)y─┛~~', '(　ﾟдﾟ)ﾎｽｨ…', '|ﾟзﾟ)', '｜∀･)', '｜ω・)' ],
            [ '( ･∀･)つ旦~~', '(*ﾟ∀ﾟ)=3 ﾑｯﾊｰ!!', 'ｵﾜﾀ┗(^o^ )┓三', '┗(^o^)┛ﾊﾟｰﾝ', '＼(^o^)／' ],
            [ 'ｷｮﾛ(･_･ )( ･_･)ｷｮﾛ', '(σ･∀･)σｹﾞｯﾂ', 'へ(´∀`ヘ)へ))ｶｻｶｻ', '( ￣＾￣)ゞﾗｼﾞｬ', '(´-д-`)' ]
        ],
        "other2": [
            [ '＿|￣|○', '＿ﾉフ○　ｸﾞｯﾀﾘ', 'orz', '○|＿|￣ =3 ｽﾞｺｰ' ],
            [ '_/＼○_　　　ε=＼＿○ﾉ ｲﾔｯﾎｰｩ!', '：D)|￣|_', '  il||li ＿|￣|○ il||li' ],
            [ '⊂⌒~⊃｡Д｡)⊃ ﾋﾟｸﾋﾟｸ', 'Σ⊆(・∀・⊂⌒つ' ]
        ],
        "line": [
            [ ':;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+:;;;:+*+' ],
            [ '｡。+ﾟﾟ｡。+ﾟﾟ｡。+ﾟﾟ｡。+ﾟﾟ｡。+ﾟﾟ｡。+ﾟﾟ' ],
            [ '.｡.:**:.｡..｡.:**:.｡..｡.:**:.｡..｡.:**:.｡.' ],
            [ '゜。°。°。°。°。°。°。°。゜。°。°。°。' ],
            [ '○o。+..:*○o。+..:*○o。+..:*' ],
            [ '・‥…━━━☆・‥…━━━☆・‥…━━━☆' ],
            [ '★゜・。。・゜゜・。。・゜☆゜・。。・゜゜・。。・゜' ],
            [ '☆*:;;;;;;:*☆*:;;;;;;:*☆*:;;;;;:*☆*:;;;;;:*' ],
            [ '...｡oо○**○оo｡...｡oо○**○оo｡...｡oо○**○оo｡' ],
            [ '♪:;;;:♪:;;;:♪:;;;:♪:;;;:♪:;;;:♪:;;;:♪:;;;:♪:;;;:♪:;;;:♪:;;;:' ]
        ]
    },

    categories: [
        [ "laugh", "笑", "28px" ],
        [ "angry", "怒", "28px" ],
        [ "cry", "泣", "28px" ],
        [ "hurry", "汗", "28px" ],
        [ "surprise", "驚", "28px" ],
        [ "embarrass", "照", "28px" ],
        [ "amaze", "呆れる", "48px" ],
        [ "greeting", "あいさつ", "58px" ],
        [ "other1", "その他１", "58px" ],
        [ "other2", "その他２", "58px" ],
        [ "line", "ライン", "48px" ]
    ],

    staticURI: StaticURI || '/.shared/',

    is_gecko: (navigator.product == "Gecko"
                  && !navigator.userAgent.toLowerCase().match(/(khtml|camino)/)),
    is_ie6: navigator.userAgent.toLowerCase().match(/msie 6\.\d/),
    is_ie7: navigator.userAgent.toLowerCase().match(/msie 7\.\d/),
    is_ie8: navigator.userAgent.toLowerCase().match(/msie 8\.\d/),
    is_safari: navigator.userAgent.toLowerCase().match(/safari/),
    is_mac: navigator.userAgent.toLowerCase().match(/mac/)
};

if (typeof(TC) == 'undefined') {
    document.write('<script type="text/javascript" src="/.shared/js/tc.js"></script>');
    document.write('<script type="text/javascript" src="/.shared/js/tc/window.js"></script>');
}

Facemark.Pallet = {
    pallet: "",
    tab: "",
    panel: "",
    className: 'facemark-pallet',
    style: {
        position: 'absolute',
        zIndex: 5,
        backgroundColor: '#fff',
        border: '1px solid #ccc'
    },

    captionText: 'For continuous input, ' + Facemark.is_mac ? 'Alt(Option)' : 'Ctrl' + ' + Click.',

    initialize: function() {
        if (this.window) return;
        var pallet = this.createPallet();
        var w = new TC.Window();
        w.quick = true;
        w.setStyle(this.style);
        w.element.className = this.className;
        // If IE6.x, insert an empty iframe behind emoticon pallet
        // to avoid to overwrite pallet with windows control objects.
        if (Facemark.is_ie6) {
            var iframe = document.createElement('iframe');
            iframe.style.position = 'absolute';
            iframe.style.zIndex   = -1;
            iframe.width       = '570px';
            iframe.height      = '299px';
            iframe.scrolling   = 'no';
            iframe.frameBorder = 0;
            iframe.src         = 'javascript:false;';
            w.element.appendChild(iframe);
        }
        w.element.appendChild(pallet);
        w.attach();
        this.window = w;
    },

    createPallet: function() {
        var self = this;
        this.insertCallback       = function(evt) { return self.insert(evt) };
        this.changeCallback       = function(evt) { return self.change(evt) };
        this.resizeWindowCallback = function(evt) { return self.moveWindow(evt) };

        var container = document.createElement("div");
        container.className = 'facemark-pallet-container';
        container.innerHTML = this.captionText;

        var tabs = document.createElement("div");
        tabs.className = 'facemark-pallet-tab';
        tabs.style.height = '26px';
        tabs.style.backgroundColor ='#fff';
        for (var i = 0; i < Facemark.categories.length; i++) {
            var name = Facemark.categories[i][0];
            var label = Facemark.categories[i][1];
            var width = Facemark.categories[i][2];
            var tab = Facemark.Tab.create( name, label, width, this.changeCallback );
            tabs.appendChild(tab);
        }
        br = document.createElement('br');
        br.style.clear = "both";
        tabs.appendChild(br);

        container.appendChild(tabs);

        var div = this.createPanel("laugh");
        container.appendChild(div);

        TC.setStyle(container,
                    { margin: 0, padding: 0,
                      width: '570px',
                      height: '299px',
                      textAlign: 'center',
                      fontSize:'10px',
                      fontFamily: 'sans-serif',
                      color: '#000000',
                      backgroundColor: '#dedede'
                    });
        TC.setStyle(div,
                    { margin: 0, padding: 0,
                      width: '570px',
                      backgroundRepeat: 'no-repeat',
                      backgroundColor: '#fff'
                    });

        this.pallet = container;
        return container;
    },

    createPanel: function(cat) {
        var div = document.createElement("div");
        div.className = 'facemark-pallet-content';

        for (var i = 0; i < Facemark.icons[cat].length; i++) {
            var row = document.createElement("div");
            row.style.width = '100%';
            row.style.height = '26px';
            row.style.margin = '0px';
            row.style.padding = '0px';
            if (i % 2 == 0) {
                row.className = 'facemark-pallet-row-even';
                row.style.backgroundColor = '#fff';
            } else {
                row.className = 'facemark-pallet-row-odd';
                row.style.backgroundColor = '#eee';
            }
            for (var j = 0; j < Facemark.icons[cat][i].length; j++) {
                var str = Facemark.icons[cat][i][j];
                var icon = Facemark.Mark.create(str, this.insertCallback, i);
                row.appendChild(icon);
            }
            br = document.createElement('br');
            br.style.clear = "both";
            row.appendChild(br);

            div.appendChild(row);
        }

        this.panel = div;
        return div;
    },

    open: function(editor, button) {
        if (Facemark.is_ie6 || Facemark.is_ie7 || Facemark.is_ie8) {
            if (editor._editMode == "wysiwyg") {
                editor.focusEditor();
                editor._saveSelection();
            }
        }

        this.initialize();

        this._editor = editor;
        this.window.show();

        if (editor['event']) {
            button = editor.event.target || editor.event.srcElement;
        }
        var pos = TC.getAbsolutePosition(button);
        this.ox = this.x = pos.left;
        this.window.element.style.left = pos.left + "px";
        this.window.element.style.top  = pos.top  + "px";
        this.moveWindow();

        this.window.element.focus();

        TC.attachEvent(window, 'resize', this.resizeWindowCallback);
    },

    insert: function(evt) {
        evt = evt || event;
        var facemark  = evt.target || evt.srcElement;
        if (!facemark) return;
        if (Facemark.is_safari && facemark.className != 'facemark') {
            facemark = facemark.parentNode;
        }

        var keycode = Facemark.is_mac ? evt.altKey : evt.ctrlKey ;
        if (!keycode) {
            TC.detachEvent(window, 'resize', this.resizeWindowCallback);
            this.window.hide();
        }

        var editor = this._editor;
        var name = facemark.title;
        name = name.replace(/&/g,"&amp;") ;
        name = name.replace(/"/g,"&quot;") ;
        name = name.replace(/'/g,"&#039;") ;
        name = name.replace(/</g,"&lt;") ;
        name = name.replace(/>/g,"&gt;") ;
        if (!name) return;
        if (editor._editMode == "wysiwyg") {
            if (Facemark.is_ie6 || Facemark.is_ie7 || Facemark.is_ie8) {
                editor.focusEditor();
                editor._restoreSelection();
            }
            Facemark.is_gecko
                ? editor.execCommand('insertHTML', false, name)
                : editor.insertHTML(name)
                ;
            if (keycode && Facemark.is_ie6 || Facemark.is_ie7 || Facemark.is_ie8) {
                // When continuously inputting facemark,
                // the cursor position is saved again in IE.
                editor._saveSelection();
            }
        }
        else {
            var plane = name;
            var e = editor._textArea || editor;
            if (document.selection) {
                e.focus();
                document.selection.createRange().text = plane;
            }
            else if (e['selectionStart']) {
                var length = e.textLength;
                var start  = e.selectionStart;
                var end    = e.selectionEnd;
                e.value = e.value.substring(0, start) + plane + e.value.substr(end, length);
                e.setSelectionRange(start + plane.length, start + plane.length);
            }
            else {
                e.value = e.value + plane;
            }
        }

        if (facemark.parentNode.className == 'facemark-pallet-row-even') {
            facemark.style.border = '1px solid #fff'
        } else {
            facemark.style.border = '1px solid #eee'
        }

        return TC.stopEvent(evt);
    },

    change: function(evt) {
        evt = evt || event;
        var tab  = evt.target || evt.srcElement;
        if (!tab) return;
        if (Facemark.is_safari && !tab.className) {
            tab = tab.parentNode;
        }

        this.tab.style.borderBottom = '1px solid #000';
        tab.style.borderBottom = '0px';
        this.tab = tab;

        if (this.panel) {
            this.pallet.removeChild(this.panel);
            this.panel = "";
        }

        var cat = tab.className.match(/^tab-([\w\-]+)/) && RegExp.$1;

        var div = this.createPanel(cat);
        this.pallet.appendChild(div);

        return TC.stopEvent(evt);
    },

    moveWindow: function(evt) {
        if (!this.window.visible) {
            TC.detachEvent(window, 'resize', this.resizeWindowCallback);
            return;
        }
        if (this.x < this.ox) this.x = this.ox;
        if (this.x + 576 > document.documentElement.clientWidth) {
            this.x = document.documentElement.clientWidth - 576;
            if (this.x < 2) this.x = 2;
        }
        this.window.element.style.left = this.x + 'px';
    }
};

Facemark.Tab = {
    style: {
        display:         'block',
        position:        'relative',
        styleFloat:      'left',
        cssFloat:        'left',
        margin:          '0px',
        padding:         '3px 5px 3px 5px',
        textDecoration:  'none',
        fontSize:        '12px',
        borderTop:       '1px solid #999', 
        borderLeft:      '1px solid #999', 
        borderRight:     '1px solid #000', 
        borderBottom:    '1px solid #000', 
        backgroundColor: '#fff',
        cursor:          'pointer'
    },

    mouseOver: function() { this.style.color = '#f00' },
    mouseOut:  function() { this.style.color = '#000' },

    element: null,

    create: function(name, label, width, changeCallback) {
        var div;

        div = document.createElement('div');
        div.className   = 'tab-' + name;
        div.appendChild(document.createTextNode(label));
        div.title       = label;
        TC.setStyle(div, this.style);
        div.style.width = width;
        if (div.className == 'tab-laugh') {
            div.style.borderBottom = '0px';
            Facemark.Pallet.tab = div;
        }

        div.onclick     = changeCallback;
        div.onmouseover = this.mouseOver;
        div.onmouseout  = this.mouseOut;

        return div;
    }
};

Facemark.Mark = {
    style: {
        display:        'block',
        position:       'relative',
        styleFloat:     'left',
        cssFloat:       'left',
        margin:         '0px 5px 0px 5px',
        padding:        '3px 5px 3px 5px',
        textDecoration: 'none',
        fontSize:       '12px',
        cursor:         'pointer'
    },

    mouseOver: function() { this.style.border = '1px solid #00f' },
    mouseOut:  function() {
        if (this.parentNode.className == 'facemark-pallet-row-even') {
            this.style.border = '1px solid #fff'
        } else {
            this.style.border = '1px solid #eee'
        }
    },

    element: null,

    create: function(name, insertCallback, i) {
        var div;

        div = document.createElement('div');
        div.appendChild(document.createTextNode(name));
        div.className   = 'facemark';
        div.title   = name;
        if (i % 2 == 0) {
            div.style.border = '1px solid #fff';
        } else {
            div.style.border = '1px solid #eee';
        }
        TC.setStyle(div, this.style);

        div.onclick     = insertCallback;
        div.onmouseover = this.mouseOver;
        div.onmouseout  = this.mouseOut;

        return div;
    }
}