// HTML5 video/canvas videospeler with Ambilight
// © Veniogames 2010
// see updateVideoSpeler for the interesting details.

var videospelerinterval = null;
var videoscherm = null;
var videospelerjq;
var videospeler;
var divtijd;

var videocanvas = null;
var videocanvasjq;
var flashvideo = false;
var kleinScherm = false;
var geenAmbilight = false;

var lijncanvas;
var lijncanvasjq;

var ambi1;
var ambi2;
var ambi3;

var verwijderTitel = true;
var videohd = false;
var slepen = false;

var videodata = {};
var laadvideometeen = false;

var laatstetijd = 0;
var tetraag = 0;
var datum = new Date();

var glWerkt = false;
var videopad = "";
var videoformaten = [];

function maakVideoSpeler(pad, formaten, hd, klaar)
{
	videopad = pad;
	videoformaten = formaten;
	if (kleinScherm)
	{
		return maakVideoSpelerAlt(pad, formaten);
	}
	else
	{
		vid = document.createElement("video");
		if (vid.canPlayType && !flashvideo)
		{
			var html5video = false;
			for (var y in formaten)
			{
				var x = formaten[y];
				var type = "";
				if (x == "ogv") type = 'video/ogg; codecs="theora, vorbis"';
				else if (x == "klein.mp4") type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
				else if (x == "webm") type = 'video/webm; codecs="vp8, vorbis"';
				else if (x == "mp4") type = 'video/mp4; codecs="avc1.4D40, mp4a.40.2"'; //todo, goede codec
				
				if (vid.canPlayType(type) == "probably")
					html5video = true;
			}
			if (html5video)
				return maakVideoSpelerAmbi(pad, formaten, hd, klaar);
			else
				return maakVideoSpelerFlash(pad, formaten);
		}
		else
			return maakVideoSpelerFlash(pad, formaten);
	}
}

function maakVideoSpelerAmbi(pad, formaten, hd, klaar)
{
	if (!videoscherm == null)
	{
		clearInterval(videospelerinterval);
		videospelerinterval = null;
		videoscherm.parent().unbind();
		videoscherm.remove();
	}
	
	var divvideoscherm = document.createElement("div");
	divvideoscherm.id = "video-scherm";
	var divvideokader = document.createElement("div");
	divvideokader.id = "video-kader";
	videospeler = document.createElement("video");
	videospeler.id = "videospeler";
	videocanvas = document.createElement("canvas");
	videocanvas.id = "video-canvas";
	var divvideobesturing = document.createElement("div");
	divvideobesturing.id = "video-besturing";
	var divvideobesturingplay = document.createElement("div");
	divvideobesturingplay.id = "video-besturing-play";
	var divvideogeduld = document.createElement("div");
	divvideogeduld.id = "video-geduld"; divvideogeduld.innerHTML = "<span>laden, even geduld a.u.b.</span>";
	var divplay = document.createElement("div");
	divplay.id = "play";
	var divpause = document.createElement("div");
	divpause.id = "pause";
	divtijd = document.createElement("div");
	divtijd.id = "tijd";
	var divhd = document.createElement("div");
	divhd.id = "hd"; divhd.className = "uit";
	ambi1 = document.createElement("canvas");
	ambi1.id = "video-ambilight1"; ambi1.width = 48; ambi1.height = 40;
	ambi2 = document.createElement("canvas");
	ambi2.id = "video-ambilight2"; ambi2.width = 6; ambi2.height = 5;
	ambi3 = document.createElement("canvas");
	ambi3.id = "video-ambilight3"; ambi3.width = 16; ambi3.height = 9;
	lijncanvas = document.createElement("canvas");
	lijncanvas.id = "lijn";
	
	divvideoscherm.appendChild(divvideokader);
	divvideoscherm.appendChild(videocanvas);
	divvideoscherm.appendChild(ambi1);
	divvideoscherm.appendChild(ambi2);
	divvideoscherm.appendChild(ambi3);
	divvideokader.appendChild(videospeler);
	divvideokader.appendChild(divvideobesturing);
	divvideokader.appendChild(divvideobesturingplay);
	divvideokader.appendChild(divvideogeduld);
	divvideobesturing.appendChild(divplay);
	divvideobesturing.appendChild(divpause);
	divvideobesturing.appendChild(divtijd);
	if (hd)
		divvideobesturing.appendChild(divhd);
	divvideobesturing.appendChild(lijncanvas);

	//videospeler.controls = true;
	videospeler.preload = "auto";
	
	videoSpelerBron(pad, formaten, videohd && hd, klaar);
	
	videoscherm = $(divvideoscherm);
	videospelerjq = $(videospeler);
	videocanvasjq = $(videocanvas);
	lijncanvasjq = $(lijncanvas);
	
	laatstetijd = 0;
	tetraag = 0;
	
	$('.video-geladen').removeClass("video-geladen").addClass("video-laden");
	videospelerjq.addClass("canvasvideo");
	
	$(divvideobesturingplay).click(function() { videospeler.play(); $(this).hide(); $(divvideobesturing).show(); }).hide();
	$(divplay).click(function() { videospeler.play(); });
	$(divpause).click(function() { videospeler.pause(); });
	$(divhd).click(function() { videoSpelerBron(pad, formaten, !videohd); });
	
	$(divvideokader).addClass("canvasvideo").hover(function() { if ($(divvideobesturingplay).css("display") == 'none')
											if ($(divvideogeduld).css("display") == 'none')
												$(divvideobesturing).fadeIn(200); }, function() { $(divvideobesturing).fadeOut(200); });
	
	videospeler.addEventListener('play', function() {$(divplay).hide(); $(divpause).show(); }, false);
	videospeler.addEventListener('pause', function() {$(divpause).hide(); $(divplay).show(); }, false);
	
	videospeler.addEventListener('progress', updateVideoLijn, false);
	
	lijncanvasjq.mousedown(function(ev) { slepen = true; sleep(ev); });
	lijncanvasjq.mouseup(function() { slepen = false; });
	lijncanvasjq.mouseout(function() { slepen = false; });
	lijncanvasjq.mousemove(sleep);
	
	return videoscherm;
}

