GLB Canvas Replay Conversion

Greasy Fork is available in English.
GLB Canvas Replay Conversion

sdfsdf
Stel een vraag, plaats een beoordeling of rapporteer dit script.
// ==UserScript==
// @name        GLB Canvas Replay Conversion
// @namespace   pbr/canvas
// @include     http://goallineblitz.com/game/replay.pl?game_id=*&pbp_id=*
// @copyright   2012, pabst
// @license     (CC) Attribution Share Alike; http://creativecommons.org/licenses/by-sa/3.0/
// @version	12.11.30
// @description sdfsdf
// ==/UserScript==

/*
 *
 * pabst did this 12/11/27+
 *
 *
 */

unsafeWindow.pause();
document.getElementById("offense_container").style.visibility = "hidden";
document.getElementById("defense_container").style.visibility = "hidden";
document.getElementById("offense_container").style.display = "none";
document.getElementById("defense_container").style.display = "none";

var play_data = null;
var imageData = [];

if (!window.requestAnimationFrame) {
	requestAnimFrame = (function () {
		return  window.requestAnimationFrame       || 
	        	window.webkitRequestAnimationFrame || 
	              	window.mozRequestAnimationFrame    || 
	              	window.oRequestAnimationFrame      || 
	              	window.msRequestAnimationFrame     || 
	              	function(callback, element) {
				console.log("no request animation frame!!");
	                	window.setTimeout(callback, 1000 / 20);
	              	};
	}) ();
};

window.setTimeout(
	function() {
		if (unsafeWindow.defaultFrameSpeed != 100) {
			console.log("replays must be set to 10fps for this script to work : "+unsafeWindow.defaultFrameSpeed);
			unsafeWindow.play();
		}
		else {
			main();
		}
	}
, 100);

function main() {
	var container = document.getElementById("replay_container")
	container.style.height = "500px";
	container.style.width = "520px";
	var area = document.getElementById("replay_area");
	container.removeChild(area);

	play_data = fixFrames();
	fixButtons();

	initBackground();
	initForeground();
	initOffense();
	initDefense();
	initReplayInfo();

	drawFrame(0,0);
	setTimeout(function() { 
		isPlaying = true;
		document.getElementById("pause_button").visibility = "visible";
		document.getElementById("play_button").visibility = "hidden";
		render(); 
	}, 2500);
}

function initBackground() {
	var canvas = document.createElement("canvas");
	canvas.style.position = 'absolute';
	canvas.setAttribute("id","background");
	canvas.setAttribute("width","520px");
	canvas.setAttribute("height","500px");

	var container = document.getElementById("replay_container")
	container.appendChild(canvas);

	var context = canvas.getContext("2d");
	context.save();
}

function initForeground() {
	var canvas = document.createElement("canvas");
	canvas.style.position = 'absolute';
	canvas.setAttribute("id","foreground");
	canvas.setAttribute("width","520px");
	canvas.setAttribute("height","500px");

	var container = document.getElementById("replay_container")
	container.appendChild(canvas);

	var context = canvas.getContext("2d");
	context.save();
}

function initOffense() {
	var canvas = document.createElement("canvas");
	canvas.style.position = 'absolute';
	canvas.style.top = "20px";

	canvas.setAttribute("id","offense");
	canvas.setAttribute("width","20px");
	canvas.setAttribute("height","460px");

	var container = document.getElementById("replay_container")
	container.appendChild(canvas);

	canvas.addEventListener("click", offenseClicked, false);
}

function offenseClicked() {
	renderOffenseLineup();
}

function initDefense() {
	var canvas = document.createElement("canvas");
	canvas.style.position = 'absolute';
	canvas.style.left = "500px";
	canvas.style.top = "20px";

	canvas.setAttribute("id","defense");
	canvas.setAttribute("width","20px");
	canvas.setAttribute("height","460px");

	var container = document.getElementById("replay_container")
	container.appendChild(canvas);

	canvas.addEventListener("click", defenseClicked, false);
}

