var tasks = [];
var element;

window.onload = function() {
    var arr = document.cookie.split(",");
    //console.log(arr);
    for (var i = 0; i < arr.length; i++) {
        if (arr == "") break;
        addTask(arr[i]);
        tasks[tasks.length] = arr[i];
    }
    console.log(tasks);
    //console.log(document.cookie);
};

function buttonClicked() {
    console.log("buttonClicked function called"); // For debugging purposes
    var userInput = document.getElementById("userInput").value;
    if (userInput === "") {
        alert("You can't add nothing to the list!");
    } else {
        tasks[tasks.length] = userInput;
        console.log(tasks.length);
        console.log(tasks);

        addTask(userInput);

        var cookie = document.cookie = tasks;
        console.log(cookie);
    }
};

function addTask(task) {
    var taskPara = document.createElement("div");
    var newTask = document.createTextNode(task);
    var button = document.createElement("button");
    button.innerHTML = "Delete";

    for (var i = 0; i < tasks.length; i++) {
        button.id = i;
        console.log(button.id);
    }

    button.onclick = function() {
            console.log("delete task"); // debugging
            alert("delete button clicked");
            removeTask(button.id);
    };

    taskPara.appendChild(newTask);

    element = document.getElementById("list");
    element.appendChild(taskPara);
    taskPara.appendChild(button);
};

function removeTask(buttonId) {
    console.log("removeTask");
    console.log(buttonId);
    element.removeChild(element.childNodes[0]);
};