/*********************************************
CITES Show-Hide Toggle Script - 1-30-08, Dena Strong (dlstrong@uiuc.edu)

(Revised from Dec. 07 version due to discovery of an IE7-specific JavaScript bug that required a new version of GetElementsByClass. Changed the "hide" mechanism from pure "hide" to "far off the left edge of the window" for higher accessibility, though some toggles with REALLY REALLY LONG paragraphs may need to have the paragraphs broken up so the words don't creep back onto the page at the end. Also changed .uiuc.edu image file references to .illinois.edu.)

Windows: Firefox 3, IE7, Safari
Mac: Firefox 3, Safari

W3C compliant

SAMPLE HTML CODE:
-----------------
Show/hide all:
----------------
<a href="javascript:cssToggleAll('AllOn')">Show all FAQs</a> |
<a href="javascript:cssToggleAll('Off')">Outline view</a>

Question/answer or show/hide image:
--------------------------------------
<p><a href="javascript:cssToggle('tog_##')" id="tog_##" class="tog_collapse" style="text-decoration:none;">
  <span class="tog_text">Toggle text ##</span>
</a></p>
<p>
<div id="div_tog_##" class="div_tog_hidden">Div text</div>
</p>

The word or number used in the place of ## has to be identical in 3 places: 
1) the javascriptToggle variable
2) the link ID
3) following div_ in the div ID

You can change the images that are used (or swap in text) by changing the contents of the background-image line in the tog_hidden and tog_visible classes.

You can change the names of the classes that are used to identify the toggle states (visible or hidden) by making a new instance of this script and altering these  global variables:
str_ToggleOnClass 	
str_ToggleOffClass 	
str_DivOnClass 	
str_DivOffClass 

You can also change the div ID naming structure if you wish, by changing the value of the global variable str_DivIDPrefix.


*********************************************/

var str_ToggleOnClass 	= 'tog_expand';
var str_ToggleOffClass 	= 'tog_collapse';
var str_DivOnClass 	= 'div_tog_visible';
var str_DivOffClass 	= 'div_tog_hidden';
var str_DivIDPrefix = 'div_';
var str_AllTogglesOn	= 'AllOn'

// ------ Styles that make things appear and vanish -----------------

		document.writeln('<style type="text/css">');

		// -- style to wrap around the toggle text to push it in from the toggle image
		document.writeln('.tog_text {padding-left: 20px; text-decoration:underline;}');

		// -- change background-image to change the toggle image used
		document.writeln('.' + str_ToggleOnClass + '{background-repeat: no-repeat; background-position: left center; background-image: url("http://www.cites.illinois.edu/graphics/minus.gif"); text-decoration:none;}');

		// -- change background-image to change the toggle image used
		document.writeln('.' + str_ToggleOffClass + '{background-repeat: no-repeat; background-position: left center; background-image: url("http://www.cites.illinois.edu/graphics/plus_.gif"); text-decoration:none;}');

		// -- styles to show and hide the contents of the div
		document.writeln('.' + str_DivOnClass + ' {display: normal;}');
		document.writeln('.' + str_DivOffClass + ' {position: absolute; left: -40000px;}');

		// -- style to overwrite the default image padding on the standard template's content area
		document.writeln('#content img {padding: 0em !important;}');

		document.writeln('</style>');


// -------- Toggle one item ----------------------------------------

function cssToggle(toggleID) {
	var togElement = document.getElementById(toggleID);
	var divElement = document.getElementById("div_" + toggleID);

	if (togElement.className == str_ToggleOffClass) {
		togElement.className = str_ToggleOnClass; 
		divElement.className = str_DivOnClass;	
	} else {
		togElement.className = str_ToggleOffClass;
		divElement.className = str_DivOffClass;			
		
	}
}

// -------- GetElementsByClassName tool for cssToggleAll -----------------------------
/* The old version was a document prototype extension that broke in IE7. 
This version by Dustin Diaz is a function instead, and it works on all the platforms mentioned at the top of the script. -January 09, DLS */

	function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}

	
	
// --------- Toggle all items  -----------------------------------
function cssToggleAll(toggleType) {
	var arrTogglesOn;
	var arrTogglesOff;
	var arrDivsOn;
	var arrDivsOff;
	
	arrTogglesOn = getElementsByClass(str_ToggleOnClass);
	arrTogglesOff = getElementsByClass(str_ToggleOffClass);
	arrDivsOn = getElementsByClass(str_DivOnClass);
	arrDivsOff = getElementsByClass(str_DivOffClass);

	if (toggleType == str_AllTogglesOn) { 
	
		for(var ii=0, il=arrTogglesOff.length; ii<il; ii++)
			{ 
			//loop through toggles that are Off 
			if (arrTogglesOff[ii].className == str_ToggleOffClass)
				{
				// change each hidden toggle to visible
				arrTogglesOff[ii].className = str_ToggleOnClass;
				// also change all hidden divs to visible
				arrDivsOff[ii].className = str_DivOnClass;
				}
			}
	} else { // if toggleType is not "AllOn," then it must be toggling everything off
		for(var ii=0, il=arrTogglesOn.length; ii<il; ii++)
			{ 
			//loop through toggles that are On 
			if (arrTogglesOn[ii].className == str_ToggleOnClass)
				{
				// change each visible toggle to hidden
				arrTogglesOn[ii].className = str_ToggleOffClass;
				// also change all visible divs to hidden
				arrDivsOn[ii].className = str_DivOffClass;
				}
			}
	}

}




