var box = document.getElementsByTagName('td');
var startBoard = document.getElementById('newGame');
const playerX = 'X';
const playerO = 'O';
var player = playerX;
var winner;
var game = 'newGame';
var counter = 0;

   console.log(startBoard);

startBoard.addEventListener('click', function() {
    game = 'newGame';
    emptyBoard();
}, false);

for(var i = 0; i < box.length; i++) {
    //box[i].addEventListener('click', turnClick(), false);
    box[i].addEventListener('click', function() {
             //  console.log(box[i].innerText);
  //  if (box[i].innerText == '\xa0') {
                  //box[i].addEventListener('click', function() {
       if(box[i] != "\xa0") {
           this.innerHTML = player;
            counter ++;
            changePlayer();
            console.log(counter);
        }
    }, false);
}

function turnClick(){
   if(game == 'newGame') {
        if (this.innerText == '\xa0') {
            this.innerHTML = player;
            counter ++;
            changePlayer();
            checkWinner();
            console.log(counter);
       }
   }
}

function emptyBoard() {
    player = playerX;
    counter = 0;
    winner = '';
    for(var i = 0; i < box.length; i++) {
        box[i] = '\xa0';
    }
}

function changePlayer (){
    //console.log(box.target.id);
if (counter % 2 == 0 || counter == 0) {
    player = playerX;
}
else {
    player = playerO;
}}
/*startBoard[boxID] = player;
document.getElementById(boxID).innerText = player;
let gameWin = checkWinner(startBoard, player)
if (gameWin) gameOver(gameWon)
}
*/
function checkWinner(startBoard, player){
    if((topLeft === 'X' && topCenter === 'X' && topRight === 'X') ||
    (centerLeft === 'X' && centerCenter === 'X' && centerRight === 'X') ||
    (bottomLeft === 'X' && bottomCenter === 'X' && bottomRight === 'X') ||
    (topLeft === 'X' && centerLeft === 'X' && bottomLeft === 'X') ||
    (topCenter === 'X' && centerCenter === 'X' && bottomCenter === 'X') ||
    (topRight === 'X' && centerRight === 'X' && bottomRight === 'X') ||
    (topLeft === 'X' && centerCenter === 'X' && bottomRight === 'X') ||
    (topRight === 'X' && centerCenter === 'X' && bottomLeft === 'X')) {
        winner = playerX;
        "X has won";
}
else {
if((topLeft === 'O' && topCenter === 'O' && topRight === 'O') ||
(centerLeft === 'O' && centerCenter === 'O' && centerRight === 'O') ||
(bottomLeft === 'O' && bottomCenter === 'O' && bottomRight === 'O') ||
(topLeft === 'O' && centerLeft === 'O' && bottomLeft === 'O') ||
(topCenter === 'O' && centerCenter === 'O' && bottomCenter === 'O') ||
(topRight === 'O' && centerRight === 'O' && bottomRight === 'O') ||
(topLeft === 'O' && centerCenter === 'O' && bottomRight === 'O') ||
(topRight === 'O' && centerCenter === 'O' && bottomLeft === 'O')) {
    winner = playerO;
}}
return winner;
}

function tieGame() {
        for (var i = 0; i < 9; i++){
            if(box[i] !='\xa0'){
            box[i].removeEventListener('click', turnClick, false);
        }
    }

}

function newGame() {

}