function maakVideoSpelerAlt(pad, formaten)
{
	if (!videoscherm == null)
	{
		videoscherm.parent().unbind();
		videoscherm.remove();
	}
	
	var divvideoscherm = document.createElement("div");
	divvideoscherm.id = "video-scherm";
	var divvideokader = document.createElement("div");
	divvideokader.id = "video-kader";
	videospeler = document.createElement("video");
	videospeler.id = "videospeler";
	
	divvideoscherm.appendChild(divvideokader);
	divvideokader.appendChild(videospeler);

	//videospeler.controls = true;
	videospeler.preload = "auto";
	videospeler.controls = true;
	
	videoscherm = $(divvideoscherm);
	videospelerjq = $(videospeler);
	
	$('.video-geladen').removeClass("video-geladen").addClass("video-laden");
	
	videoSpelerBron(pad, formaten, true);
	
	return videoscherm;
}

function maakVideoSpelerFlash(pad, formaten)
{
	if (!videoscherm == null)
	{
		videoscherm.parent().unbind();
		videoscherm.remove();
	}
	
	var divvideoscherm = document.createElement("div");
	divvideoscherm.id = "video-scherm";
	var divvideokader = document.createElement("div");
	divvideokader.id = "video-kader";
	videospeler = document.createElement("object");
	videospeler.id = "videospeler";
	videospeler.type = 'application/x-shockwave-flash';
	videospeler.data = '/videospeler.swf';
	param = document.createElement("param");
	param.name = "movie"; param.value = "/videospeler.swf";
	videospeler.appendChild(param);
	
	divvideoscherm.appendChild(divvideokader);
	divvideokader.appendChild(videospeler);
	
	videoscherm = $(divvideoscherm);
	videospelerjq = $(videospeler);
	
	$('.video-geladen').removeClass("video-geladen").addClass("video-laden");
	
	flashvideo = true;
	
	videoSpelerBron(pad, formaten, true);
	
	return videoscherm;
}

function maakGL(vcanvas)
{
	return startGL(vcanvas);
}

function sleep(ev) {
	if (slepen) {
		
		function zoekX(el) {
			var left = 0;
			if (el.offsetParent) {
				do {
					left += el.offsetLeft;
				}
				while (el = el.offsetParent);
				return left;
			}
		}
		
		var x = ev.pageX - zoekX(lijncanvas);
		videospeler.currentTime = ((x-3) / (lijncanvas.width-6)) * videospeler.duration;
	}
}

function videoSpelerBron(pad, bron, hd, klaar)
{
	var html5video = false;
	tetraag = 0;
	
	if (!flashvideo)
	{
		videospeler.removeEventListener('loadedmetadata', metaVideoSpeler, false);
		//videospeler.removeEventListener('ended', klaar, false);
		
		if ( videospeler.hasChildNodes() )
		{
			while ( videospeler.childNodes.length >= 1 )
			{
				videospeler.removeChild( videospeler.firstChild );     
			} 
		}
	
		{
			for (var y in bron)
			{
				var x = bron[y];
				var type = "";
				if (x == "ogv") type = 'video/ogg; codecs="theora, vorbis"';
				else if (x == "klein.mp4") type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
				else if (x == "mp4") type = 'video/mp4; codecs="avc1.4D40, mp4a.40.2"'; //todo, goede codec
				else if (x == "webm") type = 'video/webm; codecs="vp8, vorbis"';
				
				if (videospeler.canPlayType(type) == "probably")
				{
					var src = document.createElement("source");
					src.type = type;
					src.src = pad + (hd && !kleinScherm ? ".hd." : ".") + x;
					videospeler.appendChild(src);
					html5video = true;
				}
			}
		}
		
		if (!html5video)
		{
			clearInterval(videospelerinterval);
			verwijderVideoSpeler();
			maakVideoSpelerFlash(pad, bron);
		}
		
		videospeler.poster = pad + "-poster.png";
		
		if (videocanvas != null)
		{
			tetraag = 0;
			videospeler.addEventListener('loadedmetadata', metaVideoSpeler, false);
			videospeler.addEventListener('ended', klaar, false);
			//videospeler.addEventListener('canplaythrough', geladenVideoSpeler, true); //TODO
			videospeler.addEventListener('canplay', geladenVideoSpeler, true);
			
			videohd = hd;
			if (hd)
				$("#hd").removeClass("uit").addClass("aan");
			else
				$("#hd").removeClass("aan").addClass("uit");
				
			$("#video-geduld").show(); $("#video-besturing").hide();
		}
		else
		{
			videoscherm.css("opacity", "1.0");
			videoscherm.css("display", "block");
			videoscherm.css("width", "100%");
			videospeler.width = 569; videospeler.height = 320;
			videospelerjq.css({"width": "569px", "height":  "320px"});
			$(".video-laden").removeClass("video-laden").addClass("video-geladen");
		}
		if (html5video)
			videospeler.load();
	}
	else
	{
		videoscherm.css("opacity", "1.0");
		videoscherm.css("display", "block");
		videoscherm.css("width", "100%");
		videospeler.width = "853px"; videospeler.height = "480px";
		videospelerjq.css({"width": "853px", "height":  "480px"});
		param = document.createElement("param");
		param.name = "FlashVars";
		param.value = "video=" + pad + ".mp4" + "&poster=" + pad + "-poster.png";
		videospeler.appendChild(param);
		param = document.createElement("param");
		param.name = "bgcolor";
		param.value = "#000000";
		videospeler.appendChild(param);
		$(".video-laden").removeClass("video-laden").addClass("video-geladen");
	}
}

