/*
	load the list and add action to the button
*/
window.onload = function () {
	load();
	$("add").onclick = add;
}

/*
	load the list by ajax request
*/
function load () {
	if (!$("loading")) {
		loading(true);
	}
	new Ajax.Request(
		"todolist.php",
		{
			method: "get",
			onSuccess: displayList
		}
	);
}

/*
	add a new item to the list with animation, then make an ajax
	request to update the server-side data
*/
function add () {
	loading(true);
	var value = $("item").value;
	$("item").value = "";
	var item = document.createElement("li");
	var close = document.createElement("img");
	close.src = "images/close.gif";
	item.textContent = value;
	item.appendChild(close);
	item.style.display = "none";
	$("list").appendChild(item);
	new Effect.BlindDown(item);
	stripes();
	
	new Ajax.Request(
		"todolist.php",
		{
			method: "post",
			parameters: {action: "add", item: value},
			onSuccess: load
		}
	);
}

/*
	remove the item of the specified index, then make an ajax
	request to update the server-side data
*/
function remove () {
	loading(true);
	new Effect.BlindUp($("item_" + this.id));
	stripes();
	
	new Ajax.Request(
		"todolist.php",
		{
			method: "post",
			parameters: {action: "delete", index: this.id},
			onSuccess: load
		}
	);
}


/*
	rearrange the order of items, then make an ajax
	request to update the server-side data
*/
function update () {
	loading(true);
	stripes();
	new Ajax.Request(
		"todolist.php",
		{
			method: "post",
			parameters: {action: "set", items: getList()},
			onSuccess: load
		}
	);
}

/*
	display a sortable list parsed from the ajax responseText,
	remove the loading indicator
*/
function displayList (ajax) {
	$("listarea").textContent = "";
	var list = document.createElement("ol");
	if (ajax.responseText != "") {
		var items = ajax.responseText.split("\n");
		for (var i = 0; i < items.length; i++) {
			var item = document.createElement("li");
			var close = document.createElement("img");
			close.src = "images/close.gif";
			close.id = i;
			close.onclick = remove;
			item.textContent = items[i];
			item.appendChild(close);
			item.id = "item_" + i;
			list.appendChild(item);
		}
	}
	list.id = "list";
	$("listarea").appendChild(list);
	Sortable.create("list", {onUpdate: update});
	stripes();
	loading(false);
}

/*
	toggle the loading indicator on the page
	disable and enable the button
*/
function loading (toggle) {
	if (toggle) {
		$("add").disabled = true;
		var indicator = document.createElement("img");
		indicator.src = "images/loading.gif";
		indicator.id = "loading";
		$("control").appendChild(indicator);
	} else {
		$("loading").remove();
		$("add").disabled = false;
	}
}

/*
	get the current list in text format
*/
function getList () {
	var items = $("list").childElements();
	var textItems = [];
	for (var i = 0; i < items.length; i++) {
		textItems[i] = items[i].textContent;
	}
	var text = textItems.join("\n");
	return text;
}

/*
	add alternating stripes to the list
*/
function stripes () {
	var items = $("list").childElements();
	var odd = true;
	for (var i = 0; i < items.length; i++) {		
		if (odd) {
			items[i].removeClassName("even");
			items[i].addClassName("odd");
		} else {
			items[i].removeClassName("odd");
			items[i].addClassName("even");
		}
		odd = !odd;
	}
}