/* 
	by Paul@YellowPencil.com and Scott@YellowPencil.com
	feel free to delete all comments except for the above credit
*/

// Initialize Scripts - is this a browser that understands DOM?

var ColumnSizer={
	scriptInit:function() {
		if (!document.getElementById) {
			return false;
		}else{
			return true;
		}
	},

// Set up Event Listener - the script that allows us to use the addEvent call below

	addEvent:function(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;
		}
	},
	
	$:function() {
		var elements = new Array();
		for (var i = 0; i < arguments.length; i++) {
			var element = arguments[i];
			if (typeof element == 'string'){
				if(document.getElementById(element)){
					element = document.getElementById(element);
				}
			}
			if (arguments.length == 1){
				if (typeof element == 'object'){
					return element;
				}else{
					return false;
				}
			}
			if (typeof element == 'object'){
				elements.push(element);
			}
		}
		return elements;
	},

	// Start Column Script

	setTallTop:function(){
		var divs ="";
		if (ColumnSizer.$('topContentLeftLeft')){
			divs = ColumnSizer.$('topContentLeftLeft','topContentLeftRight','topContentRight');
		}else{
			if (ColumnSizer.$('topContentLeft')){
				divs = ColumnSizer.$('topContentLeft','topContentRight');
			}
		}
		if (divs != "")	ColumnSizer.setTall(divs);
	},

	setTallMiddle:function(){
		var divs = "";
		var respectHeadline = false;
		
		if (ColumnSizer.$('middleContentLeftLeft')) {
		  
		  // special treatment in this case, if we have top content subboxes, same reason as for "setTallTopContent"
		  if (ColumnSizer.$('contentboxTopLeft_leftArea')) {
		    // first make sure all elements needed are present
		    var boxLL = ColumnSizer.$('middleContentLeftLeft');
    	  var boxLR = ColumnSizer.$('middleContentLeftRight');
    	  var boxR = ColumnSizer.$('middleContentRight');
    	  var boxTR = ColumnSizer.$('contentboxTopRight');
    	  if (!boxLL || !boxLR || !boxR ||!boxTR) { return; }
    	  
    	  // get maximum height of cols involved, but add the top content box size to cols on the left side
    	  var leftHeight = Math.max(boxLL.offsetHeight, boxLR.offsetHeight);
    	  var headerHeight = boxTR.offsetHeight;
    	  leftHeight += headerHeight;
    	  var maxHeight = Math.max(leftHeight, boxR.offsetHeight);
    	  
    	  // set sizes for cols involved
    	  boxLL.style.height = (maxHeight - headerHeight) + 'px';
    	  boxLR.style.height = (maxHeight - headerHeight) + 'px';
    	  boxR.style.height = maxHeight + 'px';
    	      	  
    	  // correct any errors due to faulty box models (quirks mode/ie5 and so on)
    	  ColumnSizer.compensatePadding(boxLL);
    	  ColumnSizer.compensatePadding(boxLR);
    	  ColumnSizer.compensatePadding(boxR);
    	  
		  } else {
			  
				// if there's still a headline for the left col, we need to set the left cols to a height minus the headline - yet another special case!
				if (ColumnSizer.$('contentboxTopLeft_header')) { respectHeadline = true; }

				divs = ColumnSizer.$('middleContentLeftLeft','middleContentLeftRight','middleContentRight');
			}
		} else {
			if (ColumnSizer.$('middleContentLeft')){
				divs = ColumnSizer.$('middleContentLeft','middleContentRight');
			}
		}
		if (divs != "")	ColumnSizer.setTall(divs);
		
		if (respectHeadline) {
		  divs[0].style.height = (parseInt(divs[0].style.height) - ColumnSizer.$('contentboxTopLeft').offsetHeight) + 'px';
		  divs[1].style.height = (parseInt(divs[1].style.height) - ColumnSizer.$('contentboxTopLeft').offsetHeight) + 'px';
		}
	},
	setTallBottom:function(){
		var divs="";
		if (ColumnSizer.$('bottomContentLeftLeft')){
			divs = ColumnSizer.$('bottomContentLeftLeft','bottomContentLeftRight','bottomContentRight');
		}else{
			if (ColumnSizer.$('bottomContentLeft')){
				divs = ColumnSizer.$('bottomContentLeft','bottomContentRight');
			}
		}
		if (divs != "")	ColumnSizer.setTall(divs);
	},
	
	// this will set the sizes of the small content boxes at the top of content pages
	setTallTopContent:function() {
	  // first make sure all elements needed are present
	  var boxTL = ColumnSizer.$('contentboxTopLeft');
	  var boxTL_H = ColumnSizer.$('contentboxTopLeft_header');
	  var boxTL_L = ColumnSizer.$('contentboxTopLeft_leftArea');
	  var boxTL_R = ColumnSizer.$('contentboxTopLeft_rightArea');
	  var boxTR = ColumnSizer.$('contentboxTopRight');
	  if (!boxTL || !boxTL_H || !boxTL_L || !boxTL_R || !boxTR) { return; }
	  
	  // we can't set the size of the whole top box, so we need to set the sizes of the smaller boxes below the headline
	  // but then again, we have to consider the height of the headline - for that reason we can't use the "standard" setTall function!
	  
	  // get maximum height of cols involved, but add the header size to cols on the left side
	  var leftHeight = Math.max(boxTL_L.offsetHeight, boxTL_R.offsetHeight);
	  var headerHeight = boxTL_H.offsetHeight;
	  leftHeight += headerHeight;
	  var maxHeight = Math.max(leftHeight, boxTR.offsetHeight);
	  
	  // set sizes for cols involved
	  boxTL_L.style.height = (maxHeight - headerHeight) + 'px';
	  boxTL_R.style.height = (maxHeight - headerHeight) + 'px';
	  
	  // correct any errors due to faulty box models (quirks mode/ie5 and so on)
	  ColumnSizer.compensatePadding(boxTL_L);
	  ColumnSizer.compensatePadding(boxTL_R);
	},

	setTall:function(divs) {
		if (document.getElementById) {
			// the divs array contains references to each column's div element.  
			// Replace 'center' 'right' and 'left' with your own.  
			// Or remove the last one entirely if you've got 2 columns.  Or add another if you've got 4!
			//var divs = new Array(document.getElementById('center'), document.getElementById('right'), document.getElementById('left'));
			//var divs = new Array(document.getElementById('bottomContentLeftLeft'), document.getElementById('bottomContentLeftRight'), document.getElementById('bottomContentRight'));
			
			//alert(divs);
			
			// Let's determine the maximum height out of all columns specified
			var maxHeight = 0;
			for (var i = 0; i < divs.length; i++) {
				if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;
			}
			
			// Let's set all columns to that maximum height
			for (var i = 0; i < divs.length; i++) {
				divs[i].style.height = maxHeight + 'px';
	
				// Now, if the browser's in standards-compliant mode, the height property
				// sets the height excluding padding, so we figure the padding out by subtracting the
				// old maxHeight from the new offsetHeight, and compensate!  So it works in Safari AND in IE 5.x
				/*if (divs[i].offsetHeight > maxHeight) {
					divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
				}*/
				ColumnSizer.compensatePadding(divs[i]);
				if (i==divs.length-1) return true;
			}
		}
		return false;
	},

  // corrects height by comparing style defined height with offsetHeight property and changing the style height accordingly
  compensatePadding:function(elem) {
    // height value includes 'px', so we need the numerical value!
    var styleHeight = parseInt(elem.style.height);
    
    if (elem.offsetHeight > styleHeight) {
      elem.style.height = (styleHeight - (elem.offsetHeight - styleHeight)) + 'px';
    }
  },

/*
	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...
*/

	setTallAll:function(){
		if(ColumnSizer.scriptInit){
		  // special treatment for top boxes on content pages - has to be executed first because it may alter the height of the main columns!
		  if (ColumnSizer.$('contentboxTopLeft_leftArea')) ColumnSizer.setTallTopContent();
			if(ColumnSizer.$('topContent')) ColumnSizer.setTallTop();
			if(ColumnSizer.$('middleContent')) ColumnSizer.setTallMiddle();
			if(ColumnSizer.$('bottomContent')) ColumnSizer.setTallBottom();
		}
	}
}
ColumnSizer.addEvent(window, 'load', ColumnSizer.setTallAll, false);
ColumnSizer.addEvent(window, 'resize', ColumnSizer.setTallAll, false);