var faqBrowser = {
	navItems: Object,
	navListItems: Object,
	sections: Object,
	init: function() {
		this.navItems = $("#faqNav a");
		this.navListItems = $("#faqNav li");
		this.sections = $("#faqSections div");

		this.sections.css("display", "none");

		this.navItems.click(function() {
			faqBrowser.navListItems.each(function() { $(this).removeClass("On"); });
			faqBrowser.sections.each(function() { $(this).css("display", "none"); });

			$(this).parent().addClass("On");

			var id = $(this).attr("id");
			id = id.substring(0, id.indexOf("NavItem"));

			$("#" + id).css("display", "block");

			// this unfortunately seems to need to happen on click for the correct color to appear in the nonactive element.
			Cufon.replace(".Swiss", { fontFamily: "Swiss 721", hover: true });

			return false;
		});
	}
}

function initializeFaqBrowser() {
	faqBrowser.init();
}

$(function() {
	initializeFaqBrowser();
});