<!DOCTYPE html>
<html>
<head>
<title>Perf Monitor is Loading...</title>
<script>

if (location.hash.indexOf('#mode=dashboard') >= 0 || !location.hash || location.hash == '#')
    location.href = '/v3/';

</script>
<script src="js/jquery.js" defer></script>
<script src="js/jquery.flot.js" defer></script>
<script src="js/jquery.flot.crosshair.js" defer></script>
<script src="js/jquery.flot.fillbetween.js" defer></script>
<script src="js/jquery.flot.resize.js" defer></script>
<script src="js/jquery.flot.selection.js" defer></script>
<script src="js/jquery.flot.time.js" defer></script>
<script src="js/helper-classes.js" defer></script>
<script src="shared/statistics.js" defer></script>
<link rel="stylesheet" href="common.css">
<style type="text/css">

#numberOfDaysPicker {
    color: #666;
}

#numberOfDaysPicker input {
    height: 0.9em;
    margin-right: 1em;
}

td, th {
    border: none;
    border-collapse: collapse;
    padding-top: 0.5em;
}

#dashboard > tbody > tr > td {
    vertical-align: top;
}

#dashboard > thead th {
    text-shadow: #bbb 1px 1px 2px;
    font-size: large;
    font-weight: normal;
}

.chart {
    position: relative;
    border: solid 1px #ccc;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
}

.chart.worse {
    background: #fcc;
}

.chart.better {
    background: #cfc;
}

#charts .pane {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 230px;
}

.chart header {
    height: 3em;
    display: table-cell;
    vertical-align: middle;
}

#dashboard header {
    padding: 0px 10px;
}

.chart h2, .chart h3 {
    margin: 0 0 0.3em 0;
    padding: 0;
    font-size: 1em;
    font-weight: normal;
    word-break: break-all;
}

.chart h2 {
    font-size: normal;
}

.chart h3 {
    font-size: normal;
}

#dashboard .chart h3 {
    display: none;
}

#dashboard .chart .status {
    margin: 0px 10px;
}

.chart .status {
    font-size: small;
    color: #666;
}

.plot {
    margin: 5px 5px 10px 5px;
}

.closeButton svg {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 15px;
    height: 15px;
}

#dashboard .chart {
    width: 410px;
}

#dashboard .plot {
    width: 400px;
    height: 100px;
    cursor: pointer;
    cursor: hand;
}

#charts .plot {
    height: 320px;
    margin-left: 250px;
}

#dashboard .overviewPlot {
    display: none;
}

#charts .overviewPlot {
    margin: 10px 0px 0px 0px;
    padding: 0;
    height: 70px;
}

.chart .summaryTable {
    font-size: small;
    color: #666;
    border: 0;
}

.chart .meta {
    position: relative;
}

.chart .meta table,
.chart .meta td,
.tooltip table,
.tooltip td {
    margin: 0;
    padding: 0;
}

.chart .meta th,
.tooltip th {
    margin: 0;
    padding: 0 0.2em 0 0;
    text-align: right;
    font-weight: normal;
}

.chart .meta td:not(:first-child):before,
.tooltip td:not(:first-child):before {
    content: ": ";
}

#dashboard .chart .summaryTable {
    position: absolute;
    right: 10px;
    top: 0px;
}

#charts .summaryTable {
    margin-top: 0.3em;
}

#dashboard .arrow {
    width: 20px;
    height: 40px;
    position: absolute;
    bottom: 50px;
    left: 5px;
}

#charts .arrow {
    width: 20px;
    height: 40px;
    position: absolute;
    top: 10px;
    left: 240px;
}

.chart svg {
    stroke: #ccc;
    fill: #ccc;
    color: #ccc;
}

.chart.worse svg {
    stroke: #c99;
    fill: #c99;
    color: #c99;
}

.chart.better svg {
    stroke: #9c9;
    fill: #9c9;
    color: #9c9;
}

.chart .yaxistoggler {
    position: absolute;
    bottom: 10px;
    left: 225px;
    width: 10px;
    height: 25px;
}

#dashboard  .yaxistoggler {
    display: none;
}

.tooltip {
    position: relative;
    border-radius: 5px;
    padding: 5px;
    opacity: 0.8;
    background: #333;
    color: #eee;
    font-size: small;
    line-height: 130%;
    white-space: nowrap;
}

.tooltip:before {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    margin-left: -9px;
    top: -19px;
    content: "";
    display: none;
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #333 transparent;
}

.tooltip.inverted:before {
    display: block;
}

.tooltip.inverted:after {
    display: none;
}

.tooltip:after {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    margin-left: -9px;
    bottom: -19px;
    content: "";
    display: block;
    border-style: solid;
    border-width: 10px;
    border-color: #333 transparent transparent transparent;
}

.tooltip a {
    text-decoration: underline;
    color: #fff;
    text-shadow: none;
}

.clickTooltip {
    opacity: 0.6;
}

.hoverTooltip {
    z-index: 99999;
}

#testPicker {
    display: inline-block;
    margin: 10px 0px;
    border: solid 1px #ccc;
    color: #666;
    border-radius: 5px;
    padding: 5px 8px;
}

</style>
<script>

