function getData(uuid){
    $.getJSON('http://localhost:8097/mock/json', function(json) {
       fillStaticFields(json[0].clientUUID
                        , json[0].mockedResponseId
                        , json[0].mediaType
                        , json[0].messageBody
                        , json[0].httpStatus);
       fillHeaderTable(json[0].httpHeaders);

    });
}

function fillStaticFields(uuid, id, mediaType, body, httpStatus){
    $('#messageLink').html(createLink(uuid,id));
    $('#typeSelector').val(mediaType);
    $('#bodyEditor').html(body);

    //TODO: HttpStatus
}

function createLink(uuid, id){
    var link = 'http://localhost:8097/klaus/v1/'+uuid+'/'+id;
    return link;
}

function fillHeaderTable(headers){
    var innerHTML = $('#headerTable').html();
    innerHTML += generateHeaderTable(headers);
    $('#headerTable').html(innerHTML);
}

function generateHeaderTable(headers){
    let count = 0;
    let innerHTML = '';
    for(var item in headers){
        if( headers.hasOwnProperty(item) ) count++;
    }
    var keys = new Array(count);
    var values = new Array(count);
    let index = 0;
    for(var key in Object.keys(headers)){
        keys[index++]=Object.keys(headers)[key];
    }
    index = 0;
    for(var val in headers){
        values[index++]=headers[val];
    }
    for(let i=0; i<count; i++){
        innerHTML+=
            '<tr>' +
                '<td class="headerName">' + keys[i] + '</td>' +
                '<td class="headerField">' + values[i] + '</td>' +
            '</tr>';
    }
    return innerHTML;
}

$(document).ready(getData());