Ox.load('UI', {
    debug: true,
    theme: 'classic'
}, function() {
    var colors = [
            [[255, 64, 64], [224, 32, 32]],
            [[64, 192, 64], [32, 160, 32]]
        ],
        gradients = [
            '-moz-linear-gradient(', 
            '-webkit-gradient(linear, '
        ];
    var $foo = $('<div>')
        .css({
            width: window.innerWidth,
            height: window.innerHeight,
            overflowY: 'scroll'
        })
        .appendTo(Ox.UI.$body);
    Ox.test(Ox.PATH + 'Ox.js', function(tests) {
        var total = tests.length,
            succeeded = tests.filter(function(test) {
                return test.success;
            }).length,
            failed = total - succeeded,
            names = Ox.unique(tests.map(function(test) {
                return test.name;
            })).sort();
            testsByName = {};
        tests.forEach(function(test) {
            if (!(test.name in testsByName)) {
                testsByName[test.name] = [];
            }
            testsByName[test.name].push(test);
        });
        getBar(total == succeeded)
            .html(
                '<b>' + total + ' tests, ' +
                succeeded + ' succeeded, ' + failed + ' failed</b>'
            )
            .appendTo($foo);
        names.forEach(function(name) {
            var tests = testsByName[name],
                total = tests.length,
                succeeded = tests.filter(function(test) {
                    return test.success;
                }).length,
                failed = total - succeeded,
                classname = name.replace('.', '');
            getBar(total == succeeded)
                .html(
                    '<b>' + name + '</b> &mdash; ' + total +
                    ' test' + (total == 1 ? '' : 's') + ', ' +
                    succeeded + ' succeeded, ' + failed + ' failed</b>'
                )
                .click(function() {
                    $('.' + classname).toggle();
                })
                .appendTo($foo);
            tests.forEach(function(test) {
                getBar(test.success, true)
                    .addClass(classname)
                    .html(
                        Ox.repeat('&nbsp;', 4) +
                        '<b>&gt; ' + Ox.encodeHTML(test.statement) + ' </b> ==&gt; ' +
                        (test.success ? '' : Ox.encodeHTML(test.actual) + ' !=&gt; ') +
                        Ox.encodeHTML(test.expected)
                    )
                    .hide()
                    .appendTo($foo);
            });
        });
    });
    function getBar(success, darker) {
        var $div = $('<div>')
            .css({
                width: window.innerWidth - Ox.UI.SCROLLBAR_SIZE,
                height: '15px',
                padding: '4px 8px 4px 8px',
                fontFamily: 'Menlo, Monaco, Courier',
                fontSize: '12px',
                whiteSpace: 'nowrap',
                MozUserSelect: 'text',
                WebkitUserSelect: 'text'
            });
        gradients.forEach(function(gradient) {
            $div.css({
                background: gradient + 'left top, left bottom, from(rgb(' +
                    getColor(success, 0) + ')), to(rgb(' +
                    getColor(success, 1) + ')))'
            });
        });
        function getColor(success, i) {
            return colors[+success][i].map(function(color) {
                return color - (darker || 0) * 32;
            }).join(', ')
        }
        return $div;
    }
});