function defenseClicked() {
	renderDefenseLineup();
}

function initReplayInfo() {
	var canvas = document.createElement("canvas");
	canvas.style.position = 'absolute';
	canvas.setAttribute("id","replayInfo");
	canvas.setAttribute("width","520px");
	canvas.setAttribute("height","20px");

	var container = document.getElementById("replay_container")
	container.appendChild(canvas);

	var canvas = document.createElement("canvas");
	canvas.style.position = 'absolute';
	canvas.style.top = "480px";
	canvas.setAttribute("id","playResults");
	canvas.setAttribute("width","520px");
	canvas.setAttribute("height","20px");

	var container = document.getElementById("replay_container")
	container.appendChild(canvas);
}

function getTeamBColor(id) {
	var team = unsafeWindow.ptid[id];
	var position = unsafeWindow.players[id].position;
	var fcolor = unsafeWindow.home_color2+"_border_home";
	var bcolor = unsafeWindow.home_color1;
	if (unsafeWindow.home != team) {
		fcolor = unsafeWindow.away_color2+"_border";
		bcolor = unsafeWindow.away_color1;
	}
	bcolor = bcolor.replace("mid_","medium");	
	bcolor = bcolor.replace("_","");
	return bcolor;
}

function getTeamFColor(bcolor) {
	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");
	context.strokeStyle = bcolor;
	var color = context.strokeStyle.toString().slice(1);
	var r = parseInt(color.slice(0,2), 16);
	var g = parseInt(color.slice(2,4), 16);
	var b = parseInt(color.slice(4,6), 16);
	if ((r+g+b)/3 > 128) {
		return "black";
	}
	else {
		return "white";
	}
}

function renderReplayInfo() {
	if (imageData["replayInfo"] == null) {
		var canvas = document.createElement("canvas");
		canvas.setAttribute("width","520px");
		canvas.setAttribute("height","20px");
		var context = canvas.getContext("2d");

		var gradient = context.createLinearGradient(0,0,0,20);
		gradient.addColorStop(0,"rgb(100,100,100)");
		gradient.addColorStop(1,"rgb(40,40,40)");

		context.lineWidth = 2;
		context.fillStyle = gradient;
		context.fillRect(0,0,520,20);

		context.font = "bold 18px sans-serif";
		context.fillStyle = "#ffcc00";
		var info = document.getElementsByTagName("h1")[0].textContent;
		var length = context.measureText(info.toString());
		context.fillText(info.toString(), 260-length.width/2,16);

		var p = play_data[0][1];
		var id = p.id;
		var bcolor = getTeamBColor(id);
		var fcolor = getTeamFColor(bcolor);

		context.lineWidth = 2;
		context.fillStyle = bcolor;
		context.strokeStyle = fcolor;

		context.beginPath();
		context.moveTo(0,0);
		context.lineTo(40, 0);
		context.lineTo(60,20);
		context.lineTo(0,20);
		context.lineTo(0,0);
		context.closePath();
		context.fill();
		context.stroke();
		
		context.font="bold 16px sans-serif";
		var score = document.getElementById("off_score").textContent;
		var length = context.measureText(score.toString());
		context.fillStyle = fcolor;
		context.fillText(score.toString(), 20-length.width/2,16);

		var p = play_data[0][12];
		var id = p.id;
		var bcolor = getTeamBColor(id);
		var fcolor = getTeamFColor(bcolor);

		context.lineWidth = 2;
		context.fillStyle = bcolor;
		context.strokeStyle = fcolor;

		context.beginPath();
		context.moveTo(520,0);
		context.lineTo(480, 0);
		context.lineTo(460,20);
		context.lineTo(520,20);
		context.lineTo(520,0);
		context.closePath();
		context.fill();
		context.stroke();

		context.font="bold 16px sans-serif";
		var score = document.getElementById("def_score").textContent;
		var length = context.measureText(score.toString());
		context.fillStyle = fcolor;
		context.fillText(score.toString(), 500-length.width/2,16);

		imageData["replayInfo"] = canvas;
	}
	var canvas = document.getElementById("replayInfo");
	var context = canvas.getContext("2d");
	context.drawImage(imageData["replayInfo"],0,0);

	if (imageData["playResults"] == null) {
		var canvas = document.createElement("canvas");
		canvas.setAttribute("width","520px");
		canvas.setAttribute("height","20px");
		var context = canvas.getContext("2d");

		var gradient = context.createLinearGradient(0,0,0,20);
		gradient.addColorStop(0,"rgb(100,100,100)");
		gradient.addColorStop(1,"rgb(40,40,40)");

		context.lineWidth = 2;
		context.fillStyle = gradient;
		context.fillRect(0,0,520,20);

		var size = 14;
		do {
			context.font = "bold "+size+"px sans-serif";
			context.fillStyle = "#ffcc00";
			var info = document.getElementById("outcome_content").textContent;
			var length = context.measureText(info.toString());
			size--;
		}
		while (length.width > 520);
		context.fillText(info.toString(), 260-length.width/2,14);
		imageData["playResults"] = canvas;
	}
	var canvas = document.getElementById("playResults");
	var context = canvas.getContext("2d");
	context.drawImage(imageData["playResults"],0,0);
}

