Ox.load('UI', {
    debug: true,
    theme: 'classic'
}, function() {
    Ox.load('Geo', function() {
        var $div = $('<div>')
                .css({
                    width: window.innerWidth,
                    height: window.innerHeight,
                    overflowY: 'scroll'
                })
                .appendTo(Ox.UI.$body),
            colors = [
                [[255, 64, 64], [224, 32, 32]],
                [[64, 192, 64], [32, 160, 32]]
            ],
            counter = 0,
            files = [
                Ox.PATH + 'Ox.js',
                Ox.PATH + 'Ox.Geo/Ox.Geo.js'
            ],
            tests = [];
        files.forEach(function(file) {
            Ox.test(file, function(fileTests) {
                tests = Ox.merge(tests, fileTests);
                if (++counter == files.length) {
                    renderTests();
                }
            });
        });
        function renderTests() {
            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($div);
            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($div);
                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($div);
                });
            });
        }
        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'
                });
            ['moz', 'webkit'].forEach(function(browser) {
                Ox.print('-' + browser + '-linear-gradient(left top, left bottom, rgb(' +
                    getColor(success, 0) + '), rgb(' +
                    getColor(success, 1) + '))')
                $div.css({
                    background: '-' + browser + '-linear-gradient(top, rgb(' +
                        getColor(success, 0) + '), rgb(' +
                        getColor(success, 1) + '))'
                });
            });
            function getColor(success, i) {
                return colors[+success][i].map(function(color) {
                    return color - (darker || 0) * 32;
                }).join(', ')
            }
            return $div;
        }
    });
});