() => {

    const container = document.createElement('div');
    const color = new ColorTranslator('hsl(180 100% 50%)', { decimals: 0 });

    for (let row = 0; row < 10; row++) {

        for (let col = 0; col < 10; col++) {

            color
                .setS(row * 10)
                .setL(col * 5 + 30);

            const box = document.createElement('div');

            box.classList.add('box');
            box.style.background = color.HEX;

            box.innerText =
                `R:${color.R}
                 G:${color.G}
                 B:${color.B}`;
            container.appendChild(box);

        }
    }

    return container;

}

() => {

    const container = document.createElement('div');
    const hsl = { H: 0, S: '90%', L: '50%' };
    const hue = [undefined, 55, 30, 0, 290, 220, 130];
    const total = hue.length;

    for (let row = 0; row < total; row++) {

        for (let col = 0; col < total; col++) {

            let index = total - row + col;
            if (index >= total) {
                index -= total;
            }
            hsl.H = hue[index];
            const rgb = hue[index] === undefined
                ? '#FFF'
                : ColorTranslator.toHEX(hsl);
            const box = document.createElement('div');

            box.classList.add('flag');
            box.style.background = rgb;

            container.appendChild(box);

        }
    }

    return container;

}

() => {

    const container = document.createElement('div');
    const hexColors = [
        '#FE2712', '#FE5409', '#FB9902',
        '#FABD03', '#FFFE32', '#D1EA2C',
        '#66B132', '#0392CE', '#0247FE',
        '#3D00A5', '#8601B0', '#A7194B'
    ];

    hexColors.forEach((color) => {

        const rgb = ColorTranslator.toRGB(color);
        const hsl = ColorTranslator.toHSL(color, { decimals: 0 });
        const lab = ColorTranslator.toCIELab(color, { decimals: 0 });

        const rgbDiv = document.createElement('div');
        const hslDiv = document.createElement('div');
        const labDiv = document.createElement('div');

        rgbDiv.style.backgroundColor = rgb;
        rgbDiv.textContent = rgb;

        hslDiv.style.backgroundColor = hsl;
        hslDiv.textContent = hsl;

        labDiv.style.backgroundColor = lab;
        labDiv.textContent = lab;

        container.appendChild(rgbDiv);
        container.appendChild(hslDiv);
        container.appendChild(labDiv);

    });

    return container;

}

() => {

    const container = document.createElement('div');
    const colors = [
        'red',
        'lime',
        'blue',
        'aqua',
        'yellow',
        'fuchsia'
    ];
    const total = colors.length;

    for (let row = 0; row < total; row++) {

        const hsl = ColorTranslator.toHSLObject(colors[row]);
        const step = hsl.S / (total - 1);

        for (let col = 0; col < total; col++) {

            const rgb = ColorTranslator.toHEX(hsl);
            const cmyk = ColorTranslator.toCMYKObject(hsl, { decimals: 0 });

            const box = document.createElement('div');
            box.classList.add('box');
            box.style.background = rgb;
            box.innerText = `C:${cmyk.C}
                             M:${cmyk.M}
                             Y:${cmyk.Y}
                             K:${cmyk.K}`;

            container.appendChild(box);

            hsl.S -= step;

        }
    }

    return container;

}

() => {

    const container = document.createElement('div');
    const rows = 11;
    const mult = 3;

    for (let i = 0; i < rows; i++) {

        const blends = ColorTranslator.getBlendHEX('#F00', '#FF0', mult + i * mult);

        blends.forEach((blend, index) => {
            const box = document.createElement('div');
            box.classList.add('box', `file${i}`);
            box.style.background = blend;
            box.innerText = index + 1;
            container.appendChild(box);
        });

    }

    return container;

}

() => {

    const container = document.createElement('div');

    const colors = ['#F00', '#FF8000', '#FF0', '#0F0', '#00F', '#A0F', '#F0A'];

    const createBox = (color, type) => {
        const box = document.createElement('div');
        box.classList.add('box');
        box.style.backgroundColor = color;
        if (type) box.dataset.type = type;
        container.appendChild(box);
    };

    colors.forEach((color) => {
        const shades = ColorTranslator.getShades(color, 3).reverse();
        const tints = ColorTranslator.getTints(color, 3);
        shades.forEach((shade) => createBox(shade, 'shade'));
        createBox(color);
        tints.forEach((tint) => createBox(tint, 'tint'));
    });

    return container;

}

