/*
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');
});

/*
This class will make columns of divs the same height where the divs have a given class.

Use:You only need to construct the class with the class name and number of columns to get it working. I.e.
new EqualAllDivsContainer('equalAllDivs', 2);

* @author: Peter Chamberlin
*
*/
var EqualAllDivsContainer = Class.create({
  
  initialize: function(podDivClassName, numColumns) {
  	if (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 6') > 0) {
  		return;
  	}
  	
    this.podDivClassName = podDivClassName;
    this.numColumns = numColumns;
    this.containers = $$('div.' + this.podDivClassName);
    
    if (this.containers.size() > 0) {
      // get arrays of top and left offsets and heights
      this.heights = new Array();
      this.offsets = new Array();
      for (var i = 1; i <= this.containers.length; i++) {
        this.offsets[i] = this.containers[i-1].cumulativeOffset();
        this.heights[i] = this.containers[i-1].getHeight();
      }
      
      // get an array of the position and heights of divs (at the bottom of columns) which should align at bottom
      this.bottomDivs = new Array();
      var j = 1;
      for (var i = 0; i < this.numColumns; i++){
        this.bottomDivs[i] = new Array();
        this.offsets[j-1] = this.offsets[j];
        while (this.offsets[j][0] == this.offsets[j-1][0]){
          this.bottomDivs[i][0] = this.offsets[j][1];
          this.bottomDivs[i][1] = this.heights[j];
          this.bottomDivs[i][2] = j-1; // this is the array index for the element in this.containers[]
          j++;
          if(!this.offsets[j]) break;
        }
      }
      
      // function to enable numeric array sort (descending)
      function numOrdD(a, b){ return (b-a); } 
      
      // work out the target absolute position for the bottom of the columns
      this.totalHeights = new Array();
      for(var i = 0; i < this.bottomDivs.length; i++){
        this.totalHeights[i] = this.bottomDivs[i][0] + this.bottomDivs[i][1];
      }
      this.totalHeights.sort(numOrdD);
      
      // resize the bottom divs of the columns to the right height
      for(var i = 0; i < this.bottomDivs.length; i++){
        this.containers[this.bottomDivs[i][2]].setStyle({height: (this.totalHeights[0] - this.bottomDivs[i][0]) + 'px'});
      }
    } 
  }
  
});

Event.observe(document, 'layout:load:mainContent', function() {
  new EqualAllDivsContainer('equalAllDivs', 2);
});