'use strict';

oml.ui.updateDialog = function() {

    var ui = oml.user.ui,

        $content = Ox.Element(),

        $logo = $('<img>')
            .attr({
                src: '/static/png/oml.png'
            })
            .css({
                position: 'absolute',
                left: '16px',
                top: '16px',
                width: '128px',
                height: '128px'
            })
            .appendTo($content),

        $text = Ox.Element()
            .addClass('OxTextPage OxSelectable')
            .css({
                position: 'absolute',
                right: '16px',
                top: '16px',
                width: '336px',
                height: '128px',
            })
            .html(
                oml.version != 'git'
                ? Ox._(
                    'You are running Open Media Library version {0}.<br><br>',
                    [oml.version.split('-')[1]]
                )
                : Ox._(
                    'You are running the development version of '
                    + 'Open Media Library.<br><br>'
                )
            )
            .appendTo($content),

        $error = Ox.Element()
            .addClass('OxTextPage OxSelectable')
            .css({
                position: 'absolute',
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                width: '480px',
                height: '16px',
                margin: 'auto',
                textAlign: 'center'
            })
            .html('Download failed.'),

        $dontUpdateButton = Ox.Button({
                style: 'squared',
                title: Ox._('No, Don\'t Update')
            })
            .hide()
            .bindEvent({
                click: function() {
                    that.close();
                }
            }),

        $updateButton = Ox.Button({
                style: 'squared',
                title: Ox._('Yes, Update')
            })
            .hide()
            .bindEvent({
                click: function() {
                    $dontUpdateButton.hide();
                    that.disableCloseButton();
                    that.disableButtons();
                    that.options({
                        content: Ox.LoadingScreen().start()
                    });
                    oml.isRelaunching = true;
                    oml.api.restart({update: true}, function(result) {
                        if (result.status.code == 200) {
                            setTimeout(reload, 1000);
                        } else {
                            that.options({content: $error});
                            $updateButton.hide();
                            $closeButton.css({display: 'inline'});
                            that.enableCloseButton();
                            that.enableButtons();
                        }
                    });
                }
            }),

        $closeButton = Ox.Button({
                style: 'squared',
                title: Ox._('Close')
            })
            .bindEvent({
                click: function() {
                    that.close();
                }
            }),
    
        that = Ox.Dialog({
            buttons: [
                $dontUpdateButton,
                $updateButton,
                $closeButton
            ],
            closeButton: true,
            content: $content,
            height: 160,
            removeOnClose: true,
            title: 'Software Update',
            width: 512
        })
        .bindEvent({
            close: function() {
                if (ui.page == 'update') {
                    oml.UI.set({page: ''});
                }
            }
        });

    if (oml.version != 'git') {
        oml.api.getVersion(function(result) {
            if (result.data.version == oml.version) {
                $text.append(Ox._('You are up to date.'))
            } else {
                $text.append(Ox._(
                    'A newer version ({0}) is available.',
                    [result.data.version.split('-')[1]]
                ));
                $closeButton.hide();
                $dontUpdateButton.css({display: 'inline'});
                $updateButton.css({display: 'inline'});
            }
        });
    } else {
        $text.append(Ox._(
            'To update, run <span class="OxMonospace">./ctl update</span>.'
        ));
    }

    function reload() {
        var ws = new WebSocket('ws:' + document.location.host + '/ws');
        ws.onopen = function(event) {
            document.location.href = document.location.protocol + '//'
                + document.location.host;
        };
        ws.onerror = function(event) {
            ws.close();
        };
        ws.onclose = function(event) {
            setTimeout(reload, 500);
        };
    }

    return that;

};