Update TODO

[chachachat.git] / client / client.js

// -*- mode: javascript; tab-width: 4; indent-tabs-mode: nil; -*-
//------------------------------------------------------------------------------
// This is free and unencumbered software released into the public domain.
//
// Anyone is free to copy, modify, publish, use, compile, sell, or
// distribute this software, either in source code form or as a compiled
// binary, for any purpose, commercial or non-commercial, and by any
// means.
//
// In jurisdictions that recognize copyright laws, the author or authors
// of this software dedicate any and all copyright interest in the
// software to the public domain. We make this dedication for the benefit
// of the public at large and to the detriment of our heirs and
// successors. We intend this dedication to be an overt act of
// relinquishment in perpetuity of all present and future rights to this
// software under copyright law.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
// OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
// ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
//
// For more information, please refer to <https://unlicense.org/>
//------------------------------------------------------------------------------

import * as chacha from "./third_party/jschacha20.js"
import * as blake from "./third_party/blake2b.js"

import * as conv from  "./conversions.js"
import * as msg from  "./message.js"


//------------------------------------------------------------------------------
// "Random" user names.
//------------------------------------------------------------------------------

const DEFAULT_NAMES = [
    "Callisto", "Ceres", "Earth", "Eris", "Europa", "Ganymede", "Io", "Jupiter",
    "Mars", "Mercury", "Neptune", "Pluto", "Saturn", "Sedna", "Uranus", "Venus"];

const DEFAULT_EMOJIS = [
    "🐵", "🐒", "🦍", "🦧", "🐶", "🐕", "🦮", "🐩", "🐺", "🦊", "🦝", "🐱", "🐈",
    "🦁", "🐯", "🐅", "🐆", "🐴", "🐎", "🦄", "🦓", "🫏", "🦌", "🫎", "🦬", "🐮",
    "🐂", "🐃", "🐄", "🐷", "🐖", "🐗", "🐽", "🐏", "🐑", "🐐", "🐪", "🐫", "🦙",
    "🦒", "🐘", "🦣", "🦏", "🦛", "🐭", "🐁", "🐀", "🐹", "🐰", "🐇", "🦫", "🦔",
    "🦇", "🐻", "🐨", "🐼", "🦥", "🦦", "🦨", "🦘", "🦡", "🐾", "🦃", "🐔", "🐓",
    "🐣", "🐤", "🐥", "🐦", "🐧", "🦅", "🦆", "🦢", "🪿", "🦉", "🦤", "🦩", "🦚",
    "🦜", "🐸", "🐊", "🐢", "🦎", "🐍", "🐲", "🐉", "🦕", "🦖", "🐳", "🐋", "🐬",
    "🦭", "🐟", "🐠", "🐡", "🦈", "🐙", "🪼", "🐚", "🦀", "🦞", "🦐", "🦑", "🐌",
    "🦋", "🐛", "🐜", "🐝", "🪲", "🐞"];

function getRandomUserName() {
    const nameRnd = getEntropy(4);
    const r = ((nameRnd[0] & 0x7f) << 24) | (nameRnd[1] << 16) | (nameRnd[2] << 8) | nameRnd[3];
    const emoji = DEFAULT_EMOJIS[r % DEFAULT_EMOJIS.length];
    const name = DEFAULT_NAMES[r % DEFAULT_NAMES.length];
    return `${emoji} ${name}${(r % 98) + 1}`;
}


//------------------------------------------------------------------------------
// Definition of a chat.
//------------------------------------------------------------------------------

class ChatSettings {
    constructor(chatName, chatId, authKey, messageKey, serverUrl, serverKey) {
        this.chatName = chatName;      // String
        this.chatId = chatId;          // Uint8Array
        this.authKey = authKey;        // Uint8Array
        this.messageKey = messageKey;  // Uint8Array
        this.serverUrl = serverUrl;    // String
        this.serverKey = serverKey;    // Uint8Array
    }

    static default() {
        return new ChatSettings(
            "Public chat",
            conv.b64ToBin("zkO7ICAR4lWhrUV0sZTNiA"),
            conv.b64ToBin("WLPO0bGrm8hSDxjm7e_pS1_beHF9XDcFN4R7dcmJzN4"),
            conv.b64ToBin("oGfg6ezeESTA0v8PO8ld9td7zJHhIpg93Epy15jvyEI"),
            `${document.location.href}/server`,
            conv.b64ToBin("GVFFyPAEh9ng1Cep30aDrJwgpOTTGjvsx9pejDDyiyE"),
        );
    }

    static fromJsonString(jsonString) {
        const settings = JSON.parse(jsonString);
        return new ChatSettings(settings.chatName,
                                conv.b64ToBin(settings.chatId),
                                conv.b64ToBin(settings.authKey),
                                conv.b64ToBin(settings.messageKey),
                                settings.serverUrl,
                                conv.b64ToBin(settings.serverKey));
    }

    toJsonString() {
        const settingsDict = {};
        settingsDict["chatName"] = this.chatName;
        settingsDict["chatId"] = conv.binToB64(this.chatId);
        settingsDict["authKey"] = conv.binToB64(this.authKey);
        settingsDict["messageKey"] = conv.binToB64(this.messageKey);
        settingsDict["serverUrl"] = this.serverUrl;
        settingsDict["serverKey"] = conv.binToB64(this.serverKey);
        return JSON.stringify(settingsDict);
    }
}

//------------------------------------------------------------------------------
// Global application state.
//------------------------------------------------------------------------------

let g_state = {
    "showErrors": true,

    "userName": null,
    "userId": null,

    "chats": [],
    "activeChatNo": 0,

    "appActive": true,
    "currentView": null,
    "currentMenu": null,
    "db": null,

    "protoMessages": {
        "byId": [],
        "byTime": [],
        "loadIdx": 0
    },

    "updateListIntervalId": null,
    "pendingListRequests": [],
    "pendingReadRequests": [],

    "map": null,
    "mapYouMarker": null,
    "mapYouCoord": null,
    "navigatorWatchId": null,
    "navigatorIntervalId": null,

    "videoElement": null,
    "cameraClick": false,

    "fsElement": null,
    "fsCaption": null,

    "preferWebp": true,
};

function activeChat() {
    return g_state.chats[g_state.activeChatNo];
}

function overwriteActiveChat(chatSettings) {
    g_state.chats[g_state.activeChatNo] = chatSettings;
}


//------------------------------------------------------------------------------
// Debugging.
//------------------------------------------------------------------------------

function logMessagePolling(message) {
    console.log(message);
}

function logSettings(message) {
    console.log(message);
}

function logMisc(message) {
    console.log(message);
}

function warn(message) {
    console.warn(message);
    if (g_state.showErrors) {
        alert(message);
    }
}

function error(message) {
    console.error(message);
    if (g_state.showErrors) {
        alert(message);
    }
}


//------------------------------------------------------------------------------
// Helpers.
//------------------------------------------------------------------------------

function getEntropy(numBytes) {
    const result = new Uint8Array(numBytes);
    self.crypto.getRandomValues(result);
    return result;
}

function getTimestamp() {
    return Date.now() * 1000;
}

