function initBalls(){
        balls = [];

        var color1 = "rgba(255,255,255,1)";
        var xOffset = 20;
        var yOffset = 20;
		
        // ball
        var aOf = xOffset +0;
        var bOf = yOffset + 0;
        balls.push(new Ball(aOf + 183,bOf + 67, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 511,bOf + 77, 0, 4, color1, "square"));
        
        balls.push(new Ball(aOf + 245,bOf + 207, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 393,bOf + 207, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 484,bOf + 207, 0, 0, color1, "ball"));
        
        balls.push(new Ball(aOf + 102,bOf + 268, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 193,bOf + 268, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 239,bOf + 268, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 284,bOf + 268, 0, 0, color1, "ball"));
                
        balls.push(new Ball(aOf + 231,bOf + 330, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 356,bOf + 330, 0, 0, color1, "ball"));

        balls.push(new Ball(aOf + 86,bOf + 428, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 147,bOf + 428, 0, 0, color1, "ball"));

        balls.push(new Ball(aOf + 50,bOf + 488, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 480,bOf + 488, 0, 0, color1, "ball"));

        balls.push(new Ball(aOf + 50, bOf + 548, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 301,bOf + 548, 0, 0, color1, "ball"));
        balls.push(new Ball(aOf + 346,bOf + 548, 0, 0, color1, "ball"));

        balls.push(new Ball(aOf + 373,bOf + 557, 0, 0, color1, "square"));
        balls.push(new Ball(aOf + 392,bOf + 557, 0, 0, color1, "square"));
        balls.push(new Ball(aOf + 410,bOf + 557, 0, 0, color1, "square"));
        return balls;
    }
 
    function updateBalls(kin, balls){
    	var canvas = kin.getCanvas();
        var context = kin.getContext();
        var collisionDamper = 0.7;
        var floorFriction = 0.005 * kin.getTimeInterval();
        var mouseForceMultiplier = 2.4 * kin.getTimeInterval();
        var restoreForce = 0.009 * kin.getTimeInterval();
 
        for (var 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
            var mousePos = kin.getMousePos();
            mouseX = mousePos === null ? 99999 : mousePos.x;
            mouseY = mousePos === null ? 99999 : mousePos.y;
            var distX = ball.x - mouseX;
            var distY = ball.y - mouseY;
 
            var radius = Math.sqrt(Math.pow(distX, 2) +
            Math.pow(distY, 2));
 
            var totalDist = Math.abs(distX) + Math.abs(distY);
 
            var forceX = (Math.abs(distX) / totalDist) *
            (1 / radius) *
            mouseForceMultiplier;
            var 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, type){
    
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        
        this.color = color;
        this.origX = x;
        this.origY = y;
        this.radius = 12;
        this.radius_sub = 7;
        this.width = 10;
        this.border = 0;
        this.type = type;
    }
    
    window.onload = function(){
        kin = new Kinetic_2d("CounterCanvas");
        var canvas = kin.getCanvas();
        var context = kin.getContext();
        var mouseX = 99999;
        var mouseY = 99999;
 
        canvas.onmouseout = function(){
            mouseX = 99999;
            mouseY = 99999;
        };
 
        var balls = initBalls();
 
        kin.setDrawStage(function(){
            updateBalls(this, balls);
            this.clear();
            var mousePos = kin.getMousePos();
            mouseX = mousePos === null ? 99999 : mousePos.x;
            mouseY = mousePos === null ? 99999 : mousePos.y;
 
            for (var n = 0; n < balls.length; n++) {
				var ball = balls[n];
                context.beginPath();
                if(ball.type == "ball"){
                    context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false); 
                } else if(ball.type == "ball2") {
                    context.arc(ball.x, ball.y, ball.radius_sub, 0, 2 * Math.PI, false);
				} else if(ball.type == "square") {
                    context.rect(ball.x, ball.y, ball.width, ball.width);
                    context.shadowColor = "rgb(43,130,164)"}
                context.fillStyle = ball.color;
                context.fill();
                context.shadowOffsetX = 6;
		      	context.shadowOffsetY = 6;
      			context.shadowBlur = 1;
		      	context.shadowColor = "rgba(50,50,50,0.2)";
                }
        });
 
        kin.startAnimation();
    };