function verwijderVideoSpeler()
{
	tetraag = 0;
	$('.video-laden').removeClass("video-laden").addClass("video-geladen");
	var jq = $(this);
	if (videoscherm != null)
	{
		if (videocanvas != null)
		{
			clearInterval(videospelerinterval);
			videospelerinterval = null;
			if (videospeler)
				if (videospeler.pause)
					videospeler.pause();
			updateVideoSpeler();
		}
		if (verwijderTitel) { veranderVideoTitel(); } verwijderTitel = true;
		videoscherm.fadeTo(750, 0.0).slideUp(500,function()
		{
			$(this).remove();
			videoscherm = null;
			jq.dequeue();
		});
	} else jq.dequeue();
}

function geladenVideoSpeler()
{
	if ($("#video-geduld").css("display") != 'none')
	{
		setTimeout(function() {
			$("#video-geduld").hide();
			$("#pause").hide(); $("#play").show(); $("#video-besturing-play").show();
		}, 1000); //TODO
	}
}

function metaVideoSpeler()
{
	if (videoscherm != null && videocanvas != null)
	{
		var w = videospeler.videoWidth;
		var h = videospeler.videoHeight;
		
		var maxw = videoscherm.parent().width();
		var extra = 250; if (!videohd) extra = 400;
		if (w + extra > maxw)
		{
			var r = w/h;
			w = maxw - extra;
			h = w / r;
		}
		
		videoscherm.css("width", w + 200 +"px");
		videoscherm.css("height", h + 200 +"px");
		videospelerjq.css("width", w +"px");
		videospelerjq.css("height", h +"px");
		
		if (videocanvas != null)
		{
			videocanvas.width = w + 200;
			videocanvas.height = h + 200;
			
			lijncanvas.width = w - 100;
			lijncanvas.height = 30;
			
			lijncanvasjq.css("width", lijncanvas.width +"px");
			lijncanvasjq.css("height", lijncanvas.height +"px");
			
			glWerkt = maakGL(videocanvas);
			
			if (glWerkt)
			{
				updateVideoSpelerGL();
			}
			else
			{
				updateVideoSpeler();
			}
			updateVideoLijn();
				
			if (videospelerinterval == null)
			{
				videoscherm.css("opacity", "0.0");
				videoscherm.css("display", "block");
				videoscherm.slideDown(500, function() {
					//$(this).get(0).scrollIntoView();
					$(this).css("opacity", 0);
					$(this).fadeTo(1000, 1.0);
				});
				
				
				videospelerinterval = setInterval(glWerkt ? updateVideoSpelerGL : updateVideoSpeler, 60);
				laatstetijd = datum.getTime();
				
				$('.video-laden').removeClass("video-laden").addClass("video-geladen");
			}
		}
	}
};

//HTML5 canvas/video videospeler met Ambilight
//Door Veniogames (http://veniogames.com/webdesign)
//Ik inspireer graag mensen, maar ik hou niet van mensen die mijn werk kopiëren.
//Een verwijzing naar mij zou leuk zijn.

//HTML5 canvas/video videoplayer with Ambilight
//By Veniogames (http://veniogames.com/webdesign)
//I like to inspire people, but I do not like people who copy my work.
//A reference to me would be appreciated.

