// Initializing userlist data array for storing information
var userListData = [];

// Actions to take once the DOM is loaded
$(document).ready(function() {

    // Fill the user table when the page first loads
    populateTable();

    // Handle click events on Username links
    $('#userList table tbody').on('click', 'td a.linkshowuser', showUserInfo);
    
    // Handle click events on Add User button
    $('#btnAddUser').on('click', addUser);

    // Handle click events on Delete User links
    $('#userList table tbody').on('click', 'td a.linkdeleteuser', deleteUser);

    // Set the default page to Home.html
    $('#content').load('views/home.html');

    // Call navBar function
    navBar();
    projectBtn();

});

// Custom Functions

// Navbar functionality
function navBar(){

$('ul#navtest li a').click(function(){
var page = $(this).attr('title');
$('#content').fadeOut(400);
setTimeout(function(){$('#content').load('views/' + page + '.html')}, 400);
$('#content').fadeIn(400);
return false;
});
}

function projectBtn(){

$('a.projectbutton').click(function(){
var page = $(this).attr('title');
$('#content').fadeOut(400);
setTimeout(function(){$('#content').load('views/' + page + '.html')}, 400);
$('#content').fadeIn(400);
return false;
});
}

// Populate table with data
function populateTable() {

    // Initialize content string
    var tableContent = '';

    // Fetch JSON data using jQuery AJAX
    $.getJSON( '/users/userlist', function( data ) {

    // Store user data array globally
    userListData = data;

        // Loop through JSON data and construct rows and cells for the table
        $.each(data, function(){
            tableContent += '<tr>';
            tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.username + '">' + this.username + '</a></td>';
            tableContent += '<td>' + this.email + '</td>';
            tableContent += '<td><a href="#" class="linkdeleteuser" rel="' + this._id + '">delete</a></td>';
            tableContent += '</tr>';
        });

        // Place the entire content string into the HTML table
        $('#userList table tbody').html(tableContent);
    });
};


// Show User Information
function showUserInfo(event) {

    // Prevent default link behavior
    event.preventDefault();

    // Get username from link's attribute
    var thisUserName = $(this).attr('rel');

    // Find index of object based on ID value
    var arrayPosition = userListData.map(function(arrayItem) { return arrayItem.username; }).indexOf(thisUserName);

    // Access the User Object
    var thisUserObject = userListData[arrayPosition];

    // Populate Info Box
    $('#userInfoName').text(thisUserObject.fullname);
    $('#userInfoAge').text(thisUserObject.age);
    $('#userInfoGender').text(thisUserObject.gender);
    $('#userInfoLocation').text(thisUserObject.location);

};


// Add User
function addUser(event) {
    event.preventDefault();

    // Simple validation - check if any fields are blank
    var errorCount = 0;
    $('#addUser input').each(function(index, val) {
        if($(this).val() === '') { errorCount++; }
    });

    // Validate and compile user info into an object
    if(errorCount === 0) {

        var newUser = {
            'username': $('#addUser fieldset input#inputUserName').val(),
            'email': $('#addUser fieldset input#inputUserEmail').val(),
            'fullname': $('#addUser fieldset input#inputUserFullname').val(),
            'age': $('#addUser fieldset input#inputUserAge').val(),
            'location': $('#addUser fieldset input#inputUserLocation').val(),
            'gender': $('#addUser fieldset input#inputUserGender').val()
        }

        // Send user object via AJAX to adduser service
        $.ajax({
            type: 'POST',
            data: newUser,
            url: '/users/adduser',
            dataType: 'JSON'
        }).done(function( response ) {

            // Check for success/error message
            if (response.msg === '') {

                // Clear form inputs
                $('#addUser fieldset input').val('');

                // Update the table
                populateTable();

            }
            else {
                alert('Error: ' + response.msg);
            }
        });
    }
    else {
        alert('Please fill in all fields');
        return false;
    }
};


// Delete User
function deleteUser(event) {

    event.preventDefault();

    // Confirm the deletion
    var confirmation = confirm('Are you sure you want to delete this user?');

    if (confirmation === true) {

        // Perform the deletion
        $.ajax({
            type: 'DELETE',
            url: '/users/deleteuser/' + $(this).attr('rel')
        }).done(function( response ) {

            if (response.msg === '') {
            }
            else {
                alert('Error: ' + response.msg);
            }

            // Update the table
            populateTable();

        });

    }
    else {
        return false;
    }

};

.border {
  border: 4px solid black; }

/* Other CSS rules go here */

.fill {
  height: 100%;
  width: 100%; }

/* Additional CSS classes and styles can be added */

<html>
<!-- This part has been abbreviated -->
  <body>
    <div id="project">
      <!-- Project-related content goes here -->
    </div>
  </body>
</html>