// This is a modification of something I learned here:
//I added the drop list, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice
// grabs the <canvas></canvas>, which is simply another html element
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');//seems more like it should be setContext...?

//below is called chaining  variables: chain = otherChain = anotherchain
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var numberBalls = 10;

//this is select drop list
var dropBalls = document.getElementById('dropBalls');

dropBalls.addEventListener('change', addBallz);
function addBallz(){
  numberBalls = dropBalls.value;
}
//function to generate random number

function randomMW(min,max) {
  var num = Math.floor(Math.random()*(max-min)) + min;
  return num;
}

//this is an object constructor, hence the Capital letter
function Ball(x, y, velX, velY, color, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.color = color;
  this.size = size;
}

Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
/*
The last two parameters (0, 2*PI) specify the start and end number
of degrees round the circle that the arc is drawn between.
Here we specify 0 degrees, and 2 * PI, which is the
equivalent of 360 degrees in radians
(annoyingly, you have to specify this in radians).
That gives us a complete circle.
If you had specified only 1 * PI, you'd get a semi-circle (180 degrees).
*/
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);

/*
basically states "finish drawing the path we started with
beginPath(), and fill the area it takes up with
the color we specified earlier in fillStyle."
*/
  ctx.fill();//
}
Ball.prototype.update = function(){
//makes balls 'bounce' off wall
  if ((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }

  if ((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }

  if ((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }

  if ((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }

  this.x += this.velX;
  this.y += this.velY;
}//end ball.update

Ball.prototype.collisionDetect = function(){
  for(var j = 0; j < balls.length; j++){

/*is the ball we are checking not the current one
in the loop, if so, proceed.

Put another way: is the current ball
(whose collisionDetect is being invoked)
the same as the loop ball?
Then we negate the check ( ! ) so the statement only
runs if the are *not* the same
  */
    if(!(this === balls[j])){

      /*check to see if two circles overlap - collide
      */
      var dx = this.x - balls[j].x;
      var dy = this.y - balls[j].y;
      var distance = Math.sqrt(dx * dx + dy * dy);

//if a collision was detected
      if(distance < this.size + balls[j].size){
        balls[j].color = this.color = 'rgb(' + randomMW(0,255) + ',' + randomMW(0,255) + ','  + randomMW(0,255) + ')';
      }//end if(distance....)

    }// end if(!(this))
  }//end for (var j)
}

var balls = [];// we add array values via balls.push(ball);

function loop(){
  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
  ctx.fillRect(0, 0, width, height);

  if (balls.length < numberBalls) {
    var ball = new Ball (
      randomMW(0,width),
      randomMW(0,height),
      randomMW(-5,5),//-7,7
      randomMW(-5,5),//this is velocity
      'rgb(' + randomMW(0,255) + ',' + randomMW(0,255) + ','  + randomMW(0,255) +  ')',
      randomMW(10,20)
    );
    balls.push(ball);//'push(es) a ball instance into balls[]'
  } else if (balls.length > numberBalls) {
    balls.pop(ball);
  }//end if balls.length
  for (var i = 0; i < balls.length; i++) {
    balls[i].draw();
    balls[i].update();
    balls[i].collisionDetect();
  }
  requestAnimationFrame(loop);//runs frames continously set speed per second

}//end function loop()
loop();