attachEvents

function attachEvents() {
    // Kinvey app connection constants
    const appKey = 'kid_r1ANmjNzg';
    const appUser = 'wildwestgame';
    const appPassword = 'billybob';
    const appDataUrl = 'https://baas.kinvey.com/appdata/kid_r1ANmjNzg/players';
    const appLogin = btoa(`${appUser}:${appPassword}`);
    const authHeaders = {
        'Authorization': `Basic ${appLogin}`,
        'Content-Type': 'application/json'
    };

    // Cache some elements
    let divPlayers = $('#players');
    let btnAddPlayer = $('#addPlayer');
    let inputNewPlayer = $('#addName');
    let divGameButtons = $('#buttons');
    let gameSaveButton = $('#save');
    let gameReloadButton = $('#reload');
    let gameCanvas = $('#canvas');


    // App logic here
    let loadedPlayers = [];
    let currentPlayerHolder;

    // Expose loadPlayers() to fix

    //Bind button events
    $(btnAddPlayer).click(addNewPlayer);
    $(gameSaveButton).click(savePlayerProgress);
    $(gameReloadButton).click(reloadPlayerBullets);

    // Load player data to page
    loadPlayers();


    // App functionality
    function handleError(error) {
        console.log(error);
    }

    function loadPlayers() {
        // Reenable add new player button if it was disabled
        $(btnAddPlayer).removeAttr('disabled');

        // Clear players div
        $(divPlayers).empty();

        // Build request for Kinvey
        let request = {
            method: 'GET',
            url: appDataUrl,
            headers: authHeaders
        };

        // Send request. Load result in app page
        $.ajax(request)
            .then(loadPlayersData)
            .catch(handleError);

        function loadPlayersData(playersArray) {
            // Iterate over array from server response and display each player
            for (let playerObj of playersArray) {
                // If player is out of money and bullets, remove from Kinvey
                if (playerObj['money'] == 0 && playerObj['bullets'] == 0) {
                    deletePlayerFromDb(playerObj['_id']);
                } else { // Else save player data and display
                    loadedPlayers.push(playerObj);

                    let tempPlayerDiv = $(`<div data-id=${playerObj['_id']}>`).addClass('player')
                        .append($('<div>').addClass('row')
                            .append($('<label>').text('Name: '))
                            .append($('<label>').addClass('name').text(playerObj['name'])))
                        .append($('<div>').addClass('row')
                            .append($('<label>').text('Money: '))
                            .append($('<label>').addClass('money').text(playerObj['money'])))
                        .append($('<div>').addClass('row')
                            .append($('<label>').text('Bullets: '))
                            .append($('<label>').addClass('bullets').text(playerObj['bullets'])))
                        .append($('<button>').addClass('play').text('Play')
                            .click(playGame))
                        .append($('<button>').addClass('delete').text('Delete')
                            .click(deletePlayer));
                    $(divPlayers).append(tempPlayerDiv);
                }
            }
        }
    }

    function addNewPlayer() {
        // Disable button to prevent spam
        $(this).attr('disabled', true);

        // Get new player name and clear input box
        let name = $(inputNewPlayer).val();

        // Build request to server and send
        let request = {
            method: 'POST',
            url: appDataUrl,
            headers: authHeaders,
            data: JSON.stringify({
                name: name
            })
        };
        $.ajax(request)
            .then(loadPlayers)
            .catch(handleError);
    }

    function deletePlayer() {
        // Disable button to prevent (illogical) spam
        $(this).attr('disabled', true);

        // Get player id from parent
        let targetId = $(this).parent().attr('data-id');

        // Build request and send to Kinvey
        let request = {
            method: 'DELETE',
            url: `${appDataUrl}/${targetId}`,
            headers: authHeaders
        };
        $.ajax(request)
            .then(loadPlayers)
            .catch(handleError);
    }

    function deletePlayerFromDb(targetId) {
        // Build request and send to Kinvey
        let request = {
            method: 'DELETE',
            url: `${appDataUrl}/${targetId}`,
            headers: authHeaders
        };
        $.ajax(request);
    }

    function playGame() {
        // Get player id and move player object to current player object
        let targetId = $(this).parent().attr('data-id');
        let targetPlayerObj = loadedPlayers.find(p => p['_id'] == targetId);
        currentPlayerHolder = new CurrentPlayer(targetPlayerObj);

        // Load canvas and display it and its controls
        loadCanvas(currentPlayerHolder);
        showHideGameControls('show');
    }

    function showHideGameControls(action) {
        switch (action) {
            case 'show':
                $(divGameButtons).css('display', '');
                $(gameCanvas).css('display', '');
                break;
            case 'hide':
                $(divGameButtons).css('display', 'none');
                $(gameCanvas).css('display', 'none');
                break;
        }
    }

    function savePlayerProgress() {
        let playerData = {
            name: currentPlayerHolder['name'],
            money: currentPlayerHolder['money'],
            bullets: currentPlayerHolder['bullets']
        };
        let request = {
            method: "PUT",
            url: `${appDataUrl}/${currentPlayerHolder['_id']}`,
            headers: authHeaders,
            data: JSON.stringify(playerData)
        };
        $.ajax(request)
            .then(clearCanvasInterval)
            .catch(handleError);

        function clearCanvasInterval() {
            clearInterval(canvas.intervalId);
            showHideGameControls('hide');
            loadPlayers();
        }
    }

    function reloadPlayerBullets() {
        currentPlayerHolder['money'] -= 60;
        currentPlayerHolder['bullets'] = 6;
    }
}