<!DOCTYPE html>
<html>
<head>
<title>Interactive Wide-Gamut Comparisons</title>
<style>

body {
    background-color: #888;
    text-align: center;
    font-family: -apple-system, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
}

* {
    -webkit-user-select: none;
}

.comparison {
    margin: 0 auto 40px auto;
    position: relative;
    width: 600px;
    height: 400px;
}

.comparison img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

.comparison .a, .comparison .b {
    position: absolute;
    top: 0;
    height: 400px;
}

.comparison .a {
    left: 0;
    width: 300px;
}

.comparison .b {
    right: 0;
    width: 300px;
    overflow: hidden;
}

.comparison .a span,
.comparison .b span {
    display: block;
    position: absolute;
    color: white;
    border: 1px solid white;
    padding: 2px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.75);
    top: 10px;
    left: 10px;
}

.comparison .b span {
    left: auto;
    right: 10px;
}

.comparison .b img {
    position: absolute;
    right: 0;
}

.comparison .divider {
    position: absolute;
    top: 0;
    left: 300px;
    height: 100%;
    margin-left: -2px;
    width: 4px;
    background-color: #444;
}

</style>
<script>

var IMAGES = [
    { name: "Webkit-logo", wide: "P3", type: "png", alt: "A red square with the WebKit logo embossed", width: 500, height: 500 },
    { name: "Iceland", wide: "P3", type: "jpg", alt: "A river in Iceland", divider: "white" },
    { name: "Shoes", wide: "AdobeRGB", type: "jpg", alt: "Hober's bright orange shoes", divider: "white" },
    { name: "YellowFlower", wide: "P3", type: "jpg", alt: "A bright yellow flower" },
    { name: "Italy", wide: "P3", type: "jpg", alt: "Some umbrellas in Italy", divider: "white" },
    { name: "Flowers", wide: "ProPhoto", type: "jpg", alt: "Red flowers", width: 600, height: 396 },
    { name: "Rose", wide: "ProPhoto", type: "jpg", alt: "A red rose", width: 500, height: 500 },
    { name: "Sunset", wide: "P3", type: "jpg", alt: "A sunset", divider: "white", width: 397, height: 600 },
]

window.addEventListener("load", init, false);

function init()
{
    IMAGES.forEach(function(image) {
        var comparison = document.createElement("div");
        comparison.className = "comparison";
        comparison.addEventListener("mousedown", startDrag, false);
        comparison.addEventListener("touchstart", startDrag, false);
        var a = document.createElement("div");
        a.className = "a";
        var imgA = document.createElement("img");
        imgA.src = image.name + "-sRGB." + image.type;
        imgA.alt = image.alt + ". Image is in the sRGB color space";
        a.appendChild(imgA);
        var description = document.createElement("span");
        description.textContent = "sRGB";
        a.appendChild(description);
        comparison.appendChild(a);
        var b = document.createElement("div");
        b.className = "b";
        var imgB = document.createElement("img");
        imgB.src = image.name + "-" + image.wide + "." + image.type;
        imgB.alt = image.alt + ". Image is in the " + image.wide + " color space";
        b.appendChild(imgB);
        description = document.createElement("span");
        description.textContent = image.wide;
        b.appendChild(description);
        comparison.appendChild(b);
        var divider = document.createElement("div");
        divider.className = "divider";
        if (image.divider)
            divider.style.backgroundColor = image.divider;
        comparison.appendChild(divider);
        document.body.appendChild(comparison);

        if (image.width) {
            // Non-standard width and height.
            comparison.style.width = image.width + "px";
            comparison.style.height = image.height + "px";
            a.style.height = image.height + "px";
            a.style.width = (image.width / 2) + "px";
            b.style.height = image.height + "px";
            b.style.width = (image.width / 2) + "px";
            divider.style.left = (image.width / 2) + "px";
            imgA.width = image.width;
            imgA.height = image.height;
            imgB.width = image.width;
            imgB.height = image.height;
        }
    });
}

var dragTarget = null;

function startDrag(event)
{
    if (event.touches && event.touches.length > 1) {
        event.preventDefault();
        return;
    }

    dragTarget = event.currentTarget;

    document.addEventListener("mousemove", dragged, false);
    document.addEventListener("mouseup", endDrag, false);
    document.addEventListener("touchmove", dragged, false);
    document.addEventListener("touchend", endDrag, false);
    document.addEventListener("touchcancel", endDrag, false);

    var x = event.clientX;
    if (event.touches && event.touches.length > 0)
        x = event.touches[0].clientX;

    updateComparisonPoint(dragTarget, x);
}

function dragged(event)
{
    if (!dragTarget)
        return;

    if (event.touches && event.touches.length > 1)
        return;

    var x = event.clientX;
    if (event.touches && event.touches.length > 0)
        x = event.touches[0].clientX;

    updateComparisonPoint(dragTarget, x);
}

function endDrag(event)
{
    if (!dragTarget)
        return;

    if (event.touches && event.touches.length > 1)
        return;

    document.removeEventListener("mousemove", dragged);
    document.removeEventListener("mouseup", endDrag);
    document.removeEventListener("touchmove", dragged);
    document.removeEventListener("touchend", endDrag);
    document.removeEventListener("touchcancel", endDrag);
}

function updateComparisonPoint(comparison, clientX)
{
    var bounds = comparison.getBoundingClientRect();
    var offset = clientX - bounds.left;

    offset = Math.min(bounds.width, Math.max(0, offset));

    var imageAContainer = comparison.querySelector(".a");
    var imageBContainer = comparison.querySelector(".b");

    imageAContainer.style.width = offset + "px";
    imageBContainer.style.width = (bounds.width - offset) + "px";

    var divider = comparison.querySelector(".divider");
    divider.style.left = offset + "px";
}

</script>
<body>
    <h1>Interactive Image Comparison</h1>
    <p>
        Touch and drag on the images to move between the sRGB version (left)
        and the wide-gamut version (right).
    </p>
    <p>
        Note that if you don't have a wide-gamut display, you might
        not notice any difference. The <a href=".">less interactive version</a>
        has an option to show the out-of-gamut pixels.
    </p>
</body>