/*
	Coder: Victoria Chan (http://blog.victoriac.net)
	Date: 03-11-06
	Note: A very simple unobtrusive JS show/hide 
	Requires: YUI events, dom (http://developer.yahoo.com/yui/)
*/

// shortcuts for convenience
var $D = YAHOO.util.Dom;
var $E = YAHOO.util.Event;
var $ = $D.get; // get element by ID

// Vars for this file
var this_cssName = '/exec/data/common/css/showHide';//CSS filename, without extension
var this_showhideParentID = 'content'; //parent id, to narrow getElementsByClassName search
var this_showhideClassName = 'answer'; //class name of the elements that are hidden
var this_classNameForShown = 'shownAnswer'; //class name to add to the show/hide element when it is shown

/*--------------------------------------------------------------------------------------------
	Actions
----------------------------------------------------------------------------------------------*/

// on load
$E.addListener(window,'load',initShowHide);

//init function
function initShowHide(){	
	//load CSS
	loadCSS(this_cssName);	

	//add showHide actions to class
		//only add show/hide actions when styles are not disabled, since the script relies on it
	if ($(this_cssName).disabled == false)
	{	
		//this function can also be called multiple times for multiple classes
		addShowHideActionToClass(this_showhideParentID, this_showhideClassName);
	}
}


/*------------------------------------------------------------------
	Main Functions
-----------------------------------------------------------------*/
function addShowHideActionToClass(theParent, theClassname){
	var arr_hiddenElements = $D.getElementsByClassName(theClassname, '', theParent);
	//generate id for the hidden elements if none given
	$D.generateId(arr_hiddenElements, theClassname + '_');
	
	//process each venue to add button actions
	for (i=0; i< arr_hiddenElements.length; i++){
		addShowHideButtons(arr_hiddenElements[i].id);
	}
}

function addShowHideButtons(theElementID){
	//make the show button
	var showButt = document.createElement('a'); 
		showButt.href = '#'+theElementID;
		showButt.id = 'show_' + theElementID;
		showButt.className = 'answerButtonShow show';
		showButt.innerHTML = 'Show Answer(s)';
		$(theElementID).parentNode.insertBefore(showButt, $(theElementID));
		
	//make the hide button
	var hideButt = document.createElement('a'); 
		hideButt.href = '#'+theElementID;
		hideButt.id = 'hide_' + theElementID;
		hideButt.className = 'answerButtonHide hide';
		hideButt.innerHTML = 'Hide Answer(s)';
		$(theElementID).parentNode.insertBefore(hideButt, $(theElementID));	
		
	//Add button actions
	$E.addListener(showButt, 'click', showContent, showButt, true);
	$E.addListener(hideButt, 'click', hideContent, hideButt, true);
}

function showContent(e, obj){
	var theHiddenElementId = obj.id.replace('show_','');
	var theShowButtId = 'show_' + theHiddenElementId;
	var theHideButtId = 'hide_' + theHiddenElementId;

	//show the div
	$D.addClass($(theHiddenElementId), this_classNameForShown);
	
	//hide the 'show' button
	$D.addClass($(theShowButtId), 'hide');
	$D.removeClass($(theShowButtId), 'show');
	
	//show the 'hide' button
	$D.addClass($(theHideButtId), 'show');
	$D.removeClass($(theHideButtId), 'hide');
	
	$E.stopEvent(e); //so that the browser window won't move, equiv of 'return false'
}

function hideContent(e, obj){
	var theHiddenElementId = obj.id.replace('hide_','');
	var theShowButtId = 'show_' + theHiddenElementId;
	var theHideButtId = 'hide_' + theHiddenElementId;
	
	//show the div
	$D.removeClass($(theHiddenElementId), this_classNameForShown);
	
	//show 'show' button
	$D.addClass($(theShowButtId), 'show');
	$D.removeClass($(theShowButtId), 'hide');
	
	//hide 'hide' button
	$D.addClass($(theHideButtId), 'hide');
	$D.removeClass($(theHideButtId), 'show');
	
	$E.stopEvent(e); //so that the browser window won't move, equiv of 'return false'
}


/*------------------------------------------------------------------
	Load CSS for this JS 
	
	(To make sure all hidden elements are well hidden before page load, 
	and yet NOT hidden if JS is disabled. Great idea by Natalie Downe.)
-----------------------------------------------------------------*/
function setCSS(css) {
	try {
		// append stylesheet to alter
		document.getElementsByTagName("head")[0].appendChild(css);
	} catch (e) {
		setTimeout(function(){setCSS(css)}, 100);
	}
}
function loadCSS(cssName){
	// create CSS element to set up the page
	var js_css = document.createElement("link");
	js_css.setAttribute("href", cssName+".css");
	js_css.setAttribute("rel","stylesheet");
	js_css.setAttribute("type","text/css");
	js_css.id = cssName;
	
	// attempt to add the css and then keep trying till we do
	setCSS(js_css);
	js_css = null;
}