<!DOCTYPE HTML>

<html>

<meta name="author" content="Michael William Steinberg" /> 
<meta name="owner" content="Michael William Steinberg" />
<meta name="name" content="Magic Word Game" />
<meta name="reply-to" content="MichaelWSteinberg@ATT.net" />
<meta name="description" content="Magic Word Game. Turn randomly generated letters into words." /> 
<meta name="keywords" content="Magic, 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." />
<meta name="doc-rights" content="All rights reserved.  No portion of the GUI or source code is permitted to be copied." />

	<head>
	<title>Magic 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;
		margin-bottom:1px;
		z-index:1;
	}
	.cInstructionButton {
		position:absolute;
		width:8em;
		margin:0;
		bottom:0.5em;
		right:0.5em;
		font-size:medium;
		font-weight:normal;
		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;
		cursor:pointer;
	}
	.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;
	}
	.general_wrapper {
		clear:left;
	}
	.cWordBox {
		position:relative;
		float:left;
		width:54em;
		height:3em;
		padding:0.5em;
		border-with:thin;
		border-color:darkblue;
		border-style:solid;
		overflow:auto;
	}
	.cActionButton {
		position:relative;
		text-align:center;
		background-color:lightgray;
		border-style:outset;
		border-width:thin;
	}
	.cActionButtonMouseover {
		background-color:yellow;
		border-style:outset;
		border-width:thin;
	}
	.cLetterBox {
		clear:left;
		float:left;
		border-with:thin;
		border-color:darkblue;
		border-style:solid;
	}
	.cGameTileHighlight {
		background-color:yellow;
	}
	.cLetterTileMouseOver {
		border-color:black;
	}
	.cGameTileClick {
		border-style:dashed;
		border-color:black;
	}
	.cWordTopCap {				
		border-color:black black white black;
	}
	.cWordBottomCap {
		border-color:white black black black;
	}
	.cWordLeftCap {
		border-color:black white black black;
	}
	.cWordRightCap {
		border-color:black black black white;
	}
	.cWordRow {
		border-color:black white black white;
	}
	.cWordColumn {
		border-color:white black white black;
	}
	.cWordFullBox {
		border-color:black;
	}
	.cWordHighlight {
		background-color:lightblue;
	}
	.cWordDashBox {
		border-style:dashed;
		border-color:black;
	}
	.cWord {
		float:left;
		padding-right:0.25em;
		padding-left:0.25em;
		border-style:solid;
		border-width:thin;
		border-color:white;
	}
	.cWordBoxHighlight {
		background-color:lightblue;
	}
	.cWordMouseover {
		border-color:black;
	}
	.footer_wrapper {
		position:relative;
		float:left;
		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;
	}
	table {
		background-color:white;
		color:black;
		font-size:medium;
		text-align:center;
	}
	td {
		margin:0;
		width:1em;
		border-style:solid;
		border-width:thin;
		border-color:white;
	}
	</style>
	<script type="text/JavaScript">

// Global Variables

	// Arrays

	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"];
	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 gScrambleArray1 = new Array ();		// image of letters in letter table to speed scramble
	var gScrambleArray2 = new Array ();		// image of letters in letter table to speed scramble
	var gStyleStackArray = new Array ();		// array of letter table cells with word box classess (push/pop functions)

	// Object Pointers

	var gLetterTable,gLetterTableBody;		// letter table and body
	var gStartCell;					// letter table cell at first click
	var gWordBox;					// word box division
	var gMoveWord;					// word division within word box
	var gScrambleArrayAct = gScrambleArray1;	// swicth source and destination arrays for multiple scrambles
	var gScrambleArrayAlt = gScrambleArray2;	// swicth source and destination arrays for multiple scrambles


	// Numbers

	var gRows=8,gColumns=40;			// letter table size
	var gLetters = gLetterArray.length;		// number of letters in array
	var gConsonants = gConsonantArray.length;	// number of consonants in array
	var gVowels = gVowelArray.length;		// number of vowels in array
	var gLetterCells = gRows * gColumns;		// total cells in letter table

	// Strings

	var gHighlightedLetter;				// store highlighted letter for refresh and scramble
	var gWord;					// word formatted in letter table

	// Boolean

	var gLastVowel;					// true = vowel, false = consonant, toggle during letter table refresh (set in refresh function)
	var gSecondClick = false;			// word selected in letter box, true = new word cannot be select


