var canvas;
var WIDTH, HEIGHT;
var ctx;
var color = '#4a4a4b';

var logo;
var initialTime;
var animations;

var mouseover;


function Animation() {
    this.x = 0;
    this.y = 0;
    this.width = 0;
    this.height = 0;
    this.start = 0;
    this.stop = 0;
    this.equation = 0;
    this.img = null;
    this.anim = function(dt) {
        if (dt >= this.start && dt <= this.stop) {
            this.img.style.display = 'block';
            this.equation(dt);
        } else if (dt > this.stop) {
            this.equation(this.stop);
        }
    }
}

function draw() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    var now = new Date().getTime();
    var dt = (now - initialTime) / 1000;

    if (dt <= 1) {
        color = 'rgba(109, 109, 109, '+dt+')';
    } else {
        color = 'rgba(109, 109, 109, 1)';
    }

    ctx.fillStyle = '#fff';
    var grad = ctx.createRadialGradient(WIDTH/2, HEIGHT/2, 0, WIDTH/2, HEIGHT/2, 500);
    grad.addColorStop(0, color);
    grad.addColorStop(1, '#000');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    for (i = 0; i < animations.length; i++) {
        animations[i].anim(dt);
        ctx.drawImage(animations[i].img, animations[i].x, animations[i].y, animations[i].width, animations[i].height);
    }
}


function update() {

}


function cycle() {
    update();
    draw();

    var cycleDelay = 1000/30; // 30 FPS
    setTimeout(cycle, cycleDelay);
}

function bindKeys() {
    /*
    canvas.onmouseover = function(e) {
        mouseover = true;
        color = '#8b8b8b';
    }

    canvas.onmouseout = function(e) {
        mouseover = false;
        color = '#4a4a4b';
    }

    canvas.onclick = function(e) {
        anim.start = 0;
        anim.stop = 1;
        anim.equation = function(dt) { this.x = 933 * (dt) * (dt) + 725; };

        anim1.start = 0;
        anim1.stop = 1;
        anim1.equation = function(dt) { this.x = -1440 * dt; };

        anim2.start = 0;
        anim2.stop = 1;
        anim2.equation = function(dt) { this.x = -3935  * dt; }; 
        initialTime = new Date().getTime(); 
    }
    */
}

function init() {
    canvas = document.getElementById('canvas');
    if (canvas == null) {
      return null;
    }
    mouseover = false;
    WIDTH = canvas.width;
    HEIGHT = canvas.height;
    ctx = canvas.getContext('2d');
    animations = new Array();

    bindKeys();

    logo = document.createElement('img');
    logo.src = '/images/logoa.png';
    logo.onload = function() {
        anim = new Animation();
        anim.x = -300;
        anim.y = 0;
        anim.width = 233;
        anim.height = 331;
        anim.start = 1;
        anim.stop = 2;
        anim.img = logo;
        anim.equation = function(dt) { this.x = 233 * (dt - 2) * (dt - 2) + 725; };
        animations.push(anim);
        
        logo1 = document.createElement('img');
        logo1.src = '/images/txt1.png';
        logo1.onload = function() {
            anim1 = new Animation();
            anim1.x = -476;
            anim1.y = 145;
            anim1.width = 476;
            anim1.height = 27;
            anim1.start = 1.6;
            anim1.stop = 2;
            anim1.img = logo1;
            anim1.equation = function(dt) { this.x = 1440 * dt - 2780; };
            animations.push(anim1);

            logo2 = document.createElement('img');
            logo2.src = '/images/txt2.png';
            logo2.onload = function() {
                anim2 = new Animation();
                anim2.x = -687;
                anim2.y = 175;
                anim2.width = 687;
                anim2.height = 28;
                anim2.start = 1.9;
                anim2.stop = 2.1;
                anim2.img = logo2;
                anim2.equation = function(dt) { this.x = 3935 * dt - 8163.5; };
                animations.push(anim2);
            }
        }
    }

    initialTime = new Date().getTime();

    cycle();
}

setTimeout(init, 1);