var sides = 8;
var checkers = [];
var editor;
var demo_problem_idx = -1;
const CHAR_ADD_TIME_MS = 4;
const CHAR_DELETE_TIME_MS = 1;


var demo_problems = [
`function draw_checkerboard(board) {
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      board[i][j] = i % 2 == 0 ? "black" : "white";
    }
  }
}
`,
`function draw_checkerboard(board) {
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      board[i][j] = (i == j || 7 - i == j) == 0 ? "black" : "white";
    }
  }
}
`,
`function draw_checkerboard(board) {
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      if (i == 0 || j == 0 || i == 7 || j == 7) board[i][j] = "white";
      else board[i][j] = "black";
    }
  }
}
`,
`function draw_checkerboard(board) {
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      if (i * i + j * j < 40) board[i][j] = "white";
      else board[i][j] = "black";
    }
  }
}
`,
`function draw_checkerboard(board) {
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      board[i][j] = (i - 5) * (j - 5) == 0 ? "white" : "black";
    }
  }
}
`,
]


window.onload = function() {
  editor = ace.edit('code-editor');
  editor.setTheme('ace/theme/crimson_editor');
  editor.session.setMode('ace/mode/javascript');
  editor.setReadOnly(true);
  editor.getSession().setUseWorker(false);
  editor.focus();
  initCheckerboard();
  setInterval(cycleDemoProblem, 2500);
  cycleDemoProblem();
}

function animateAddText(text) {
  for (var i = 1; i <= text.length; i++) {
    delayedSetText(text.slice(0, i), CHAR_ADD_TIME_MS * i);
  }
}

function delayedSetText(text, delay_ms) {
  setTimeout(function() {
    editor.setValue(text, text.length);
  }, delay_ms);
}

function clearText() {
  var text = editor.getValue();
  for (var i = text.length - 1; i >= 0; i--) {
    delayedSetText(text.slice(0, i), CHAR_DELETE_TIME_MS * (text.length - i));
  }
}

function cycleDemoProblem() {
  demo_problem_idx = (demo_problem_idx + 1) % demo_problems.length;
  clearText();
  setTimeout(function () {
    animateAddText(demo_problems[demo_problem_idx]);
    renderCheckerboard(demo_problems[demo_problem_idx]);
  }, CHAR_DELETE_TIME_MS * editor.getValue().length);
}

function initCheckerboard() {
  checkers.splice(0);
  document.getElementById('checkers-group').innerHTML = '';
  var checkerboard = document.getElementById('checkerboard');

  var stride = 100 / sides;
  for (var i = 0; i < sides; i++) {
    var row_checkers = [];
    for (var j = 0; j < sides; j++) {
      var rect = document.getElementById('checker_prototype').cloneNode(true);
      rect.setAttribute('id', 'checker_' + i + '_' + j);
      rect.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#single_checker');
      rect.setAttribute('transform', 'scale(' + 1 / sides  + ', ' + 1 / sides +
                        ') translate(' + stride * j * sides + ', ' + stride * i * sides + ')');
      rect.setAttribute('class', "gray");
      checkerboard.getElementById('checkers-group').appendChild(rect);
      row_checkers.push(rect);
    }

    checkers.push(row_checkers);
  }
}

function genEmptyBoard(side_size) {
  var board = [];
  for (var row = 0; row < side_size; row++) {
    var curr_row = [];
    for (var col = 0; col < side_size; col++) {
      curr_row.push('gray');
    }

    board.push(curr_row);
  }

  return board;
}

function renderCheckerboard(code) {
  var checkerboard = document.getElementById('checkerboard');
  var board = genEmptyBoard(sides);

  eval(code);
  draw_checkerboard(board);
  for (var i = 0; i < sides; i++) {
    for (var j = 0; j < sides; j++) {
      var c = board[i][j];
      var checker = checkers[i][j];
      var curr_color = checker.getAttribute('class').split(' ')[0];
      if (c != curr_color) {
        delayedUpdate(checker, c, curr_color);
      }
    }
  }

  editor.focus();
}

function delayedUpdate(checker, c, curr_color) {
  window.setTimeout(function() {
    var color_animation = curr_color + '2' + c;
    var rotation_animation = curr_color == c ? 'full-rotation' : 'half-rotation';
    checker.setAttribute('class', c);
    checker.getElementsByClassName(color_animation)[0].beginElement();
    checker.getElementsByClassName(rotation_animation)[0].beginElement();
  }, Math.random() * 250);
}