/*
 * Add functionality to create collapsable content container
 * 
 */ 
$(document).ready(function() {

	// search for container element
	var outerContainer = $('#help-troubleshooting-transcript');
	var contentContainer = $('#help-troubleshooting-transcript-content');
	if (!outerContainer || !contentContainer) return false;
	
	// create strings for link text
	var openText = 'Open the transcript';
	var closeText = 'Close the transcript';
	
	// create collapsable links above and below main content
	var topLink= $('<p id="collapsable-top-link" class="collapsable-link"><a href="#">'+openText+'</a></p>');
	var bottomLink = $('<p id="collapsable-bottom-link" class="collapsable-link"><a href="#">'+closeText+'</a></p>');
	
	// add the links to the correct part of the collapsable container
	outerContainer.prepend(topLink);
	contentContainer.append(bottomLink);
	
	// retrieve the container height, for later use
	var transcriptHeight = contentContainer.height();

	// collapse (hide) the collapsable area by default, to be opened by javascript
	outerContainer.addClass('collapsed');
	
	// add collapsable links to array for later iteration
	var collapsableLinks = [];
	collapsableLinks.push(topLink);
	collapsableLinks.push(bottomLink);
	
	// add click listeners for each link
	$(collapsableLinks).each(function(counter) {
		collapsableLinks[counter].click(function(event){
						
			// stop the link refreshing the page
			event.preventDefault();
			
			// condition : check for disabled class, check whether the collapse is currently animating, to stop clashes
			if (!topLink.hasClass("disabled")) {
			
				// set a variable to stop clashes
				topLink.addClass("disabled");
			
				// condition : content container is currently hidden
				if (outerContainer.hasClass('collapsed')) {
					
					// update text links
					topLink.find('a').text(closeText);
					outerContainer.removeClass('collapsed');
					
					// expand container
					contentContainer.css({
						height:0 // set explicit starting height for first run, to stop content appearance
					}).animate({
						height:transcriptHeight
					},500,function(){
						// on complete, remove class to stop clashes
						topLink.removeClass("disabled");
					});
				
				// condition : content container is currently shown
				} else {

					// update text links
					topLink.find('a').text(openText);
					outerContainer.addClass('collapsed');
					
					// collapse container
					contentContainer.animate({
						height:0
					},500,function(){
						// on complete, remove class to stop clashes
						topLink.removeClass("disabled");
					});
				}
			}
		});
	});
});