<div class="container">
  <div id="boardgame"> </div>
</div>

.game {
  width:200px;
  height:200px;
  border-style:solid;
  text-align: center;
}

.game:hover {
  background-color: lightgrey;
}

body {
  background-color: lightblue;
}

.choice {
  background-color:white;
  border-style: solid;
  border-color: black;
  height: 200px;
  width: 200px;
  text-align:center;
  font-size: 200px;
}

.choice2 {
  background-color:white;
  border-style: solid;
  border-color: black;
  height: 100px;
  width: 200px;
  text-align:center;
  font-size: 50px;
}

.blue {
  color: blue;
}

.dialog {
  margin: 40px;
}

.red {
  color: red;
}

.tictactoe {
  margin: 20px;
  background-color: white;
}

.O {
  color: blue;
}

.X {
  color: red;
}

h1 {
  font-size: 150px;
}

function set_up_boardgame() {
  boardgame = {};
  var html_setup = "<table class=\"tictactoe\">";
  for (var i = 0; i < 3; i++){
    html_setup += "<tr>";
    for (var j = 0; j < 3; j++){
      boardgame[i + "" + j] = 0;
      html_setup += "<td class=\"game\"id=\""  + i + j + "\"></td>"     
    }
    html_setup += "</tr>";
  }
  html_setup = html_setup + "</table>";
  $(html_setup).appendTo("#boardgame")
}

function set_up_click_events(){
  $(".game").on("click",function(e){
    var current_square = $(this).attr('id');
    if (boardgame[current_square] == "0"){
      boardgame[current_square] = 1;
      $("#"+current_square).html("<h1 class=\""+player+"\">" + player + "</h1>");
      determine_winner()
      current_player=computer;
    }
  });
}

function evaluate_position(){
    rows={}
    cols={}
    diag={}
    diag[0] = ""
    diag[1] = ""
    for (var i = 0; i < 3; i++){
      for (var j = 0; j < 3; j++){
        rows[i] = ""
        cols[j] = ""
      }
    }
  
    for (var i = 0; i < 3; i++){
      for (var j = 0; j < 3; j++){
        curr_pos=i + "" + j
        rows[i] += boardgame[curr_pos];
        cols[j] += boardgame[curr_pos];
        if (i == j){
          diag[0] += boardgame[curr_pos];
        } 
        if ( (i == 1 && j == 1) || (i == 0 && j == 2) || (i == 2 && j == 0)) {
          diag[1] += boardgame[curr_pos];
        }
      }
    }
}

function legitimate_moves(hierarchy) {

  score=new Array(8)
  for (i=0; i <8; i++)
     score[i]=new Array(2)
  
  n = 0
  for(var j=0; j < 3; j++){
    eval = rows[j].split('');
    eval.sort();
    eval = eval.join('').trim()
    score[n][0] = hierarchy.indexOf(eval);
    score[n][1] = "rows:" + j;
    n++
  }
  for(var j=0; j < 3; j++){
    eval = cols[j].split('');
    eval.sort();
    eval = eval.join('').trim()
    score[n][0] = hierarchy.indexOf(eval);
    score[n][1] = "cols:" + j;
    n++
  } 
  for(var j=0; j < 2; j++){
    eval = diag[j].split('');
    eval.sort();
    eval = eval.join('').trim()
    score[n][0] = hierarchy.indexOf(eval);
    score[n][1] = "diag:" + j;
    n++
  } 
  
  score = score.filter(function(ele){
    return ele[0] > -1
  })
  
  score.sort(function(a,b){
    if (a[0] > b[0]){
      return 1
    } else {
      return -1
    }
  })
  return 0
}

function make_move(){
     direction = move.split(':')[0]
     lane = move.split(':')[1]
     if (direction == "rows"){
       index = rows[lane].split('').indexOf("0")
       move_choice = lane + "" + index
       boardgame[move_choice] = 2;
       $("#" + move_choice).html("<h1 class=\""+computer+"\">"+computer+" </h1>");
     }
     if (direction == "cols"){
       index = cols[lane].split('').indexOf("0")
       move_choice =  index + "" + lane
       boardgame[move_choice] = 2;
       $("#" + move_choice).html("<h1 class=\""+computer+"\">"+computer+"</h1>");
     }
     if (direction == "diag"){
       index = diag[lane].split('').indexOf("0")
       if (lane == 0){
         lane=index;
       } else {
         if (index == 1){
           lane = index
         } else if (index == 0) {
           lane = 2
         } else {
           lane = 0
         }
       }
       move_choice =  index + "" + lane
       boardgame[move_choice] = 2;
       $("#" + move_choice).html("<h1 class=\""+computer+"\">"+computer+"</h1>");
     }
}

function make_decision(){
  if(score.length == 0){
    alert("Draw!");
    restart_boardgame()
  } else {
    move = score[0][1]
    make_move()
  }
}

function determine_winner(){
  evaluate_position()
  legitimate_moves([ "222"])
  if (score.length > 0) {
    alert("computer wins...")
    restart_boardgame()
  }
  legitimate_moves([ "111"])
  if (score.length > 0){
    alert("player wins...")
    restart_boardgame()
  }
  legitimate_moves([ "022", "011", "002", "001","012","000"])
  if (score.length == 0){
    alert("draw!")
    restart_boardgame()
  }
}

function computers_turn(){
  evaluate_position()
  legitimate_moves([ "022", "011", "002", "001","012","000"])
  make_decision()
  determine_winner()
}

function start_turns(){
  function update(){
    if (player != current_player){
      computers_turn()
      current_player=player;
    } 
    setTimeout(update, 1000);
  }
  setTimeout(update, 1000);
}

function restart_boardgame(){
  $("#boardgame").empty()
  determine_side()
}

function game(player_choice){
    player=player_choice
    if (player == "O") {
       computer = "X"
    } else {
       computer = "O"
    }
   set_up_boardgame()
   set_up_click_events()
   start_turns() 
}

function determine_side(){
    $("#boardgame").append(
                            '<table class="dialog">' +
                          '<tr><th class="choice2" colspan="2" >choose a side?</th><tr>' +
                          '<td class=\"choice\ blue">O</td>' +
                           '<td class=\"choice\ red">X</td>' +
                          '</table>')
  
    $(".choice").on("click",function(e){
      var player_choice = $(this).html();
      $("#boardgame").empty()
      game(player_choice);
      });
}

$(document).ready(function(){
  determine_side()
});