function encrypt(plaintext) {
    // Generate a random nonce and encrypt.
    const nonce = getEntropy(12);
    const key = activeChat().messageKey;
    const ciphertext = new chacha.JSChaCha20(key, nonce).encrypt(plaintext);

    // Concatenate the nonce and ciphertext.
    let nonceAndChiphertext = new Uint8Array(nonce.length + ciphertext.length);
    nonceAndChiphertext.set(nonce);
    nonceAndChiphertext.set(ciphertext, nonce.length);

    return nonceAndChiphertext;
}

function decrypt(nonceAndChiphertext) {
    // Extract the nonce and decrypt.
    const nonce = nonceAndChiphertext.subarray(0, 12);
    const key = activeChat().messageKey;
    const ciphertext = nonceAndChiphertext.subarray(12);
    const message = new chacha.JSChaCha20(key, nonce).decrypt(ciphertext);

    return message;
}

function deriveReadHash(messageId) {
    const key = activeChat().authKey;
    let input = messageId;

    const NUM_ITERATIONS = 13;
    for (let i = 0; i < NUM_ITERATIONS; ++i) {
        input = blake.blake2b(input, key, 32);
    }

    return input;
}

function isPortraitMode() {
    if (screen.orientation) {
        return screen.orientation.type.includes("portrait");
    }
    return false;  // Assume landscape mode if we don't know.
}


//------------------------------------------------------------------------------
// Communication with the server.
//------------------------------------------------------------------------------

function urlForCommand(command) {
    if (command === "list") {
        return activeChat().serverUrl + "/list.php";
    } else if (command === "read") {
        return activeChat().serverUrl + "/read.php";
    } else if (command === "publish") {
        return activeChat().serverUrl + "/publish.php";
    }
}

function sendRequest(command, bodyParts, requestHandler, meta={}, requestList=null) {
    // Construct the body (make room for the message MAC).
    const MAC_SIZE = 32;
    let bodySize = MAC_SIZE;
    for (const part of bodyParts) {
        bodySize += part.length;
    }
    let body = new Uint8Array(bodySize);
    let pos = MAC_SIZE;
    for (const part of bodyParts) {
        body.set(part, pos);
        pos += part.length;
    }

    // Calculate the MAC (we use keyed BLAKE2b).
    const MAX_NUM_BYTES_TO_HASH = 512;
    const startOfBody = body.subarray(MAC_SIZE, MAC_SIZE + MAX_NUM_BYTES_TO_HASH);
    const mac = blake.blake2b(startOfBody, activeChat().serverKey, MAC_SIZE);
    body.set(mac, 0);

    // Send request.
    const req = new XMLHttpRequest();
    req.addEventListener("load", requestHandler);
    if (requestList) {
        // Keep track of ongoing requests.
        requestList.push(req);
        req.addEventListener("loadend", (event) => {
            logMessagePolling(`Request done: ${req.responseURL}`);
            const idx = requestList.indexOf(req);
            if (idx > -1) {
                requestList.splice(idx, 1);
                logMessagePolling("Removing request from list");
            } else {
                error("An unknonw request just finished??");
            }
        });
    }
    req.open("POST", urlForCommand(command));
    req.responseType = "arraybuffer";
    req.chaChaChatMeta = meta;
    req.send(body);
}

function responseTextOfReq(req) {
    if (req.responseType == "arraybuffer") {
        const textDecoder = new TextDecoder();
        return textDecoder.decode(new Uint8Array(req.response));
    }
    return req.responseText;
}


//------------------------------------------------------------------------------
// Map logic.
//------------------------------------------------------------------------------

function updateGeolocationEvents() {
    // Update map: Location of current user.
    if (g_state.mapYouCoord !== null) {
        const crd = g_state.mapYouCoord;
        if (g_state.mapYouMarker === null) {
            g_state.mapYouMarker = L.marker(crd, {"title": "You"}).addTo(g_state.map);
            g_state.map.flyTo(crd, 17, {"duration": 2.0});
        } else {
            g_state.mapYouMarker.setLatLng(crd);
            const follow = document.getElementById("map_cbox_follow").checked;
            if (follow) {
                g_state.map.panTo(crd);
            }
        }
    }
}

function enableGeolocation(enable) {
    if (enable) {
        if (g_state.navigatorWatchId === null) {
            function navSuccess(pos) {
                const firstPosition = (g_state.mapYouCoord === null);
                g_state.mapYouCoord = [pos.coords.latitude, pos.coords.longitude];
                if (firstPosition) {
                    updateGeolocationEvents();
                    if (g_state.navigatorIntervalId == null) {
                        g_state.navigatorIntervalId = setInterval(updateGeolocationEvents, 10000);
                    }
                }
            }
            function navError(err) {
                error(`ERROR(${err.code}): ${err.message}`);
            }
            const navOptions = {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0,
            };
            navigator.geolocation.watchPosition(navSuccess, navError, navOptions);
        }
    } else {
        if (g_state.navigatorIntervalId !== null) {
            clearInterval(g_state.navigatorIntervalId);
            g_state.navigatorIntervalId = null;
        }
        if (g_state.navigatorWatchId !== null) {
            navigator.geolocation.clearWatch(g_state.navigatorWatchId);
            g_state.navigatorWatchId = null;
        }
        if (g_state.mapYouMarker !== null) {
            g_state.mapYouMarker.remove();
            g_state.mapYouMarker = null;
        }
        g_state.mapYouCoord = null;
    }
}

function eventHandler_map_cbox_follow(event) {
    event.preventDefault();
    event.stopPropagation();

    const follow = document.getElementById("map_cbox_follow").checked;
    if (follow) {
        updateGeolocationEvents();
    }
}

function eventHandler_map_btn_close(event) {
    event.preventDefault();
    event.stopPropagation();
    history.back();
}

function eventHandler_chat_main_map() {
    showView("map");
}

function showMapView() {
    document.getElementById("map_view").style.display = "block";

    if (!g_state.map) {
        g_state.map = L.map('map').setView([49.0, 12.0], 2);
        document.getElementsByClassName('leaflet-control-attribution')[0].style.display = 'none';
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19
        }).addTo(g_state.map);
    }

    enableGeolocation(true);
}

function hideMapView() {
    enableGeolocation(false);

    document.getElementById("map_view").style.display = "none";
}


//------------------------------------------------------------------------------
// Camera logic.
//------------------------------------------------------------------------------

function downscalePhoto(sourceCanvas, targetWidth) {
    let res = {
        width: sourceCanvas.width,
        height: sourceCanvas.height
    }
    const targetHeight = Math.round(targetWidth * sourceCanvas.height / sourceCanvas.width);

    // Successive down-scaling by a factor of 0.5.
    if (sourceCanvas.width * 0.5 > targetWidth) {
        let tmpCanvas = document.createElement("canvas");
        let tmpCtx = tmpCanvas.getContext("2d");

        res = {
            width: Math.floor(sourceCanvas.width * 0.5),
            height: Math.floor(sourceCanvas.height * 0.5)
        }
        tmpCanvas.width = res.width;
        tmpCanvas.height = res.height;

        tmpCtx.drawImage(sourceCanvas, 0, 0, res.width, res.height);
        while (res.width * 0.5 > targetWidth) {
            res = {
                width: Math.floor(res.width * 0.5),
                height: Math.floor(res.height * 0.5)
            };
            tmpCtx.drawImage(tmpCanvas, 0, 0, res.width * 2, res.height * 2, 0, 0, res.width, res.height);
        }

        sourceCanvas = tmpCanvas;
    }

    // Final scaling to the target size.
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    ctx.drawImage(sourceCanvas, 0, 0, res.width, res.height, 0, 0, canvas.width, canvas.height);

    logMisc(`Downscaled from ${sourceCanvas.width}x${sourceCanvas.height} to ${canvas.width}x${canvas.height}`);

    return canvas;
}

