// JavaScript Document

/*function fixH(one,two) {
	if (document.getElementById(one)) {
		var lh=document.getElementById(one).offsetHeight;
		var rh=document.getElementById(two).offsetHeight;
		var nh = Math.max(lh, rh); 
		document.getElementById(one).style.height=nh+"px";
		document.getElementById(two).style.height=nh+"px";
	}
}*/

//this does it for three
function sortNum(a,b) { return b-a} 
	function fixH2(one,two,three) {
		if (document.getElementById(one)) {
			var obj=new Array(3);
			var option=[one,two,three];
			for(var i=0; i<option.length; i++) {
			document.getElementById(option[i]).style.height="auto";
			obj[i]=document.getElementById(option[i]).offsetHeight;
			nh=obj.sort(sortNum);
		} 
		nh1=nh.splice(1,2);
		for(var i=0; i<option.length; i++) {
			document.getElementById(option[i]).style.height=nh+"px";
		}
	}
}
//




// This function below is necessary to take the CSS values as they appear in the external style sheet
function retrieveComputedStyle(element, styleProperty) {
    var computedStyle = null;

    if (typeof element.currentStyle != "undefined") {
        computedStyle = element.currentStyle;
    } else {
        computedStyle = document.defaultView.getComputedStyle(element, null);
    }
    return computedStyle[styleProperty];
}

function fixH(one,two) {

	var $columnOne = document.getElementById(one);
	var $columnTwo = document.getElementById(two);
	
	var $columnOneHeight = document.getElementById(one).offsetHeight;
	var $columnTwoHeight = document.getElementById(two).offsetHeight;
	
	var $columnOneBorderTopWidth, $columnOneBorderBottomWidth, $columnOnePaddingTop, $columnOnePaddingBottom;
	var $columnTwoBorderTopWidth, $columnTwoBorderBottomWidth, $columnTwoPaddingTop, $columnTwoPaddingBottom;
	
	// Find border and padding dimensions of #content-left
	$columnOneBorderTopWidth = retrieveComputedStyle($columnOne, "borderTopWidth");
	$columnOneBorderBottomWidth = retrieveComputedStyle($columnOne, "borderBottomWidth");
	$columnOnePaddingTop = retrieveComputedStyle($columnOne, "paddingTop");
	$columnOnePaddingBottom = retrieveComputedStyle($columnOne, "paddingBottom");
	
	// Find border and padding dimensions of #content-right
	$columnTwoBorderTopWidth = retrieveComputedStyle($columnTwo, "borderTopWidth");
	$columnTwoBorderBottomWidth = retrieveComputedStyle($columnTwo, "borderBottomWidth");
	$columnTwoPaddingTop = retrieveComputedStyle($columnTwo, "paddingTop");
	$columnTwoPaddingBottom = retrieveComputedStyle($columnTwo, "paddingBottom");
	
	// Remove pixels with replace method aand then add top and botton heights
	var $columnOneBorderNumber = Number($columnOneBorderTopWidth.replace("px", "")) + Number($columnOneBorderBottomWidth.replace("px", ""));
	var $columnOnePaddingNumber = Number($columnOnePaddingTop.replace("px", "")) + Number($columnOnePaddingBottom.replace("px", ""));
	var $columnTwoBorderNumber = Number($columnTwoBorderTopWidth.replace("px", "")) + Number($columnTwoBorderBottomWidth.replace("px", ""));
	var $columnTwoPaddingNumber = Number($columnTwoPaddingTop.replace("px", "")) + Number($columnTwoPaddingBottom.replace("px", ""));
	
	// Now take the total margins and padding numbers away from the height
	var $columnOneFinal = $columnOneHeight - $columnOneBorderNumber - $columnOnePaddingNumber;
	var $columnTwoFinal = $columnTwoHeight - $columnTwoBorderNumber - $columnTwoPaddingNumber;
	
	// Use the Maths object to find the highest number and set that in the maxNumber variable
	var maxNumber = Math.max($columnOneFinal, $columnTwoFinal);
	
	// Set the height of the columns to be equal
	$columnOne.style.height = maxNumber + "px";
	$columnTwo.style.height = maxNumber + "px";

}


window.onload=function(){
	fixH('leftcol','sidebar'); 
	//fixH2('left','right','centre');
}