$(document).ready(function(){

	//initial formatting
	
	$('#viewdifferentfaqs').hide();
	$('#faqs').hide();
	$('#loadingmessage').hide;
	
	// onclick faqbutton	
	$('.faqbutton a').click(function() {
		$('#faqheader').hide();						   
		$('#faqlist').fadeOut(5);
		$('#faqlist').slideUp("slow");
		$('#loadingmessage').empty();
		$('#loadingmessage').css({'padding-top': '30px', 'padding-bottom': '15px'});
		$('#loadingmessage').append("<img src=\"images/ajax-loader.gif\" >");
		$('#loadingmessage').show();
		
		//get the link that has been clicked
		var ClickedLink = $(this).attr("href");
			
		//remove the first slash to get the drupal path
		var AjaxLink = ClickedLink + '?component=1';
		//get content for the button that has been clicked						   
		var buttonPressed = $(this).attr("class");
		var buttonPressedArray = [];
        buttonPressedArray.push({name: buttonPressed, value: 1});
		$("#faqs").load( AjaxLink, buttonPressedArray , function() { onLoadFaqs() }   );	
		
		return false;
	});
	
	//onclick viewdifferentfaqs
	$('#viewdifferentfaqs a').click(function() {
		$('#viewdifferentfaqs').hide();
		$('#faqs').hide();
		$('#faqlist').fadeIn(1000);
		return false;
	});




});

//hide the faq answers, and bind click function of the headers to toggle the next paragraph, then fade em in
	onLoadFaqs = function() {
		$('#loadingmessage').hide();
		$('#rightcontent #faqs p').hide();
		
		$('#viewdifferentfaqs').fadeIn(1000);
		$('#faqs').fadeIn(1000);		
		$('#rightcontent #faqs h3').click(function() {
		
			//remove classes from all the paragraphs
			var notanswer = $(this).siblings();
			notanswer.removeClass();
			
			//get answer paragraph to show
			var answer = $(this).next();
			
			
			
			
			//add a class to our clicked item to identify it
			//would be better to use an equivalence test with answer to test if the paragraph is the clicked item
			answer.addClass("clicked");
			
			//toggle display of the clicked faq
			if (answer.is(':visible')) {
				answer.slideUp();			
			} else {
				answer.slideDown();
			};
			
			//go through each sibling, test if it is the clicked item, if not slide it up if it is visible
			$(this).siblings("p").each(function(i){
				var thisClass = $(this).attr("class");
				if (thisClass != "clicked" ){
					if ($(this).is(':visible')) {
						$(this).slideUp();
					};
				}; 
			}); 
		}
	);
	
 };