var ReReReRe = function() {
	$("#nojs").remove();
	var res = [window.innerWidth, window.innerHeight];
	var canvas = $("<canvas />").attr("width", res[0]).attr("height", res[1]).css("position", "absolute").css("width", "100%").css("height", "100%").appendTo($("body"));
	var context = canvas[0].getContext("2d");
	var sources = [];
	var actives = [];
	var supportedGCO = (function getGCOModes() {
		var ctx = document.createElement('canvas').getContext('2d');
  		//var gCO = ["source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
  		var gCO = ["destination-atop", "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
		return gCO.filter(function(g) {
    		ctx.globalCompositeOperation = g;
    		return ctx.globalCompositeOperation === g;
  		});
	})();

	var enabledGCO = {};
	supportedGCO.forEach(function(val) {
		var item = $("<label />");
		var input = $("<input />", {id: "blend"+val}).attr("type", "checkbox").attr("checked", "checked");
		input.click(function(){
			enabledGCO[val] = $(this).prop("checked");
		});
		item.append(input);
		item.append(val);
		enabledGCO[val] = true;
		$("#blendtypes").append(item).append("<br />");
	});

	function randomBoolean() {
		return (Math.random() > 0.5);
	}

	function randomInt(max) {
		return Math.floor(Math.random()*max);
	}

	function randomPosition(wo, ho) {
		if (wo && ho) {
			xmax = res[0] - wo;
			ymax = res[1] - ho;
		} else {
			xmax = res[0];
			ymax = res[1];
		}
		return [Math.floor(xmax*Math.random()), Math.floor(ymax*Math.random())];
	}

	function randomSource() {
		return sources[Math.floor((sources.length - 1)*Math.random())]
	}

	function randomGCO() {
		var gcos = [];
		for (var k in enabledGCO) {
			if (enabledGCO[k]) gcos.push(k);
		}

		return gcos[Math.floor((gcos.length - 1)*Math.random())];
	}

	var Source = function() {
		var self = this;
		var src = randomSource();
		var staging = null;
		var scontext = null;
		var size = null;
		var blitpos = null;
		var gcotype = null;
		this.ready = false;
		var refreshing = false;

	
		function refresh() {
			refreshing = true;
			var img = new Image();
			img.src = src;
			img.onload = function() {
				if (!size) size = [this.width, this.height];
				if (!staging) staging = $("<canvas />").attr("width", size[0]).attr("height", size[1]);
				if (!scontext) scontext = staging[0].getContext("2d");
				scontext.clearRect(0, 0, size[0], size[1]);
				scontext.drawImage(img, 0, 0, size[0], size[1]);
				self.ready = true;
				this.onload = null;
				refreshing = false;
			}
			setTimeout(function(){
				delete img;
			}, 90);
		}

		this.blit = function() {
			if (!staging) return;
			if (!gcotype) gcotype = randomGCO(); //context.globalCompositeOperation = randomGCO();
			context.globalCompositeOperation = gcotype;
			//context.globalAlpha = (Math.random()/2) + 0.5;
			if (!blitpos) blitpos = randomPosition(size[0], size[1]);
			context.drawImage(staging[0], blitpos[0], blitpos[1], size[0], size[1]);

			self.ready = false;
			if (!refreshing) refresh();
		};

		refresh();
	};


	function step() {
		var anyready = false;
		actives.forEach(function(a){
			if (a.ready) {
				anyready = true;
			}
		});	
		if (anyready) {
			context.clearRect(0, 0, res[0], res[1]);
			actives.forEach(function(a){
				a.blit();
			});
		}
		setTimeout(step, 110);
	}

	function start() {
		for (var x = 0; x < randomInt(5)+2; x++) {
			actives.push(new Source());
		}
		step();
	}
	
	$.ajax({
		dataType: "json",
		url: "sources.json",
		success: function(response) {
			sources = response.data;
			start();
		}
	});

};





$(function(){
	window.rererere = new ReReReRe();
});