'use strict';

oml.ui.helpDialog = function() {

    var ui = oml.user.ui,

        $panel = Ox.TabPanel({
            content: function(id) {
                return Ox.Element()
                    .addClass('OxTextPage OxSelectable')
                    .css({margin: '16px'})
                    .html(
                        '<p>The lazy brown fox and the lazy black fox '
                        + 'were observed singing "Loret ipsum", '
                        + 'but other than that not really much happened here '
                        + 'since you last checked.</p>'
                    );
            },
            style: 'squared',
            tabs: [
                {
                    id: 'help',
                    title: Ox._('Help'),
                    selected: ui.page == 'help'
                },
                {
                    id: 'documentation',
                    title: Ox._('API Documentation'),
                    selected: ui.page == 'documentation'
                }
            ]
        })
        .bindEvent({
            change: function(data) {
                oml.UI.set({page: data.selected});
            }
        }),

        that = Ox.Dialog({
            buttons: [
                Ox.Button({
                    id: 'close',
                    style: 'squared',
                    title: Ox._('Close')
                }).bindEvent({
                    click: function() {
                        that.close();
                    }
                })
            ],
            closeButton: true,
            content: $panel,
            height: 384,
            keys: {escape: 'close'},
            maximizeButton: true,
            minHeight: 256,
            minWidth: 544 + 2 * Ox.UI.SCROLLBAR_SIZE,
            removeOnClose: true,
            title: 'Open Media Libary',
            width: 672 + 2 * Ox.UI.SCROLLBAR_SIZE
        })
        .bindEvent({
            close: function() {
                if (Ox.contains(['help', 'documentation'], ui.page)) {
                    oml.UI.set({page: ''});
                }
            }
        });

    return that;

};