'use strict';

Ox.ClipPanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            clips: [],
            duration: 0,
            editable: false,
            getClipImageURL: null,
            'in': 0,
            out: 0,
            position: 0,
            selected: '',
            sort: [],
            sortOptions: [],
            view: 'list',
            width: 0
        })
        .options(options || {})
        .update({
            clips: function() {
                self.$list.options({
                    items: Ox.clone(self.options.clips),
                    sort: self.options.sort,
                    sortable: isSortable()
                });
                updateStatus();
            },
            duration: updateStatus,
            height: function() {
                self.$list.size();
            },
            sort: function() {
                updateSortElement();
                self.$list.options({
                    sort: self.options.sort,
                    sortable: isSortable(),
                });
            }
        })
        .bindEvent({
            resize: function() {
                self.$list.size();
            }
        });

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

    self.$menu = Ox.MenuButton({
            items: [
                {group: 'view', min: 1, max: 1, items: [
                    {id: 'list', title: Ox._('View as List'), checked: self.options.view == 'list'},
                    {id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'},
                ]},
                {},
                {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: true},
                {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: true},
                {id: 'dereference', title: Ox._('Make Selected Clips Static'), disabled: true}
            ],
            title: 'set',
            tooltip: Ox._('Options'),
            type: 'image'
        })
        .css({
            float: 'left',
            margin: '4px 2px 4px 4px'
        })
        .bindEvent({
            change: function(data) {
                if (data.id == 'view') {
                    self.options.view = data.checked[0].id;
                    self.$panel.replaceElement(1, self.$list = getList());
                    that.triggerEvent('view', {view: self.options.view});
                }
            },
            click: function(data) {
                
            }
        })
        .appendTo(self.$menubar),

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

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

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

    self.$list = getList();

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

    self.$status = Ox.Element()
        .css({
            marginTop: '2px',
            fontSize: '9px',
            textAlign: 'center',
            textOverflow: 'ellipsis'
        })
        .appendTo(self.$statusbar);

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

    updateStatus();

    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 getList() {
        var $list;
        if (self.options.view == 'list') {
            $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: Ox.clone(self.options.clips),
                scrollbarVisible: true,
                sort: self.options.sort,
                sortable: isSortable(),
                unique: 'id'
            });
        } else {
            $list = Ox.IconList({
                draggable: true,
                fixedRatio: pandora.site.video.previewRatio,
                item: function(data, sort, size) {
                    size = size || 128; // fixme: is this needed?
                    var ratio = data.videoRatio,
                        fixedRatio = pandora.site.video.previewRatio,
                        width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
                        height = Math.round(width / ratio),
                        info,
                        title = data.title + (
                            data.director ? ' (' + data.director.join(', ') + ')' : ''
                        ),
                        url = self.options.getClipImageURL(data.id, width, height);
                    if (['text', 'position', 'duration', 'random'].indexOf(sort[0].key) > -1) {
                        info = Ox.formatDuration(data['in']) + ' - '
                            + Ox.formatDuration(data.out);
                    } else {
                        info = Ox.formatDuration(data['in']) + ' - '
                            + Ox.formatDuration(data.out);
                    }
                    return {
                        height: height,
                        id: data.id,
                        info: info,
                        title: title,
                        url: url,
                        width: width
                    };
                },
                items: self.options.clips,
                keys: ['id', 'in', 'out'],
                orientation: 'both',
                sort: self.options.sort,
                unique: 'id'
            });
        }
        $list.bindEvent({
            copy: function(data) {
                that.triggerEvent('copy', data);
            },
            copyadd: function(data) {
                that.triggerEvent('copyadd', data);
            },
            'delete': function(data) {
                that.triggerEvent('remove', data);
            },
            move: function(data) {
                data.ids.forEach(function(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 = [data];
                updateSortElement();
                self.$list.options({sortable: isSortable()});
                that.triggerEvent('sort', self.options.sort);
            },
            submit: function(data) {
                data.value = Ox.parseDuration(data.value);
                self.$list.value(data.id, data.key, data.value);
                that.triggerEvent('edit', data);
            }
        });
        return $list;
    }

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

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

    function updateSortElement() {
        self.$sortSelect.options({
            value: self.options.sort[0].key,
        });
        self.$orderButton.options({
            title: getButtonTitle(),
            tooltip: getButtonTooltip(),
        });
    }

    function updateStatus() {
        self.$status.html(
            Ox.toTitleCase(Ox.formatCount(self.options.clips.length, 'Clip'))
            + ', ' + Ox.formatDuration(self.options.duration, 3)
        );
    }

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

    return that;

};