/******************************************************************************
ARCHIVAL VERSION

Version 1.0, involving spans and manually swapped images. Deprecated by the new version and is kept here only for backwards compabibility until everything can be updated to the new version. --DLS

Working sample of the old code:

(ALL)
<a name="top"></a>
<a href="javascript:citesToggleAll('All')">
Show all FAQs</a> 
| 
<a href="javascript:citesToggleAll('None')">
Outline view</a> 

(Block with toggle)

<p> 
<a href="javascript:citesToggle('img_##','tog_##')" class="noline"> 
<span id="img_##" class="tog_img"> <img src="http://www.cites.uiuc.edu/graphics/plus_.gif" border=0 alt="Expand section" /> 
</span> </a>

<a href="javascript:citesToggle('img_##','tog_##')"> 
Show image of ## window </a> </p>
<div id="tog_##" class="tog_hidden"> 
</div>



*********************************************/

// ------ Global variables ------------------------------------------

var g_sObjWrapType		= 'div';
var g_sImgWrapType		= 'span';
var g_sAllSectionsId	= 'All';
var g_sExpandImage = '<img src="http://www.cites.uiuc.edu/graphics/plus_.gif" border=0 alt="Expand section">';
var g_sCollapseImage = '<img src="http://www.cites.uiuc.edu/graphics/minus.gif" border=0 alt="Collapse section">';
var g_sTogVisibleClass 	= 'tog_visible';
var g_sTogHiddenClass 	= 'tog_hidden';
var g_sTogImageClass	= 'tog_img';

// ------ Styles that make things appear and vanish -----------------

		document.writeln('<style type="text/css">');
		document.writeln('.' + g_sTogVisibleClass + ' {display: normal;}');
		document.writeln('.' + g_sTogHiddenClass + ' {display: none;}');
		document.writeln('#content img {padding: 0em !important;}');
	//	document.writeln('.noline {text-decoration: none;}');
		document.writeln('</style>');


// -------- Toggle one item ----------------------------------------

function citesToggle(imageID,toggleID) {
		var linkElement = document.getElementById(imageID);
		var itemElement = document.getElementById(toggleID);
		linkElement.innerHTML = itemElement.className == g_sTogHiddenClass ? g_sCollapseImage : g_sExpandImage;
		itemElement.className = itemElement.className == g_sTogVisibleClass ? g_sTogHiddenClass : g_sTogVisibleClass;
	}


// --------- Toggle all items  -----------------------------------
function citesToggleAll (toggleType)
{
	var arrayObjects;
	var arrayImages;

	arrayObjects	= document.getElementsByTagName(g_sObjWrapType);
	arrayImages	= document.getElementsByTagName(g_sImgWrapType);
		
	if (toggleType == g_sAllSectionsId) 
	{ 
		
		for(ii = 0; ii < arrayObjects.length; ii++)
			{ 
			//loop through arrayObjects that are toggle classes and change each hidden item to visible
			if (arrayObjects[ii].className == g_sTogHiddenClass)
				{			
				arrayObjects[ii].className = g_sTogVisibleClass;
				}
			}
		// make all toggle images minus since the toggles are uncollapsed during show all
		for(nn = 0; nn < arrayImages.length; nn++)
			{ 
			//check that you're only changing spans that wrap an image with the toggle_img class
			if (arrayImages[nn].className == g_sTogImageClass) 
				{
				arrayImages[nn].innerHTML = g_sCollapseImage;
				}		
			}
	} else { // if toggleType is not "All"
		// set them all to Hidden and make the images Plus
		for(ii = 0; ii < arrayObjects.length; ii++)
			{ 
			//loop through arrayObjects that are toggle classes and change each visible item to hidden
			if (arrayObjects[ii].className == g_sTogVisibleClass)
				{			
				arrayObjects[ii].className = g_sTogHiddenClass;
				}
			}
		// set all toggle images to the expand image when everything is collapsed
		for(nn = 0; nn < arrayImages.length; nn++)
			{ 
			//check that you're only changing spans that wrap an image with the toggle_img class
			if (arrayImages[nn].className == g_sTogImageClass) 
				{
				arrayImages[nn].innerHTML = g_sExpandImage;
				}		
			}
	}
}