function updateVideoSpeler(onzin, onzin2, onzin3, maakZwart)
{
	updateVideoLijn();
	
	if (geenAmbilight) return;
	if (tetraag > 10 && !maakZwart) { updateVideoSpeler(0,0,0,true); geenAmbilight = true;  } //maak de ambilight zwart
	
	datum = new Date();
	var dt = datum.getTime() - laatstetijd;
	if (dt > 110)
		tetraag += 1;
	else
		tetraag -= 0.2;
		
	if (tetraag < 0) tetraag = 0;
	
	laatstetijd = datum.getTime();
	
	var videoctx = videocanvas.getContext("2d");
	var ambi1ctx = ambi1.getContext("2d");
	var ambi2ctx = ambi2.getContext("2d");
	var ambi3ctx = ambi3.getContext("2d");
	
	var vw = videocanvas.width; var vh = videocanvas.height;
	
	//zelf mipmaps maken omdat browsers vaak geen bilineaire filtering gebruiken, maar nearest neighbour.
	//(FF doet het wel goed, maar zo werkt het altijd)
	function mip (imgdata)
	{
		var imgdatanew = ambi1ctx.getImageData(0,0,imgdata.width/2, imgdata.height/2);
		for (var i = 0; i < imgdatanew.width; i++)
		{
			for (var j = 0; j < imgdatanew.height; j++)
			{
				for (var k = 0; k < 3; k++)
				{
					imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + k]  = (
						imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k] / 4 +
						imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k] / 4 +
						imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k] / 4 +
						imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k] / 4 
					);
				}
				imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + 3] = 255;
			}
		}
		return imgdatanew;
	}
	
	//maakt mipmaps van alleen de pixels in de rand
	function mipRand (imgdata)
	{
		var imgdatanew = ambi1ctx.getImageData(0,0,imgdata.width/2, imgdata.height/2);
		for (var i = 0; i < imgdatanew.width; i++)
		{
			for (var j = 0; j < imgdatanew.height; j++)
			{
				var lb = (i == 0 || j == 0);
				var rb = (i == imgdatanew.width-1 || j == 0);
				var lo = (i == 0 || j == imgdatanew.height-1);
				var ro = (i == imgdatanew.width-1 || j == imgdatanew.height-1);
				if (!(lb || rb || lo || ro)) continue;
				for (var k = 0; k < 3; k++)
				{
					var n = 0;
					var r = 0;
					if (lb)
					{ r += imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k]; n += 1 }
					if (lo)
					{ r += imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k]; n += 1 }
					if (rb)
					{ r += imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k]; n += 1 }
					if (ro)
					{ r += imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k]; n += 1 }
					imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + k] = r / n;
				}
				imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + 3] = 255;
			}
		}
		return imgdatanew;
	}
	
	function vervaag(imgdata, factor)
	{
		var imgdatanew = ambi1ctx.getImageData(0,0,imgdata.width, imgdata.height);
		for (var i = 0; i < imgdata.width; i++)
		{
			for (var j = 0; j < imgdata.height; j++)
			{
				var l = (i > 0 && (j == 0 || j == imgdata.height -1));
				var r = (i < (imgdata.width -1) && (j == 0 || j == imgdata.height -1));
				var b = ((i == 0 || i == imgdata.width -1) && j > 0);
				var o = ((i == 0 || i == imgdata.width -1) && j < (imgdata.height -1));
				for (var k = 0; k < 3; k++)
				{
					var n = 1;
					var rs = imgdata.data[ j * imgdata.width * 4 + i * 4 + k ];
					if (l) { rs += imgdata.data[ j * imgdata.width * 4 + (i-1) * 4 + k ]*factor; n += factor;}
					if (r) { rs += imgdata.data[ j * imgdata.width * 4 + (i+1) * 4 + k ]*factor; n += factor;}
					if (o) { rs += imgdata.data[ (j+1) * imgdata.width * 4 + i * 4 + k ]*factor; n += factor;}
					if (b) { rs += imgdata.data[ (j-1) * imgdata.width * 4 + i * 4 + k ]*factor; n += factor;}
					
					imgdatanew.data[ j * imgdata.width * 4 + i * 4 + k ] = rs / n;
				}
			}
		}
		return imgdatanew;
	}
	
	function saturatie(r, g, b)
	{
		var max = Math.max(r, g, b);
		var min = Math.min(r, g, b);
		
		if (max == 0) return 0.0;
		
		return (max - min) / 255;
	}
	
	var ambidata = null;
	
	try {
	if (ambi1ctx && ambi2ctx && ambi3ctx)
	{
		ambi1ctx.globalAlpha = 0.3;
		ambi1ctx.drawImage(videospeler,0,0, ambi1.width, ambi1.height);
		ambidata = vervaag(mipRand(mip(mip(ambi1ctx.getImageData(0,0,ambi1.width, ambi1.height)))),0.75).data;
	}
	} catch (e)
	{
		//Security exception in IE hier :S
		return;
	}
	
	videoctx.clearRect(0,0,vw,vh);
	
	var aw = ambi2.width; var ah = ambi2.height;
	
	var data = new Array(2 * aw + 2 * ah - 4); var n = 0; var drempel = 0.05; var drempel2 = 0.2;
	
	for (var i = 0; i < aw; i++)
	{
		for (var j = 0; j < ah; j++)
		{
			if (i > 0 && i < aw-1 && j > 0 && j < ah-1) continue;
			
			var r = ambidata[(j*aw + i)*4]/255;
			var g = ambidata[(j*aw + i)*4+1]/255;
			var b = ambidata[(j*aw + i)*4+2]/255;
			var a = 1.0;
			var w = 0; var h = 0; var x = 0; var y = 0;
			if (i > 0 && i < aw-1) { w = (vw - 200)/(aw-2); x = 100 + w*(i-1); } else { w = 100; x = Math.min(i,1)*(vw-100); }
			if (j > 0 && j < ah-1) { h = (vh - 200)/(ah-2); y = 100 + h*(j-1); } else { h = 100; y = Math.min(j,1)*(vh-100); }
			
			var sterkte = (r*1.5 + g*1.5 + b)/4;
			var r2, g2, b2;
			r2 = r/(sterkte*0.5+0.5); g2 = g/(sterkte*0.5+0.5); b2 = b/(sterkte*0.5+0.5);
			r = (r + Math.min(1,r2)) * 127; g = (g + Math.min(1,g2)) * 127; b = (b + Math.min(1,b2)) * 127;
			
			a = sterkte;
			a = (a / (a + drempel2)) / (1 / (drempel2 + 1));
			a = (a + Math.max(Math.min(saturatie(r,g,b)*1.4 - 0.1,1.0),0.0)*3)/4;
			a = Math.max(0, a - drempel)/(1-drempel);
			
			data[n*4] = r; data[n*4+1] = g; data[n*4+2] = b; data[n*4+3] = a;
			n += 1;
		}
	}
	
	function kleur1(rr, gg, bb, aa)
	{
		if (maakZwart) return "rgba(0,0,0,0)";
		return "rgba(" + Math.round(Math.min(rr*0.90+26,255)) + ", " + Math.round(Math.min(gg*0.90+26,255)) + ", " + Math.round(Math.min(bb*0.90+26,255)) + ", " + aa + ")";
	}
	
	function kleur2(rr, gg, bb)
	{
		if (maakZwart) return "rgba(0,0,0,0)";
		return "rgba(" + Math.round(Math.max(rr*1.1-26,0)) + ", " + Math.round(Math.max(gg*1.1-26,19)) + ", " + Math.round(Math.max(bb*1.1-26,51)) + ", 0.0)";
	}
	
	function kleur3(rr, gg, bb)
	{
		if (maakZwart) return "rgba(0,0,0,1.0)";
		return "rgba(" + Math.round(rr) + ", " + Math.round(gg) + ", " + Math.round(bb) + ", 1.0)";
	}
	
	function index(xx, yy)
	{
		if (xx == 0) return yy*4;
		if (xx == aw-1) return ((2 * ah + 2 * aw - 4) - (ah - yy)) * 4;
		if (yy == 0) return ah * 4 + (xx - 1) * 8;
		return ah * 4 + (xx - 1) * 8 + 4;
	}
	
	function interpoleer(aa, bb, cc)
	{
		return aa * (1-cc) + bb*cc;
	}
	
	function interpoleerKleur(xx,yy)
	{
		var ind1; var ind2; var f;
		if (yy == 0 || yy == ah-1)
		{
			var xmin = Math.floor(xx); var xmax = Math.ceil(xx);
			var ind1 = index(xmin, yy); var ind2 = index(xmax, yy);
			var f = xx - xmin;
		} else {
			var ymin = Math.floor(yy); var ymax = Math.ceil(yy);
			var ind1 = index(xx, ymin); var ind2 = index(xx, ymax);
			var f = yy - ymin;
		}
		var r1 = data[ind1]; var g1 = data[ind1 + 1]; var b1 = data[ind1 + 2]; var a1 = data[ind1 + 3];
		var r2 = data[ind2]; var g2 = data[ind2 + 1]; var b2 = data[ind2 + 2]; var a2 = data[ind2 + 3];
		
		return new Array(interpoleer(r1, r2, f), interpoleer(g1, g2, f), interpoleer(b1, b2, f), interpoleer(a1, a2, f));
	}
	
	var gradient;
	
	function stops(grd, rrr, ggg, bbb, aaa)
	{
		grd.addColorStop(0,kleur1(rrr, ggg, bbb, aaa));
		grd.addColorStop(1,kleur2(rrr, ggg, bbb));
	}
	
	//teken hoeken van amiblight
	gradient = videoctx.createRadialGradient(100, 100, 20, 100, 100, 100);
	stops(gradient, data[0], data[1], data[2], data[3]);
	videoctx.fillStyle = gradient;
	videoctx.fillRect(0, 0, 100, 100);
	gradient = videoctx.createRadialGradient(vw-100, 100, 20, vw-100, 100, 100);
	stops(gradient, data[index(aw-1,0)], data[index(aw-1,0)+1], data[index(aw-1,0)+2], data[index(aw-1,0)+3]);
	videoctx.fillStyle = gradient;
	videoctx.fillRect(vw-100, 0, 100, 100);
	gradient = videoctx.createRadialGradient(100, vh-100, 20, 100, vh-100, 100);
	stops(gradient, data[index(0,ah-1)], data[index(0,ah-1)+1], data[index(0,ah-1)+2], data[index(0,ah-1)+3]);  
	videoctx.fillStyle = gradient;
	videoctx.fillRect(0, vh-100, 100, 100);
	gradient = videoctx.createRadialGradient(vw-100, vh-100, 20, vw-100, vh-100, 100);
	stops(gradient, data[index(aw-1,ah-1)], data[index(aw-1,ah-1)+1], data[index(aw-1,ah-1)+2], data[index(aw-1,ah-1)+3]);  
	videoctx.fillStyle = gradient;
	videoctx.fillRect(vw-100, vh-100, 100, 100);
	
	var d = Math.max(Math.round(vw/200) - 2, 0) + 3;
	
	//teken randen van ambilight, eerst x en dan y
	for (i = 100; i < vw-100; i += d)
	{
		gradient = videoctx.createLinearGradient(0, 80, 0, 0);
		var kleur = interpoleerKleur( (i - 100) / (vw - 200) * (aw-1), 0);
		stops(gradient, kleur[0], kleur[1], kleur[2], kleur[3]);  
		videoctx.fillStyle = gradient;
		videoctx.fillRect(i, 0, Math.min(d, vw-100-i), 80);
		
		gradient = videoctx.createLinearGradient(0, vh-80, 0, vh);
		kleur = interpoleerKleur( (i - 100) / (vw - 200) * (aw-1), ah-1);
		stops(gradient, kleur[0], kleur[1], kleur[2], kleur[3]);  
		videoctx.fillStyle = gradient;
		videoctx.fillRect(i, vh-80, Math.min(d, vw-100-i), 80);
	}
	
	for (i = 100; i < vh-100; i += d)
	{
		gradient = videoctx.createLinearGradient(80, 0, 0, 0);
		var kleur = interpoleerKleur( 0, (i - 100) / (vh - 200) * (ah-1));
		stops(gradient, kleur[0], kleur[1], kleur[2], kleur[3]);  
		videoctx.fillStyle = gradient;
		videoctx.fillRect(0, i, 80, Math.min(d, vh-100-i));
		
		gradient = videoctx.createLinearGradient(vw - 80, 0, vw, 0);
		kleur = interpoleerKleur( aw-1, (i - 100) / (vh - 200) * (ah-1));
		stops(gradient, kleur[0], kleur[1], kleur[2], kleur[3]);  
		videoctx.fillStyle = gradient;
		videoctx.fillRect(vw-80, i, 80, Math.min(d, vh-100-i));
	}
	
	//teken kaderhoeken
	videoctx.fillStyle = kleur3(data[0], data[1], data[2]);
	videoctx.beginPath(); videoctx.moveTo(100,100); videoctx.arc(100,100,20, Math.PI, Math.PI*1.5, false); videoctx.closePath(); videoctx.fill();
	videoctx.fillStyle = kleur3(data[index(aw-1,0)], data[index(aw-1,0)+1], data[index(aw-1,0)+2]);
	videoctx.beginPath(); videoctx.moveTo(vw-100,100); videoctx.arc(vw-100,100,20, Math.PI*1.5, Math.PI*2, false); videoctx.closePath(); videoctx.fill();
	videoctx.fillStyle = kleur3(data[index(0,ah-1)], data[index(0,ah-1)+1], data[index(0,ah-1)+2]);
	videoctx.beginPath(); videoctx.moveTo(100,vh-100); videoctx.arc(100,vh-100,20, Math.PI*0.5, Math.PI, false); videoctx.closePath(); videoctx.fill();
	videoctx.fillStyle = kleur3(data[index(aw-1,ah-1)], data[index(aw-1,ah-1)+1], data[index(aw-1,ah-1)+2]);
	videoctx.beginPath(); videoctx.moveTo(vw-100,vh-100); videoctx.arc(vw-100,vh-100,20, 0, Math.PI*0.5, false); videoctx.closePath(); videoctx.fill();
	
	//teken kader
	for (i = 0; i < aw - 1; i++)
	{
		var x1 = Math.round(i * (vw-200) / (aw-1) + 100);
		var x2 = Math.round((i+1) * (vw-200) / (aw-1) + 100);
		
		gradient = videoctx.createLinearGradient(x1, 0, x2, 0);
		gradient.addColorStop(0,kleur3(data[index(i,0)], data[index(i,0)+1], data[index(i,0)+2]));  
		gradient.addColorStop(1,kleur3(data[index(i+1,0)], data[index(i+1,0)+1], data[index(i+1,0)+2]));
		videoctx.fillStyle = gradient;
		videoctx.fillRect(x1, 80, x2 - x1, 20);
		
		gradient = videoctx.createLinearGradient(x1, 0, x2, 0);		
		gradient.addColorStop(0,kleur3(data[index(i,(ah-1))], data[index(i,(ah-1))+1], data[index(i,(ah-1))+2]));  
		gradient.addColorStop(1,kleur3(data[index(i+1,(ah-1))], data[index(i+1,(ah-1))+1], data[index(i+1,(ah-1))+2]));
		videoctx.fillStyle = gradient;
		videoctx.fillRect(x1, vh-100, x2 - x1, 20);
	}
	
	for (i = 0; i < (ah-1); i++)
	{
		var y1 = Math.round(i * (vh-200) / (ah-1) + 100);
		var y2 = Math.round((i+1) * (vh-200) / (ah-1) + 100);
		
		gradient = videoctx.createLinearGradient(0,y1,0,y2);
		gradient.addColorStop(0,kleur3(data[index(0,i)], data[index(0,i)+1], data[index(0,i)+2]));  
		gradient.addColorStop(1,kleur3(data[index(0,i+1)], data[index(0,i+1)+1], data[index(0,i+1)+2]));
		videoctx.fillStyle = gradient;
		videoctx.fillRect(80, y1, 20, y2-y1);
		
		gradient = videoctx.createLinearGradient(0,y1,0,y2);	
		gradient.addColorStop(0,kleur3(data[index(aw-1,i)], data[index(aw-1,i)+1], data[index(aw-1,i)+2]));  
		gradient.addColorStop(1,kleur3(data[index(aw-1,i+1)], data[index(aw-1,i+1)+1], data[index(aw-1,i+1)+2]));
		videoctx.fillStyle = gradient;
		videoctx.fillRect(vw-100, y1, 20, y2-y1);
	}
}