function encodePhotoAsDataUrl(canvasElement) {
    let dataUrl;
    if (g_state.preferWebp) {
        // We use WebP, quality 0.60, which usually gives decent quality and requires
        // ~250KiB (ish) for detailed 1080x1920 resolution images.
        dataUrl = canvasElement.toDataURL("image/webp", 0.60);
        if (!dataUrl.startsWith("data:image/webp")) {
            // Not all browsers support WebP (e.g. iOS Safari).
            g_state.preferWebp = false;
        }
    }
    if (!g_state.preferWebp) {
        // If we can't use WebP, use JPEG instead.
        dataUrl = canvasElement.toDataURL("image/jpeg", 0.50);
    }
    return dataUrl;
}

function getMimeTypeFromDataUrl(dataUrl) {
    const endPos = dataUrl.search(/(;|,)/g);
    if ((!dataUrl.startsWith("data:")) || (endPos < 0)) {
        return "";
    }
    return dataUrl.slice(5, endPos);
}

function publishCameraPhoto() {
    // Downscale the photo if necessary.
    const MAX_WIDTH = 1080;
    let canvasElement = document.getElementById("camera_canvas");
    if (canvasElement.width > MAX_WIDTH) {
        canvasElement = downscalePhoto(canvasElement, MAX_WIDTH);
    }

    // Compress the photo to a data URL.
    const dataUrl = encodePhotoAsDataUrl(canvasElement);
    const mimeType = getMimeTypeFromDataUrl(dataUrl);

    // Convert the data URL to a typed array.
    const binaryString = atob(dataUrl.slice(dataUrl.indexOf(",") + 1));
    let data = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; ++i) {
        data[i] = binaryString.charCodeAt(i);
    }

    logMisc(`Final image size: ${data.length} bytes`);

    // Publish the message.
    publishMessage(mimeType, data);
}

function startCameraCapture(preferredWidth, frameHandler, errorHandler) {
    if (!navigator.mediaDevices) {
        errorHandler("No mediaDevices");
        return;
    }

    // Get the screen aspect ratio.
    // TODO: Use AR of the screen or the DOM element.
    const preferredAspectRatio = 16 / 9;

    // Open a camera video stream. Try to get the front facing camera, and select a suitable
    // resolution.
    let constraints = {
        video: {
            aspectRatio: { ideal: preferredAspectRatio },
            facingMode: "environment",
        },
    };
    if (isPortraitMode()) {
        constraints.video.height = { ideal: preferredWidth };
    } else {
        constraints.video.width = { ideal: preferredWidth };
    }
    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        g_state.videoElement.srcObject = stream;
        g_state.videoElement.setAttribute("playsinline", true);  // We don't want fullscreen.
        g_state.videoElement.play();
        requestAnimationFrame(frameHandler);
    })
    .catch((err) => {
        error("Could not get video stream");
        errorHandler(err);
    });
}

function stopCameraCapture() {
    if (g_state.videoElement) {
        if (g_state.videoElement.srcObject) {
            g_state.videoElement.srcObject.getTracks().forEach(track => track.stop());
        }
        g_state.videoElement.remove();
        g_state.videoElement = null;
    }

    g_state.cameraClick = false;
}

function eventHandler_camera_btn_click(event) {
    event.preventDefault();
    event.stopPropagation();
    g_state.cameraClick = true;
}

function eventHandler_camera_btn_accept(event) {
    event.preventDefault();
    event.stopPropagation();
    publishCameraPhoto();
    history.back();
}

function eventHandler_camera_btn_discard(event) {
    event.preventDefault();
    event.stopPropagation();
    resumeCameraView(false);
}

function resumeCameraView(clearCanvas=true) {
    document.getElementById("camera_controls").style.display = "block";
    document.getElementById("camera_accept").style.display = "none";

    // Initially disable the "take photo" button.
    document.getElementById("camera_btn_click").classList.add("button_disabled");

    g_state.cameraClick = false;

    // Get the canvas context.
    if (!g_state.videoElement) {
        g_state.videoElement = document.createElement("video");
    }
    let canvasElement = document.getElementById("camera_canvas");
    let ctx = canvasElement.getContext("2d");

    // Start by filling the canvas with some blank content (clear any previous image).
    if (clearCanvas) {
        ctx.fillStyle = "rgb(50, 50, 60)";
        ctx.fillRect(0, 0, canvasElement.width, canvasElement.height);
    }

    // Frame grabber & camera image drawing function.
    function handleNextVideoFrame() {
        // Break animation & capture if we're no longer active.
        if (g_state.currentView !== "camera") {
            return;
        }

        if (g_state.videoElement.readyState === g_state.videoElement.HAVE_ENOUGH_DATA) {
            // Draw the current video frame to the canvas (i.e. capture it and show it).
            if (canvasElement.width !== g_state.videoElement.videoWidth ||
                canvasElement.height !== g_state.videoElement.videoHeight) {
                logMisc(`Camera resolution: ${g_state.videoElement.videoWidth} x ${g_state.videoElement.videoHeight}`);
            }

            canvasElement.width = g_state.videoElement.videoWidth;
            canvasElement.height = g_state.videoElement.videoHeight;
            ctx.drawImage(g_state.videoElement, 0, 0, canvasElement.width, canvasElement.height);

            // Enable the "take photo" button.
            document.getElementById("camera_btn_click").classList.remove("button_disabled");
        }

        if (g_state.cameraClick) {
            stopCameraCapture();

            // Show the yay/nay option buttons.
            document.getElementById("camera_controls").style.display = "none";
            document.getElementById("camera_accept").style.display = "block";
        } else {
            requestAnimationFrame(handleNextVideoFrame);
        }
    }

    // Start capturing camera frames.
    startCameraCapture(1080, handleNextVideoFrame, (err) => {
        // TODO: Print some error message to the canvas.
    });
}

function showCameraView() {
    document.getElementById("camera_view").style.display = "block";
    resumeCameraView(true);
}

function hideCameraView() {
    stopCameraCapture();
    document.getElementById("camera_view").style.display = "none";
}


//------------------------------------------------------------------------------
// Message display logic.
//------------------------------------------------------------------------------

function isBigText(text) {
    // Skip analysis if this is a long text, in which case we say that the text should be small.
    if (text.length > 50) {
        return false;
    }

    // Analyze the text contents.
    let actualLength = 0;
    let numEmojis = 0;
    let numNonEmojis = 0;
    for (let i = 0; i < text.length; ++i) {
        const c = text.codePointAt(i);
        if (c >= 0xdc00 && c <= 0xdfff) {
            // Lower part of a surrogate pair: Ignore.
            continue;
        }
        ++actualLength;

        // Emoji?
        // TODO: Improve these heuristics.
        if ((c >= 0x2300 && c <= 0x27ff) || (c >= 0x1f000)) {
            ++numEmojis;
            continue;
        }

        // White-space?
        if (c == 32) {
            continue;
        }

        // Anything else is considered non-emoji.
        ++numNonEmojis;
    }

    // This is a "big" text if it is emoji-like.
    return (numEmojis >= 1) && ((actualLength <= 3) ||
                                (numNonEmojis <= 2 && actualLength <= 6));
}

