// Requires general.js
// Requires animation.js

function showHelpBox ()
{
	var helpBox = id("help");
	var helpLink = id("helpButton").childNodes[0];

	var duration = 0.8;
	if ( ! helpBox.open )
	{
		
		if (helpBox.timeout)
		{
			clearTimeout(helpBox.timeout);
			helpBox.removeAttribute("timeout");
		}
		
		// Firefox has a redraw bug when border radius is used in animation of only one dimension.
		// Making the width change slighty (but not too slightly) is enough to force Firefox to redraw the edges correctly.
		var widthAnimation = { attribute: "width",
								startValue: null,
								endValue: 228.2,
								unit: "px" };
		helpBox.style.height = "auto";
		var helpBoxHeight = getElementSize(helpBox).height;
		helpBox.style.height = "0px";
		var heightAnimation = { attribute: "height",
								startValue: null,
								endValue: helpBoxHeight + 10,
								unit: "px" };
		helpLink.style.backgroundPosition = "right -24px";
		helpBox.open = true;
		helpBox.style.visibility = "visible";
		animateAttributes( helpBox, [ widthAnimation, heightAnimation ], duration, "ease-in" );
	}
	else
	{
		var widthAnimation = { attribute: "width",
								startValue: null,
								endValue: 228,
								unit: "px" };
		var heightAnimation = { attribute: "height",
								startValue: null,
								endValue: 0,
								unit: "px" };
		// Internet Explorer won't give back control of the background position to the style sheet so we must explicitly state background position.
		// All the other browsers will recognize setting the value to null.
		var onFinish = function () { helpBox.style.visibility = "hidden"; helpLink.style.backgroundPosition = "right top"; helpLink.style.backgroundPosition = null; };
		helpBox.open = false;
		animateAttributes( helpBox, [ widthAnimation, heightAnimation ], duration, "ease-in", null, onFinish );
	}
	
	return false;
}


function helpSetup ()
{
	var helpLink = id("helpButton").childNodes[0];
	if (helpLink)
	{
		helpLink.onclick = showHelpBox;
	}
}