'use strict'

/*@
Ox.ExamplePage <f> Example Page
    options <o> Options
    self <o> Shared private variable
    ([options[, self]]) -> <o:Ox.SplitPanel> Example Page
        change <!> Change event 
        close <!> Close event
@*/

Ox.ExamplePage = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            html: '',
            js: '',
            references: [],
            replaceCode: [],
            replaceComment: [],
            selected: 'source',
            title: ''
        })
        .options(options || {})
        .update({
            selected: function() {
                self.$tabs.options({value: self.options.selected});
            }
        });

    self.$toolbar = Ox.Bar({size: 24});

    self.$homeButton = Ox.Button({
            title: 'home',
            tooltip: 'Home',
            type: 'image'
        })
        .css({float: 'left', margin: '4px 2px 4px 4px'})
        .bindEvent({
            click: function() {
                that.triggerEvent('close');
            }
        })
        .appendTo(self.$toolbar)

    self.$title = Ox.Label({
            style: 'square',
            title: self.options.title
        })
        .css({float: 'left', borderRadius: '4px', margin: '4px 2px 4px 2px'})
        .appendTo(self.$toolbar);

    self.$openButton = Ox.Button({
            disabled: self.options.selected == 'source',
            title: 'open',
            tooltip: 'Open in New Tab',
            type: 'image'
        })
        .css({float: 'right', margin: '4px 4px 4px 2px'})
        .bindEvent({
            click: function() {
                window.open(self.options.html);
            }
        })
        .appendTo(self.$toolbar);

    self.$reloadButton = Ox.Button({
            disabled: self.options.selected == 'source',
            title: 'redo',
            tooltip: 'Reload',
            type: 'image'
        })
        .css({float: 'right', margin: '4px 2px 4px 2px'})
        .bindEvent({
            click: function() {
                self.$frame.attr({src: self.options.html});
            }
        })
        .appendTo(self.$toolbar);

    self.$switchButton = Ox.Button({
            disabled: self.options.selected == 'source',
            title: 'switch',
            tooltip: 'Switch Theme',
            type: 'image'
        })
        .css({float: 'right', margin: '4px 2px 4px 2px'})
        .bindEvent({
            click: function() {
                self.$frame[0].contentWindow.postMessage(
                    'Ox && Ox.Theme && Ox.Theme('
                    + 'Ox.Theme() == "oxlight" ? "oxmedium"'
                    + ' : Ox.Theme() == "oxmedium" ? "oxdark"'
                    + ' : "oxlight"'
                    + ')',
                    '*'
                );
            }
        })
        .appendTo(self.$toolbar);

    self.$tabs = Ox.ButtonGroup({
            buttons: [
                {
                    id: 'source',
                    title: 'View Source',
                    width: 80
                },
                {
                    id: 'live',
                    title: 'View Live',
                    width: 80
                }
            ],
            selectable: true,
            value: self.options.selected
        })
        .css({float: 'right', margin: '4px 2px 4px 2px'})
        .bindEvent({
            change: function(data) {
                var disabled = data.value == 'source';
                self.options.selected = data.value;
                self.hasUI && self.$switchButton.options({disabled: disabled});
                self.$reloadButton.options({disabled: disabled});
                self.$openButton.options({disabled: disabled});
                self.$content.animate({
                    marginLeft: self.options.selected == 'source'
                        ? 0 : -self.options.width + 'px'
                }, 250, function() {
                    if (
                        self.options.selected == 'live'
                        && !self.$frame.attr('src')
                    ) {
                        self.$frame.attr({src: self.options.html});
                    }
                });
                that.triggerEvent('change', data);
            }
        })
        .appendTo(self.$toolbar);

    self.$viewer = Ox.SourceViewer({
            file: self.options.js,
            replaceCode: self.options.replaceCode,
            replaceComment: self.options.replaceComment
        })
        .css({
            position: 'absolute',
            left: 0,
            top: 0,
            width: self.options.width + 'px',
            height: self.options.height - 24 + 'px'
        });
    self.$frame = Ox.Element('<iframe>')
        .css({
            position: 'absolute',
            left: self.options.width + 'px',
            top: 0,
            border: 0
        })
        .attr({
            width: self.options.width,
            height: self.options.height
        });
    self.$content = Ox.Element()
        .css({
            position: 'absolute',
            width: self.options.width * 2 + 'px',
            marginLeft: self.options.selected == 'source'
                ? 0 : -self.options.width + 'px'
        })
        .append(self.$viewer)
        .append(self.$frame);
    self.$container = Ox.Element()
        .append(self.$content);

    that.setElement(
        Ox.SplitPanel({
            elements: [
                {element: self.$toolbar, size: 24},
                {element: self.$container}
            ],
            orientation: 'vertical'
        })
        .addClass('OxExamplePage')
    );

    Ox.get(self.options.js, function(js) {
        self.hasUI = /Ox\.load\(.+UI.+,/.test(js);
        !self.hasUI && self.$switchButton.options({disabled: true});
    });

    Ox.$window.on({
        resize: function() {
            setSize();
        }
    });

    setTimeout(function() {
        setSize();
        if (self.options.selected == 'live') {
            self.$frame.attr({src: self.options.html});
        }
    }, 100);

    function setSize() {
        self.options.width = that.width();
        self.options.height = that.height();
        self.$content.css({
            width: self.options.width * 2 + 'px'
        })
        self.$viewer.css({
            width: self.options.width + 'px',
            height: self.options.height - 24 + 'px'
        })
        self.$frame.attr({
            width: self.options.width,
            height: self.options.height - 24
        });
    }

    return that;

};