"use strict";

(function()
{
    window.addEventListener("load", main);
}());
var tempo;
var left=false;
var right=false;
var up=false;
var down=false;
function main()
{
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var spArray;  //sprite array

    canvas.addEventListener("initend", initEndHandler);
    init(ctx);  //carregar todos os componentes

    //funções locais para gestão de eventos
    function initEndHandler(ev)
    {
        //instalar listeners do rato
        ctx.canvas.addEventListener("click", cch);
        window.addEventListener("keydown",teste);
        window.addEventListener("keyup",KeyUp);
        spArray = ev.spArray;
        //iniciar a animação
        startAnim(ctx, spArray);
    }

    var cch = function(ev)
    {
        canvasClickHandler(ev, ctx, spArray);
    }
    var teste = function(ev)
    {
        baixo(ev, ctx, spArray);
    }
}


//init: carregamento de componentes
function init(ctx)
{
    var nLoad = 0;
    var totLoad = 2;
    var spArray = new Array(totLoad);
    var img;

    //estilos de texto
    ctx.fillStyle = "#993333";
    ctx.font = "12px helvetica";
    ctx.textBaseline = "bottom";
    ctx.textAlign = "center";
    //carregar imagens e criar sprites
    var img = new Image();

    img.addEventListener("load", imgLoadedHandler);
    img.id="car";
    img.src = "resources/car.png";  //dá ordem de carregamento da imagem
    var img2 = new Image();

    img2.addEventListener("load", imgLoadedHandler);
    img2.id="turbo";
    img2.src = "resources/turbo.png";  //dá ordem de carregamento da imagem
    function imgLoadedHandler(ev)
    {
        var img = ev.target;
        console.log(img.id);
        switch(img.id){
            case "car":
                var nw = img.naturalWidth;
                var nh = img.naturalHeight;
                var sp = new SpriteImage(0, 0, nw/4, nh/4, 1, false, img);
                spArray[0] = sp;
                break;

            case "turbo":

                var nw = img.naturalWidth;
                var nh = img.naturalHeight;
                var sp = new SpriteImage(250,250, nw*1.5, nh*1.5, 1, false, img);
                spArray[1] = sp;
                break;


        }

        nLoad++;

        if (nLoad == totLoad)
        {
            var ev2 = new Event("initend");
            ev2.spArray = spArray;
            ctx.canvas.dispatchEvent(ev2);
        }
    }
}


//iniciar animação
function startAnim(ctx, spArray)
{
    draw(ctx, spArray);
    animLoop(ctx, spArray);
    tempo = performance.now();
}


//desenhar sprites
function draw(ctx, spArray)
{
    var dim = spArray.length;

    for (let i = 0; i < dim; i++)
    {
        spArray[i].draw(ctx);
    }
}


//apagar sprites
function clear(ctx, spArray)
{
    var dim = spArray.length;

    for (let i = 0; i < dim; i++)
    {
        spArray[i].clear(ctx);
    }
}


//-------------------------------------------------------------
//--- controlo da animação: coração da aplicação!!!
//-------------------------------------------------------------
function animLoop(ctx, spArray)
{
    var al = function(time)
    {
        animLoop(ctx, spArray);
    }
    var reqID = window.requestAnimationFrame(al);
    var b = performance.now();
    render(ctx, spArray, reqID,b);
}


//resedenho, actualizações, ...
function render(ctx, spArray, reqID, dt)
{
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height;

    //apagar canvas
    ctx.clearRect(0, 0, cw, ch);

    //animar sprites
    var sp = spArray[0];
    if (sp.x + sp.width < cw)
    {
        if (sp.x + sp.width + sp.speed > cw)
            sp.x = cw - sp.width;//para para depois mais embaixo por o clikable a true
        else
            sp.x = sp.x + sp.speed;
    }
    else
    {
        window.cancelAnimationFrame(reqID);
        /*console.log((ctx.canvas.width)/2);
        spArray[1].x=(ctx.canvas.width)/2;
        spArray[1].y=(ctx.canvas.length)/2; */
        //make clickable
        sp.clickable = true;
    }


    //redesenhar sprites e texto
    var txt = "Time: " + Math.round(dt-tempo) + " msec";
    ctx.fillText(txt, cw/2, ch);

    draw(ctx, spArray);
}


//-------------------------------------------------------------
//--- interacção com o rato
//-------------------------------------------------------------
function canvasClickHandler(ev, ctx, spArray)
{
    if (spArray[0].clickedBoundingBox(ev))
    {
        spArray[0].reset(ev, ctx);
        animLoop(ctx, spArray);
        tempo=performance.now();
    }
}
function baixo(ev,ctx,spArray){
    var keyName=ev.keyCode;
    var sp=spArray[1];
    console.log(sp.img.id);
    console.log(keyName);
    switch(keyName){
        case 38:
            console.log("entrou");
            up=true;
            render2(ev,ctx,sp);
            break;
        case 40:
            down=true;
            break;
        case 37:
            left=true;
            render2(ev,ctx,sp);
            break;
        case 39:
            right=true;
            break;
    }
    /*  switch(keyName){
        case "Arrowup":
            console.log("entrou");
            up=true;
            render2(ev,ctx,sp);
            break;
        case "Arrowdown":
            down=true;
            break;
        case "Arrowleft":
            left=true;
            render2(ev,ctx,sp);
            break;
        case "Arrowright":
            right=true;
            break;
    }*/
}
function render2(ev,ctx,sp){
        var keyName=ev.keyCode;
        switch(keyName){
            case 38:
                console.log("we in bois");
                sp.y=sp.y-sp.speed;
                break;
            case 37:
                sp.x=sp.x-sp.speed;
                break;
            }
    }
function KeyUp(ev){
    var keyName=ev.key;
    switch(keyName){
        case "ArrowUp":
            up=false;
            break;
        case "Arrowdown":
            down=false;
            break;
        case "Arrowleft":
            left=false;
            break;
        case "Arrowright":
            right=false;
            break;
    }
}