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

    var $ui = {}, items = [];

    renderUI(function() {
        loadJSON(function(files) {
            loadHTML(files, function() {
                renderList();
            });
        });
    });

    function loadJSON(callback) {
        Ox.getJSON('json/readme.json', callback);
    }

    function loadHTML(files, callback) {
        files.forEach(function(file) {
            Ox.get('html/' + file.name, function(html) {
                var match = html.match(/<p class="title">(.+)<\/p>/);
                items.push({
                    date: file.date,
                    file: file.name,
                    html: html,
                    title: match ? match[1] : file
                });
                items.length == files.length && callback(items);
            });
        });
    }

    function renderUI(callback) {
        $ui.logo = $('<a>').attr({href: 'https://oxjs.org'})
            .append(
                $('<img>').attr({src: '../source/Ox/png/OxJS64.png'})
            );
        $ui.title = $('<a>').attr({href: 'https://oxjs.org/#readme'})
            .append(
                $('<div>').css({color: 'rgb(192, 192, 192)'}).html('readme')
            );
        $ui.bar = Ox.Bar({size: 24})
            .addClass('head')
            .append($ui.logo)
            .append($ui.title);
        $ui.text = Ox.Element().addClass('text'),
        $ui.inner = Ox.SplitPanel({
                elements: [
                    {
                        element: Ox.Element(),
                        resizable: true,
                        resize: [256, 384, 512],
                        size: 384
                    },
                    {
                        element: $ui.text
                    }
                ],
                orientation: 'horizontal'
            });
        $ui.outer = Ox.SplitPanel({
                elements: [
                    {
                        element: $ui.bar,
                        size: 24
                    },
                    {
                        element: $ui.inner
                    }
                ],
                orientation: 'vertical'
            })
            .appendTo(Ox.$body);
        callback();       
    }

    function renderList() {
        Ox.print('?', items)
        $ui.list = Ox.TextList({
                columns: [
                    {
                        id: 'file',
                        unique: true
                    },
                    {
                        id: 'title',
                        operator: '+',
                        title: 'Title',
                        visible: true,
                        width: 256
                    },
                    {
                        align: 'right',
                        format: function(value) {
                            return Ox.formatDate(value, '%B %e, %Y', true);
                        },
                        id: 'date',
                        operator: '-',
                        title: 'Date',
                        visible: true,
                        width: 128
                    }
                ],
                columnsVisible: true,
                items: Ox.api(items, {unique: 'file'}),
                max: 1,
                min: 1,
                selected: [items[0].file],
                sort: [{key: 'date', operator: '-'}]
            })
            .bindEvent({
                resize: function(data) {
                    this.resizeColumn('title', data.size - 128);
                },
                select: selectText
            });
        $ui.inner.replaceElement(0, $ui.list);
        selectText({ids: [items[0].file]});
    }

    function selectText(data) {
        Ox.print(data)
        if (data.ids.length) {
            $ui.text.html(Ox.getObject(items, 'file', data.ids[0]).html);
        } else {
            $ui.text.empty();
        }
    }

});