/*global $, localStorage, angular, alert, document, console, confirm, window */
/*jshint unused:false */

var $svg = $("svg");
var $points = $("#points");
var $delta = $("#delta");

var iFrame = 0;
var iDrawOnThisFrame = 3;
var p = [];
var d = [];
var t = [];
var c = 0;

function randomize() {
	p = [];
	d = [];
	var no = $points.val();
	var delta = $delta.val();
	for (var i = 0; i < no; i++) {
		var s = (i * 2);
		p[s] = Math.random() * window.innerWidth;
		p[s + 1] = Math.random() * window.innerHeight;
		d[s] = (Math.random() - Math.random()) * delta;
		d[s + 1] = (Math.random() - Math.random()) * delta;
		t[i] = (i === 0) ? " M" : " L";
	}
}

function doDraw() {
	iFrame++;
	if ((iFrame % iDrawOnThisFrame) == 0) {
		var sPath = "<path d=\"";
		for (var i = 0; i < t.length; i++) {
			var ty = t[i];
			var s = (i * 2);
			var x = p[s];
			var y = p[s + 1];
			var coor = x + "," + y;
		
			var res = move(x, d[s], 0, window.innerWidth);
			d[s] = res.delta;
			p[s] = res.value;

			res = move(y, d[s + 1], 0, window.innerHeight);
			d[s + 1] = res.delta;
			p[s + 1] = res.value;
       var cl = ((d[s]>=0) ? "plus" : "minus")+((d[s+1]>=0) ? "plus" : "minus");
	var circle = "<circle class=\""+cl+"\" cx=\"" + x + "\" cy=\"" + y + "\" r=\"10\" />";
			sPath += ty + coor;
			sPath = circle + sPath;
		}
		sPath += "\" />";
		$svg.html(sPath);
	}
	window.requestAnimationFrame(doDraw);
}

function move(value, delta, min, max) {
	var _value = value + delta;
	if (_value <= min) {
		delta = -delta;
		_value += delta;
	} else {
		if (_value > max) {
			delta = -delta;
			_value = max;
		}
	}
	return {
		value: _value,
		delta: delta
	};
}

window.requestAnimationFrame(doDraw);

randomize();
$("[type='range']").on("mousemove", function (e) {
	if (e.which === 1) {
		randomize();
	}
});