function renderOffenseBar(frame, pct, loc) {
	if (imageData["offenseBar"] == null) {
		var canvas = document.createElement("canvas");
		canvas.setAttribute("width","20px");
		canvas.setAttribute("height","480px");
		var context = canvas.getContext("2d");
	
		var p = play_data[0][1];
		var id = p.id;
		var bcolor = getTeamBColor(id);
		var fcolor = getTeamFColor(bcolor);

		context.lineWidth = 3;
		context.fillStyle = bcolor;
		context.strokeStyle = fcolor;
		context.fillRect(0,0, 20,460);
		context.strokeRect(0,0, 20,460);
	
		var teamName = document.getElementsByClassName("secondary_container")[0].textContent;
		context.fillStyle = fcolor;
		context.lineWidth=1;
		context.font="bold 14px sans-serif";
		context.save();
	
		context.rotate(Math.PI/2);
		context.fillText(teamName, 50,-6);
		context.restore();
	
		imageData["offenseBar"] = canvas;
	}

	var canvas = document.getElementById("offense");
	var context = canvas.getContext("2d");
	context.drawImage(imageData["offenseBar"],0,0);

}

var offenseLineupVisible = false;
function renderOffenseLineup(frame, pct, loc) {
	offenseLineupVisible = !offenseLineupVisible;
	
	if (offenseLineupVisible == true) {
		var canvas = document.createElement("canvas");
		canvas.setAttribute("id","offenseLineup");
		canvas.setAttribute("width","200px");
		canvas.setAttribute("height","480px");
		canvas.style.position = "absolute";
		canvas.style.left = "20px";
		var context = canvas.getContext("2d");

		var id = unsafeWindow.play_data[0][1].id;
		var team = unsafeWindow.ptid[id];
		var bcolor = getTeamBColor(id);
		var fcolor = getTeamFColor(bcolor);

		context.font="14px sans-serif";
		context.lineWidth = 2;
		context.fillStyle = bcolor;
		context.strokeStyle = fcolor;
		context.fillRect(0,130, 200,500);
		context.strokeRect(0,130, 200,500);

		for (var i=1; i<12; i++) {
			var id = unsafeWindow.play_data[0][i].id;
			var position = unsafeWindow.players[id].position;
			var name = unsafeWindow.players[id].name;

			var x = i;
			var y = 216;
			context.fillStyle = bcolor
			context.fillRect(0,(x-1)*24+y, 200,x*24+y);
			context.strokeRect(0,(x-1)*24+y, 200,x*24+y);
			context.fillStyle = fcolor;
			context.fillText(name, 25, x*24-10+y+3);
			context.drawImage(imageData[id], 5, (x-1)*24+y+4);
		}

		var image = new Image();
		image.src = "http://goallineblitz.com/game/team_pic.pl?team_id="+team;
		var imgcanvas = document.createElement("canvas");
		var imgcontext = imgcanvas.getContext("2d");
		imgcontext.scale(75/image.width, 75/image.height);
		imgcontext.drawImage(image, 0, 0);

		context.drawImage(imgcanvas, 5,135);

		context.font = "64px sans-serif";
		context.fillColor = fcolor;
		var score = document.getElementById("off_score").textContent;
		var length = context.measureText(score.toString());
		context.fillText(score.toString(), 138-length.width/2,200);

		var container = document.getElementById("replay_container");
		container.appendChild(canvas);		
	}
	else {
		var lineup = document.getElementById("offenseLineup");
		lineup.parentNode.removeChild(lineup);
	}
}