(function () {
    var charts = [];
    var minTime;
    var currentZoom;
    var sharedPlotOptions = {
        lines: { show: true, lineWidth: 1 },
        xaxis: {
            mode: "time",
            timeformat: "%m/%d",
            minTickSize: [1, 'day'],
            max: Date.now(), // FIXME: This is likely broken for non-PST
        },
        yaxis: { tickLength: 0 },
        series: { shadowSize: 0 },
        points: { show: false },
        grid: {
            hoverable: true,
            borderWidth: 1,
            borderColor: '#999',
            backgroundColor: '#fff',
        }
    };

    function adjustedIntervalForRun(results, minTime, minRatioToFitInAdjustedInterval) {
        if (!results)
            return {min: Number.MAX_VALUE, max: Number.MIN_VALUE};
        var degreeOfWeightingDecrease = 0.2;
        var movingAverage = results.exponentialMovingArithmeticMean(minTime, degreeOfWeightingDecrease);
        var resultsCount = results.countResults(minTime);
        var adjustmentDelta = results.sampleStandardDeviation(minTime) / 4;
        var adjustedMin = movingAverage;
        var adjustedMax = movingAverage;
        var adjustmentCount;
        for (adjustmentCount = 0; adjustmentCount < 4 * 4; adjustmentCount++) { // Don't expand beyond 4 standard deviations.
            adjustedMin -= adjustmentDelta;
            adjustedMax += adjustmentDelta;
            if (results.countResultsInInterval(minTime, adjustedMin, adjustedMax) / resultsCount >= minRatioToFitInAdjustedInterval)
                break;
        }
        for (var i = 0; i < adjustmentCount; i++) {
            if (results.countResultsInInterval(minTime, adjustedMin + adjustmentDelta, adjustedMax) / resultsCount < minRatioToFitInAdjustedInterval)
                break;
            adjustedMin += adjustmentDelta;
        }
        for (var i = 0; i < adjustmentCount; i++) {
            if (results.countResultsInInterval(minTime, adjustedMin, adjustedMax - adjustmentDelta) / resultsCount < minRatioToFitInAdjustedInterval)
                break;
            adjustedMax -= adjustmentDelta;
        }
        return {min: adjustedMin, max: adjustedMax};
    }

    function computeYAxisBoundsToFitLines(minTime, results, baseline, target) {
        var minOfAllRuns = results.min(minTime);
        var maxOfAllRuns = results.max(minTime);
        if (baseline) {
            minOfAllRuns = Math.min(minOfAllRuns, baseline.min(minTime));
            maxOfAllRuns = Math.max(maxOfAllRuns, baseline.max(minTime));
        }
        if (target) {
            minOfAllRuns = Math.min(minOfAllRuns, target.min(minTime));
            maxOfAllRuns = Math.max(maxOfAllRuns, target.max(minTime));
        }
        var marginSize = (maxOfAllRuns - minOfAllRuns) * 0.1;

        var minRatioToFitInAdjustedInterval = 0.9;
        var intervalForResults = adjustedIntervalForRun(results, minTime, minRatioToFitInAdjustedInterval);
        var intervalForBaseline = adjustedIntervalForRun(baseline, minTime, minRatioToFitInAdjustedInterval);
        var intervalForTarget = adjustedIntervalForRun(target, minTime, minRatioToFitInAdjustedInterval);
        var adjustedMin = Math.min(intervalForResults.min, intervalForBaseline.min, intervalForTarget.min);
        var adjustedMax = Math.max(intervalForResults.max, intervalForBaseline.max, intervalForTarget.max);
        var adjsutedMarginSize = (adjustedMax - adjustedMin) * 0.1;
        return {min: minOfAllRuns - marginSize, max: maxOfAllRuns + marginSize,
            adjustedMin: Math.max(minOfAllRuns - marginSize, adjustedMin - adjsutedMarginSize),
            adjustedMax: Math.min(maxOfAllRuns + marginSize, adjustedMax + adjsutedMarginSize)};
    }

    function computeStatus(smallerIsBetter, lastResult, baseline, target) {
        var relativeDifferenceWithBaseline = baseline ? lastResult.relativeDifference(baseline.lastResult()) : 0;
        var relativeDifferenceWithTarget = target ? lastResult.relativeDifference(target.lastResult()) : 0;
        var statusText = '';
        var status = '';

        if (relativeDifferenceWithBaseline && relativeDifferenceWithBaseline > 0 != smallerIsBetter) {
            statusText = Math.abs(relativeDifferenceWithBaseline * 100).toFixed(2) + '% ' + (smallerIsBetter ? 'above' : 'below') + ' baseline';
            status = 'worse';
        } else if (relativeDifferenceWithTarget && relativeDifferenceWithTarget > 0 == smallerIsBetter) {
            statusText = Math.abs(relativeDifferenceWithTarget * 100).toFixed(2) + '% ' + (smallerIsBetter ? 'below' : 'above') + ' target';
            status = 'better';
        } else if (relativeDifferenceWithTarget)
            statusText = Math.abs(relativeDifferenceWithTarget * 100).toFixed(2) + '% until target';

        return {class: status, text: statusText};
    }

    function addPlotDataForRun(plotData, name, runs, color, interactive) {
        var entry = {color: color, data: runs.meanPlotData()};
        if (!interactive) {
            entry.clickable = false;
            entry.hoverable = false;
        }
        if (runs.hasConfidenceInterval()) {
            var lowerName = name.toLowerCase();
            var confienceEntry = $.extend(true, {}, entry, {lines: {lineWidth: 0}, clickable: false, hoverable: false});
            plotData.push($.extend(true, {}, confienceEntry, {id: lowerName, data: runs.upperConfidencePlotData()}));
            plotData.push($.extend(true, {}, confienceEntry,
                {fillBetween: lowerName, lines: {fill: 0.3}, data: runs.lowerConfidencePlotData()}));
        }
        plotData.push(entry);
    }

    function createSummaryRowMarkup(name, runs) {
        return '<tr><th>' + name + '</th><td>' + runs.lastResult().label() + '</td></tr>';
    }

    function buildLabelWithLinks(build, previousBuild) {
        function linkifyIfNotNull(label, url) {
            return url ? '<a href="' + url + '" target="_blank">' + label + '</a>' : label;
        }

        var formattedRevisions = build.formattedRevisions(previousBuild);
        var buildInfo = {
            'Commit': build.formattedTime(),
            'Build': linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + '(' + build.formattedBuildTime() + ')'
        };
        for (var repositoryName in formattedRevisions)
            buildInfo[repositoryName] = linkifyIfNotNull(formattedRevisions[repositoryName].label, formattedRevisions[repositoryName].url);
        var markup = '';
        for (var key in buildInfo)
            markup += '<tr><th>' + key + '</th><td>' + buildInfo[key] + '</td>';
        return '<tr>' + markup + '</tr>';
    }

    function Chart(container, isDashboard, platform, metric, bugTrackers, onClose) {
        var linkifiedFullName = metric.fullName;
        if (metric.test.url)
            linkifiedFullName = '<a href="' + metric.test.url + '">' + linkifiedFullName + '</a>';
        var section = $('<section class="chart"><div class="pane"><header><h2>' + linkifiedFullName + '</h2>'
            + '<h3 class="platform">' + platform.name + '</h3></header>'
            + '<div class="meta"><table class="status"><tbody></tbody></table><table class="summaryTable"><tbody></tbody></table></div>'
            + '<div class="overviewPlot"></div></div>'
            + '<div class="plot"></div>'
            + '<div class="unit"></div>'
            + '<svg viewBox="0 0 20 100" class="arrow">'
            + '<g stroke-width="10"><line x1="10" y1="8" x2="10" y2="92" />'
            + '<polygon points="5,85 15,85 10,90" class="downwardArrowHead" />'
            + '<polygon points="5,15 15,15 10,10" class="upwardArrowHead" />'
            + '</g></svg>'
            + '<a href="#" class="toggleYAxis"><svg viewBox="0 0 40 100" class="yaxistoggler"><g stroke-width="10">'
            + '<line x1="20" y1="8" x2="20" y2="82" />'
            + '<polygon points="15,15 25,15 20,10" />'
            + '<polygon points="15,75 25,75 20,80" />'
            + '<line x1="0" y1="92" x2="40" y2="92" />'
            + '</g></svg></a>'
            + '<a href="#" class="closeButton"><svg viewBox="0 0 100 100">'
            + '<g stroke-width="10"><circle cx="50" cy="50" r="45" fill="transparent"/><polygon points="30,30 70,70" />'
            + '<polygon points="30,70 70,30" /></g></svg></a></section>');

        $(container).append(section);

        var self = this;
        if (onClose) {
            section.find('.closeButton').bind('click', function (event) {
                event.preventDefault();
                section.remove();
                charts.splice(charts.indexOf(self), 1);
                onClose(self);
                return false;
            });
        } else
            section.find('.closeButton').hide();

        section.find('.yaxistoggler').bind('click', function (event) {
            self.toggleYAxis();
            event.preventDefault();
            return false;
        });

        var plotData = [];
        var results;
        var baseline;
        var target;

        var tooltip = new Tooltip(container, 'tooltip hoverTooltip');
        var bounds;
        var plotContainer = section.find('.plot');
        var mainPlot;
        var overviewPlot;
        var clickTooltips = [];
        var shouldShowEntireYAxis = false;

        this.platform = function () { return platform; }
        this.metric = function () { return metric; }

        this.populate = function (passedResults, passedBaseline, passedTarget) {
            results = passedResults;
            baseline = passedBaseline;
            target = passedTarget;

            var summaryRows = '';
            if (target) {
                addPlotDataForRun(plotData, 'Target', target, '#039');
                summaryRows = createSummaryRowMarkup('Target', target) + summaryRows;
            }
            if (baseline) {
                addPlotDataForRun(plotData, 'Baseline', baseline, '#930');
                summaryRows = createSummaryRowMarkup('Baseline', baseline) + summaryRows;
            }
            addPlotDataForRun(plotData, 'Current', results, '#666', true);
            summaryRows = createSummaryRowMarkup('Current', results) + summaryRows;

            var status = computeStatus(results.smallerIsBetter(), results.lastResult(), baseline, target);
            if (status.text)
                summaryRows = '<tr><td colspan="2">' + status.text + '</td></tr>' + summaryRows;
            section.addClass(status.class);
            section.find('.status tbody').html(buildLabelWithLinks(results.lastResult().build()));
            section.find('.summaryTable tbody').html(summaryRows);
            if (results.smallerIsBetter()) {
                section.find('.arrow .downwardArrowHead').show();
                section.find('.arrow .upwardArrowHead').hide();
            } else {
                section.find('.arrow .downwardArrowHead').hide();
                section.find('.arrow .upwardArrowHead').show();
            }
        }

        this.attachMainPlot = function (xMin, xMax) {
            if (!bounds)
                return;

            var mainPlotOptions = $.extend(true, {}, sharedPlotOptions, {
                xaxis: {
                    min: xMin,
                },
                yaxis: {
                    tickLength: null,
                    min: shouldShowEntireYAxis ? 0 : bounds.adjustedMin,
                    max: shouldShowEntireYAxis ? bounds.max : bounds.adjustedMax,
                },
                crosshair: {'mode': 'x', color: '#c90', lineWidth: 1},
                grid: {clickable: true},
            });
            if (xMax)
                mainPlotOptions.xaxis.max = xMax;
            if (isDashboard) {
                mainPlotOptions.yaxis.labelWidth = 20;
                mainPlotOptions.yaxis.ticks = [mainPlotOptions.yaxis.min, mainPlotOptions.yaxis.max];
                mainPlotOptions.grid.autoHighlight = false;
            } else {
                mainPlotOptions.yaxis.labelWidth = 30;
                mainPlotOptions.selection = {mode: "x"};
                plotData[plotData.length - 1].points = {show: true, radius: 1};
            }
            mainPlot = $.plot(plotContainer, plotData, mainPlotOptions);
            plotData[plotData.length - 1].points = {};

            for (var i = 0; i < clickTooltips.length; i++) {
                if (clickTooltips[i])
                    clickTooltips[i].remove();
            }
            clickTooltips = [];
        }

        this.toggleYAxis = function () {
            shouldShowEntireYAxis = !shouldShowEntireYAxis;
            if (currentZoom)
                this.attachMainPlot(currentZoom.from, currentZoom.to);
            else
                this.attachMainPlot(minTime);
        }

        this.zoom = function (from, to) {
            this.attachMainPlot(from, to);
            if (overviewPlot)
                overviewPlot.setSelection({xaxis: {from: from, to: to}}, true);
        }

        this.clearZoom = function () {
            this.attachMainPlot(minTime);
            if (overviewPlot)
                overviewPlot.clearSelection();
        }
        
        this.setCrosshair = function (pos) {
            if (mainPlot)
                mainPlot.setCrosshair(pos);
        }

        this.clearCrosshair = function () {
            if (mainPlot)
                mainPlot.clearCrosshair();
        }

        this.hideTooltip = function() {
            if (tooltip)
                tooltip.hide();
        }

        function toggleClickTooltip(index, pageX, pageY) {
            if (clickTooltips[index])
                clickTooltips[index].toggle();
            else {
                // FIXME: Put this on URLState.
                var newTooltip = new Tooltip(container, 'tooltip clickTooltip');
                showTooltipWithResults(newTooltip, pageX, pageY, results.resultAt(index), results.resultAt(index - 1));
                newTooltip.bindClick(function () { toggleClickTooltip(index, pageX, pageY); });
                newTooltip.bindMouseEnter(function () { tooltip.hide(); });
                clickTooltips[index] = newTooltip;
            }
            tooltip.hide();
        }

        function showTooltipWithResults(tooltip, x, y, result, resultToCompare) {
            var newBugUrls = '';
            if (resultToCompare) {
                var title = (resultToCompare.isBetterThan(result) ? 'REGRESSION: ' : '') + result.metric().fullName
                    + ' got ' + result.formattedProgressionOrRegression(resultToCompare)
                    + ' around ' + result.build().formattedTime();
                var revisions = result.build().formattedRevisions(resultToCompare.build());

                for (var trackerId in bugTrackers) {
                    var tracker = bugTrackers[trackerId];
                    var repositories = tracker.repositories;
                    var description = 'Platform: ' + result.build().platform().name + '\n\n';
                    for (var i = 0; i < repositories.length; ++i) {
                        var repositoryName = repositories[i];
                        var revision = revisions[repositoryName];
                        if (!revision)
                            continue;
                        if (revision.url)
                            description += repositoryName + ': ' + revision.url;
                        else
                            description += revision.label;
                        description += '\n';
                    }
                    var url = tracker.newBugUrl
                        .replace(/\$title/g, encodeURIComponent(title))
                        .replace(/\$description/g, encodeURIComponent(description))
                        .replace(/\$link/g, encodeURIComponent(location.href));
                    if (newBugUrls)
                        newBugUrls += ',';
                    newBugUrls += ' <a href="' + url + '" target="_blank">' + tracker.name + '</a>';
                }
                newBugUrls = 'File:' + newBugUrls;
            }
            tooltip.show(x, y, result.label(resultToCompare) + '<table>'
                + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '</table>'
                + newBugUrls);
        }

        tooltip.bindClick(function () {
            if (tooltip.currentItem)
                toggleClickTooltip(tooltip.currentItem.dataIndex, tooltip.currentItem.pageX, tooltip.currentItem.pageY);
        });

        function closestItemForPageXRespectingPlotOffset(item, plot, series, pageX) {
            if (!series || !series.data.length)
                return null;

            var offset = $(plotContainer).offset();
            var points = series.datapoints.points;
            var size = series.datapoints.pointsize;
            var xInPlot = pageX - offset.left;

            if (xInPlot < plot.getPlotOffset().left)
                return null;
            if (item)
                return item;

            var previousPoint;
            var index = 0;
            while (1) {
                var currentPoint = plot.pointOffset({x: points[index * size], y: points[index * size + 1]});
                if (xInPlot < currentPoint.left) {
                    if (previousPoint && xInPlot < (previousPoint.left + currentPoint.left) / 2) {
                        index -= 1;
                        currentPoint = previousPoint;
                    }
                    break;
                }
                if (index + 1 >= series.data.length)
                    break;
                previousPoint = currentPoint;
                index++;
            }

            // Ideally we want to return a real item object but flot doesn't provide an API to obtain one
            // so create an object that contain properties we use.
            return {dataIndex: index, pageX: offset.left + currentPoint.left, pageY: offset.top + currentPoint.top};
        }

        // Return a plot generator. This function is called when we change the number of days to show.
        this.attach = function () {
            if (!results)
                return;

            bounds = computeYAxisBoundsToFitLines(minTime, results, baseline, target);

            var overviewContainer = section.find('.overviewPlot');
            if (!isDashboard) {
                overviewPlot = $.plot(overviewContainer, plotData,
                    $.extend(true, {}, sharedPlotOptions, {
                        xaxis: {
                            min: minTime,
                            // The maximum number of ticks we can fit on the overflow plot is 4.
                            tickSize: [(TestBuild.now() - minTime) / 4 / 1000, 'second']
                        },
                        grid: { hoverable: false, clickable: false },
                        selection: { mode: "x" },
                        yaxis: {
                            show: false,
                            min: bounds.min,
                            max: bounds.max,
                        }
                }));

                $(plotContainer).bind("plotselected", function (event, ranges) { Chart.zoom(ranges.xaxis.from, ranges.xaxis.to); });
                $(overviewContainer).bind("plotselected", function (event, ranges) { Chart.zoom(ranges.xaxis.from, ranges.xaxis.to); });
                $(overviewContainer).bind("plotunselected", function () { Chart.clearZoom(minTime) });
            }

            if (currentZoom)
                this.zoom(currentZoom.from, currentZoom.to);
            else
                this.attachMainPlot(minTime);

            if (bindPlotEventHandlers)
                bindPlotEventHandlers(this);
            bindPlotEventHandlers = null;
        };

        function bindPlotEventHandlers(chart) {
            // FIXME: Crosshair should stay where it was between charts.
            $(plotContainer).bind("plothover", function (event, pos, item) {
                for (var i = 0; i < charts.length; i++) {
                    if (charts[i] !== chart) {
                        charts[i].setCrosshair(pos);
                        charts[i].hideTooltip();
                    }
                }
                if (isDashboard)
                    return;
                var data = mainPlot.getData();
                item = closestItemForPageXRespectingPlotOffset(item, mainPlot, data[data.length - 1], pos.pageX);
                if (!item)
                    return;

                showTooltipWithResults(tooltip, item.pageX, item.pageY, results.resultAt(item.dataIndex), results.resultAt(item.dataIndex - 1));
                tooltip.currentItem = item;
            });

            $(plotContainer).bind("mouseleave", function (event) {
                var offset = $(plotContainer).offset();
                if (offset.left <= event.pageX && offset.top <= event.pageY && event.pageX <= offset.left + $(plotContainer).outerWidth()
                    && event.pageY <= offset.top + $(plotContainer).outerHeight())
                    return 0;
                for (var i = 0; i < charts.length; i++) {
                    charts[i].clearCrosshair();
                    charts[i].hideTooltip();
                }

            });

            if (isDashboard) { // FIXME: This code doesn't belong here.
                $(plotContainer).bind('click', function (event) {
                    openChart(results.platform(), results.metric());
                });
            } else {
                $(plotContainer).bind("plotclick", function (event, pos, item) {
                    if (tooltip.currentItem)
                        toggleClickTooltip(tooltip.currentItem.dataIndex, tooltip.currentItem.pageX, tooltip.currentItem.pageY);
                });
            }
        }

        charts.push(this);
    }

    Chart.clear = function () {
        charts = [];
    }

    Chart.setMinTime = function (newMinTime) {
        minTime = newMinTime;
        for (var i = 0; i < charts.length; i++)
            charts[i].attach();
    }

    Chart.onzoomchange = function (from, to) { };

    Chart.zoom = function (from, to) {
        currentZoom = {from: from, to: to};
        for (var i = 0; i < charts.length; i++)
            charts[i].zoom(from, to);
        this.onzoomchange(from, to);
    }

    Chart.clearZoom = function (minTime) {
        currentZoom = undefined;
        for (var i = 0; i < charts.length; i++)
            charts[i].clearZoom();
        this.onzoomchange();
    }

    window.Chart = Chart;
})();

