'use strict'

Ox.ExamplePage = function(options, self) {

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

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

    self.$title = Ox.Label({
            style: 'square',
            title: 'Examples: ' + self.options.title
        })
        .css({float: 'left', margin: '4px'})
        .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.$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) {
                self.options.selected = data.value;
                self.$reloadButton.options({disabled: data.value == 'source'});
                self.$openButton.options({disabled: data.value == 'source'});
                self.$content.animate({
                    marginLeft: data.value == 'source'
                        ? 0 : -self.options.width + 'px'
                }, 250, function() {
                    if (data.value == 'live' && !self.$frame.attr('src')) {
                        self.$frame.attr({src: self.options.html});
                    }
                });
            }
        })
        .appendTo(self.$toolbar);

    self.$keywordMenu = Ox.MenuButton({
            items: self.options.keywords.map(function(keyword) {
                return {id: keyword, title: keyword};
            }),
            //title: 'Documentation',
            //width: 128
            title: 'select',
            tooltip: 'References',
            type: 'image'
        })
        .css({float: 'right', margin: '4px 2px 4px 2px'})
        .bindEvent({
            click: function(data) {
                that.triggerEvent('select', {id: data.id});
            }
        })
        .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'
        })
        .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'
        })
    );

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

    setTimeout(setSize, 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;

};