function renderDefenseBar(frame, pct, loc) {
	if (imageData["defenseBar"] == null) {
		var canvas = document.createElement("canvas");
		canvas.setAttribute("width","20px");
		canvas.setAttribute("height","460px");
		var context = canvas.getContext("2d");
		
		var p = play_data[0][12];
		var id = p.id;
		var bcolor = getTeamBColor(id);
		var fcolor = getTeamFColor(bcolor);

		context.lineWidth = 3;
		context.fillStyle = bcolor;
		context.strokeStyle = fcolor;
		context.fillRect(0,0, 20,460);
		context.strokeRect(0,0, 20,460);
	
		var teamName = document.getElementsByClassName("secondary_container")[1].textContent;
		context.fillStyle = fcolor;
		context.lineWidth=1;
		context.font="bold 14px sans-serif";
		context.save();
	
		context.rotate(Math.PI/2);
		context.fillText(teamName, 50,-6);
		context.restore();
	
		imageData["defenseBar"] = canvas;
	}

	var canvas = document.getElementById("defense");
	var context = canvas.getContext("2d");
	context.drawImage(imageData["defenseBar"],0,0);
}

var defenseLineupVisible = false;
function renderDefenseLineup(frame, pct, loc) {
	defenseLineupVisible = !defenseLineupVisible;
	
	if (defenseLineupVisible == true) {
		var canvas = document.createElement("canvas");
		canvas.setAttribute("id","defenseLineup");
		canvas.setAttribute("width","200px");
		canvas.setAttribute("height","480px");
		canvas.style.position = "absolute";
		canvas.style.left = "300px";
		var context = canvas.getContext("2d");

		var id = unsafeWindow.play_data[0][13].id;
		var team = unsafeWindow.ptid[id];
		var bcolor = getTeamBColor(id);
		var fcolor = getTeamFColor(bcolor);

		context.font="14px sans-serif";
		context.lineWidth = 2;
		context.fillStyle = bcolor;
		context.strokeStyle = fcolor;
		context.fillRect(0,130, 200,460);
		context.strokeRect(0,130, 200,460);

		for (var i=12; i<23; i++) {
			var id = unsafeWindow.play_data[0][i].id;
			var position = unsafeWindow.players[id].position;
			var name = unsafeWindow.players[id].name;

			var x = i-11;
			var y = 216;
			context.fillStyle = bcolor;
			context.fillRect(0,(x-1)*24+y, 200,x*24+y);
			context.strokeRect(0,(x-1)*24+y, 200,x*24+y);
			context.fillStyle = fcolor;
			context.fillText(name, 25, x*24-10+y+3);
			context.drawImage(imageData[id], 5, (x-1)*24+y+4);
		}

		var image = new Image();
		image.src = "http://goallineblitz.com/game/team_pic.pl?team_id="+team;
		var imgcanvas = document.createElement("canvas");
		var imgcontext = imgcanvas.getContext("2d");
		imgcontext.scale(75/image.width, 75/image.height);
		imgcontext.drawImage(image, 0, 0);

		context.drawImage(imgcanvas, 5,135);

		context.font = "64px sans-serif";
		context.fillColor = fcolor;
		var score = document.getElementById("def_score").textContent;
		var length = context.measureText(score.toString());
		context.fillText(score.toString(), 138-(length.width/2),200);

		var container = document.getElementById("replay_container");
		container.appendChild(canvas);		
	}
	else {
		var lineup = document.getElementById("defenseLineup");
		lineup.parentNode.removeChild(lineup);
	}
}

