// this JavaScript function will write HTML tags to construct a table containing
// an image and a caption below it.
// If the web browser allows it to get the window size, it also sizes the image
// to best fit the browser window's size.
// If the image is smaller than the browser window then it will not be resized

function writeImageTable(imageSource, photoWidth, photoHeight, caption) {
//edit these variables to customise the script
var tableBorder=6;
var tableBorderColor="#000000";
var tableBorderColorDark="#000000";
var tableCellPadding=0;
var tableCellSpacing=0;
var captionTextColor="#FFFF00";
var captionCellHeight=36;
var captionBackgroundColor="#000000";

var tableWidth = photoWidth;
var tableHeight = photoHeight;
//if we can get the window size, we can size the image to fit it
if (window.innerWidth || document.body.offsetWidth) { //browser will let us get window size
	//default values for window size
	var winWidth = 800, winHeight = 600;
	//different browsers have different ways of getting the window size
	if (window.innerWidth) { //if Netscape Navigator
		winWidth = window.innerWidth;
		winHeight = window.innerHeight;
	} else if (document.body.offsetWidth) { //if Internet Explorer
		winWidth = document.body.offsetWidth;
		winHeight = document.body.offsetHeight;
	}
	//account for border and caption size
	winWidth -= (tableBorder * 2 + 5);
	winHeight -= (tableBorder * 2 + 5 + captionCellHeight);
	//calculate ratios between image and window dimensions
	var relativeWidth = photoWidth / winWidth;
	var relativeHeight = photoHeight / winHeight;
	//calculate ratio between image dimensions
	var widthToHeightRatio = photoWidth / photoHeight;
	if (relativeHeight >= relativeWidth) { 	//resize vertically, because image is relatively higher than the window than it is wider than the window
		if (winHeight <= photoHeight) {	//only resize if screen is smaller than picture
			//fill vertically
			tableHeight = winHeight;
			//scale image to keep right proportions
			tableWidth = tableHeight * widthToHeightRatio;
		}
	} else {						// resize horizontally, because image is relatively wider than the window than it is higher than the window
		if (winWidth <= photoWidth) {		//only resize if screen is smaller than picture
			//fill horizontally
			tableWidth = winWidth;
			//scale image to keep right proportions
			tableHeight = tableWidth / widthToHeightRatio;
		}
	}
}

//write HTML:
// line 60
//table tag
document.writeln(eval("'<table border=\"' + tableBorder + '\" bordercolordark=\"' + tableBorderColorDark + '\" bordercolor=\"' + tableBorderColor + '\" cellspacing=\"' + tableCellSpacing + '\" cellpadding=\"' + tableCellPadding + '\" width=\"' + tableWidth + '\" height= \"' + tableHeight + '\">'"));
//first row - image
document.writeln (eval("'<tr><td align=\"center\" bgcolor=\"' + tableBorderColor + '\">'"));
document.writeln (eval("'<IMG BORDER=0 SRC=\"' + imageSource + '\" WIDTH=\"' + tableWidth + '\" HEIGHT =\"' + tableHeight + '\"></td></tr>'"));
//2nd row - caption
document.writeln (eval("'<tr><td align=\"center\" height=\"' + captionCellHeight + '\" bgcolor=\"' + captionBackgroundColor + '\">'"));
document.writeln (eval("'<font color=\"' + captionTextColor + '\">' + caption + '</font></td></tr>'"));
//end table tag
document.writeln (eval("'</table>'"));
}