/* 
copyright 2006 Dylan Marks - dioramadesign.net
This class toggles a set of questions and answers, so that the answers will not be visible until clicking on the question.
In order to use this, give an element the class 'Question' and a following element the class 'Answer'.  When clicking the Question, it will toggle the display of the following Answer. 

If you provide a div with the class 'QA_toolbar', this will be populated with all of the extra buttons.

Requires prototype and scriptaculous 1.5+ librairies



TODO 
autogenerate buttons?
The following could be a drop list or something with three options:
add show answers 
add hide answers 
add space for written answers button.

add print button.
*/

var QuestionAnswers = {
  version: '1.0',
  _showAllAnswersState: "visible",
  initialize: function() {
	$$('.Question').each(
		function(question)
		{
			Event.observe(question, 'click', this.questionClick.bindAsEventListener(this, question));
		}.bind(this));
	
	
	$$('.QA_Toolbar').each(
		function(toolbar)
		{
			//we want to add a button inside this div and set their events.
			//note we do this in a loop in case we wanted to have a toolbar in different places
			this.addToolbarButtons(toolbar);
		}.bind(this));
	
	this.toggleAllAnswers();

  },
  addToolbarButtons: function(toolbar)
  {
  	  new Insertion.Top(toolbar, ' <a href="/study-questions" title="return to main contents">Back to Study Questions Main Page</a><br /><span class="instructions">Click individual questions to display the answer.</span> ');

	  new Insertion.Bottom(toolbar, ' <a href="#" title="click to show/hide answers." class="toggleAnswersBtn">Show All Answers</a> ');
	  $$('.QA_Toolbar .toggleAnswersBtn').each(
		 function(button)
		 {
			Event.observe(button, 'click', this.toggleAllAnswers.bindAsEventListener(this));
		 }.bind(this));
//	  new Insertion.Top(toolbar, 
	  
  },
  toggleAllAnswers: function(e)
  {
	  //first show or hide all the answers  
	  $$('.Answer').each(
		function(answer)
		{
			if (this._showAllAnswersState == "visible") {
				answer.addClassName('AnswerHidden');
				new Effect.BlindUp(answer, {
					duration: 0.3
				}); //queue: {position:'end',  scope: 'toggle'}
			}
			else {
				answer.removeClassName('AnswerHidden');
				new Effect.BlindDown(answer, {
					duration: 0.3
				});
			}
		}.bind(this));

	  
	  //now toggle the state and the text of the button
	  var buttonText;
	  if (this._showAllAnswersState == "hidden")
	  {
	  	this._showAllAnswersState = "visible";		
		buttonText = "Hide All Answers";
	  }
	  else
	  {
		this._showAllAnswersState = "hidden";
		buttonText = "Show All Answers";
	  }

	  
	  $$('.QA_Toolbar .toggleAnswersBtn').each(
		 function(button) {
			button.firstChild.nodeValue = buttonText;
		 }.bind(this));

  },
  questionClick: function(e, question)
  {
	 //now need to find the following answer. Need to walk up the hierarchy if the element is not the actual question element
	 var nextElement = question;
	 var boolFound = false;
	 while(!boolFound)
	 {
		 nextElement = nextElement.next();
		 
		 if (Element.hasClassName(nextElement, "Answer"))
		 {
			boolFound = true;
			
			if (nextElement.hasClassName("AnswerHidden"))
				nextElement.removeClassName('AnswerHidden');
			else
				nextElement.addClassName('AnswerHidden');
				
			new Effect.toggle(nextElement, 'blind', {duration:0.3}); //queue: {position:'end',  scope: 'toggle'}
		 }
		 if (nextElement.nodeName == "body") 
			boolFound = true;
	 }
  }
  
 /*, hideAllAnswers: function()
  {
	  //toggleAllAnswers(new Event(), boolShow);
  }*/
}
Event.observe(window, "load", function() { QuestionAnswers.initialize(); });