Ox.load('UI', function() {

    //Ox.UI.ready(function() {

    var $body = $('body')
            .css({
                overflowY: 'auto'
            }),
        $tests = new Ox.Bar({
                size: 20
            })
            .css({
                padding: '6px 0 6px 8px',
                fontSize: '16px',
                fontWeight: 'bold'
            })
            .appendTo($body);
        colors = [
            ['255, 64, 64', '224, 32, 32', '240, 16, 16'],
            ['64, 192, 64', '32, 160, 32', '40, 176, 48'],
            ['96, 96, 255', '64, 64, 224', '80, 80, 240']
        ];

    setBackground($tests, true);

    tests(['../build/Ox.js'/*, '../build/js/ox.data.js'*/]);

    function tests() {
        var passed = 0, failed = 0,
            lines, spaces, command, expected, result, passed,
            replace = ['', ''], fns = [], $test
        Ox.forEach(Ox.isArray(arguments[0]) ? arguments[0] : arguments, function(script, i) {
            Ox.test(script, function(results) {
                var tests = {};
                results.forEach(function(result) {
                    tests[result.section] = tests[result.section] || {};
                    tests[result.section][result.name] = tests[result.section][result.name] || [];
                    tests[result.section][result.name].push(result);
                });
                Ox.forEach(tests, function(functions, section) {
                    Ox.Bar({size: 14})
                        .css({padding: '1px 0 1px 4px'})
                        .html(Ox.basename(script) + ' ' + section)
                        .appendTo($body);
                    Ox.forEach(functions, function(arr, fn) {
                        var $test = Ox.CollapsePanel({
                                collapsed: true,
                                title: fn + '()'
                            })
                            .appendTo($body);
                        setBackground($test.find('.OxBar'), true);
                        arr.forEach(function(test) {
                            passed += test.passed;
                            failed += !test.passed;
                            $tests.html(
                                (passed + failed) + ' tests, '
                                + passed + ' passed, ' + failed + ' failed'
                            );
                            if (!test.passed) {
                                setBackground($tests, false);
                                setBackground($test.find('.OxBar'), false);
                            }
                            Ox.Element()
                                .css({
                                    padding: '2px 0 2px 4px',
                                    background: 'rgb(' + colors[+test.passed][2] + ')'
                                })
                                .html(
                                    '<span style="font-family: Monaco">'
                                    + Ox.encodeHTML(test.statement) + ' '
                                    + (test.passed ? '=' : '!') + '=&gt; '
                                    + Ox.encodeHTML(test.expected)
                                    + (test.passed ? '' : ' ==&gt; ' + Ox.encodeHTML(test.actual))
                                    + '</tt>'
                                )
                                .appendTo($test.$content);
                        });
                        $test.$content.css({
                            marginTop: -$test.$content.height() + 'px'
                        });
                    });
                });
            })
        });
    }

    function setBackground($element, passed) {
        ['-moz-linear-gradient', '-webkit-linear-gradient'].forEach(function(v) {
            $element.css({
                background: v + '(top, rgb(' +
                    colors[+passed][0] + '), rgb(' +
                    colors[+passed][1] + '))'
            });
        });
    }

});