// Set up the canvas and canvas context here
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Add click listener
document.addEventListener("click", clickHandler);

// Add timer
var timer = 10;
var timerMessage = "";

// Set up images
var imgTurkey = new Image();
imgTurkey.src = "images/turkey.png";
imgTurkey.onload = draw;

var imgCorn = new Image();
imgCorn.src = "images/corn.png";
imgCorn.onload = draw;

var imgHat = new Image();
imgHat.src = "images/hat.png";
imgHat.onload = draw;

var imgLeaf = new Image();
imgLeaf.src = "images/leaf.png";
imgLeaf.onload = draw;

var imgPumpkin = new Image();
imgPumpkin.src = "images/pumpkin.png";
imgPumpkin.onload = draw;

// Set up image and attribute lists
var turkeyGridX = [0, 0, 0];
var turkeyGridY = [0, 0, 0];
var turkeyScale = 0.1;
var turkeyFound = [0, 0, 0];

var obstacles = [imgCorn, imgHat, imgLeaf,  imgPumpkin];
var obstacleScales = [0.07, 0.07, 0.15, 0.1];

// Set how many pixels apart the grid spots are
var gridScale = 100;
var topMargin = 50;

// Place turkeys in grid
var turkeyGrid = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0]
];
// Place each turkey into a random spot.
for (var i=0; i < turkeyFound.length; i++) {
  var tempX = 0;
  var tempY = 0;
  do {
    tempX = Math.floor(Math.random() * turkeyGrid.length);
    tempY = Math.floor(Math.random() * turkeyGrid[0].length);
  }
  while (turkeyGrid[tempX][tempY]);
  turkeyGrid[tempX][tempY] = 1;
  // Save this turkey's coordinates.
  turkeyGridX[i] = tempX;
  turkeyGridY[i] = tempY;
}

// Place obstacles in grid
var obstacleGrid = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0]
];
// Place a random obstacle into each spot.
for (var i=0; i < obstacleGrid.length; i++) {
  for (var j=0; j < obstacleGrid[0].length; j++) {
    obstacleGrid[i][j] = Math.floor(Math.random() * obstacles.length);
  }
}

// The draw function!
function draw() {
  // Clear screen
  ctx.fillStyle = "orange";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Add instructions
  ctx.font = "24px Helvetica";
  ctx.textAlign = "center";
  ctx.fillStyle = "black";
  ctx.fillText(timerMessage, canvas.width * 0.5, 30);
  
  // Draw hidden turkeys
  for(i = 0; i < turkeyFound.length; i++) {
    if(!turkeyFound[i]) {
      var turkeyXPos = turkeyGetXFromGrid(turkeyGridX[i]);
      var turkeyYPos = turkeyGetYFromGrid(turkeyGridY[i]);
      ctx.drawImage(imgTurkey, turkeyXPos, turkeyYPos, imgTurkey.width * turkeyScale, imgTurkey.height * turkeyScale);
    }
  }
  
  // Draw all obstacles
  for(i = 0; i < obstacleGrid.length; i++) {
    for (j = 0; j < obstacleGrid[0].length; j++) {
      var obstacleIndex = obstacleGrid[i][j];
      var obstacleXPos = i * gridScale + (gridScale / 2) - (obstacles[obstacleIndex].width * obstacleScales[obstacleIndex] / 2);
      var obstacleYPos = j * gridScale + (gridScale / 2) - (obstacles[obstacleIndex].height * obstacleScales[obstacleIndex] / 2) + topMargin;
      ctx.drawImage(obstacles[obstacleIndex], obstacleXPos, obstacleYPos, obstacles[obstacleIndex].width * obstacleScales[obstacleIndex], obstacles[obstacleIndex].height * obstacleScales[obstacleIndex]);
    }
  }
  
  // Draw found turkeys
  for(i = 0; i < turkeyFound.length; i++) {
    if(turkeyFound[i]) {
      var turkeyXPos = turkeyGetXFromGrid(turkeyGridX[i]);
      var turkeyYPos = turkeyGetYFromGrid(turkeyGridY[i]);
      ctx.drawImage(imgTurkey, turkeyXPos, turkeyYPos, imgTurkey.width * turkeyScale, imgTurkey.height * turkeyScale);
    }
  }
}

// The click handler!
function clickHandler(event) {
  // Check all turkeys, and mark as found if clicked
  for(i = 0; i < turkeyFound.length; i++) {
    if(mouseIsOnTurkey(i)) {
      turkeyFound[i] = 1;
    }
  }
  draw();
}

// Helper function that determines whether the cursor is on top of the indexed turkey.
function mouseIsOnTurkey(index) {
  var leftEdge = turkeyGetXFromGrid(turkeyGridX[index]);
  var rightEdge = leftEdge + imgTurkey.width * turkeyScale;
  var topEdge = turkeyGetYFromGrid(turkeyGridY[index]);
  var bottomEdge = topEdge + imgTurkey.height * turkeyScale;
  return ((event.pageX - canvas.offsetLeft >= leftEdge) && (event.pageX - canvas.offsetLeft <= rightEdge) && (event.pageY - canvas.offsetTop >= topEdge) && (event.pageY - canvas.offsetTop <= bottomEdge));
}

// Helper function that takes a turkey's grid column and returns its X coordinate (left side).
function turkeyGetXFromGrid(gridX) {
  return gridX * gridScale + (gridScale / 2) - (imgTurkey.width * turkeyScale / 2.0);
}

// Helper function that takes a turkey's grid row and returns its Y coordinate (top).
function turkeyGetYFromGrid(gridY) {
  return gridY * gridScale + (gridScale / 2) - (imgTurkey.height * turkeyScale / 2.0) + topMargin;
}

// Helper function that updates the timer and redraws the canvas when called.
function updateTimer() {
  // Decrement the timer.
  timer--;
  // Count how many turkeys are left.
  var turkeysLeft = 0;
  for (var i = 0; i <= turkeyFound.length-1; i++) {
    if (!turkeyFound[i]) {
      turkeysLeft += 1;
    }
  }
  // Determine timer text.
  if (turkeysLeft == 0 && timer > 0) {
    timerMessage = "Congratulations!";
  } else if (timer > 0) {
    timerMessage = "You have " + timer + " seconds to find " + turkeysLeft + " turkeys!";
  } else {
    timerMessage = "Oops, time's up! Try again."
  }
  draw();
}

// Start the timer, then set updateTimer() to run once a second.
timerMessage = "You have " + timer + " seconds to find " + turkeyFound.length + " turkeys!";
draw();
setInterval(updateTimer, 1000);