var choice ='';
const ul = $('#data');


const getDataFromServer = function(){
    choice = $(this).attr('value');
    const link = "http://localhost:3000/"+ choice;
    showWindow();
    $.ajax({
        url:link,
        type: 'get'
    }).done(handleChoice);
};

const showWindow = function(){
  if(choice == "schools"){$('#editor').fadeIn();}
  else{$('#editor').fadeOut();}
};

const handleChoice = function(data){
    ul.html('');
    for(var element in data){
        addLi(data[element]);
        if(choice == "schools"){
            ul.append(
            "<input type='button' value='Update'>" +
            "<input type='button' value='Delete'>");
        }
    }
};

const showForm = function () {
    $('#data').slideUp();
    $('#new').slideDown();
};

const getDeeper = function (obj) {
    string ='';
    for(var item in obj){string += item +":" + obj[item] + "<br>";}
    return string;
};

const addLi = function(element){
    ul.append("<ul>");
    for(var property in element){
        var string = '';
        var obj = element[property];
        if(obj instanceof Object){string = property + getDeeper(obj);}
        else{string = property + ":" + element[property] }
        $('#data').append("<li>"+string+"</li>");
    }
    ul.append("</ul>");
};

$(function(){
    test();
    $(".button-collapse").sideNav();
    $("#options").on('change',getDataFromServer);
    $("ul li").on('click',getDataFromServer);
    $('#newSchool').on('click',showForm);


});