let canvas;
let ctx;
let intervId;
let numInter = 0;
let tourne_bool = true;

// pour centrer la spirale
let decalX = 300;
let decalY = 300;

// pour la boucle de redessinage
let MIN_SPIR = 100;
let MAX_SPIR = 300;
let nSpir = MIN_SPIR;
let pasCroissance = 1;
let dir = "haut";
let angleDepart = 0;
let dirAngleDepart = 'gauche';
let pasAngleDepart = Math.PI / 180;
let incrementAngle = Math.PI / 60;

// pour les FPS
let filterStrength = 20;
let frameTime = 0, lastLoop = new Date(), thisLoop;


// start (body.onload)
function dessine() {
    canvas = document.getElementById("spire_id");
    ctx = canvas.getContext("2d");
    plusVite();
    intervId = setInterval(reDessine, 1);
}


// event bar espace : start/stop
$(function() {
    $(document).keydown(function(evt) {
        if (evt.keyCode === 32) {
            if (tourne_bool) {
                tourne_bool = false;
                clearInterval(intervId);
            } else {
                tourne_bool = true;
                intervId = setInterval(reDessine, 1);
            }
        }
        if (evt.keyCode === 27) {
            tourne_bool = false;
            clearInterval(intervId);
        }
    });
});


$(document).ready(function() {

    // pour le Full Screen
    $('.fs-button').on('click', function() {
        let elem = document.getElementById('fullscreen');
        if (document.webkitFullscreenElement) {
            decalX = 300;
            decalY = 300;
            $('#spire_id').attr('height', '600').attr('width', '600');
            $('.fs-button').css('left', '570px');
            $('.plus_btn').css('left', '540px');
            $('.moins_btn').css('left', '510px');
            $('.stop_btn').css('left', '480px');

            document.webkitCancelFullScreen();
        } else {
            elem.webkitRequestFullScreen();
            decalX = screen.width / 2;
            decalY = screen.height / 2;
            $('#spire_id').attr('height', screen.height).attr('width', screen.width);
            $('.fs-button').css('left', (screen.width - 30) + 'px');
            $('.plus_btn').css('left', (screen.width - 60) + 'px');
            $('.moins_btn').css('left', (screen.width - 90) + 'px');
            $('.stop_btn').css('left', (screen.width - 120) + 'px');
        }
    });

    $('.moins_btn').on('click', function() {
        moinsVite();
    });

    $('.plus_btn').on('click', function() {
        plusVite();
    });

    $('.stop_btn').on('click', function() {
        stopSpir();
    });
});

function plusVite() {
    if (!tourne_bool) {
        tourne_bool = true;
        intervId = setInterval(reDessine, 1);
    }
    pasAngleDepart += Math.PI / 30;
}
function moinsVite() {
    if (!tourne_bool) {
        tourne_bool = true;
        intervId = setInterval(reDessine, 1);
    }
    pasAngleDepart -= Math.PI / 30;
}

function stopSpir() {
    pasAngleDepart = 0;
    tourne_bool = false;
    clearInterval(intervId);
}

function reDessine() {
    // position du point central
    if (angleDepart >= 8 * Math.PI) {
        dirAngleDepart = 'droite';
    } else if (angleDepart < 0) {
        dirAngleDepart = 'gauche';
    }

    if (dirAngleDepart === 'droite') {
        angleDepart = 0;
        dirAngleDepart = 'gauche';
    } else {
        angleDepart += pasAngleDepart;
    }

    //
    dessineSpirale(nSpir); //(nSpir - MIN_SPIR) / 3 + 10);
}




function dessineSpirale(nbCercles) {
    // efface
    canvas.width = canvas.width;

    // on centre
    ctx.translate(decalX, decalY);

    //ctx.fillStyle = "red";
    //ctx.beginPath();
    ctx.moveTo(0, 0);

    // init
    let incrementTaille = 0.9;
    let theta = angleDepart;
    let taille = 0;

    // loop
    let maxLoop = nbCercles * Math.PI;

    // définit la taille du cercle
    let k = (nbCercles / MAX_SPIR) * 1;
    // la spirale    
    while (theta < maxLoop) {
        ctx.lineTo(k * taille * Math.cos(theta), k * taille * Math.sin(theta));
        theta += incrementAngle;
        taille += incrementTaille;
    }

    let x0 = k * (taille - incrementTaille) * Math.cos(theta - incrementAngle);
    let y0 = k * (taille - incrementTaille) * Math.sin(theta - incrementAngle);

    // evite un trait entre le premier et le dernier du coup précédent...
    ctx.moveTo(0, 0);

    // on repart � 90�
    theta = angleDepart + Math.PI / 2;
    taille = 0;
    // la spirale
    while (theta < maxLoop) {
        ctx.lineTo(k * taille * Math.cos(theta), k * taille * Math.sin(theta));
        theta += incrementAngle;
        taille += incrementTaille;
    }

    // ferme le tout
    let ptitDecal = 10;
    ctx.lineTo(x0, y0);
    ctx.stroke();

// shadow
    ctx.shadowOffsetX = 4;
    ctx.shadowOffsetY = 4;
    ctx.shadowBlur = 5;
    ctx.shadowColor = 'rgba(0,0,0,0.6)';

    // calc FPS
    let thisFrameTime = (thisLoop = new Date) - lastLoop;
    frameTime += (thisFrameTime - frameTime) / filterStrength;
    lastLoop = thisLoop;

    let text = (1000 / frameTime).toFixed(1) + " fps";
    ctx.font = "12pt Verdana";
    ctx.textAlign = "left";
    ctx.textBaseline = 'top';
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.fillText(text, -decalX, -decalY);
}
