<!DOCTYPE HTML>

<html>

<meta name="author" content="Michael William Steinberg" /> 
<meta name="owner" content="Michael William Steinberg" />
<meta name="name" content="Scramble Word Game" />
<meta name="reply-to" content="MichaelWSteinberg@ATT.net" />
<meta name="description" content="Scramble Word Game. Turn randomly generated letters into words." /> 
<meta name="keywords" content="Scramble, Word, Game, CSS, DHTML, HTML, DOM, JavaScript" /> 
<meta name="classification" content="Game" /> 
<meta name="robots" content="INDEX" />
<meta name="abstract" content="Test your skill creating words and phrases from the randomly generated letters.  Half the letters are consonants and half are vowels.  The letters are surrounded by blank tiles which serve to separate words.  For fun, see if any words appear in the random letters before you start.  This could spark an idea or intuition." />
<meta name="doc-rights" content="All rights reserved.  No portion of the GUI or source code is permitted to be copied." />

	<head>
	<title>Scramble Word Game</title>
	<style type="text/css">
	.heading_wrapper {
		position:relative;
		top:0;
		width:100%;
		text-align:center;
		font-size:xx-large;
		font-weight:bold;
		vertical-align:center;
		color:black;
		background-color:silver;
		padding-top:0.5em;
		padding-bottom:0.5em;
		border-top-style:solid;
		border-top-width:thick;
		border-top-color:darkblue;
		border-bottom-style:solid;
		border-bottom-width:thick;
		border-bottom-color:darkblue;
		z-index:1;
	}
	.cInstructionButton {
		position:absolute;
		bottom:0.5em;
		right:0.5em;
		font-size:medium;
		font-weight:normal;
		padding-left:0.5em;
		padding-right:0.5em;
		background-color:lightgray;
		border-style:outset;
		border-width:thin;
		cursor:pointer;
		z-index:2;		
	}
	.cInstructionButtonMouseover {
		background-color:yellow;
		border-style:inset;
		border-width:thin;
	}
	.game_wrapper {
		position:relative;
		width:100%;
		color:black;
		background-color:white;
	}
	.instruction_wrapper {
		position:absolute;
		top:0;
		right:0;
		padding:1em;
		width:75%;
		color:black;
		background-color:lightgray;
		border-with:thin;
		border-color:black;
		border-style:solid;
		visibility:hidden;
		z-index:2;
	}
	.footer_wrapper {
		position:relative;
		bottom:0;
		width:100%;
		color:black;
		font-style:italic;
		background-color:silver;
		border-top-style:solid;
		border-top-width:thick;
		border-top-color:darkblue;
		border-bottom-style:solid;
		border-bottom-width:thick;
		border-bottom-color:darkblue;
		z-index:1;
	}
	table {
		background-color:white;
		color:black;
		font-size:medium;
		text-align:center;
		cursor:pointer;
	}
	td {
		width:1em;
		border-style:solid;
		border-width:thin;
		border-color:white;
	}
	.cShiftTile {
		background-color:lightgray;
		border-style:outset;
		border-width:thin;
	}
	.cShiftTileMouseOver {
		background-color:yellow;
		border-style:inset;
		border-width:thin;
	}
	.cCornerTile {
		background-color:lightgray;
		border-style:outset;
		border-width:thin;	
	}
	.cGameTileHighlight {
		background-color:yellow;
	}
	.cGameTileMouseOver {
		border-color:black;
	}
	.cGameTileClick {
		border-style:dashed;
		border-color:black;
	}
	.cShiftRowMouseOver {
		border-style:dotted solid;
		border-color:black white;
	}
	.cShiftColumnMouseOver {
		border-style:solid dotted;
		border-color:white black;
	}
	</style>
	<script type="text/JavaScript">
// Global Variables
	var gRows=10,gColumns=40;
	var gTableObject,gTableBody,gFocusCell,gMouseOverCell,gLastVowel,gFirstGeneration;
	var gLetterArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","&nbsp;"];
	var gConsonantArray = ["B","C","D","F","G","H","J","K","L","M","N","P","Q","R","S","T","V","W","X","Y","Z"];	// "&nbsp;" non-breaking space
	var gVowelArray = ["A","E","I","O","U"];
	var gLetters = gLetterArray.length;
	var gConsonants = gConsonantArray.length;
	var gVowels = gVowelArray.length;
