// Creating variables
var circlesX=[100,300,500,600];
var circlesY=[100,500,150,350];
var angle=0;
var state=0;
var smallCircleX,deltaX;
var smallCircleY,deltaY;

function areCirclesColliding(circleOneX,circleOneY,circleTwoX,circleTwoY,radiuses){
    return Math.sqrt((circleOneX-circleTwoX)*(circleOneX-circleTwoX)+(circleOneY-circleTwoY)*(circleOneY-circleTwoY))<radiuses;
}

function update() {
    if(state!=-1){
        angle+=0.01;
        if(angle>=360){
            angle-=360;
        }
    }else{
        smallCircleX+=deltaX;
        smallCircleY+=deltaY;
        for(var i=0;i<4;i++){
            if(areCirclesColliding(smallCircleX,smallCircleY,circlesX[i],circlesY[i],70)){
                state=i;
                angle=Math.atan2(smallCircleY-circlesY[i],smallCircleX-circlesX[i]);
            }
        }
    }
}

function draw() {
	// This is how you draw a rectangle
    for(var i=0;i<4;i++){
        context.beginPath();
        context.arc(circlesX[i],circlesY[i],50,0,2*Math.PI);
        context.fillStyle="blue";
        context.strokeStyle="black";
        context.stroke();
        context.fill();
        context.closePath();
    }
    if(state!=-1){
        smallCircleX=circlesX[state]+Math.cos(angle)*50;
        smallCircleY=circlesY[state]+Math.sin(angle)*50;
    }
    context.beginPath();
    context.arc(smallCircleX,smallCircleY,20,0,2*Math.PI);
    context.fillStyle="green";
    context.strokeStyle="black";
    context.stroke();
    context.fill();
    context.closePath();
}

function keyup(key) {
	// Show the pressed keycode in the console
	console.log("Pressed", key);
    // Show coordinates of mouse on click
    smallCircleX=circlesX[state]+Math.cos(angle)*71;
    smallCircleY=circlesY[state]+Math.sin(angle)*71;
    deltaX=Math.cos(angle)*2;
    deltaY=Math.sin(angle)*2;
    state=-1;
}
function mouseup() {
	// Show coordinates of mouse on click
    smallCircleX=circlesX[state]+Math.cos(angle)*71;
    smallCircleY=circlesY[state]+Math.sin(angle)*71;
    deltaX=Math.cos(angle)*2;
    deltaY=Math.sin(angle)*2;
    state=-1;
	console.log("Mouse clicked at", mouseX, mouseY);
}