var main = (function () {
	
	var canvas, ctx;
	var deg360 = Math.PI*2;
  var r, g, b;
  var dom = {};
  var count = 0;
  var last = 5;
	var latency = 5;
  var points = [];
  
	var randomRange = function (min, max) {
		return min + Math.random() * (max - min);
	};
    
	var randomRangeInt = function (min, max) {
		return Math.round(randomRange(min, max));
	}
	
	var cropInt = function (min, max, int) {
		return Math.min(max, Math.max(min, int));
	}
	
	var colorCompChange = function (colorComp) {
		return cropInt(50, 200, colorComp + randomRangeInt(-15, 15));
	}
  
  var circle = function (x, y, r, c) {
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.arc(x, y, r, 0, deg360, false);
    ctx.fillStyle = 'rgb(' + c.join(',') + ')';
    ctx.fill();
  };
  
  var line = function (sx, sy, ex, ey, w, c) {
    ctx.beginPath();
    ctx.moveTo(sx, sy);
    ctx.lineTo(ex, ey);
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgba(' + c.join(',') + ', 0.5)';
    ctx.stroke();
  };
  
  var drawNextPoint = function (x, y) {
    // update color components
    r = colorCompChange(r);
    g = colorCompChange(g);
    b = colorCompChange(b);
    
    // display corrdinates and color components
    var v = {x:x, y:y, r:r, g:g, b:b};
    for (var k in v)
      dom[k].innerHTML = v[k];
    
    // draw current point
    circle(x, y, 3, [r, g, b]);
    
		// connect to last 5 points
		for (var i = 0; i < points.length; i++) {
      var w = randomRange(0.2, 3);
      line(x, y, points[i].x, points[i].y, w, [r, g, b]);
		}
		
		// (re)set the last 5 points
    if (points.length > last) {
			points.splice(0, 1);
    }
		points.push( { x: x, y: y } );
  };
  
  var startOver = function () {
    points = [];
    ctx.clearRect (0, 0, canvas.width, canvas.height);
  };
  
  var demoCount = 0;
  var demo = function () {
    demoCount++;
    var x, y;
    if (points.length==0) {
      x = 240;
      y = 80;
    } else {
      x = points[points.length-1].x;
      y = points[points.length-1].y;
    }
		x = cropInt(0, canvas.width, x + randomRangeInt(-35, 35));
		y = cropInt(0, canvas.height, y + randomRangeInt(-35, 35));
    drawNextPoint(x, y);
    if (demoCount < 100) {
      setTimeout(arguments.callee, 1000/60);
    }
  };
  
  var start = function () {
    canvas = document.getElementById('space');
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx = canvas.getContext('2d');
    
    var spans = 'rgbxy';
    for (var i=0; i<spans.length; i++)
      dom[spans[i]] = document.getElementById(spans[i]);
    
		r = randomRangeInt(50, 200);
		g = randomRangeInt(50, 200);
		b = randomRangeInt(50, 200);
    
    canvas.addEventListener('click', startOver, false);
    canvas.addEventListener('mousemove', function (e) {
			count++;
      if (count % latency == 0) {
				drawNextPoint(e.clientX, e.clientY);
      }
    }, false);
    
    demo();
  };
  
  // domReady
  if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', function () {
      document.removeEventListener('DOMContentLoaded', arguments.callee, false);
      setTimeout(start, 60);
    }, false );
  }
  
})();