var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var mouse = {};

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
};

canvas.addEventListener('mousemove', function(evt) {
    mouse = getMousePos(canvas, evt);
    console.log("e");
}, false);



CONFIG = {
    debug: false
};


BOX = function(){
    this.x = 0;
    this.y = 0;
    this.width = 100;
    this.height = 100;

};

BOX.prototype = {

    move: function(x,y,delta){
    if (CONFIG.debug)
        console.log("BOX:: move()");

    this.x = x * delta;
    this.y = y * delta;
    },

    render:  function(){
        if (CONFIG.debug)
            console.log("BOX:: render()");

        if (CONFIG.debug)
            console.log(this.x,this.y,this.width,this.height);

        ctx.beginPath();
        ctx.rect(this.x,this.y,this.width,this.height);
        ctx.stroke();
    }
};


FRAME = function() {
    this.elements = [];
};

FRAME.prototype = {
    add: function(obj){
        this.elements.push(obj);
    },
    clear: function(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    },

    step: function(delta){
        this.clear();

        for(var i=0; i < this.elements.length; i++){

            if( this.elements[i].render){
                this.elements[i].move(mouse.x, mouse.y,delta);
                this.elements[i].render();
            }
        }
    }
};


ANIMATION = {
    lastTick : null,
    currentTick : null,
    elem: null,

    init: function(){
        this.elem = new FRAME();
        this.elem.add(new BOX());

        ANIMATION.lastTick = null;
        ANIMATION.currentTick = null;

        if (CONFIG.debug)
            console.log("ANIMATION:: init()");
    },

    step: function(){
            if (ANIMATION.lastTick == null) {
                if (CONFIG.debug)
                    console.log("ANIMATION:: set lastTick: first Tickness");

                ANIMATION.lastTick = Date.now();
            }

        ANIMATION.currentTick = Date.now();
        var delta =  (ANIMATION.lastTick - ANIMATION.currentTick);
        ANIMATION.lastTick = ANIMATION.currentTick;

        this.elem.step(delta);
    }
};


function init(){

    ANIMATION.init();

};


function renderFrame(){

    ANIMATION.step();
    renderFrame();
    window.requestAnimationFrame(renderFrame);
};


window.onload = function () {


    init();
    renderFrame();
};