var ReReReRe = function() {
	$("#nojs").remove();
	var cnt = 0;
	var inuse = [];
	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 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 />");
	});

	//var res = [1920, 1080];

	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 img = new Image();
		img.src = randomSource();
		$("#latest").html($("<a />").text(img.src).attr("href", img.src));
		function remove() {
			delete img;
		}

		img.onload = function() {
			for (var x = 0; x < randomInt(10); x++) {
				var staging = $("<canvas />").attr("width", this.width).attr("height", this.height);
				var scontext = staging[0].getContext("2d");
				scontext.drawImage(img, 0, 0, this.width, this.height);
				if ($("#applymasks").prop("checked") && x > 0) { // apply a mask
					var inum = Math.floor(Math.random()*3) + 2;
					scontext.globalCompositeOperation = "destination-in"; // source-in ???
					scontext.beginPath();
					scontext.moveTo(randomInt(this.width), randomInt(this.height));
					for (var i = 0; i < inum; i++) {
						scontext.lineTo(randomInt(this.width), randomInt(this.height));
					}
					scontext.closePath();

					//scontext.strokeStyle = "#FF0000";
					//scontext.stroke();
					scontext.fillStyle = "#FFFFFF";
					scontext.fill();
				}

				if (cnt != 0) {
					context.globalCompositeOperation = randomGCO();	
				}
				// screen, luminosity, xor, color, saturation
				//context.globalAlpha = (Math.random()/2) + 0.5;

				var rotate = randomBoolean();
				if (rotate) { // apply rotation
					context.save();
					var degrees = Math.random()*30;
					if (randomBoolean()) degrees = -degrees;
					context.rotate(degrees*Math.PI / 180);
				}

				var pos = randomPosition(this.width, this.height);

				context.drawImage(staging[0], pos[0], pos[1], this.width, this.height);
			
				staging.remove();
				if (rotate) {
					context.restore();
				}
			}
			cnt ++;
			this.onload = null; // get one frame from mjpeg only
			// doesn't work, shit carries on loading. setTimeout(function() { img = null; }, 1000);
			setTimeout(remove, 1500);

		};
	};

	function step() {
		var x = new Source();
		setTimeout(step, randomInt(5000)+2000);
	}
	
	$.ajax({
		dataType: "json",
		url: "sources.json",
		success: function(response) {
			sources = response.data;
			step();
		}
	});

	function pmover() {
		$("#details").show();
		$("#pi").off("mouseover");
		$("#details").mouseleave(function(){
			$(this).hide();
			$(this).off("mouseleave");
			$("#pi").mouseover(pmover);
		});
	}

	$("#clear").click(function(){
		context.clearRect(0, 0, res[0], res[1]);
	});

	$("#pi").mouseover(pmover);

	$("#snap").click(function(){
		var data = canvas[0].toDataURL();
		$.ajax({
			type: "POST",
			url: "req/request.py",
			data: {
				image: data
			},
			success: function(response) {
				alert("ok? " + response.ok);
			}
		});
	});

};





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