<!DOCTYPE HTML>
<html>
<head>
<title>__TITLE__</title>
<style>
    body {
        font-family: Helvetica, sans-serif;
        font-size: 11pt;
    }

    .imageContainer {
        position: absolute;
        margin: 10px;
        outline: 10px solid silver;
        min-width: 300px;
        min-height: 150px;
    }
    
    .imageContainer > img {
        display: block;
    }

    .controls {
        margin-bottom: 15px;
        padding: 10px;
    }
    
    .pixel-diff {
        font-size: 10pt;
        font-family: -apple-system;
    }
    
    .pixel-diff > td:first-child {
        text-align: right;
    }
    
    .hidden {
        display: none;
    }
    
    .controls button {
        width: 12em;
        padding: 4px;
    }
    
    .controls td {
        padding: 5px 10px;
    }
    
    .controls label {
        font-family: -apple-system;
        font-size: 12px;
    }
    
    button.selected {
        text-decoration: underline;
    }
</style>
</head>
<body>
<table class="controls">
    <tr class="pixel-diff __HIDE_DIFF_CLASS__">
        <td>Pixel difference:</td>
        <td>__PIXEL_DIFF__</td>
    </tr>
    <tr class="pixel-diff __HIDE_FUZZY_CLASS__">
        <td>Fuzzy match:</td>
        <td>__FUZZY_DATA__</td>
    </tr>
    <tr>
        <td></td>
        <td><button id="expected-label" data-type="expected" onclick="switchToImage(this)">Expected Image</button></td>
        <td><button id="actual-label" data-type="actual" onclick="switchToImage(this)">Actual Image</button></td>
        <td><button id="diff-label" data-type="diff" onclick="switchToImage(this)">Diff Image</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="animate" onchange="toggleAnimate()" checked><label for="animate">Animate:</label></td>
        <td><input type="checkbox" id="cycle-expected" onchange="updateImageCycle()" checked><label for="cycle-expected">Expected</label></td>
        <td><input type="checkbox" id="cycle-actual" onchange="updateImageCycle()" checked><label for="cycle-actual">Actual</label></td>
        <td><input type="checkbox" id="cycle-diff" onchange="updateImageCycle()"><label for="cycle-diff">Diff</label></td>
    </tr>
</table>

<div class="imageContainer" data-prefix="__PREFIX__">Loading...</div>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

var container = document.querySelector('.imageContainer');

var data = {
    'expected' : {
        'image' : preloadImage(container.getAttribute('data-prefix') + '-expected.png'),
        'label' : document.getElementById('expected-label'),
    },
    'actual' : {
        'image' : preloadImage(container.getAttribute('data-prefix') + '-actual.png'),
        'label' : document.getElementById('actual-label'),
    },
    'diff' : {
        'image' : preloadImage(container.getAttribute('data-prefix') + '-diff.png'),
        'label' : document.getElementById('diff-label'),
    },
};

var preloadedImageCount = 0;

function preloadComplete()
{
    ++preloadedImageCount;
    if (preloadedImageCount < 3)
        return;
    
    showImage(data['actual']);
    updateImageCycle();
    startCyclingImages();
}

function preloadImage(url)
{
    image = new Image();
    image.addEventListener('load', preloadComplete);
    image.src = url;
    return image;
}

function switchToImage(element)
{
    var imageType = element.getAttribute('data-type');
    showImage(data[imageType]);
}

function resetLabels()
{
    for (var item in data)
        data[item].label.classList.remove('selected');
}

function showImage(categoryData)
{
    container.replaceChild(categoryData.image, container.firstChild);
    
    resetLabels();
    categoryData.label.classList.add('selected');
}

function updateImageCycle()
{
    data.expected.cycle = document.getElementById('cycle-expected').checked;
    data.actual.cycle = document.getElementById('cycle-actual').checked;
    data.diff.cycle = document.getElementById('cycle-diff').checked;
}

function getCurrentlyShowingImageType()
{
    for (var item in data) {
        if (data[item].label.classList.contains('selected'))
            return item;
    }
}

function toggleAnimate()
{
    if (document.getElementById('animate').checked)
        startCyclingImages();
    else
        stopCyclingImages();
}

var cycleIntervalID;
function startCyclingImages()
{
    stopCyclingImages();
    cycleIntervalID = window.setInterval(cycleImages, 2000);
}

function stopCyclingImages()
{
    if (cycleIntervalID) {
        window.clearInterval(cycleIntervalID);
        cycleIntervalID = undefined;
    }
}

function cycleImages()
{
    var currentImage = getCurrentlyShowingImageType();
    var order = ['expected', 'actual', 'diff'];
    var index = order.indexOf(currentImage);
    
    var currIndex = (index + 1) % order.length;
    do {
        var type = order[currIndex];
        if (data[type].cycle)
            break;
        
        currIndex = (currIndex + 1) % order.length;
    } while (currIndex != index);

    showImage(data[order[currIndex]]);
}
</script>
</body>
</html>