/*  Jeremy's Magical Expanding Div Class
	By Jeremy Kahn
	jeremyckahn@gmail.com

	User manual:

	1.  Create the expandingDiv object in the document head, as follows:
		expandingDiv("idOfElementToExpandAndShrink", "idOfElementThatYouClickToControlTheExpandingOne", speedOfgrowth);
	2.  The third variable is optional and not a string like the first two.
	3.  Click the element specified in the first parameter, sit back and watch the magic.
	
	Note:  This file also require helperCode.js.  Be sure to include that when including this.
*/


// Helper function for getting the height of a collapsable div.
function getCurrentCollapsableDivHeight(theDiv)
{
	return parseInt(theDiv.style.height.split("px")[0]);
}

function expandingDiv()
{	
	// You can change this to whatever you please.  It is the default speed value 
	// if one is not given when the object is created.
	var growRate = 2;
	
	// Instance variables
	var theDiv = (arguments[0]);
	var divController = (arguments[1]);
	growRate = (arguments[2]) ? arguments[2] : growRate;
	var fullDisplayHeight;
	var growFunc;
	var shrinkFunc;
	
	// State vars
	var isGrowing = false;
	var isFullyGrown = false;
	var isShrinking = false;
	var isFullyShrunk = true;
	var isChanging = false;
		
	var loadEvent = function()
	{	
		restoreImageData();
		
		// Get the ID here, because it wasn't loaded before
		theDiv = document.getElementById(theDiv);
		divController = document.getElementById(divController);
		
		// Store the div's unadjusted height
		fullDisplayHeight = theDiv.offsetHeight;
		
		// Collapse the div
		theDiv.style.overflow = "hidden";
		theDiv.style.height = "0px";
		
		// Give growFunc and shrinkFunc unique names to be added to the document object
		growFunc = theDiv.id + "Grow";
		shrinkFunc = theDiv.id + "Shrink";
		
		// "Growing" function.
		// This line attaches the function to the document object to keep it in scope.
		document[growFunc] = function()
		{	
			var currHeight = parseInt(theDiv.style.height.split("px")[0]);
		
			growSpeed = ((fullDisplayHeight - theDiv.offsetHeight) * growRate/10) + 1;
			theDiv.style.height = (currHeight + parseInt(growSpeed) + "px");
			
			// If the div is finished expanding
			if (getCurrentCollapsableDivHeight(theDiv) >= fullDisplayHeight)
			{
				// Keeps the div from getting too big because of an overzealous growSpeed value
				theDiv.style.height = fullDisplayHeight + "px";
				
				isFullyGrown = true;
				isGrowing = false;
				isShrinking = false;
				isChanging = false;
			}
			
			if (theDiv.offsetHeight < fullDisplayHeight)
			{
				// 33 is 1000/30, or 30 frames per second.
				setTimeout("document." + growFunc + "()", 33);
			}
		};
		
		// "Shrinking" function.
		// This line attaches the function to the document object to keep it in scope.
		document[shrinkFunc] = function()
		{	
			var currHeight = getCurrentCollapsableDivHeight(theDiv);
		
			growSpeed = (currHeight * growRate/10) + 1;
			
			if (growSpeed > currHeight)
				growSpeed = currHeight;
			
			theDiv.style.height = (currHeight - parseInt(growSpeed) + "px");
			
			// If the div is finished shrinking
			if (getCurrentCollapsableDivHeight(theDiv) <= 1)
			{
				// Keeps the div from getting smaller than zero
				theDiv.style.height = "0px";
				
				isFullyShrunk = true;
				isGrowing = false;
				isShrinking = false;
				isChanging = false;
			}
			
			if (theDiv.offsetHeight > 0)
			{
				// 33 is 1000/30, or 30 frames per second.
				setTimeout("document." + shrinkFunc + "()", 33);
			}
		};
		
		// Set the onclick method for the div that acts as the controller
		divController.onclick = function()
		{	
			restoreImageData()
			
			if (!isChanging)
			{
				if (isFullyShrunk && !isGrowing)
				{
					if (theDiv.offsetHeight < fullDisplayHeight)
					{
						// Set the states and eval() the growFunc
						isGrowing = true;
						isChanging = true;
						eval("document." + growFunc + "();");
						return;
					}
				}
				
				if (isFullyGrown && !isShrinking)
				{
					if (theDiv.offsetHeight > 0)
					{
						// Set the states and eval() the shrinkFunc
						isShrinking = true;
						isChanging = true;
						eval("document." + shrinkFunc + "();");
						return;
					}
				}
			}
		};
	};
	
	// Tack on the above function onto the window's onload event
	addLoadEvent(loadEvent);
}