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

var WIDTH = 1040;
var HEIGHT = 200;
var OFFSETX = 0;
var OFFSETY = 0;
var mouseX = -1000;
var mouseY = -1000;
var frameCount = 0;

var canvas;
var context;

var spiros;
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);
    }
	
    //spiros
    spiros = [];
    var ox = 0;
    var oy = 10;
    var nx = 16;
    var ny = 3;
    var sx = 16;
    var sy = 16;
    var w = 48;
    var h = 48;
	
    for (var j=0;j<ny;j++) {
        for (var i=0;i<nx;i++) {
            var x = ox + i * (w + sx) + w/2;
            var y = oy + j * (h + sx) + h/2;
            var s = new Hypocicloyd2(context, x, y);
            spiros.push(s);
        }
    }

    //font
    e = new Efont(context);
    e.setColor(colorB);
    e.setFontHeight(24);
    e.setVerticalAlign(e.CENTER); //to do: static…?
    e.setHorizontalAlign(e.CENTER);

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

}

//////////////////////////////////////////////////
function draw() {  

    var c = toRGB(colorBG, 0.3);
    context.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", "+c.a+")";
    context.fillRect(0,0,WIDTH,HEIGHT);
    context.strokeStyle = colorA;
    context.fillStyle = colorA;

    for (var i=0; i<spiros.length; i++){
        spiros[i].alter(mouseX, mouseY);
        spiros[i].step();
    }
    /*
	context.shadowOffsetX = 0;  
	context.shadowOffsetY = 0;  
	context.shadowBlur = 1;
	context.shadowColor = 'rgb(255,0,0)';  
	*/
    context.save();
    context.translate(32,32);
    e.text("E", spiros[0].cx, spiros[0].cy);
    e.text("R", spiros[1].cx, spiros[1].cy);
    e.text("T", spiros[2].cx, spiros[2].cy);
    e.text("D", spiros[3].cx, spiros[3].cy);
    e.text("F", spiros[4].cx, spiros[4].cy);
    e.text("G", spiros[5].cx, spiros[5].cy);
    e.text("C", spiros[6].cx, spiros[6].cy);
    e.text("V", spiros[7].cx, spiros[7].cy);
    e.text("B", spiros[8].cx, spiros[8].cy);
    context.restore();

}
//////////////////////////////////////////////////
function Hypocicloyd2(context, cx, cy){
	
    this.context = context;
    this.cx = cx;
    this.cy = cy;
	
    this.count = 0;
    this.inc1 = (Math.random() + 1.4) * randomSign();
    this.inc2 = (Math.random() + 1.4) * randomSign();
    this.r1 = (5 + Math.random()*10) * randomSign();
    this.r2 = (2 + Math.random()*6) * randomSign();
    this.r1mul = (Math.random()*0.003 + 0.001) * randomSign();
    this.r2mul = (Math.random()*0.003 + 0.001) * randomSign();
    this.col = colorA;

    if (typeof(_Hypocicloyd2_prototype_called_) == 'undefined'){
        _Hypocicloyd2_prototype_called_ = true;
        Hypocicloyd2.prototype.step = step;
        Hypocicloyd2.prototype.alter = alter;
    }

    //----------------------------------------------------------------
    function alter(mx, my){
        var d2 = Math.pow(mx-this.cx, 2) + Math.pow(my-this.cy, 2);
        if (d2 < 6000) {
            this.col = colorB;
        } else {
            this.col = colorA;
        }
    }
    //----------------------------------------------------------------
    function step(){
        this.context.fillStyle = this.col;

        for (var j=0; j<45; j++){
            var a1 = this.inc1 * this.count;
            var a2 = this.inc2 * this.count;
            var R = this.r1 + Math.cos(this.count * this.r1mul) * this.r1 * 0.33;
            var r = this.r2 + Math.cos(this.count * this.r2mul) * this.r2 * 0.33;
            var x = this.cx + Math.cos(a1) * R + Math.cos(a2) * r;
            var y = this.cy + Math.sin(a1) * R + Math.sin(a2) * r;
            this.context.fillRect(x, y, 1, 1);
            this.count++;
        }
    }
}
//////////////////////////////////////////////////
function randomSign(){
    if (Math.random() < 0.5) return -1;
    else return 1;
}

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

//////////////////////////////////////////////////
function toRGB(color, alpha) {
    var r, g, b, a, html;
    html = color;

    // Parse out the RGBA values from the HTML Code
    if (html.substring(0, 1) === "#"){
        html = html.substring(1);
    }

    if (html.length === 3 || html.length === 4)
    {
        r = html.substring(0, 1);
        r = r + r;

        g = html.substring(1, 2);
        g = g + g;

        b = html.substring(2, 3);
        b = b + b;

        if (html.length === 4) {
            a = html.substring(3, 4);
            a = a + a;
        }
        else {
            a = "ff";
        }
    }
    else if (html.length === 6 || html.length === 8)
    {
        r = html.substring(0, 2);
        g = html.substring(2, 4);
        b = html.substring(4, 6);
        a = html.length === 6 ? "ff" : html.substring(6, 8);
    }

   

    // Convert from Hex (Hexidecimal) to Decimal
    r = parseInt(r, 16);
    g = parseInt(g, 16);
    b = parseInt(b, 16);
    a = parseInt(a, 16);

    if (alpha != undefined){
        a = alpha;
    }

    return {
        r: r,
        g: g,
        b: b,
        a: a
    };
}