// Start Script

	function startScript() {
		gScrambleArray1.length = gLetterCells;
		gScrambleArray2.length = gLetterCells;
		var oInstructionButton = document.getElementById("dInstructionButton");
		var oInstructions = document.getElementById("dInstructions");
		buildInstructionEvents(oInstructionButton, oInstructions);	// show/hide instructions
		var oLetterBox = document.getElementById("dLetterBox");
		buildLetterTable(oLetterBox);
		gWordBox = document.getElementById("dWordBox");
		buildKeyEvents();						// highlight letter when key down anywhere in document
	}
	function buildInstructionEvents (oInstructionButton, oInstructions) {
		oInstructionButton.name = "show";
		oInstructionButton.innerHTML = "Show&nbsp;Instructions";
		oInstructionButton.onmouseover = function () {
			addClass (this, "cInstructionButtonMouseover");
		}
		oInstructionButton.onmouseout = function () {
			removeClass (this, "cInstructionButtonMouseover");
		}
		oInstructionButton.onclick = function () {
			if (oInstructionButton.name == "show") {
				oInstructionButton.name = "hide";
				oInstructionButton.innerHTML = "Hide&nbsp;Instructions";
				oInstructions.style.visibility = "visible";
			}
			else if (oInstructionButton.name == "hide") {
				oInstructionButton.name = "show";
				oInstructionButton.innerHTML = "Show&nbsp;Instructions";
				oInstructions.style.visibility = "hidden";
			}						
		}
	}	
	function buildLetterTable(oLetterBox) {
		var i,j;
		var oLetterRow,oLetterCell;
		gLetterTable = document.createElement("table");		// create letter table
		oLetterBox.appendChild(gLetterTable);			// append table to letter box div
		gLetterBody = document.createElement("tbody");		// create letter table body
		gLetterTable.appendChild(gLetterBody);			// append body to letter table
		for(i=0;i<gRows;++i) {					// build rows
			oLetterRow = document.createElement("tr");	// create first table row
			gLetterBody.appendChild(oLetterRow);		// append new row to letter table body
			for(j=0;j<gColumns;++j) {			// build letter cells
				oLetterCell = document.createElement("td");	// create table cell
				buildCellEvents(oLetterCell);		// call function to build game cell event handlers
				oLetterRow.appendChild(oLetterCell);	// append new cell to row
			}
		}
		refreshLetterTable ();
	}
	function refreshLetterTable () {
		gLastVowel = true;					// rotate between consonant and vowel
		var i;
		for(i=0;i<=gLetterCells;++i) {
			if (gLastVowel) {
				gScrambleArrayAct[i] = gVowelArray[Math.floor(Math.random() * gVowels)];		// random vowel
			}
			else {
				gScrambleArrayAct[i] = gConsonantArray[Math.floor(Math.random() * gConsonants)];	// random consonant
			}
			gLastVowel = !gLastVowel			// rotate true/false
		}
		loadLetterTable ()
	}
	function loadLetterTable () {
		var oLetterRow = gLetterBody.firstChild;		// first letter table row
		var oLetterCell;					// pointer to table cell object
		i=0;							// start array
		while (oLetterRow) {					// null after last letter table row
			oLetterCell = oLetterRow.firstChild;		// first cell of the row
			while(oLetterCell) {				// null after last row cell
				oLetterCell.innerHTML = gScrambleArrayAct[i++];	// increment index after assignment
				oLetterCell = oLetterCell.nextSibling;	// chain to next cell
			}
			oLetterRow = oLetterRow.nextSibling;		// chain to next row
		}
	}		
	function scrambleLetterTable () {
		var i,j,oSave;
		for(i=0;i<gLetterCells;++i) {				// initialize alternate array
			gScrambleArrayAlt[i] = null;
		}
		for(i=0;i<gLetterCells;++i) {				// move each active array item to ramdon empty alternative array item
			while(gScrambleArrayAlt[j = Math.floor(Math.random() * gLetterCells)] != null);	// stop at first random empty item
			gScrambleArrayAlt[j] = gScrambleArrayAct[i];	// move active array item to alternative array item
		}
		oSave = gScrambleArrayAct;				// save pointer to active array
		gScrambleArrayAct = gScrambleArrayAlt;			// point active to alternate array
		gScrambleArrayAlt = oSave;				// point alternate to old active array
		loadLetterTable ();
	}
	function buildCellEvents (oLetterCell) {
		oLetterCell.onmouseover = function () {
			if (! gSecondClick) {
				if (gStartCell) {
					boxWord (this);			// box word after first click
				}
				else {
					addClass(this, "cLetterTileMouseOver");	// box letter as a pointer
				}
			}
		}
		oLetterCell.onmouseout = function () {
			if (! gSecondClick) {
				if (gStartCell) {  // && (this != gStartCell)) {			// leaving start cell no action
					removeClass ("cLetterTileMouseOver", "cWordDashBox", "cWordTopCap", "cWordBottomCap", 
					"cWordLeftCap", "cWordRightCap", "cWordRow", "cWordColumn", "cWordFullBox", "cWordHighlight");
				}
				else {
					removeClass (this, "cLetterTileMouseOver");
				}
			}
		}
		oLetterCell.onclick = function () {
			if (! gSecondClick) {									// do process third click
				if (gStartCell) {								// second click, start cell exist
					gSecondClick = true;
					if (gWord) {								// valid word, not null
						gWord = gWord.substr(0,1) + gWord.substring(1).toLowerCase();	// first lette upper, rest lower
						document.getElementById("dAddWordButton").innerHTML = "Add&nbsp;Word&nbsp;\"" + gWord + "\"";
					}
				}
				else {										// first click
					gStartCell = this;							// assign start cell for word
				}
				boxWord (this);
			}
		}
	}
	function boxWord (oEndCell) {
		if (! gSecondClick) {							// first click box
			gWord = gStartCell.innerHTML;					// initialize word to first letter
		}
		var oLetterCell;
		if (oEndCell == gStartCell) {						// test one letter word
			if (gSecondClick) {						// one letter word
				removeClass (gStartCell, "cWordDashBox");			// remove first click style
				addClass (gStartCell, "cWordHighlight", "cWordFullBox");	// highlight word
			}
			else {
				addClass (gStartCell, "cWordDashBox");			// first click style, one letter word before second click
			}
			return;								// return to caller
		}
		else {									// multi-letter word
			var startColumn = findColumnIndex (gStartCell);		
			var endColumn = findColumnIndex (oEndCell);
			var oLetterCell = gStartCell;
			if (oEndCell.parentNode == gStartCell.parentNode) {		// same row, horizontal word
				if (startColumn < endColumn) {				// row forward
					addClass (oLetterCell, gSecondClick?"cWordHighlight":"cWordLeftCap");
					do {
						oLetterCell = oLetterCell.nextSibling;	// chain foward (right)
						if (gSecondClick) {
							addClass (oLetterCell, "cWordHighlight");
						}
						else {
							addClass (oLetterCell, (oLetterCell == oEndCell)?"cWordRightCap":"cWordRow");
							gWord += oLetterCell.innerHTML;
						}	
					} while (oLetterCell != oEndCell);
					return;						// return to caller
				}
				else if (startColumn > endColumn) {			// row backward
					addClass (oLetterCell, gSecondClick?"cWordHighlight":"cWordRightCap");
					do {
						oLetterCell = oLetterCell.previousSibling;	// chain backward left
						if (gSecondClick) {
							addClass (oLetterCell, "cWordHighlight");
						}
						else {
							addClass (oLetterCell, (oLetterCell == oEndCell)?"cWordLeftCap":"cWordRow");
							gWord += oLetterCell.innerHTML;
						}	
					} while (oLetterCell != oEndCell);
					return;						// return to caller
				}
			}
			else {								// not the same row
				var startRow = findRowIndex (gStartCell);
				var endRow = findRowIndex (oEndCell);
				var i;
				if (startColumn == endColumn) {				// same column, vertical word
					if (startRow < endRow) {			// column down
						addClass (gStartCell, gSecondClick?"cWordHighlight":"cWordTopCap");
						for (i=startRow+1;i<=endRow;++i) {	// chain down rows
							oLetterCell = gLetterBody.childNodes[i].childNodes[startColumn];
							if (gSecondClick) {
								addClass (oLetterCell, "cWordHighlight");
							}
							else {
								addClass (oLetterCell, (i == endRow)?"cWordBottomCap":"cWordColumn");
								gWord += oLetterCell.innerHTML;
							}	
						}
						return;					// return to caller
					}
					else if (startRow > endRow) {			// column up
						addClass (gStartCell, gSecondClick?"cWordHighlight":"cWordBottomCap");
						for (i=startRow-1;i>=endRow;--i) {
							oLetterCell = gLetterBody.childNodes[i].childNodes[startColumn];
							if (gSecondClick) {
								addClass (oLetterCell, "cWordHighlight");
							}
							else {
								addClass (oLetterCell, (i == endRow)?"cWordTopCap":"cWordColumn");
								gWord += oLetterCell.innerHTML;
							}	
						}
						return;					// return to caller
					}
				}
				else {									// test diagonal word
					var j;								// store vertical/horizontal distance
					if ((j=Math.abs(startRow - endRow)) == Math.abs(startColumn - endColumn)) {	// vadil diagonal
						addClass (gStartCell, gSecondClick?"cWordHighlight":"cWordFullBox");
						for (i=1;i<=j;++i) {
							if (startRow < endRow) {			// diagonal down
								if (startColumn < endColumn) {		// diagonal down right
								oLetterCell = gLetterBody.childNodes[startRow+i].childNodes[startColumn+i];
								}
								else {					// diagonal down left
								oLetterCell = gLetterBody.childNodes[startRow+i].childNodes[startColumn-i];
								}
							}
							else {						// diagonal up
								if (startColumn < endColumn) {		// diagonal up right
								oLetterCell = gLetterBody.childNodes[startRow-i].childNodes[startColumn+i];
								}
								else {					// diagonal up left
								oLetterCell = gLetterBody.childNodes[startRow-i].childNodes[startColumn-i];
								}
							}
							if (gSecondClick) {
								addClass (oLetterCell, "cWordHighlight");
							}
							else {
								addClass (oLetterCell, "cWordFullBox");
								gWord += oLetterCell.innerHTML;
							}
						}
						return;							// return to caller
					}
					else {								// no valid word (not row, column or diagonal)
						gSecondClick = false;
						gWord = null;						
						addClass (gStartCell, "cWordDashBox");
						addClass (oEndCell, "cWordDashBox");
					}
				}
			}
		}
	}
	function addClass (oElement) {
		gStyleStackArray.push(oElement);				// stack of cells with modified class (style)
		var sClass = oElement.className;
		for (var i=1; i<arguments.length; ++i){ 			// step through arguments (classes) to be added
			if (sClass) {						// class string not null
				if (sClass.search(arguments[i]) == -1) {	// new class not in class string
					sClass += (" " + arguments[i])		// add new class with leding space to back of class string
				}
				else;
			}
			else {							// null class string
				sClass = arguments[i];				// add new class without leading space to class string
			}
		}
		oElement.className = sClass;					// asign class string to element
	}
	function removeClass () {
		var oElement;
		if (arguments[0].nodeType == 1)	{						// element node 1, null if not node object
			oElement = arguments[0];						// target specific element
			for (var i=1; i<arguments.length; ++i){ 				// step through arguments to be removed
				oElement.className = oElement.className.replace(" " + arguments[i], "");	// cut cut class (leading space)
				oElement.className = oElement.className.replace(arguments[1], "");	// cut class (no leading space)
			}
		}
		else {										// remove classes from all elements in stack
			var oLetterCell;
			while (oElement = gStyleStackArray.pop()) {				// run through stack
				for (var i=0; i<arguments.length; ++i){ 			// step through arguments to be removed
					oElement.className = oElement.className.replace(" " + arguments[i], ""); // cut class (leading space)
					oElement.className = oElement.className.replace(arguments[i], ""); // cut class (no leading space)
				}
			}
		}
	}
	function cancelWord(oAddWordButton) {
		if (! oAddWordButton) {						// cancel not called from add word function
			oAddWordButton = document.getElementById ("dAddWordButton");
		}
		gStartCell = null;
		gSecondClick = false;
		gWord = null;
		oAddWordButton.innerHTML = "No&nbsp;Word&nbsp;to&nbsp;Add";	// reset word button label
		removeClass ("cLetterTileMouseOver", "cWordDashBox", "cWordTopCap", "cWordBottomCap", "cWordLeftCap",
			"cWordRightCap", "cWordRow", "cWordColumn", "cWordFullBox", "cWordHighlight");
	}
	function addWord(oAddWordButton) {
		if (gWord) {							// word null, no letters selected
			var oWordDiv =  document.createElement("div");		// create div for new word
			addClass(oWordDiv, "cWord");				// assign style
			oWordDiv.innerHTML = gWord;
			buildWordEvents (oWordDiv);
			gWordBox.appendChild (oWordDiv);			// append word div to word box
			cancelWord (oAddWordButton);				// clear letter box styles
		}
	}
	function buildWordEvents (oWordDiv) {
		oWordDiv.onmouseover = function () {
			if (! gMoveWord) {
				addClass(this, "cWordMouseover");			// box word as a pointer
			}
		}
		oWordDiv.onmouseout = function () {
			if (! gMoveWord) {
				removeClass (this, "cWordMouseover");
			}
		}
		oWordDiv.onclick = function () {
			if (gMoveWord && (gMoveWord == this)) {			// second click, same word, unselect
				cancelWordSelection ();				// cancel function removes both highlight and box
				addClass(this, "cWordMouseover");		// box word as a pointer
			}
			else {							// first click on new word
				if (gMoveWord) {
					removeClass (gMoveWord, "cWordMouseover", "cWordBoxHighlight");	// remove highlight/mouseover on previous selection
				}
				gMoveWord = this;				
				addClass(this, "cWordMouseover", "cWordBoxHighlight");			// highlight/mouseover selected word
				document.getElementById("dWordLeftButton").innerHTML = "&larr;&nbsp;Move&nbsp;\"" + gMoveWord.innerHTML + "\"&nbsp;Left";
				document.getElementById("dWordRightButton").innerHTML = "&rarr;&nbsp;Move&nbsp;\"" + gMoveWord.innerHTML + "\"&nbsp;Right";
				document.getElementById("dWordDeleteButton").innerHTML = "Delete&nbsp;\"" + gMoveWord.innerHTML + "\"";
			}
		}
	}
	function deleteWord () {
		if (gMoveWord) {						// null if no word selected
			gMoveWord.parentNode.removeChild(gMoveWord);		// remove deleted word
			gMoveWord = null;					// disconect deleted word
			document.getElementById("dWordLeftButton").innerHTML = "&larr;&nbsp;No&nbsp;Word&nbsp;Selected";
			document.getElementById("dWordRightButton").innerHTML = "&larr;&nbsp;No&nbsp;Word&nbsp;Selected";
			document.getElementById("dWordDeleteButton").innerHTML = "No&nbsp;Delete&nbsp;Word&nbsp;Selected";
		}
	}
	function moveWordLeft () {
		if (gMoveWord && gMoveWord.previousSibling) {				// null if no word selected, previous null if first word
			gWordBox.insertBefore(gMoveWord, gMoveWord.previousSibling);	// switch words
		}
	}
	function moveWordRight () {
		if (gMoveWord && gMoveWord.nextSibling) {				// null if no word selected, next null if last word
			gWordBox.insertBefore(gMoveWord.nextSibling, gMoveWord);	// switch words

		}
	}
	function cancelWordSelection () {
		if (gMoveWord) {
			removeClass (gMoveWord, "cWordMouseover", "cWordBoxHighlight");		// remove highlight
			gMoveWord = null;
			document.getElementById("dWordLeftButton").innerHTML = "&larr;&nbsp;No&nbsp;Word&nbsp;Selected";
			document.getElementById("dWordRightButton").innerHTML = "&larr;&nbsp;No&nbsp;Word&nbsp;Selected";
			document.getElementById("dWordDeleteButton").innerHTML = "No&nbsp;Delete&nbsp;Word&nbsp;Selected";
		}
	}
	function buildKeyEvents () {
		document.onkeydown =  function () {
			updateHighlights(false);
			moveLetter ();
		}
	}
	function updateHighlights (oldLetter) {		
		if (!oldLetter) {				// arguement null, retrieve new key code
			gHighlightedLetter = gLetterArray[event.keyCode - 65] // key codes 65 to 90 letters (array returns null if index out of range)	
		}
		var oRow = gLetterBody.firstChild;			// first letter row
		var oCell,oLastLetterCell;
		while (oRow) {						// null after last row
			oCell = oRow.firstChild;			// first letter cell
			while (oCell) {					// null after last cell for row
				if (gHighlightedLetter == oCell.innerHTML) { 
					addClass (oCell, "cGameTileHighlight"); 
				}
				else {
					removeClass (oCell, "cGameTileHighlight");
				}
			oCell = oCell.nextSibling;			// chain to next cell in the row being searched
			}
		oRow = oRow.nextSibling;				// chain to next row in the table
		}
	}
	function moveLetter () {
		if (gSecondClick && (gWord.length == 1)) {						// test for one letter word
			if ((event.keyCode == 37) && gStartCell.previousSibling) {			// left arrow and not first cell in row
				gStartCell.parentNode.insertBefore(gStartCell, gStartCell.previousSibling);	// switch letters, same row
			}
			else if ((event.keyCode == 39) && gStartCell.nextSibling) {			// right arrow and not last cell in row
				gStartCell.parentNode.insertBefore(gStartCell.nextSibling, gStartCell);		// switch letters, same row
			}
			else if ((event.keyCode == 38) || (event.keyCode == 40)) {			// up or down arrow
				var oStartRow = gStartCell.parentNode;					// pointer to start cell parent row
				var startColumn = findColumnIndex (gStartCell);				// column index
				if (event.keyCode == 38 && oStartRow.previousSibling) {			// up arrow and not first row
					oStartRow.insertBefore(oStartRow.previousSibling.childNodes[startColumn], gStartCell); // move destination cell down
					if (gStartCell.nextSibling) {					// not last cell of row
						oStartRow.previousSibling.insertBefore(gStartCell, oStartRow.previousSibling.childNodes[startColumn]);
					}
					else {								// last cell of row
						oStartRow.previousSibling.appendChild(gStartCell);	// append start one row up
					}
				}
				else if (event.keyCode == 40 && oStartRow.nextSibling) {		// down arrow and not first row
					oStartRow.insertBefore(oStartRow.nextSibling.childNodes[startColumn], gStartCell); // move destination cell up
					if (gStartCell.nextSibling) {					// not last cell of row
						oStartRow.nextSibling.insertBefore(gStartCell, oStartRow.nextSibling.childNodes[startColumn]); // start down
					}
					else {								// last cell of row
						oStartRow.nextSibling.appendChild(gStartCell);		// append start one row down
					}
				}
			}
		}
	}
	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;
	}
	function findRowIndex (oCell) {
		var index = -1;				// extra interation to get null sibling
		var oRow = oCell.parentNode;
		while (oRow) {				// chain up the table
			oRow = oRow.previousSibling;	// null when no previous sibling
			++index;
		}
		return index;
	}
	</script>