function timeToStr(time) {
    // Time is in microseconds, so convert it to milliseconds first.
    const milliseconds = time / 1000;
    const d = new Date(milliseconds);

    let result;
    try {
        // Get current locale.
        const locale = Intl.DateTimeFormat().resolvedOptions().locale;

        // Get time (hours & minutes).
        result = d.toLocaleTimeString(locale, { timeStyle: "short"});

        // Get day of week (ignore if same as today).
        const dateTimeFmr = new Intl.DateTimeFormat(locale, { weekday: "short" });
        const dayStr = dateTimeFmr.format(d);
        if (dayStr !== dateTimeFmr.format(new Date())) {
            result = `${dayStr} ${result}`;
        }
    } catch {
        // Fall back to using a shortened version of Date.toString().
        result = d.toString();
        const gmtPos = result.indexOf(" GMT");
        if (gmtPos > 0) {
            result = result.substring(0, gmtPos);
        }
    }

    return result;
}

function hsvToRgb(h, s, v) {
    const hh = (Math.abs(h) % 360.0) / 60.0;
    const i = hh | 0;
    const ff = hh - i;
    const p = v * (1.0 - s);
    const q = v * (1.0 - (s * ff));
    const t = v * (1.0 - (s * (1.0 - ff)));

    switch (i) {
        default:
        case 0: return [v, t, p];
        case 1: return [q, v, p];
        case 2: return [p, v, t];
        case 3: return [p, q, v];
        case 4: return [t, p, v];
        case 5: return [v, p, p];
    }
}

function binToColor(uint8Array) {
    // Generate a 24-bit "checksum" of the ID.
    let num24 = 0x555555;
    for (const b of uint8Array) {
        num24 = (((num24 << 14) | (num24 >> 10)) ^ b) & 0xffffff;
    }

    // Extract H, S, V.
    let h = ((num24 >> 16) & 0xff) * (360.0 / 255.0);
    let s = ((num24 >> 8) & 0xff) * (1.0 / 255.0);
    let v = ((num24 >> 0) & 0xff) * (1.0 / 255.0);

    // Tune HSV into a "pleasing" color.
    s = 0.05 + 0.10 * s;
    v = 0.92 + 0.07 * v;

    // Convert to a color that can be used in a style.
    const [r, g, b] = hsvToRgb(h, s, v);
    function to8bit(col) {
        return Math.max(0, Math.min(255, (col * 255.0) | 0));
    }
    return `rgb(${to8bit(r)} ${to8bit(g)} ${to8bit(b)})`;
}

function createMessageDiv(message, klass) {
    // Create the message container div.
    let chatDiv = document.getElementById("chat");
    let containerDiv = document.createElement("div");
    containerDiv.classList.add("msg_container");
    containerDiv.setAttribute("data-id", conv.binToHex(message.messageId));
    containerDiv.setAttribute("data-time", message.time.toString());

    // Insert the div at the correct time (sorted).
    let afterNode = null;
    for (let i = chatDiv.childElementCount - 1; i >= 0; --i) {
        const e = chatDiv.children[i];
        const t = parseInt(e.getAttribute("data-time"));
        if (t < message.time) {
            afterNode = e;
            break;
        }
    }
    if (afterNode) {
        chatDiv.insertBefore(containerDiv, afterNode.nextSibling);
    } else {
        chatDiv.appendChild(containerDiv);
    }

    // Create the caption div.
    let captionDiv = document.createElement("div");
    captionDiv.classList.add(`caption_${klass}`);
    captionDiv.innerText = `${message.senderName} - ${timeToStr(message.time)}`;
    containerDiv.appendChild(captionDiv);

    // Create the message div.
    let messageDiv = document.createElement("div");
    messageDiv.classList.add(klass);
    messageDiv.style.backgroundColor = binToColor(message.senderId);
    containerDiv.appendChild(messageDiv);

    return messageDiv;
}

function showMessage(message, afterNode = null) {
    // Did me or someone else send this message?
    const weSentIt = conv.u8ArraysEqual(message.senderId, g_state.userId);
    const klass = weSentIt ? "out" : "in";

    // Create the message box.
    let notificationText = message.senderName;
    let messageDiv = createMessageDiv(message, klass);
    if (message.mimeType === "text/plain") {
        const text = conv.binToStr(message.body);
        if (isBigText(text)) {
            messageDiv.classList.add("big");
        }
        messageDiv.innerText = text;

        // Include a short version of the text in the notification.
        const MAX_SHORT_TEXT_LEN = 30;
        const shortText = text.length < MAX_SHORT_TEXT_LEN ?
                text :
                text.substring(0, MAX_SHORT_TEXT_LEN) + "...";
        notificationText += `: ${shortText}`;
    } else if (message.mimeType.startsWith("image/")) {
        let img = document.createElement("img");
        img.src = conv.binToDataUri(message.body, message.mimeType);
        img.classList.add("preview");

        img.addEventListener("click", (event) => {
            event.preventDefault();
            event.stopPropagation();
            let fsImg = document.createElement("img");
            fsImg.src = img.src;
            const imageCaption = `${message.senderName} - ${timeToStr(message.time)}`;
            showImageAsFullscreen(fsImg, imageCaption);
        });

        messageDiv.appendChild(img);

        notificationText += " sent an image";
    } else {
        error(`Unsupported message mime type: ${message.mimeType}`);
        notificationText = "";
    }

    // Show a notification?
    if ((!g_state.appActive) && (!weSentIt) && notificationText) {
        showNotification(notificationText);
    }

    // Scroll to the end of the list.
    scrollLastMessageIntoView();
}

function scrollLastMessageIntoView() {
    // Scroll to the end of the list.
    const scrollableDiv = document.getElementById("chat");
    if (scrollableDiv.lastChild) {
        scrollableDiv.lastChild.scrollIntoView(false);
    }
}


//------------------------------------------------------------------------------
// Chat list update logic.
//------------------------------------------------------------------------------

function reqHandler_Read() {
    try {
        // Extract request meta data (not part of the encrypted message).
        if (!("chaChaChatMeta" in this)) {
            error(`Missing message meta in request`);
            return;
        }
        let protoMessage = this.chaChaChatMeta;

        // Did we get an error response for this message?
        if (this.status != 200) {
            protoMessage.status = "error";
            error(`Error ${this.status}: ${responseTextOfReq(this)}`);
            return;
        }

        // Decrypt the message body.
        const binMessage = decrypt(new Uint8Array(this.response));
        const message = msg.Message.deserialize(protoMessage.time, protoMessage.messageId, binMessage);
        if (!message) {
            protoMessage.status = "error";
            error(`Unable to decode message ${protoMessage.messageId}`);
            return;
        }

        // The message is now loaded.
        protoMessage.status = "loaded";

        // If this was a visual message, show it.
        if (message.isVisible()) {
            showMessage(message);
        }
    } finally {
        // Send of a new read request, if there are any pending messages to load.
        readNextPendingMessage();
    }
}

function readMessage(protoMessage) {
    // Prepare request arguments.
    const readHash = deriveReadHash(protoMessage.messageId);

    // Send the request.
    const bodyParts = [
        activeChat().chatId,     // Chat ID
        protoMessage.messageId,  // Message ID
        readHash                 // Read hash
    ];
    sendRequest("read", bodyParts, reqHandler_Read, protoMessage, g_state.pendingReadRequests);
}

