requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
})();

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = 0;
var height = 0;

window.onresize = function onresize() {
	width = canvas.width = window.innerWidth;
	height = canvas.height = window.innerHeight;
}

window.onresize();

var mouse = {
	X : 0,
	Y : 0
}

window.onmousemove = function onmousemove(event) {
	mouse.X = event.clientX;
	mouse.Y = event.clientY;
}

var particules = [];
var gouttes = [];
var nombrebase = 5;
var nombreb = 2;

var controls = {
	rain : 2,
	Object : "Nothing",
	alpha : 1,
	color : 200,
	auto : false,
	opacity : 1,
	saturation : 100,
	lightness : 50,
	back : 100,
	red : 0,
	green : 0,
	blue : 0,
	multi : false,
	speed : 2
};

function Rain(X, Y, nombre) {
	if (!nombre) {
		nombre = nombreb;
	}
	while (nombre--) {
		particules.push( 
		{
			vitesseX : (Math.random() * 0.25),
			vitesseY : (Math.random() * 9) + 1,
			X : X,
			Y : Y,
			alpha : 1,
			couleur : "hsla(" + controls.color + "," + controls.saturation + "%, " + controls.lightness + "%," + controls.opacity + ")",
		})
	}
}

function explosion(X, Y, couleur, nombre) {
	if (!nombre) {
		nombre = nombrebase;
	}
	while (nombre--) {
		gouttes.push( 
		{
			vitesseX : (Math.random() * 4-2	),
			vitesseY : (Math.random() * -4 ),
			X : X,
			Y : Y,
			radius : 0.65 + Math.floor(Math.random() *1.6),
			alpha : 1,
			couleur : couleur
		})
	}
}

function rendu(ctx) {

	if (controls.multi == true) {
		controls.color = Math.random()*360;
	}

	ctx.save();
	ctx.fillStyle = 'rgba('+controls.red+','+controls.green+','+controls.blue+',' + controls.alpha + ')';
	ctx.fillRect(0, 0, width, height);
	
	var particuleslocales = particules;
	var goutteslocales = gouttes;
	var tau = Math.PI * 2;

	for (var i = 0, particulesactives; particulesactives = particuleslocales[i]; i++) {
			
		ctx.globalAlpha = particulesactives.alpha;
		ctx.fillStyle = particulesactives.couleur;
		ctx.fillRect(particulesactives.X, particulesactives.Y, particulesactives.vitesseY/4, particulesactives.vitesseY);
	}

	for (var i = 0, gouttesactives; gouttesactives = goutteslocales[i]; i++) {
			
		ctx.globalAlpha = gouttesactives.alpha;
		ctx.fillStyle = gouttesactives.couleur;
		
		ctx.beginPath();
		ctx.arc(gouttesactives.X, gouttesactives.Y, gouttesactives.radius, 0, tau);
		ctx.fill();
	}
		ctx.strokeStyle = "white";
		ctx.lineWidth   = 2;

		if (controls.Object == "Umbrella") {
			ctx.beginPath();
			ctx.arc(mouse.X, mouse.Y+10, 138, 1 * Math.PI, 2 * Math.PI, false);
			ctx.lineWidth = 3;
			ctx.strokeStyle = "hsla(0,100%,100%,1)";
			ctx.stroke();
		}
		if (controls.Object == "Cup") {
			ctx.beginPath();
			ctx.arc(mouse.X, mouse.Y+10, 143, 1 * Math.PI, 2 * Math.PI, true);
			ctx.lineWidth = 3;
			ctx.strokeStyle = "hsla(0,100%,100%,1)";
			ctx.stroke();
		}
		if (controls.Object == "Circle") {
			ctx.beginPath();
			ctx.arc(mouse.X, mouse.Y+10, 138, 1 * Math.PI, 3 * Math.PI, false);
			ctx.lineWidth = 3;
			ctx.strokeStyle = "hsla(0,100%,100%,1)";
			ctx.stroke();
		}
	ctx.restore();
	
	if (controls.auto) {
		controls.color += controls.speed;
		if (controls.color >=360) {
			controls.color = 0;
		}
	}
}

function update() {

	var particuleslocales = particules;
	var goutteslocales = gouttes;
	
	for (var i = 0, particulesactives; particulesactives = particuleslocales[i]; i++) {
		particulesactives.X += particulesactives.vitesseX;
		particulesactives.Y += particulesactives.vitesseY+5;
		if (particulesactives.Y > height-15) {
			particuleslocales.splice(i--, 1);
			explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
		}
		var umbrella = (particulesactives.X - mouse.X)*(particulesactives.X - mouse.X) + (particulesactives.Y - mouse.Y)*(particulesactives.Y - mouse.Y);
			if (controls.Object == "Umbrella") {
				if (umbrella < 20000 && umbrella > 10000 && particulesactives.Y < mouse.Y) {
					explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
					particuleslocales.splice(i--, 1);
				}
			}
			if (controls.Object == "Cup") {
				if (umbrella > 20000 && umbrella < 30000 && particulesactives.X+138 > mouse.X && particulesactives.X-138 < mouse.X && particulesactives.Y > mouse.Y) {
					explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
					particuleslocales.splice(i--, 1);
				}
			}
			if (controls.Object == "Circle") {
				if (umbrella < 20000) {
					explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
					particuleslocales.splice(i--, 1);
				}
			}
	}

	for (var i = 0, gouttesactives; gouttesactives = goutteslocales[i]; i++) {
		gouttesactives.X += gouttesactives.vitesseX;
		gouttesactives.Y += gouttesactives.vitesseY;
		gouttesactives.radius -= 0.075;
		if (gouttesactives.alpha > 0) {
			gouttesactives.alpha -= 0.005;
		} else {
			gouttesactives.alpha = 0;
		}
		if (gouttesactives.radius < 0) {
			goutteslocales.splice(i--, 1);
		}
	}

	var i = controls.rain;
	while (i--) {
		Rain(Math.floor((Math.random()*width)), -15);
	}
}

function Screenshot() {
	window.open(canvas.toDataURL());
}

window.onload = function() {
	var gui = new dat.GUI();
	gui.add(controls, 'rain', 1, 10).name("Rain intensity").step(1);
	gui.add(controls, 'alpha', 0.1, 1).name("Alpha").step(0.1);
	gui.add(controls, 'color', 0, 360).name("Color").step(1).listen();
	gui.add(controls, 'auto').name("Automatic color");
	gui.add(controls, 'speed', 1, 10).name("Speed color").step(1);
	gui.add(controls, 'multi').name("Multicolor");
	gui.add(controls, 'saturation', 0, 100).name("Saturation").step(1);
	gui.add(controls, 'lightness', 0, 100).name("Lightness").step(1);
	gui.add(controls, 'opacity', 0.0, 1).name("Opacity").step(0.1);
	gui.add(controls, 'Object', ['Nothing','Circle','Umbrella', 'Cup']);
	gui.add(window, 'Screenshot');
	var Background = gui.addFolder('Background color');
	Background.add(controls, 'red', 0, 255).step(1);
	Background.add(controls, 'green', 0, 255).step(1);
	Background.add(controls, 'blue', 0, 255).step(1);
};

(function boucle() {
	requestAnimFrame(boucle);
	update();
	rendu(ctx);
})();