function attachEvents() {
    const kinveyBaseUrl = "https://baas.kinvey.com/appdata/";
    const kinveyAppKey = "kid_rJ0nPMBze";
    const kinveyUsername = "guest";
    const kinveyPassword = "guest"
    const kinveyAppSecret =
        "8a0a464e0e0b4e8681c206c6dd375d2c";
    const kinveyAppAuthHeaders = {
        'Authorization': "Basic " + btoa(kinveyUsername + ":" + kinveyPassword),
        "Content-type": "application/json"
    };

    function loadPlayers() {
        $.ajax({
            method: "GET",
            url: kinveyBaseUrl + kinveyAppKey + "/players",
            headers: kinveyAppAuthHeaders
        })
            .then(displayPlayers)
            .catch(displayError);
    }
    loadPlayers();
    function displayPlayers(data) {
        $("#players").empty();
        for(let player of data){
            let div = $(`<div class="player" data-id="${player._id}">
            <div class="row">
                <label>Name:</label>
                <label class="name">${player.name}</label>
            </div>
            <div class="row">
                <label>Money:</label>
                <label class="money">${player.money}</label>
            </div>
            <div class="row">
                <label>Bullets:</label>
                <label class="bullets">${player.bullets}</label>
            </div>
        </div>`)
            $('<button class="play">Play</button>').on('click', afterPlayClicked).appendTo($(div));
            $('<button class="delete">Delete</button>').on('click', deletePlayer).appendTo($(div));


            $(div).appendTo($("#players"))
        }
    }

    $("#save").on('click', saveProgress);

    function stopActions() {
        $("#canvas").hide();
        $("#save").hide();
        $("#reload").hide();
        clearInterval(canvas.intervalId);
    }


    $("#reload").on('click', reload);

    function reload() {
        let playerInPlay = $('.player[inPlay=true]');
        let id = $(playerInPlay).attr('data-id');
        let name = $(playerInPlay).children().children()[1].innerText
        let money = $(playerInPlay).children().children()[3].innerText
        let bullets = $(playerInPlay).children().children()[5].innerText
        let obj = {
            name:name,
            money: Number(money) - 60,
            bullets: 6
        };
        let request = {
            method: "PUT",
            url: kinveyBaseUrl + kinveyAppKey + "/players/" + id,
            headers: kinveyAppAuthHeaders,
            data: JSON.stringify(obj)
        };
        $.ajax(request)
            .then(loadPlayers)
            .catch(displayError)
    }

    function saveProgress() {

        let playerInPlay = $('.player[inPlay=true]');
        if(playerInPlay.length>0){
            let id = $(playerInPlay).attr('data-id');
            let name = $(playerInPlay).children().children()[1].innerText
            let money = $(playerInPlay).children().children()[3].innerText
            let bullets = $(playerInPlay).children().children()[5].innerText
            let obj = {
                name:name,
                money: money,
                bullets: bullets
            };
            let request = {
                method: "PUT",
                url: kinveyBaseUrl + kinveyAppKey + "/players/" + id,
                headers: kinveyAppAuthHeaders,
                data: JSON.stringify(obj)
            }
            $.ajax(request)
                .then(stopActions)
                .catch(displayError)
        }
    }

    $("#addPlayer").on('click', addPlayer);
    function addPlayer() {
        let name = $("#addName").val();
        let obj = {
            "name": name,
            "bullets": 6,
            "money": 500
        };
        let request = {
            method: "POST",
            url: kinveyBaseUrl + kinveyAppKey + "/players",
            headers: kinveyAppAuthHeaders,
            data: JSON.stringify(obj)
        };
        if(name!=""){
            $.ajax(request)
                .then(loadPlayers)
                .catch(displayError);
        }
        $("#addName").val('')
    }

    function afterPlayClicked() {
        let previousPlayer = $(".player[inPlay=true]");
        previousPlayer.attr('inPlay', false);
        let playerInPlay = $(this).parent();
        let id = $(playerInPlay).attr("data-id");
        $(playerInPlay).attr('inPlay', true);
        saveProgress();
        $("#canvas").css('display', 'inline-block');
        saveProgress();
        reload();
        let name = $(playerInPlay).children().children()[1].innerText
        let money = $(playerInPlay).children().children()[3].innerText
        let bullets = $(playerInPlay).children().children()[5].innerText
        let obj = {
            name:name,
            money: Number(money),
            bullets: Number(bullets)
        };
        loadCanvas(obj)
    }
    function deletePlayer() {
        let div = $(this).parent();
        $(div).remove();
        let id = $(div).attr("data-id");
        let request = {
            method: "DELETE",
            url: kinveyBaseUrl + kinveyAppKey + "/players/" + id,
            headers: kinveyAppAuthHeaders
        };
        $.ajax(request)
            .then(function () {
                console.log('player deleted')
            })
            .catch(displayError);
    }

    function displayError(err) {
        console.log(err.statusText);
    }
}