(() => {

    // Define variables

    let username_input;
    let password_input;
    let submit_button;
    let password_overlay;
    let pw_overlay_cancel;
    let userlist_buttons;
    let pinpad_buttons;
    let userlist_container;


    // Add event listeners after DOM Content loaded

    document.addEventListener("DOMContentLoaded", () => {
        
        // elements

        username_input = document.getElementById("id_username");
        password_input = document.getElementById("id_password");
        submit_button = document.getElementById("submit_login");
        password_overlay = document.getElementById("passwordOverlayContainer");
        pw_overlay_cancel = document.getElementById("pwoCancel");
        userlist_container = document.getElementById("userlistContainer");

        userlist_buttons = document.getElementsByClassName("userlistButton");
        pinpad_buttons = document.getElementsByClassName("pinpadBtn");

        // event listeners

        // [...<html-collection>] converts an html collection to an array

        [...userlist_buttons].forEach(element => {
            element.addEventListener("click", () => {
                set_username(element.dataset.username);
                show_password_overlay();
            })
        });

        [...pinpad_buttons].forEach(element => {
            element.addEventListener("click", () => {
                pinpad_press(element.dataset.btn);
            })
        })

        pw_overlay_cancel.addEventListener("click", () => {
            hide_password_overlay();
        });

    })


    function set_username(username) {
        username_input.value = username;
    }

    function show_password_overlay() {

        window.scrollTo(0, 0);
        password_overlay.classList.remove("nodisplay");
        userlist_container.classList.add("nodisplay");

    }

    function hide_password_overlay() {

        password_overlay.classList.add("nodisplay");
        userlist_container.classList.remove("nodisplay");
        password_input.value = "";

    }

    function pinpad_press(key) {
        if (key == "enter") {
            submit_button.click();
        }
        else if (key == "x") {
            password_input.value = "";
        }
        else {
            password_input.value += key;
        }
    }

})()