//Declarations
var gridseen = new Array(new Array(),new Array(),new Array(),new Array(),new Array(),new Array());
var gridhidden = new Array(new Array(),new Array(),new Array(),new Array(),new Array(),new Array());

var grid;
var temp;
var isclicked;
var g;
var max;
var totalH = new Array();
var totalV = new Array();
var gridcode;
var won;
var choose;

//Main set up function passing in grid size and maximum grid number entry
function setup(gIn,maxIn)
	{
		document.getElementById("gameenter").innerHTML="";
		document.getElementById("gameenter").style.backgroundColor="transparent";
		
		document.getElementById("gameenter").style.border="none";
		grid=document.getElementById("grid");
		isclicked=true;

//Globalise size of grid and largest entry
		g=gIn;
		max=maxIn;

//Set the scene
    fillGrid();
    doSums();
		removeNumbers();
		buildGrid();

    addControls();
    addInstructions();
	
		grid.style.cursor="text"; //needed to fix bug of disappearing border with IE

  }

//pick up number from guess box and prepare to place it (after validity checks)
function guess(num)
	{
		if (isNaN(num)||(num==""))
		  {
			  window.alert("please enter a number");
				document.getElementById("letter").focus();
				document.getElementById("letter").value="";
			}
		else
		  {
        document.getElementById("guess").disabled=true;
        grid.style.cursor="move";
				temp=num;
				isclicked=false;
			}
	}

//if space is empty and number has been picked up then place number in grid
function clicked(i,j)
  {
    var s = document.getElementById(""+i+","+j).innerHTML;
		if ((s=="")&&!isclicked)
		  {
			  gridseen[i][j]=temp;
			  document.getElementById(""+i+","+j).innerHTML=gridseen[i][j];
				isclicked=true;
        grid.style.cursor="text";
				document.getElementById("letter").focus();
				document.getElementById("letter").value="";
        document.getElementById("guess").disabled=false;
			}
		else
		  {
        document.getElementById("letter").focus();
			}
  }

//check the grid against the hidden version and indicate correct and incorrect entries
//if all are correct announce winner message

function checkgrid()
  {
	  won=true;
    for (var i=0;i<g;i++)
		  {
			  for (var j=0;j<g;j++)
				  {
            if (gridhidden[i][j]!=gridseen[i][j])
						  {
                document.getElementById(""+i+","+j).innerHTML=""
                document.getElementById(""+i+","+j).style.backgroundColor="#ff6347";
								won=false;
							}
						else
						  {
                document.getElementById(""+i+","+j).style.backgroundColor="#90ee90";
							}
				  }
			}
		if (won) {window.alert("Well done you've finished it correctly");}
  }

function menu()
  {
	  choose = document.getElementById("menu").innerHTML;
   	var menuS = choose;
		menuS += "<input type=\"button\" id = \"easy\" value= \"2 x 2 - Easy\" onclick = \"setup(2,10)\">";
		menuS += "<input type=\"button\" id = \"tough\" value= \"3 x 3 - Tougher\" onclick = \"setup(3,20)\">";
		menuS += "<input type=\"button\" id = \"eventougher\" value= \"4 x 4 - Even tougher\" onclick = \"setup(4,25)\">";
		menuS += "<input type=\"button\" id = \"ohno\" value= \"5 x 5 - Oh no!!!!\" onclick = \"setup(5,20)\">";

		document.getElementById("menu").innerHTML = menuS;
	}

//Fill spaces with random numbers
function fillGrid()
  {
		for (var i=0;i<g;i++)
		  {
			  for (var j=0;j<g;j++)
				  {
            gridseen[i][j]=Math.floor(Math.random()*max);
						gridhidden[i][j]=gridseen[i][j];
				  }
			}
  }

//calculate horizontal and vertical totals
function doSums()
  {
//horizontals
		for (var i=0;i<g;i++)
		  {
		    totalH[i]=0;
        for (var j=0;j<g;j++)
				  {
            totalH[i]+=gridseen[i][j];
				  }
		  }
//verticals
		for (var j=0;j<g;j++)
		  {
		    totalV[j]=0;
        for (var i=0;i<g;i++)
				  {
            totalV[j]+=gridseen[i][j];
				  }
		  }

	}

//remove a random entry from each row and then every column
function removeNumbers()
  {
		for (var i=0;i<g;i++)
		  {
			  var indexV = new Array();
			  indexV[i] = Math.floor(Math.random()*(g));
        gridseen[i][indexV[i]]="";
		  }
		for (var j=0;j<g;j++)
		  {
			  var indexH= new Array();
			  indexH[j] = Math.floor(Math.random()*(g));
		    gridseen[indexH[j]][j]="";
		  }
	}

//build up grid and insert entries
function buildGrid()
  {
    gridcode="";
	  for (var i=0;i<g;i++)
		  {
			  for (var j=0;j<g;j++)
				  {
					  gridcode+="<div class=\"box\" style=\"top:"+(55*i+5)+"px;left:"+(55*j+5)+"px\" id=\""+i+","+j+"\" onclick= \"clicked("+i+","+j+")\">"+gridseen[i][j]+"</div>";
				  }
				gridcode+="<div class=\"tot\" style=\"top:"+(55*i+5)+"px;left:"+(55*g+5)+"px;\">"+totalH[i]+"</div>";
			}
    for (var j=0;j<g;j++)
		  {
        gridcode+="<div class=\"tot\" style=\"top:"+(55*g+5)+"px;left:"+(55*j+5)+"px;\">"+totalV[j]+"</div>";
			}
	  grid.innerHTML=gridcode;
		var wide ="";
		wide+=(5+55*(g+1))+"px";

		grid.style.width=wide;
		grid.style.height=wide;

		grid.style.borderStyle="groove";
	}

function addControls()
  {
//place guess box and buttons
    document.getElementById("guessbox").innerHTML="<input type = \"text\" size = \"2\" maxlength=\"2\" id=\"letter\" style=\"font-size:30pt;text-align:center\" value=\"\"><input type=\"button\" id=\"guess\" value =\"Add A Number\" onclick=\"guess(getElementById('letter').value)\">";

//build up selection menu and check answers control
    var select="";
    select +="<div id = \"menu\"><input type = \"button\" value = \"Choose Grid Size\" id = \"reset\" onclick = \"menu()\"></div>";
		document.getElementById("checkbox").innerHTML="<div id=\"play\">Play again?</div><div><input type=\"button\" id=\"check\" value =\"Check Your Answers\" onclick=\"checkgrid()\"></div>"+select;
    document.getElementById("letter").focus();
	}


function addInstructions()
  {
//instructions left hand side
		document.getElementById("left").innerHTML="<p>The numbers in each row and each column add up to the totals in the brown squares.<br><br> Enter a number in the white box and press the<br> \"Add a number\" button. Then click on the square you want to place it in.<br><br> The number will appear in that square and you can add more until the grid is full.</p>";

//instructions right hand side
	document.getElementById("right").innerHTML="<p>When the grid is full press the \"Check your answer\" button.<br><br>Any wrong answers will make the square turn red and you can enter another number and check again.</p>";
	}