function make_galleriffic_image_table (ncol, nrow, twidth, theight, iwidth, iheight, iwinw, iwinh, imagelist, pref)
{
	var i;

	document.write ("<ul class=\"thumbs noscript\">")
	for (i = 0; i < imagelist.length; i++) {
		document.write ("<li>");

		//
		// This is a sample entry in the table that is dynamically generated.
		// <a class="thumb" name="image-no 8_2003 33_145 8" href="../Scans/8_2003/jpg/8_2003 33_145 8 work s-rgb 800.jpg" title="title for 8_2003 33_145 8">
		// <img src="../Scans/8_2003/jpg/8_2003 33_145 8 work s-rgb 256.jpg" alt="alt image-no 8_2003 33_145 8" width="128" height="99" />
		//
		// ?? Is it possible to force the image width (and height) to be smaller ??

		// If thumbnail file with specified twidth exists use that thumbnail image, else use the 256 wide thumbnail image and
		// let the browser resize it.
		var thumb_fn;
		var large_fn;
		var iname = imagelist[i].ftag;
		var ifilename = imagelist[i].fn;

		// ?? thumb_fn = pref + ifilename + " " + twidth + ".jpg";
		// For now FORCE the use of the 256 wide thumbnail image.
		thumb_fn = pref + ifilename + " " + 256 + ".jpg";
		var image_suff = image_info[iname].image_suff;

		if (image_suff != "") {
			large_fn = pref + ifilename + " " + image_suff + ".jpg";
		} else {
			large_fn = pref + ifilename + " " + iwidth + ".jpg";
		}

		// Use twidth and theight in these .write calls?

		var title = get_image_title (iname);
		var data = get_image_data (iname);
		var titlestr = (title === "") ? "Untitled (Image Number: " + iname + ")" : title;
		var ltitlestr = ((title === "") ? "Untitled" : title) + " (Image Number: " + iname + ")";

		document.write ("<a class=\"thumb\" name=\"image-no \"" + imagelist[i].ftag + "\" href=\"" + large_fn + "\" title=\"" + ltitlestr + "\">");
		document.write ("<img src=\"" + thumb_fn + "\" alt=\"alt image-no " + imagelist[i].ftag + "\" width=\"" + twidth + "\" height=\"" + theight + "\" />");
		document.write ("</a>");

		//
		// If "6x7" images insert a margin in the image-title and image-desc divs since the width for "6x7" and "6x17" images is the same.
		// This keeps the title and desc text aligned left with the left edge of the image.
		// ?? How to compute this ??
		//
		var style_str =  (iwidth == 640) ? "style=\"margin-left:76px\"" : "";

		document.write ("<div class=\"caption\">");
		document.write ("<div " + style_str + " class=\"image-title\">" + titlestr + "</div>");
		if (data != "") {
			document.write ("<div " + style_str + " class=\"image-desc\">" + data + "</div>");
		}
		document.write ("</div>");
		document.write ("</li>");
	}
	document.write ("</ul")
}

function write_galleriffic_page (list_img, ncols, inf, pref)
{
	if (pref === undefined) {
		pref = "";
	}
	document.write ("<div id=\"page\">");
		document.write ("<div id=\"container\">");
			document.write ("<!-- Start Advanced Gallery Html Containers -->");
			document.write ("<div id=\"gallery\" class=\"content\">");
				document.write ("<div id=\"controls\" class=\"controls\"></div>");
				document.write ("<div id=\"slideshow-containing\" class=\"slideshow-container\">");
					document.write ("<div id=\"loading\" class=\"loader\"></div>");
					document.write ("<div id=\"slideshow\" class=\"slideshow\"></div>");
				document.write ("</div>");
				document.write ("<div id=\"caption\" class=\"caption-container\"></div>");
			document.write ("</div> <!-- End gallery  -->");
			document.write ("<div id=\"thumbs\" class=\"navigation\">");
			make_galleriffic_image_table (ncols, -1, inf.t_width, inf.t_height, inf.i_width, inf.i_height, inf.iw_width, inf.iw_height, list_img, pref);
			document.write ("</div> <!-- End thumbs  -->");
			document.write ("<!-- End Advanced Gallery Html Containers -->");
			document.write ("<div style=\"clear: both;\"></div>");
		document.write ("</div> <!-- End container  -->");
	document.write ("</div> <!-- End page  -->");
}