/*
Original code by Paul Rouget http://blog.mozbox.org/
*/

const step = 4;
function dist(x1,y1,x2,y2){
	return Math.sqrt((x2-x1)*(x2-x1)  +  (y2-y1)*(y2-y1));
}
function transform(ctx,x1,y1,x2,y2,x3,y3){
	ctx.setTransform((x2-x1)/100,  (y2-y1)/100,
		   		     (x3-x1)/100,  (y3-y1)/100,
				      x1,          y1);
}
function paintFace(c,f,g,h,p,voltear){
	transform(c, f.x, f.y, f.x, f.y + h, g.x, g.y );
	
	if(voltear){
		c.scale(1,-1);
		c.translate(0,-100);
	}
	c.rotate(Math.PI / 2);
	c.translate(0,-100);
	
	try{
		c.drawImage(p,0,0,100,100);
	}catch(e){
		return;
	}
}


var sm = {
	width: null,
	height: null,
	ctx: null,
	video: null,
	andando: false,
	load: function(){
		
		var canvas = document.getElementById("canvas");
		sm.ctx = canvas.getContext("2d");
		
		sm.p1 = document.getElementById("p1");
		sm.p2 = document.getElementById("p2");
		sm.p3 = document.getElementById("p3");
		sm.p4 = document.getElementById("p4");
		sm.p5 = document.getElementById("p5");
		
		var video = sm.video = document.getElementById("video");
		
		//video.style.display = 'none';
		
		video.addEventListener("ended", function(){
			video.play(); 
	    }, true);
        video.addEventListener("play", function() {
			sm.andando = true;
			sm.bucle();
		}, false);
        video.addEventListener("pause", function() {
			sm.andando = false;
		}, false);
		video.addEventListener("canplay", function() {
			sm.width = canvas.width = video.videoWidth/2;
			sm.height = canvas.height = video.videoHeight/2;
		}, false);
		
	},
	bucle: function(){
		if(!sm.andando)return;
		setTimeout(sm.bucle,20);
		sm.find();
	},
	find: function(){
		if(!sm.width)return;
		var c = sm.ctx;
		c.save();
		c.clearRect(0, 0, this.width, this.height);
		
		try{
		c.drawImage(this.video,0,0,this.width,this.height);
		}catch(e){return;}
		var frame = c.getImageData(0, 0, this.width,this.height);
		var fd = frame.data;
		c.fillStyle = "rgb(255,255,0)";
		var r, g, b, x, y;
		var red   = {x:0,y:0,weight:0,name:'red'};
		var blue  = {x:0,y:0,weight:0,name:'blue'};
		var black = {x:0,y:0,weight:0,name:'black'};
		var green = {x:0,y:0,weight:0,name:'green'};
		for (var i=0,l = fd.length / step; i < l; i += 4) {
			r = fd[i * 4 + 0];
			g = fd[i * 4 + 1];
			b = fd[i * 4 + 2];
			x = i % this.width;
			y = Math.round(i / this.width);
			if(r<50 && g<50 && b<50){	//black
				//c.fillRect(x,y,1,1);
				var w = black.weight;
				black.x = (black.x*w + x)/(w+1);
				black.y = (black.y*w + y)/(w+1);
				black.weight++;
			}else if(r>140 && g<70 && b<70){	//red
				//c.fillRect(x,y,1,1);
				var w = red.weight;
				red.x = (red.x*w + x)/(w+1);
				red.y = (red.y*w + y)/(w+1);
				red.weight++;
			}else if(r<90 && g<90 && b>110){	//blue
				//c.fillRect(x,y,1,1);
				var w = blue.weight;
				blue.x = (blue.x*w + x)/(w+1);
				blue.y = (blue.y*w + y)/(w+1);
				blue.weight++;
			}else if(r<80 && g>120 && b<80){	//green
				//c.fillRect(x,y,1,1);
				var w = green.weight;
				green.x = (green.x*w + x)/(w+1);
				green.y = (green.y*w + y)/(w+1);
				green.weight++;
			}
			
		}
		var green = {x:(red.x+black.x-blue.x),y:(red.y+black.y-blue.y),name:'green'};
		if(red.weight < 5 || blue.weight<5 || black.weight < 5)
			return;
		
		var h = dist(red.x,red.y,blue.x,blue.y);
		
		var temp;
		if(red.y > blue.y)temp = red;
		else temp = blue;
		
		if(temp.y < green.y)temp = green;
		if(temp.y < black.y)temp = black;
		
		var faces =
		{
			blue:  [blue,red,black,sm.p1,sm.p2],
			red:   [red,green,blue,sm.p4,sm.p1],
			green: [green,black,red,sm.p3,sm.p4],
			black: [black,blue,green,sm.p2,sm.p3]
		}[temp.name];
		
		paintFace(c,faces[0],faces[1],-h,faces[3]);
		c.fillStyle = "rgb(0,255,0)";
		paintFace(c,faces[0],faces[2],-h,faces[4],true);
		c.fillStyle = "rgb(0,0,255)";
		transform(c,faces[0].x, faces[0].y-h, faces[1].x, faces[1].y-h, faces[2].x, faces[2].y-h);
		c.fillRect(0,0,100,100);
		c.drawImage(this.p5,0,0,100,100);
		
		c.restore();
		
	}
		
};