// This function dynamically resizes the height and width of the main content area to fit the
// page without overflowing. Setting the height to 100% did not work because of the 127 pixes
// (or more) taken up by the header and footer. The function is called everytime the page is
// loaded or resized. It is less clean than a pure CSS solution but far easier to implement
// and more versitile in the long run.
//
// The height and width parameters indicate the amount of padding to subtract from the width
// or height of the content area.
//
// The function can be called with a height and width value, e.g. fitContent(170, 22) or with
// only a height value, e.g. fitContent(127[, null]). The former fits the content's width AND
// height (for fullscreen pages) while the latter only fits the content's height.

function fitContent(height, width)
{

	document.body.scroll = "no"; // Removes disabled scrollbar in IE

	// First we try getting the height of the browsers display area with the innerHeight
	// property.
	var browserHeight = window.innerHeight;
	var browserWidth = window.innerWidth;

	// Most browsers provide window.innerHeight but a few don't (most importantly IE).
	if (typeof(browserHeight) != "number")
	{
		// If the innerHeight value is indeed missing we revert to clientHeight.

		// We couldn't just grab the clientHeight up above because most browsers correctly treat
		// clientHeight as the height of the entire browser, not just the display area.
		// Oddly IE has switched the two properties so we can safely use clientHeight here.
		browserHeight = document.documentElement.clientHeight;
		browserWidth = document.documentElement.clientWidth;

		// In a few browsers clientHeight returns zero so we instead use body.clientHeight
		if (browserHeight < 1)
		{
			browserHeight = document.body.clientHeight;
			browserWidth = document.body.clientWidth;
		}
	}

	// Set the modded height of the #content div
	document.getElementById("content").style.height = browserHeight - height;

	// If the width value is not null we set the width of the #main div as well
	if (width != null) document.getElementById("main").style.width = browserWidth - width;
}