for (var a = 0; a < 9; a++) {
  $("#grid").append("<div class=\"frame col-xs-4\"><div id=\""+a+"\" class=\"field\"></div></div>");
}

var arr = ["","","","","","","","",""];
var subSet = [[0,1,2],[3,4,5],[6,7,8],[0,4,8],[2,5,8],[1,4,7],[0,3,6],[2,4,6]];
var priority = [4,0,2,8,6,1,5,7,3];
var player = "X";
var ai = "O";
var reset = true;
var playerturn = true;
var turn = 1;
var score = [0,0,0];
var color = "#ccc";
var background = "#111";

function changeTurn() {  
  //changes turns
  turn ++;
  var Con = checkWin();
  if (typeof Con == "number") {
    End(Con);
  } else if (turn > 9) {
    End(0);
  } else {  
    $(".turn").toggleClass("on");
    if (playerturn) {
      playerturn = false;
      setTimeout(aiTurn, 1000);
    } else {
      playerturn = true;
    }
    if (reset) {
      reset = false;
      $("#choose").html("here we go!");
    }
  }
}
function End(end) {
  if (end > 0) {
    $("#choose").html("Computer wins!");
    score[1]++;
    $("#computer").html("computer: " + score[1]).css("color",color);
  }
  if (end < 0) {
    $("#choose").html("You win!");
    score[0]++;
    $("#player").html("player: " + score[0]).css("color",color);
  }
  if (end == 0) {
    $("#choose").html("Draw!");
    score[2]++;
    $("#draw").html("draws: " + score[2]).css("color",color);
  }
  setTimeout(function(){
    $(".frame").css("color",background);
    $(".field").css("cursor","default");
    $(".turn").removeClass("on");
    setTimeout(function(){
      //reset everything
      arr = ["","","","","","","","",""];
      reset = true;
      $("#choose").html("Here we go again! Chose X or O.");
      $(".turn").css("cursor","pointer").css("border-color", color);
      $(".field").html("");
      turn = 1;
    }, 1000);
  }, 1800);
}
function choose(y){
  if (arr[y] == "") {
    if (playerturn) {
      arr[y] = player;
      $("#"+y).html(player);
    }
    if (playerturn == false) {
      arr[y] = ai;
      $("#"+y).html(ai);
    }
    changeTurn();
  }
}
function checkWin() {
  //looks for win conditions
  var res = ["",-1];
  for (var i = 0; i < 8; i++) {
    var count = 0;
    var left = -1;
    for (var j = 0; j < 3; j++) {
      var field = arr[subSet[i][j]];
      if (field == ai) {
        count++;
      }
      if (field == player) {
        count--;
      }
      if (field == "") {
        left = subSet[i][j];
      }
    }
    //count is now between -3 and 3
    if (count == 3 || count == -3) {
      for (var e in subSet[i]) {
        $("#"+subSet[i][e]).html("!");
      }
      return count;
    }
    if (count == 2) {
      res[0] = "win";
      res[1] = left;
    }
    if (count == -2 && res[0] != "win") {
      res[0] = "loose";
      res[1] = left;
    }
  }
  return res;
}

function first4() {
  //AI for first 4 turns
  if (turn == 1) {
    choose(0);
  } else if (turn == 2) {
    if (arr[4]=="") {
      choose(4);
    } else {
      choose(0);
    }
  } else if (turn == 3) {
    if (arr[4]=="") {
      choose(4);
    } else {
      choose(8);
    }
  } else if (turn == 4) {
    if ((arr[0]==player && arr[8]==player) || (arr[2]==player && arr[6]==player)) {
      choose(1);
    } else if ((arr[2]==player && arr[7]==player)||(arr[5]==player&&arr[6]==player)) {
      choose(8);
    } else if (arr[0]==player && arr[7]==player) {
      choose(6);
    } else {
      strat();
    }
  }
}
function strat() {
  //AI for turn 5 and on
  var winCon = checkWin();
  if (winCon[0] == "win") {
    choose(winCon[1]);
  } else if (winCon[0] == "loose") {
    choose(winCon[1]);
  } else {
    var k = 0;
    while (k < 9) {
      if (arr[priority[k]] == "") {
        choose(priority[k]);
        k += 10;
      }
      k++;
    }
  }
}
function aiTurn() {
  //AI turn
  if (turn < 5) {
    first4();
  } else {
    strat();
  }  
}
function begin() {
  reset = false;
  $("#choose").html("here we go!");
  $(".frame").css("color",color);
  $(".field").css("cursor","pointer");
  $(".turn").css("cursor","default").css("border-color",background);
  $("#x").addClass("on");
}

$("#o").click(function(){
  //allows to switch between x and o
  if (reset) {
    begin();
    playerturn = false;
    player = "O";
    ai = "X";
    setTimeout(aiTurn, 1000);
  }
});
$("#x").click(function(){
  //allows to switch between x and o
  if (reset) {
    begin();
    playerturn = true;
    player = "X";
    ai = "O";
  }
});

$("#0").click(function(){
  if (playerturn) choose(0);
})
$("#1").click(function(){
  if (playerturn) choose(1);
})
$("#2").click(function(){
  if (playerturn) choose(2);
})
$("#3").click(function(){
  if (playerturn) choose(3);
})
$("#4").click(function(){
  if (playerturn) choose(4);
})
$("#5").click(function(){
  if (playerturn) choose(5);
})
$("#6").click(function(){
  if (playerturn) choose(6);
})
$("#7").click(function(){
  if (playerturn) choose(7);
})
$("#8").click(function(){
  if (playerturn) choose(8);
})