// Initiation
	function startScript() {
		gFirstGeneration = true;					// initial game table build
		var oInstructionButton = document.getElementById("dInstructionButton");
		var oInstructions = document.getElementById("dInstructions");
		buildInstructionEvents(oInstructionButton, oInstructions);	// show/hide instructions
		var oGamePanel = document.getElementById("dGamePanel");
		buildGameTable(oGamePanel);
		buildKeyEvents();						// highlight letter when key down anywhere in document
	}
// Show/Hide Instructions
	function buildInstructionEvents (oInstructionButton, oInstructions) {
		oInstructionButton.name = "show";
		oInstructionButton.innerHTML = "Show Instructions";
		oInstructionButton.onmouseover = function () {
			if (this.className) {				// class string not null
				this.className += " cInstructionButtonMouseover";	// add mouseover to existing class string
			}
			else {
				this.className = "cInstructionButtonMouseover";		// class string null
			}
		}
		oInstructionButton.onmouseout = function () {
			this.className = this.className.replace(" cInstructionButtonMouseover", "");	// cut mouseover (leading space)
			this.className = this.className.replace("cInstructionButtonMouseover", "");	// cut mouseover (no leading space)		
		}
		oInstructionButton.onclick = function () {
			if (oInstructionButton.name == "show") {
				oInstructionButton.name = "hide";
				oInstructionButton.innerHTML = "Hide Instructions";
				oInstructions.style.visibility = "visible";
			}
			else if (oInstructionButton.name == "hide") {
				oInstructionButton.name = "show";
				oInstructionButton.innerHTML = "Show Instructions";
				oInstructions.style.visibility = "hidden";
			}						
		}
	}	