function drawFrame(frame, pct) {
	var loc = renderField(frame, pct);

	var canvas = document.getElementById("foreground");
	var context = canvas.getContext("2d");
	context.restore();
	context.save();
        context.clearRect(20, 0, 500, 1160);

	renderFirstDown(frame, pct, loc);
	renderVisionCone(frame, pct, loc);
	renderPlayers(frame, pct, loc);
	renderBall(frame, pct, loc);
	renderIcons(frame, pct, loc);

	renderOffenseBar(frame, pct, loc);
	renderDefenseBar(frame, pct, loc);
	renderReplayInfo();
}

var initialTime = null;
var currentTime = null;
var isPlaying = false;

var frameMultiplier = 1;

function render() {
	if (isPlaying == false) return;

 	currentTime = new Date();
	if (initialTime == null) {
		initialTime = currentTime;
	}

	var diff = currentTime - initialTime;
	var frame = diff/100 * frameMultiplier;
	pct = frame - Math.floor(frame);
	frame = Math.floor(frame) % play_data.length;

        try {
		drawFrame(frame, pct);
		lastTime = currentTime;
		var scrubber = 480/play_data.length*(frame+pct);
		document.getElementById("scrubber_handle").style.left = scrubber+"px";
        }
	catch (e) {
                window.console.log(e);
        }

	measureFps();

	if (frame >= play_data.length-1) {
		initialTime = null;
		setTimeout(function() { 
			drawFrame(0,0); 
			setTimeout(function() { render(); }, 2500);			
		}, 2500);
	}
	else {
	        requestAnimFrame(render);
	}
}

function renderIcons(frame, pct, loc) {
	var canvas = document.getElementById("foreground");
	var context = canvas.getContext("2d");

	for (var p=1; p<play_data[frame].length; p++) {
		var left = play_data[frame];
		if (left[p].icon != null) {
			var right = play_data[Math.min(frame+1, play_data.length-1)];
	
			var xdiff = right[p].x - left[p].x;
			var ydiff = right[p].y - left[p].y;
			var x = left[p].x + xdiff * pct;
			var y = left[p].y + ydiff * pct + loc - 20;
	
			var image = new Image();
			image.src = "/images/replay_icons/"+left[p].icon+".gif"; 
			context.drawImage(image, x-14, y-16);
		}
	}
}

function renderVisionCone(frame, pct, loc) {
	var p = play_data[frame][0];
	if ((p.tx != null) && (p.ty != null)) {
		var left = play_data[frame][0];
		var right = play_data[Math.min(frame+1, play_data.length-1)][0];

		var xdiff = right.x - left.x;
		var ydiff = right.y - left.y;
		var ballx = left.x + xdiff * pct - 16;
		var bally = left.y + ydiff * pct + loc;

		var xdiff = right.tx - left.tx;
		var ydiff = right.ty - left.ty;
		var targetx = left.tx + xdiff * pct - 16;
		var targety = left.ty + ydiff * pct + loc - 20;

		var canvas = document.getElementById("foreground");
		var context = canvas.getContext("2d");
		context.drawImage(imageData["target"], targetx+11, targety-5);

/*
		var gradient = context.createRadialGradient(250,900,0,300,950,1);
		gradient.addColorStop(0,"rgba(200,200,200,1)");
		gradient.addColorStop(1,"rgba(200,200,200,0.0)");
		context.beginPath();
		context.moveTo(250,900);
		context.lineTo(250,950);
		context.lineTo(300,900);
		context.lineTo(250,900);
		context.closePath();
		context.fillStyle = gradient;
		context.strokeStyle = gradient;
		context.fill();
		context.stroke();
*/
	}
}

