/**
 * Created by matthias on 17.11.16.
 */

var listTop = {};
var allGbEntries;
var vsrUrl = "";

window.onload = function () {
    // init. variables
    listTop =document.getElementsByTagName("ul")[0];
    vsrUrl = document.getElementsByTagName("form")[0].action;

    // onLoad event
    var xHttp = new XMLHttpRequest();

    xHttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // parse response from JSON in js object
            renderGbAtStart(JSON.parse(this.responseText));
        }
    };
    xHttp.open("GET", vsrUrl, true);
    xHttp.send();
}

function renderGbAtStart(gbObject) {
    allGbEntries = gbObject;

    // process the js object
    for (var i = 0; i < allGbEntries.length; i++) {
        var newItem = createGbEntry(allGbEntries[i]);
        listTop.insertBefore(newItem, listTop.childNodes[0]);
    }
}

function createGbEntry(jsObject) {
    var liEntry = document.createElement("li");
    var divName = document.createElement("div");
    var divText = document.createElement("div");
    var xHref = document.createElement("a");

    divName.innerHTML = jsObject.name;
    divName.style.fontWeight = "bold";
    divText.innerHTML = jsObject.text;
    xHref.innerHTML = "(X)";
    xHref.href = "#";
    xHref.alt = "Delete entry";
    xHref.addEventListener("click", function () {
        // remove childs
        while (liEntry.firstChild) {
            liEntry.removeChild(liEntry.firstChild);
        }
        // after that remove the parent node (li)
        listTop.removeChild(liEntry);
    });

    liEntry.appendChild(divName);
    liEntry.appendChild(divText);
    liEntry.appendChild(xHref);
    return liEntry;
}

@@ -261,16 +261,202 @@
 ction;%0A%0A
+    // event listener%0A    document.getElementsByTagName(%22button%22)%5B0%5D.addEventListener(%22click%22, function (event) %7B%0A            event.preventDefault();%0A            SubmitEntry();%0A    %7D);%0A%0A
     // o
@@ -823,22 +823,24 @@
 Start(gb
-Object
+Response
 ) %7B%0A    
@@ -856,22 +856,24 @@
 ies = gb
-Object
+Response
 ;%0A%0A    /
@@ -1561,30 +1561,425 @@
     
- //
  remove
- childs%0A    
+Element(liEntry, jsObject.id)%0A    %7D);%0A%0A    liEntry.appendChild(divName);%0A    liEntry.appendChild(divText);%0A    liEntry.appendChild(xHref);%0A    return liEntry;%0A%7D%0A%0Afunction removeElement(liEntry, id) %7B%0A    // delete entry from remote gb%0A    var idPara = %22id=%22 + id;%0A    var xHttpR = new XMLHttpRequest();%0A    xHttpR.open(%22DELETE%22, vsrUrl + %22?%22 + idPara, true);%0A    xHttpR.send();%0A%0A    // remove childs (%22local%22)%0A
     
@@ -2003,28 +2003,24 @@
 rstChild) %7B%0A
-    
         liEn
@@ -2060,26 +2060,18 @@
 d);%0A    
-    
 %7D%0A
-    
     // a
@@ -2108,20 +2108,16 @@
 de (li)%0A
-    
     list
@@ -2146,135 +2146,882 @@
 y);%0A
-    %7D);%0A%0A    liEntry.appendChild(divN
+%7D%0A%0Afunction SubmitEntry() %7B%0A    var nameV = document.getElementById(%22name%22).value;%0A    var textV = document.getElementById(%22text%22).value;%0A    var toSend =  %7B%22name%22:nameV, %22text%22:textV%7D;%0A%0A    // error cases%0A    if (nameV === %22%22) %7B%0A        alert(%22Please provide a n
 ame
+.%22
 );%0A    
-liEntry.appendChild(divText
+    return;%0A    %7D%0A    if (textV === %22%22) %7B%0A        alert(%22Please provide some text.%22);%0A        return;%0A    %7D%0A%0A    var xHttp = new XMLHttpRequest();%0A    xHttp.open(%22POST%22, vsrUrl, true);%0A    xHttp.setRequestHeader(%22Content-type%22, %22application/x-www-form-urlencoded%22
 );%0A
+%0A
     
-liEntry.appendChild(xHref);%0A    return liEntry
+xHttp.onreadystatechange = function () %7B%0A        if (this.readyState == 4 && this.status == 200) %7B%0A%0A            // append Entry%0A            // JSON.parse(this.responseText)%0A            var newItem = createGbEntry(toSend);%0A            listTop.insertBefore(newItem, listTop.childNodes%5B0%5D);%0A        %7D%0A    %7D;%0A%0A    xHttp.send(toSend)
 ;%0A%7D%0A

add delete funct. & correct display of new gb entries