function attachEvents() {
    const kinveyAppId = "kid_BJ_Ke8hZg";
    const postVenueIdUrl = "https://baas.kinvey.com/rpc/kid_BJ_Ke8hZg/custom/calendar?query=";
    const getVenuesUrl = "https://baas.kinvey.com/appdata/" + kinveyAppId;
    const kinveyUsername = "guest";
    const kinveyPassword = "pass";
    const base64auth = btoa(kinveyUsername + ":" + kinveyPassword);
    const authHeaders = { "Authorization": "Basic " + base64auth };


    $('#getVenues').click(() => $.ajax({
        method: "POST",
        url: postVenueIdUrl + "23-11",
        headers: authHeaders
    }).then(getVenuesInfo).catch(error));

    function getVenuesInfo(IDs) {
        $('#venue-info').empty();
        for (let ID of IDs){
            $.get({
                url: getVenuesUrl + "/venues/" + ID,
                headers: authHeaders
            })
                .then(displayVenue)
                .catch(error);

            function displayVenue(venue) {
                let venueMainDiv =$('<div>');
                venueMainDiv.attr('id', ID);
                let span = ($('<span>').addClass("venue-name"));
                let infoButton = $('<input>').addClass("info").attr('type','button').val("More info");
                span.append(infoButton);
                span.append(venue.name);
                venueMainDiv.append(span);

                let venueDetailsDiv = $('<div>').addClass('venue-details').css('display', 'none');
                infoButton.click(function(){
                    if(venueDetailsDiv.css('display') == "none") {
                        venueDetailsDiv.css('display', 'block');
                    }
                    else{
                        venueDetailsDiv.css('display', 'none');
                    }
                });

                let table = $('<table>');

                let firstTr = $("<tr><th>Ticket Price</th><th>Quantity</th><th></th></tr>");
                table.append(firstTr);

                let secondTr = $('<tr>');
                let venuePriceTd = $('<td>').addClass('venue-price').text(venue.price +" lv");
                venuePriceTd.appendTo(secondTr);
                let selectTd = $('<td>');
                let select = $('<select>').addClass("quantity");
                 select
                     .append($('<option value="1">1</option>'))
                     .append($('<option value="2">2</option>'))
                     .append($('<option value="3">3</option>'))
                     .append($('<option value="4">4</option>'))
                     .append($('<option value="5">5</option>'));

                let purchaseButtonTd = $('<td>');
                let purchaseButton = $('<input>');
                purchaseButton.addClass('purchase').attr('type','button').val("Purchase");

                purchaseButton.click(function () {
                    loadPurchasePage(venue, IDs, ID);
                });

                purchaseButton.appendTo(purchaseButtonTd);
                purchaseButtonTd.appendTo(secondTr);
                select.appendTo(selectTd);
                selectTd.appendTo(secondTr);
                secondTr.appendTo(table);
                venueDetailsDiv.append(table);

                venueDetailsDiv
                    .append($('<span>').addClass( "head").text("Venue Description"))
                    .append($('<p>').addClass("description").text(venue.description))
                    .append($('<p>').addClass("description").text("Starting time: " + venue.startingHour));

                venueDetailsDiv.appendTo(venueMainDiv);
                venueMainDiv.appendTo($('#venue-info'));
            }
        }
    }

    function loadPurchasePage(venue, IDs, ID) {
        for (let id of IDs){
            $(`#${id}`).hide();
        }

        let numberOfTickets = $(`#${ID} option:selected`).val();



        $('#venue-info').append($('<span class="head">Confirm purchase</span>'));

        let purchaseInfoDiv = $('<div>').addClass("purchase-info");
        purchaseInfoDiv
            .append($('<span>').text(venue.name))
            .append($('<span>').text(numberOfTickets + "x" + venue.price))
            .append($('<span>').text("Total: " + (numberOfTickets*venue.price) + " lv"))
            .append($("<input>").attr('type','button').val("Confirm"));

        purchaseInfoDiv.appendTo($('#venue-info'))
    }

    function error(err) {
        alert(err.statusText)
    }
}