// FIXME: We need to devise a way to fetch runs in multiple chunks so that
// we don't have to fetch the entire time series to just show the last 3 days.
// FIXME: We should do a mass-fetch where we fetch JSONs for multiple runs at once.
function fetchTest(repositories, builders, filename, platform, metric, callback) {

    function createRunAndResults(rawRuns) {
        if (!rawRuns)
            return null;

        var runs = new PerfTestRuns(metric, platform);
        var results = rawRuns.map(function (rawRun) {
            // FIXME: Creating PerfTestResult and keeping them alive in memory all the time seems like a terrible idea.
            // We should create PerfTestResult on demand.
            return new PerfTestResult(runs, rawRun, new TestBuild(repositories, builders, platform, rawRun));
        });
        runs.setResults(results.sort(function (a, b) { return a.build().time() - b.build().time(); }));
        return runs;
    }

    $.getJSON('api/runs/' + filename + '?cache=true', function (response) {
        var data = response.configurations;
        callback(createRunAndResults(data.current), createRunAndResults(data.baseline), createRunAndResults(data.target));
    });
}

function fileNameFromPlatformAndTest(platformId, testId) {
    return platformId + '-' + testId + '.json';
}

function init() {
    var allPlatforms;
    var tests = [];
    var fullNameToMetric;
    var dashboardPlatforms;
    var runsCache = {}; // FIXME: We need to clear this cache at some point.
    var repositories;
    var builders;
    var bugTrackers;

    // FIXME: Show some error message when we get 404.
    function getOrFetchTest(platform, metric, callback) {
        var filename = fileNameFromPlatformAndTest(platform.id, metric.id);
        var caches = runsCache[filename];

        if (caches)
            setTimeout(function () { callback(caches.current, caches.baseline, caches.target); }, 0);
        else {
            fetchTest(repositories, builders, filename, platform, metric, function (current, baseline, target) {
                runsCache[filename] = {current:current, baseline:baseline, target:target};
                callback(current, baseline, target);
            });
        }
    }

    function showDashboard() {
        var dashboardTable = $('<table id="dashboard"></table>');
        $('#mainContents').html(dashboardTable);

        // Split dashboard platforms into groups of three so that it doesn't grow horizontally too much.
        // FIXME: Make this adaptive.
        for (var i = 0; i < Math.ceil(dashboardPlatforms.length / 3); i++)
            addPlatformsToDashboard(dashboardTable, dashboardPlatforms.slice(i * 3, (i + 1) * 3));

        URLState.remove('chartList');
    }

    function addPlatformsToDashboard(dashboardTable, selectedPlatforms) {
        var header = document.createElement('thead');
        selectedPlatforms.forEach(function (platform) {
            var cell = document.createElement('th');
            $(cell).text(platform.name);
            header.appendChild(cell);
        });
        dashboardTable.append(header);

        var tbody = $(document.createElement('tbody'));
        dashboardTable.append(tbody);
        var row = document.createElement('tr');
        tbody.append(row);

        selectedPlatforms.forEach(function (platform) {
            var cell = document.createElement('td');
            row.appendChild(cell);

            platform.metrics.forEach(function (metric) {
                var chart = new Chart(cell, true, platform, metric, bugTrackers);
                getOrFetchTest(platform, metric, function (results, baseline, target) {
                    // FIXME: We shouldn't rely on the order in which XHR finishes to order plots.
                    if (dashboardTable.parent().length) {
                        chart.populate(results, baseline, target);
                        chart.attach();
                    }
                });
            });
        });
    }

    function showCharts(lists) {
        var chartsContainer = document.createElement('section');
        chartsContainer.id = 'charts';
        $('#mainContents').html(chartsContainer);

        var testPicker = document.createElement('section');
        testPicker.id = 'testPicker';

        function addOption(select, label, value) {
            var option = document.createElement('option');
            option.appendChild(document.createTextNode(label));
            if (value)
                option.value = value;
            select.appendChild(option);
        }

        var testList = document.createElement('select');
        testList.id = 'testList';
        testPicker.appendChild(testList);
        for (var i = 0; i < tests.length; ++i) {
            if (tests[i].parentTest)
                continue;
            addOption(testList, tests[i].fullName, tests[i].id);
        }

        var metricList = document.createElement('select');
        metricList.id = 'metricList';
        testPicker.appendChild(metricList);

        var platformList = document.createElement('select');
        platformList.id = 'platformList';
        testPicker.appendChild(platformList);
        const OPTION_VALUE_FOR_ALL = '-';
        addOption(platformList, 'All platforms', OPTION_VALUE_FOR_ALL);
        for (var i = 0; i < allPlatforms.length; ++i)
            addOption(platformList, allPlatforms[i].name);

        testList.onchange = function () {
            while (metricList.firstChild)
                metricList.removeChild(metricList.firstChild);

            var metricsGroup = document.createElement('optgroup');
            metricsGroup.label = 'Metrics';
            metricList.appendChild(metricsGroup);
            addOption(metricsGroup, 'All metrics', OPTION_VALUE_FOR_ALL);
            for (var i = 0; i < tests.length; ++i) {
                if (tests[i].id == testList.value) {
                    var selectedTest = tests[i];
                    for (var j = 0; j < selectedTest.metrics.length; ++j) {
                        var fullName = selectedTest.metrics[j].fullName;
                        var relativeName = fullName.replace(selectedTest.fullName, '').replace(/^[:/]/, '');
                        addOption(metricsGroup, relativeName, fullName);
                    }
                }
            }
            var subtestsGroup = document.createElement('optgroup');
            subtestsGroup.label = 'Tests';
            metricList.appendChild(subtestsGroup);
            addOption(subtestsGroup, 'All subtests', OPTION_VALUE_FOR_ALL);
            for (var i = 0; i < tests.length; ++i) {
                if (!tests[i].parentTest || tests[i].parentTest.id != testList.value)
                    continue;
                var subtest = tests[i];
                var selectedTest = subtest.parentTest;
                for (var j = 0; j < subtest.metrics.length; ++j) {
                    var fullName = subtest.metrics[j].fullName;
                    var relativeName = fullName.replace(selectedTest.fullName, '').replace(/^[:/]/, '');
                    addOption(subtestsGroup, relativeName, fullName);
                }
            }
        }
        metricList.onchange = function () {
            var metric = fullNameToMetric[metricList.value];
            var shouldAddAllMetrics = metricList.value === OPTION_VALUE_FOR_ALL;
            for (var i = 0; i < platformList.options.length; ++i) {
                var option = platformList.options[i];
                if (option.value === OPTION_VALUE_FOR_ALL) // Adding all metrics for all platforms will be too slow.
                    option.disabled = shouldAddAllMetrics;
                else {
                    var platform = nameToPlatform[option.value];
                    var platformHasMetric = platform.metrics.indexOf(metric) >= 0;
                    option.disabled = !shouldAddAllMetrics && !platformHasMetric;
                }
            }
        }
        testList.onchange();
        metricList.onchange();

        $(testPicker).append(' <a href="">Add Chart</a>');

        function removeChart(chart) {
            for (var i = 0; i < chartList.length; i++) {
                if (chartList[i][0] == chart.platform().name && chartList[i][1] == chart.metric().fullName) {
                    chartList.splice(i, 1);
                    break;
                }
            }
            URLState.set('chartList', JSON.stringify(chartList));
        }

        function createChartFromListPair(platformName, metricFullName) {
            var platform = nameToPlatform[platformName];
            var metric = fullNameToMetric[metricFullName]
            var chart = new Chart(chartsContainer, false, platform, metric, bugTrackers, removeChart);

            getOrFetchTest(platform, metric, function (results, baseline, target) {
                if (!chartsContainer.parentNode)
                    return;
                chart.populate(results, baseline, target);
                chart.attach();
            });
        }

        $(testPicker).children('a').bind('click', function (event) {
            event.preventDefault();

            var newChartList = [];
            if (platformList.value === OPTION_VALUE_FOR_ALL) {
                for (var i = 0; i < allPlatforms.length; ++i) {
                    createChartFromListPair(allPlatforms[i].name, metricList.value);
                    newChartList.push([allPlatforms[i].name, metricList.value]);
                }
            } else if (metricList.value === OPTION_VALUE_FOR_ALL) {
                var group = metricList.selectedOptions[0].parentNode;
                var metricsToAdd = [];
                for (var i = 0; i < group.children.length; i++) {
                    var metric = group.children[i].value;
                    if (metric == OPTION_VALUE_FOR_ALL)
                        continue;
                    createChartFromListPair(platformList.value, metric);
                    newChartList.push([platformList.value, metric]);
                }
            } else {
                createChartFromListPair(platformList.value, metricList.value);
                newChartList.push([platformList.value, metricList.value]);
            }

            chartList = chartList.concat(newChartList);
            URLState.set('chartList', JSON.stringify(chartList));

            return false;
        });

        $('#mainContents').append(testPicker);

        var chartList = [];
        try {
            chartList = JSON.parse(URLState.get('chartList', ''));
            // FIXME: Should we verify that platform and test names are valid here?
        } catch (exception) {
            // Ignore any exception thrown by parse.
        }

        redirectChartsToV3(chartList);

        chartList.forEach(function (item) { createChartFromListPair(item[0], item[1]); });
    }

    function redirectChartsToV3(chartList)
    {
        var v3URLParams = [];
        var numberOfDays = URLState.get('days');
        if (parseInt(numberOfDays) == numberOfDays)
            v3URLParams.push('since=' + (+Date.now() - numberOfDays * 24 * 3600 * 1000));

        var v3PaneList = [];
        for (var item of chartList) {
            var platform = nameToPlatform[item[0]];
            var metric = fullNameToMetric[item[1]];
            if (platform && metric)
                v3PaneList.push(`(${platform.id}-${metric.id})`);
        }
        v3URLParams.push(`paneList=(${v3PaneList.join('-')})`);

        try {
            var zoomValues = JSON.parse(URLState.get('zoom', '[]'));
            if (zoomValues.length == 2)
                v3URLParams.push(`zoom=(${zoomValues[0]}-${zoomValues[1]})`);
        } catch (error) { }

        location.href = '/v3/#/charts?' + v3URLParams.join('&');
    }

    // FIXME: We should use exponential slider for charts page where we expect to have
    // the full JSON as opposed to the dashboard where we can't afford loading really big JSON files.
    var exponential = true;
    (function () {
        var input = $('#numberOfDays')[0];
        var updating = 0;
        function updateSpanAndCall(newNumberOfDays) {
            $('#numberOfDays').next().text(newNumberOfDays + ' days');
            // FIXME: This is likely broken for non-PST.
            Chart.setMinTime(Date.now() - newNumberOfDays * 24 * 3600 * 1000);
        }
        $('#numberOfDays').bind('change', function () {
            var newNumberOfDays = Math.round(exponential ? Math.exp(input.value) : input.value);
            URLState.remove('zoom');
            Chart.clearZoom();
            URLState.set('days', newNumberOfDays);
            updateSpanAndCall(newNumberOfDays);
        });
        function onchange() {
            var newNumberOfDays = URLState.get('days', Math.round(exponential ? Math.exp(input.defaultValue) : input.defaultValue));
            $('#numberOfDays').val(exponential ? Math.log(newNumberOfDays) : newNumberOfDays);
            updateSpanAndCall(newNumberOfDays);
        }
        URLState.watch('days', onchange);
        onchange();
    })();

    URLState.watch('mode', function () { setMode(URLState.get('mode')); });
    URLState.watch('chartList', function (changedStates) {
        var modeChanged = changedStates.indexOf('mode') >= 0;
        if (URLState.get('mode') == 'charts' && !modeChanged)
            setMode('charts');
    });

    function zoomChartsIfParsedCorrectly() {
        try {
            zoomValues = JSON.parse(URLState.get('zoom', '[]'));
            if (zoomValues.length != 2)
                return false;
            Chart.zoom(parseFloat(zoomValues[0]), parseFloat(zoomValues[1]));
        } catch (exception) {
            // Ignore all exceptions thrown by JSON.parse.
        }
        return true;
    }

    URLState.watch('zoom', function (changedStates) {
        var modeChanged = changedStates.indexOf('mode') >= 0;
        if (URLState.get('mode') == 'charts' && !modeChanged) {
            if (!zoomChartsIfParsedCorrectly())
                return Chart.clearZoom();
        }
    });

    Chart.onzoomchange = function (from, to) {
        if (from && to)
            URLState.set('zoom', JSON.stringify([from, to]));
        else
            URLState.remove('zoom');
    }

    window.openChart = function (platform, metric) {
        URLState.set('chartList', JSON.stringify([[platform.name, metric.fullName]]));
        setMode('charts');
    }

    window.setMode = function (newMode) {
        URLState.set('mode', newMode);

        Chart.clear();
        if (newMode == 'dashboard') {
            URLState.remove('zoom');
            Chart.clearZoom();
            showDashboard();
        } else { // FIXME: Dynamically obtain the list of tests to show.
            showCharts();
            zoomChartsIfParsedCorrectly();
        }
    }

    function fullName(test) {
        var names = [];
        do {
            names.push(test.name);
            test = test.parentTest;
        } while (test);
        names.reverse();
        return names.join('/');
    }

    // Perhaps we want an ordered list of platforms.
    $.getJSON('data/manifest.json', function (data) {
        var manifest = data;

        nameToTest = {};
        for (var testId in manifest.tests) {
            var test = manifest.tests[testId];
            test.parentTest = manifest.tests[manifest.tests[testId].parentId];
            test.id = testId;
            test.metrics = [];
            tests.push(test);
        }
        tests.forEach(function (test) {
            test.fullName = fullName(test);
            nameToTest[test.fullName] = test;
        });
        tests.sort(function (a, b) {
            if (a.fullName < b.fullName)
                return -1;
            if (a.fullName > b.fullName)
                return 1;
            return 0;
        });

        fullNameToMetric = {};
        for (var metricId in manifest.metrics) {
            var entry = manifest.metrics[metricId];
            entry.id = metricId;
            entry.test = manifest.tests[entry.test];
            entry.fullName = entry.test.fullName + ':' + entry.name;
            if (entry.aggregator)
                entry.fullName += ':' + entry.aggregator;
            entry.test.metrics.push(entry);
            fullNameToMetric[entry.fullName] = entry;
        }

        tests.forEach(function (test) {
            test.metrics.sort(function (a, b) {
                if (a.name < b.name)
                    return -1;
                if (a.name > b.name)
                    return 1;
                return 0;
            });
        });

        allPlatforms = [];
        nameToPlatform = {};
        for (var platformId in manifest.all) {
            var platform = manifest.all[platformId];
            platform.id = platformId;
            allPlatforms.push(platform);
            nameToPlatform[platform.name] = platform;
            // FIXME: Sort tests
            for (var i = 0; i < platform.metrics.length; ++i)
                platform.metrics[i] = manifest.metrics[platform.metrics[i]];
        }
        allPlatforms.sort(function (a, b) { return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0); });

        dashboardPlatforms = [];
        for (var platformId in manifest.dashboard) {
            var platform = manifest.dashboard[platformId];
            platform.id = platformId;
            for (var i = 0; i < platform.metrics.length; ++i)
                platform.metrics[i] = manifest.metrics[platform.metrics[i]];
            platform.metrics.sort(function (a, b) { return a.fullName < b.fullName ? -1 : (a.fullName > b.fullName ? 1 : 0); });
            dashboardPlatforms.push(manifest.dashboard[platformId]);
        }
        dashboardPlatforms.sort(function (a, b) { return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0); });

        repositories = manifest.repositories;
        builders = manifest.builders;
        bugTrackers = manifest.bugTrackers;

        document.title = manifest.siteTitle;
        document.getElementById('siteTitle').textContent = manifest.siteTitle;

        setMode(URLState.get('mode', 'dashboard'));
    });
}

window.addEventListener('DOMContentLoaded', init, false);

</script>
</head>
<body>

<header id="title">
<h1><a id="siteTitle" href="/">Perf Monitor</a></h1>
<ul>
    <li id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></li>
    <li><a href="javascript:setMode('dashboard');">Dashboard</a></li>
    <li><a href="javascript:setMode('charts');">Charts</a></li>
</ul>
</header>

<div id="mainContents"></div>
</body>
</html>