function renderFirstDown(frame, pct, loc) {
	for (var i=1; i<play_data[0].length; i++) {
		var p = play_data[0][i];
		if ((unsafeWindow.players[p.id].position == "C") || (unsafeWindow.players[p.id].position == "LS")) {
			var y = p.y+loc;

			var canvas = document.getElementById("foreground");
			var context = canvas.getContext("2d");

			var dir = document.getElementById("time_ytg");
			var dirText = dir.innerHTML;
			var togo = "";
			if (dirText.indexOf(" inches ") != -1) {
				togo = 0.3;
			}
			else {
				if (dirText.indexOf(" G on ") == -1) {
					var p2 = dirText.indexOf(" &amp; ")+7;
					var p1 = dirText.indexOf(" on ");
					togo = parseFloat(dirText.substring(p2,p1));
					if (dirText.substring(p2-10,p2-9) == "4") {
						context.strokeStyle = "rgb(255,0,0)";
					}
					else {
						context.strokeStyle = "rgb(255,255,0)";
					}
				}
			}
	
			var dy = togo * 9;
			if (parseFloat(play_data[0][1].y) > parseFloat(play_data[0][0].y)) {
				dy = dy * -1;
			}

			context.beginPath();
			context.moveTo(20,y-dy);
			context.lineTo(500,y-dy);
			context.stroke();

			context.lineWidth = 2;
			context.beginPath();
			context.strokeStyle = "rgb(0,0,255)";
			context.moveTo(20,y);
			context.lineTo(500,y);
			context.stroke();
			break;
		}
	}
}

function renderField(frame, pct) {
	var left = play_data[frame];
	var right = play_data[Math.min(frame+1, play_data.length-1)];

	var ydiff = right[0].y - left[0].y;
	var y = left[0].y + ydiff * pct;

	var location = -1 * y + 250;
	location = Math.max(location, -660);
	location = Math.min(location, 0);

	var canvasbg = document.getElementById("background");
	var contextbg = canvasbg.getContext("2d");

	contextbg.drawImage(imageData["field"], 20, 0-location, 480, 500, 20, 0, 480, 500);
	return location;
}

function renderPlayers(frame, pct, loc) {
/*
	for (var f=0; f<play_data.length; f++) {
		for (var p=0; p<play_data[f].length; p++) {
if (play_data[f][p].icon != null) {
			console.log(f+") "+p+" -- "+play_data[f][p].icon);
}			
		}
	}
*/
	
	var canvas = document.getElementById("foreground");
	var context = canvas.getContext("2d");

	for (var p=1; p<play_data[frame].length; p++) {
		var left = play_data[frame];
		var right = play_data[Math.min(frame+1, play_data.length-1)];

		var xdiff = right[p].x - left[p].x;
		var ydiff = right[p].y - left[p].y;
		var x = left[p].x + xdiff * pct;
		var y = left[p].y + ydiff * pct + loc - 20;

		if (imageData[left[p].id] != null) {
			context.drawImage(imageData[left[p].id], x, y);
		}
	}

 }

function renderBall(frame, pct, loc) {
	var left = play_data[frame];
	var right = play_data[Math.min(frame+1, play_data.length-1)];

	var xdiff = right[0].x - left[0].x;
	var ydiff = right[0].y - left[0].y;
	var x = left[0].x + xdiff * pct + 3;
	var y = left[0].y + ydiff * pct + loc - 20;

	var canvasfg = document.getElementById("foreground");
	var contextfg = canvasfg.getContext("2d");

	if ((left[0].z < 5) || (right[0].z < 5)) {
		contextfg.drawImage(imageData["ball"], x, y);
	}
	else {
		if (imageData["rotated-ball"] == null) {
			var mul = 1;
			if (left[0].x < right[0].x) {
				mul = 1;
			}
			else {
				mul = -1;
			}
			if (left[0].y < right[0].y) {
				mul = mul * -1;
			}
			else {
				mul = mul * 1;
			}
			var rotation = mul * Math.atan(Math.abs(left[0].x-right[0].x)/Math.abs(left[0].y-right[0].y));
			rotation += 2*Math.PI;
		
			var canvas = document.createElement("canvas");
			canvas.setAttribute("width",16);
			canvas.setAttribute("height",16);
			var context = canvas.getContext("2d");
			context.save();
			context.translate(8, 8);
			context.rotate(rotation);
			context.drawImage(imageData["passing-ball"], -8, -8);
			context.restore();

			imageData["rotated-ball"] = canvas;
		}
		contextfg.drawImage(imageData["rotated-ball"], x, y); //fix me!!
	}
}

