/*=====================================================================*\
|									|
| 1) create an HTML element with a unique .id				|
|    and assign it a .class containing "reveal".			|
|	<div id="stuff" class="reveal">stuff to be revealed</div>	|
|									|
| 2) create a trigger element to call the routine "reveal",		|
|    passing the id of the element to be revealed.			|
|	<button onclick="reveal('stuff')">show/hide</button>		|
|	or								|
|	<a href="javascript:;" onclick="reveal('stuff')"></a>		|
|									|
\*=====================================================================*/

var revealers = new Array;	//a place to store the active elements
var revealSpeed = 10;

function Revealer(tag, index, callBack)	//the class that does the work
	{
	this.tag	= tag;
	this.largest	= tag.clientHeight;
	this.inc	= 0;
	this.direction	= 0;
	this.index	= index;
	this.doneClass	= "";
	this.pending	= null;
	this.callBack	= callBack;
	this.reveal	= revealSpeed;
	// revealSpeed is used as a percentage (i.e. 1-100%)
	if (this.reveal <   1) this.reveal = 1;
	if (this.reveal > 100) this.reveal = 100;

	this.grow	= function ()
				{
				this.doneClass		= "revealed";
				this.direction		= 1;
				this.curr		= 1;
				// removed for CQ 26533
				// this.tag.style.height	= this.curr + "px";
				this.tag.style.overflow	= "hidden";
				this.pending = window.setTimeout("revealers[" + this.index + "].more();", 1);
				}
	this.shrink	= function ()
				{
				this.doneClass		= "reveal";
				this.direction		= -1;
				this.curr		= this.largest;
				this.tag.style.height	= this.curr + "px";
				this.tag.style.overflow	= "hidden";
				this.pending = window.setTimeout("revealers[" + this.index + "].more();", 1);
				}
	this.more	= function()
				{
				if (this.pending == null)return;
//				if (this.largest == 0)
					{
					this.tag.style.overflow	= "visible";
					this.largest		= this.tag.clientHeight;
					this.tag.style.overflow	= "hidden";
					}
				this.inc = Math.floor(this.largest * (this.reveal/100));
				this.curr += (this.inc * this.direction);
				if (this.curr > this.largest) this.curr = this.largest;
				if (this.curr < 1) this.curr = 1;
				this.tag.style.height = this.curr + "px";
				if (this.curr < this.largest && this.curr > 1)
					this.pending = window.setTimeout("revealers["+ this.index + "].more();", 1);
				else
					{
					this.pending		= null;
					this.tag.style.overflow	= "visible";
					this.tag.className	= this.tag.className.replace(/revealing/, this.doneClass);
					revealers[this.index]	= null;
					var purge = true;
					for (x = 0; x < revealers.length; x++)
						if (revealers[x] != null)
							{
							purge = false;
							break;
							}
					if (purge == true)
						revealers = new Array;
					if (this.callBack && typeof(this.callBack) == "function")
						this.callBack();
					}
				}
	}

//oops();
//var xx = 1;

function reveal(tag, callBack)	//the function that starts the ball rolling
	{
	//the 3 css "class" states are:
	//	o reveal	can't be seen
	//	o revealing	in the processing of showing or hiding
	//	o revealed	can be seen

	//tag can be a tag's Id or the tag element itself
	if (typeof(tag) == "string")	tag = document.getElementById(tag);
	if (typeof(tag) != "object")	return;


	//we don't play with moving targets
	var revealer;
	if (tag.className.indexOf("revealing") != -1) return;

//	if (tag.className.indexOf("revealing") != -1)
//		{
//		for(var x = 0; x < revealers.length; x++)
//			{
//			revealer = revealers[x];
//			if (revealer == tag) break;
//			}
//		}
//	else
		{
		revealer = new Revealer(tag, revealers.length, callBack);
		revealers[revealers.length] = revealer;
		}

	if (tag.className.indexOf("revealed") != -1 || (tag.className.indexOf("revealing") != -1 && revealer.direction == 1))
		{
		tag.className = tag.className.replace(/revealed/, "revealing")
		revealer.shrink();
		}
	else
		{
		tag.className = tag.className.replace(/reveal/, "revealing")
		revealer.grow();
		}
	}