function readNextPendingMessage() {
    if (g_state.protoMessages.loadIdx < g_state.protoMessages.byTime.length) {
        let protoMessage = g_state.protoMessages.byTime[g_state.protoMessages.loadIdx];
        ++g_state.protoMessages.loadIdx;
        if (protoMessage.status === "pending") {
            readMessage(protoMessage);
        }
    }
}

function reqHandler_List() {
    try {
        // The server may send a 408 (timout) if no new message has arrived, which is expected.
        if (this.status != 200) {
            if (this.status != 408) {
                error(`Error ${this.status}: ${responseTextOfReq(this)}`);
            }
            logMessagePolling(`List timeout: ${this.responseURL}`);
            return;
        }
        logMessagePolling(`Got list response: ${this.responseURL}`);

        // Collect and sort all the message IDs that the server listed.
        const messages = JSON.parse(responseTextOfReq(this));
        let newProtoMessages = [];
        for (const obj of messages) {
            const protoMessage = {
                time: obj.time,
                messageId: conv.hexToBin(obj.messageId),
                status: "pending"
            };
            newProtoMessages.push(protoMessage);
        }
        newProtoMessages.sort(function(a, b) { return a.time - b.time; });

        // Append the new messages to our proto message queue.
        for (const protoMessage of newProtoMessages) {
            const messageIdHex = conv.binToHex(protoMessage.messageId);
            if (!(messageIdHex in g_state.protoMessages.byId)) {
                g_state.protoMessages.byId[messageIdHex] = protoMessage;
                g_state.protoMessages.byTime.push(protoMessage);
            }
        }
    } finally {
        // Start loading pending messages. Eventially schedules new message polling.
        readNextPendingMessage();
    }
}

function updateList() {
    if (g_state.pendingListRequests.length > 0) {
        logMessagePolling(`There are ${g_state.pendingListRequests.length} pending list request. Not renewing.`);
        return;
    }
    if (g_state.pendingReadRequests.length > 0) {
        logMessagePolling(`There are ${g_state.pendingReadRequests.length} pending read request. Not renewing.`);
        return;
    }

    logMessagePolling("Checking for new messages...");

    // Get the latest timestamp.
    let latestTime = 0;
    if (g_state.protoMessages.byTime.length > 0) {
        latestTime = g_state.protoMessages.byTime[g_state.protoMessages.byTime.length - 1].time;
    }

    // Send the request.
    const bodyParts = [
        activeChat().chatId,         // Chat ID
        conv.int64ToBin(latestTime)  // Timestamp
    ];
    sendRequest("list", bodyParts, reqHandler_List, {}, g_state.pendingListRequests);
}

function startMessagePolling() {
    // Stop polling now, in case there are any pending polling requests, to ensure that we start
    // polling immediately.
    stopMessagePolling();

    // Do an initial poll immediately.
    updateList();

    // Start the interval timer.
    // TODO: Use longer interval when app is inactive?
    const TIME_BETWEEN_UPDATES = 1000;
    g_state.updateListIntervalId = setInterval(() => {
        updateList();
    }, TIME_BETWEEN_UPDATES);
}

function stopMessagePolling() {
    // Abort any pending timer events.
    if (g_state.updateListIntervalId) {
        clearInterval(g_state.updateListIntervalId);
        g_state.updateListIntervalId = null;
    }

    // Abort any pending requests.
    g_state.pendingListRequests.forEach(req => {
        req.abort();
    });
    g_state.pendingListRequests = [];
    g_state.pendingReadRequests.forEach(req => {
        req.abort();
    });
    g_state.pendingReadRequests = [];
}

function clearChat() {
    // Clear all the messages.
    g_state.protoMessages.byId = {};
    g_state.protoMessages.byTime = [];
    g_state.protoMessages.loadIdx = 0;

    // Clear the chat window.
    let chatDiv = document.getElementById("chat");
    while (chatDiv.hasChildNodes()) {
        chatDiv.removeChild(chatDiv.lastChild);
    }

    // Set the chat title.
    document.getElementById("chat_name").innerText = activeChat().chatName;
}


//------------------------------------------------------------------------------
// Chat message publication logic.
//------------------------------------------------------------------------------

function reqHandler_Publish() {
    if (this.status != 200) {
        error(`Error ${this.status}: ${responseTextOfReq(this)}`);
        return;
    }
}

function publishMessage(mimeType, body) {
    // Get and encrypt the message.
    const time = 0;  // (Placeholder, re-defined by server)
    const messageId = getEntropy(32);
    const senderTime = getTimestamp();
    const senderId = g_state.userId;
    const senderName = g_state.userName;

    const encryptedMessage = encrypt((new msg.Message(
        time,
        messageId,
        senderTime,
        senderId,
        senderName,
        mimeType,
        body
    )).serialize());

    // Prepare the secret read hash for this message.
    const readHash = deriveReadHash(messageId);

    // Send the request.
    const bodyParts = [
        activeChat().chatId,  // Chat ID
        messageId,            // Message ID
        readHash,             // Read hash (for read requests)
        encryptedMessage      // The actual message
    ];
    sendRequest("publish", bodyParts, reqHandler_Publish);
}

function publishFileMessage(file) {
    // Get and check the file mime type.
    const mimeType = file.type;
    if (!conv.isSupportedMessageFileType(mimeType)) {
        alert(`Unsupported file format: ${mimeType}`);
        return;
    }

    // Load the file into a binary array, and publish it.
    let reader = new FileReader();
    reader.onload = function(event) {
        const data = new Uint8Array(reader.result);
        publishMessage(mimeType, data);
    };
    reader.readAsArrayBuffer(file);
}

function eventHandler_chat_main_menu_refresh(event) {
    clearChat();
    startMessagePolling();
}

function eventHandler_chat_btn_main_menu(event) {
    event.preventDefault();
    event.stopPropagation();
    showMenu("chat_main");
}

function eventHandler_chat_btn_chat_menu(event) {
    event.preventDefault();
    event.stopPropagation();
    showMenu("chat_chat");
}

function eventHandler_out(event) {
    event.preventDefault();
    event.stopPropagation();

    // Get the message text from the UI text box.
    let messageInput = document.getElementById("out_message");
    const message = messageInput.value;
    messageInput.value = "";

    // Send the message.
    if (message.length > 0) {
        publishMessage("text/plain", conv.strToBin(message));
    }
}

function eventHandler_btn_camera(event) {
    event.preventDefault();
    event.stopPropagation();
    showView("camera");
}

function eventHandler_main_drop(event) {
    event.stopPropagation();
    event.preventDefault();

    // Get the dropped file
    const files = event.dataTransfer.files;
    if (files.length != 1) {
      alert("Only drop one file at a time.");
      return;
    }
    const file = files[0];

    // Publish the file contents.
    publishFileMessage(file);
}


//------------------------------------------------------------------------------
// Fullscreen view logic.
//------------------------------------------------------------------------------

function eventHandler_fullscreen_view_click(event) {
    event.preventDefault();
    event.stopPropagation();
    history.back();
}

