Ox.load('UI', {
    theme: 'classic'
}, function() {
    Ox.Theme('classic');
    Ox.getJSON(Ox.PATH + 'Ox/json/Ox.json', function(oxFiles) {
        Ox.getJSON(Ox.PATH + 'Ox.UI/json/Ox.UI.files.json', function(oxuiFiles) {
            doc = Ox.DocPanel({
                    files: Ox.merge(
                        Ox.flatten(oxFiles),
                        oxuiFiles.filter(function(file) {
                            return Ox.endsWith(file, '.js');
                        }),
                        [
                            'Ox.Geo/Ox.Geo.js',
                            'Ox.Image/Ox.Image.js',
                            'Ox.Unicode/Ox.Unicode.js'
                        ]
                    ),
                    getModule: function(item) {
                        var file = item.file.replace(Ox.PATH, '');
                        return file.split('/')[0];
                    },
                    getSection: function(item) {
                        var file = item.file.replace(Ox.PATH, '');
                        return item.section || file.split('/')[2].split('.')[0];
                    },
                    path: Ox.PATH
                }).bindEvent({
                    load: function() {
                        if (document.location.hash.substring(1)) {
                            doc.selectItem(document.location.hash.substring(1));
                        }
                    },
                    select: function(data) {
                        if (data.id) {
                            document.location.hash = data.id;
                        }
                    }
                });
            doc.appendTo(Ox.UI.$body);
            window.onhashchange = function() {
                doc.selectItem(document.location.hash.substring(1))
            };
        });
    });
});