<script type="text/javascript">

  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">
		Magic 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><table><tbody><tr>
			<td id="dInstructionButton" class="cInstructionButton">Show&nbsp;Instructions</td>
		</tr></tbody></table></div>
	</div>

	<div class="game_wrapper">
		<div class="general_wrapper">
			<div id="dWordBox" class="cWordBox"></div>
			<div class="general_wrapper">
				<table><tbody><tr>
					<td id="dWordLeftButton" class="cActionButton"
						onMouseover="this.className='cActionButtonMouseover';"
						onMouseout="this.className='cActionButton';"
						onClick="moveWordLeft();">
						&larr;&nbsp;No&nbsp;Word&nbsp;Selected</td>
					<td id="dWordRightButton" class="cActionButton"
						onMouseover="this.className='cActionButtonMouseover';"
						onMouseout="this.className='cActionButton';"
						onClick="moveWordRight();">
						&rarr;&nbsp;No&nbsp;Word&nbsp;Selected</td>
					<td id="dWordDeleteButton" class="cActionButton"
						onMouseover="this.className='cActionButtonMouseover';"
						onMouseout="this.className='cActionButton';"
						onClick="deleteWord()">
						No&nbsp;Delete&nbsp;Word&nbsp;Selected</td>
					<td id="dWordCancelSelectionButton" class="cActionButton"
						onMouseover="this.className='cActionButtonMouseover';"
						onMouseout="this.className='cActionButton';"
						onClick="cancelWordSelection ()">
						Cancel&nbsp;Selection</td>
				</tr></table></tbody>
			</div>
		</div>
		<div id="dLetterBox" class="cLetterBox"></div>
		<div class="general_wrapper">
			<table><tbody><tr>
				<td id="dAddWordButton" class="cActionButton"
					onMouseover="this.className='cActionButtonMouseover';"
					onMouseout="this.className='cActionButton';"
					onClick="addWord(this)">
					No&nbsp;Word&nbsp;to&nbsp;Add</td>
				<td id="dCancelWordButton" class="cActionButton"
					onMouseover="this.className='cActionButtonMouseover';"
					onMouseout="this.className='cActionButton';"
					onClick="cancelWord()">
					Cancel&nbsp;Word</td>
				<td id="dRefreshLette"dAddWordButton"rsButton" class="cActionButton"
					onMouseover="this.className='cActionButtonMouseover';"
					onMouseout="this.className='cActionButton';"
					onClick="cancelWord (); refreshLetterTable(); updateHighlights(true)">
					Refresh&nbsp;Letters</td>
				<td id="dScrableLettersButton" class="cActionButton"
					onMouseover="this.className='cActionButtonMouseover';"
					onMouseout="this.className='cActionButton';"
					onClick="cancelWord (); scrambleLetterTable(); updateHighlights(true)">
					Scramble&nbsp;Letters</td>
			</tr></tbody></table>
		</div>
		<div class="general_wrapper">Letter Size (changes instantly):&nbsp;&nbsp;
			<label for="smallTileSize">Small</label>
			<input type="radio" name="tileSize" id="smallTileSize" value="small" 
				onClick="gLetterTable.style.fontSize='small';">
			<label for="mediumTileSize">Medium</label>
			<input type="radio" name="tileSize" id="mediumTileSize" value="medium" checked
				onClick="gLetterTable.style.fontSize='medium';">
			<label for="largeTileSize">Large</label>
			<input type="radio" name="tileSize" id="largeTileSize" value="large" 
				onClick="gLetterTable.style.fontSize='large';">
		</div>


