Ox.DocPage = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            item: {}
        })
        .options(options || {})
        .addClass('OxText')
        .css({
            overflow: 'auto'
        });

    Ox.print('-------------------item', self.options.item)

    that.append($('<h1>').append('<code>' + self.options.item.name + '</code>'));

    getItem(self.options.item, 0).forEach(function($element) {
        that.append($element);
    });

    function getItem(item, level, name) {
        var $elements = [$('<div>')
            .css({paddingLeft: ((level * 32) + 'px')})
            .html(
                '<code><b>' + (name || item.name) + '</b> ' +
                '&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </code>' +
                (item.default ? 'default: <code>' + item.default + ' </code>' : '') +
                Ox.parseHTML(item.summary)
            )
        ];
        [
            'description', 'usage', 'arguments', 'properties', 'events', 'examples', 'source'
        ].forEach(function(section) {
            var className = 'OxLine' + Ox.uid();
            if (item[section]) {
                if (section == 'description') {
                    $elements.push($('<div>')
                        .css({paddingLeft: ((level * 32 + 16) + 'px')})
                        .html(item.description)
                    );
                } else {
                    $elements.push($('<div>')
                        .css({paddingLeft: ((level * 32 + 16) + 'px')})
                        .append(
                            $('<img>')
                                .attr({src: Ox.UI.getImagePath('symbolDown.svg')})
                                .css({
                                    width: '12px',
                                    height: '12px',
                                    margin: '0 4px -1px 0'
                                })
                                .click(function() {
                                    var $this = $(this),
                                        isExpanded = $this.attr('src') == Ox.UI.getImagePath('symbolDown.svg');
                                    $this.attr({
                                        src: isExpanded ?
                                        Ox.UI.getImagePath('symbolRight.svg') :
                                        Ox.UI.getImagePath('symbolDown.svg')
                                    });
                                    $('.' + className).each(function() {
                                        var $this = $(this);
                                        $this[isExpanded ? 'addClass' : 'removeClass'](className + 'Hidden');
                                        if (isExpanded) {
                                            $this.hide();
                                        } else {
                                            var hidden = false;
                                            Ox.forEach(this.className.split(' '), function(v) {
                                                if (/Hidden$/.test(v)) {
                                                    hidden = true;
                                                    return false;
                                                }
                                            });
                                            if (!hidden) {
                                                $this.show()
                                            }
                                        }
                                    });
                                })
                        )
                        .append('<b>' + Ox.toTitleCase(section) + '</b>')
                    );
                    if (section == 'examples') {
                        item.examples.forEach(function(example) {
                            $elements.push($('<div>')
                                .addClass(className)
                                .css({marginLeft: ((level * 32 + 32) + 'px')})
                                .html(
                                    '<code><b>&gt;&nbsp;' + 
                                    Ox.encodeHTML(example.statement)
                                    .replace(/ /g, '&nbsp;')
                                    .replace(/\n/g, '<br/>\n&nbsp;&nbsp;') +
                                    '</b></code>'
                                )
                            );
                            example.result && $elements.push($('<div>')
                                .addClass(className)
                                .css({marginLeft: ((level * 32 + 32) + 'px')})
                                .html(
                                    '<code>' + Ox.parseHTML(example.result) + '</code>'
                                )                            
                            )
                        });
                    } else if (section == 'source') {
                        var html = '';
                        item.source.forEach(function(token) {
                            html += '<span class="Ox' + Ox.toTitleCase(token.type) + '">' + 
                                Ox.encodeHTML(token.source)
                                .replace(/ /g, '&nbsp;')
                                .replace(/\n/g, '<br/>') + 
                                '</span>';
                        });
                        $elements.push($('<div>')
                            .addClass('OxSourceCode ' + className)
                            .css({background: 'rgb(255, 255, 255)', padding: '4px'})
                            .css({marginLeft: ((level * 32 + 32) + 'px')})
                            .html('<code>' + html + '</code>')
                        );
                    } else {
                        item[section].forEach(function(v) {
                            var name = section == 'usage' ?
                                item.name + v.name + ' </b></code>returns<code> <b>' : null;
                            $elements = Ox.merge(
                                $elements,
                                Ox.map(getItem(v, level + 1, name), function($element) {
                                    return $element.addClass(className);
                                })
                            );
                        });
                    }
                }
            }
        })
        return $elements;
    }

    return that;

};