// vim: et:ts=4:sw=4:sts=4:ft=javascript

Ox.load('UI', function() {
    Ox.Theme('classic');
    window.app = new Ox.App({url: '/api/'}).bindEvent({
        load: function(event, data) {
            app.site = {
                 sortKeys: $.map(data.site.itemKeys, function(key, i) {
                    return key.columnWidth ? key : null;
                 })
            };
            var position = 0;
            app.main = Ox.SplitPanel({
                elements: [
                    {
                        element: app.list = Ox.TextList({
                            columns: $.map(app.site.sortKeys, function(key, i) {
                                var pos = -1;
                                if($.inArray(key.id, ['subject', 'origin', 'created'])>=0)
                                   pos = position++;
                                return {
                                    align: ['string', 'text'].indexOf(
                                        Ox.isArray(key.type) ? key.type[0]: key.type
                                    ) > -1 ? 'left' : 'right',
                                    defaultWidth: key.columnWidth,
                                    format: key.format,
                                    id: key.id,
                                    operator: '+',
                                    position: pos,
                                    removable: !key.columnRequired,
                                    title: key.title,
                                    type: key.type,
                                    unique: key.id == 'refid',
                                    visible: $.inArray(key.id, ['subject', 'origin', 'created'])>=0,
                                    width: key.columnWidth
                                };
                            }),
                            columnsMovable: true,
                            columnsRemovable: true,
                            columnsResizable: true,
                            columnsVisible: true,
                            draggable: true,
                            items: function(data, callback) {
                                app.api.find(data, callback);
                            },
                            scrollbarVisible: true,
                            sort: [{key: 'created', operator: '-'}]
                        }).bindEvent({
                            select: function(data) {
                                data.ids.length && select(data.ids[0]);
                            }
                        })
                    },
                    {
                        element: app.cable = Ox.Element().addClass('OxSelectable').css({overflow: 'auto'}),
                        collapsible: true,
                        size: 600,
                        resizable: true,
                        resize: [200, 400, 600]
                    }
                ],
                orientation: 'horizontal'
            });
            app.find = Ox.Input({
                    clear: true,
                    id: 'input',
                    placeholder: 'Find...',
                    value: '',
                    width: 192
            }).css({
                float: 'right',
                margin: '4px'
            })
            .bindEvent({
                submit: function(data) {
                    find({conditions: [{key: 'content', value: data.value, operator: ''}]});
                }
            });
            app.frame = Ox.SplitPanel({
                elements: [
                    {
                        element: app.bar = Ox.Bar().append(app.find),
                        size: 24
                    },
                    {
                        element: app.main
                    }
                ],
                orientation: 'vertical'
            }).appendTo($('body'));
            if(document.location.hash) {
                select(document.location.hash.substring(1));
            }
        }
    });
});
function select(id) {
    app.api.get({id: id}, function(result) {
        var term = app.find.value(),
            header = result.data.header,
            content = result.data.content;
        document.location.hash = '#' + result.data.refid;
        if(term) {
            header = Ox.highlight(header, term, 'highlight');
            content = Ox.highlight(content, term, 'highlight');
        }
        app.cable.html('')
                 .append($('<div>').css('padding', '8px')
                     .addClass('OxSelectable')
                     .append($('<pre>').html(header))
                     .append($('<pre>').html(content)
                 ))
                 .scrollTop(0);
    }); 
}
function find(query) {
    app.list.options({
        items: function(data, callback) {
            app.api.find(Ox.extend(data, {
                query: query
            }), callback);
        }
    });
}