// Build Game Table
	function buildGameTable(oGamePanel) {
		var i,j;
		var oTableRow,oTableCell;
		gTableObject = document.createElement("table");	// create game table
		oGamePanel.appendChild(gTableObject);			// append table to game panel
		gTableBody = document.createElement("tbody");	// create table body
		gTableObject.appendChild(gTableBody);			// append body to table
		gLastVowel = true;					// rotate between consonant and vowel

		// Build Column Shift Up Row (first table row)

		oTableRow = document.createElement("tr");		// create first table row
		gTableBody.appendChild(oTableRow);			// append first row to table body
		oTableCell = document.createElement("td");		// create table cell
		oTableCell.className = "cCornerTile";			// assign corner cell style
		oTableRow.appendChild(oTableCell);			// append left corner cell to first row
		for(i=0;i<gColumns;++i) {
			oTableCell = document.createElement("td");	// create table cell
			oTableCell.name = "shiftUp";			// name cell "shiftUp"
			buildShiftEvents(oTableCell);			// call function to build cell event handlers
			oTableRow.appendChild(oTableCell)		// append cells to first row
		}		
		oTableCell = document.createElement("td");		// create table cell
		oTableCell.className = "cCornerTile";			// assign corner cell style
		oTableRow.appendChild(oTableCell);			// append right corner cell to first row
	
		// Build First Game Row (all blank tiles in game area - same as last game row)

		gTableBody.appendChild(buildBlankTileRow ());	// call function to build left shift/blank game cells/right shift row and append

		// Build Middle Game Rows (letters in game area)

		for(i=2;i<gRows;++i) {
			gTableBody.appendChild(buildMiddleRow ());
		}

		// Build Last Game Row (all blank tiles in game area - same as first game row)

		gTableBody.appendChild(buildBlankTileRow ());	// call function to build left shift/blank game cells/right shift row and append

		// Build Column Shift Down Row (last table row)

		oTableRow = document.createElement("tr");		// create last table row
		gTableBody.appendChild(oTableRow);			// append last row to table body
		oTableCell = document.createElement("td");		// create table cell
		oTableCell.className = "cCornerTile";			// assign corner cell style
		oTableRow.appendChild(oTableCell);			// append left corner cell to last row		
		for(i=0;i<gColumns;++i) {
			oTableCell = document.createElement("td");	// create table cell
			oTableCell.name = "shiftDown";			// name cell "shiftDown"
			buildShiftEvents(oTableCell);			// call function to build cell event handlers
			oTableRow.appendChild(oTableCell)		// append cells to first row
		}
		oTableCell = document.createElement("td");		// create table cell
		oTableCell.className = "cCornerTile";			// assign corner cell style
		oTableRow.appendChild(oTableCell);			// append right corner cell to last row

	}
	function buildBlankTileRow () {
		var oTableRow = document.createElement("tr");	// create table row
		var oTableCell = document.createElement("td");	// create table cell
		oTableCell.name = "shiftLeft";				// name table cell "shiftLeft"
		buildShiftEvents(oTableCell);				// call function to build event handlers
		oTableRow.appendChild(oTableCell)			// append first cell to row
		for(i=0;i<gColumns;++i) {				// black game cells accross
			oTableCell = document.createElement("td");	// create table cell
			oTableCell.innerHTML = "&nbsp;";		// "non-breaking space" for border to work in IE
			buildCellEvents(oTableCell);			// call function to build game cell event handlers
			oTableRow.appendChild(oTableCell);		// append blank cells to first row
		}		
		oTableCell = document.createElement("td");		// create table cell
		oTableCell.name = "shiftRight";				// name table cell "shiftRight"
		buildShiftEvents(oTableCell);				// call function to build event handlers
		oTableRow.appendChild(oTableCell)			// append last cell to row
		return oTableRow;					// return pointer to row object
	}
	function buildMiddleRow () {
		var j;
		var oTableRow = document.createElement("tr");	// create new table row
		var oTableCell = document.createElement("td");	// create table cell
		oTableCell.name = "shiftLeft";			// name table cell "shiftLeft"
		buildShiftEvents(oTableCell);			// call function to build event handlers
		oTableRow.appendChild(oTableCell)		// append first cell to new row
		oTableCell = document.createElement("td");	// create blank table cell
		oTableCell.innerHTML = "&nbsp;";		// "non-breaking space" for border to work in IE
		buildCellEvents(oTableCell)			// call function to build game cell event handlers
		oTableRow.appendChild(oTableCell)		// append second cell to new row
		for(j=2;j<gColumns;++j) {			// buid letter cells (2nd game column to 2nd from last)
			oTableRow.appendChild(buildLetterCell());	// append letter cells to new row
		}
		oTableCell = document.createElement("td");	// create blank table cell
		oTableCell.innerHTML = "&nbsp;";		// "non-breaking space" for border to work in IE
		buildCellEvents(oTableCell)			// call function to build game cell event handlers
		oTableRow.appendChild(oTableCell)		// append second last cell to new row	
		oTableCell = document.createElement("td");	// create new table cell
		oTableCell.name = "shiftRight";			// name table cell "shiftRight"
		buildShiftEvents(oTableCell);			// call function to build event handlers
		oTableRow.appendChild(oTableCell);		// append last cell to new row
		return oTableRow;				// return pointer to row object
	}
	function buildLetterCell () {
		var oTableCell = document.createElement("td");	// create table cell
		if (gLastVowel) {
			oTableCell.name = "vowel";	// name table cell "vowel"
		}
		else {
			oTableCell.name = "consonant";	// name table cell "consonant"
		}
		gLastVowel = !gLastVowel		// rotate true/false
		oTableCell.innerHTML = genRandomLetter(oTableCell);	// call function to return random letter
		buildCellEvents(oTableCell)		// call function to build game cell event handlers
		return oTableCell;
	}
	function rowNumberChange (newRowCount) {
		var rowChange = newRowCount - gRows;
		gRows = newRowCount;
		var oLastTableRow = gTableBody.lastChild;
		for (; rowChange > 0; --rowChange) {					// expand game table
			gTableBody.insertBefore(buildMiddleRow(), oLastTableRow);
		}
		for (; rowChange < 0; ++rowChange) {
			gTableBody.removeChild(gTableBody.lastChild.previousSibling);	// contract game table
		}
	}
	function columnNumberChange (newColumnCount) {
		var i;
		var columnChange = newColumnCount - gColumns;
		gColumns = newColumnCount;
		if (columnChange != 0) {
			var oTableRow = gTableBody.firstChild;				// initialize at first table row
			if (columnChange > 0) {						// expand table
				var oLastGameRow = gTableBody.lastChild.previousSibling;	// last table row
				var oLastTableCell = oTableRow.lastChild;
				for (i=columnChange; i > 0; --i) {			// expand first table row
					oTableCell = document.createElement("td");	// create table cell
					oTableCell.name = "shiftUp";			// name cell "shiftUp"
					buildShiftEvents(oTableCell);			// call function to build cell event handlers
					oTableRow.insertBefore(oTableCell, oLastTableCell);
				}
				oTableRow = oTableRow.nextSibling;			// chain to first game row
				oLastTableCell = oTableRow.lastChild;
				for (i=columnChange; i > 0; --i) {			// expand second table row (first game row)
					oTableCell = document.createElement("td");	// create table cell
					oTableCell.innerHTML = "&nbsp;";		// "non-breaking space" for border to work in IE
					buildCellEvents(oTableCell);			// call function to build game cell event handlers
					oTableRow.insertBefore(oTableCell, oLastTableCell);
				}
				oTableRow = oTableRow.nextSibling;			// chain to second game row
				oLastTableCell = oTableRow.lastChild;
				while (oTableRow != oLastGameRow) {			// expand middle rows
					oLastTableCell = oTableRow.lastChild		// last table cell for row pointer
					for (i=columnChange; i > 0; --i) {		// expand game table
						oTableRow.insertBefore(buildLetterCell(), oLastTableCell);
					}
					oTableRow = oTableRow.nextSibling;
				}
				oLastTableCell = oTableRow.lastChild;
				for (i=columnChange; i > 0; --i) {			// expand second table row (first game row)
					oTableCell = document.createElement("td");	// create table cell
					oTableCell.innerHTML = "&nbsp;";		// "non-breaking space" for border to work in IE
					buildCellEvents(oTableCell);			// call function to build game cell event handlers
					oTableRow.insertBefore(oTableCell, oLastTableCell);
				}
				oTableRow = oTableRow.nextSibling;			// chain to last table row
				oLastTableCell = oTableRow.lastChild			// last cell for last table row
				for (i=columnChange; i > 0; --i) {			// expand last table row
					oTableCell = document.createElement("td");	// create table cell
					oTableCell.name = "shiftDown";			// name cell "shiftUp"
					buildShiftEvents(oTableCell);			// call function to build cell event handlers
					oTableRow.insertBefore(oTableCell, oLastTableCell);
				}
			}
			else if (columnChange < 0) {					// contract Table
				while (oTableRow) {					// null when past the end of table
					oLastTableCell = oTableRow.lastChild		// last table cell
					for (i=columnChange; i < 0; ++i) {		// contract game table
						oTableRow.removeChild(oLastTableCell.previousSibling)
					}
					oTableRow = oTableRow.nextSibling;		// returns null when no more siblings
				}
			}
		}
	}
	function genRandomLetter(oTableCell) {
		if (oTableCell.name == "vowel") {
			return gVowelArray[Math.floor(Math.random() * gVowels)];
		}
		else if (oTableCell.name == "consonant") {
			return gConsonantArray[Math.floor(Math.random() * gConsonants)];
		}
		else {
			return gLetterArray[Math.floor(Math.random() * gLetters)];
		}	
	}
	function buildCellEvents(oGameCell) {					// this and oGameCell the same
		oGameCell.onmouseover = function () {
			if (gFocusCell)	{					// source focus cell not null
				if (this.className) {				// class string not null
					this.className += " cGameTileClick";	// add mousedown to existing class string on mouseover
				}
				else {
					this.className = "cGameTileClick";	// class string null
				}
				gMouseOverCell = this;				// asign target for potential move (for key down event)
			}
			else {							// source focus cell null
				if (this.className) {				// class string not null
					if (this.className.search("cGameTileMouseOver") == -1) {
						this.className += " cGameTileMouseOver";	// add mouseover to existing class string
					}
					else;
				}
				else {
					this.className = "cGameTileMouseOver";		// class string null
				}
				gMouseOverCell = null;				// no potential move (for key down event)
			}
		}
		oGameCell.onmouseout = function () {
			if (this != gFocusCell) {						// leaving focus cell no action
				this.className = this.className.replace(" cGameTileMouseOver", "");	// cut mouseover (leading space)
				this.className = this.className.replace("cGameTileMouseOver", "");	// cut mouseover (no leading space)
				this.className = this.className.replace(" cGameTileClick", "");	// cut click style (leading space)
				this.className = this.className.replace("cGameTileClick", "");	// cut click (no leading space)
				gMouseOverCell = null;						// no potential move (for key down event)
			}
		}
		oGameCell.onclick = function () {
			if (gFocusCell) {							// second click, source focus cell exist
				if (this != gFocusCell) {					// switch game cells, source/destination different
					gFocusCell.className = gFocusCell.className.replace(" cGameTileClick", " cGameTileMouseOver");	// source cell
					gFocusCell.className = gFocusCell.className.replace("cGameTileClick", "cGameTileMouseOver");	// source cell
					this.className = this.className.replace(" cGameTileClick", "");	// destination cel to be moved
					this.className = this.className.replace("cGameTileClick", "");	// destination cell to be moved
					if (this == gFocusCell.nextSibling) {			// insert position lost after replace
						oDestinaationInsertBefore = gFocusCell;		// switch side by side cells (left to right)
					}
					else {
						oDestinaationInsertBefore = gFocusCell.nextSibling;
					}
					oSaveDestinationCell = this;				// save destination cell
					this.parentNode.replaceChild(gFocusCell,this);		// move source cell to destination node
					oDestinaationInsertBefore.parentNode.insertBefore(oSaveDestinationCell,oDestinaationInsertBefore);
				}
				else {								// no switch, source/destination same
					this.className = this.className.replace(" cGameTileClick", " cGameTileMouseOver");
					this.className = this.className.replace("cGameTileClick", "cGameTileMouseOver");
				}
				gFocusCell = null						// operation complete
			}
			else {									// first click, source focus cell is null
				gFocusCell = this;						// assign focus cell
				this.className = this.className.replace(" cGameTileMouseOver", " cGameTileClick");	// change style to click
				this.className = this.className.replace("cGameTileMouseOver", "cGameTileClick");	// change style to click
			}
		}
		oGameCell.onkeydown = function () {
			if (gFocusCell) {							// source game cell selected
				var index = 0;
				var cellLetter = oGameCell.innerHTML;
				if (gMouseOverCell) {						// cell move in process
					gMouseOverCell.className = gMouseOverCell.className.replace(" cGameTileClick", "");	// cut mouseover style
					gMouseOverCell.className = gMouseOverCell.className.replace("cGameTileClick", "");	// cut mouseover style
				}
				if ((event.ctrlKey || event.altKey) && (event.keyCode >= 37 && event.keyCode <= 40 )) { // shift/control and any arrow	
					oGameCell.innerHTML = genRandomLetter(oGameCell);	// generate random consonant or vowel
				}
				else if ((event.keyCode == 38) || (event.keyCode == 39)) {			// up arrow or right arrow - get next letter
					while (cellLetter != gLetterArray[index]) {	// find letter array index
						++index;
					}
					if (++index < gLetters) {			// next is not end of array
						oGameCell.innerHTML = gLetterArray[index];
					}
					else {						// circle back to start of array
						oGameCell.innerHTML = gLetterArray[0];
					}
				}
				else if ((event.keyCode == 37) || (event.keyCode == 40)) {			// left or down arrow - get previous letter
					while (cellLetter != gLetterArray[index]) {	// find letter arraw index
						++index;
					}
					if (--index >= 0) {				// next is not end of array
						oGameCell.innerHTML = gLetterArray[index];
					}
					else {						// circle back to end of array
						oGameCell.innerHTML = gLetterArray[gLetters - 1];
					}
				}
				cellLetter = oGameCell.innerHTML;			// new letter name assignment
				if (cellLetter == "&nbsp;") {				// test for space
					oGameCell.name = "";
					return;
				}
				for (index=0;index < gVowels;++index) {			// test for vowel
					if (cellLetter == gVowelArray[index]) {
						oGameCell.name = "vowel"
						return;
					}
				}
				for (index=0;index < gConsonants;++index) {		// test for consonant
					if (cellLetter == gConsonantArray[index]) {
						oGameCell.name = "consonant"
						return;
					}
				}
			}
		}
	}
	function buildShiftEvents(oShiftControl) {					// Note: when child removed, siblings shifted
		oShiftControl.className = "cShiftTile";					// assign style shift tiles
		var direction = oShiftControl.name;
		if (direction == "shiftLeft") {
			oShiftControl.innerHTML = "&larr;";				// left arrow
			oShiftControl.onmouseover = boxShiftRowMouseOver;
			oShiftControl.onmouseout = boxShiftRowMouseOut;
			oShiftControl.onclick = function () {
				var oRow = oShiftControl.parentNode;
				var oCell = oRow.removeChild(oRow.childNodes[1]);	// remove first game cell (roll left)
				oRow.insertBefore(oCell,oRow.lastChild);		// insert into last game cell 
				returnfocus ();
			}
		}
		else if (direction == "shiftRight") {
			oShiftControl.innerHTML = "&rarr;";				// right arrow
			oShiftControl.onmouseover = boxShiftRowMouseOver;
			oShiftControl.onmouseout = boxShiftRowMouseOut;
			oShiftControl.onclick = function () {				
				var oRow = oShiftControl.parentNode;
				var oCell = oRow.removeChild(oRow.lastChild.previousSibling);	// remove last game cell (roll right)
				oRow.insertBefore(oCell,oRow.childNodes[1]);			// insert into first game cell
				returnfocus ();
			}
		}
		else if (direction == "shiftUp") {
			oShiftControl.innerHTML = "&uarr;";				// up arrow
			oShiftControl.onmouseover = boxShiftColumnMouseOver;
			oShiftControl.onmouseout = boxShiftColumnMouseOut;
			oShiftControl.onclick = function () {
				var index = findColumnIndex (oShiftControl);			// call function for column index
				var oCell = gTableBody.firstChild.childNodes[1];		// start with 1st game column (2nd table column)
				var oFirstGameRow = gTableBody.childNodes[1];			// first game row
				var oLastGameRow = gTableBody.lastChild.previousSibling;	// last game row
				var oSecondLastGameRow = oLastGameRow.previousSibling;		// 2nd last game row
				var oSavedCell = oLastGameRow.childNodes[index];		// save cell from last game row
				oLastGameRow.replaceChild(oFirstGameRow.childNodes[index],oSavedCell);	// move 1st game cell to last
				var oRow = oFirstGameRow;					// start at first game row
				while (oRow != oSecondLastGameRow) {				// work downward until 2nd last game row
					oRow.insertBefore(oRow.nextSibling.childNodes[index],oRow.childNodes[index]);	// replace current cell with
					oRow = oRow.nextSibling;							// next down in column
				}
				oRow.insertBefore(oSavedCell,oRow.childNodes[index]);		// insert saved last game row cell to 2nd last game row
				returnfocus ();
			}
		}
		else if (direction == "shiftDown") {
			oShiftControl.innerHTML = "&darr;";				// down arrow
			oShiftControl.onmouseover = boxShiftColumnMouseOver;
			oShiftControl.onmouseout = boxShiftColumnMouseOut;
			oShiftControl.onclick = function () {
				var index = findColumnIndex (oShiftControl);		// call function for column index
				var oCell = gTableBody.lastChild.childNodes[1];		// start with 1st game column (2nd table column)
				var oFirstGameRow = gTableBody.childNodes[1];			// 2nd row is first game row
				var oSecondGameRow = oFirstGameRow.nextSibling;			// 2nd game row
				var oLastGameRow = gTableBody.lastChild.previousSibling;	// last game row
				var oSavedCell = oFirstGameRow.childNodes[index];		// save cell from 1st game row
				oFirstGameRow.replaceChild(oLastGameRow.childNodes[index],oSavedCell);	// move last cell to 1st
				var oRow = oLastGameRow;					// start at last game row
				while (oRow != oSecondGameRow) {				// work upward until 2nd row
					oRow.insertBefore(oRow.previousSibling.childNodes[index],oRow.childNodes[index]);	// replace current cell with
					oRow = oRow.previousSibling;								// previous up in column
				}
				oRow.insertBefore(oSavedCell,oRow.childNodes[index]);		// insert saved 1st row cell to 2nd game row
				returnfocus ();
			}
		}
	}
	function buildKeyEvents() {
		document.onkeydown = function () {
			clearhighlights ();				// clear any previous highlights
			var letter = gLetterArray[event.keyCode - 65]	// key codes 65 to 90 letters (array returns null if index out of range)
			if (letter) {					// highlight
				highlightMatchingCells (letter);	// call function to highlight matching cells
			}
		}
	}
	function highlightMatchingCells (letter) {
		var oRow = gTableBody.firstChild.nextSibling;		// first game row
		var oLastTableRow = gTableBody.lastChild;		// last table row
		var oCell,oLastCell;
		while (oRow != oLastTableRow) {
			oCell = oRow.firstChild.nextSibling;		// first game row, first game cell
			oLastCell = oRow.lastChild;			// last table cell for row being searched
			while (oCell != oLastCell) {
				if (letter == oCell.innerHTML) {
					if (oCell.className) {					// class string not null
						oCell.className += " cGameTileHighlight";		// add hightlighted to existing classes
					}
					else {							// class string null
						oCell.className = "cGameTileHighlight";		// assign highlighted to null class
					}
				}
			oCell = oCell.nextSibling;			// chain to next cell in the row being searched
			}
		oRow = oRow.nextSibling;				// chain to next row in the table
		}
	}
	function clearhighlights () {
		var oHighlightedArray = document.getElementsByTagName ("td")	// collection of table cells
		var cells = oHighlightedArray.length;				// total cells in array
		for (var i=0;i<cells;++i) {
			if (oHighlightedArray[i].className) {					// class string not null
				oHighlightedArray[i].className = oHighlightedArray[i].className.replace(" cGameTileHighlight", "");	// leading space
				oHighlightedArray[i].className = oHighlightedArray[i].className.replace("cGameTileHighlight", "");	// no leading space
			}
		}
	}
	function boxShiftRowMouseOver () {
		this.className = this.className.replace(" cShiftTile", " cShiftTileMouseOver");	// replace with mouseover (leading space)
		this.className = this.className.replace("cShiftTile", "cShiftTileMouseOver");	// replace with mouseover (no leading space)
		var oRow = this.parentNode;			// shift row
		var oCell = oRow.firstChild.nextSibling;	// first game cell
		var oLastTableCell = oRow.lastChild;		// last table cell for shift row
		while (oCell != oLastTableCell) {
			if (oCell.className) {					// class string not null
				oCell.className += " cShiftRowMouseOver";	// add shift mouseover to class string
			}
			else {							// class string null
				oCell.className = "cShiftRowMouseOver";		// assign shift mouseover to class string
			}
			oCell = oCell.nextSibling;				// chain to next cell in shift row
		}
	}
	function boxShiftRowMouseOut () {
		this.className = this.className.replace(" cShiftTileMouseOver", " cShiftTile");	// replace with mouseout (leading space)
		this.className = this.className.replace("cShiftTileMouseOver", "cShiftTile");	// replace with mouseout (no leading space)
		var oRow = this.parentNode;			// shift row
		var oCell = oRow.firstChild.nextSibling;	// first game cell
		var oLastTableCell = oRow.lastChild;		// last table cell for shift row
		while (oCell != oLastTableCell) {
			oCell.className = oCell.className.replace(" cShiftRowMouseOver", "");	// cut shift row from class string (leading space)
			oCell.className = oCell.className.replace("cShiftRowMouseOver", "");	// cut shift row from class string (no leading space)
			oCell = oCell.nextSibling;						// chain to next cell in shift row
		}
	}
	function boxShiftColumnMouseOver () {
		this.className = this.className.replace(" cShiftTile", " cShiftTileMouseOver");	// replace with mouseover (leading space)
		this.className = this.className.replace("cShiftTile", "cShiftTileMouseOver");	// replace with mouseover (no leading space)
		var index = findColumnIndex (this);		// column index, arguement is element of event
		oRow = gTableBody.firstChild.nextSibling;	// first game row, 2nd table row
		oLastTableRow = gTableBody.lastChild;		// last table row
		while (oRow != oLastTableRow) {
			if (oRow.childNodes[index].className) {					// class string not null
				oRow.childNodes[index].className += " cShiftColumnMouseOver";	// add shift mouseover to class string
			}
			else {									// class string null
				oRow.childNodes[index].className = "cShiftColumnMouseOver";	// assign shift mouseover to class string
			}
			oRow = oRow.nextSibling;						// chain to next cell in shift row
		}
	}
	function boxShiftColumnMouseOut () {
		this.className = this.className.replace(" cShiftTileMouseOver", " cShiftTile");	// replace with mouseout (leading space)
		this.className = this.className.replace("cShiftTileMouseOver", "cShiftTile");	// replace with mouseout (no leading space)
		var index = findColumnIndex (this);		// column index, arguement is element of event
		oRow = gTableBody.firstChild.nextSibling;	// first game row, 2nd table row
		oLastTableRow = gTableBody.lastChild;		// last table row
		while (oRow != oLastTableRow) {
			oRow.childNodes[index].className = oRow.childNodes[index].className.replace(" cShiftColumnMouseOver", "");	// leading space
			oRow.childNodes[index].className = oRow.childNodes[index].className.replace("cShiftColumnMouseOver", "");	// no leading space
			oRow = oRow.nextSibling;						// chain to next cell in shift row
		}
	}
	function returnfocus () {
		if (gFocusCell) {				// if game cell had focus, return focus to game cell after row/column shift
			gFocusCell.focus();
		}
	}
	function findColumnIndex (oCell) {
		var index = -1;				// extra interation to get null sibling
		while (oCell) {				// chain until end of table
			oCell = oCell.previousSibling;	// null when no previous sibling
			++index;
		}
		return index;
	}
	</script>

	<script type="text/javascript">			// Google Analytics

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-23226966-3']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>

	</head>
	<body onload="startScript()">

	<div id="dHeader" class="heading_wrapper">
		Scramble Word Game
		<div style="font-size:medium; font-weight:normal; text-align:left; position:absolute;
			bottom:0.5em; left:0.5em; font-style:italic" >
			Created by: <a href="mailto:MichaelWSteinberg@ATT.net">Michael William Steinberg</a>, all rights reserved
		</div>
		<div id="dInstructionButton" class="cInstructionButton"></div>
	</div>

	<div class="game_wrapper">
		<div id="dGamePanel"></div>
		<div id="dControlPanel">
			<form id="fControlPanel" >
				<div>Letter Size (changes instantly):&nbsp;&nbsp;
					<label for="smallTileSize">Small</label>
					<input type="radio" name="tileSize" id="smallTileSize" value="small" 
						onClick="gTableObject.style.fontSize='small';">
					<label for="mediumTileSize">Medium</label>
					<input type="radio" name="tileSize" id="mediumTileSize" value="medium" checked
						onClick="gTableObject.style.fontSize='medium';">
					<label for="largeTileSize">Large</label>
					<input type="radio" name="tileSize" id="largeTileSize" value="large" 
						onClick="gTableObject.style.fontSize='large';">
				</div>
				<div>Game Table Size (changes instantly):&nbsp;&nbsp;
					<label>Rows
					<select id="fRows" onchange = "rowNumberChange(this.options[this.selectedIndex].value)" >
						<option value=10 label=10 selected >		// option onclick does not work pre IE9 versions
						<option value=15 label=15 >
						<option value=20 label=20 >
						<option value=30 label=30 >
						<option value=40 label=40 >
						<option value=50 label=50 >
						<option value=60 label=60 >
						<option value=70 label=70 >
						<option value=80 label=80 >
						<option value=90 label=90 >
						<option value=100 label=100 >
						<option value=110 label=110 >
						<option value=120 label=120 >
						<option value=130 label=130 >
						<option value=140 label=140 >
						<option value=150 label=150 >
						<option value=200 label=200 >
						<option value=300 label=300 >
					</select>
					</label>
					<label>Columns
					<select id="fColumns" onchange = "columnNumberChange(this.options[this.selectedIndex].value)" >
						<option value=10 label=10 >
						<option value=15 label=15 >
						<option value=20 label=20 >
						<option value=30 label=30 >
						<option value=40 label=40 selected >
						<option value=50 label=50 >
						<option value=60 label=60 >
						<option value=70 label=70 >
						<option value=80 label=80 >
						<option value=90 label=90 >
						<option value=100 label=100 >
						<option value=110 label=110 >
						<option value=120 label=120 >
						<option value=130 label=130 >
						<option value=140 label=140 >
						<option value=150 label=150 >
						<option value=200 label=200 >
						<option value=300 label=300 >
					</select>
					</label>
				</div>
			</form>
		</div>

