// Friendship Bracelet Color Changer
// Version 1.0
// Bookmarklet:
// javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://gist.githubusercontent.com/aopell/bb82416cd9fab6f6ce8577875084dfa4/raw/friendship-bracelets.js' })();

(function () {
    let image = document.querySelector(".pattern_img");
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;

    let ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, image.width, image.height);

    let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    console.log(imgData.data);

    let colors = new Set();

    for (var i = 0; i < imgData.data.length; i += 4) {
        let x = (i / 4) % canvas.width;
        let y = (i / 4) / canvas.width;
        let r = imgData.data[i];
        let g = imgData.data[i + 1];
        let b = imgData.data[i + 2];
        let rgb = r * (16 ** 4) + g * (16 ** 2) + b;
        if (x > 10 && !colors.has(rgb)) {
            let hexCode = `#${rgb.toString(16).padStart(6, "0")}`.toUpperCase();
            colors.add(rgb);
        }
    }

    let container = image.parentElement;
    let p = document.createElement("p");
    container.prepend(p);
    p.style.margin = 0;
    p.style.marginBottom = "10px";

    let colormap = {};

    for (let color of Array.from(colors)) {
        colormap[color] = color;
        let hexCode = `#${color.toString(16).padStart(6, "0")}`;

        let colorPicker = document.createElement("input");
        colorPicker.type = "color";
        colorPicker.dataset.color = color;
        colorPicker.value = hexCode;
        colorPicker.addEventListener("input", event => {
            colormap[color] = Number.parseInt(colorPicker.value.substring(1), 16);
            updateImage();
        });

        p.appendChild(colorPicker);
    }

    container.appendChild(canvas);
    image.style.display = "none";

    function updateImage() {
        let data = imgData.data.slice();
        for (var i = 0; i < data.length; i += 4) {
            let r = data[i];
            let g = data[i + 1];
            let b = data[i + 2];
            let rgb = r * (16 ** 4) + g * (16 ** 2) + b;
            let mapped = colormap[rgb];
            if (mapped !== undefined) {
                let mr = (mapped / 256 / 256) % 256;
                let mg = (mapped / 256) % 256;
                let mb = mapped % 256;

                data[i] = mr;
                data[i + 1] = mg;
                data[i + 2] = mb;
            }
        }
        ctx.putImageData(new ImageData(data, imgData.width, imgData.height), 0, 0);
    }
})();