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 succeeded = 0, failed = 0,
            lines, spaces, command, expected, result, success,
            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.print('tests', tests)
                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) {
                            succeeded += test.success;
                            failed += !test.success;
                            $tests.html(
                                (succeeded + failed) + ' tests, '
                                + succeeded + ' succeeded, ' + failed + ' failed'
                            );
                            if (!test.success) {
                                setBackground($tests, false);
                                setBackground($test.find('.OxBar'), false);
                            }
                            Ox.Element()
                                .css({
                                    padding: '2px 0 2px 4px',
                                    background: 'rgb(' + colors[+test.success][2] + ')'
                                })
                                .html(
                                    '<span style="font-family: Monaco">'
                                    + Ox.encodeHTML(test.statement) + ' '
                                    + (test.success ? '=' : '!') + '=&gt; '
                                    + Ox.encodeHTML(test.expected)
                                    + (test.success ? '' : ' ==&gt; ' + Ox.encodeHTML(test.actual))
                                    + '</tt>'
                                )
                                .appendTo($test.$content);
                        });
                        $test.$content.css({
                            marginTop: -$test.$content.height() + 'px'
                        });
                    });
                });
            })
            /*
            $.get(script, function(data) {
                Ox.print(script, Ox)
                new Ox.Bar({size: 17})
                    .css({padding: '3px 0 0 8px'})
                    .html(Ox.basename(script))
                    .appendTo($body);
                lines = data.split('\n');
                $.each(lines, function(l, line) {
                    if (line.indexOf('/*') > -1 && lines[l + 1].indexOf('====') > -1) {
                        new Ox.Bar({size: 17})
                            .css({padding: '3px 0 0 24px'})
                            .html($.trim(lines[l + 2]))
                            .appendTo($body);
                        //setBackground(x, 2)
                    }
                    spaces = line.indexOf('>>> ');
                    if (spaces > -1) {
                        command = $.trim(line).substr(4).split(' // ')[0];
                        fn = command.match(/Ox\.\w+/g);
                        Ox.print('fn', fn)
                        //Ox.print(lines[l + 1].substr(spaces, lines[l + 1].length), eval(lines[l + 1].substr(spaces, lines[l + 1].length)))
                        Ox.print(lines[l + 1].substr(spaces, lines[l + 1].length));
                        expected = eval(lines[l + 1].substr(spaces, lines[l + 1].length));
                        // fixme: if object, recursively check identity
                        result = eval(command);
                        if (fn) {
                            fn = fn[fn.length - 1];
                            success = typeof expected == 'object' ?
                                expected.toString() == result.toString() : expected === result;
                            Ox.print('command:', command, 'expected:', expected, 'result:', result)
                            success = Ox.isEqual(expected, result);
                            succeeded += success;
                            failed += !success;
                            $tests.html((succeeded + failed) + ' tests, ' +
                                succeeded + ' succeeded, ' + failed + ' failed');
                            if (!success) {
                                setBackground($tests, success);
                            }
                            if ($.inArray(fn, fns) == -1) {
                                fns.push(fn);
                                $test = Ox.CollapsePanel({
                                        collapsed: true,
                                        title: fn + '()'
                                    })
                                    .appendTo($body);
                                setBackground($test.find('.OxBar'), true);
                            }
                            new Ox.Bar({size:17}) // fixme: Ox.Object() used to work
                                .css({
                                    //padding: '2px 0 2px 8px',
                                    background: 'rgb(' + colors[+success][2] + ')'
                                })
                                .html(
                                    Ox.basename(script) + ', line ' + l + ': <span style="font-weight: bold">' +
                                    Ox.encodeHTML(command).replace(replace[0], replace[1]) + ' ' +
                                    (success ? '=' : '!') + '=&gt; ' + Ox.encodeHTML(JSON.stringify(expected)) +
                                    (success ? '' : ' ==&gt; ' + Ox.encodeHTML(JSON.stringify(result))) + '</span>'
                                )
                                .appendTo($test.$content);
                            $test.$content
                                .css({
                                    marginTop: -$test.$content.height() + 'px'
                                });
                        } else {
                            replace = command.split(' = ')
                        }
                    }
                });
            }, 'html');
            */
        });
    }

    //});

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

});