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

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

var canvas;
var context;

var e;

//////////////////////////////////////////////////
//document.addEventListener("DOMContentLoaded", setup, false);
window.onload = function(){
	setup();
	var interval = setInterval(draw, 1000 / 35);
}

//////////////////////////////////////////////////
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);
	}
	
	//font
	e = new Efont(context);
	e.setColor(colorA);
	e.setVerticalAlign(e.LEFT); //to do: static…?
	e.setHorizontalAlign(e.TOP);
 }

//////////////////////////////////////////////////
function draw() {  
	
	context.clearRect(0,0,WIDTH,HEIGHT);

	var str = "ERTDFGCVB";
	var fontHeight = 12;
	var fontWidth = fontHeight / 2;
	var ox = 256;
	var oy = 3;
	var lineHeight = 22;
	var lineOffsetY = 5;
	var w = WIDTH - ox;
	var ampli = (w - fontWidth) / 2;
	var offs = - Math.PI/2;

	e.setFontHeight(fontHeight);
	e.setColor(colorA);
	
	context.fillStyle = colorA;
	
	for (var i=0; i<str.length; i++){
		
		var lx = ox; 
		var ly = oy + (i+1) * lineHeight;
		context.fillRect(lx, ly, w, 1);
		
		var px = Math.floor(ox + Math.sin(((i+4) * frameCount) * 0.0015 + offs) * ampli + ampli);
		var py = oy + i * lineHeight + lineOffsetY;
		e.text(str.charAt(i), px, py);
	}
	
	frameCount++;
}