//////////////////////////////////////////////////
//ertdfgcvb - head 3
//2010
//////////////////////////////////////////////////
//defined in header:
//var templateURL; 
//var colorA;
//var colorB;
//////////////////////////////////////////////////

var WIDTH = 1008;
var HEIGHT = 181;
var OFFSETX = 0;
var OFFSETY = 0;
var mouseX = -1000;
var mouseY = -1000;
var frameCount = 0;

var canvas;
var context;

var colorA0, colorB0;
var sx = 0;
var sy = 0;
var e;

//////////////////////////////////////////////////
window.onload = function(){
	setup();
	var interval = setInterval(draw, 1000 / 25);
}

//////////////////////////////////////////////////
function setup() {

	canvas = document.getElementById("headerCanvas");
	canvas.width = WIDTH;
	canvas.height = HEIGHT;
	context = canvas.getContext("2d");
	
	//canvas offset
	var element = canvas; 
	if (element.offsetParent) {
		do {
			OFFSETX += element.offsetLeft;
			OFFSETY += element.offsetTop;
		} while (element = element.offsetParent);
	}
	
	//colors
	var c = parseInt("0x" + colorA.substring(1,7));
	var r = red(c);
	var g = green(c);
	var b = blue(c);
	colorA0 = 'rgba('+r+','+g+','+b+',0)'; 

	c = parseInt("0x" + colorB.substring(1,7));
	r = red(c);
	g = green(c);
	b = blue(c);
	colorB0 = 'rgba('+r+','+g+','+b+',0)'; 

	
	
	//font
	e = new Efont(context);
	e.setColor(colorA);
	e.setVerticalAlign(e.LEFT); //to do: static…?
	e.setHorizontalAlign(e.TOP);

	//events
	document.addEventListener('mousemove', mouseMoveHandler, false);
	
 }

//////////////////////////////////////////////////
function draw() {  
	
	context.clearRect(0,0,WIDTH,HEIGHT);
	
	var fontHeight = 64;
	var num = 7;
	var ox = 256;
	var oy = 16;
	var w = fontHeight / 2 * 9 + fontHeight / 4 * 8;
	var h = fontHeight;
	var cx = ox + w / 2;
	var cy = oy + h / 2;
	var maxExt = fontHeight / 4;
	
	var dx = Math.max(0, Math.min(maxExt, (mouseX - cx) / num));
	var dy = Math.max(0, Math.min(maxExt, (mouseY - cy) / num));

	sx += (dx - sx) * 0.2;
	sy += (dy - sy) * 0.2;

	e.setFontHeight(fontHeight);
	e.setColor(colorA);
	for (var i=0; i<num; i++){
		var px = Math.round(ox + i * sx);
		var py = Math.round(oy + i * sy);
		//if (i==num-1) e.setColor(colorB);
		e.text("ERTDFGCVB", px, py);
	}
	frameCount++;
}

//////////////////////////////////////////////////
function mouseMoveHandler(e){
	mouseX = e.pageX - OFFSETX;
	mouseY = e.pageY - OFFSETY;
}

//////////////////////////////////////////////////

function red (c) {
	return (c & 0x00ff0000) >>> 16 / 255 * 255;
};

function green (c) {
	return (c & 0x0000ff00) >>> 8 / 255 * 255;
};

function blue (c) {
	return (c & 0x000000ff) / 255 * 255;
};