pandora/static/js/documentsPanel.js

'use strict';

pandora.ui.documentSortSelect = function() {
    var ui = pandora.user.ui,
        $orderButton = Ox.Button({
            overlap: 'left',
            title: getOrderButtonTitle(),
            tooltip: getOrderButtonTooltip(),
            type: 'image'
        })
        .bindEvent({
            click: function() {
                pandora.UI.set({documentsSort: [{
                    key: ui.documentsSort[0].key,
                    operator: ui.documentsSort[0].operator == '+' ? '-' : '+'
                }]});
            }
        }),
        $sortSelect = Ox.Select({
            items: pandora.site.documentKeys.filter(function(key) {
                return key.sort;
            }).map(function(column) {
                return {
                    id: column.id,
                    title: Ox._('Sort by {0}', [column.title])
                };
            }),
            value: ui.documentsSort[0].key,
            width: 128
        })
        .bindEvent({
            change: function(data) {
                var key = data.value;
                pandora.UI.set({documentsSort: [{
                    key: key,
                    operator: Ox.getObjectById(pandora.site.documentKeys, key).operator
                }]});
            }
        }),
        that = Ox.FormElementGroup({
            elements: [$sortSelect, $orderButton],
            float: 'right'
        })
        .css({float: 'left', margin: '4px 2px'});

    function getOrderButtonTitle() {
        return ui.documentsSort[0].operator == '+' ? 'up' : 'down';
    }

    function getOrderButtonTooltip() {
        return Ox._(ui.documentsSort[0].operator == '+' ? 'Ascending' : 'Descending');
    }

    that.sortValue = function(value) {
        $sortSelect.value(value);
        $orderButton.options({
            title: getOrderButtonTitle(),
            tooltip: getOrderButtonTooltip()
        });
    };
    return that;
};

pandora.ui.documentViewSelect = function() {
    var ui = pandora.user.ui,
        that = Ox.Select({
            items: pandora.site.collectionViews,
            value: ui.documentsView,
            width: 128
        })
        .css({float: 'left', margin: '4px 2px 4px 4px'})
        .bindEvent({
            change: function(data) {
                pandora.UI.set({documentsView: data.value});
            }
        });
    return that;
};

