'use strict';

oml.ui.userDialog = function() {

    var ui = oml.user.ui,

        $panel = Ox.TabPanel({
            content: function(id) {
                var name = id + 'Panel';
                return oml.$ui[name] = oml.ui[name]();
            },
            style: 'squared',
            tabs: [
                {
                    id: 'preferences',
                    title: Ox._('Preferences'),
                    selected: ui.page == 'preferences'
                },
            ].concat(oml.readOnly ? [] : [
                {
                    id: 'peers',
                    title: Ox._('Peers'),
                    selected: ui.page == 'peers'
                },
                {
                    id: 'transfers',
                    title: Ox._('Transfers'),
                    selected: ui.page == 'transfers'
                }
            ])
        })
        .bindEvent({
            change: function(data) {
                oml.UI.set({page: data.selected});
            }
        }),

        that = Ox.Dialog({
            buttons: [
                Ox.Button({
                    id: 'done',
                    style: 'squared',
                    title: Ox._('Done')
                })
                .bindEvent({
                    click: function() {
                        that.close();
                    }
                })
            ],
            closeButton: true,
            content: $panel,
            fixedSize: true,
            height: 408,
            keys: {escape: 'done'},
            removeOnClose: true,
            title: 'Open Media Library',
            width: 768
        })
        .bindEvent({
            close: function() {
                oml.UI.set({page: ''});
            },
            open: function() {
                // ...
            },
            oml_page: function() {
                // ...
            }
        });

    return that;

};