(function () {
    "use strict";
    var input_div;
    var change_name_div;

    function setup_chat(ws) {
        var inp = input_div.getElementsByTagName("input")[0];
        inp.disabled = false;
        inp.addEventListener(
            "keydown",
            common.on_return(
                function (event, target) {
                    ws.send(JSON.stringify({"data": target.value}));
                    target.value = "";
                }
            )
        );
        input_div.getElementsByTagName("button")[0].addEventListener(
            "click",
            function () {
                input_div.style.display = "none";
                change_name_div.style.display = "";
                change_name_div.getElementsByTagName("input")[0].focus();
            }
        );
        change_name_div.getElementsByTagName("input")[0].addEventListener(
            "keydown",
            common.on_return(
                function (event, target) {
                    while (input_div.childNodes[0] !== input_div.children[0]) {
                        input_div.childNodes[0].remove();
                    }
                    input_div.insertBefore(
                        document.createTextNode(target.value + " "),
                        input_div.children[0]
                    );
                    ws.send(
                        JSON.stringify({"action": "set_name", "name": target.value})
                    );
                    target.value = "";
                    change_name_div.style.display = "none";
                    input_div.style.display = "";
                    input_div.children[0].focus();
                }
            )
        );
    }

    function open(ws) {
        input_div = document.getElementById("input");
        change_name_div = document.getElementById("change_name");
        setup_chat(ws);
        input_div.getElementsByTagName("button")[0].click();
        common.write("connected to " + ws_uri);
    }

    function close() {
        input_div.getElementsByTagName("input")[0].disabled = true;
        common.write("connection lost");
    }

    function message(ws, msg) {
        var obj = JSON.parse(msg.data);
        if (obj.action === "join" || obj.action === "leave") {
            common.write("[action]: " + obj.name + " " + obj.action + "s");
        } else if (obj.action === "set_name") {
            common.write(
                "[action]: " +
                obj.old_name +
                " changes name to " +
                obj.name
            );
        } else if (obj.hasOwnProperty("data")) {
            common.write(obj.name + ": " + obj.data);
        }
    }

    common.setup(function () { common.open_websocket(ws_uri, open, close, message); });
})();