$(document).ready(function() {
	var wiki = new Wiki();
	wiki.updateCategories();
	wiki.registerQuery();
	wiki.registerDisplay();
	wiki.addListDecor();
});

function Wiki() {
	
	this.updateCategories = function() {
		$("#categories .category .title").each(function() {
			var name = $(this).html();
			var id = $(this).attr("category");
			$(this).css("display", "none")
			       .after('<a class="category-handle" category="' + id + '" href="javascript:void(0)">' + name + '</a>');
		});
	}
	
	this.registerQuery = function() {
		var wiki = this;
		$("#categories .category .category-handle").click(function() {
			var id = $(this).attr('category');
			$("#categories").attr('selected', id);
			var display = $("#search #selected-category");
			display.empty();
			var first = true;
			$(this).parents(".category").each(function() {
				if (first) first = false;
				else display.prepend(" | ");
				var link = $(this).children(".info").children(".category-handle");
				display.prepend(link.clone(true).get(0));
			});
			wiki.query(wiki);
		});
		$("#search #keyword").keyup(function() {
			wiki.query(wiki);
		});
	}
	
	this.query = function(wiki) {
		$("#item-list").html('<img src="images/loading.gif" />');
		$("#item-detail").html('<img src="images/loading.gif" />');
		var category = $("#categories").attr('selected');
		var keyword = $("#keyword").val();
		var url = "inc_item_query.php?keyword=" + keyword;
		if (category) url += "&category=" + category;
		$("#item-list").load(url, '', function() {
			var count = $("#item-list .item").length;
			$("#item-count").text(count);
			wiki.registerDisplay();
			// add decoration on list
			wiki.addListDecor();
			// load the first item detail
			$("#item-list .item .item-handle:first").click();
		});
	}
	
	this.registerDisplay = function() {
		$("#item-list .item .item-handle").click(function() {
			$("#item-detail").html('<img src="images/loading.gif" />');
			var itemId = $(this).attr('item');
			var url = "inc_item.php?item=" + itemId;
			$("#item-detail").load(url);
		});
	}
	
	this.addListDecor = function() {
		$("#item-list .item:odd").css("background-image", "url(images/normal-bg.jpg)");
	}
}