/***********************************************************
 * Script used to level heights across multiple divs
 * Requires: jquery.js
 * Usage: a. Add script tags for this and jquery.js to page
 *        b. Add calls to normalizeHeights() for each group
 *           of divs you wish to balance to the 
 *           setAllHeights() function below.
 *        c. It seems safest to order the calls to 
 *           normalizeHeights() from innermost to outermost
 ***********************************************************/

function setAllHeights() {
  // normalizeHeights(["#column1", "#column2"]);
  normalizeHeights([".oneContainer", ".twoContainer", ".threeContainer"]);
  normalizeHeights(["#c1", "#c2", "#c3"]);
}

function getTotalPadding(id) {
  var element = id; 

  totalPadding = parseInt($(element).css("paddingTop")) + parseInt($(element).css("paddingBottom"));
          
  if (!isNaN(parseInt($(element).css("borderTopWidth")))) {
    totalPadding = totalPadding + parseInt($(element).css("borderTopWidth"));
  }
          
  if (!isNaN(parseInt($(element).css("borderBottomWidth")))) {
    totalPadding = totalPadding + parseInt($(element).css("borderBottomWidth"));
  }

  return totalPadding;
}


function normalizeHeights(elements) {
  if (elements && !($(elements.length))) {
    return;
  }

  var tallest = 0;

  for (var i = 0; i < elements.length; i++) {
    var element = $(elements[i]);
    if (element) {
      var domElement = element.get(0);
      if (domElement) {
        element.height('auto');
        // IE7 seems to only be updating scrollHeight if div size changes on resize
        var elementScrollHeight = domElement.scrollHeight;
        if (elementScrollHeight > tallest) {
          tallest = elementScrollHeight;
        }
      }
    }
  }

  for (var i = 0; i < elements.length; i++) {
    var element = $(elements[i]);
    if (element) {
      var newHeight = tallest - getTotalPadding(element) // + 40
      element.height(newHeight);
    }
  }
	
  // zero the margins and padding on the footer
  $("#footer").css("margin", "0");
  $("#footer").css("padding", "0");
  
}

$(document).ready(function() {
    // in theory, the load event fires *after* images are downloaded.
    // if we dont' wait for this, images missing their width/height
    // attrs will cause trouble.
    $(window).load(function () {
        setAllHeights();
    });

  $(window).resize(function() {
    setAllHeights();
  });
});