pandora.ui.documentsPanel = function(options) {

    var ui = pandora.user.ui,
        hasItemView = ui.section == 'items' && ui.item,
        hasListSelection = ui.section == 'items' && !ui.item && ui.listSelection.length,
        isItemView = options.isItemView,
        listLoaded = false,
        allFindKeys = ['user', 'title', 'entity', 'extension', 'description'].filter(function(key) {
            return key != 'entity' || pandora.site.entities.length;
        }),

        $listBar = Ox.Bar({size: 24}),

        $viewSelect = pandora.ui.documentViewSelect().appendTo($listBar),
        $sortElement = pandora.ui.documentSortSelect().appendTo($listBar),

        $findElement = findElement(updateList, isItemView).appendTo($listBar),

        $list = renderList(),

        $listStatusbar = Ox.Bar({size: 16}).css({textAlign: 'center'}),

        $listStatus = Ox.Element()
            .css({
                margin: '2px 4px',
                fontSize: '9px',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
            })
            .html(Ox._('Loading...'))
            .appendTo($listStatusbar),

        $listPanel = Ox.SplitPanel({
            elements: [
                {element: $listBar, size: 24},
                {element: $list},
                {element: $listStatusbar, size: 16}
            ],
            orientation: 'vertical'
        })
        .bindEvent({
            resize: function() {
                $list.size();
            },
        }),

        $itemBar = Ox.Bar({size: 24}),

        $itemMenu = Ox.MenuButton({
            items: isItemView ? [
                {id: 'open', title: '', keyboard: 'return'},
                {id: 'edit', title: ''},
                {id: 'embed', title: Ox._('Embed Document...')},
                {},
                {id: 'remove', title: '', keyboard: 'delete'}
            ] : [
                {id: 'upload', title: Ox._('Upload {0}...', [Ox._('Documents')]), file: {width: 192}},
                {},
                {id: 'open', title: '', keyboard: 'return'},
                {id: 'add', title: ''},
                {id: 'embed', title: Ox._('Embed Document...')},
                {},
                {id: 'replace', title: Ox._('Replace {0}...', [Ox._('Document')]), file: {width: 192}},
                {id: 'delete', title: '', keyboard: 'delete'}
            ],
            title: 'set',
            tooltip: Ox._('Options'),
            type: 'image'
        })
        .css({float: 'left', margin: '4px'})
        .bindEvent({
            click: function(data) {
                if (data.id == 'add') {
                    isItemView ? openDocumentsDialog() : addDocuments();
                } else if (data.id == 'delete') {
                    deleteDocuments();
                } else if (data.id == 'edit') {
                    pandora.UI.set({
                        section: 'documents',
                        document: ui.documentsSelection[ui.item][0],
                        documentView: 'info'
                    });
                } else if (data.id == 'embed') {
                    openEmbedDialog();
                } else if (data.id == 'open') {
                    openDocuments();
                } else if (data.id == 'remove') {
                    removeDocuments();
                } else if (data.id == 'replace') {
                    replaceDocument(data);
                } else if (data.id == 'upload') {
                    uploadDocuments(data);
                }
            }
        })
        .appendTo($itemBar),

        $deselectButton = Ox.Button({
            title: 'close',
            tooltip: Ox._('Done'),
            type: 'image'
        })
        .css({float: 'right', margin: '4px 4px 4px 2px'})
        .bindEvent({
            click: function() {
                pandora.UI.set(
                    'documentsSelection.' + (isItemView ? ui.item : ''),
                    []
                );
            }
        })
        .hide()
        .appendTo($itemBar),

        $selectButton = Ox.ButtonGroup({
            buttons: [
                {id: 'previous', title: 'left', tooltip: Ox._('Previous')},
                {id: 'next', title: 'right', tooltip: Ox._('Next')}
            ],
            type: 'image'
        })
        .css({float: 'right', margin: '4px 2px'})
        .bindEvent({
            click: function(data) {
                $list.selectSelected(data.id == 'previous' ? -1 : 1);
            }
        })
        .hide()
        .appendTo($itemBar),

        $item = Ox.Element().css({overflowY: 'scroll'}),

        $preview,

        $data,

        $itemStatusbar = Ox.Bar({size: 16})
            .css({textAlign: 'center'}),

        $itemStatus = Ox.Element()
            .css({
                margin: '2px 4px',
                fontSize: '9px',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
            })
            .appendTo($itemStatusbar),

        $itemPanel = Ox.SplitPanel({
            elements: [
                {element: $itemBar, size: 24},
                {element: $item},
                {element: $itemStatusbar, size: 16}
            ],
            orientation: 'vertical'
        })
        .bindEvent({
            resize: function(data) {
                ui.documentSize = data.size;
                resizeItem();
            },
            resizeend: function(data) {
                // set to 0 so that UI.set registers a change of the value
                ui.documentSize = 0;
                pandora.UI.set({documentSize: data.size});
            },
            toggle: function(data) {
                pandora.UI.set({showDocument: !data.collapsed});
            }
        }),

        that = Ox.SplitPanel({
            elements: [
                {
                    element: $listPanel
                },
                {
                    collapsible: isItemView,
                    collapsed: isItemView && !ui.showDocument,
                    element: $itemPanel,
                    size: ui.documentSize,
                    resizable: true,
                    resize: [192, 256, 320, 384],
                    tooltip: 'document <span class="OxBright">'
                        + Ox.SYMBOLS.shift + 'D</span>'
                }
            ],
            orientation: 'horizontal'
        })
        .bindEvent({
            pandora_documentsize: function(data) {
                that.size(1, data.value);
            },
            pandora_documentssort: function(data) {
                $sortElement.sortValue(ui.documentsSort[0].key);
                $list.options({sort: data.value});
            },
            pandora_documentsview: function(data) {
                $listPanel.replaceElement(1, $list = renderList());
            },
            pandora_showdocument: function(data) {
                isItemView && that.toggleElement(1);
            }
        })
        .bindEvent(
            'pandora_documentsselection.' + (
                isItemView ? ui.item.toLowerCase() : ''
            ),
            selectDocuments
        );

    if (isItemView) {
        pandora.$ui.documentsList = $list;
    }

    function addDocuments() {
        var ids = ui.documentsSelection[''];
        pandora.api.addDocument({
            item: hasItemView ? ui.item : ui.listSelection,
            ids: ids
        }, function() {
            Ox.Request.clearCache();
            if (ui.item && ui.itemView == 'documents') {
                // FIXME: $list.reloadList() would be much better
                pandora.$ui.contentPanel.replaceElement(1,
                    pandora.$ui.item = pandora.ui.item()
                );
                // FIXME: there has to be a way to do this without timeout
                setTimeout(function() {
                    pandora.UI.set('documentsSelection.' + ui.item, ids);
                }, 1000);
            }
        });
    }

    function closeDocuments() {
        if (pandora.$ui.documentDialog) {
            pandora.$ui.documentDialog.close();
        }
    }

    function deleteDocuments() {
        pandora.ui.deleteDocumentDialog(
            $list.options('selected').map(function(id) {
                return $list.value(id);
            }),
            function() {
                Ox.Request.clearCache();
                // ...
                $list.reloadList();
            }
        ).open();
    }

    function editDocuments() {
        pandora.UI.set('documentsSelection.', $list.options('selected'));
        openDocumentsDialog();
    }

    function findElement(callback, isItemView) {
        var $findSelect = Ox.Select({
                items: [
                    {id: 'all', title: Ox._('Find: All')},
                    {id: 'title', title: Ox._('Find: Title')},
                    {id: 'user', title: Ox._('Find: User')},
                    {id: 'entity', title: Ox._('Find: Entity')}
                ].filter(function(item) {
                    if (item.id == 'user') {
                        return !isItemView;
                    } else if (item.id == 'entity') {
                        return pandora.site.entities.length;
                    }
                    return true;
                }),
                overlap: 'right',
                type: 'image'
            })
            .bindEvent({
                change: function(data) {
                    $findInput.options({placeholder: data.title}).focusInput();
                }
            }),

            $findInput = Ox.Input({
                changeOnKeypress: true,
                clear: true,
                placeholder: Ox._('Find: All'),
                width: 192
            })
            .bindEvent({
                change: function(data) {
                    data.key = $findSelect.value();
                    data.value = $findInput.value()
                    callback(data);
                }
            }),

            that = Ox.FormElementGroup({
                elements: [
                    $findSelect,
                    $findInput
                ]
            })
            .css({float: 'right', margin: '4px 4px 4px 2px'});

        // to determine the width of the find input inside
        // the documents dialog, that dialog has to be present
        setTimeout(function() {
            $findInput.options({width: getFindInputWidth()});
        });

        return that;
    }

    function getFindInputWidth() {
        // 2 * 128px selects + 2 * 16px buttons + 4 * 4px margins = 304px
        return Math.min(192, (
            isItemView
            ? window.innerWidth - (ui.showSidebar * ui.sidebarSize) - 1
                - (ui.showDocument * ui.documentSize)
            : pandora.$ui.documentsDialog.options('width')
                - ui.documentSize - 1
        ) - 304);
    }

    function getPreviewSize() {
        var ratio = $list.value($list.options('selected')[0], 'ratio'),
            size = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE,
            height = ratio > 1 ? size / ratio : size,
            width = ratio > 1 ? size : size * ratio,
            left = Math.floor((size - width) / 2);
        return {
            height: height,
            // fixme: CSS gets applied twice, to image and enclosing element
            margin: [8, 8, 8, 8 + left].map(function(px) {
                return Math.round(px / 2) + 'px';
            }).join(' '),
            width: width
        };
    }

    function openDocuments() {
        pandora.openDocumentDialog({
            documents: $list.options('selected').map(function(id) {
                return $list.value(id);
            })
        }).bindEvent({
            close: function() {
                $list.closePreview();
            }
        });
    }

    function openDocumentsDialog() {
        pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
    }

    function openEmbedDialog() {
        pandora.$ui.embedDocumentDialog = pandora.ui.embedDocumentDialog(
            ui.documentsSelection[isItemView ? ui.item : ''][0]
        ).open();
    }

    function replaceDocument(data) {
        var id = $list.options('selected')[0];
        pandora.ui.uploadDocumentDialog({
            files: data.files,
            id: id
        }, function(files) {
            if (files) {
                Ox.Request.clearCache();
                $list.bindEventOnce({
                    load: function() {
                        $list.options({selected: files.ids});
                        selectDocuments();
                    }
                })
                .reloadList();
            }
        }).open();
    }

    function removeDocuments() {
        pandora.api.removeDocument({
            item: ui.item,
            ids: $list.options('selected')
        }, function() {
            Ox.Request.clearCache();
            // ...
            $list.reloadList();
        });
    }

    function renderData() {
        var $name, $description, $input,
            item = $list.value($list.options('selected')[0]),
            editable = item.user == pandora.user.username
                || pandora.hasCapability('canEditDocuments')
                || options.editable,
            labelWidth = 80,
            width = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE;
        return isItemView
            ? Ox.Element()
                .css({textAlign: 'center'})
                .append(
                    Ox.$('<div>').css({height: '8px'})
                )
                .append(
                    $name = Ox.EditableContent({
                        editable: editable,
                        tooltip: editable ? pandora.getEditTooltip('title') : '',
                        value: item.title,
                        width: width
                    })
                    .css({
                        textAlign: 'center',
                        fontWeight: 'bold'
                    })
                    .bindEvent({
                        edit: function() {
                            $name.options({
                                width: that.width()
                            });
                        },
                        submit: function(data) {
                            pandora.api.editDocument({
                                title: data.value,
                                id: item.id,
                                item: ui.item,
                            }, function(result) {
                                $name.options({value: result.data.title});
                                Ox.Request.clearCache('findDocuments');
                                $list.reloadList();
                            });
                        }
                    })
                )
                .append(
                    Ox.$('<div>').css({height: '8px'})
                )
                .append(
                    $description = Ox.EditableContent({
                        clickLink: pandora.clickLink,
                        editable: editable,
                        format: function(value) {
                            return '<div class="OxLight" style="text-align: center">'
                                + value + '</div>';
                        },
                        height: width,
                        placeholder: Ox._('No description'),
                        tooltip: editable ? pandora.getEditTooltip('description') : '',
                        type: 'textarea',
                        value: item.description || '',
                        width: width
                    })
                    .css({
                        margin: '0 8px',
                        textAlign: 'center'
                    })
                    .bindEvent({
                        submit: function(data) {
                            pandora.api.editDocument({
                                description: data.value,
                                id: item.id,
                                item: ui.item,
                            }, function(result) {
                                $description.options({value: result.data.description});
                                Ox.Request.clearCache('findDocuments');
                                $list.reloadList();
                            });
                        }
                    })
                )
            : Ox.Form({
                items: [
                    Ox.Input({
                        disabled: !editable,
                        id: 'title',
                        label: Ox._('Title'),
                        labelWidth: labelWidth,
                        value: item.title,
                        width: width
                    }),
                    Ox.Input({
                        disabled: true,
                        id: 'id',
                        label: Ox._('ID'),
                        labelWidth: labelWidth,
                        value: item.id,
                        width: width
                    }),
                    Ox.Input({
                        disabled: true,
                        id: 'extension',
                        label: Ox._('Extension'),
                        labelWidth: labelWidth,
                        value: item.extension,
                        width: width
                    }),
                    Ox.Input({
                        disabled: true,
                        id: 'dimensions',
                        label: Ox._('Dimensions'),
                        labelWidth: labelWidth,
                        value: Ox.isArray(item.dimensions)
                            ? Ox.formatDimensions(item.dimensions, 'px')
                            : Ox.formatCount(item.dimensions, 'page'),
                        width: width
                    }),
                    Ox.Input({
                        disabled: true,
                        id: 'size',
                        label: Ox._('Size'),
                        labelWidth: labelWidth,
                        value: Ox.formatValue(item.size, 'B'),
                        width: width
                    }),
                    Ox.Input({
                        disabled: true,
                        id: 'matches',
                        label: Ox._('Matches'),
                        labelWidth: labelWidth,
                        value: item.matches,
                        width: width
                    }),
                    Ox.Input({
                        disabled: true,
                        id: 'username',
                        label: Ox._('User'),
                        labelWidth: labelWidth,
                        value: item.user,
                        width: width
                    }),
                    Ox.Input({
                        disabled: !editable,
                        height: 256,
                        id: 'description',
                        placeholder: Ox._('Description'),
                        type: 'textarea',
                        value: item.description,
                        width: width
                    })
                ].concat(
                    pandora.site.entities && pandora.site.entities.length
                    ? Ox.ArrayInput({
                        input: {
                            get: function(width) {
                                var $input = Ox.FormElementGroup({
                                    elements: [
                                        Ox.Select({
                                            items: pandora.site.entities.map(function(entity) {
                                                return {
                                                    id: entity.id,
                                                    title: entity.title
                                                };
                                            }),
                                            overlap: 'right',
                                            width: labelWidth
                                        })
                                        .bindEvent({
                                            change: function() {
                                                $input.value([$input.value()[0], '']);
                                                $input.options('elements')[1].focusInput();
                                            }
                                        }),
                                        Ox.Input({
                                            autocomplete: function(value, callback) {
                                                pandora.api.autocompleteEntities({
                                                    key: $input.value()[0],
                                                    operator: '=',
                                                    range: [0, 10],
                                                    value: value
                                                }, function(result) {
                                                    callback(result.data.items);
                                                });
                                            },
                                            autocompleteReplace: true,
                                            autocompleteSelect: true,
                                            autocompleteSelectSubmit: true,
                                            width: width - labelWidth
                                        })
                                    ],
                                    width: width
                                });
                                return $input;
                            },
                            getEmpty: function() {
                                return [pandora.site.entities[0].id, ''];
                            },
                            isEmpty: function(value) {
                                return value[1] === '';
                            },
                            setWidth: function($input, width) {
                                $input.options('elements')[1].options({
                                    width: width - labelWidth
                                });
                            }
                        },
                        label: Ox._('Entities'),
                        value: item.entities.map(function(entity) {
                            return [entity.type, entity.name];
                        }),
                        width: width
                    })
                    .bindEvent({
                        add: function() {
                            $item[0].scrollTop = 1000000;
                        },
                        change: function(data) {
                            var remove = item.entities.filter(function(entity) {
                                return data.value.filter(function(value) {
                                    return value[0] == entity.type && value[1] == entity.name;
                                }).length == 0;
                            }).map(function(entity) {
                                return entity.id;
                            });
                            var add = data.value.filter(function(value) {
                                return item.entities.filter(function(entity) {
                                    return value[0] == entity.type && value[1] == entity.name;
                                }).length == 0;
                            }).map(function(value) {
                                return {
                                    type: value[0],
                                    name: value[1]
                                }
                            });
                            remove.length && remove.forEach(function(id) {
                                pandora.api.removeDocument({
                                    id: item.id,
                                    entity: id
                                }, function(result) {
                                    // fixme: check result
                                });
                            });
                            add.length && add.forEach(function(entity) {
                                pandora.api.findEntities({
                                    query: {
                                        conditions: [
                                            {key: 'type', value: entity.type, operator: '=='},
                                            {key: 'name', value: entity.name, operator: '=='}
                                        ],
                                        operator: '&'
                                    },
                                    keys: ['id'],
                                    range: [0, 1]
                                }, function(result) {
                                    if (result.data.items && result.data.items.length) {
                                        pandora.api.addDocument({
                                            id: item.id,
                                            entity: result.data.items[0].id
                                        }, function(result) {
                                            // fixme: check result
                                        });
                                    }

                                });
                            });
                        }
                    })
                    : []
                ),
                width: 240
            })
            .css({margin: '12px 8px 8px 8px'})
            .bindEvent({
                change: function(event) {
                    var data = Ox.extend({id: item.id}, event.id, event.data.value);
                    if (isItemView) {
                        data.item = ui.item;
                    }
                    pandora.api.editDocument(data, function(result) {
                        $list.value(result.data.id, event.id, result.data[event.id]);
                        if (event.id == 'name') {
                            $list.value(item.id, 'id', result.data.id);
                        }
                        Ox.Request.clearCache('findDocuments');
                        $list.reloadList();
                    });
                }
            });
    }

    function renderList() {
        var options = {
                items: pandora.api.findDocuments,
                keys: ['description', 'dimensions', 'extension', 'id', 'title', 'ratio', 'size', 'user', 'entities', 'modified'],
                query: {
                    conditions: isItemView ? [{ key: 'item', value: ui.item, operator: '==' }] : [],
                    operator: '&'
                },
                selected: ui.documentsSelection[isItemView ? ui.item : ''] || [],
                sort: ui.documentsSort.concat([
                    {key: 'extension', operator: '+'},
                    {key: 'title', operator: '+'}
                ]),
                unique: 'id'
            };
        return (ui.documentsView == 'list' ? Ox.TableList(Ox.extend(options, {
            columns: pandora.site.documentSortKeys.filter(function(key) {
                return (!key.capability
                    || pandora.hasCapability(key.capability)) && key.columnWidth;
            }).map(function(key) {
                var position = ui.collectionColumns.indexOf(key.id);
                return {
                    addable: key.id != 'random',
                    align: ['string', 'text'].indexOf(
                        Ox.isArray(key.type) ? key.type[0]: key.type
                    ) > -1 ? 'left' : key.type == 'list' ? 'center' : 'right',
                    defaultWidth: key.columnWidth,
                    format: (function() {
                        return function(value, data) {
                            return pandora.formatDocumentKey(key, data);
                        }
                    })(),
                    id: key.id,
                    operator: pandora.getDocumentSortOperator(key.id),
                    position: position,
                    removable: !key.columnRequired,
                    title: Ox._(key.title),
                    type: key.type,
                    visible: position > -1,
                    width: ui.collectionColumnWidth[key.id] || key.columnWidth
                };
            }),
            columnsVisible: true,
            scrollbarVisible: true,
        })) : Ox.IconList(Ox.extend(options, {
            item: function(data, sort, size) {
                var sortKey = sort[0].key,
                    infoKey = sortKey == 'title' ? 'extension' : sortKey,
                    key = Ox.getObjectById(pandora.site.documentKeys, infoKey),
                    info = pandora.formatDocumentKey(key, data, size),
                    size = size || 128;
                return {
                    height: Math.round(data.ratio > 1 ? size / data.ratio : size),
                    id: data.id,
                    info: info,
                    title: data.title,
                    url: pandora.getMediaURL('/documents/' + data.id + '/256p.jpg?' + data.modified),
                    width: Math.round(data.ratio > 1 ? size : size * data.ratio)
                };
            },
            size: 128
        })))
        .bindEvent({
            add: function() {
                // we can't open upload dialog via control+n
                isItemView && openDocumentsDialog();
            },
            copy: function(data) {
                pandora.clipboard.copy(data.ids, 'document');
            },
            closepreview: closeDocuments,
            'delete': isItemView ? removeDocuments : deleteDocuments,
            init: function(data) {
                $listStatus.html(
                    Ox.toTitleCase(Ox.formatCount(data.items, 'document'))
                    + (isItemView ? '' : ', ' + Ox.formatValue(data.size, 'B'))
                );
            },
            key_escape: function() {
                pandora.UI.set({'part.documents': ''});
            },
            open: openDocuments,
            openpreview: openDocuments,
            paste: function(data) {
                if (isItemView) {
                    //fixme permissions!
                    var items = pandora.clipboard.paste();
                    if (items.length && pandora.clipboard.type() == 'document') {
                        //fixme use history
                        pandora.api.addDocument({
                            item: ui.item,
                            ids: items
                        }, function(result) {
                            Ox.Request.clearCache('findDocuments');
                            $list.reloadList();
                        });
                    }
                }
            },
            select: function(data) {
                pandora.UI.set(
                    'documentsSelection.' + (isItemView ? ui.item : ''), data.ids
                );
                ui.part.documents && pandora.UI.set('part.documents', data.ids[0]);
            },
            sort: function(data) {
                pandora.UI.set({collectionSort: [data]});
            }
        })
        .bindEventOnce({
            load: function() {
                listLoaded = true;
                !ui.showBrowser && $list.gainFocus();
                if ($list.options('selected').length == 0) {
                    selectDocuments()
                } else {
                    selectDocumentsLater();
                }
                function selectDocumentsLater() {
                    if (!Ox.isEmpty($list.value($list.options('selected')[0]))) {
                        selectDocuments();
                    } else {
                        setTimeout(selectDocumentsLater, 100);
                    }
                }
            }
        });
    }

    function renderPreview() {
        var selected = $list.options('selected')[0],
            modified = $list.value(selected, 'modified'),
            size = getPreviewSize(),
            src = '/documents/' + selected + '/256p.jpg?' + modified,
            $element = Ox.ImageElement({
                height: size.height,
                src: src,
                // fixme: this tends to stick around after menu click
                // (and may not be necessary in the first place)
                // tooltip: Ox._('Click to open document'),
                width: size.width
            })
            .css({
                borderRadius: '8px',
                margin: size.margin
            })
            .on({
                click: function(e) {
                    if ($(e.target).is('img')) {
                        openDocuments();
                    }
                }
            })
            .bindEvent({
                load: function() {
                    $($element.children()[0]).css({cursor: 'pointer'});
                }
            });
            return $element;
    }

    function resizeItem() {
        var size = getPreviewSize(),
            width = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE;
        $preview && $preview.options({
            height: size.height,
            width: size.width
        }).css({
            margin: size.margin
        });
        if (!isItemView && $data) {
            $data.options('items').forEach(function($item) {
                $item.options({width: width});
            });
        }
    }

    function selectDocuments() {
        // FIXME: this looks wrong - will produce inconsistent state
        if(!listLoaded) {
            return;
        }
        var selected = ui.documentsSelection[isItemView ? ui.item : ''] || [],
            string = Ox._(selected.length < 2 ? 'Document' : 'Documents');
        $list.options({selected: selected});
        $itemMenu.setItemTitle('open', Ox._('Open {0}', [string]))
            [selected.length ? 'enableItem' : 'disableItem']('open');
        if (isItemView) {
            $itemMenu.setItemTitle('edit', Ox._('Edit {0}...', [string]))
                .setItemTitle('remove', Ox._(
                    'Remove {0} from {1}',
                    [string, Ox._(pandora.site.itemName.singular)]
                ))
                [selected.length ? 'enableItem' : 'disableItem']('edit')
                [selected.length ? 'enableItem' : 'disableItem']('embed')
                [selected.length ? 'enableItem' : 'disableItem']('remove');
        } else {
            $itemMenu.setItemTitle('add', Ox._('Add {0} to {1} {2}', [
                    string,
                    Ox._(hasListSelection ? 'Selected' : 'Current'),
                    Ox._(pandora.site.itemName[
                        hasListSelection && ui.listSelection.length > 1
                        ? 'plural' : 'singular'])
                ]))
                .setItemTitle('delete', Ox._('Delete {0}...',  [string]))
                [selected.length && (hasItemView || hasListSelection) ? 'enableItem' : 'disableItem']('add')
                [selected.length ? 'enableItem' : 'disableItem']('embed')
                [selected.length == 1 ? 'enableItem' : 'disableItem']('replace')
                [selected.length ? 'enableItem' : 'disableItem']('delete');
        }
        $selectButton[selected.length > 1 ? 'show' : 'hide']();
        $deselectButton[selected.length ? 'show' : 'hide']();
        $item.empty();
        if (selected.length) {
            $preview = renderPreview().appendTo($item);
            $data = renderData().appendTo($item);
        }
        $itemStatus.html(
            selected.length
            ? Ox.formatCount(selected.length, 'Document')
            : Ox._('No document selected')
        );
    }

    function updateList(data) {

        var key = data.key,
            value = data.value,
            itemCondition = isItemView
                ? {key: 'item', operator: '==', value: ui.item}
                : null,
            findKeys = key == 'all' ? allFindKeys : [key],
            findQuery = {
                conditions: findKeys.map(function(k) {
                    return {key: k, operator: '=', value: value};
                }),
                operator: '|'
            },
            query = isItemView
                ? {
                    conditions: [itemCondition].concat(findQuery),
                    operator: '&'
                }
                : findQuery;
        $list.options({query: query});
    }

    function updateSortElement() {
        $sortElement.sortValue(ui.documentsSort[0].key);
    }

    function uploadDocuments(data) {
        pandora.ui.uploadDocumentDialog({
            files: data.files
        }, function(files) {
            if (files) {
                Ox.Request.clearCache('findDocuments');
                $list.bindEventOnce({
                    load: function() {
                        $list.options({selected: files.ids});
                    }
                })
                .reloadList();
            }
        }).open();
    }

    that.reloadList = function() {
        $list.reloadList();
    };

    that.selectSelected = function(offset) {
        $list.selectSelected(offset);
        return that;
    };

    that.updateSize = function() {
        $findInput.options({width: getFindInputWidth()});
        $list.size();
    };

    return that;

};