// JavaScript Pinball
// Rhys Powell (rp996)

// Constants
var BALL_SIZE = 32;
var WIDTH = 400;
var HEIGHT = 600;

// Our shared variables
var score = 0;

var ball;
var posX , posY, velX, velY;
var paddle;
var bumpers = [];
var currentTime, previousTime, deltaTime;
var gameInterval; // Used to stop the update loop

function getBumpers() {
  for (var i = 0; i < 3; i++) {
    bumper = document.getElementById("bumper-" + (i + 1));
    bumper.style.top = (Math.random() * (HEIGHT - 100 - BALL_SIZE) ) + "px";
    bumper.style.left = (Math.random() * (WIDTH - BALL_SIZE)) + "px";

    bumpers.push(bumper);
  }
}

function checkCollisions() {
  // Check for collisions against the edge of the playfield

  // Bounce off the sides
  if (posX + BALL_SIZE > WIDTH || posX < 0) {
    velX = -velX;
    velX *= 1 + (Math.random() * 0.1);
    velY *= 1 - (Math.random() * 0.5);

    score += 2;
  }

  // Bounce off the top
  if (posY < 0) {
    velY = -velY;

    score += 5;
  };

  // Stop the ball if we get a game over.
  if (posY > HEIGHT) {
    velX = 0;
    velY = 0;

    gameOver();
  };

  // Paddle collision
  if (posY + BALL_SIZE >= paddle.offsetTop &&
      posY <= paddle.offsetTop + 30 &&
      posX + BALL_SIZE > paddle.offsetLeft &&
      posX < paddle.offsetLeft + 100) {
    velY = -((Math.random() * 300) + 100);

    score += 20;
  };

  // Bounce off the bumpers
  for (var i = 0; i < bumpers.length; i++) {
    var radius = BALL_SIZE / 2
    var x = (bumpers[i].offsetLeft + radius) - (ball.offsetLeft + radius);
    var y = (bumpers[i].offsetTop + radius) - (ball.offsetTop + radius);
    var distance = Math.sqrt(x*x + y*y);

    if (distance < radius * 2) {
      velY = -velY;
      velX = -velX;
      velY *= 1 + (Math.random() * 0.1);
      velX *= 1 + (Math.random() * 0.1);
      console.log(distance);

      bumpers[i].style.background = "#B0D18D";
      window.setTimeout(unflashBumper, 200, i);


      score += 10;
    }
  }

  if (velX > 600) {
    velX = 600;
  } else if (velX < -600) {
    velX = -600;
  } else if (velX < 100 && velX > 0) {
    velX = 100
  } else if (velX > -100 && velX < 0) {
    velX = -100;
  }

  if (velY > 600) {
    velY = 600;
  } else if (velY < -600) {
    velY = -600;
  } else if (velY < 100 && velY > 0) {
    velY = 100
  } else if (velY > -100 && velY < 0) {
    velY = -100;
  }
}

function unflashBumper(n) {
  bumpers[n].style.background = "#3B86B7";
}

function update() {
  // Calculate time elapsed since last frame
  previousTime = currentTime;
  currentTime = Date.now();
  deltaTime = (currentTime - previousTime) / 1000;

  checkCollisions();


  // Update position of ball
  posX += velX * deltaTime;
  posY += velY * deltaTime;

  // 'redraw' so to speak
  ball.style.left = posX + "px";
  ball.style.top = posY + "px";

  document.getElementById("score").innerHTML = "Score: " + score;
}

function setup () {
  ball = document.getElementById("ball");
  paddle = document.getElementById("paddle");
  getBumpers();

  posX = (Math.random() * (HEIGHT - 100 - BALL_SIZE) );
  posY = (Math.random() * (WIDTH - BALL_SIZE));

  velX = (Math.random() * 800) - 400;
  velY = (Math.random() * 800) - 400;

  document.onmousemove = function(e) {
    paddle.style.left = (e.clientX - 50)+ "px";
  };
  console.log(posX + ", " + posY);

  ball.style.top = posY;
  ball.style.left = posX;

  currentTime = Date.now();
  previousTime = Date.now();
  deltaTime = 0;
}

function game() {
  setup();

  gameInterval = setInterval(update, 1000/50);
}

function gameOver() {
  clearInterval(gameInterval);

  document.getElementById("board").style.display = "none";
  document.getElementById("gameOver").style.display = "block";
  document.getElementById("finalScore").innerHTML = score.toString();

  window.setTimeout(close, 4000);
}

function countdown(n) {
  if (n > 0) {
    document.getElementById("seconds").innerHTML = n.toString();
    window.setTimeout(countdown, 1000, n-1);
  } else {
    document.getElementById("board").style.display = "block";
    document.getElementById("countdown").style.display = "none";
    game();
  };
}