// Restart Game Button
var restart = document.querySelector('#b');

// Grab all the squares
var squares = document.querySelectorAll("td");

var grid = document.querySelector("tr")

var x = document.getElementById("change").innerHTML;

// Clear Squares Function
function clearBoard() {
  for (var i = 0; i < squares.length; i++) {
      squares[i].textContent = '';
  }

}
restart.addEventListener('click',clearBoard)


// Create a function that will check the square marker


var header = document.querySelector("h1")
var tablecolor = document.querySelector("td")
// Then you can interface with the object.

// Interface with the style.
//You will see a ton of options show up!
//header.style.color = 'blue'
//tablecolor.style.color = 'blue'
//grid.style.color = 'red'
// Now let's connect it to the script to
// change it once every second to a random color!

// Random Color Function:

// http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript

function getRandomColor(){
  var letters = "0123456789ABCDEF";
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random()*16)];
  }
  return color
}
function changeMarker(){
    if(this.textContent === ''){
      this.textContent = 'X';
      // console.log(marker)
    }else if (this.textContent === 'X') {
      this.textContent  = 'O';
    }else {
      this.textContent = '';
    }
};
// Simple function for clarity
function changeHeaderColor(){
  colorInput = getRandomColor()
  header.style.color = colorInput;
}

function changeBorderColor() {
    var table = document.getElementById("table_row").getElementsByTagName("td");
    for(var i=0; i<table.length; i++) {
        var td = table[i];
        td.style.borderColor = getRandomColor();
    }
}
// Use a for loop to add Event listeners to all the squares
for (var i = 0; i < squares.length; i++) {
    squares[i].addEventListener('click', changeMarker);
    squares[i].style.color = getRandomColor()
}

function changeXColor(){
  colorInput = getRandomColor();
  x.style.color = colorInput;
}

setInterval("changeHeaderColor()",300);
setInterval("changeBorderColor()",305);
setInterval("changeXColor()",300);