$(document).ready(onLoad);

// once the document is loaded
function onLoad() {

	// hide the results and inactive pages for now
	$("#results").hide();
	$("#detect-body").hide();
	$("#recent-body").hide();
	$("#stats-body").hide();
	
	// menu handlers
	$("#about-menu").click(aboutMenuClicked);
	$("#detect-menu").click(detectMenuClicked);
	$("#recent-menu").click(recentMenuClicked);
	$("#stats-menu").click(statsMenuClicked);
	$("#subscribe-menu").click(subscribeMenuClicked);

	// when the detect button is clicked or return is hit in the text box do stuff
	$("#detect").click(detectClicked);
	$("#name").keyup(function(e) { if (e.keyCode == 13) detectClicked() });

	// clear button handler
	$("#clear").click(clearClicked);
}

// menus have been clicked
function aboutMenuClicked() {
	hideAllBodies();
	$("#about-body").show();
}

function detectMenuClicked() {
	hideAllBodies();
	$("#detect-body").show();
}

function recentMenuClicked() {
	$.get("recent.php", { count: "10" }, function(xml) { recentsRetrieved(xml) }, "xml");
}

function statsMenuClicked() {
	$.get("top.php", { count: "10" }, function(xml) { topRetrieved(xml) }, "xml");
}

function subscribeMenuClicked() {
	window.location.href="rss.xml";
}

function hideAllBodies() {
	$("#about-body").hide();
	$("#detect-body").hide();
	$("#recent-body").hide();
	$("#stats-body").hide();
}

// detect has been clicked
function detectClicked() {
	// query the detector
	$.get("detect.php", { name: $("#name").attr("value") }, function(xml) { detectionRetrieved(xml) }, "xml");
}

// clear has been clicked
function clearClicked() {

	// hide the results
	$("#results").hide();

	// show the question
	$("#question").show();

	// wipe the text box
	$("#name").attr("value", "");
}

// the requested detection XML has been received
function detectionRetrieved(xml) {

	// there is, of course, only one of these nodes
	root = $("detection", xml);
	name = root.find("name").text();
	normalizedName = root.find("normalized-name").text();
	humanNumber = root.find("human-number").text();
	designation = root.find("designation").text();

	// show the results div
	$("#results").show();
	$("#human-text").hide();
	$("#beast-text").hide();
	$("#christ-text").hide();

	// hide the question div
	$("#question").hide();

	// set context of various node in the HTML
	$("#result-name").html(name);
	$("#normalized-name").html(normalizedName);
	$("#human-number").html(humanNumber);

	if (designation == "Human") {
		$("#human-text").show();
	} else if (designation == "Beast") {
		$("#beast-text").show();
	} else if (designation == "Christ") {
		$("#christ-text").show();
	}
}

function recentsRetrieved(xml) {

	// find the table and empty it
	table = $("#recent-list");
	$(table).find("tbody").empty();

	// parse some xml
	$("detection", xml).each(function(i) {

		// get all the fields we care about
		name = $(this).find("name").text();
		normalizedName = $(this).find("normalized-name").text();
		humanNumber = $(this).find("human-number").text();
		designation = $(this).find("designation").text();
		when = $(this).find("when").text();

		// build the row
		row = '<tr><td align="left">' + name + '</td><td>' + normalizedName + '</td><td>' + humanNumber + '</td><td>' + designation + '</td><td>' + when + '</td></tr>';

		// add the row
		table.children("tbody").append(row);
	});

	// show the recent page
	hideAllBodies();
	$("#recent-body").show();
}

function topRetrieved(xml) {

	// get the distribution as well
	$.get("distribution.php", {}, function(xml) { distributionRetrieved(xml) }, "xml");

	// find the tables
	beastTable = $("#top-beast-list");
	christTable = $("#top-christ-list");
	humanTable = $("#top-human-list");
	everyoneTable = $("#top-list");

	// find the xml node for those tables
	var beastNode, christNode, humanNode, everyoneNode;

	$("top-detections", xml).each(function(i) {
		designation = $(this).find("designation:first").text();
		if (designation == "Beast") {
			beastNode = this;
		} else if (designation == "Christ") {
			christNode = this;
		} else if (designation == "Human") {
			humanNode = this;
		} else if (designation == "Everyone") {
			everyoneNode = this;
		}
	});

	// call populate tables for each designation
	populateTopTable(beastTable, beastNode);
	populateTopTable(christTable, christNode);
	populateTopTable(humanTable, humanNode);
	populateTopTable(everyoneTable, everyoneNode);
}

function populateTopTable(table, node) {

	$(table).find("tbody").empty();

	// parse some xml
	$(node).find("detection").each(function(i) {

		// get all the fields we care about
		rank = $(this).find("rank").text();
		normalizedName = $(this).find("normalized-name").text();
		humanNumber = $(this).find("human-number").text();
		designation = $(this).find("designation").text();
		total = $(this).find("total").text();
		percent = $(this).find("percent").text();

		// round the percent
		percent *= 100;
		percent = percent.toFixed(1);

		// build the row
		row = '<tr><td align="left">' + rank + '</td><td align="left">' + normalizedName + '</td><td>' + humanNumber + '</td><td>' + designation + '</td><td>' + total + '</td><td>' + percent + '%</td></tr>';

		// add the row
		table.children("tbody").append(row);
	});

}

function distributionRetrieved(xml) {

	// find the table and empty it
	table = $("#distribution-list");
	$(table).find("tbody").empty();

	// parse some xml
	$("distribution", xml).each(function(i) {

		// get all the fields we care about
		designation = $(this).find("designation").text();
		total = $(this).find("total").text();
		percent = $(this).find("percent").text();

		// round the percent
		percent *= 100;
		percent = percent.toFixed(1);

		// build the row
		row = '<tr><td align="left">' + designation+ '</td><td>' + total + '</td><td>' + percent + '%</td></tr>';

		// add the row
		table.children("tbody").append(row);
	});

	// show the stats page
	hideAllBodies();
	$("#stats-body").show();
}