/*
This class will make all containing divs (with a given class) give their specified child elements the same height.

Use:You only need to construct the class to get it working. I.e.
new EqualColumnsContainer('equalColumns', 'equalColumn');

Using the above code will make all child divs, with the class 'equalColumn' of any conatining elements (with the class 'equalColumns') the same height.
*/

var EqualColumnsContainer = Class.create({
	
	initialize: function(containerClassName, elementClassName, within) {
		if (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 6') > 0) {
			return;
		}
		
		this.containerClassName = containerClassName;
		this.elementClassName = elementClassName;
		this.within = null;
		if (within) {
			this.within = $(within);
	 	}
		
		columns = this._findColumns();
		
		for (var i = 0; i < columns.length; i++) {
			var maxHeight = this._findMaxHeight(columns[i]);
			columns[i].invoke('setStyle', {height: maxHeight + 'px'});
		}
	},
	
	_findContainers: function() {
		if (this.within) return Selector.findChildElements(this.within, ['div.' + this.containerClassName]);
		else return $$('div.' + this.containerClassName);
	},
	
	_findColumns: function() {
		var columns = new Array();
		var containers = this._findContainers();
		for (var i = 0; i < containers.length; i++ ) {
			var container = $(containers[i]);
	 		columns[i] = $A(container.getElementsByClassName(this.elementClassName));
		}
		return columns;
	},
	
	_findMaxHeight: function(columns) {
		return columns.invoke('getHeight').max();
	}
	
});

Event.observe(document, 'layout:load:mainContent', function() {
	new EqualColumnsContainer('equalColumns', 'equalColumn', 'content');
});