// Simple Spoiler Functions
// by Tyler Spaulding
// http://www.arguingwithmyself.com/
//
// If you're ever writing a movie review or anything with content you initially
// want hidden from the reader, this is a simple way to do it.  Just include
// this script and wrap the content in a div with class="spoiler".
//
// Reccommended CSS selectors:
//
// /* Use to style the spoiler container */
// .spoiler
// {
// }
//
// /* Use for the toggle link */
// .spoilerlink
// {
// }
//
// /* Use to style the spoiler content */
// .spoilervisible
// {
// }
//
// /* Use to hide the spoiler content */
// .spoilerhidden
// {
//  display: none;
// }
//
//
// And you might want to remove these comments to save a few bytes.  I'd
// appreciate if you left my name though!

// This is a common function you've probably seen before
// It's not really part of the spoiler code, but it's a required function
// Here, it's used to grab all divs with a class of 'spoiler'
function getElementsByClassName(tag, className)
{
	var tags;
	var rettags = new Array();
	if (tag == "*") tags = document.all;
	else tags = document.getElementsByTagName(tag);
	var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
	for (var i = 0; i < tags.length; i++)
	{
		if (regex.test(tags[i].className))
		{
			rettags.push(tags[i]);
		}
	}
	return rettags;
}


/* Beginning of spoiler code
Takes all divs with class of "spoiler" and adds a toggler to show and hide


<div class="spoiler">foo</div>

becomes

<div class="spoiler">
	<a id="spoilertoggleon#" class="spoilervisible">Show spoiler</a>
	<a id="spoilertoggleoff#" class="spoilerhidden">Hide spoiler</a>
	<div id="spoilercontent#" class="spoilerhidden">foo</div>
</div>
*/

function InitSpoilers()
{
	// find all spoilers
	var spoilers = getElementsByClassName("div", "spoiler");

	// loop through _backwards_
	// Must go backwards to handle nested spoilers.  The procedure involves
	// replacing the contents of each div with a copy of the entire div.  If
	// a spoiler is nested, it must be handled before the outer spoiler.
	for (var i = spoilers.length; i-- > 0;)
	{
		// copy the entire div 
		var spoilercontent = spoilers[i].cloneNode(true);
		//spoilercontent.className = "spoilerhidden";
		spoilercontent.id = "spoilercontent" + i;
		// create toggle links
		var toggleon = document.createElement("a");
		//toggleon.className = "spoilerlink spoilervisible";
		toggleon.id = "spoilertoggleon" + i;
		toggleon.appendChild(document.createTextNode("Show spoiler"));
		toggleon.href = "javascript: ShowSpoiler(" + i + ");";
		var toggleoff = document.createElement("a");
		//toggleoff.className = "spoilerlink spoilerhidden";
		toggleoff.id = "spoilertoggleoff" + i;
		toggleoff.appendChild(document.createTextNode("Hide spoiler"));
		toggleoff.href = "javascript: HideSpoiler(" +i + ");";
		// clear contents
		while (spoilers[i].hasChildNodes())
		{
			spoilers[i].removeChild(spoilers[i].childNodes[0]);
		}
		// reinsert contents and links
		spoilers[i].appendChild(toggleon);
		spoilers[i].appendChild(toggleoff);
		spoilers[i].appendChild(spoilercontent);
		HideSpoiler(i);
	}
}

function ShowSpoiler(i)
{
	document.getElementById("spoilertoggleon" + i).className = "spoilerlink spoilerhidden";
	document.getElementById("spoilertoggleoff" + i).className = "spoilerlink";
	document.getElementById("spoilercontent" + i).className = "spoilervisible";
}

function HideSpoiler(i)
{
	document.getElementById("spoilertoggleon" + i).className = "spoilerlink";
	document.getElementById("spoilertoggleoff" + i).className = "spoilerlink spoilerhidden";
	document.getElementById("spoilercontent" + i).className = "spoilerhidden";
}

window.onload=InitSpoilers;