function showFullscreenView() {
    document.getElementById("fullscreen_view").style.display = "block";

    let fullscreenTop = document.getElementById("fullscreen_view");
    if (g_state.fsCaption) {
        let captionElement = document.createElement("div");
        captionElement.classList.add("fullscreen_caption");
        captionElement.innerText = g_state.fsCaption;
        fullscreenTop.appendChild(captionElement);
    }
    if (g_state.fsElement) {
        fullscreenTop.appendChild(g_state.fsElement);
    }

    // Enable zooming.
    document.getElementById("viewport").setAttribute(
        "content", "width=device-width, maximum-scale=4, minimum-scale=1, target-densitydpi=device-dpi");
}

function hideFullscreenView() {
    let fullscreenTop = document.getElementById("fullscreen_view");
    while (fullscreenTop.hasChildNodes()) {
        let child = fullscreenTop.lastChild;
        fullscreenTop.removeChild(child);
        child.remove();
    }
    g_state.fsElement = null;
    g_state.fsCaption = null;

    // Restore zooming settings.
    document.getElementById("viewport").setAttribute(
        "content", "width=device-width, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi");

    document.getElementById("fullscreen_view").style.display = "none";
}

function showImageAsFullscreen(img, caption) {
    g_state.fsElement = img;
    g_state.fsCaption = caption;
    showView("fullscreen");
}


//------------------------------------------------------------------------------
// Chat view logic.
//------------------------------------------------------------------------------

function showChatView() {
    document.getElementById("chat_view").style.display = "block";

    startMessagePolling();
    scrollLastMessageIntoView();
}

function hideChatView() {
    stopMessagePolling();

    document.getElementById("chat_view").style.display = "none";
}


//------------------------------------------------------------------------------
// QR code scanner logic.
//------------------------------------------------------------------------------

function applyChatSettingsFromQRCode(settingsStr) {
    let settings;
    try {
        settings = ChatSettings.fromJsonString(settingsStr);
    } catch {
        alert("Invalid chat configuration QR code");
        return false;
    }
    if (window.confirm(`Join the chat "${settings.chatName}"?`)) {
        try {
            // TODO: Append this a new chat instead of overwriting.
            overwriteActiveChat(settings);

            // Apply the settings.
            saveSettings();
            clearChat();
            return true;
        } catch {
            error("Unable to apply new chat settings");
        }
    }
    return false;
}

function showQRScannerView() {
    document.getElementById("qrscanner_view").style.display = "block";

    if (!g_state.videoElement) {
        g_state.videoElement = document.createElement("video");
    }
    let canvasElement = document.getElementById("qr_scanner_canvas");
    let ctx = canvasElement.getContext("2d");
    let identicalResultCount = 0;
    let finalResult = "";

    function drawLine(begin, end, color) {
      ctx.beginPath();
      ctx.moveTo(begin.x, begin.y);
      ctx.lineTo(end.x, end.y);
      ctx.lineWidth = 4;
      ctx.strokeStyle = color;
      ctx.stroke();
    }

    // Start by filling the canvas with some blank content (clear any previous image).
    ctx.fillStyle = "rgb(50, 50, 60)";
    ctx.fillRect(0, 0, canvasElement.width, canvasElement.height);
    
    // Frame grabber & camera image drawing function.
    function handleNextVideoFrame() {
        // Break animation & capture if we're no longer active.
        if (g_state.currentView !== "qrscanner") {
            return;
        }

        if (g_state.videoElement.readyState === g_state.videoElement.HAVE_ENOUGH_DATA) {
            canvasElement.height = g_state.videoElement.videoHeight;
            canvasElement.width = g_state.videoElement.videoWidth;
            ctx.drawImage(g_state.videoElement, 0, 0, canvasElement.width, canvasElement.height);
            const imageData = ctx.getImageData(0, 0, canvasElement.width, canvasElement.height);
            let code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert",
            });
            if (code) {
                drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
                drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
                drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
                drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");

                // We have a result:
                let result = code.data;
                if (result == finalResult) {
                    identicalResultCount++;
                } else {
                    finalResult = result;
                    identicalResultCount = 0;
                }
            }
        }

        // Did we get a reliable result?
        let didApply = false;
        if (identicalResultCount >= 3) {
            didApply = applyChatSettingsFromQRCode(finalResult);
            if (!didApply) {
                identicalResultCount = 0;
            }
        }
        if (didApply) {
            history.back();
        } else {
            requestAnimationFrame(handleNextVideoFrame);
        }
    }

    // Start capturing camera frames.
    startCameraCapture(480, handleNextVideoFrame, (err) => {
        // TODO: Print some error message to the canvas.
    });
}

function hideQRScannerView() {
    if (g_state.videoElement) {
        if (g_state.videoElement.srcObject) {
            g_state.videoElement.srcObject.getTracks().forEach(track => track.stop());
        }
        g_state.videoElement.remove();
        g_state.videoElement = null;
    }

    document.getElementById("qrscanner_view").style.display = "none";
}


//------------------------------------------------------------------------------
// Settings logic.
//------------------------------------------------------------------------------

function showChatQrCodeAsFullscreen() {
    // Construct the chat configuration string.
    const settings_str = activeChat().toJsonString();

    // Create QR code image.
    new AwesomeQR.AwesomeQR({
        text: settings_str,
        size: 512,
    }).draw().then((dataURL) => {
        let img = document.createElement("img");
        img.src = dataURL;
        showImageAsFullscreen(img, activeChat().chatName);
    });
}

function eventHandler_settings_new_user(event) {
    event.preventDefault();
    event.stopPropagation();
    let newUserName = window.prompt("What is your name?")
    if (newUserName) {
        document.getElementById("settings_user_name").value = newUserName;
        document.getElementById("settings_user_id").value = conv.binToB64(getEntropy(16));
    }
}

function eventHandler_settings_btn_apply(event) {
    event.preventDefault();
    event.stopPropagation();

    // Update configuration from the UI.
    g_state.userName = document.getElementById("settings_user_name").value;
    g_state.userId = conv.b64ToBin(document.getElementById("settings_user_id").value);

    overwriteActiveChat(new ChatSettings(
            document.getElementById("settings_chat_name").value,
            conv.b64ToBin(document.getElementById("settings_chat_id").value),
            conv.b64ToBin(document.getElementById("settings_auth_key").value),
            conv.b64ToBin(document.getElementById("settings_message_key").value),
            document.getElementById("settings_server_url").value,
            conv.b64ToBin(document.getElementById("settings_server_key").value)));

    // Apply other settings.
    // TODO: Store this in the Indexed DB settings.
    g_state.showErrors = document.getElementById("settings_show_errors").checked;

    // Apply the changes.
    saveSettings();
    clearChat();

    history.back();
}

function eventHandler_settings_btn_cacnel(event) {
    event.preventDefault();
    event.stopPropagation();
    history.back();
}

function eventHandler_chat_main_settings() {
    // Populate the UI with the current settings.
    document.getElementById("settings_user_name").value = g_state.userName;
    document.getElementById("settings_user_id").value = conv.binToB64(g_state.userId);

    document.getElementById("settings_chat_name").value = activeChat().chatName;
    document.getElementById("settings_chat_id").value = conv.binToB64(activeChat().chatId);
    document.getElementById("settings_auth_key").value = conv.binToB64(activeChat().authKey);
    document.getElementById("settings_message_key").value = conv.binToB64(activeChat().messageKey);
    document.getElementById("settings_server_url").value = activeChat().serverUrl;
    document.getElementById("settings_server_key").value = conv.binToB64(activeChat().serverKey);

    document.getElementById("settings_show_errors").checked = g_state.showErrors;

    showView("settings");
}

