/*
 * Copyright 2006 David & Goliath, All Rights Reserved
 * Creates dynamic image table for shopping details page.
 */

var LANDSCAPE = 0;
var PORTRAIT = 1;
var SQUARE = 2;

/*
 * void build_table(int img_cnt, int format)
 * Function for building a dynamic table for the shop details page.
 * The table presents one large static image, and up to three smaller
 * active images.  When an active image is clicked on, the table
 * reconfigures itself to show that image as static, and the remaining
 * images become smaller, active thumbnails.  Accepts two parameters:
 * img_cnt, which is the total number of images in the pool to display
 * (both static and active), and format, a constant representing the
 * orientation of the larger, static image, either LANDSCAPE (width
 * greater than height) or PORTRAIT (height greater than width).  For
 * the purpose of this function, square images are handled as PORTRAIT.
 */
function build_table(img_cnt, format, title)
{
	/*
	 * Initialization
	 */
	var tmp, table, r, td, img, txt, a, align, rows, block, x, y;
	var r = new Array();

	/*
	 * Reset table to 0 rows, and create initially four rows
	 */
	table = clear_table("imgtable");
	table.cellSpacing = 8;
	table.cellPadding = 0;
	switch (format) {
		case LANDSCAPE :
			rows = 3;
			x = 460;
			y = 300;
			break;
		case PORTRAIT :
			rows = 2;
			x = 300;
			y = 460;
			break;
		case SQUARE :
			rows = 2;
			x = 300;
			y = 300;
			break;
	}
	for (i = 0; i < rows; i++) r[i] = document.createElement("tr");

	/*
	 * Large static image; span the image across either columns
	 * or rows depending on orientation.
	 */
	td = document.createElement("td");
	td.vAlign = "top";
	img = create_image(0, x, y, title);
	td.appendChild(img);
	r[0].appendChild(td);

	/*
	 * Active thumbnail images
	 */
	td = document.createElement("td");
	for (i = 0; i < img_cnt - 1; i++) {

		/*
		 * Create and emtpy spacer cell to make the number of
		 * columns and rows uniform in both orientations.
		 */
		spacer = document.createElement("img");
		spacer.height = 8;
		spacer.width = 8;
		spacer.src = "/shop/images/spacer.gif";

		/*
		 * Create image cell for active image.
		 */
		switch (format) {
			case LANDSCAPE :
				block = document.createElement("span");
				break;
			case PORTRAIT :
			case SQUARE :
				block = document.createElement("div");
				break;
		}
		td.align = "left";
		td.vAlign = "top";
		a = document.createElement("a");
		a.id = "anchor"+(i+1);
		a.href = "javascript:null(0)";
		img = create_image(i+1, 150, 150, title);
		a.appendChild(img);
		block.appendChild(a);
		td.appendChild(block);
		td.appendChild(spacer);
	}

	if (img_cnt > 1) {
		txt = document.createTextNode("Click on an image for a larger view");
	} else {
		txt = document.createTextNode("");
	}

	switch (format) {
		case LANDSCAPE :
			td.height = 150;
			r[1].appendChild(td);
			td = document.createElement("td");
			td.align = "center";
			td.colSpan = 2
			td.appendChild(txt);
			r[2].appendChild(td);
			break;
		case PORTRAIT :
		case SQUARE :
			td.width = 150;
			td.align = "center";
			td.appendChild(txt);
			r[0].appendChild(td);
	}

	for (i = 0; i < rows; i++) table.tBodies[0].appendChild(r[i]);
}

/*
 * object clear_table(string id)
 * Resets a table to a bare TBODY element.  Accepts the DOM ID of the table,
 * and returns a pointer to the table object.  This function eliminates the
 * need to retrieve the table object beforehand.
 */
function clear_table(id)
{
	var table = getBaseObject(id);
	while (table.tBodies[0].childNodes && table.tBodies[0].childNodes.length > 0) {
		table.tBodies[0].removeChild(table.tBodies[0].childNodes[0]);
	}
	return table;
}

/*
 * object create_image(int num)
 * Creates an image object to be inserted into the document.  Accepts the
 * number suffix of the image name, and returns a DOM image object with a
 * blank SRC attribute.
 */
function create_image(num, x, y, alt)
{
	var img = document.createElement("img");
	img.id = "image" + num;
	img.src = "/shop/images/spacer.gif";
	img.width = x;
	img.height = y;
	img.style.border = "solid 1px rgb(224,224,224)";
	if (x > 200 && y > 200) {
		img.alt = alt+" Large Image";
	} else {
		img.alt = alt+" Small Image";
	}
	return img;
}