// Frank's Lab Image Effects
//  https://www.youtube.com/watch?v=UeZ1pTg_nMo

// color palette: https://coolors.co/palettes/popular/5%20colors

// ["264653","2a9d8f","e9c46a","f4a261","e76f51"]
// https://coolors.co/palette/264653-2a9d8f-e9c46a-f4a261-e76f51

//
// Firefox seems to have an issue with rendering.  Google works fine.
//

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = 1024;
canvas.height = 682;


class Cell {

    constructor(effect, x, y) {
        this.effect = effect;
        this.x = x;
        this.y = y;
        this.width = this.effect.cellWidth;
        this.height = this.effect.cellHeight;
        this.slideX = 0;
        this.slideY = 0;
        this.image = document.getElementById('projectImage');
    }

    draw(context) {
        context.drawImage(this.image, this.x + this.slideX, this.y + this.slideY, this.width, this.height
            , this.x, this.y, this.width, this.height);
        // context.drawImage(this.image, 0, 0);
        context.strokeRect(this.x, this.y, this.width, this.height);
    }

    update() {
        // this.slideX = Math.random() * 10 - 10;
        this.slideX -= 5;
    }

}

class Effect {
    constructor(canvas) {
        this.canvas = canvas;
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.numCols = 64;
        this.numRows = 31;
        this.cellWidth = this.width / this.numCols;
        this.cellHeight = this.height / this.numRows;
        this.imageGrid = [];
        this.createGrid();
        // this.cell = new Cell(this, 0, 0);
        
        // console.log(this.imageGrid);
    }

    createGrid() {
        for(let y = 0; y < this.height; y += this.cellHeight) {
            for(let x = 0 ; x < this.width; x += this.cellWidth) {
                this.imageGrid.push(new Cell(this, x, y));
            }
        }
    }

    calculateGrayAmount(red, green, blue) {
        // determine the grayAmount from the color at the pixel
        // ref: https://www2.cs.uic.edu/~i101/labs/lab8.html
        return Math.floor(red * 0.299 + green * 0.587 + blue * 0.114);
    }

    render(context) {
        // this.cell.draw(context);
        this.imageGrid.forEach(cell=> {
            // cell.update();
            cell.draw(context);
        })
    }

}

const effect = new Effect(canvas);
// console.log(effect);
// effect.render(ctx);

function animate() {
    effect.render(ctx);
    requestAnimationFrame(animate);
}

animate();

/*
TODO:
1. For each cell:
    a. average red, green and blue colors
    b. calculate gray amount
    c. determine palette color
        i.  0 - 50, 51 - 101, 102 - 152, 153 - 203, 204 - 255
*/