$(document).ready(function() {

  var player1Name = "";
  var player2Name = "";
  var turn = "";
  var grid = [[0,0,0],[0,0,0],[0,0,0]];
  var hasWinner = 0;
  var moveCount = 0;

 $("#game_board").addClass("ui-widget")
  .addClass("ui-corner-all");

  $(":header").addClass("ui-widget-header")
  .addClass("ui-corner-all");

  $("#noName").dialog();

  $("#noName").dialog("option", "minHeight", 200);
  $("#noName").dialog("option", "minWidth", 300);
  $("#noName").dialog({
  buttons: [{text: "Continue", icons: {primary: "ui-icon-check"},
      click: function() {
      $(this).dialog( "close" ); } } ] });
  $("#noName").dialog("close");

  $("#positionFilled").dialog();

  $("#positionFilled").dialog("option", "minHeight", 200);
  $("#positionFilled").dialog("option", "minWidth", 300);
  $("#positionFilled").dialog({
  buttons: [{text: "Continue", icons: {primary: "ui-icon-check"},
      click: function() {
      $(this).dialog( "close" ); } } ] });
  $("#positionFilled").dialog("close");

  $("#playAgain").dialog();

  $("#playAgain").dialog("option", "minHeight", 200);
  $("#playAgain").dialog("option", "minWidth", 300);
  $("#playAgain").dialog({
  buttons: [{text: "Continue", icons: {primary: "ui-icon-check"},
      click: function() {
      $(this).dialog( "close" ); } } ] });
  $("#playAgain").dialog("close");

  function boardMsg(x) {
    return $("#message_area").text(x);
  }

  function setTurn() {
    var r = Math.floor((Math.random() * 2) + 1);
    hasWinner=0;
    if(r==1) {
      turn = player1Name;
      boardMsg(player1Name + "'s turn.");
    } else {
      turn = player2Name;
      boardMsg(player2Name + "'s turn.");
    }
  }

  function init() {
    turn = "";
    grid =  [[0,0,0],[0,0,0],[0,0,0]];
    boardMsg("");
    $(".col").map(function() {
      $(this).text("");
    }).get();
    hasWinner = 0;
    moveCount = 0;
  }

  $("#playButton").click(function () {
    if(hasWinner == 1) {
      init();
    }
    player1Name = $("#player-1-inp").val();
    player2Name = $("#player-2-inp").val();
    if(player1Name == "" || player2Name == "") {
      $("#noName").dialog("open");
      return;
    }
    setTurn();
  });

  $(".col").click(function () {
    player1Name = $("#player-1-inp").val();
    player2Name = $("#player-2-inp").val();
    if(player1Name == "" || player2Name == "") {
      $("#noName").dialog("open");
      return;
    }
    var row = $(this).parent().index();
    var col = $(this).index();
    if(grid[row][col] !== 0) {
      $("#positionFilled").dialog("open");
      return;
    }
    if(hasWinner==1) {
      $("#playAgain").dialog("open");
      return;
    }
    if(turn == player1Name){
      moveCount++;
      $(this).text("O");
      grid[row][col] = 1;
      var ifWon = winnerCheck(1,player1Name);
      if(!ifWon) {
        if(moveCount>=9){
          boardMsg("Match Drawn!");
          moveCount=0;
          hasWinner=1;
          $("#playAgain").dialog("open");
          return;
        } else {
          turn = player2Name;
          boardMsg(player2Name + "'s turn.");
        }
        return;
      } else {
        return;
    }
  }
    else if (turn == player2Name) {
      moveCount++;
      $(this).text("X");
      grid[row][col] = 2;
      var ifWon = winnerCheck(2, player2Name);
      if(!ifWon) {
        if(moveCount>=9){
          boardMsg("Match Drawn!");
          moveCount = 0 ;
          hasWinner = 1;
          $("#playAgain").dialog("open");
          return;
        } else {
          turn = player1Name;
          boardMsg(player1Name+"'s turn.");
        }
        return;
      } else {
        return;
      }
    }
  });

  function winnerCheck(n,playerName){
    if (
      (grid[0][0]==n && grid[0][1]==n && grid[0][2]==n) ||
      (grid[1][0]==n && grid[1][1]==n && grid[1][2]==n) ||
      (grid[2][0]==n && grid[2][1]==n && grid[2][2]==n) ||
      (grid[0][0]==n && grid[1][0]==n && grid[2][0]==n) ||
      (grid[0][1]==n && grid[1][1]==n && grid[2][1]==n) ||
      (grid[0][2]==n && grid[1][2]==n && grid[2][2]==n) ||
      (grid[0][0]==n && grid[1][1]==n && grid[2][2]==n)||
      (grid[0][2]==n && grid[1][1]==n && grid[2][0]==n)
       )
      {
      boardMsg(playerName+" has won; congratulations!");
      hasWinner = 1;
      moveCount=0;
      $("#playAgain").dialog("open");
      return true;
    }
    return false;
  }
});