// margin at the top and bottom of the content panel
var contentMarginTop = 100;
var contentMarginBottom = 20;
// distance from the left of the green area to the left of the furthest-indented text (so, the margins, plus the width of the audio button, 
// plus the width of the icons times two
var contentAudioTextMarginLeft = 15 + 42 + (100 * 2);
// the desired margin on the right of the content
var contentAudioTextMarginRight = 30;
var contentCategoryTextMarginRight = 80;
// the original width of the audio text areas (to fit into 800x600)
var contentAudioTextOriginalWidth = 140;
var contentCategoryTextOriginalWidth = 140;
// distance from the left of the green area to the left of the furthest-indented category text (so, the margins, 
// plus the width of the icons times two)
var contentCategoryTextMarginLeft = 30 + (100 * 2);

function GetWindowHeight() {
  return window.innerHeight||
    document.documentElement&&document.documentElement.clientHeight||
    document.body.clientHeight||0;
}

function layout() {
	var screenHeight, newHeight, newWidth;
	var currentContentWidth;
	//screenHeight = document.body.parentNode.clientHeight;
	//if (screenHeight == 0) {
		//screenHeight = document.body.clientHeight;
	//}
	screenHeight = GetWindowHeight();
	newHeight = screenHeight - (contentMarginTop + contentMarginBottom);

	// ikg - set the scrollable area to the height of the browser window, minus margins
	if (newHeight > 0) {
		if (document.getElementById("leftcontent")) {
			document.getElementById("leftcontent").style.height = newHeight + "px"; 
			document.getElementById("leftcontent").style.display = "block"; 
		}
		
		if (document.getElementById("rightcontent")) {
			document.getElementById("rightcontent").style.display = "block"; 

			// get the current width of the content area
			currentContentWidth = document.getElementById("rightcontent").clientWidth;
			if (currentContentWidth == 0) {
				currentContentWidth = document.getElementById("rightcontent").offsetWidth;
			}
			// get the available width after the icons have been taken into consideration
			newWidth = currentContentWidth - contentCategoryTextMarginLeft;
			if ((newWidth - contentCategoryTextMarginRight) > contentCategoryTextOriginalWidth) {
				// if the width with the desired margin will fit into the available area, then do that
				newWidth = newWidth - contentCategoryTextMarginRight;
			} else {
				// otherwise, just revert to the default setting
				newWidth = contentCategoryTextOriginalWidth;
			}

			// run through the items on the page and resize them
			var index = 1;
			while (document.getElementById("detaillinktitle" + index)) {
				document.getElementById("detaillinktitle" + index).style.width = newWidth + "px";
				index++;
			}
	 	} else if (document.getElementById("audiocontent")) {
			//document.getElementById("audiocontent").style.height = newHeight + "px"
			document.getElementById("audiocontent").style.display = "block"; 
			
			// get the current width of the content area
			currentContentWidth = document.getElementById("audiocontent").clientWidth;
			if (currentContentWidth == 0) {
				currentContentWidth = document.getElementById("audiocontent").offsetWidth;
			}
			// get the available width after the icons have been taken into consideration
			newWidth = currentContentWidth - contentAudioTextMarginLeft;
			if ((newWidth - contentAudioTextMarginRight) > contentAudioTextOriginalWidth) {
				// if the width with the desired margin will fit into the available area, then do that
				newWidth = newWidth - contentAudioTextMarginRight;
			} else {
				// otherwise, just revert to the default setting
				newWidth = contentAudioTextOriginalWidth;
			}
			
			// run through the items on the page and resize them
			var index = 1;
			while (document.getElementById("audiolinktext" + index)) {
				document.getElementById("audiolinktext" + index).style.width = newWidth + "px";
				index++;
			}
		}
	} else {
		// haven't been able to do the resizing, but we need to show the scrolling areas anyway
		showScrolling();
	}
	
}

// write styles to hide the scrolling areas by default, so that they're hidden until resized
function hideScrolling() {
	document.writeln("<style type=\"text/css\">");
	document.writeln("#leftcontent, #rightcontent, #audiocontent {");
	document.writeln("display:none;");
	document.writeln("}");
	document.writeln("</style>");
}

// show the scrolling areas
function showScrolling() {
	if (document.getElementById("audiocontent")) {
		document.getElementById("audiocontent").style.display = "block"; 
	}
	if (document.getElementById("rightcontent")) {
		document.getElementById("rightcontent").style.display = "block"; 
	}
	if (document.getElementById("leftcontent")) {
		document.getElementById("leftcontent").style.display = "block"; 
	}
}

// hide the scrolling areas by default
hideScrolling();