/* author: jheadric@msn.com */
/* code copyright by Judy Headrick */
/* Creation date: 3/24/2007 */
function buildTilePage(numberOfTiles, startingTileNumber, baseThumbnailName, baseFileName) {
	endTile = parseInt(startingTileNumber + numberOfTiles -1);
	currentTile = startingTileNumber;
	tableRows = Math.ceil(numberOfTiles/5);
	tileNames = new Array();

/* Build the tile selection form */
/* Instructions section */
	selectionForm = "<table border='1' align='center' bgcolor='#FFCCFF' width='800'><tr>";
	selectionForm += "<td colspan='2' ><div align='center'><h3>Printable Tea Bag Tile Page Generator</h3>";
	selectionForm += "<b><i>*** NOTE: You must allow pop-ups to generate your tile page! ***</i></b></div></td></tr><tr><td>";
	selectionForm += "<b>INSTRUCTIONS:</b><ul><li>Select whether you want seams</li><li>Select up to three tile designs to print</li>";
	selectionForm += "<li>Select a size for each tile design</li><li>Select the number of rows for each tile design</li>";
	selectionForm += "<li>Click the Display Tile Page button</li><li>Print your tiles using your browser's print function</li></ul></td>";

/* Start the table for the tile selection */
	selectionForm += "<form name='form1'>";	

/* Select general options applied to all tiles */
	selectionForm += "<td><table border='0' bgcolor='#FFCCFF'><tr><td colspan='2'><b>Do you want seams between the tiles? </b>";
	selectionForm += "<select NAME='cuttingLines'>";
	selectionForm += "<option VALUE=1 SELECTED>Yes";
	selectionForm += "<option VALUE=0>No";
	selectionForm += "</select><br>(Seams make it easier to see where to cut)</td></tr>";

/*Build the tile name option selection list */
	tileSelectionList = "<option VALUE= 0 SELECTED>...";
	m = startingTileNumber;
	for (t = 0; t < numberOfTiles; t++){
		tileSelectionList += "<option VALUE='images/teabagtiles/" + baseFileName + m + ".jpg'>Tile " + m; 	
		m = m + 1;
	}
	tileSelectionList += "</select>"

/*Build the tile size option selection list */
	sizeSelectionList = "<option VALUE= 0 SELECTED>...";
	sizeSelectionList += "<option VALUE= 75>75 (8 per row)";
	sizeSelectionList += "<option VALUE= 100>100 (6 per row)";
	sizeSelectionList += "<option VALUE= 125>125 (5 per row)";
	sizeSelectionList += "<option VALUE= 150>150 (4 per row)";
	sizeSelectionList += "<option VALUE= 175>175 (3 per row)";
	sizeSelectionList += "<option VALUE= 200>200 (3 per row)";
	sizeSelectionList += "<option VALUE= 225>225 (2 per row)";
	sizeSelectionList += "</select>" 

/*Build the tile row option selection list */
	rowSelectionList = "<option VALUE = 0 SELECTED>...";
	for (z = 1; z <= 12; z++){
		rowSelectionList += "<option VALUE = " + z + ">" + z;
	}
	rowSelectionList += "</select>"


/* Add the tile name option selection lists to the form */
	selectionForm += "<tr><td align=right><b>First Tile: </b></td><td>";
	selectionForm += "<select NAME='tileSelection1'>";
	selectionForm += tileSelectionList
	selectionForm += " <b>Size:</b> ";
	selectionForm += "<select NAME='tileSize1'>";
	selectionForm += sizeSelectionList
	selectionForm += " <b>Rows:</b> ";
	selectionForm += "<select NAME='tableRows1'>";
	selectionForm += rowSelectionList;

	selectionForm += "<tr><td align=right><b>Second Tile: </b></td><td>";
	selectionForm += "<select NAME='tileSelection2'>";
	selectionForm += tileSelectionList
	selectionForm += " <b>Size:</b> ";
	selectionForm += "<select NAME='tileSize2'>";
	selectionForm += sizeSelectionList
	selectionForm += " <b>Rows:</b> ";
	selectionForm += "<select NAME='tableRows2'>";
	selectionForm += rowSelectionList;

	selectionForm += "<tr><td align=right><b>Third Tile: </b></td><td>";
	selectionForm += "<select NAME='tileSelection3'>";
	selectionForm += tileSelectionList
	selectionForm += " <b>Size:</b> ";
	selectionForm += "<select NAME='tileSize3'>";
	selectionForm += sizeSelectionList
	selectionForm += " <b>Rows:</b> ";
	selectionForm += "<select NAME='tableRows3'>";
	selectionForm += rowSelectionList + "<p>";





/* Build the table of tiles to select from */	

	tileTable = "<div align='center'>To download: Click a tile to open the full-size image, then right-click and select <b>Save image as...</b></div>";
	tileTable += "<table border='0' align='center' title='Tiles'>";
	for (n = 1; n < tableRows; n++){
		tileTable += "<tr>";
		while (currentTile <= endTile){
		for (i = 0; i < 5; i++) {				 
			   	
				tileTable += "<td align='center'><a href=\"#\" onClick=\"window.open('images/teabagtiles/" + baseFileName + currentTile + ".jpg','Windowname','width=500,height=500,top=0,left=0,resizable,scrollbars'); return false; \"><img src='images\\teabagtiles\\"+ baseThumbnailName + currentTile + ".jpg' width='150' height='150'></a><br><b>Tile " + currentTile + "</td>";
				currentTile = (currentTile + 1);
				if (currentTile > endTile) i = 5;
			}
		tileTable += "</tr>";				
		}
	}
	tileTable += "</table>";
	selectionForm += "</table></td></tr>";
/* Form Buttons and close form */
	selectionForm += "<tr><td colspan='2' align='center'>";
	selectionForm += "<input TYPE='BUTTON' VALUE='Display Tile Page' onClick='display(0);'> ";
	selectionForm += "<input TYPE='RESET' VALUE='Reset Form'><br><i>Dynamic Tile Page Generator ©2007 by Judy Headrick</i></td>";
	selectionForm += "</tr></table></td></tr></table></form>";
	selectionForm += "</table><p></p>";

/*Write everything to the document*/
	document.write(selectionForm);
	document.write(tileTable);
	document.close();
}