/*

Written by Steve Tucker, 2006

http://www.stevetucker.co.uk



I have heavily commented the prepareHiddenInformation function to help you understand its mechanics.

If you are new to Javascript and particularly programming languages in general then you may still

find it all somewhat confusing - but don't give up! These things take time to learn, and once you

have done so you will be an all round stronger programmer for it :)



For best legibility set your tab size to 8 spaces when reading the contents of this document.

*/



function prepareHiddenInformation() {

	if (!document.getElementsByTagName) return false;	// Checks to make sure this function exists. Halts execution of script if not

	if (!document.getElementById) return false;	// Checks to make sure this function exists. Halts execution of script if not

	if (!document.getElementsByClassName('hidden_content')) return false;	// Checks to make sure this function exists. Halts execution of script if not

	

	var $hidden_content_boxes = document.getElementsByClassName('hidden_content');	// Gets list of all elements with class of 'hidden_content'

	for (var $i=0; $i<$hidden_content_boxes.length; $i++) {	// loops through the whole list...

		var $hidden_content_box = $hidden_content_boxes[$i];	// allocates each element to a variable (for easier reading)

		

		var $link = document.createElement('a');	// creates the toggle action link

		$link.onclick = function() {	// give the link an action when it is clicked. This action is as follows:

			if (this.getAttribute('status') == 'open') {	// if the link has a 'status' (internal variable) of 'open' the continue to close it, otherwise skip next 9 lines

				$hidden_content_box_id = this.getAttribute('rel');	// get the id of the box to be hidden from the link which has been clicked (each link is associated to a box)

				$hidden_content_box = document.getElementById($hidden_content_box_id);	// get the actual element to be hidden by its ID

				$hidden_content_box.style.display = 'none';	// give this element a CSS declaration of display:none; to hide it

				

				this.setAttribute('status','closed');	// update the link's status variable to 'closed'

				var $old_text = this.childNodes[0];	// get the old text (within the link element)

				this.removeChild($old_text);	// delete this old link text

				var $text = document.createTextNode('More Information >>>');	// create new text saying 'More Information >>>'

				this.appendChild($text);	// Insert the new text within the link element

			}

			else {	// if the link does not have a 'status' (internal variable) of 'open' then it must be closed already. Continue to open it, otherwise skip next 9 lines

				$hidden_content_box_id = this.getAttribute('rel');	// get the id of the box which is no longer to be hidden from the link which has been clicked (each link is associated to a box)

				$hidden_content_box = document.getElementById($hidden_content_box_id);	// get the actual element no longer to be hidden by its ID

				$hidden_content_box.style.display = 'block';	// give this element a CSS declaration of display:block; to show it

				

				this.setAttribute('status','open');	// update the link's status variable to 'open'

				var $old_text = this.childNodes[0];	// get the old text (within the link element)

				this.removeChild($old_text);	// delete this old link text

				var $text = document.createTextNode('Less Information <<<');	// create new text saying 'Less Information <<<'

				this.appendChild($text);	// Insert the next text within the link element

			}

		}



		$link.setAttribute('title','Information');	// Give the link a non-specific title attribute

		$link.className = 'information_link';	// Give the link a class (for CSS styling)

		var $hidden_content_box_id = 'hidden_content'+$i;	// Create unique string 'hidden_content#' where '#' represents a unique integer and assign it to a variable

		$hidden_content_box.setAttribute('id',$hidden_content_box_id);	// Set the unique ID of the content as the unique value (above).

		$link.setAttribute('rel',$hidden_content_box_id);	// Set the 'rel' attribute with the same unique ID as above. This creates our associative connection between the link and the box it controls.

		var $text = document.createTextNode('More Information >>>');	// Create a text string 'More Information >>>'. This will act as a default link text when inserted into the link (below)

		$link.appendChild($text);	// Set the link text from the string (above)

		var $parent = $hidden_content_box.parentNode;	// Get the content box's parent element and assign it to a variable

		$parent.insertBefore($link,$hidden_content_boxes[$i]);	// Insert the link into the parent element, directly before the content box which will be hidden

	}

}





// Executes the prepareHiddenInformation function when page loads

window.onload = function() {

	prepareHiddenInformation();

}





// Function to return a list of elements with a specific class attribute

document.getElementsByClassName = function($class) {

	var $results = Array();

	var $elements = document.getElementsByTagName("*");

	for (var $i=0; $i<$elements.length; $i++) {

		var $classes = $elements[$i].className.split(" ");

		for (var $j=0; $j<$classes.length; $j++) {

			if ($classes[$j] == $class) {

				$results[$results.length] = $elements[$i];

			}

		}

	}

	return $results;

}





// In order to pass the safety checks this section must appear AFTER the getElementsByClassName function (above)

if (document.getElementsByTagName && document.getElementsByClassName) {

	// Create a link to the Javascript-only stylesheet, which will primarily hide the hidden text

	var $link_element = document.createElement('link');

	$link_element.setAttribute("rel","stylesheet");

	$link_element.setAttribute("href","css/javascript_only.css");

	$link_element.setAttribute("media","screen");

	

	// Append this stylesheet link to the document

	var $head_element = document.getElementsByTagName('head')[0];

	$head_element.appendChild($link_element);

}