const PageTransition = new (function () {

    const pixelSpeed = 150; // speed at which pixels are drawn
    const pixelW = 10;
    const pixelH = 10;
    const colCount = CANVAS_WIDTH / pixelW; // 80
    const rowCount = CANVAS_HEIGHT / pixelH; // 60
    const pixelCount = colCount * rowCount;
    const colorArray = ["#ff3377", "#ee00aa", "#7744cc", "#4466cc", "#88bbdd"];

    let pixelArr = new Array(pixelCount).fill(false);
    let numberArray = Array.apply(null, {length: pixelCount}).map(Number.call, Number)

    this.draw = function () {
        // if (!transitioning) return;
        // console.log('draw!');
        this.pixelate(pixelSpeed, colorArray);
    }

    this.getGridPos = function (arrayPosition,factor) {
        return arrayPosition % factor;
    }

    /**
     * Add color(s) to random positions
     */
    this.pixelate = function (amount,colors) {

        if (numberArray.length > 0) {
            for (var i=0; i<amount; i++) {
                let color = colors[Math.floor(Math.random()*colors.length)];
                var x = numberArray.splice(Math.floor(Math.random()*numberArray.length),1);
                pixelArr[x] = color;
            }
        } else {
            this.end();
        }


        this.render();
    }

    /**
     * Render pixels
     */
    this.render = function () {
        for (let i=0;i<pixelArr.length;i++) {
            if (pixelArr[i]) {
                colorRect(
                    this.getGridPos(i,colCount)*pixelW,
                    Math.floor((i/colCount))*pixelH,
                    pixelW,
                    pixelH,
                    pixelArr[i]
                );
            }
        }
    }

    this.end = function () {
        pixelArr.map((val, i) => pixelArr[i] = "rgba(225,225,225,0)");
    }

    // create pixels randomly on the screen to create flimmer effect
    this.flimmer = function () {
        pixelArr.map((val, i) => pixelArr[i] = "rgba(225,225,225,0.2)");

        for (j=0;j<pixelArr.length;j++) {
            var row = Math.floor(j / (CANVAS_WIDTH/pixelW));
            if (j % 80 == 0) {
                colorRect(pixelW*(Math.floor(Math.random()*80)),row*pixelH, pixelW,pixelH, pixelArr[j]);
            }
        }
    }

    this.heaveryFlimmer = function () {
        for (j=0;j<pixelArr.length;j++) {
            let col = Math.floor(Math.random()*80);
            let row = Math.floor(j/(CANVAS_WIDTH/pixelW));
            colorRect(col*pixelW,row*pixelH, pixelW,pixelH, pixelArr[j]);
        }
    }

})();