document.onkeydown = showkey;
window.onload = begin;

x = 1;
y = 1;
width = 0;
height = 0;
cellsize = 0;
player = 0;

document.getElementById('solution').disabled = true;

function begin() {

  width = eval(document.getElementById('width').value);
  height = eval(document.getElementById('height').value);
  cellsize = eval(document.getElementById('cellsize').value);
  player = document.getElementById('player');

}

function showkey(e) {

  num = (!e ? event.keyCode : e.which);

  if(num == 75) { // down = k

    if(!document.getElementById('y'+(2*y)+'x'+(2*x-1)) && y != height) {
      y++;
      player.style.top = ((cellsize+1)*(y-1)) + 'px';
    }

  } else if(num == 74) { // left = j

    if(!document.getElementById('y'+(2*y-1)+'x'+(2*x-2)) && x != 1) {
      x--;
      player.style.left = ((cellsize+1)*(x-1)) + 'px';
    }

  } else if(num == 76) { // right = l

    if(!document.getElementById('y'+(2*y-1)+'x'+(2*x)) && x != width) {
      x++;
      player.style.left = ((cellsize+1)*(x-1)) + 'px';
    }

  } else if(num == 73) { // up = i

    if(!document.getElementById('y'+(2*y-2)+'x'+(2*x-1)) && y != 1) {
      y--;
      player.style.top = ((cellsize+1)*(y-1)) + 'px';
    }

  }

}

function show() {

  document.getElementById('solution').disabled ^= true;

}