(function() {
	var canvasBody, $,
			w = window.innerWidth,
			h = window.innerHeight,
			gui = new dat.GUI(),
			stats = new Stats(),
			tick = 0,
			pi = Math.PI,
			pi2 = pi*2,
			piD2 = pi/2,
			piD3 = pi/3,
			piD6 = pi/6,
			pi2D3 = pi2/3,
			piDeg = pi/180,
			particles = [],
			canvasStyles = {
				position: "absolute",
				top: "0px",
				left: "0px",
				"background-color": "#222",
				"z-index": -1
			},
			Mouse = new Vector2(w/2, h/2),
			mousePressed = false,
			opts = {
				bgc: "#fcfcfc",
				showFPS: false,
				color: "#75b8d4",
				amount: 30,
				thickness: 5,
				radius: 12,
				rotSpeed: 0.4,
				gravity: 0.8,
				populate: function(){
						particles = [];
						for(var i =0; i < opts.amount; particles[i++]= new Shape());
						console.log(particles)
					}
			},
			Shape = function(){
				this.vertices = Math.floor(Math.random()*5);
				this.pos = new Vector2(opts.radius/2 + Math.random()*w - opts.radius, Math.random()*h - opts.radius);
				this.angle=Math.random()*180;
				this.d=Math.random()<.5?1:-1
			}; 
	Shape.prototype = {
		update: function(){
			this.pos.y-opts.radius-opts.thickness<h?(
				this.pos.y+=opts.gravity,
				this.angle+=opts.rotSpeed*this.d
				): 
				this.pos.set(Math.random()*w, -opts.radius);
		},
		render: function(){
			if(this.vertices>0){
				$.beginPath();
				$.moveTo(Math.cos(this.angle*piDeg)*opts.radius+this.pos.x,Math.sin(this.angle*piDeg)*opts.radius+this.pos.y);
				for(var i=1; i<this.vertices;i++){
					var a = pi2/this.vertices*i;
					var aa = this.angle*piDeg;
					$.lineTo(Math.cos(a+aa)*opts.radius+this.pos.x,
									Math.sin(a+aa)*opts.radius+this.pos.y);
				}
				$.closePath();
				$.lineCap = "round";
				$.lineJoin = "round";
				$.lineWidth = opts.thickness;
				$.strokeStyle = opts.color;
				$.stroke();
			} else {
				$.beginPath();
				$.arc(this.pos.x, this.pos.y, opts.radius, 0,pi2);
				$.closePath();
				$.lineWidth = opts.thickness;
				$.strokeStyle = opts.color;
				$.stroke();
			}
		}
	}
	function setup(){
		createCanvas();
		addListeners();
		opts.populate();
		document.body.appendChild(stats.domElement);
		
		gui.addColor(opts, "color");
		gui.add(opts, "radius", 5, 50);
		gui.add(opts, "thickness", 1, 20);
		gui.add(opts, "amount", 1, 1000).onFinishChange(opts.populate);
		gui.add(opts, "rotSpeed", 0.01, 10, 0.01);
		gui.add(opts, "gravity", 0.1, 10);
		gui.add(opts, "populate").name("respawn");
		window.requestAnimationFrame(loop);
	}
	function loop(){
		stats.begin();
		drawBg();
		particles.map(function(S){
			S.update();
			S.render();
		})
		opts.showFPS ? stats.domElement.style["display"] = "block" : stats.domElement.style["display"] = "none";
		window.requestAnimationFrame(loop);
		stats.end();
	}
	function createCanvas() {
		var el = document.createElement("canvas"),
				ctx = el.getContext("2d");
		for (var style in canvasStyles) {
			el.style[style] = canvasStyles[style];
		}
		document.body.appendChild(el);
		canvasBody = el;
		$ = ctx;
		canvasBody.width = w;
		canvasBody.height = h;
		document.body.style["overflow"] = "hidden"
		return [el, ctx];
	}
	function drawBg() {
		$.fillStyle = opts.bgc;
		$.fillRect(0, 0, w, h);
	}
	
	function addListeners(){
		window.addEventListener("resize", resize);
		window.addEventListener("mousemove", mouseMove);
		canvasBody.addEventListener("mousedown", mouseDown);
		canvasBody.addEventListener("mouseup", mouseUp);
		canvasBody.addEventListener("touchmove", touchMove);
		canvasBody.addEventListener("touchstart", touchStart);
		canvasBody.addEventListener("touchend", touchEnd);
	}
	function resize(){
		w = canvasBody.width = window.innerWidth;
		h = canvasBody.height = window.innerHeight;
	}
	function mouseDown(event){
		mousePressed = true;
		Mouse.set(event.pageX, event.pageY);
	}
	function mouseUp(event){
		mousePressed = false;
	}
	function mouseMove(event){
		Mouse.set(event.pageX, event.pageY);
	}
	function touchMove(event){
		var touches = event.changedTouches;
		Mouse.set(touches[0].pageX, touches[0].pageY);
	}
	function touchStart(event){
		e.preventDefault();
		mousePressed = true;
		touchMove(event);
	}
	function touchEnd(event){
		mousePressed = false;
	}
	setup();
})()