const USER_AGENT = navigator.userAgent.toLowerCase();

var SCREEN_WIDTH = window.innerWidth - 10, 
	SCREEN_HEIGHT = window.innerHeight - 10, 
	X_MOUSE = 0, 
	Y_MOUSE = 0, 
	PRESSURE = 3, 
	DRAG = 0, 
	painters = new Array();

window.onload = function () {
	// creo contenedor general
	contenedor = document.createElement("div");
	document.body.appendChild(contenedor);
	
	// creo canvas principal dentro del contenedor general
	canvas = document.createElement("canvas");
	canvas.width = SCREEN_WIDTH;
	canvas.height = SCREEN_HEIGHT;
	canvas.style.cursor = 'crosshair';
	contenedor.appendChild(canvas);
	canvas_context = canvas.getContext("2d");

	// defino pincel
	for (var i = 0; i < 30; i++) {
		painters.push({ dx: SCREEN_WIDTH * 0.5, dy: SCREEN_HEIGHT * 0.5, ax: 0, ay: 0, div: 0.1, ease: Math.random() * 0.2 + 0.6 });
	}
	
	// listeners
	function onMouseMove (event) {
		X_MOUSE = event.pageX;
		Y_MOUSE = event.pageY;
		//alert(X_MOUSE);
		canvas_context.lineWidth = 1;
		canvas_context.strokeStyle = "rgba(80, 80, 80, " + 0.05 * PRESSURE + ")";
		if (DRAG) {
			for (i = 0; i < painters.length; i++) {
				canvas_context.beginPath();
				canvas_context.moveTo(painters[i].dx, painters[i].dy);

				painters[i].dx -= painters[i].ax = (painters[i].ax + (painters[i].dx - X_MOUSE) * painters[i].div) * painters[i].ease;
				painters[i].dy -= painters[i].ay = (painters[i].ay + (painters[i].dy - Y_MOUSE) * painters[i].div) * painters[i].ease;
				canvas_context.lineTo(painters[i].dx, painters[i].dy);
				canvas_context.stroke();
			}
			/*
			canvas_context.lineTo(X_MOUSE, Y_MOUSE);
			canvas_context.lineWidth = 1;
			canvas_context.strokeStyle = "rgba(40, 40, 40, " + 0.05 * PRESSURE + ")";
			canvas_context.stroke();
			*/
		}
	}
	
	function onMouseDown () {
		//canvas_context.beginPath();
		//canvas_context.moveTo(X_MOUSE, Y_MOUSE);
		DRAG = 1;
		for (var i = 0; i < painters.length; i++) {
			painters[i].dx = X_MOUSE;
			painters[i].dy = Y_MOUSE;
		}
		//alert(X_MOUSE);
	}
	
	function onMouseUp () {
		DRAG = 0;
	}
	
	canvas.addEventListener('mousemove', onMouseMove, false);
	canvas.addEventListener('mousedown', onMouseDown, false);
	canvas.addEventListener('mouseup', onMouseUp, false);
	
	canvas.addEventListener('touchmove', onMouseMove, false);
	canvas.addEventListener('touchstart', onMouseDown, false);
	canvas.addEventListener('touchstop', onMouseUp, false);
}