// fixme: this is not necessarily part of OxUI

/*
============================================================================
Pan.do/ra
============================================================================
*/

Ox.FilesView = function(options, self) {

    var self = self || {},
        that = new Ox.Element('div', self)
            .defaults({
                id: ''
            })
            .options(options || {});

    self.$toolbar = new Ox.Bar({
        size: 24
    });

    self.$orderButton = new Ox.Button({
            title: 'Change Order of Users...'
        })
        .css({
            float: 'left',
            margin: '4px'
        })
        .appendTo(self.$toolbar);

    self.$moveButton = new Ox.Button({
            disabled: 'true',
            title: 'Move Selected Files...'
        })
        .css({
            float: 'right',
            margin: '4px'
        })
        .appendTo(self.$toolbar);

    self.$filesList = new Ox.TextList({
            columns: [
                {
                    align: 'left',
                    id: 'users',
                    operator: '+',
                    title: 'Users',
                    visible: true,
                    width: 120
                },
                {
                    align: 'left',
                    id: 'folder',
                    operator: '+',
                    title: 'Folder',
                    visible: true,
                    width: 180
                },
                {
                    align: 'left',
                    id: 'name',
                    operator: '+',
                    title: 'Name',
                    visible: true,
                    width: 360
                },
                {
                    align: 'left',
                    id: 'type',
                    operator: '+',
                    title: 'Type',
                    visible: true,
                    width: 60
                },
                {
                    align: 'right',
                    id: 'part',
                    operator: '+',
                    title: 'Part',
                    visible: true,
                    width: 60
                },
                {
                    align: 'right',
                    format: {type: 'value', args: ['B']},
                    id: 'size',                    
                    operator: '-',
                    title: 'Size',
                    visible: true,
                    width: 90
                },
                {
                    align: 'right',
                    format: {type: 'resolution', args: ['px']},
                    id: 'resolution',
                    operator: '-',
                    title: 'Resolution',
                    visible: true,
                    width: 90
                },
                {
                    align: 'right',
                    format: {type: 'duration', args: [0, 'short']},
                    id: 'duration',
                    operator: '-',
                    title: 'Duration',
                    visible: true,
                    width: 90
                },
                {
                    align: 'left',
                    id: 'oshash',
                    operator: '+',
                    title: 'Hash',
                    unique: true,
                    visible: false,
                    width: 120
                },
                {
                    align: 'left',
                    id: 'instances',
                    operator: '+',
                    title: 'Instances',
                    visible: false,
                    width: 120
                }
            ],
            columnsMovable: true,
            columnsRemovable: true,
            columnsResizable: true,
            columnsVisible: true,
            id: 'files',
            items: function(data, callback) {
                pandora.api.findFiles($.extend(data, {
                    query: {
                        conditions: [{
                            key: 'id',
                            value: self.options.id,
                            operator: '='
                        }]
                    }
                }), callback);
            },
            scrollbarVisible: true,
            sort: [{key: 'name', operator:'+'}]
        })
        .bindEvent({
            open: openFiles,
            select: selectFiles
        });

    self.$instancesList = new Ox.Element()
        .html('No files selected');

    that.$element = new Ox.SplitPanel({
            elements: [
                {
                    element: self.$toolbar,
                    size: 24
                },
                {
                    element: self.$filesList
                },
                {
                    element: self.$instancesList,
                    size: 80
                }
            ],
            orientation: 'vertical'
        });

    function openFiles(event, data) {
        //alert(JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
    }

    function selectFiles(event, data) {
        //alert(JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
    }

    return that;

};