(function () {
    window.common = {
        "HubClient": function (ws_uri, open, close, message) {
            var ws_protocols = {"http:": "ws:", "https:": "wss:"};
            this.close = close.bind(this);
            this.message = message.bind(this);
            this.open = open.bind(this);
            this.ws = new WebSocket(
                ws_protocols[window.location.protocol] +
                "//" +
                window.location.host +
                "/" +
                ws_uri
            );
            this.ws.addEventListener("close", this.close);
            this.ws.addEventListener("message", this.message);
            this.ws.addEventListener("open", this.open);
            this.send = this.ws.send.bind(this.ws);
        },
        "get_input": function (on_enter) {
            var input = document.createElement("input");
            input.addEventListener("keydown", function (event) {
                var keycode;
                if (!event) {
                    event = window.event;
                }
                keycode = event.code || event.key;
                if (keycode === "Enter" || keycode === "NumpadEnter") {
                    on_enter();
                }
            });
            return input;
        },
        "write": function (output, msg) {
            if (output.childNodes.length > 0) {
                output.append(document.createElement("br"));
            }
            if (typeof msg !== "string") {
                msg = String(msg);
            }
            output.append(document.createTextNode(msg));
        },
        "setup": function (callback) {
            document.addEventListener("readystatechange", function (event) {
                if (!event) {
                    event = window.event;
                }
                if (event.target.readyState !== "complete") {
                    return;
                }
                callback();
            });
        },
        "ClientsList": function () {
            this.ul = document.createElement("ul");
            document.body.append(this.ul);
            this.get_label = function (client_id) {
                return "client-" + client_id.toString();
            };
            this.get_name = function (client_id) {
                var input = this.get_checkbox(client_id);
                if (input !== null) {
                    return input.parentNode.childNodes[1].textContent;
                }
                return this.get_label(client_id);
            };
            this.append = function (client_id) {
                var li = document.createElement("li");
                var input = document.createElement("input");
                var client_label = this.get_label(client_id);
                input.type = "checkbox";
                input.id = "checkbox-" + client_label;
                input.checked = true;
                li.append(input);
                li.append(document.createTextNode(client_label));
                this.ul.append(li);
            };
            this.get_checkbox = function (client_id) {
                return document.getElementById("checkbox-" + this.get_label(client_id));
            };
            this.remove = function (client_id) {
                var input = this.get_checkbox(client_id);
                if (input === null) {
                    return;
                }
                input.parentNode.remove();
            };
            this.set_name = function(client_id, new_name) {
                var input = this.get_checkbox(client_id);
                var old_name;
                if (input === null) {
                    return;
                }
                old_name = input.parentNode.childNodes[1].textContent;
                while (input.parentNode.childNodes.length > 1)
                    input.parentNode.childNodes[1].remove();
                input.parentNode.append(document.createTextNode(new_name));
                input.parentNode.append(
                    document.createTextNode(" [" + client_id.toString() + "]")
                );
                return old_name;
            };
            this.all = function () {
                var result = [];
                Array.prototype.forEach.call(this.ul.children, function (child) {
                    var id_parts = child.getElementsByTagName("input")[0].id.split("-");
                    result.push(Number(id_parts[id_parts.length - 1]));
                });
                return result;
            };
            this.selected = function () {
                var result = [];
                Array.prototype.forEach.call(this.ul.children, function (child) {
                    var input = child.getElementsByTagName("input")[0];
                    var id_parts;
                    if (input.checked) {
                        id_parts = input.id.split("-");
                        result.push(Number(id_parts[id_parts.length - 1]));
                    }
                });
                return result;
            };
        },
    };
}());