"use strict";
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");

var resources = {}, keys = [], progress = 0, meteors = [];

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

	var paths = {
		background: "assets/background.png",
		meteorBig: "assets/meteorBig.png",
		meteorBig2: "assets/meteorBig2.png",
		meteorMed: "assets/meteorMed.png",
		meteorMed2: "assets/meteorMed2.png",
		meteorSmall: "assets/meteorSmall.png",
		meteorTiny: "assets/meteorTiny.png"
	};

	for (var r in paths){
		resources[r] = new Image();
		resources[r].src = paths[r];
		resources[r].onload = loadProcess;	
	}
}

function loadProcess(e){
	progress++;
	context.fillStyle = "#121012";
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.fillStyle = "#007d6c";
	context.fillRect(0, 0, (progress / 7) * canvas.width, 15);

	if (progress == 7) loop();
}

function loop() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	//draw bg
	for (var i = 0; i < Math.floor(canvas.width / 256) + 1; i++){
		for (var j = 0; j < Math.floor(canvas.height / 256) + 1; j++){
			context.drawImage(resources["background"], i * 256, j * 256);
		}
	}

	if (Math.random() < 0.01){
		//spawns a random meteor - why random? random y-position, random speed, random appearal, random angle
		var m_resources = ["meteorMed2", "meteorMed", "meteorSmall", "meteorTiny"],
			lgt = meteors.length;

		meteors[lgt] = {
			x: -100,
			y: Math.map(Math.random(), 0, 1, 50, canvas.height - 50),
			res: m_resources[Math.floor(Math.random() * 4)],
			speed: Math.map(Math.random(), 0, 1, 2, 4),
			ang: Math.map(Math.random(), 0, 1, 45, 135)
		};

//		meteors.splice(meteors.length,0,[0, m_height, m_res, m_speed, m_ang]);
	}

	meteors.forEach(function(m, i){
		m.x += Math.sin(m.ang * (Math.PI / 180)) * m.speed;
		m.y += Math.cos(m.speed * (Math.PI / 180)) * m.speed;
		if (m.x > canvas.width + 10 || m.y > canvas.height + 10) meteors.splice(i, 1);			
		else context.drawImage(resources[m.res], m.x, m.y);
	});	

	window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);

function keyInput(e){
	keys[e.keyCode] = (e.type == "keydown") | false;
}

Math.map = function(x, in_min, in_max, out_min, out_max) {
	return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

init();

window.addEventListener("keydown", keyInput);
window.addEventListener("keyup", keyInput);

@@ -262,32 +262,13 @@
 s = 
-%7B%0A%09%09background: %22assets/
+%5B%0A%09%09%22
 back
@@ -277,36 +277,14 @@
 ound
-.png
 %22,%0A%09%09
-meteorBig: %22assets/
+%22
 mete
@@ -292,37 +292,14 @@
 rBig
-.png
 %22,%0A%09%09
-meteorBig2: %22assets/
+%22
 mete
@@ -308,36 +308,14 @@
 Big2
-.png
 %22,%0A%09%09
-meteorMed: %22assets/
+%22
 mete
@@ -323,37 +323,14 @@
 rMed
-.png
 %22,%0A%09%09
-meteorMed2: %22assets/
+%22
 mete
@@ -339,38 +339,14 @@
 Med2
-.png
 %22,%0A%09%09
-meteorSmall: %22assets/
+%22
 mete
@@ -356,37 +356,14 @@
 mall
-.png
 %22,%0A%09%09
-meteorTiny: %22assets/
+%22
 mete
@@ -372,16 +372,12 @@
 Tiny
-.png
 %22%0A%09
-%7D
+%5D
 ;%0A%0A%09
@@ -389,119 +389,167 @@
 var 
-r in paths)%7B%0A%09%09resources%5Br%5D = new Image();%0A%09%09resources%5Br%5D.src = paths%5Br%5D;%0A%09%09resources%5Br%5D.onload = loadProcess;%09
+i = 0, lgt = paths.length; i != lgt; i++)%7B%0A%09%09var r = new Image();%0A%09%09r.src = %22assets/%22 + paths%5Bi%5D + %22.png%22;%0A%09%09r.onload = loadProcess;%0A%09%09resources%5Bpaths%5Bi%5D%5D = r;
 %0A%09%7D%0A

Improve asset system