function getFromCanvas(src, w, h) {
	var image = new Image();
	image.src = src;

	var canvas = document.createElement("canvas");
	canvas.setAttribute("width",w);
	canvas.setAttribute("height",h);

	var context = canvas.getContext("2d");
	context.drawImage(image,0,0);

	return canvas;
}

function prepareImages() {
	imageData["ball"] = getFromCanvas("http://goallineblitz.com/images/ball.gif", 16, 16);
	imageData["passing-ball"] = getFromCanvas("http://goallineblitz.com/images/passing-ball.gif", 16, 16); //fix me!!
	imageData["kicking-ball"] = getFromCanvas("http://goallineblitz.com/images/kicking-ball.gif", 16, 16); //fix me!!
	imageData["field"] = getFromCanvas("http://goallineblitz.com/images/game/fields/"+unsafeWindow.field+".jpg", 520, 1160);

	var canvas = document.createElement("canvas");
	canvas.setAttribute("width","26");
	canvas.setAttribute("height","26");
	var context = canvas.getContext("2d");
	context.beginPath();
	context.strokeStyle = "rgb(255,255,255)";
	context.lineWidth = 3;
	context.moveTo(13,0);
	context.lineTo(13,26);
	context.moveTo(0,13);
	context.lineTo(26,13);
	context.stroke();
	context.beginPath();
	context.strokeStyle = "rgb(255,0,0)";
	context.lineWidth = 2;
	context.arc(13, 13, 10, 0, 2*Math.PI, false); 
	context.closePath();
	context.stroke();
	imageData["target"] = canvas;
	canvas = null;

	var done = [];
	for (var i=1; i<unsafeWindow.play_data[0].length; i++) {
		var p = unsafeWindow.play_data[0][i];
		var id = p.id;
		if (imageData[id] != null) continue;

		var team = unsafeWindow.ptid[id];
		var position = unsafeWindow.players[id].position;
		var fcolor = unsafeWindow.home_color2+"_border_home";
		var bcolor = unsafeWindow.home_color1;
		if (unsafeWindow.home != team) {
			fcolor = unsafeWindow.away_color2+"_border";
			bcolor = unsafeWindow.away_color1;
		}

		var fimage = new Image();
		fimage.src = "http://goallineblitz.com/images/dots/"+fcolor+"/"+position+".gif";

		var bimage = new Image();
		bimage.src = "http://goallineblitz.com/images/dots/"+bcolor+".gif";

		var canvas = document.createElement("canvas");
		canvas.setAttribute("width","16");
		canvas.setAttribute("height","16");
		var context = canvas.getContext("2d");

		if ((bimage.complete == false) || (fimage.complete == false)) {
			if (bimage.complete == false) {
				done.push(fimage.src);
			}
			if (fimage.complete == false) {
				done.push(fimage.src);
			}
		}
		else {
			context.drawImage(bimage,0,0);
			context.drawImage(fimage,0,0);
			imageData[id] = canvas;
		}
	}
	if (done.length > 0) {
		console.log("noooooo greasemonkey, no one would ever want to use worker threads...");
		console.log(done);
		setTimeout(prepareImages, 250);
	}
}

function beginPressed() {
	pausePressed();
	initialTime = null;
	currentTime = null;
	drawFrame(0,0);	
}