function updateVideoSpelerGL(onzin, onzin2, onzin3, maakZwart)
{
	updateVideoLijn();
	
	if (geenAmbilight) return;
	if (tetraag > 10 && !maakZwart) { updateVideoSpelerGL(0,0,0,true); geenAmbilight = true;} //maak de ambilight zwart
	
	datum = new Date();
	var dt = datum.getTime() - laatstetijd;
	if (dt > 110)
		tetraag += 1;
	else
		tetraag -= 0.2;
		
	if (tetraag < 0) tetraag = 0;
	
	laatstetijd = datum.getTime();
	
	var ambi1ctx = ambi1.getContext("2d");
	var ambi2ctx = ambi2.getContext("2d");
	var ambi3ctx = ambi3.getContext("2d");
	
	var vw = videocanvas.width; var vh = videocanvas.height;
	
	//zelf mipmaps maken omdat browsers vaak geen bilineaire filtering gebruiken, maar nearest neighbour.
	//(FF doet het wel goed, maar zo werkt het altijd)
	function mip (imgdata)
	{
		var imgdatanew = ambi1ctx.getImageData(0,0,imgdata.width/2, imgdata.height/2);
		for (var i = 0; i < imgdatanew.width; i++)
		{
			for (var j = 0; j < imgdatanew.height; j++)
			{
				for (var k = 0; k < 3; k++)
				{
					imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + k]  = (
						imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k] / 4 +
						imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k] / 4 +
						imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k] / 4 +
						imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k] / 4 
					);
				}
				imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + 3] = 255;
			}
		}
		return imgdatanew;
	}
	
	//maakt mipmaps van alleen de pixels in de rand
	function mipRand (imgdata)
	{
		var imgdatanew = ambi1ctx.getImageData(0,0,imgdata.width/2, imgdata.height/2);
		for (var i = 0; i < imgdatanew.width; i++)
		{
			for (var j = 0; j < imgdatanew.height; j++)
			{
				var lb = (i == 0 || j == 0);
				var rb = (i == imgdatanew.width-1 || j == 0);
				var lo = (i == 0 || j == imgdatanew.height-1);
				var ro = (i == imgdatanew.width-1 || j == imgdatanew.height-1);
				if (!(lb || rb || lo || ro)) continue;
				for (var k = 0; k < 3; k++)
				{
					var n = 0;
					var r = 0;
					if (lb)
					{ r += imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k]; n += 1 }
					if (lo)
					{ r += imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 0) * 4 + k]; n += 1 }
					if (rb)
					{ r += imgdata.data[((j * 2 + 0) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k]; n += 1 }
					if (ro)
					{ r += imgdata.data[((j * 2 + 1) * 2 * imgdatanew.width) * 4 + (i * 2 + 1) * 4 + k]; n += 1 }
					imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + k] = r / n;
				}
				imgdatanew.data[j * imgdatanew.width * 4 + i * 4 + 3] = 255;
			}
		}
		return imgdatanew;
	}
	
	function vervaag(imgdata, factor)
	{
		var imgdatanew = ambi1ctx.getImageData(0,0,imgdata.width, imgdata.height);
		for (var i = 0; i < imgdata.width; i++)
		{
			for (var j = 0; j < imgdata.height; j++)
			{
				var l = (i > 0 && (j == 0 || j == imgdata.height -1));
				var r = (i < (imgdata.width -1) && (j == 0 || j == imgdata.height -1));
				var b = ((i == 0 || i == imgdata.width -1) && j > 0);
				var o = ((i == 0 || i == imgdata.width -1) && j < (imgdata.height -1));
				for (var k = 0; k < 3; k++)
				{
					var n = 1;
					var rs = imgdata.data[ j * imgdata.width * 4 + i * 4 + k ];
					if (l) { rs += imgdata.data[ j * imgdata.width * 4 + (i-1) * 4 + k ]*factor; n += factor;}
					if (r) { rs += imgdata.data[ j * imgdata.width * 4 + (i+1) * 4 + k ]*factor; n += factor;}
					if (o) { rs += imgdata.data[ (j+1) * imgdata.width * 4 + i * 4 + k ]*factor; n += factor;}
					if (b) { rs += imgdata.data[ (j-1) * imgdata.width * 4 + i * 4 + k ]*factor; n += factor;}
					
					imgdatanew.data[ j * imgdata.width * 4 + i * 4 + k ] = rs / n;
				}
			}
		}
		return imgdatanew;
	}
	
	function saturatie(r, g, b)
	{
		var max = Math.max(r, g, b);
		var min = Math.min(r, g, b);
		
		if (max == 0) return 0.0;
		
		return (max - min) / 255;
	}
	
	var ambidata = null;
	
	try {
	if (ambi1ctx && ambi2ctx && ambi3ctx)
	{
		ambi1ctx.globalAlpha = 0.3;
		ambi1ctx.drawImage(videospeler,0,0, ambi1.width, ambi1.height);
		ambidata = vervaag(mipRand(mip(mip(ambi1ctx.getImageData(0,0,ambi1.width, ambi1.height)))),0.75).data;
	}
	} catch (e)
	{
		//Security exception in IE hier :S
		return;
	}
	
	var aw = ambi2.width; var ah = ambi2.height;
	
	var data = new Array(2 * aw + 2 * ah - 4); var n = 0; var drempel = 0.05; var drempel2 = 0.2;
	
	for (var i = 0; i < aw; i++)
	{
		for (var j = 0; j < ah; j++)
		{
			if (i > 0 && i < aw-1 && j > 0 && j < ah-1) continue;
			
			var r = ambidata[(j*aw + i)*4]/255;
			var g = ambidata[(j*aw + i)*4+1]/255;
			var b = ambidata[(j*aw + i)*4+2]/255;
			var a = 1.0;
			var w = 0; var h = 0; var x = 0; var y = 0;
			if (i > 0 && i < aw-1) { w = (vw - 200)/(aw-2); x = 100 + w*(i-1); } else { w = 100; x = Math.min(i,1)*(vw-100); }
			if (j > 0 && j < ah-1) { h = (vh - 200)/(ah-2); y = 100 + h*(j-1); } else { h = 100; y = Math.min(j,1)*(vh-100); }
			
			var sterkte = (r*1.5 + g*1.5 + b)/4;
			var r2, g2, b2;
			r2 = r/(sterkte*0.5+0.5); g2 = g/(sterkte*0.5+0.5); b2 = b/(sterkte*0.5+0.5);
			r = (r + Math.min(1,r2)) * 127; g = (g + Math.min(1,g2)) * 127; b = (b + Math.min(1,b2)) * 127;
			
			a = sterkte;
			a = (a / (a + drempel2)) / (1 / (drempel2 + 1));
			a = (a + Math.max(Math.min(saturatie(r,g,b)*1.4 - 0.1,1.0),0.0)*3)/4;
			a = Math.max(0, a - drempel)/(1-drempel);
			
			data[n*4] = r; data[n*4+1] = g; data[n*4+2] = b; data[n*4+3] = a;
			n += 1;
		}
	}
	
	function index(xx, yy)
	{
		if (xx == 0) return yy*4;
		if (xx == aw-1) return ((2 * ah + 2 * aw - 4) - (ah - yy)) * 4;
		if (yy == 0) return ah * 4 + (xx - 1) * 8;
		return ah * 4 + (xx - 1) * 8 + 4;
	}
	
	kleurdata = new Array(4 * 18);
	if (maakZwart)
	{
		for (var q = 0; q < 4 * 18; q++)
			kleurdata[q] = 0.0;
	}
	else
	{
		for (var q = 0; q < 4; q++)
		{
			kleurdata[0 * 4 + q] = data[index(0,0) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[1 * 4 + q] = data[index(1,0) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[2 * 4 + q] = data[index(2,0) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[3 * 4 + q] = data[index(3,0) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[4 * 4 + q] = data[index(4,0) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[5 * 4 + q] = data[index(5,0) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[6 * 4 + q] = data[index(5,1) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[7 * 4 + q] = data[index(5,2) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[8 * 4 + q] = data[index(5,3) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[9 * 4 + q] = data[index(5,4) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[10 * 4 + q] = data[index(4,4) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[11 * 4 + q] = data[index(3,4) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[12 * 4 + q] = data[index(2,4) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[13 * 4 + q] = data[index(1,4) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[14 * 4 + q] = data[index(0,4) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[15 * 4 + q] = data[index(0,3) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[16 * 4 + q] = data[index(0,2) + q] / (q == 3 ? 1.0 : 255.0);
			kleurdata[17 * 4 + q] = data[index(0,1) + q] / (q == 3 ? 1.0 : 255.0);
		}
	}
	
	
	drawScene(vw, vh, kleurdata);
}

function updateVideoLijn()
{
	var ctx = lijncanvas.getContext("2d");
	
	var vw = lijncanvas.width;
	var resolutie = videospeler.duration / (vw-6);
	
	ctx.clearRect(0,0,vw,30);
	ctx.beginPath();
	ctx.arc(3,15,3,Math.PI/2, Math.PI*1.5, false);
	ctx.arc(vw-3,15,3,Math.PI*1.5, Math.PI*2.5, false);
	ctx.closePath();
	ctx.clip();
	
	ctx.fillStyle = "rgba(0,0,0,0.4)";
	ctx.fillRect(0,12,vw,6);
	
	ctx.fillStyle = "rgba(255,255,255,0.1)";
	ctx.fillRect(0,12,vw,6);
	
	ctx.fillStyle = "rgba(255,255,255,0.2)";
	if (videospeler.buffered)
	{
		for (var i = 0; i < videospeler.buffered.length; i++)
		{
			var x1 = Math.floor(videospeler.buffered.start(i)/resolutie);
			var x2 = Math.ceil(videospeler.buffered.end(i)/resolutie);
			ctx.fillRect(x1 + (x1 == 0 ? 0 : 3),12,x2-x1 + (x1 == 0 ? 3 : 0) + (x2 == vw - 6 ? 3 : 0),6);
		}
	}
	try
	{
		ctx.fillStyle = "rgba(255,255,255,0.3)";
		ctx.fillRect(0,12,3,6);
		ctx.fillRect(3,12,videospeler.currentTime/resolutie,6);
		
		ctx.fillStyle = "rgba(255,255,255,1.0)";
		ctx.beginPath();
		ctx.moveTo(videospeler.currentTime/resolutie, 15);
		ctx.arc(videospeler.currentTime/resolutie + 3, 15, 3, 0, Math.PI*2, false);
		ctx.fill();
	} catch (err) {
		
	}
	
	var minuten = Math.floor(videospeler.currentTime/60);
	var seconden = Math.floor(videospeler.currentTime - minuten*60);
	seconden = seconden + ""; seconden = seconden.length == 1 ? "0" + seconden : seconden;
	divtijd.innerHTML = minuten + ":" + seconden;
	
}

function videoStripLinks()
{
	var jq = $(".videostrip-midden a:first-child");
	jq.fadeTo(250, 0.0).animate({marginLeft: -(jq.width() + 5) + "px"}, 250, "easeInQuad", function() {
		$(this).detach().appendTo(".videostrip-midden div").animate({marginLeft: "5px"}, 250, "easeOutQuad").fadeTo(250, 1.0);
	});
}

function videoStripRechts()
{
	var jq = $(".videostrip-midden a:last-child");
	jq.fadeTo(250, 0.0).animate({marginRight: -(jq.width() + 5) + "px"}, 250, "easeInQuad", function() {
		$(this).detach().prependTo(".videostrip-midden div").animate({marginRight: "5px"}, 250, "easeOutQuad").fadeTo(250, 1.0);
	});
}

function videoStripKlik()
{
	var href = $(this).attr("href");
	var sleutel = href.replace("/video/", "");
	
	gaNaarVideo(sleutel);
	
	return false;
}

function videoKlaar()
{
	//verwijderTitel = true;
	//verwijderVideoSpeler();
	gaNaarPagina("video");
}

function gaNaarVideo(sleutel, geentitel, geenhistory)
{
	if (!geentitel)
	{
		veranderVideoTitel(videodata[sleutel]["titel"], videodata[sleutel]["subtitel"], videodata[sleutel]["omschrijving"]);
		verwijderTitel = false;
	}
	
	$(this).queue(verwijderVideoSpeler).queue(function(){
		$("#video-schermvulling").append(maakVideoSpeler(videodata[sleutel]["pad"] + sleutel, videodata[sleutel]["formaten"], videodata[sleutel]["hd"], videoKlaar));
		
		if (!geenhistory)
		{
			if (window.history.pushState)
			{
				window.history.pushState("video/"+sleutel, "2xp / video / " + videodata[sleutel]["titel"], "/video/" + sleutel);
				popstatenu = true;
			}
			else
				window.location.hash = "video/"+sleutel;
		}
			document.title = "2xp / video / " + videodata[sleutel]["titel"];
		
		$(this).dequeue();
	});
}

function veranderVideoTitel(titel, subtitel, omschrijving)
{
	if (omschrijving == undefined && subtitel != undefined)
	{
		omschrijving = subtitel;
		subtitel = undefined;
	}
	
	$(".video-info").fadeTo(400,0.0).slideUp(400, function() { $(this).remove(); });
	
	if (titel == undefined) {
		if ($(".video-pagina-info").length)
			$(".video-pagina-info").slideDown(500);
		else
		{
			//problemen....
		}
	} else {
		$(".video-pagina-info").slideUp(500);
		var ehgroup = document.createElement("hgroup");
		var etitel = document.createElement("h1");
		etitel.innerHTML = titel;
		ehgroup.appendChild(etitel);
		if (subtitel != undefined)
		{
			var esubtitel = document.createElement("h2");
			esubtitel.innerHTML = subtitel;
			ehgroup.appendChild(esubtitel);
		}
		var ediv = document.createElement("div");
		ediv.appendChild(ehgroup);
		var ep = document.createElement("p");
		ep.innerHTML = omschrijving;
		ediv.appendChild(ep);
		ediv.className = "video-info";
		$(ediv).css({display: "none", opacity: 0.0});
		$(".videostrip").after(ediv);
		$(ediv).slideDown(400);
		$(ediv).fadeTo(400, 1.0);
	}
}