
	var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width=$(document).width();
canvas.height=$(document).height();
//fja randomMinMax
function randomMinMax(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
//fja draw Bubble Circle  / coordinates of centre in number (centerX, center Y),radius in number, colorFill in string 
function drawBubble(xPos, yPos,radius,startAngle, endAngle,anticlockwise,
lineColor, fillColor) {
  /*context.beginPath();
  context.arc(centerX, centerY, radius, 0,2* Math.PI, false,"blue")
  context.fillStyle = colorFill;
  context.fill();
  context.strokeStyle = 'black';
  context.stroke();*/
  var startAngle = 0;
var endAngle   = 360;

var radius = radius;

context.strokeStyle = lineColor;
context.fillStyle   = fillColor;
context.lineWidth   = 2;

context.beginPath();
context.arc(xPos, yPos,
radius,
startAngle, endAngle,
anticlockwise);
context.fill();
context.stroke();
}

//data for small green bubbles
var radiusSmall = 28;
var min = radiusSmall;
var max = canvas.width - radiusSmall;

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

//niz koji u sebi sadrzi loptice koje su objekti, a svaka loptica ima svoj randomX, randomY i speedX, speedY
arrBubble = [];

for (var i = 0; i < 70; i++){
  
  arrBubble.push(
    
   {
    randomX: randomMinMax(min, max),
    randomY: randomMinMax(min, max),
    speedX: randomMinMax(-5, 15),
    speedY: randomMinMax(-5, 25)
   }
  );
}

function moveGreenBubbles() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  radiusSmall+=0.3;
  if(radiusSmall>30)
    radiusSmall=0;
  for (var i = 0; i < arrBubble.length; i++) { //pocetak petlje

    //y coord
    if (arrBubble[i].randomY + radiusSmall >= canvas.height || arrBubble[i].randomY - radiusSmall <= 0) {

      arrBubble[i].speedY = -arrBubble[i].speedY;

    }

    arrBubble[i].randomY += arrBubble[i].speedY;

    //x coord
    if (arrBubble[i].randomX + radiusSmall >= canvas.width || arrBubble[i].randomX - radiusSmall <= 0) {

      arrBubble[i].speedX = -arrBubble[i].speedX;

    }

    arrBubble[i].randomX += arrBubble[i].speedX;
   
    drawBubble(arrBubble[i].randomX, arrBubble[i].randomY, radiusSmall,0,360, false,"black",getRandomColor());

  }//end for petlje za svih N kruzica
  
//   for loop collision detection 
 for (var k = 0; k < arrBubble.length; k++) { // u ovom slucaju imamo nepotrebno antisimetricno ponavljanje parova k = 0 j = 1  ili  k = 1 j = 0 (sto je isto) zato stavljamo da je j = k

   for (var j = k; j < arrBubble.length; j++) {  // j = k eliminise ove ponavljanje ovih antisimetricnih parova

     if (k === j) {
       continue;
     }

     var dx = arrBubble[k].randomX - arrBubble[j].randomX;
     var dy = arrBubble[k].randomY - arrBubble[j].randomY;
     //rastojanje (Pitagora) izmedju 2 centra 2 kruzica a sa poznatima X,Y koord svakog kruzica
     var distance = Math.sqrt(dx * dx + dy * dy);

     if (distance < 2 * radiusSmall) {
       // collision detected!
      // console.log(k);
      // console.log(j);
       //arrBubble.splice(k, 1);
      // arrBubble.splice(j - 1, 1); //mora da se stavi j-1 zbog pomeranja indexa
      // console.log('collision detected');
     }

   } //end j loop

 } //end k loop
  
  
} // end function moveGreenBubbles

setInterval(moveGreenBubbles, 30);