////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// JScript File encapsulates the functionality for showing/hiding a details section
// It uses the functionality in jQuery library to show/hide a paragraph section
// NOTE: the elements need to be build based on a set of rules (see documentation for details)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function()
{			
	var aReadMore = null;	// Array holding all the span elements with "read-more" class
	
	// Find all "read-more" elements and set the text to the custom attribute "textShow"
	aReadMore = $(document).find("span.read-more");
	
	for (var i=0; i<aReadMore.length; i++)
	{
		$(aReadMore[i]).text($(aReadMore[i]).attr("textShow"));
	}
	
	// Hide all paragraph elements having class "details"
	$("div.details").hide("slow");
	
	
	// Attach onclick event handler to all span elements having class "read-more"
	$("span.read-more").click(function(event){ToggleDetails(event, this)});
	
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	// Name        : ToggleDetails
	// Description : Depending on the state of the details paragraph, it hides or shows it
	// Parameters  : 
	//				event = current event associated with the element clicked
	//				elem = current element being clicked
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	function ToggleDetails(event, elem)
	{
		var sibling = null;		// Sibling element - this is the targeted paragraph element
		
		if (elem == null) { return false; }
		
		sibling = $(elem).next("div.details");
		
		if (sibling == null) { return false; }
		
		// If targeted paragraph is hidden then show it, otherwise hide it
		if ($(sibling).is(":hidden"))
		{					
			$(sibling).show("slow");
			
			// Set the span element text to the value of attribute "textHide"
			$(elem).text($(elem).attr("textHide"));
		}
		else
		{
			$(sibling).hide("slow");
			
			// Set the span element text to the value of attribute "textShow"
			$(elem).text($(elem).attr("textShow"));
		}
	}			
});