$(document).ready(function() {
  var canvas = $("#canvas")[0];
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  var context = canvas.getContext("2d");
  context.lineJoin = "round";
  context.fillRect(0, 0, canvas.width, canvas.height);
  //context.globalCompositeOperation = "lighten";
  
  var centre = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };
  var startAlpha = 55 / 255;
  var endAlpha = 32 / 255;
  var numCircles = 50;
  
  for (var i=numCircles; i>0; i--) {
    var radius = i * 5 + 10;
    var linePoints = getLinePoints(10);
    var point = linePoints.first;
    var phase = Math.random() * 2 * Math.PI;

    context.beginPath();
    var x = centre.x + (radius + point.y * radius / 8) * Math.cos(2 * Math.PI * point.x + phase);
    var y = centre.y + (radius + point.y * radius / 8) * Math.sin(2 * Math.PI * point.x + phase);
    context.lineTo(x, y);
    while(point.next != null) {
      point = point.next;
      x = centre.x + (radius + point.y * radius / 8) * Math.cos(2 * Math.PI * point.x + phase);
      y = centre.y + (radius + point.y * radius / 8) * Math.sin(2 * Math.PI * point.x + phase);
      context.lineTo(x, y);
    }
    context.closePath();
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    var a = startAlpha + (i / (numCircles - 1)) * (endAlpha - startAlpha);
    var a0 = 0.67 * a;
    
    var color1 = "rgba("+r+","+g+","+b+","+a+")";
    var color0 = "rgba("+r+","+g+","+b+","+a0+")";
    var grad = context.createRadialGradient(centre.x, centre.y, 0.67 * 510, centre.x, centre.y, 510);
    grad.addColorStop(0,color0);
    grad.addColorStop(1,color1);
    context.fillStyle = grad;
    context.fill();
  }
    
  function getLinePoints(iterations) {
		var pointList = {};
		pointList.first = {x:0, y:1};
		var lastPoint = {x:1, y:1}
		var minY = 1;
		var maxY = 1;
		var point;
		var nextPoint;
		var dx, newX, newY;

		pointList.first.next = lastPoint;
		for (var i = 0; i < iterations; i++) {
			point = pointList.first;
			while (point.next != null) {
				nextPoint = point.next;
				
				dx = nextPoint.x - point.x;
				newX = 0.5*(point.x + nextPoint.x);
				newY = 0.5*(point.y + nextPoint.y);
				newY += dx*(Math.random()*2 - 1);
				
				var newPoint = {x:newX, y:newY};
				
				//min, max
				if (newY < minY) {
					minY = newY;
				}
				else if (newY > maxY) {
					maxY = newY;
				}
				
				//put between points
				newPoint.next = nextPoint;
				point.next = newPoint;
				
				point = nextPoint;
			}
		}
		
		//normalize to values between 0 and 1
		if (maxY != minY) {
			var normalizeRate = 1/(maxY - minY);
			point = pointList.first;
			while (point != null) {
				point.y = normalizeRate*(point.y - minY);
				point = point.next;
			}
		}
		//unlikely that max = min, but could happen if using zero iterations. In this case, set all points equal to 1.
		else {
			point = pointList.first;
			while (point != null) {
				point.y = 1;
				point = point.next;
			}
		}
		
		return pointList;		
	}
});