var textWidth = 0;
var textHeight = 0;
var lineHeight = 0;
var windowWidth = 0;
var windowHeight = 0;
var origImageHeight = 0;
var origImageWidth = 0;
var scaledImageHeight = 0;
var scaledImageWidth = 0;
var scaledImageHeightTextOnBottom = 0;
var scaledImageHeightTextOnRight = 0;

function measureText(text) {
   var ea = document.createElement("span");
   ea.innerHTML = text;
   document.body.appendChild(ea);
   textWidth = ea.offsetWidth;
   textHeight = ea.offsetHeight;
   document.body.removeChild(ea);
}

function displayImageTag(image)
{
	document.write('img src="display/' + image + '" width="' + parseInt(scaledImageWidth) + '" height="' + parseInt(scaledImageHeight) + '" border="0" alt="' + image + '"');
}

function displayImage(image)
{
	document.write('<');
	displayImageTag(image);
	document.write('>');
}

function displayMedia(link, image, width, height, isMovie, loop, autoplay)
{
	if (isMovie)
	{
		var totalHeight = height + 16;
/* <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="640" HEIGHT="496" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM name="SRC" VALUE="movies/display34.mov"> <PARAM name="AUTOPLAY" VALUE="true"> <PARAM name="CONTROLLER" VALUE="true"> <PARAM name="LOOP" VALUE="true"> <EMBED SRC="movies/display34.mov" WIDTH="640" HEIGHT="496" AUTOPLAY="true" CONTROLLER="true"  LOOP="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/"> </EMBED> </OBJECT>	*/
		document.write('<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ');
		document.write('WIDTH="' + width + '" HEIGHT="' + totalHeight + '" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> ');
		document.write('<PARAM name="SRC" VALUE="' + image + '.mov"> ');
		document.write('<PARAM name="AUTOPLAY" VALUE="' + autoplay + '"> ');
		document.write('<PARAM name="SCALE" VALUE="ASPECT"> ');
		document.write('<PARAM name="CONTROLLER" VALUE="true"> ');
		document.write('<PARAM name="LOOP" VALUE="' + loop + '"> ');
		document.write('<PARAM name="HREF" VALUE="../' + link + '"> ');
		document.write('<EMBED SRC="' + image + '.mov" WIDTH="' + width + '" HEIGHT="' + totalHeight + '" SCALE="ASPECT" AUTOPLAY="' + autoplay + '" CONTROLLER="true"  LOOP="' + loop + '" HREF="../' + link + '" PLUGINSPAGE="http://www.apple.com/quicktime/download/"> </EMBED></OBJECT>');
	}
	else
	{
//	<a href="<?echo page.uid;?>.html"><img src="thumb/<?echo page.jpeg;?>" width="<?echo page.tw;?>" height="<?echo page.th;?>" border=0 alt="<?echo page.jpeg;?>"></a>
		document.write('<a href="' + link + '"><img src="' + image + '.jpg" width=' + width + ' height=' + height + ' border=0 alt="' + image + '.jpg"></a>');
	}
}

function displayScaledMedia(link, image, isMovie, loop, autoplay)
{
	if (isMovie && scaledImageWidth > origImageWidth)
		displayMedia(link, image, origImageWidth, origImageHeight, isMovie, loop, autoplay);
	else
		displayMedia(link, image, parseInt(scaledImageWidth), parseInt(scaledImageHeight), isMovie, loop, autoplay);
}

function getImageWidth()
{
	return scaledImageWidth;
}

function getImageHeight()
{
	return scaledImageHeight;
}

function layoutPage(imageHeight, imageWidth) {
	windowWidth = window.innerWidth - 100;
	windowHeight = window.innerHeight - 300;
	
	origImageHeight = imageHeight;
	origImageWidth = imageWidth;
	
	var aspectRatio = imageWidth / imageHeight;
	
	// suppose the text is on the bottom:  how tall would it be?
	var widthRatio = windowWidth / textWidth;
	var textHeightMultiplier = parseInt(widthRatio);
	if (textHeightMultiplier < windowWidth / textWidth) {
		textHeightMultiplier++;
	}
	
//			document.writeln('textHeightMultiplier: ' + textHeightMultiplier + '<br>');
	if ((textHeight * textHeightMultiplier) < (windowHeight / 3)) {
		scaledImageHeightTextOnBottom = (windowHeight - textHeight * textHeightMultiplier);
	}
	
	/* now suppose the text is on the right
		max space is what you get when the picture is as tall as the window
		min space is 30 * lineHeight, or textWidth, whichever is smaller
		
		if max is greater than min, use max
		if max is less than min, use min and picture will scale
		if min is greater than windowWidth, can't put text on right
		
	*/
	var maxTextWidthOnRight = windowWidth - (windowHeight * aspectRatio);
	var minTextWidthOnRight = lineHeight * 30;
	if (minTextWidthOnRight > textWidth)
		minTextWidthOnRight = textWidth;
	
	
	if (minTextWidthOnRight < windowWidth)
	{
		if (maxTextWidthOnRight > minTextWidthOnRight)
			textWidthOnRight = maxTextWidthOnRight;
		else
			textWidthOnRight = minTextWidthOnRight;
		scaledImageHeightTextOnRight = (windowWidth - textWidthOnRight) / aspectRatio;
	}
	
	if (scaledImageHeightTextOnRight > scaledImageHeightTextOnBottom)
		scaledImageHeight = scaledImageHeightTextOnRight;
	else if (scaledImageHeightTextOnBottom > 0)
	{
		if (scaledImageHeightTextOnBottom * aspectRatio > windowWidth)
			scaledImageHeight = windowWidth / aspectRatio;
		else
			scaledImageHeight = scaledImageHeightTextOnBottom;	
	}
	else
		scaledImageHeight = windowHeight * 2 / 3; // you'll at least see the beginning of the caption in the bottom of the window				
	scaledImageWidth = scaledImageHeight * aspectRatio;
}