'use strict';

Ox.ExamplePanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            element: '',
            examples: [],
            keywords: null,
            path: '',
            replaceCode: [],
            replaceComment: [],
            selected: '',
            size: 256
        })
        .options(options || {})

    self.$list = Ox.Element();
    self.$page = Ox.Element().append(self.options.element);

    that.setElement(
        self.$panel = Ox.SplitPanel({
            elements: [
                {
                    element: self.$list,
                    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,
                max: 1,
                selected: self.options.selected
                    ? [self.options.selected] : [],
                scrollbarVisible: true,
                sort: ['+title']
            })
            .bindEvent({
                select: function(data) {
                    selectItem(data.ids[0] || '');
                }
            });
        self.$panel.replaceElement(0, self.$list);
        that.triggerEvent('load', {});
    });

    function loadList(callback) {
        var items = [];
        self.options.examples.forEach(function(example) {
            var item = {
                    html: self.options.path + example + '/index.html',
                    id: example,
                    js: self.options.path + example + '/js/example.js'
                };
            Ox.get(item.html, function(html) {
                var title = html.match(/<title>(.+)<\/title>/);
                item.title = title ? title[1] : 'Untitled'
                Ox.get(item.js, function(js) {
                    var keywords = js.match(self.options.keywords);
                    item.keywords = keywords ? Ox.unique(keywords).sort(function(a, b) {
                        a = a.toLowerCase();
                        b = b.toLowerCase();
                        return a < b ? -1 : a > b ? 1 : 0;
                    }) : [];
                    items.push(item);
                    items.length == self.options.examples.length && callback(items);
                });
            });
        });
    }

    function selectItem(id) {
        var item;
        if (id) {
            item = Ox.getObjectById(self.items, id);
            self.$panel.replaceElement(1,
                self.$page = Ox.ExamplePage({
                    height: window.innerHeight,
                    html: item.html,
                    js: item.js,
                    keywords: item.keywords,
                    replaceCode: self.options.replaceCode,
                    replaceComment: self.options.replaceComment,
                    title: item.title,
                    width: window.innerWidth - self.options.size
                })
            );
        } else {
            self.$page.empty()
        }
        self.options.selected = id;
        that.triggerEvent('select', {id: id});
    }

    self.setOption = function(key, value) {
        if (key == 'selected') {
            Ox.print('SETTING LIST SELECTED TO', [value])
            self.$list.options({selected: [value]});
        }
    };

    return that;

};