var gCanvasElement;
	var gDrawingCtx;
	var bg = new Image();
	var light = new Image();
	light.src = 'images/square.jpg';

	var gaSolution = [0, 1, 1, 1, 1, 0, 1, 1, 1, 1];
	var gaCurrent = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
window.onload = initAll;

function merlinOnClick(e) {
	var button0 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	var button1 = [1, 2, 4, 5];
	var button2 = [1, 2, 3];
	var button3 = [2, 3, 5, 6];
	var button4 = [1, 4, 7];
	var button5 = [2, 4, 5, 6, 8];
	var button6 = [3, 6, 9];
	var button7 = [4, 5, 7, 8];
	var button8 = [7, 8, 9];
	var button9 = [5, 6, 8, 9];
	var aBtn = [button0, button1, button2, button3, button4, button5, button6, button7, button8, button9];
	var aTesting = [4, 5, 6];
	var iPos;
    var cell = getCursorPosition(e);
    for (iPos in aBtn[cell]) {
		if (gaCurrent[aBtn[cell][iPos]] == 0){
			gaCurrent[aBtn[cell][iPos]] = 1;
			}
		else {
			gaCurrent[aBtn[cell][iPos]] = 0;
		}
    }
	drawGrid();
	return;
}

function getCursorPosition(e) {
    var temp =5;
	var x;
    var y;
	var aRow1 = [1, 2, 3];
	var aRow2 = [4, 5, 6];
	var aRow3 = [7, 8, 9];
	var aGrid = [aRow1, aRow2, aRow3];
	if (e.pageX || e.pageY) {
		x = e.pageX;
		y = e.pageY;
    }
    else {
		x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	x -= gCanvasElement.offsetLeft;
    y -= gCanvasElement.offsetTop;
    return aGrid[Math.floor(y/101)][Math.floor(x/101)];
}

function testForWin(){
	var iPos;
	for (iPos in gaCurrent){
		if (gaCurrent[iPos] != gaSolution[iPos]){
			gCanvasElement.addEventListener("click", merlinOnClick, false);
			return false;
		}
	}
	return true;
}
	
function drawGrid(){
	var bAns;
	gDrawingCtx.clearRect(0, 0, 302, 302);
//	gDrawingCtx.drawImage(bg, 0, 0);
	gDrawingCtx.fillStyle = '#000000';
    gDrawingCtx.fillRect(0, 0, 302, 302);	
	var k=0;
	for (var i=0;i<3;++i){
		for (var j=0;j<3;++j){
			++k;
			if (gaCurrent[k] != 0){
				gDrawingCtx.drawImage(light, j*101, i*101);
			}
			else {
				gDrawingCtx.fillStyle = '#500000';
				gDrawingCtx.fillRect(j*101, i*101, 100, 100);
			}
		}
	}
	gCanvasElement.removeEventListener("click", merlinOnClick, false);
	if (testForWin()){
		if(confirm('You WON!! \n Would you like to play again?')){
			gCanvasElement.addEventListener("click", merlinOnClick, false);
			initAll();
		}
/*		else{
			gCanvasElement.removeEventListener("click", merlinOnClick, false);
		}
*/	}
}
	
function initAll(){
/*
	bg.src = 'images/MagicSquareBG.gif'; 

var elem = document.getElementById('Merlin');
if (elem && elem.getContext) {
  var context = elem.getContext('2d');
  if (context) {

	context.fillStyle = '#000';
	context.fillRect  (202,   0, 203, 302);
//	context.drawRect(101, 0, 101, 302);
//	context.drawImage(bg, 0, 0);
  }
  else {
  alert("no context");
}}}*/
	var iPos;
//	bg.src = 'images/MagicSquareBG.gif'; 
	gCanvasElement = document.getElementById("Merlin");
	gCanvasElement.addEventListener("click", merlinOnClick, false);
	gDrawingCtx = gCanvasElement.getContext("2d");
	for (iPos in gaCurrent) {
		gaCurrent[iPos] = Math.floor(Math.random() * 2);
	}
	gaCurrent[0] = 0;
	drawGrid();
}