/*
 * SET VARIABLES
 */
var numSquares = 6,
    colors     = [],
    pickedColor,
    h1             = document.querySelector("h1"),
    squares        = document.querySelectorAll(".square"),
    colorDisplay   = document.getElementById("colorDisplay"),
    messageDisplay = document.querySelector("#message"),
    resetButton    = document.querySelector("#reset"),
    modeButtons    = document.querySelectorAll(".mode");

init();
/*
 * Initialize Code
 */
function init(){
	setupModeButtons();
	setupSquares();
	reset();
}
/*
 * PROGRAM BUTTONS
 */
// Add a selected class to the easy and hard buttons
function setupModeButtons(){
	for (var i = 0; i < modeButtons.length; i++) {
		modeButtons[i].addEventListener("click", function() {
			modeButtons[0].classList.remove("selected");
			modeButtons[1].classList.remove("selected");
			this.classList.add("selected");
			this.textContent === "Easy" ? numSquares = 3 : numSquares = 6;
			reset();
		});
	}
}
/*
 * GAME FUNCTIONALITY
 */
function setupSquares() {
	for(var i = 0; i < squares.length; i++) {
	  // Add click listeners to squares
		squares[i].addEventListener("click", function(){
			// Grab color of clicked square
			var clickedColor = this.style.background;
			// Compare color to pickedColor
			if (clickedColor === pickedColor) {
				messageDisplay.textContent = "Correct!";
				resetButton.textContent = "Play Again?"
				changeColors(clickedColor);
				h1.style.background = clickedColor;
			} else {
				this.style.background = "#232323";
				messageDisplay.textContent = "Try Again";
			}
		});
	}
}
/*
 * This function resets the game
 */
function reset() {
  // Colors returns an array of random colors
	colors = generateRandomColors(numSquares);
	// Pick a new random color from array
	pickedColor = pickColor();
	// Change colorDisplay to match picked Color
	colorDisplay.textContent = pickedColor;
	resetButton.textContent = "New Colors";
	messageDisplay.textContent = "";
	// Change colors of squares
	for (var i = 0; i < squares.length; i++) {
		if (colors[i]) {
			squares[i].style.display = "block";
			squares[i].style.background = colors[i];
		} else {
			squares[i].style.display = "none";
		}
	}
	h1.style.background = "steelblue";
}

resetButton.addEventListener("click", function() {
	reset();
});
/*
 * This function changes all the squares to the winning color
 */
function changeColors(color) {
	// Loop through all squares
	for (var i = 0; i < squares.length; i++) {
		// Change each color to match given color
		squares[i].style.background = color;
	}
}
/*
 * This function picks a random number as the index of the six squares
 */
function pickColor() {
  // colors array has already been filled with random colors
	var random = Math.floor(Math.random() * colors.length);
  // a random color from the array is picked
	return colors[random];
}
/*
 * This function creates a random RGB color
 */
function randomColor() {
	//pick a "red" from 0 - 255
	var r = Math.floor(Math.random() * 256);
	//pick a "green" from  0 -255
	var g = Math.floor(Math.random() * 256);
	//pick a "blue" from  0 -255
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + ", " + g + ", " + b + ")";
}
/*
 * This function creates an array of random colors using num to specify the amount of colors to be generated
 */
function generateRandomColors(num) {
	// Make an array
	var arr = [];
	// Repeat num times
	for (var i = 0; i < num; i++) {
		// Get random color and push into arr
		arr.push(randomColor());
	}
	// Return that array
	return arr;
}