$(document).ready(function()
{
	// In order to show categories opened when printed (medium=print), the hiding process
	// is a little more complicated than a simple .hide(). We use classes and need
	// to make sure the element style attribute is removed every time.

	// If JS enabled, hide all questions within categories and all answers below the questions
	// All that don't have class "faq-category-open" or "faq-question-open" that is.
	$(".faq-category").parent().next().not(".faq-category-open").addClass("hidden");
	$(".faq-question").next().not(".faq-question-open").addClass("hidden");
	
	// Also, if param to hide category headings was set, hide the headings aswell.
	$(".faq-category-hidden").addClass("hidden");

	// On click on a category header
	$(".faq-category").click(function(){
		// Turn arrow of all non-clicked categories to point right.
		// Hide all categories and questions that are not within the clicked category.
		$(this).parent().parent().find('.faq-category').not(this).removeClass('expanded').parent().next().slideUp("slow", function(){ $(this).addClass("hidden").removeAttr("style"); }).find('.faq-question').next().slideUp("slow", function(){ $(this).addClass("hidden").removeAttr("style"); });

		// Turn arrow of clicked category to point down.
		// Show the clicked category content.
		$(this).blur().addClass('expanded').parent().next().css("display", "none").removeClass("hidden").slideDown();

	});

	// On click of a question
	$(".faq-question").click(function(){
		// Hide all answers of questions that were not clicked now.
		// The callback function in slideUp() is in place to make the style switch synchroneous.
		// This part must be called AFTER the slideUp().
		$(this).parent().find('.faq-question').not(this).next().slideUp("slow", function(){ $(this).addClass("hidden").removeAttr("style"); });
		
		// Show the one answer that was clicked.
		$(this).blur().next().css("display", "none").removeClass("hidden").slideDown();
	});

});