$(function () {
    var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
	var total_dots = 25;
		
    canvas = $("#canvas")[0];
    context = canvas.getContext("2d");
 	var dots = new Array();
	var drag_i = -1;
	
	var this_dot = {};
	for (var i=0; i < total_dots; i++){
		var this_dot = {
			x: Math.random()*canvas.width, 
			y: Math.random()*canvas.height, 
			width:canvas.width, 
			height: canvas.height, 
			radius:Math.random()*20+10
		};
		dots.push(this_dot);
	}
	
    
	draw();
 
    $("#canvas").mousedown(function (event) {
        var dx, dy, dist;
		for (var i=0; i < dots.length; i++){
			dx = event.pageX - this.offsetLeft - dots[i].x;
			dy = event.pageY - this.offsetTop - dots[i].y;
			dist = Math.sqrt(dx * dx + dy * dy);
			if(dist < radius) {
				drag = true;
				drag_i = i
				clickX = dx;
				clickY = dy;
				continue;
			}
		}
    });
 
    $("#canvas").mouseup(function (event) {
        drag = false;
		drag_i = -1;
    });
 
    $("#canvas").mousemove(function (event) {
        if(drag) {
            dots[drag_i].x = event.pageX - this.offsetLeft - clickX;
            dots[drag_i].y = event.pageY - this.offsetTop - clickY;
            draw();
        }
    });
 
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
		for (var i=0; i < dots.length; i++){
			context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);
		}
        context.fill();
    }
});