'use strict';

oml.ui.appDialog = function() {

    var ui = oml.user.ui,

        tabs = [
            {
                id: 'about',
                title: Ox._('About Open Media Library'),
                selected: ui.page == 'about'
            },
            {
                id: 'faq',
                title: Ox._('Frequently Asked Questions'),
                selected: ui.page == 'faq'
            },
            {
                id: 'terms',
                title: Ox._('Terms and Conditions'),
                selected: ui.page == 'terms'
            },
            {
                id: 'development',
                title: Ox._('Software Development'),
                selected: ui.page == 'development'
            },
            {
                id: 'contact',
                title: Ox._('Send Feedback'),
                selected: ui.page == 'contact'
            }
        ],

        $panel = Ox.TabPanel({
            content: function(id) {
                var $content = Ox.Element(),
                    $logo = Ox.Element(),
                    $text = Ox.Element()
                        .addClass('OxTextPage OxSelectable'),
                    title = Ox.getObjectById(tabs, id).title;

                $('<img>')
                    .attr({
                        src: '/static/png/oml.png'
                    })
                    .css({
                        position: 'absolute',
                        left: '16px',
                        top: '16px',
                        width: '192px',
                        height: '192px'
                    })
                    .appendTo($logo);
                if (id == 'contact') {
                    $content.append(oml.ui.contactForm());
                } else {
                    Ox.get('/static/html/app.html?foo', function(html) {
                        var $html = $('<div>').html(html),
                            section = $html.find('#' + id).html();
                        $content.html('<h1><b>' + title + '</b></h1>' + section);
                        oml.createLinks($content);
                    });
                }
                $('<div>')
                    .css({
                        position: 'absolute',
                        left: '16px',
                        right: '16px',
                        top: '16px',
                        overflowY: 'auto'
                    })
                    .append($content)
                    .appendTo($text);
                return Ox.SplitPanel({
                    elements: [
                        {
                            element: $logo,
                            size: 208
                        },
                        {
                            element: $text
                        }
                    ],
                    orientation: 'horizontal'
                });
            },
            style: 'squared',
            tabs: tabs
        })
        .bindEvent({
            change: function(data) {
                oml.UI.set({page: data.selected});
            }
        }),

        that = Ox.Dialog({
            buttons: [
                Ox.Button({
                    id: 'update',
                    style: 'squared',
                    title: Ox._('Software Update...')
                })
                .bindEvent({
                    click: function() {
                        oml.UI.set({page: 'update'});
                    }
                }),
                {},
                Ox.Button({
                    id: 'close',
                    style: 'squared',
                    title: Ox._('Close')
                }).bindEvent({
                    click: function() {
                        that.close();
                    }
                })
            ],
            closeButton: true,
            content: $panel,
            fixedSize: true,
            height: 384,
            removeOnClose: true,
            style: 'squared',
            title: 'Open Media Library',
            width: 768
        })
        .bindEvent({
            close: function() {
                if (Ox.contains(tabs.map(function(tab) {
                    return tab.id;
                }), ui.page)) {
                    oml.UI.set({page: ''});
                }
            }
        });

    that.updateElement = function(section) {
        $panel.selectTab(section);
    };

    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;

};