<div id="dInstructions" class="instruction_wrapper">
<p><b><u>Instructions:</u></b></p>
<p>Test your skill finding words in the randomly generated letters.  Half the letters are consonants and half are vowels. </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><u>Select Word</u> by clicking the first letter, then move the mouse to the last letter.  A valid horizontal, vertical or diagonal path (forward or backward) is indicated by a boxed word.  An incomplete path is shown with the starting and ending letters in separate dashed boxes.</p>
<p>Click the ending letter to complete the selection.  The word is then <span style="background-color:lightblue">highlighted</span>, and the <u>Add Word</u> and <u>Cancel Word</u> buttons are activated.  The new word can then be added to the upper word box.</p></li>
<li><p><u>Move Letters</u> by clicking a single letter twice (two single clicks, not a double click).  This <span style="background-color:lightblue">highlights</span> and boxes a single letter word.  Now use the &uarr; up, &darr; down, &larr; left and &rarr; right arrow keys to move the letter.</p></li>
<li><p><u>Refresh</u>  loads the letter box with a new set of randomly generated letters.  <u>Scramble</u> randomly redistributes the existing letters.<p></li>
<li><p><u>Move Words</u> (&larr; left and &rarr; right) in the upper word box by first clicking the word.  The word will be <span style="background-color:lightblue">highlighted</span> and boxed, and the buttons will then be activated.  A second click on the same word cancels the selection.  Clicking a different word changes the selection.</P></li>
</ul>
</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>Magic 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>See what messages are being sent to you in a set of randomly generated letters!  Find words displayed across, back, up, down and diagonally in a table.  Box the words and then arrange them in fun phrases.  Scramble the letters again to find more words.</p>

<p>The game is programmed in JavaScript; featuring dynamic HTML, DOM (Document Object Model) manipulation, random letters, extensive use of CSS classes for dynamic boxing of multiple table cells, and table cell and division shifting.</p>

<p>Click the Show Instructions button in the header to get started.</p>

</div>

	</body>
</html>