//////////////////////////////////////////////////////////////////////////////
// If a visitor has JavaScript disabled or unavailable, the hidden content box
// will simply display itself as if it was always a visible component.
//
// CONTRIBUTORS:
//
// Original Creator:
//     Paul Hirsch
//     www.paulhirsch.com
// Other Contributors:
//     Michaeljohn Clement - clued me in on offsetHeight - very handy!
//     [INSERT YOUR NAME AND BRIEF DESCRIPTION OF YOUR CONTRIBUTION HERE]
//
// INSTRUCTIONS:
//
// 1.  Place this markup in an external .js page and link to it within the
//     <head> section of your page.
//
// 2.  Create a div within your page to wrap around the content you wish to hide.
//     You'll place your hidden content in here. The div MUST be in the following
//     format: <div id="foo-#" class="hidden">, where:
//
//     a. "foo" is any word of your choice.
//     b. "-#" is any number between "-1" and "-9".
//     c. class ALWAYS equals "hidden". 
//
//     The "-#" sets the speed at which the box shows/hides itself, with 1
//     being slowest and 9 fastest.  If you forget to add your speed number
//     or add it incorrectly, the script will default to 5.
//     
//     Here's a proper example:
//     <div id="login-7" class="hidden">
//        [The stuff you want to show/hide]
//     </div>
//
// 3.  Add onclick="toggle();" and id="toggle" to whatever element you'd like
//     to use to toggle the hidden content box.  MAKE THE TOGGLED
//     OBJECT/TEXT/BUTTON display:none WITHIN YOUR STYLESHEET!  The script will
//     unhide it.  This is so it will not show up when someone has JavaScript
//     disabled.
//
//     Here's a proper example:
//     <input type="button" id="toggle" onclick="toggle();" value="ON/OFF" />
//
// 4.  Add onload="setup();" to your <body> tag.
//
//////////////////////////////////////////////////////////////////////////////

var Hide = "";
var varHt = 0;
var Ht = "";
var x = 0;
var y = 10;
var z = 4;
var foo = new Array();
var Speed = "";

function setup() {
	foo = document.getElementsByTagName("div");
	for (i=0;i<foo.length;i++) {
		if (foo[i].className == "hidden") {
			Hide = foo[i].id;
		}
	}
	Ht = document.getElementById(Hide).offsetHeight;
	Speed = Hide.substring(Hide.lastIndexOf('-')+1);
	document.getElementById(Hide).style.height = '0px';
	document.getElementById('toggle').style.display = 'inline';
	
	if (Speed == 1) { y = 100; z = 1; }
	if (Speed == 2) { y = 70; z = 1; }
	if (Speed == 3) { y = 40; z = 1; }
	if (Speed == 4) { y = 20; z = 1; }
	if (Speed == 5) { y = 10; z = 1; }
	if (Speed == 6) { y = 10; z = 2; }
	if (Speed == 7) { y = 10; z = 4; }
	if (Speed == 8) { y = 10; z = 7; }
	if (Speed == 9) { y = 10; z = 10; }
}

function toggle() {
	if (x === 0) {
		document.getElementById(Hide).style.height = varHt+'px';
		if (((Ht-varHt) < z) && (varHt !== Ht)) {
			varHt = Ht;
		} else {
			varHt = varHt+z;
		}
		if (varHt <= Ht) {
			setTimeout('toggle()',y);
		}
		if (varHt > Ht) {
			varHt = Ht;
			x = 1;
		}
	} else {
		document.getElementById(Hide).style.height = varHt+'px';
		varHt = varHt-z;
		if ((Ht-varHt) <= Ht) {
			setTimeout('toggle()',y);
		}
		if ((Ht-varHt) > Ht) {
			varHt = 0;
			document.getElementById(Hide).style.height = varHt+'px';
			x = 0;
		}
	}
}
