'use strict';

Ox.ExamplePanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            collapsibe: false,
            examples: [],
            path: '',
            replace: [],
            resizable: false,
            resize: [],
            size: 256,
        })
        .options(options || {})

    self.$list = Ox.Element();
    self.$page = Ox.Element();

    that.setElement(
        self.$panel = Ox.SplitPanel({
            elements: [
                {
                    collapsible: self.options.collapsible,
                    element: self.$list,
                    resizable: self.options.resizable,
                    resize: self.options.resize,
                    size: self.options.size
                },
                {
                    element: self.$page
                }
            ],
            orientation: 'horizontal'
        })
    );

    loadList(function(items) {
        self.items = items;
        self.$list = Ox.TextList({
                columns: [
                    {
                        id: 'id',
                        unique: true
                    },
                    {
                        id: 'title',
                        operator: '+',
                        title: 'Title',
                        visible: true,
                        width: self.options.size - Ox.UI.SCROLLBAR_SIZE
                    }
                ],
                items: self.items,
                scrollbarVisible: true,
                sort: ['+title']
            })
            .bindEvent({
                select: function(data) {
                    var item;
                    if (data.ids.length) {
                        item = Ox.getObjectById(self.items, data.ids[0]);
                        self.$panel.replaceElement(1,
                            self.$page = Ox.ExamplePage({
                                height: window.innerHeight,
                                html: item.html,
                                js: item.js,
                                replace: self.options.replace,
                                title: item.title,
                                width: window.innerWidth - self.options.size
                            })
                        )
                    } else {
                        self.$page.empty()
                    }
                }
            });
        self.$panel.replaceElement(0, self.$list);
        that.triggerEvent('load', {});
    });

    function loadList(callback) {
        var items = [];
        self.options.examples.forEach(function(example) {
            var file = self.options.path + example + '/index.html';
            Ox.get(file, function(html) {
                var keywords = html.match(/<meta name="keywords" content="(.+)"/),
                    title = html.match(/<title>(.+)<\/title>/);
                items.push({
                    html: file,
                    id: example,
                    js: self.options.path + example + '/js/example.js',
                    keywords: keywords ? keywords[1].split(', ') : [],
                    title: title ? title[1] : 'Untitled'
                });
                items.length == self.options.examples.length && callback(items);
            });
        });
    }

    function parseExample() {
        
    }

    return that;

};