$(function() {
	var canvas = $("#c");
	var canvasHeight;
	var canvasWidth;
	var ctx;
	var dt = 0.1;
	
	var pointCollection;
	
	function init() {
		updateCanvasDimensions();
		
		var margen_x=0;
		
		var altura=-0;
		
		var altura2=altura+390;
		
		var margen_flecha=50;
		
		var punto_diametro=4;
		
	//L
		var g = [
		new Point(margen_x+21,altura, 0.0, punto_diametro, "#000000"), 
		new Point(margen_x+21, altura+40, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+21, altura+80, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+21, altura+120, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+21, altura+160, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+21, altura+200, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+21, altura+240, 0.0, punto_diametro, "#000000"),
		
	//L
		
		
	//U
		new Point(margen_x+101, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+101, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+101, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+101, altura+190, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+131, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+171, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+211, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+241, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+241, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+241, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+241, altura+190, 0.0, punto_diametro, "#000000"),
		
	//U
	
	
	//n
		new Point(margen_x+321, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+321, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+321, altura+190, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+321, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+351, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+391, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+421, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+451, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+451, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+451, altura+190, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+451, altura+240, 0.0, punto_diametro, "#000000"),
		
	//n
	
	
	//a
	
		new Point(margen_x+531, altura+190, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+581, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+621, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+661, altura+70, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+581, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+621, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+661, altura+150, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+581, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+621, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+661, altura+240, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+691, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+691, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+691, altura+190, 0.0, punto_diametro, "#000000"),
	
	
	
	//a
	
	
	//v
	
		new Point(margen_x+771, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+771, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+771, altura+150, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+801, altura+190, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+881, altura+190, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+841, altura+240, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+911, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+911, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+911, altura+150, 0.0, punto_diametro, "#000000"),
		
	
	
	//v
	
	
	//e
	
	
		new Point(margen_x+991, altura+110, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+991, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+991, altura+190, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+1021, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+1061, altura+70, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+1101, altura+70, 0.0, punto_diametro, "#000000"),
		
		
		new Point(margen_x+1021, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+1061, altura+150, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+1101, altura+150, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+1021, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+1061, altura+240, 0.0, punto_diametro, "#000000"),
		new Point(margen_x+1101, altura+240, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_x+1131, altura+110, 0.0, punto_diametro, "#000000"),
	
	
	//e
		
		
	//flecha
	/*
		
	
		new Point(margen_flecha+margen_x+451, altura2, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+491, altura2, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+531, altura2, 0.0, punto_diametro, "#000000"),
		
		
		new Point(margen_flecha+margen_x+451, altura2+40, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+451, altura2+80, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+451, altura2+120, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+451, altura2+160, 0.0, punto_diametro, "#000000"),
		
		
		new Point(margen_flecha+margen_x+531, altura2+40, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+531, altura2+80, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+531, altura2+120, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+531, altura2+160, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_flecha+margen_x+411, altura2+160, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+571, altura2+160, 0.0, punto_diametro, "#000000"),
		
		new Point(margen_flecha+margen_x+471, altura2+200, 0.0, punto_diametro, "#000000"),
		new Point(margen_flecha+margen_x+511, altura2+200, 0.0, punto_diametro, "#000000"),
	
	
		new Point(margen_flecha+margen_x+491, altura2+240, 0.0, punto_diametro, "#000000"),
	
	
	//flecha
		*/
		
		];
		
		gLength = g.length;
		for (var i = 0; i < gLength; i++) {
			g[i].curPos.x = (canvasWidth/2 - 180) + g[i].curPos.x;
			g[i].curPos.y = (canvasHeight/2 - 65) + g[i].curPos.y;
			
			g[i].originalPos.x = (canvasWidth/2 - 180) + g[i].originalPos.x;
			g[i].originalPos.y = (canvasHeight/2 - 65) + g[i].originalPos.y;
		};
		
		pointCollection = new PointCollection();
		pointCollection.points = g;
		
		initEventListeners();
		timeout();
	};
	
	function initEventListeners() {
		$(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove);
		
		canvas.get(0).ontouchmove = function(e) {
			e.preventDefault();
			onTouchMove(e);
		};
		
		canvas.get(0).ontouchstart = function(e) {
			e.preventDefault();
		};
	};
	
	function updateCanvasDimensions() {
		canvas.attr({height: $(window).height(), width: $(window).width()});
		canvasWidth = canvas.width();
		canvasHeight = canvas.height();

		draw();
	};
	
	function onMove(e) {
		if (pointCollection)
			pointCollection.mousePos.set(e.pageX, e.pageY);
	};
	
	function onTouchMove(e) {
		if (pointCollection)
			pointCollection.mousePos.set(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
	};
	
	function timeout() {
		draw();
		update();
		
		setTimeout(function() { timeout() }, 30);
	};
	
	function draw() {
		var tmpCanvas = canvas.get(0);

		if (tmpCanvas.getContext == null) {
			return; 
		};
		
		ctx = tmpCanvas.getContext('2d');
		ctx.clearRect(0, 0, canvasWidth, canvasHeight);
		
		if (pointCollection)
			pointCollection.draw();
	};
	
	function update() {		
		if (pointCollection)
			pointCollection.update();
	};
	
	function Vector(x, y, z) {
		this.x = x;
		this.y = y;
		this.z = z;
 
		this.addX = function(x) {
			this.x += x;
		};
		
		this.addY = function(y) {
			this.y += y;
		};
		
		this.addZ = function(z) {
			this.z += z;
		};
 
		this.set = function(x, y, z) {
			this.x = x; 
			this.y = y;
			this.z = z;
		};
	};
	
	function PointCollection() {
		this.mousePos = new Vector(0, 0);
		this.points = new Array();
		
		this.newPoint = function(x, y, z) {
			var point = new Point(x, y, z);
			this.points.push(point);
			return point;
		};
		
		this.update = function() {		
			var pointsLength = this.points.length;
			
			for (var i = 0; i < pointsLength; i++) {
				var point = this.points[i];
				
				if (point == null)
					continue;
				
				var dx = this.mousePos.x - point.curPos.x;
				var dy = this.mousePos.y - point.curPos.y;
				var dd = (dx * dx) + (dy * dy);
				var d = Math.sqrt(dd);
				
				if (d < 150) {
					point.targetPos.x = (this.mousePos.x < point.curPos.x) ? point.curPos.x - dx : point.curPos.x - dx;
					point.targetPos.y = (this.mousePos.y < point.curPos.y) ? point.curPos.y - dy : point.curPos.y - dy;
				} else {
					point.targetPos.x = point.originalPos.x;
					point.targetPos.y = point.originalPos.y;
				};
				
				point.update();
			};
		};
		
		this.draw = function() {
			var pointsLength = this.points.length;
			for (var i = 0; i < pointsLength; i++) {
				var point = this.points[i];
				
				if (point == null)
					continue;

				point.draw();
			};
		};
	};
	
	function Point(x, y, z, size, colour) {
		this.colour = colour;
		this.curPos = new Vector(x, y, z);
		this.friction = 0.8;
		this.originalPos = new Vector(x, y, z);
		this.radius = size;
		this.size = size;
		this.springStrength = 0.1;
		this.targetPos = new Vector(x, y, z);
		this.velocity = new Vector(0.0, 0.0, 0.0);
		
		this.update = function() {
			var dx = this.targetPos.x - this.curPos.x;
			var ax = dx * this.springStrength;
			this.velocity.x += ax;
			this.velocity.x *= this.friction;
			this.curPos.x += this.velocity.x;
			
			var dy = this.targetPos.y - this.curPos.y;
			var ay = dy * this.springStrength;
			this.velocity.y += ay;
			this.velocity.y *= this.friction;
			this.curPos.y += this.velocity.y;
			
			var dox = this.originalPos.x - this.curPos.x;
			var doy = this.originalPos.y - this.curPos.y;
			var dd = (dox * dox) + (doy * doy);
			var d = Math.sqrt(dd);
			
			this.targetPos.z = d/100 + 1;
			var dz = this.targetPos.z - this.curPos.z;
			var az = dz * this.springStrength;
			this.velocity.z += az;
			this.velocity.z *= this.friction;
			this.curPos.z += this.velocity.z;
			
			this.radius = this.size*this.curPos.z;
			if (this.radius < 1) this.radius = 1;
		};
		
		this.draw = function() {
			ctx.fillStyle = this.colour;
			ctx.beginPath();
			ctx.arc(this.curPos.x, this.curPos.y, this.radius, 0, Math.PI*2, true);
			ctx.fill();
		};
	};
	
	init();
});