window.requestAnimFrame = ((callback) => {
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        }
    );
})();

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function initBalls() {
    balls = [];

    let colors = ["#6F1E51", "#833471", "#B53471", "#ED4C67"];

    for (let n = 0; n <= 8; n++) {
        for (let i = 0; i <= 18; i++) {
            balls.push(new Ball((i * 3 * 10) + 30, (n * 30) + 50 + 30, 0, 0, colors[randomFromTo(0, 8)]));
        }
    }

    return balls;
}
function getMousePos(canvas, evt) {
    let obj = canvas;
    let top = 0;
    let left = 0;
    while (obj.tagName !== 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }

    // Return relative mouse position
    let mouseX = evt.clientX - left + window.pageXOffset;
    let mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}
function updateBalls(canvas, balls, timeDiff, mousePos) {
    let context = canvas.getContext('2d');
    let collisionDamper = 0.3;
    let floorFriction = 0.0005 * timeDiff;
    let mouseForceMultiplier = 1 * timeDiff;
    let restoreForce = 0.002 * timeDiff;

    for (let n = 0; n < balls.length; n++) {
        var ball = balls[n];
        // Set ball position based on velocity
        ball.y += ball.vy;
        ball.x += ball.vx;

        // Restore forces
        if (ball.x > ball.origX) {
            ball.vx -= restoreForce;
        } else {
            ball.vx += restoreForce;
        }
        if (ball.y > ball.origY) {
            ball.vy -= restoreForce;
        } else {
            ball.vy += restoreForce;
        }

        // Mouse forces
        let mouseX = mousePos.x;
        let mouseY = mousePos.y;

        let distX = ball.x - mouseX;
        let distY = ball.y - mouseY;

        let radius = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));

        let totalDist = Math.abs(distX) + Math.abs(distY);

        let forceX =
            (Math.abs(distX) / totalDist) * (1 / radius) * mouseForceMultiplier;
        let forceY =
            (Math.abs(distY) / totalDist) * (1 / radius) * mouseForceMultiplier;

        if (distX > 0) {
            // Mouse is left of ball
            ball.vx += forceX;
        } else {
            ball.vx -= forceX;
        }
        if (distY > 0) {
            // Mouse is on top of ball
            ball.vy += forceY;
        } else {
            ball.vy -= forceY;
        }

        // Floor friction
        if (ball.vx > 0) {
            ball.vx -= floorFriction;
        } else if (ball.vx < 0) {
            ball.vx += floorFriction;
        }
        if (ball.vy > 0) {
            ball.vy -= floorFriction;
        } else if (ball.vy < 0) {
            ball.vy += floorFriction;
        }

        // Floor condition
        if (ball.y > canvas.height - ball.radius) {
            ball.y = canvas.height - ball.radius - 2;
            ball.vy *= -1;
            ball.vy *= 1 - collisionDamper;
        }

        // Ceiling condition
        if (ball.y < ball.radius) {
            ball.y = ball.radius + 2;
            ball.vy *= -1;
            ball.vy *= 1 - collisionDamper;
        }

        // Right wall condition
        if (ball.x > canvas.width - ball.radius) {
            ball.x = canvas.width - ball.radius - 2;
            ball.vx *= -1;
            ball.vx *= 1 - collisionDamper;
        }

        // Left wall condition
        if (ball.x < ball.radius) {
            ball.x = ball.radius + 2;
            ball.vx *= -1;
            ball.vx *= 1 - collisionDamper;
        }
    }
}
function Ball(x, y, vx, vy, color) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.color = color;
    this.origX = x;
    this.origY = y;
    this.radius = 10;
}
function animate(canvas, balls, lastTime, mousePos) {
    let context = canvas.getContext('2d');

    // Update
    let date = new Date();
    let time = date.getTime();
    let timeDiff = time - lastTime;
    updateBalls(canvas, balls, timeDiff, mousePos);
    lastTime = time;

    // Clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Render
    for (let n = 0; n < balls.length; n++) {
        let ball = balls[n];
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
        context.fillStyle = ball.color;
        context.fill();
    }

    // Request new frame
    requestAnimFrame(() => {
        animate(canvas, balls, lastTime, mousePos);
    });
}
let canvas = document.getElementById('myCanvas');
var balls = initBalls();
let date = new Date();
let time = date.getTime();

// Set mouse position really far away so the mouse forces are nearly obsolete
var mousePos = {
    x: 9999,
    y: 9999
};

canvas.addEventListener('mousemove', (evt) => {
    let pos = getMousePos(canvas, evt);
    mousePos.x = pos.x;
    mousePos.y = pos.y;
});

canvas.addEventListener("mouseout", (evt) => {
    mousePos.x = 9999;
    mousePos.y = 9999;
});

animate(canvas, balls, time, mousePos);