/*@
Ox.DocPanel <f> Documentation Panel
@*/

Ox.DocPanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            collapsible: true,
            files: [],
            getModule: function(item) {
                return item.file.replace(self.options.path, '');
            },
            getSection: function(item) {
                return item.section;
            },
            path: '',
            resizable: true,
            resize: [128, 256, 384],
            size: 256
        })
        .options(options || {});

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

    that.$element = 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(docItems) {
        self.items = docItems;
    });

    function loadList(callback) {
        var counter = 0,
            length = self.options.files.length;
            docItems = [];
        self.options.files.forEach(function(file) {
            Ox.doc(self.options.path + file, function(fileItems) {
                docItems = Ox.merge(docItems, fileItems);
                if (++counter == length) {
                    makeTree(docItems);
                    callback(docItems);
                }
            });
        });
        function makeTree(docItems) {
            var treeItems = [];
            docItems.forEach(function(docItem) {
                var moduleIndex, sectionIndex;
                docItem.module = self.options.getModule(docItem);
                moduleIndex = Ox.getPositionById(treeItems, '_' + docItem.module);
                if (moduleIndex == -1) {
                    treeItems.push({
                        id: '_' + docItem.module,
                        items: [],
                        title: docItem.module
                    });
                    moduleIndex = treeItems.length - 1;
                }
                docItem.section = self.options.getSection(docItem);
                if (docItem.section) {
                    sectionIndex = Ox.getPositionById(
                        treeItems[moduleIndex].items, '_' + docItem.section
                    );
                    if (sectionIndex == -1) {
                        treeItems[moduleIndex].items.push({
                            id: '_' + docItem.section,
                            items: [],
                            title: docItem.section
                        });
                        sectionIndex = treeItems[moduleIndex].items.length - 1;
                    }
                }
                (
                    docItem.section ?
                    treeItems[moduleIndex].items[sectionIndex] :
                    treeItems[moduleIndex]
                ).items.push({
                    id: docItem.name,
                    title: docItem.name
                });
            });
            self.$list = Ox.TreeList({
                    items: treeItems,
                    width: self.options.width
                })
                .bindEvent({
                    select: selectItem
                });
            that.$element.replaceElement(0, self.$list);
        }
    }

    function getItemByName(name) {
        var item = {};
        Ox.forEach(self.items, function(v) {
            if (v.name == name) {
                item = v;
                return false;
            }
        });
        return item;
    }

    function selectItem(data) {
        var selected = data.ids[0];
        if (selected[0] != '_') {
            self.$page = Ox.DocPage({
                item: getItemByName(selected)
            });
            that.$element.replaceElement(1, self.$page);
        }
    }

    return that;

};