pandora.ui.renameAnnotationDialog = function() {

    var dialogHeight = 100,
        dialogWidth = 512 + 16,
        formWidth = getFormWidth(),

        $button,
        $content = Ox.Element(),
        old,
        value,
        layer = pandora.site.layers[0].id,
        $input = [
            Ox.Select({
                label: Ox._('Layer'),
                labelWidth: 96,
                width: 512,
                items: pandora.site.layers,
            }).css({
                margin: '8px'
            }).bindEvent({
                change: function(data) {
                    layer = data.value;
                }
            }).appendTo($content),
            Ox.Input({
                label: Ox._('From'),
                labelWidth: 96,
                width: 512
            }).css({
                margin: '8px'
            }).bindEvent({
                change: function(data) {
                    $button.options({disabled: !data.value && !value});
                    old = data.value;
                }
            }).appendTo($content),
            Ox.Input({
                label: Ox._('To'),
                labelWidth: 96,
                width: 512
            }).css({
                margin: '8px'
            }).bindEvent({
                change: function(data) {
                    $button.options({disabled: !data.value && !old});
                    value = data.value;
                }
            }).appendTo($content)
        ],

        that = Ox.Dialog({
                buttons: [
                    Ox.Button({
                            id: 'cancel',
                            title: Ox._('Cancel')
                        })
                        .bindEvent({
                            click: function() {
                                that.close();
                            }
                        }),
                    $button = Ox.Button({
                            disabled: true,
                            id: 'update',
                            title: Ox._('Rename Annotation')
                        })
                        .bindEvent({
                            click: function() {
                                that.options({content: Ox.LoadingScreen().start()});
                                renameAnnotation(layer, old, value, function() {
                                    Ox.Request.clearCache();
                                    that.close();
                                })
                            }
                        })
                ],
                closeButton: true,
                content: $content,
                height: dialogHeight,
                removeOnClose: true,
                title: Ox._('Change Annotation'),
                width: dialogWidth
            })
            .bindEvent({
                resize: setSize
            });

    function getFormWidth() {
        return dialogWidth - 32 - Ox.UI.SCROLLBAR_SIZE;
    }

    function setSize(data) {
        dialogHeight = data.height;
        dialogWidth = data.width;
        formWidth = getFormWidth();
        $input.forEach(function($element) {
            $element.options({width: formWidth});
        });
    }

    function renameAnnotation(layer, old, value, callback) {
        pandora.api.findAnnotations({
            'query': {
                'conditions': [{
                    'key': 'value',
                    'value': old,
                    'operator': '=='
                },
                {
                    'key': 'layer',
                    'value': layer,
                    'operator': '=='
                }],
                'operator': '&'
            },
            'keys': ['id', 'in', 'out', 'value', 'user', 'created'],
            'range': [0, 500000]
        }, function(result) {
            console.log('got annots', result.data.items);
            Ox.serialForEach(result.data.items, function(annotation, index, array, next) {
                pandora.api.editAnnotation({
                    id: annotation.id,
                    value: value
                }, function(result) {
                    next()
                })
            }, function() {
                callback()
            })
        })
    }

    return that;
};