var TV = Array();

var static = new Image();
static.src = '/img/static.png';

function TVObjectBasic(width, height) {
	this.elem = document.createElement('img');
	this.elem.style.width = width + 'px';
	this.elem.style.height = height + 'px';
	this.elem.style.border = '1px solid black';

	this.setImage = function(filename) {
		this.elem.src = filename;
	}
	this.draw = function() {};
	this.start = function() {};
	this.setStatic = function() {};
}

function TVObject(width, height, opaque) {
	this.w = width;
	this.h = height;
	this.opaque = opaque;
	this.showStaticFlag = true;

	this.img_fallback = function() {
		return this;
	};

	this.elem = document.createElement('canvas');
	this.elem.width = width;
	this.elem.height = height;
	try {
		this.ctx = this.elem.getContext('2d');
	} catch(e) {
		return new TVObjectBasic(width, height);
	}
	this.ctx.fillStyle = 'white';

	this.frame = document.createElement('canvas');
	this.frame.width = width;
	this.frame.height = height;
	var g = this.frame.getContext('2d');
	var p = -(width+height) * 0.015;
	var m = 1.5;
	g.lineWidth = 2.0;
	g.fillStyle = 'white';

	this.frameDraw = function(g) {
		g.moveTo(m, height/2);
		g.bezierCurveTo(m, p, p, m, width/2, m);
		g.bezierCurveTo(width - p, m, width - m, p, width - m, height/2);
		g.bezierCurveTo(width - m, height - p, width - p, height - m, width/2, height - m);
		g.bezierCurveTo(p, height - m, m, height - p, m, height/2);
	}

	this.frameDraw(g);
	g.stroke();

	this.genStatic = function() {
		this.static = Array();
		for (var n = 0; n < 4; n++) {
			var s = document.createElement('canvas');
			s.width = this.w;
			s.height = this.h;
			var g = s.getContext('2d');
			this.frameDraw(g);
			g.clip();
			for (var i = 0; i < this.w; i += 32) {
				for (var j = 0; j < this.h; j += 32) {
					var dx = Math.floor(Math.random() * 208);
					var dy = Math.floor(Math.random() * 148);
					g.drawImage(static, dx, dy, 32, 32, i, j, 32, 32);
				}
			}
			this.static.push(s);
		}
		this.static_count = Math.floor(Math.random() * this.static.length);
	};
	if (static.complete)
		this.genStatic();

	this.view_image = null;
	this.tuning_delay = 0;

	this.drawPreload = function() {
		if (this.static == undefined) {
			if (static.complete)
				this.genStatic();
			else
				return;
		} else if (this.static.length != 4) {
			return;
		}
		this.draw = this.drawReal;
	}
	this.draw = this.drawPreload;

	this.drawReal = function() {
		if (this.opaque) {
			this.ctx.fillStyle = 'white';
			this.ctx.fillRect(0, 0, this.w, this.h);
		} else {
			this.ctx.clearRect(0, 0, this.w, this.h);
		}

		if (this.tuning_delay == 0 && this.view_image) {
			this.ctx.drawImage(this.view_image, 0, 0);
		} else {
			this.tuning_delay--;
		}

		if (this.showStaticFlag) {
			this.ctx.save();
			if (this.tuning_delay == 0 && this.view_image)
				this.ctx.globalAlpha = 0.2;
			this.ctx.drawImage(this.static[this.static_count], 0, 0);
			this.ctx.restore();
		}

		this.ctx.drawImage(this.frame, 0, 0);

		this.static_count += 1;
		this.static_count %= this.static.length;
	};

	this.setImage = function(filename) {
		var img = new Image();
		this.view_image = document.createElement('canvas');
		this.view_image.width = this.w;
		this.view_image.height = this.h;
		var obj = this;  // stupid closure tricks
		img.onload = function() {
			var g = obj.view_image.getContext('2d');
			obj.frameDraw(g);
			g.clip();
			g.drawImage(img, 0, 0, obj.w, obj.h);
		}
		this.tuning_delay = Math.floor(Math.random() * 10);
		img.src = filename;
	};

	this.setStatic = function(f) {
		this.showStaticFlag = f;
	}

	this.start = function(id) {
		if (id != undefined) {
			TV[id] = this;
		} else {
			TV.push(this);
		}
	};

	this.stop = function() {
		for (var i in TV) {
			if (TV[i] == this) {
				TV[i] = undefined;
			}
		}
	};
}

var taglist = document.body.getElementsByTagName('tv');

for (var i = 0; i < taglist.length; i++) {
	var tv = taglist.item(i);

	var width = tv.getAttribute('width');
	if (width) 
		width = parseInt(width);
	else
		width = 160;
	var height = tv.getAttribute('height');
	if (height) 
		height = parseInt(height);
	else
		height = 120;

	var obj = new TVObject(width, height, tv.getAttribute('opaque') == 'true');
	obj.setImage(tv.getAttribute('src'));

	for (var j = 0; j < tv.attributes.length; j++) {
		var name = tv.attributes.item(j).nodeName;
		obj.elem.setAttribute(name, tv.getAttribute(name));
	}

	tv.parentNode.replaceChild(obj.elem, tv);

	var id = obj.elem.getAttribute('id');
	obj.start(id);
}

var drawThread = null;
var drawTimeout = 100;
var tooslow = 0;
var drawTime;

function drawLoop() {
	for (var i in TV) {
		TV[i].draw();
	}
	var now = (new Date()).getTime();
	if (drawTime) {
		var dt = now - drawTime;
		if (dt > 250) tooslow++
		else tooslow = 0;
		if (tooslow == 5) drawTimeout = 1000;
	}
	drawTime = now;
	drawThread = setTimeout(drawLoop, drawTimeout);
}

function startDrawThread() {
	drawLoop();
}

function stopDrawThread() {
	clearTimeout(drawThread);
}

startDrawThread();