/*
* @author Bedrich Rios 
* @version 1.0
*
* equal_height_columns is a script which matches the height of any given ID. 
* How it works: simply add a "<meta name="equal_height_ids" content=" 1stID 2ndID . . . ">" tag 
* in the head of your html with the elements (IDs) you wish to match in height. 
*/

/*
* retrieveIds Loops through all the meta tags until it finds the one with "equal_height_ids" as its
* name. Then, it puts its content in an array. If the IDs given in the meta tag do not 
* exist, they will not be included in the array. 
* @return finalIdsArray An array containing the IDs contained in the meta content.
*/
function retrieveIds()
{
	var metas = document.getElementsByTagName("meta"); 
	var idsArray;

	// retrieves the "equal_height_ids" meta data tag 		
	for(var x=0; x<metas.length; x++)
		if(metas[x].getAttribute("name")=="equal_height_ids")
			var ids = metas[x].getAttribute("content");
					
	var tempIdsArray = ids.split(" ");
	var finalIdsArray = [];
	var arrayCount = 0;
	
	// stores existing (only) ID elements into an array		
	for(var x=0; x<tempIdsArray.length; x++)
	{
		if(document.getElementById(tempIdsArray[x])!=undefined)
		{
			finalIdsArray[arrayCount] = tempIdsArray[x];
			arrayCount++;
		}
	}
			
	return finalIdsArray;
}
	
/*
* match Loops through a group of IDs, determines the max height and sets it for all of them. 
* @param idArray An array containing the IDs to be match.
*/
function match(idArray)
{
	var max_height = 0;
	var temp_height = 0;
	var div;
		
	for(var x=0; x<idArray.length; x++)
	{	
		div = document.getElementById(idArray[x]);
		temp_height = div.offsetHeight;
		max_height = Math.max(temp_height,max_height);
		div.style.height = 'auto';
	}
		
	for (var x=0; x<idArray.length; x++) 
	{
		div = document.getElementById(idArray[x]);
		div.style.height = max_height+'px';
			
		if (div.offsetHeight > max_height) 
			div.style.height = (max_height-(div.offsetHeight-max_height))+'px';
	}
}

/*
* matchColumns retrives the IDs to be match in height and matches them. 
*/	
function matchColumns()
{
	var ids = retrieveIds();
	match(ids);	
}

// Initialize Scripts - is this a browser that understands DOM?
function scriptInit() 
{
	if (!document.getElementById) 
		return;
}

// Set up Event Listener - the script that allows us to use the addEvent call below
function addEvent(elm, evType, fn, useCapture) 
{
	if (elm.addEventListener) 
	{
		elm.addEventListener(evType, fn, useCapture);
		return true;
	} 
	else if (elm.attachEvent) 
	{
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	} 
	else 
		elm['on' + evType] = fn;
}

/*
	Fire Events - you can add other scripts here and call them using the following method.  
	This one balances the columns when the page loads, and again when the window is resized
	Some have asked about users changing text size, because this script won't fire and your page can look weird.  If you were resizing text via a script, we could run this script when the user calls that script.  However, if you're relying on browser methods for text resizing, I'm not aware of a method to watch for that kind of an event.  If someone smarter than me knows of one, please let me know!  If you don't understand what I mean, then pretend I didn't say anything...
*/

addEvent(window, 'load', matchColumns, false);
addEvent(window, 'resize', matchColumns, false);