state = "authenticating";

function authenticate(event) {
    $("#alert").hide();
    websocket.send(JSON.stringify({name: $("#username").val() }));
}

$(function(){
    $("#auth").hide();
    $("#alert").hide();
    $("#user-display").hide();
    $("#stream").hide();

    $("#submit-username").click(authenticate);
    setupWS();
});

function setupWS() {
    a = document.createElement("a");
    a.href = document.URL;
    url = "ws://" + a.hostname + ":8000/ws/";
    websocket = new WebSocket(url);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
}

function onOpen(e) {
    console.log("websocket opened");
    $("#auth").show();
}

function onClose(e) {
    console.error("websocket disconnected");
    $("#alert").show().text("reload page");
    $("#stream, #user-display, #auth").hide();
}

function onMessage(e) {
    var payload = JSON.parse(e.data);
    if (state === "authenticating") {
        if (!payload.success) {
            console.error(payload);
            $("#alert").show().text(payload.error);
            return;
        }
        $("#user-display .name").text($("#username").val());
        $("#user-display").show();
        $("#auth").hide();
        $("#stream").show();
        state = "chatting";
    } else if (state === "chatting") {
        console.log(payload);
    }
}

function onError(e) {
    console.error("websocket connection failure: " + JSON.stringify(e));
}

function negociate() {
    var payload =  {name: $("#username").val()};
    websocket.send(JSON.stringify(payload));
}