function startApp() {
    //clear user auth data
    sessionStorage.clear()

    showHideMenuLinks()
    $('#infoBox, #errorBox, #loadingBox').hide()


    showView('viewAppHome')

    //bind navigation menu links
    $('#linkMenuAppHome').click(showHomeAppView)
    $('#linkMenuUserHome').click(showHomeUserView)
    $('#linkMenuLogin').click(showLoginView)
    $('#linkMenuRegister').click(showRegisterView)
    $('#linkMenuMyMessages').click(showMyMessages)
    $('#linkMenuArchiveSent').click(showArchiveSend)
    $('#linkMenuSendMessage').click(showSendMessages)
    $('#linkMenuLogout').click(logoutUser)

    //bind the form submit buttons
    $('#formLogin').submit(loginUser)
    $('#formRegister').submit(registerUser)
    $('#formSendMessage').submit(sendMessage)

    //bind the info/error boxes: hide on click
    $('#infoBox, #errorBox').click(function () {
        $(this).fadeOut()
    })

    // Attach AJAX "loading" event listener
    $(document).on({
        ajaxStart: function () {
            $("#loadingBox").show()
        },
        ajaxStop: function () {
            $("#loadingBox").hide()
        }
    });


    const kinveyBaseUrl = "https://baas.kinvey.com/";
    const kinveyAppKey = "kid_Sk10T_cmg";
    const kinveyAppSecret = "e0bac17dd78d45a3ab05b7967a908850";
    const kinveyAppAuthHeaders = {
        'Authorization': "Basic " + btoa(kinveyAppKey + ":" + kinveyAppSecret),
        'Content-type': "application/json"
    };

    function setUsernameInLink() {
        $('#spanMenuLoggedInUser').text('Hello, ' + sessionStorage.getItem('username'))
    }

    function showHideMenuLinks() {
        $('#menu a').hide()
        $('#menu span').hide()
        if (sessionStorage.getItem('authToken')) {
            setUsernameInLink()
            //logged in user
            $('#linkMenuUserHome').show()
            $('#linkMenuMyMessages').show()
            $('#linkMenuArchiveSent').show()
            $('#linkMenuSendMessage').show()
            $('#linkMenuLogout').show()
            $('#spanMenuLoggedInUser').show()
        } else {
            //no user logged in
            $('#linkMenuAppHome').show()
            $('#linkMenuLogin').show()
            $('#linkMenuRegister').show()
        }
    }

    function showView(viewName) {
        // Hide all views and show the selected view only
        $('main > section').hide();
        $('#' + viewName).show();
    }

    function showMyMessages(){
        downloadReceivedMessages()
        showView('viewMyMessages')
    }

    function showArchiveSend(){
        downloadSentedMessage()
        showView('viewArchiveSent')
    }

    function showHomeAppView() {
        showView('viewAppHome')
    }

    function showHomeUserView() {
        $('#linkUserHomeMyMessages').on('click',() => showMyMessages())
        $('#linkUserHomeSendMessage').on('click',() => showSendMessages())
        $('#linkUserHomeArchiveSent').on('click',() => showArchiveSend())


        showView('viewUserHome')
        $('#viewUserHomeHeading').text('Welcome, ' + sessionStorage.getItem('username'))
    }

    function showSendMessages() {
        showView('viewSendMessage')
        getRecipientsForOption()
        $('#formSendMessage').trigger('reset')
    }

    function sendMessage(event){
        event.preventDefault()

        $.ajax({
            method: "GET",
            url: kinveyBaseUrl + ''
        })

        let data = {
            sender_username: sessionStorage.getItem('username') ,
            text: $('#msgText').val(),
            recipient_username: $('select[name=recipient] option:selected').val()
        }


        $.ajax({
            method: "POST",
            url: kinveyBaseUrl  + 'appdata/' + kinveyAppKey + '/messages',
            headers: getKinveyUserAuthHeaders(),
            data: data,
            success: sendMessageSuccess,
            error: handleAjaxError
        })

        function sendMessageSuccess(response){
            showInfo("Message send successful.")
            showArchiveSend()
        }
    }


    function getRecipientsForOption(){
        $('#msgRecipientUsername').empty()

        $.ajax({
            method: "GET",
            url: kinveyBaseUrl + 'user/' + kinveyAppKey,
            headers: getKinveyUserAuthHeaders(),
            success: getRecipientsSuccessful,
            error: handleAjaxError
        })

        function getRecipientsSuccessful(users){
            let usersForOption = []
            for(let user of users){
                usersForOption.push(user)
            }
            for(let option of usersForOption){
                $('#msgRecipientUsername').append($('<option>', {
                    value: option.username,
                    text : formatSender(option.name, option.username)
                }));
            }

        }
    }

    function downloadSentedMessage(){
        $.ajax({
            method: "GET",
            url: kinveyBaseUrl + 'appdata/' + kinveyAppKey + '/messages?query={"sender_username":"' + sessionStorage.getItem('username') + '"}',
            headers: getKinveyUserAuthHeaders(),
            success: downloadMessagesSuccessful,
            error: handleAjaxError
        })

        function downloadMessagesSuccessful(messages){
            $('#sentMessages table tbody').empty()
            for(let message of messages){
                let tr = $('<tr>')
                    .append($('<td>')
                        .text(message.recipient_username))
                    .append($('<td>')
                        .text(message.text))
                    .append($('<td>')
                        .text(formatDate(message._kmd.lmt)))
                    .append($('<td>')
                        .append($("<button>").text('Delete').on('click', () => deleteMessage(message._id))))

                tr.appendTo($('#sentMessages table tbody'))
            }
        }
    }

    function deleteMessage(id){
        $.ajax({
            method: "DELETE",
            url: kinveyBaseUrl + 'appdata/' + kinveyAppKey + '/messages/' + id,
            headers: getKinveyUserAuthHeaders(),
            success: deleteMessageSuccess,
            error: handleAjaxError
        })

        function deleteMessageSuccess(){
            showArchiveSend()
            showInfo('Message deleted successful.')
        }
    }

    function formatDate(dateISO8601) {
        let date = new Date(dateISO8601);
        if (Number.isNaN(date.getDate()))
            return '';
        return date.getDate() + '.' + padZeros(date.getMonth() + 1) +
            "." + date.getFullYear() + ' ' + date.getHours() + ':' +
            padZeros(date.getMinutes()) + ':' + padZeros(date.getSeconds());

        function padZeros(num) {
            return ('0' + num).slice(-2);
        }
    }

    function formatSender(name, username) {
        if (!name)
            return username;
        else
            return username + ' (' + name + ')';
    }

    function downloadReceivedMessages(){
        $.ajax({
            method: "GET",
            url: kinveyBaseUrl + 'appdata/' + kinveyAppKey + '/messages?query={"recipient_username":"' + sessionStorage.getItem('username') + '"}',
            headers: getKinveyUserAuthHeaders(),
            success: downloadMessagesSuccesful,
            error: handleAjaxError
        })

        function downloadMessagesSuccesful(messages){
            $('#myMessages table tbody').empty()
            for(let message of messages){
                let tr = $('<tr>')
                    .append($('<td>')
                        .text(formatSender(message.sender_name, message.sender_username)))
                    .append($('<td>')
                        .text(message.text))
                    .append($('<td>')
                        .text(formatDate(message._kmd.lmt)))

                tr.appendTo($('#myMessages table tbody'))
            }

        }
    }


    function showLoginView() {
        showView('viewLogin')
        $('#formLogin').trigger('reset')
    }

    function showRegisterView() {
        showView('viewRegister')
        $('#formRegister').trigger('reset')
    }

    function registerUser(event) {
        event.preventDefault()

        let data

        if($('#formRegister input[name=name]').val() == ''){
            data = {
                username: $('#formRegister input[name=username]').val(),
                password: $('#formRegister input[name=password]').val()
            }
        } else {
            data = {
                username: $('#formRegister input[name=username]').val(),
                password: $('#formRegister input[name=password]').val(),
                name: $('#formRegister input[name=name]').val()
            }
        }



        $.ajax({
            method: "POST",
            url: kinveyBaseUrl + 'user/' + kinveyAppKey + '/',
            headers: kinveyAppAuthHeaders,
            data: JSON.stringify(data),
            success: registerUserSuccess,
            error: handleAjaxError
        })

        function registerUserSuccess(userInfo) {
            saveAuthInSession(userInfo)
            showHideMenuLinks()
            showHomeUserView()
            showInfo('User registration successful.')
        }

    }


    function saveAuthInSession(userInfo) {
        sessionStorage.setItem('username', userInfo.username)
        sessionStorage.setItem('authToken', userInfo._kmd.authtoken)
        sessionStorage.setItem('userId', userInfo._id)
        $('#loggedInUSer').text('Welcome, ' + userInfo.username)
    }


    function showInfo(msg) {
        $('#infoBox').text(msg)
        setTimeout(function () {
            $('#infoBox').fadeOut()
        }, 3000)
    }


    function handleAjaxError(response) {
        let errorMsg = JSON.stringify(response);
        if (response.readyState === 0)
            errorMsg = "Cannot connect due to network error.";
        if (response.responseJSON && response.responseJSON.description)
            errorMsg = response.responseJSON.description;
        showError(errorMsg);
    }

    function showError(errorMsg) {
        $('#errorBox').text('Error: ' + errorMsg)
        $('#errorBox').show()
    }


    function getKinveyUserAuthHeaders() {
        return {
            "Authorization": "Kinvey " + sessionStorage.getItem('authToken')
        }
    }

    function logoutUser() {
        $.ajax({
            method: "POST",
            url: kinveyBaseUrl + 'user/' + kinveyAppKey + '/_logout',
            headers: getKinveyUserAuthHeaders(),
            success: logoutSuccess,
            error: handleAjaxError
        })

        function logoutSuccess(){
            sessionStorage.clear()
            $('#loggedInUser').text('')
            showInfo('Logout successful.')
            showHomeAppView()
            showHideMenuLinks()
        }
    }


    function loginUser(event) {
        event.preventDefault()

        let userData = {
            username: $('#formLogin input[name=username]').val(),
            password: $('#formLogin input[name=password]').val()
        };

        $.ajax({
            method: "POST",
            url: kinveyBaseUrl + 'user/' + kinveyAppKey + '/login',
            data: JSON.stringify(userData),
            headers: kinveyAppAuthHeaders,
            success: loginUserSuccess,
            error: handleAjaxError
        })

        function loginUserSuccess(userInfo) {
            saveAuthInSession(userInfo)
            showHideMenuLinks()
            showHomeUserView()
            showInfo('Login successful.')
        }

    }

}