'use strict';

oml.ui.info = function() {

    var ui = oml.user.ui,

        that = Ox.Element()
            .addClass('OxTextPage')
            .css({
                padding: '0 16px',
                textAlign: 'center',
                overflowY: 'auto'
            })
            .bindEvent({
                toggle: function(data) {
                    oml.UI.set({showInfo: !data.collapsed});
                },
                oml_icons: function() {
                    that.updateElement();
                },
                oml_item: function() {
                    that.updateElement();
                },
                oml_listselection: function() {
                    that.updateElement();
                }
            });

    that.updateElement = function() {
        var id = ui.item || ui.listSelection[0];
        Ox.Request.clearCache('get');
        if (id) {
            oml.api.get({
                id: id,
                keys: [
                    'author', 'coverRatio',
                    'description', 'modified', 'title'
                ]
            }, function(result) {
                var data = result.data;
                that.empty();
                $('<img>')
                    .attr({
                        src: '/' + id + '/' + ui.icons + '128.jpg?'
                            + data.modified
                    })
                    .css({margin: '16px 0 8px 0'})
                    .appendTo(that);
                $('<div>')
                    .addClass('OxSelectable')
                    .css({fontWeight: 'bold'})
                    .text(data.title || '')
                    .appendTo(that);
                $('<div>')
                    .addClass('OxSelectable')
                    .css({fontWeight: 'bold'})
                    .text(oml.formatAuthor(data.author))
                    .appendTo(that);
                $('<div>')
                    .addClass('OxSelectable')
                    .css({marginTop: '8px'})
                    .text(result.data.description || '')
                    .appendTo(that);
                $('<div>')
                    .css({height: '16px'})
                    .appendTo(that);
            });
        } else {
            that.empty();
        }
        return that;
    };

    return that.updateElement();

};