var addTask = absolutely nothing! =/

//Problem: user interaction doesn't provide desired results
//Solution: add interactivity so the user can manage daily tasks

var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0]; //first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks

//New task List Item
var createNewTaskElement =  function(taskString) {
  //create listItem
  var listItem = document.createElement("li");

  //input (checkbox)
  var checkBox = document.createElement("input"); //checkbox

  //label
  var label = document.createElement("label");

  //input (text)
  var editInput = document.createElement("input");  //text

  //button .edit
  var editButton = document.createElement("button") //edit

  //button .delete
  var deleteButton = document.createElement("button") //delete

  //each element needs modifying

  checkBox.type = "checkbox";
  editInput.type = "text";

  editButton.innerText = "Edit";
  editButton.className = "edit";
  deleteButton.innerText = "Delete";
  deleteButton.className = "delete";

  //each element needs appending
  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);
  return listItem;
}

//Add a new task
var addTask = function() {
  console.log("Add task...");
  //create new li with text from #new-task
  var listItem = createNewTaskElement(taskInput.value);  
  //append listItem to incompleteTaskHolder
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

//Edit existing task
var editTask = function() {
  console.log("Edit task...");
  //when edit button is pressed
    //if class of parent is .editMode
      //switch from .editMode
      //label text become the input's value
    //else
      //switch to .editMode
      //input value becomes label's text
}

//Delete existing task
var deleteTask = function() {
  console.log("Delete task...");
  var listItem = this.parentNode;
  var ul = listItem.parentNode;

  //remove parent li from ul
  ul.removeChild(listItem);


}

//Mark task as complete
var taskCompleted = function() {
  console.log("Task completed...");
  //append task li to #completed-tasks
  var listItem = this.parentNode;
  completedTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
}

//Mark task as incomplete
var taskIncomplete = function() {
  console.log("Task incomplete...");
  //append task li to #incomplete-tasks
  var listItem = this.parentNode;
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind task events...");
//select taskListItem's children
  var checkBox = taskListItem.querySelector("input[type=checkbox]");
  var editButton = taskListItem.querySelector("button.edit") ;
  var deleteButton = taskListItem.querySelector("button.delete");

  //bind editTask to edit button
  editButton.onclick = editTask;

  //bind deleteTask to delete button
  deleteButton.onclick = deleteTask;

  //bind checkBoxEventHandler to checkbox
  checkBox.onchange = checkBoxEventHandler;

}

//Set the click handler to the addTask function
addButton.onclick = addTask;

//cicle over incompleteTasksHolder ul items
for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
  //bind events to li's children (taskCompleted)
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}


//cicle over completedTasksHolder ul items
for(var i = 0; i < completedTasksHolder.children.length; i++) {
  //bind events to li's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}