document.getElementById("submit").addEventListener("click", generate);
var count=0;
var mines;
var width;
var height;
function generate()
{

  height=document.getElementById("height").value;
  width=document.getElementById("width").value;
  document.getElementById("test").innerHTML = width+", "+height;
  var outputhtml="<table>";
  mines=new Array(height);

  for(i=0;i<height;i++)
  {
    mines[i]=new Array(width);
  }
  count=0;
  for(i=0;i<height; i++)
  {
    outputhtml=outputhtml+"<tr>";
    for(j=0;j<width;j++)
    {
      mines[i][j]=0;
      outputhtml=outputhtml+"<td>";
      outputhtml+=  "<button id=["+makeID(i,j)+"] onclick=clicked("+makeID(i,j)+")>?</button>";
      console.log(makeID(i,j))
      outputhtml=outputhtml+"</td>";

    }
    outputhtml=outputhtml+"</tr>";
  }
  outputhtml+="</table>"
  addMines();

  document.getElementById("test").innerHTML=outputhtml
}

function addMines()
{

for(var i=0;i<height;i++)
{
  for(var j=0; j<width; j++)
  {      console.log("currently mining: "+i+", "+j);

    mines[i][j]=0;
    if(Math.random<.2)
    {
      mines[i][j]=1;
    }
  }
}

}
function makeID(i, j)
{

  console.log("i is: "+i+"   j is: "+j);
  return "a"+(width*i+j);
}

function makeCoords(id)
{
  id=id.slice(1,end);
  console.log("ID is: "+id);
  i=Math.floor(id/width);
  j=id%width;

  console.log("output i is: "+i+" j is:" +j);
  return [i, j];
}

function clicked(thisbutton)
{
  console.log("this button is: "+thisbutton);

  var coords=makeCoords(thisbutton);
  console.log("it's Coords are: "+coords);
  if(mines[coords[0]][coords[1]]==0)    //empty space
  {
    document.getElementById(thisbutton).innerHTML="O";      //mark as visited and display adjacent mines
  }

    //a mine
      //explodes, lose condition, css effects?

    //next to mines
      //display number of mines adjacent
}