currentLetter = new Array();
var letters;
var startLetter;
var slicesX, slicesY;
var imageWidth = 500;
var imageHeight = 500;

function createHTML(x,y,alphabet) {
	slicesX = x;
	slicesY = y;
	letters = alphabet;
	var sliceWidth = imageWidth/slicesX;
	var sliceHeight = imageHeight/slicesY;
	startLetter = Math.floor(Math.random()*letters.length);

	// preload images:
	for (i=0; i<letters.length; i++)
		document.write("<img src='../marko/"+letters.charAt(i)+".gif' class='hidden' />");

	document.write("<div id='border'>");
	for (i=0; i<slicesY; i++) {
		currentLetter[i] = new Array();
		for (j=0; j<slicesX; j++) {
			currentLetter[i][j] = startLetter;
			document.write('<div class="image" style="clip:rect('+(sliceHeight*i)+'px '+(sliceWidth*(j+1))+'px '+(sliceHeight*(i+1))+'px '+(sliceWidth*j)+'px)" onMouseover="change('+i+','+j+')"><img id="i'+i+'j'+j+'" src="../marko/'+letters.charAt(startLetter)+'.gif" /></div>');
		}
	}
	document.write("</div>");
	document.write("<div id='menu'>");
	for (i=0; i<letters.length; i++) {
		document.write("<a class='button' href='javascript:write(\""+letters.charAt(i)+"\")'>"+letters.charAt(i)+"</a>");
	}
	document.write("            <a href='../marko/index.htm' class='button' style='letter-spacing:2px;padding-left:8px;padding-right:8px;'>MENU</a></div>");
}
function change(x,y) {
	currentLetter[x][y]++;
	if (currentLetter[x][y] >= letters.length)
		currentLetter[x][y] = 0;
	document.getElementById("i"+x+"j"+y).src=letters.charAt(currentLetter[x][y])+".gif";
}
function write(nextLetter) {
	next = letters.indexOf(nextLetter);
	for (i=0; i<slicesY; i++) {
		for (j=0; j<slicesX; j++) {
			document.getElementById("i"+i+"j"+j).src=letters.charAt(next)+".gif";			
			currentLetter[i][j] = next;
		}
	}
}