function alphabeticSort(a, b) {
	var aTitle = a.title.replace(/"|'/g, '');
	var bTitle = b.title.replace(/"|'/g, '');
	
	if (aTitle != bTitle) return aTitle > bTitle ? 1 : -1;
	if (a.category != b.category) return a.category - b.category;
	return 0;
}

function categorySort(a, b) {
	var aTitle = a.title.replace(/"|'/g, '');
	var bTitle = b.title.replace(/"|'/g, '');
	if (a.category != b.category) return a.category - b.category;
	if (aTitle != bTitle) return aTitle > bTitle ? 1 : -1;
	return 0;
}

function makeAnchor(str) {
	return str.replace(/[^A-Z0-9\-_]/ig, '');
}

function showAlphabetic() {
	var html = '';
	
	var terms = glossary.terms.sort(alphabeticSort);
	var sections = [];
	var section = '';
	
	for (var termI = 0; termI < terms.length; termI++) {
		firstChar = terms[termI].title.replace(/[^A-Z0-9]/ig, '').substring(0, 1);
		if (firstChar != section) {
			if (section != '') html += "</dl></div>";
			html += "<div id='section-" + firstChar + "' class='section'>";
			html += "<h2>" + firstChar + "</h2><dl>";
			section = firstChar;
			sections.push(firstChar);
		}
		
		html += "<dt>" + terms[termI].title;
		if (terms[termI].phonetic) html += " <span class='phonetic'>(" + terms[termI].phonetic + ")</span>";
		html += "</dt><dd>" + terms[termI].definition + "</dd>";
	}
	html += "</dl></div></dl>";
	
	var nav = "<ul id='glossaryNav' class='alpha'>";
	for (var i = 0; i < sections.length; i++) {
		nav += "<li><a href='#' onclick='showSection(\"" + sections[i] + "\"); return false;'>" + sections[i] + "</a></li>";
	}
	nav += "<li><a href='#' onclick='showSection(\"all\"); return false;'>show all</a></li>";
	nav += "</ul>";
	html = nav + html;
	
	$('glossaryTerms').update(html);
	showSection('all');
}

function showByCategory() {
	var html = '';
	
	html += "<ul id='glossaryNav' class='categories'>";
	for (var i = 0; i < glossary.categories.length; i++) {
		html += "<li><a href='#' onclick='showSection(\"" + makeAnchor(glossary.categories[i]) + "\"); return false;'>" + glossary.categories[i] + "</a></li>";
	}
	html += "<li><a href='#' onclick='showSection(\"all\"); return false;'>show all</a></li>";
	html += "</ul>";
	
	var terms = glossary.terms.sort(categorySort);
	var categories = [[],[],[],[]];
	var length = terms.length;
	for (var i = 0; i < length; i++)
		categories[terms[i].category].push(terms[i]);

	for (var catI = 0; catI < categories.length; catI++) {
		html += "<div id='section-" + makeAnchor(glossary.categories[catI]) + "' class='section'>";
		html += "<h2 class='glossarySectionHeading'>" + glossary.categories[catI] + "</h2>";

		terms = categories[catI].sort(alphabeticSort);
		html += "<dl>";
		for (var termI = 0; termI < terms.length; termI++) {
			html += "<dt>" + terms[termI].title;
			if (terms[termI].phonetic) html += " <span class='phonetic'>(" + terms[termI].phonetic + ")</span>";
			html += "</dt><dd>" + terms[termI].definition + "</dd>";
		}
		
		html += "</div>";
		html += "</dl>";
	}
	
	$('glossaryTerms').update(html);
	showSection('all');
}

function showSection(section) {
	$$('.filterSection').each(function(element) {
		element.removeClassName("filterSection");
	});
		
	$('glossaryTerms').removeClassName('filtered');
	
	if (section != 'all') {
		$('glossaryTerms').addClassName('filtered');
		$('section-' + section).addClassName('filterSection');
	}
}

showByCategory();