/*
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('Read More...');	// create new text saying 'Read More>>>'
				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('....Hide');	// 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('Read More...');	// 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","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);
}