() => {

    const container = document.createElement('div');

    const mixes = [
        '#F00',
        '#0F0',
        '#00F',
        [1, 3],
        [1, 2],
        [2, 3],
        [1, 2, 3]
    ];

    const fillPlanes = () => {
        const planes = container.querySelectorAll('#planes path');
        planes.forEach((plane, index) => {
            let color = '#CCC';
            if (typeof mixes[index] === 'string') {
                color = mixes[index];
            } else if(mixes[index]) {
                const colors = mixes[index].map((i) => mixes[i - 1]);
                color = mixes[index] = ColorTranslator.getMixHEX(colors);
            }
            plane.setAttribute('fill', color);
        });
    };

    fetch('images/color-mixes.svg')
        .then(result => result.text())
        .then((svgCode) => {
            container.innerHTML = svgCode;
            fillPlanes();
        });

    return container;

}

(ColorTranslator, { Mix }) => {

    const container = document.createElement('div');

    const mixes = [
        '#F00',
        '#FF0',
        '#00F',
        [1, 3],
        [1, 2],
        [2, 3],
        [1, 2, 3]
    ];

    const fillPlanes = () => {
        const planes = container.querySelectorAll('#planes path');
        planes.forEach((plane, index) => {
            let color = '#CCC';
            if (typeof mixes[index] === 'string') {
                color = mixes[index];
            } else if(mixes[index]) {
                const colors = mixes[index].map((i) => mixes[i - 1]);
                color = mixes[index] = ColorTranslator.getMixHEX(colors, Mix.SUBTRACTIVE);
            }
            plane.setAttribute('fill', color);
        });
    };

    fetch('images/color-mixes.svg')
        .then(result => result.text())
        .then((svgCode) => {
            container.innerHTML = svgCode;
            fillPlanes();
        });

    return container;

}

(ColorTranslator, { Harmony }) => {

    const container = document.createElement('div');

    const harmonies = [
        { label: 'Complementary',       value: Harmony.COMPLEMENTARY },
        { label: 'Split Complementary', value: Harmony.SPLIT_COMPLEMENTARY },
        { label: 'Analogous',           value: Harmony.ANALOGOUS },
        { label: 'Triadic',             value: Harmony.TRIADIC },
        { label: 'Tetradic',            value: Harmony.TETRADIC },
        { label: 'Square',              value: Harmony.SQUARE }
    ];

    const baseColor = '#F00';

    const createElement = (className, parent) => {
        const div = document.createElement('div');
        div.classList.add(className);
        parent.appendChild(div);
        return div;
    };

    const createHarmony = (item) => {

        const wrapper = createElement('wrapper', container);
        const wheel = createElement('wheel', wrapper);
        const harmony = createElement('harmony', wrapper);
        createElement('label', wrapper).innerText = item.label;

        fetch('images/wheel-additive.svg')
            .then(result => result.text())
            .then((svgCode) => {
                const harmonyColors = ColorTranslator.getHarmony(baseColor, item.value);
                const selector = 'path' + harmonyColors.map((color) => `:not([fill="${color}"])`).join('');
                wheel.innerHTML = svgCode;
                harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);
                wheel.querySelectorAll(selector).forEach((path) => path.setAttribute('fill-opacity', '0.25'));
            });

    };

    harmonies.forEach((item) => createHarmony(item));

    return container;

}

(ColorTranslator, { Harmony, Mix }) => {

    const container = document.createElement('div');

    const harmonies = [
        { label: 'Complementary',       value: Harmony.COMPLEMENTARY },
        { label: 'Split Complementary', value: Harmony.SPLIT_COMPLEMENTARY },
        { label: 'Analogous',           value: Harmony.ANALOGOUS },
        { label: 'Triadic',             value: Harmony.TRIADIC },
        { label: 'Tetradic',            value: Harmony.TETRADIC },
        { label: 'Square',              value: Harmony.SQUARE }
    ];

    const baseColor = '#F00';

    const createElement = (className, parent) => {
        const div = document.createElement('div');
        div.classList.add(className);
        parent.appendChild(div);
        return div;
    };

    const createHarmony = (item) => {

        const wrapper = createElement('wrapper', container);
        const wheel = createElement('wheel', wrapper);
        const harmony = createElement('harmony', wrapper);
        createElement('label', wrapper).innerText = item.label;

        fetch('images/wheel-subtractive.svg')
            .then(result => result.text())
            .then((svgCode) => {
                const harmonyColors = ColorTranslator.getHarmony(baseColor, item.value, Mix.SUBTRACTIVE);
                const selector = 'path' + harmonyColors.map((color) => `:not([fill="${color}"])`).join('');
                wheel.innerHTML = svgCode;
                harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);
                wheel.querySelectorAll(selector).forEach((path) => path.setAttribute('fill-opacity', '0.25'));
            });

    };

    harmonies.forEach((item) => createHarmony(item));

    return container;

}