(function(){
	var canvasBody = document.getElementById("canvas"),
			canvas = canvasBody.getContext("2d"),
			
			w = canvasBody.width = window.innerWidth,
			h = canvasBody.height = window.innerHeight,
			gui = new dat.GUI(),
			pi = Math.PI,
			pi2 = pi*2,
			piD2 = pi/2,
			tick = 0,
			Mouse = new Vector2(w/2, h/2),
			opts = {
				bgc: "rgba(20,20,20,0.2)",
				size: 24,
				spacing: 25,
				colorRotSpeed: 1.5,
				showFPS: false,
				hint: "Hold down the mouse!",
				maxSpeed: 3,
				randomForce: {
					is: false,
					minForce: 3,
					addedForce: 5
				}
			},
			movedOnce = 1,
			mouseClicked = true,
			Color = function(obj){
				this.mode = obj.color.substr(0, obj.color.indexOf("("));
				if(this.mode == "hsl"){
					var arr = new Array();
					arr = obj.color.split(" ");
					var arr2 = new Array();
					for(var i = 0; i < arr.length; i++){
						if(!isNaN(+arr[i])){
							arr2.push(+arr[i]);
						}
					}
					this.hue = arr2[0];
					this.sat = arr2[1];
					this.lit = arr2[2];
				}
				return this.get();
			},
			Point = function(X, Y, hue){
				this.pos = new Vector2(X||0, Y||0);
				this.startPos = new Vector2(X||0, Y||0);
				this.speed = new Vector2();
				this.acc = new Vector2();
				this.maxSpeed = !opts.randomForce.is ? opts.maxSpeed : (opts.randomForce.minForce + Math.random()*opts.randomForce.addedForce);
				this.color = new Color({
					color: "hsl( "+hue+" , 50 %, 50 %)"
				});
				this.size = Math.random()*5;
			},
			points = [];
	Color.prototype.get = function(){
		if(this.mode == "hsl"){
			return "hsl("+this.hue+","+this.sat+"%,"+this.lit+"%)";
		}
	}
	Color.prototype.rotate = function(deg){
		if(this.mode == "hsl"){
			this.hue <= 360 ? this.hue+=deg : this.hue=deg;
		}
		return this;
	}
	Point.prototype.update = function(){
		this.color.rotate(opts.colorRotSpeed);
		this.speed.add(this.acc);
		this.pos.add(this.speed);
		this.acc.set(0);
		return this;
	}
	Point.prototype.applyForces = function(){
		var runM = this.attractTo(Mouse);
		var runP = this.attractTo(this.startPos);
		if(mouseClicked) this.force(runM), runP.mult(0.95);
		this.force(runP);
		return this;
	}
	Point.prototype.attractTo = function(vector){
		var tar = vector.copy();
		tar.sub(this.pos);
		var desired = tar.sub(this.speed);
		desired.limit(this.maxSpeed);
		return desired;
	}
	Point.prototype.force = function(force){
		var f = force.copy();
		this.acc.add(f);
		return this;
	}
	Point.prototype.render = function(){
		var size = opts.size;
		// canvas.fillStyle = "rgba(255,255,255,0.01)";
		// canvas.fillRect(this.startPos.x, this.startPos.y, size, size);
		canvas.fillStyle = this.color.get();
		// canvas.beginPath();
		// canvas.arc(this.pos.x, this.pos.y, size, 0, pi2);
		// canvas.closePath();
		// canvas.fill();
		canvas.fillRect(this.pos.x, this.pos.y, size, size);
	}
	function populate(){
		points = [];
		for(var x = 0; x < w; x+=opts.spacing){
			for(var y = 0; y < h; y+=opts.spacing){
				points.push(new Point(x, y, (y+x)/15));
			}
		}
	}
	function setup(){
		if(w < 768){
			opts.size = 15;
			opts.spacing = 16;
			opts.colorRotSpeed = 1;
			gui.close();
		}
		populate();
		gui.add(opts, 'size', 1, 100);
		gui.addColor(opts, 'bgc');
		gui.add(opts, 'spacing', 1, 200).onFinishChange(populate);
		gui.add(opts, 'colorRotSpeed', 0.1, 10).step(0.01);
		gui.add(opts, 'showFPS');
		gui.add(opts, 'hint');
		gui.add(opts.randomForce, 'is').onFinishChange(populate).name("RandomSpeed");
		stats = new Stats();
		stats.showPanel( 0 );
		document.body.appendChild( stats.domElement );
		window.requestAnimationFrame(loop);
	};
	function loop(){
		stats.begin();
		canvas.fillStyle = opts.bgc;
		canvas.fillRect(0,0,w,h);
		points.map(function(point){
			point.applyForces().update().render();
		})
		window.requestAnimationFrame(loop);
		stats.end();
		opts.showFPS ? stats.domElement.style.display = "block" : stats.domElement.style.display = "none";
	};
	setup();
	
	window.addEventListener("resize", function(){
		w = canvasBody.width = window.innerWidth;
		h = canvasBody.height = window.innerHeight;
		populate();
	});
	canvasBody.addEventListener("mousemove", function(e){
		movedOnce > 0 ? mouseClicked = false : undefined;
		movedOnce--;
		Mouse.set(e.pageX, e.pageY)
	});
	canvasBody.addEventListener("mousedown", function(){
		mouseClicked = true;
	});
	canvasBody.addEventListener("mouseup", function(){
		mouseClicked = false;
	});
	canvasBody.addEventListener("touchstart", function(e){
		e.preventDefault();
		mouseClicked = true;
		var touches = e.changedTouches;
		Mouse.set(touches[0].pageX, touches[0].pageY);
	});
	canvasBody.addEventListener("touchmove", function(e){
		var touches = e.changedTouches;
		Mouse.set(touches[0].pageX, touches[0].pageY);
	});
	canvasBody.addEventListener("touchend", function(e){
		mouseClicked = false;
	});
})();