console.clear();

var $formAddTask = $('#form-add-task'),
	$modalAddTask = $('#modal-window'),
	$taskList = $('#task-list');

function addTask(task, id) {
	var $listGroup = $taskList.find('[data-status="' + task.status + '"]').find('.list-group');

	var $btnDelete = $('<button>').addClass('btn btn-danger btn-xs pull-right delete-task').append('<span class="glyphicon glyphicon-remove">');

	$('<li>').addClass('list-group-item').text(task.title).attr('data-id', id).append($btnDelete).appendTo($listGroup);
}

$formAddTask.on('submit', function(event) {
	event.preventDefault();

	var task = {
		title: $(this).find('[name=title]').val(),
		description: $(this).find('[name=description]').val(),
		status: 2                // 1- todo, 2 - in progress, 3 - completed
	};

	var id = new Date().getTime();
	localStorage.setItem(id, JSON.stringify(task));   // записать это туда
	addTask(task, id);
	$modalAddTask.modal('hide');

	this.reset();  // возвращает форму к виду к котором она определена в хтмл (очистка формы)

})

$taskList.on('click', '.delete-task', function() {  // вешаем обработчик клик на кнопку delete-task
	var $parent = $(this).parent();   // вызываем родителя
	var taskId =  $parent.data('id');
	localStorage.removeItem(taskId);
	$parent.remove();
});

;(function() {    // самовызывающаяся функция которая перебирает и рисует li на странице динамически
	for (var key in localStorage) {
		var task = JSON.parse(localStorage[key]);
		addTask(task, key);
	}	
})();