'use strict';

Ox.ClipPanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            clips: [],
            editable: false,
            'in': 0,
            out: 0,
            position: 0,
            selected: '',
            sort: [],
            sortOptions: [],
            view: 'list',
            width: 0
        })
        .options(options || {})
        .update({
            clips: function() {
                self.$list.options({items: self.options.clips});
            }
        });

    self.$menubar = Ox.Bar({
            size: 24
        })
        .bindEvent({
            doubleclick: function(e) {
                if ($(e.target).is('.OxBar')) {
                    self.$list.animate({scrollTop: 0}, 250);
                }
            }
        });

    self.$viewElement = Ox.ButtonGroup({
            buttons: [
                {id: 'list', title: 'list', tooltip: Ox._('View as List')},
                {id: 'grid', title: 'grid', tooltip: Ox._('View as Grid')}
            ],
            selectable: true,
            type: 'image',
            value: self.options.view
        })
        .css({
            float: 'left',
            margin: '4px 2px 4px 4px'
        })
        .bindEvent({
            change: function(data) {
                Ox.print(data);
            }
        })
        .appendTo(self.$menubar);

    self.$sortSelect = Ox.Select({
            items: self.options.sortOptions,
            value: self.options.sort[0].key,
            width: 84 + Ox.UI.SCROLLBAR_SIZE
        })
        .bindEvent({
            change: function(data) {
                that.triggerEvent('sort', {
                    key: data.value,
                    operator: Ox.getObjectById(
                        self.options.sortOptions, data.value
                    ).operator
                });
            }
        });

    self.$orderButton = Ox.Button({
            overlap: 'left',
            title: getButtonTitle(),
            tooltip: getButtonTooltip(),
            type: 'image'
        })
        .bindEvent({
            click: function() {
                that.triggerEvent('sort', {
                    key: self.options.sort[0].key,
                    operator: self.options.sort[0].operator == '+' ? '-' : '+'
                });
            }
        });

    self.$sortElement = Ox.FormElementGroup({
            elements: [self.$sortSelect, self.$orderButton],
            float: 'right'
        })
        .css({
            float: 'right',
            margin: '4px 4px 4px 2px'
        })
        .appendTo(self.$menubar);

    if (self.options.view == 'list') {
        self.$list = Ox.TableList({
            columns: [
                {
                    align: 'right',
                    id: 'index',
                    operator: '+',
                    title: Ox._('Index'),
                    visible: false,
                    width: 60
                },
                {
                    id: 'id',
                    operator: '+',
                    title: Ox._('ID'),
                    unique: true,
                    visible: false,
                    width: 60
                },
                {
                    id: 'item',
                    operator: '+',
                    title: Ox._(pandora.site.itemName.singular),
                    visible: true,
                    width: 60
                },
                {
                    align: 'right',
                    editable: isEditable,
                    format: function(value) {
                        return Ox.formatDuration(value, 3);
                    },
                    id: 'in',
                    operator: '+',
                    title: Ox._('In'),
                    visible: true,
                    width: 90
                },
                {
                    align: 'right',
                    editable: isEditable,
                    format: function(value) {
                        return Ox.formatDuration(value, 3);
                    },
                    id: 'out',
                    operator: '+',
                    title: Ox._('Out'),
                    visible: true,
                    width: 90
                },
                {
                    align: 'right',
                    editable: isEditable,
                    format: function(value) {
                        return Ox.formatDuration(value, 3);
                    },
                    id: 'duration',
                    operator: '+',
                    title: Ox._('Duration'),
                    visible: true,
                    width: 90
                }
            ],
            columnsMovable: true,
            columnsRemovable: true,
            columnsResizable: true,
            columnsVisible: true,
            items: self.options.clips,
            scrollbarVisible: true,
            sort: self.options.sort,
            sortable: self.options.editable && self.options.sort[0].key == 'index',
            unique: 'id'
        });
    } else {
        self.$list = Ox.IconList({
            
        });
    }
    self.$list.bindEvent({
        copy: function(data) {
            that.triggerEvent('copy', data);
        },
        cut: function(data) {
            that.triggerEvent('cut', data);
        },
        'delete': function(data) {
            that.triggerEvent('remove', data);
        },
        move: function(data) {
            data.ids.forEach(function(id, index) {
                Ox.print('????', id, index);
                self.$list.value(id, 'index', index);
            });
            that.triggerEvent('move', data);
        },
        open: function(data) {
            that.triggerEvent('open', data);
        },
        paste: function() {
            that.triggerEvent('paste');
        },
        select: function(data) {
            that.triggerEvent('select', data);
        },
        sort: function(data) {
            self.options.sort = self.$list.options('sort');
            self.$list.options({sortable: isSortable()});
            that.triggerEvent('sort', data);
        },
        submit: function(data) {
            data.value = Ox.parseDuration(data.value);
            self.$list.value(data.id, data.key, data.value);
            that.triggerEvent('edit', data);
        }
    });

    self.$statusbar = Ox.Bar({
        size: 16
    });

    that.setElement(
        Ox.SplitPanel({
            elements: [
                {
                    element: self.$menubar,
                    size: 24
                },
                {
                    element: self.$list
                },
                {
                    element: self.$statusbar,
                    size: 16
                }
            ],
            orientation: 'vertical'
        })
    );

    function cutClips() {
        
    }

    function editClip(data) {
        var value = self.$list.value(data.id, data.key);
        if (data.value != value && !(data.value === '' && value === null)) {
            self.$list.value(data.id, data.key, data.value || null);
            that.triggerEvent('edit', data);
        }
    }

    function getButtonTitle() {
        return self.options.sort[0].operator == '+' ? 'up' : 'down';
    }

    function getButtonTooltip() {
        return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending');
    }

    function isEditable(data) {
        return self.options.editable && !data.annotation;
    }

    function isSortable() {
        return self.options.editable && self.options.sort[0].key == 'index';
    }

    function moveClips(data) {
        Ox.Request.clearCache();
        pandora.api.sortClips({
            edit: pandora.user.ui.edit,
            ids: data.ids
        })
    }

    function openClips(data) {
        
    }

    function pasteClips() {
        
    }

    function removeClips() {
        
    }

    function updateSortElement() {
        
    }

    that.updateItem = function(id, data) {
        ['in', 'out', 'duration'].forEach(function(key) {
            self.$list.value(id, key, data[key]);
        });
    };

    return that;

};