function rwPressed() {
	if (isPlaying == true) {
		frameMultiplier = Math.max(frameMultiplier - 0.25, 0);
		console.log(frameMultiplier);
	}
	else {
		currentTime = currentTime.setMilliseconds(currentTime.getMilliseconds() - 100);
		currentTime = new Date(currentTime);
		var diff = currentTime - initialTime;
		var frame = diff/100 * frameMultiplier;
		pct = frame - Math.floor(frame);
		frame = Math.floor(frame) % play_data.length;
		if (frame < 0) frame += play_data.length;
		drawFrame(frame, pct);
	}
}

function pausePressed() {
	console.log("pause");

	document.getElementById("pause_button").visibility = "hidden";
	document.getElementById("play_button").visibility = "visible";

	isPlaying = false;
}

function playPressed() {
	console.log("play");
	
	document.getElementById("pause_button").visibility = "visible";
	document.getElementById("play_button").visibility = "hidden";
 
	isPlaying = true;
	var t = currentTime;
	currentTime = new Date();
	initialTime = currentTime - (t-initialTime);

	render();
}

function ffPressed() {
	if (isPlaying == true) {
		frameMultiplier = frameMultiplier + 0.25;
		console.log(frameMultiplier);
	}
	else {
		currentTime = currentTime.setMilliseconds(currentTime.getMilliseconds() + 100);
		currentTime = new Date(currentTime);
		var diff = currentTime - initialTime;
		var frame = diff/100 * frameMultiplier;
		pct = frame - Math.floor(frame);
		frame = Math.floor(frame) % play_data.length;
		drawFrame(frame, pct);
	}
}

function endPressed() {
	pausePressed();
	initialTime = null;
	currentTime = null;
	drawFrame(play_data.length-1,0);	
}

function fixButtons() {
	var buttons = document.getElementsByClassName("button left");
	
	var begin = buttons[2];
	begin.addEventListener("click",beginPressed);

	var rewind = buttons[3];
	rewind.addEventListener("click",rwPressed);

	var pause = buttons[4];
	pause.addEventListener("click",playPressed);

	var play = buttons[5];
	play.addEventListener("click",pausePressed);

	var ff = buttons[6];
	ff.addEventListener("click",ffPressed);

	var end = buttons[7];
	end.addEventListener("click",endPressed);
}

function fixFrames() {
	var stime = new Date();
	var uwpd = new Array();
	for (var i=0; i<unsafeWindow.play_data.length; i++) {
		uwpd.push(new Array());
	}

	var missing = 0;
	for (var p=0; p<unsafeWindow.play_data[0].length; p++) {
		var id = unsafeWindow.play_data[0][p].id;

		for (var cf=0; cf<unsafeWindow.play_data.length; cf++) {
			var found = false;
			for (var i=0; i<unsafeWindow.play_data[cf].length; i++) {
				if (id == unsafeWindow.play_data[cf][i].id) {
					found = true;
					uwpd[cf].push(eval(uneval(unsafeWindow.play_data[cf][i])));
					break;
				}
			}
			if (!found) {
				uwpd[cf].push(eval(uneval(uwpd[cf-1][p])));
				missing++;
			}
		}
	}
	var time = new Date() - stime;
    	console.log("uwpd copy ("+missing+" missing): "+time.toFixed(0)+"ms");

	for (var p=1; p<uwpd[0].length; p++) {
		for (var f=uwpd.length-1; f>0; f--) {
			if (uwpd[f][p].icon != null) {
				for (var z=f+1; z<Math.min(uwpd.length, f+8); z++) {
					uwpd[z][p].icon = uwpd[f][p].icon;
				}
			}
		}
	}
	var time = new Date() - stime;
    	console.log("uwpd icons: "+time.toFixed(0)+"ms");

	prepareImages();

	return uwpd;
}

var frameCounter = 0;
var lastTime = 0;
var fps = [];
function measureFps() {
	frameCounter++;
        if (frameCounter > 300) {
	    var now = new Date();
	    var delta = now - lastTime;
            fps.push(frameCounter / delta);

            frameCounter = 0;
	    lastTime = now;
        }

	if (fps.length == 10) {
		console.log(fps);
		fps = [];
	}

}