function eventHandler_chat_main_menu_reload() {
    location.reload();
}

function showSettingsView() {
    document.getElementById("settings_view").style.display = "block";
}

function hideSettingsView() {
    document.getElementById("settings_view").style.display = "none";
}


//------------------------------------------------------------------------------
// About view logic.
//------------------------------------------------------------------------------

function eventHandler_about_btn_close(event) {
    event.preventDefault();
    event.stopPropagation();
    history.back();
}

function eventHandler_chat_main_about() {
    showView("about");
}

function showAboutView() {
    document.getElementById("about_view").style.display = "block";
}

function hideAboutView() {
    document.getElementById("about_view").style.display = "none";
}


//------------------------------------------------------------------------------
// Application & UI logic.
//------------------------------------------------------------------------------

function enableNotifications() {
    // Check if the browser supports notifications.
    if (!("Notification" in window)) {
        return;
    } else if (Notification.permission === "granted") {
        return;
    } else if (Notification.permission !== "denied") {
        // We need to ask the user for permission
        Notification.requestPermission().then((permission) => {
            if (permission !== "granted") {
                warn("Notifications were denied");
            }
        });
    }
}

function showNotification(text) {
    if (("Notification" in window) && (Notification.permission === "granted")) {
        const notification = new Notification(text);
    }
}

function showView(view, pushState=true) {
    // Try to enable notifications as a response to user interaction.
    enableNotifications();

    if (g_state.currentMenu) {
        document.getElementById("body_container").removeChild(g_state.currentMenu);
        g_state.currentMenu = null;
    }

    if (view == g_state.currentView) {
        return;
    }

    // Hide the current view.
    let firstPageLoad = false;
    switch (g_state.currentView) {
        case "about":
            hideAboutView();
            break;
        case "chat":
            hideChatView();
            break;
        case "map":
            hideMapView();
            break;
        case "camera":
            hideCameraView();
            break;
        case "settings":
            hideSettingsView();
            break;
        case "qrscanner":
            hideQRScannerView();
            break;
        case "fullscreen":
            hideFullscreenView();
            break;
        default:
            // If no current view was defined, this was the first page load.
            firstPageLoad = true;
            break;
    }

    // Show the new view.
    switch (view) {
        case "about":
            showAboutView();
            break;
        case "chat":
            showChatView();
            break;
        case "map":
            showMapView();
            break;
        case "camera":
            showCameraView();
            break;
        case "settings":
            showSettingsView();
            break;
        case "qrscanner":
            showQRScannerView();
            break;
        case "fullscreen":
            showFullscreenView();
            break;
        default:
            error(`Unsupported view: ${view}`);
    }
    g_state.currentView = view;

    // Store the new view in the browser history.
    if (pushState) {
        if (firstPageLoad) {
            history.replaceState({ view: view }, "", document.location.href);
        } else {
            history.pushState({ view: view }, "", document.location.href);
        }
    }
}

function eventHandler_chat_chat_edit_user() {
    const newUserName = window.prompt("Choose your name", g_state.userName);
    if (newUserName) {
        // Apply the settings.
        g_state.userName = newUserName;
        saveSettings();
    }
}

function eventHandler_chat_chat_create_chat() {
    const newChatName = window.prompt("What do you want to call the chat?");
    if (newChatName) {
        // Create a new chat with the given name and new unique ID & keys.
        const newChat = new ChatSettings(
                newChatName,
                getEntropy(16),
                getEntropy(32),
                getEntropy(32),
                activeChat().serverUrl,
                activeChat().serverKey);
        // TODO: Append this a new chat instead of overwriting.
        overwriteActiveChat(newChat);

        // Apply the settings.
        saveSettings();
        stopMessagePolling();
        clearChat();
        startMessagePolling();
    }
}

function eventHandler_chat_chat_join_chat() {
    showView("qrscanner");
}

function eventHandler_chat_chat_share_chat() {
    showChatQrCodeAsFullscreen();
}

function eventHandler_chat_chat_reset_chat() {
    if (window.confirm("Really reset to default chat?")) {
        overwriteActiveChat(ChatSettings.default());

        // Apply the settings.
        saveSettings();
        stopMessagePolling();
        clearChat();
        startMessagePolling();
    }
}

function makeChatChatMenu() {
    return {
        position: "left",
        items: [
            { icon: "atlasicons/account.svg", caption: "Set my name", handler: eventHandler_chat_chat_edit_user },
            { icon: "atlasicons/qr-code.svg", caption: "Join chat", handler: eventHandler_chat_chat_join_chat },
            { icon: "atlasicons/user-plus.svg", caption: "Invite user", handler: eventHandler_chat_chat_share_chat },
            { icon: "atlasicons/add-chats.svg", caption: "Create chat", handler: eventHandler_chat_chat_create_chat },
            { icon: "atlasicons/trash.svg", caption: "Default chat", handler: eventHandler_chat_chat_reset_chat },
        ]
    };
}

function makeChatMainMenu() {
    return {
        position: "right",
        items: [
            { icon: "atlasicons/map-navigation.svg", caption: "Map", handler: eventHandler_chat_main_map },
            { icon: "atlasicons/refresh-chat.svg", caption: "Refresh chat", handler: eventHandler_chat_main_menu_refresh },
            { icon: "atlasicons/gear.svg", caption: "Settings", handler: eventHandler_chat_main_settings },
            { icon: "atlasicons/rotate-arrow-right.svg", caption: "Reload app", handler: eventHandler_chat_main_menu_reload },
            { icon: "atlasicons/info-circle.svg", caption: "About", handler: eventHandler_chat_main_about },
        ]
    };
}

function showMenu(menu, pushState=true) {
    if (g_state.currentMenu) {
        document.getElementById("body_container").removeChild(g_state.currentMenu);
        g_state.currentMenu = null;
    }

    let menuDefinition;
    if (menu === "chat_main") {
        menuDefinition = makeChatMainMenu();
    } else if (menu === "chat_chat") {
        menuDefinition = makeChatChatMenu();
    } else {
        log.error(`Bad menu ${menu}`);
        return;
    }

    // Create the menu.
    const overlayDiv = document.createElement("div");
    overlayDiv.classList.add("menu_overlay");
    overlayDiv.addEventListener("click", (event) => {
        event.preventDefault();
        event.stopPropagation();
        history.back();
    });

    const menuDiv = document.createElement("div");
    menuDiv.classList.add(`menu_${menuDefinition.position}`);
    overlayDiv.appendChild(menuDiv);

    const menuTitle = document.createElement("div");
    menuTitle.classList.add("menu_title");
    menuTitle.innerText = "✕";
    menuTitle.addEventListener("click", (event) => {
        event.preventDefault();
        event.stopPropagation();
        history.back();
    });
    menuDiv.appendChild(menuTitle);

    for (const item of menuDefinition.items) {
        const menuItem = document.createElement("div");
        menuItem.classList.add("menu_item");
        const menuItemIcon = document.createElement("img");
        menuItemIcon.src = `client/icons/${item.icon}`;
        menuItem.appendChild(menuItemIcon);
        const menuItemText = document.createElement("span");
        menuItemText.innerText = item.caption;
        menuItem.appendChild(menuItemText);
        menuItem.addEventListener("click", (event) => {
            event.preventDefault();
            event.stopPropagation();

            // TODO: This seems fragile. Do we need to guaratee that the history.back operation
            // has completed before running the handler (which may navigate to a new view, for
            // instance)?
            history.back();
            setTimeout(item.handler, 200);
        });
        menuDiv.appendChild(menuItem);
    }

    document.getElementById("body_container").appendChild(overlayDiv);
    g_state.currentMenu = overlayDiv;

    // Store the menu in the browser history.
    if (pushState) {
        history.pushState({ menu: menu }, "", document.location.href);
    }
}

