'use strict';

pandora.ui.siteDialog = function(section) {

    var canSeeVersion = pandora.hasCapability('canSeeSoftwareVersion'),
        dialogHeight = Math.round((window.innerHeight - 48) * 0.75),
        dialogWidth = Math.round(window.innerWidth * 0.75),
        isEditable = pandora.hasCapability('canEditSitePages'),
        tabs = Ox.clone(pandora.site.sitePages, true).map(function(page) {
            page.title = Ox._(page.title);
            return page;
        }).concat([{id: 'software', title: Ox._('Software')}]);
    Ox.getObjectById(tabs, section).selected = true;
    var $tabPanel = Ox.TabPanel({
            content: function(id) {
                var $content = Ox.Element()
                    .css({padding: '16px', overflowY: 'auto'});
                if (id != 'contact') {
                    $content.addClass('OxTextPage');
                }
                if (id == 'contact') {
                    pandora.$ui.contactForm = pandora.ui.contactForm().appendTo($content);
                } else if (id == 'news') {
                    pandora.$ui.news = pandora.ui.news(dialogWidth, dialogHeight).appendTo($content);
                } else if (id == 'software') {
                    Ox.Element()
                        .html(
                            '<h1><b>pan.do/ra</b></h1>'
                            + '<sub>open media archive</sub>'
                            + '<p><b>' + pandora.site.site.name + '</b> is based on <b>pan.do/ra</b>, '
                            + 'a free, open source platform for media archives.</p>'
                            + '<b>pan.do/ra</b> includes <b>OxJS</b>, '
                            + 'a new JavaScript library for web applications.</p>'
                            + '<p>To learn more about <b>pan.do/ra</b> and <b>OxJS</b>, '
                            + 'please visit <a href="https://pan.do/ra">pan.do/ra</a> '
                            + 'and <a href="https://oxjs.org">oxjs.org</a>.</p>'
                            + (
                                canSeeVersion
                                ? '<sub><b>' + pandora.site.site.name
                                    + '</b> is running <b>pan.do/ra</b> revision '
                                    + pandora.site.site.version + '.</sub>'
                                : ''
                            )
                        )
                        .appendTo($content);
                } else {
                    pandora.api.getPage({name: id}, function(result) {
                        var $right, risk;
                        Ox.Editable({
                                clickLink: pandora.clickLink,
                                editable: isEditable,
                                tooltip: isEditable ? pandora.getEditTooltip() : '',
                                type: 'textarea',
                                placeholder: isEditable ? Ox._('Doubleclick to insert text') : '',
                                value: result.data.text
                            })
                            .css(id == 'rights' ? {
                                // this will get applied twice,
                                // total is 144px
                                marginRight: '72px'
                            } : {
                                width: '100%'
                            })
                            .bindEvent({
                                submit: function(data) {
                                    Ox.Request.clearCache('getPage');
                                    pandora.api.editPage({
                                        name: id,
                                        text: data.value
                                    });
                                }
                            })
                            .appendTo($content);
                        if (id == 'rights') {
                            $right = $('<div>')
                                .css({position: 'absolute', top: '16px', right: '16px', width: '128px', lineHeight: 'normal'})
                                .appendTo($content);
                            $('<img>')
                                .attr({src: '/static/png/rights.png'})
                                .css({width: '128px', height: '128px', marginBottom: '8px'})
                                .appendTo($right);
                            risk = ['Unknown', 'Severe', 'High', 'Significant', 'General', 'Low'];
                            [].concat(
                                ['Unknown'],
                                pandora.site.rightsLevels.map(function(rightsLevel) {
                                    return rightsLevel.name;
                                }).reverse()
                            ).forEach(function(name, i) {
                                Ox.Theme.formatColor(330 + 30 * i, 'gradient')
                                    .css({
                                        padding: '4px',
                                        marginTop: '8px'
                                    })
                                    .html(
                                        '<b>' + name + '</b><br/><div style="padding: 2px 0 1px 0; font-size: 9px; opacity: 0.75">'
                                        + risk[i] + ' Risk'
                                        + (risk[i].length > 6 ? '<br/> of ' : ' of<br/>')
                                        + 'Legal Action</div>'
                                    )
                                    .appendTo($right);
                            });
                        }                        
                    });
                }
                return Ox.SplitPanel({
                    elements: [
                        {
                            element: Ox.Element()
                                .css({padding: '16px'})
                                .append(
                                    $('<img>')
                                        .attr({
                                            src: '/static/png/' + (
                                                id == 'software' ? 'software' : 'logo'
                                            ) + '.png'
                                        })
                                        .css({
                                            width: '256px',
                                            height: 'auto',
                                            marginTop: id == 'software' ? '-16px' : 0
                                        })
                                ),
                            size: 272
                        },
                        {
                            element: $content
                        }
                    ],
                    orientation: 'horizontal'
                });
            },
            tabs: tabs
        })
        .bindEvent({
            change: function(data) {
                that.options({
                    title: Ox.getObjectById(tabs, data.selected).title
                });
                pandora.UI.set({page: data.selected});
            }
        });

    var that = Ox.Dialog({
            buttons: [
                Ox.Button({
                    id: 'close',
                    title: Ox._('Close')
                }).bindEvent({
                    click: function() {
                        that.close();
                    }
                })
            ],
            closeButton: true,
            content: $tabPanel,
            height: dialogHeight,
            maximizeButton: true,
            minHeight: 256,
            minWidth: 688, // 16 + 256 + 16 + 384 + 16
            removeOnClose: true,
            title: Ox.getObjectById(tabs, section).title,
            width: dialogWidth
        })
        .bindEvent({
            close: function(data) {
                Ox.getObjectById(tabs, pandora.user.ui.page) && pandora.UI.set({page: ''});
            },
            resize: function(data) {
                var selected = $tabPanel.selected();
                dialogHeight = data.height;
                dialogWidth = data.width;
                if (selected == 'contact') {
                    pandora.$ui.contactForm.resizeElement();
                } else if (selected == 'news') {
                    pandora.$ui.news.resizeElement(data);
                }
            },
            key_down: function() {
                pandora.user.ui.page == 'news' && pandora.$ui.news.selectItem(1);
            },
            key_up: function() {
                pandora.user.ui.page == 'news' && pandora.$ui.news.selectItem(-1);
            }
        });

    that.select = function(id) {
        $tabPanel.select(id);
        return that;
    };

    return that;

};