<div id="dInstructions" class="instruction_wrapper">
<p><b><u>Instructions:</u></b></p>
<p>Test your skill creating words and phrases from the randomly generated letters.  Half the letters are consonants and half are vowels.  The letters are surrounded by blank tiles which serve to separate words.  The functions below operate on any game tile: consonant, vowel or blank.</p>
<ul>
<li><p><span style="background-color:yellow">Highlight</span> all occurrences of a letter on the game board by pressing the corresponding key on the keyboard.</p></li>
<li><p>The <u>Up &uarr; Down &darr; Left &larr; and Right &rarr; Buttons</u> shift an entire column up or down one tile position, or an entire row left or right one tile position.</p></li>
<li><p><u>Switch Two Tiles</u> by clicking the first, then clicking the second.</p></li>
<li><p><u>Change Letter</u> by first clicking its tile.  The up &uarr; and right &rarr; arrow keys rotate the letter up the alphabet with blank coming after "Z".  The down &darr; and left &larr; arrows rotate the letter down the alphabet with blank coming before "A".  After blank, the rotation wraps arround:  "A" appears in the upward rotation and "Z" appears in a downward rotation.</p>
<p>CTRL and ALT with any of the arrows generates a random letter.  A consonant is replaced with a random consonant and a vowel with a random vowel.  A blank tile is replaced with a random letter of either type or a blank.</p></li>
</ul>
<p>For fun, see if any words appear in the random letters before you start.  This could spark an idea or intuition.</p>
</div>
</div>

<div id="dFooter" class="footer_wrapper">

<iframe src="http://www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

<div style = "clear:left;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(document.location.toString()),'ptm','height=450,width=550').focus())">
    <img src="http://cms.myspacecdn.com/cms//ShareOnMySpace/Myspace_btn_ShareOnMyspace.png" border="0" alt="Share on Myspace" /></a>

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>
</div>

<p><u>Scramble Word Game, Version 2.10, Tested IE9</u></p>

<p>Relax with stress free games created by <a href="mailto:MichaelWSteinberg@ATT.net">Michael William Steinberg</a>.</p>

<p>Build phrases and sentences by switching the positions of letters and shifting entire rows and columns in a table grid.  Pressing a letter key highlights everywhere it appears on the table to help you build your words.</p>

<p>The game is programmed in JavaScript; featuring dynamic HTML, DOM (Document Object Model) manipulation, random letters, and extensive dynamic table manipulation with entire row and column shifting.</p>

<p>Click the Show Instructions button in the header to get started.</p>

</div>
	</body>
</html>