let mappings = {
    'key_a': [1, 0, 0, 0, 0, 0, 0, 0],
    'key_r': [0, 1, 0, 0, 0, 0, 0, 0],
    'key_t': [0, 0, 1, 0, 0, 0, 0, 0],
    'key_s': [0, 0, 0, 1, 0, 0, 0, 0],
    'key_e': [0, 0, 0, 0, 1, 0, 0, 0],
    'key_y': [0, 0, 0, 0, 0, 1, 0, 0],
    'key_i': [0, 0, 0, 0, 0, 0, 1, 0],
    'key_o': [0, 0, 0, 0, 0, 0, 0, 1],
    'key_q': [1, 0, 1, 1, 0, 0, 0, 0],
    'key_w': [1, 0, 0, 1, 0, 0, 0, 0],
    'key_u': [0, 0, 0, 0, 0, 1, 1, 0],
    'key_p': [0, 0, 0, 0, 1, 0, 1, 1],
    'key_d': [1, 1, 1, 0, 0, 0, 0, 0],
    'key_f': [1, 1, 0, 0, 0, 0, 0, 0],
    'key_g': [0, 1, 1, 0, 0, 0, 0, 0],
    'key_h': [0, 0, 0, 0, 1, 0, 1, 0],
    'key_j': [0, 0, 1, 1, 0, 0, 0, 0],
    'key_k': [0, 0, 0, 0, 0, 1, 0, 1],
    'key_l': [0, 0, 0, 0, 1, 1, 1, 0],
    'key_z': [1, 1, 1, 1, 0, 0, 0, 0],
    'key_x': [0, 1, 1, 1, 0, 0, 0, 0],
    'key_c': [0, 0, 0, 0, 1, 1, 0, 0],
    'key_v': [0, 1, 0, 1, 0, 0, 0, 0],
    'key_b': [0, 0, 0, 0, 1, 0, 0, 1],
    'key_n': [0, 0, 0, 0, 0, 0, 1, 1],
    'key_m': [0, 0, 0, 0, 0, 1, 1, 1],
    'key_space': [0, 0, 0, 0, 1, 1, 1, 1],
    'key_enter': [1, 0, 0, 0, 1, 0, 0, 0],
    'key_comma': [1, 0, 0, 0, 0, 0, 1, 0],
    'key_period': [1, 0, 0, 0, 0, 1, 0, 0],
    'key_backspace': [0, 1, 0, 0, 1, 0, 0, 0],
    'key_apostrophe': [1, 0, 0, 0, 0, 1, 1, 0],
    'key_exclamation': [0, 0, 1, 0, 0, 0, 1, 0]
}

async function artseyDraw() {
    let keys = $('.keyboard-key');
    for (let i = 0; i < keys.length; i++) {
        if (currentMapping[i] === 1)
            $(keys[i]).css('background-color', 'black');
        else
            $(keys[i]).css('background-color', 'white');
    }
}

async function artseyReset() {
    let config = {'': [0, 0, 0, 0, 0, 0, 0, 0]};
    await artseyDraw(config);
}

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

async function setTypingText(text) {
    $('#letterbox').empty();
    console.log(text);
    for (let i = 0; i < text.length; i++) {
        let letter = text.charAt(i);
        let div = "<div class='letterbox-letter'>" + letter + "</div>";
        $(div).appendTo('#letterbox');
        await sleep(80);
    }
}

async function highlightLetter(letterDiv) {
    $(letterDiv).removeClass("letterbox-letter");
    $(letterDiv).addClass("letterbox-letter-hl");
}

async function unhighlightLetter(letterDiv) {
    $(letterDiv).removeClass("letterbox-letter-hl");
    $(letterDiv).addClass("letterbox-letter");
}

async function getMappingForLetter(letter) {
    switch(letter) {
        case ' ':
            return "key_space";
        case ',':
            return "key_comma";
        case 'enter':
            return "key_enter";
        case 'backspace':
            return "key_backspace";
        default:
            return "key_" + letter.toLowerCase();
    }
}

async function setNextLetter() {
    if (currentletterIndex > currentString.length-1) {
        return;
    }
    let prevIndex = currentletterIndex-1;
    if (prevIndex >= -1) {
        await unhighlightLetter($("#letterbox").children()[currentletterIndex]);
    }
    currentletterIndex++;
    currentLetter = currentString.charAt(currentletterIndex).toLowerCase();
    currentMapping = mappings[(await getMappingForLetter(currentLetter)).toString()];
    await highlightLetter($("#letterbox").children()[currentletterIndex]);
    await artseyDraw();
}

let currentletterIndex = -1;
let currentLetter = '';
let currentString = "hello world";
let currentMapping = [0, 0, 0, 0, 0, 0, 0, 0];

$(document).ready(async function () {
    console.log("ready! Here's a demo.");
    await sleep(1000);
    await setTypingText(currentString);
    await sleep(500);

    for (let i = 0; i < currentString.length; i++) {
        await setNextLetter();
        await sleep(1000);
    }
});