function openIndexedDb() {
    if (g_state.db) {
        return true;
    }
    if (!("indexedDB" in window)) {
        error("IndexedDB is not supported.");
        return false;
    }

    const request = window.indexedDB.open("chachachat", 1);

    request.addEventListener("upgradeneeded", (event) => {
        const db = event.target.result;
        const settingsStore = db.createObjectStore("settings", { keyPath: "id" });
        logSettings("Settings database upgraded");
    });

    request.addEventListener("success", (event) => {
        logSettings("Settings database created");
        g_state.db = request.result;
        g_state.db.onerror = (event) => {
            error(`Database error: ${event.target.errorCode}`);
        };
        init();
    });

    request.addEventListener("error", (event) => {
        // We init anyway, without the database.
        error(`Unable to open IndexedDB: ${request.errorCode}`);
        init();
    });

    return true;
}

function setRandomUserSettings() {
    // Generate a random name and ID.
    g_state.userName = getRandomUserName();
    g_state.userId = getEntropy(16);
}

function setDefaultChatSettings() {
    overwriteActiveChat(ChatSettings.default());
}

function loadSettings(handler) {
    logSettings("Loading settings from the settings DB...");

    // Start a transaction against the settings DB.
    const transaction = g_state.db.transaction("settings", "readonly");
    transaction.addEventListener("complete", () => {
        logSettings("Load settings - completed");
    });
    transaction.addEventListener("error", () => {
        error("Load settings: Transaction error");
        if (handler) {
            handler(false);
        }
    });

    const objectStore = transaction.objectStore("settings");

    let userSettingsLoaded = false;
    let chatSettingsLoaded = false;
    const cursor = objectStore.openCursor()
    cursor.addEventListener("success", (event) => {
        const item = event.target.result;
        if (item) {
            if (item.value.id === "user") {
                // Load user settings.
                g_state.userName = item.value.userName;
                g_state.userId = item.value.userId;
                userSettingsLoaded = true;
                logSettings("User settings loaded");
            } else if (item.value.id === "chat") {
                // Load chat settings.
                overwriteActiveChat(new ChatSettings(
                        item.value.chatName,
                        item.value.chatId,
                        item.value.authKey,
                        item.value.messageKey,
                        item.value.serverUrl,
                        item.value.serverKey));
                chatSettingsLoaded = true;
                logSettings("Chat settings loaded");
            }
            item.continue();
        } else {
            logSettings("Loaded all settings");
            if (handler) {
                const firstRun = !(userSettingsLoaded && chatSettingsLoaded);
                handler(firstRun);
            }
        }
    });
    cursor.addEventListener("error", (event) => {
        error("Failed to load settings");
        if (handler) {
            handler(true);
        }
    });
}

function saveSettings() {
    logSettings("Saving settings to the settings DB...");

    // Start a transaction against the settings DB.
    const transaction = g_state.db.transaction("settings", "readwrite");
    transaction.addEventListener("complete", () => {
        logSettings("Settings saved - completed");
    });
    transaction.addEventListener("error", () => {
        error("Save settings: Transaction error");
    });

    const objectStore = transaction.objectStore("settings");

    // Save user settings.
    const userSettings = {
        id: "user",
        userName: g_state.userName,
        userId: g_state.userId,
    };
    const userSettingsQuery = objectStore.put(userSettings);
    userSettingsQuery.addEventListener("success", () => {
        logSettings("User settings saved - successful");
    });

    // Save chat settings.
    const chatSettings = {
        id: "chat",
        chatName: activeChat().chatName,
        chatId: activeChat().chatId,
        authKey: activeChat().authKey,
        messageKey: activeChat().messageKey,
        serverUrl: activeChat().serverUrl,
        serverKey: activeChat().serverKey,
    };
    const chatSettingsQuery = objectStore.put(chatSettings);
    chatSettingsQuery.addEventListener("success", () => {
        logSettings("Chat settings saved - successful");
    });
}

function globalErrorHandler(event) {
    error(`${event.type}: ${event.message}`);
}

function init() {
    // Install a global error handler.
    window.addEventListener("error", globalErrorHandler);

    // Start with default settings in case there are no previously saved settings.
    setRandomUserSettings();
    setDefaultChatSettings();

    // Load settings.
    loadSettings((firstRun) => {
        // Default UI state.
        document.getElementById("map_cbox_follow").checked = false;

        // Add event handlers.
        window.onfocus = (event) => { g_state.appActive = true; };
        window.onblur = (event) => { g_state.appActive = false; };

        document.getElementById("fullscreen_view").addEventListener("click", eventHandler_fullscreen_view_click, false);

        document.getElementById("chat_container").addEventListener("dragover", (event) => { event.preventDefault(); }, false);
        document.getElementById("chat_container").addEventListener("drop", eventHandler_main_drop, false);
        document.getElementById("chat_btn_chat_menu").addEventListener("click", eventHandler_chat_btn_chat_menu, false);
        document.getElementById("chat_btn_main_menu").addEventListener("click", eventHandler_chat_btn_main_menu, false);
        document.getElementById("out").addEventListener("submit", eventHandler_out, false);
        document.getElementById("btn_camera").addEventListener("click", eventHandler_btn_camera, false);
        document.getElementById("camera_btn_click").addEventListener("click", eventHandler_camera_btn_click, false);
        document.getElementById("camera_btn_accept").addEventListener("click", eventHandler_camera_btn_accept, false);
        document.getElementById("camera_btn_discard").addEventListener("click", eventHandler_camera_btn_discard, false);
        document.getElementById("about_btn_close").addEventListener("click", eventHandler_about_btn_close, false);
        document.getElementById("map_cbox_follow").addEventListener("change", eventHandler_map_cbox_follow, false);
        document.getElementById("map_btn_close").addEventListener("click", eventHandler_map_btn_close, false);
        document.getElementById("settings_new_user").addEventListener("click", eventHandler_settings_new_user, false);
        document.getElementById("settings_btn_apply").addEventListener("click", eventHandler_settings_btn_apply, false);
        document.getElementById("settings_btn_cancel").addEventListener("click", eventHandler_settings_btn_cacnel, false);

        // Configure handling of Enter for the message textarea.
        document.getElementById("out_message").addEventListener("keypress", function (event) {
            if(event.key === "Enter" && !event.shiftKey) {
                eventHandler_out(event);
            }
        }, false);

        // Install the history navigation handler.
        window.addEventListener("popstate", (event) => {
            if (event.state && event.state.view) {
                showView(event.state.view, false);
            } else if (event.state && event.state.menu) {
                showMenu(event.state.menu, false);
            } else {
                warn("Unhandled history popstate");
            }
        });

        // The root view is the chat (this may change in the future).
        clearChat();
        showView("chat");

        // Was this the first run?
        if (firstRun) {
            // Allow the user to select a name (and save it).
            setTimeout(eventHandler_chat_chat_edit_user, 200);
        }
    });
}

if (!openIndexedDb()) {
    init();
}