// Code layout taken from http://www.mozbox.org/pub/green/main.js

var processor = {
	doLoad: function() {
		this.video = document.getElementById("video");
		
		this.c1 = document.createElement("canvas");
		this.c1.width = "160"
		this.c1.height = "96"
		this.ctx1 = this.c1.getContext("2d");
		
		this.c2 = document.getElementById("c2");
		this.ctx2 = this.c2.getContext("2d");
		
		var self = this;
		this.video.addEventListener("play", function() {
			self.width = self.video.videoWidth / 2;
			self.height = self.video.videoHeight / 2;
			self.len = self.width * self.height;
			
			self.video.addEventListener('timeupdate', function(event) {
				self.computeFrame()
			}, true);
		}, false);
	},

	computeFrame: function() {
		var frame, data, i, offset, rgba, mod
		
		this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
		frame = this.ctx1.getImageData(0, 0, this.width, this.height);
		data = frame.data;
		ndata = []
		
		for (i = 0; i < this.len; i++) {
			ndata.push(0);
			ndata.push(0);
			ndata.push(0);
			ndata.push(255);
		}
		
		offset = Math.floor(Math.random()*10) + 5
		
		for (i = 0; i < this.len; i++) {
			rgba = data.getPixel(i);
			mod = i % this.width;
			
			ndata.setPixel(i, 1, rgba[1]);
			
			if (mod + offset < this.width)
				ndata.setPixel(i + offset, 0, rgba[0]);
			if (mod - offset > 0)
				ndata.setPixel(i - offset, 2, rgba[2]);
			
		}
		
		frame.data = ndata
		this.ctx2.putImageData(frame, 0, 0);
		return;
	}
};

Array.prototype.getPixel = function(number) {
	var real = number * 4;
	return this.slice(real, real + 4);
};

Array.prototype.setPixel = function(number, rgba, val) {
	var real = number * 4 + rgba;
	if (number < 0 || real > this.length)
		return;
	this[real] = val;
};