Javascript help

I need to place those titles (Smileys, Popular, Travel, Nature) as I have them below. I tried all sorts of things - can't get it working. For one they become part of the <table>, two they want to show as images.

tinymce.PluginManager.add("emoticons", function(e, t) {
    function n() {
        var e;
        return e = '<table role="list" class="mce-grid">', tinymce.each(r, function(n) {
            e += "<tr>", tinymce.each(n, function(n) {
                var r = t + "/img/smiley-" + n + ".png";
                e += '<td><a href="#" data-mce-url="' + r + '" data-mce-alt="' + n + '" tabindex="-1" role="option" aria-label="' + n + '"><img src="' + r + '" style="width: 25px; height: 25px" role="presentation" /></a></td>'
            }), e += "</tr>"
        }), e += "</table>"
    }

    var r = [

Smileys

        ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
        ["10", "11", "12", "13", "14", "15", "16", "17", "18"],
        ["19", "20", "21", "22", "23", "24", "25", "26", "27"],
        ["28", "29", "30", "31", "32", "33", "34", "35", "36"],
        ["37", "38", "39", "40", "41", "42", "43", "44", "45"],

Popular

        ["46", "47", "48", "49", "50", "51", "52", "53", "54"],
        ["55", "56", "57", "58", "59", "60", "61", "62", "63"],
        ["64", "65", "66", "67", "68", "69", "70"],

Travel

        ["71", "72", "73", "74", "75", "76", "77", "78", "79"],
        ["80", "81", "82", "83", "84", "85", "86", "87", "88"],
        ["89", "90", "91", "92", "93", "94", "95", "96", "97"],
        ["98", "99", "100", "101", "102", "103", "104", "105", "106"],
        ["107", "108", "109", "110", "111", "112", "113", "114", "115"],
        ["116", "117", "118", "119", "120", "121", "122", "123", "124"],
        ["125", "126", "127", "128", "129", "130", "131", "132"],

Nature

        ["133", "134", "135", "136", "137", "138", "139", "140", "141"],
        ["142", "143", "144", "145", "146", "147", "148", "149", "150"],
        ["151", "152", "153", "154", "155", "156", "157", "158", "159"],
        ["160", "161", "162", "163", "164"]

    ];
    e.addButton("emoticons", {
        type: "panelbutton",
        panel: {
            role: "application",
            autohide: !0,
            html: n,
            onclick: function(t) {
                var n = e.dom.getParent(t.target, "a");
                n && (e.insertContent('<img src="' + n.getAttribute("data-mce-url") + '" id="smileys_post" alt="' + n.getAttribute("data-mce-alt") + '" />'), this.hide())
            }
        },
        tooltip: "Emoticons"
    })
});

Code (markup):