Ox.load(function() {
    
    var app = {

        $ui: {},

        data: {},

        fn: {

            animate: function(callback) {
                var css = app.fn.getCSS(),
                    home = !app.fn.url();
                home && app.$ui.logo.attr({
                    src: app.fn.getLogoURL()
                })
                Ox.forEach(app.fn.getCSS(), function(css, element) {
                    app.$ui[element].animate(
                        css,
                        1000,
                        element == 'logo' ? function() {
                            !home && app.$ui.logo.attr({
                                src: app.fn.getLogoURL()
                            });
                            callback();
                        } : void 0
                    );
                });
            },

            getCSS: function() {
                return app.fn.url() ? {
                    panel: {
                        opacity: 1
                    },
                    line: {
                        top: '26px',
                        left: '4px',
                        width: '32px',
                        fontSize: '1px',
                        opacity: 0
                    },
                    logo: {
                        top: '8px',
                        left: '8px',
                        width: '32px',
                        height: '16px'
                    },
                    sections: {
                        top: '8px',
                        left: app.window.center - 256 + 'px'
                    },
                    themes: {
                        top: '8px',
                        right: '8px'
                    }
                } : {
                    panel: {
                        opacity: 0
                    },
                    line: {
                        top: app.window.middle + 16 + 'px',
                        left: app.window.center - 192 + 'px',
                        width: '384px',
                        fontSize: '12px',
                        opacity: 1
                    },
                    logo: {
                        left: app.window.center - 128 + 'px',
                        top: app.window.middle - 128 + 'px',
                        width: '256px',
                        height: '128px'
                    },
                    sections: {
                        top: app.window.middle + 48 + 'px',
                        left: app.window.center - 256 + 'px'
                    },
                    themes: {
                        top: app.window.middle + 80 + 'px',
                        right: app.window.center - 40 + 'px'
                    }
                }
            },

            getIconURL: function() {
                return 'source/Ox.UI/themes/' + app.user('theme')
                    + '/png/icon16.png';
            },

            getLogoURL: function() {
                return 'source/Ox.UI/themes/' + app.user('theme')
                    + '/png/logo' + (app.fn.url() ? 16 : 128) + '.png'
            },

            getLogoCSS: function() {
                return {
                    boxShadow: '0 0 1px ' + (
                        app.user('theme') == 'classic'
                        ? 'rgb(0, 0, 0)'
                        : 'rgb(255, 255, 255)'
                    )
                };
            },

            hashchange: function() {
                var url = app.fn.url(),
                    section = url.split('/')[0];
                app.fn[!url || !app.url ? 'animate' : 'void'](function() {
                    if (section && section != app.url.split('/')[0] && !app.foo) {
                        app.fn.setSection(section);
                    }
                    app.url = url;                  
                });
            },

            load: function() {
                var $window = Ox.$(window);
                app.fn.setTheme(app.user('theme') || 'classic');
                !app.user('url') && app.user({url: 'about'});
                app.fn.render();
                Ox.getJSON('index.json', function(data) {
                    app.data = data;
                });
                $window.bind({
                    hashchange: app.fn.hashchange,
                    resize: app.fn.resize
                });
                window.oxjs = app; // so that you can play with it in the console  
                Ox.load({UI: {theme: app.user('theme')}}, app.fn.render);
            },

            render: function() {
                var $body = (Ox.UI ? $ : Ox.$)('body').empty();
                Ox.forEach(app.fn.getCSS(), function(css, element) {
                    app.$ui[element] = app.ui[element]().css(
                        Ox.extend(css, element == 'logo' ? app.fn.getLogoCSS() : {})
                    ).appendTo($body);
                });
            },

            resize: function() {
                app.window = app.fn.window();
                Ox.forEach(app.fn.getCSS(), function(css, element) {
                    app.$ui[element].css(css);
                });
            },

            setSection: function(section) {
                app.$ui.panel.replaceElement(1, app.ui[section]
                    ? app.ui[section]() : app.ui.page(section)
                );
            },

            setTheme: function(theme) {
                app.user({theme: theme});
                (Ox.$('#icon') || Ox.$('<link>').attr({
                    id: 'icon',
                    rel: 'shortcut icon',
                    type: 'image/png'
                }).appendTo(Ox.$('head'))).attr({
                    href: app.fn.getIconURL()
                });
                app.$ui.logo && app.$ui.logo.attr({
                    src: app.fn.getLogoURL()
                }).css(app.fn.getLogoCSS());
                Ox.Theme ? Ox.Theme(theme) : Ox.$('body').addClass(
                    'OxTheme' + Ox.toTitleCase(theme)
                );
            },

            url: function() {
                var len = arguments.length, ret;
                if (len == 0) {
                    ret = window.location.hash.substr(1);
                } else {
                    if (len == 2) {
                        app.foo = true;
                    }
                    window.location.hash = '#' + arguments[0];
                    if (len == 2) {
                        app.foo = false;
                    }
                    ret = app;
                }
                return ret;
            },

            void: function(callback) {
                callback();
            },

            window: function() {
                return {
                    center: Math.floor(window.innerWidth / 2),
                    height: window.innerHeight,
                    middle: Math.floor(window.innerHeight / 2),
                    width: window.innerWidth
                };
            }

        },

        re: {

            code: [
                new RegExp(
                    '<span class="OxIdentifier">Ox</span>'
                    + '(<span class="OxOperator">\.</span>'
                    + '<span class="OxIdentifier">UI</span>)?'
                    + '<span class="OxOperator">\.</span>'
                    + '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
                    'g'
                ),
                function (str) {
                    return '<a href="#doc/' + Ox.stripTags(str)
                        + '" class="doclink">' + str + '</a>';
                }
            ],
            comment: [
                /\b(Ox\.\w+)\b/g,
                '<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
            ]

        },

        ui: {

            doc: function() {
                return Ox.DocPanel({
                    files: app.data.documentation,
                    getModule: function(item) {
                        var file = item.file.replace(/^dev\//, '');
                        return file.split('/')[0];
                    },
                    getSection: function(item) {
                        var file = item.file.replace(/^dev\//, '');
                        return item.section || file.split('/')[2].split('.')[0];
                    },
                    path: 'dev/',
                    replace: [app.re.code],
                });
            },

            examples: function() {
                return Ox.ExamplePanel({
                        examples: app.data.examples,
                        keywords: /\b(Ox\.[\w]+)\b/g,
                        path: 'examples/',
                        replaceCode: [app.re.code],
                        replaceComment: [app.re.comment],
                        selected: ''
                    })
                    .bindEvent({
                        select: function(data) {
                            app.fn.url(
                                'examples' + (data.id ? '/' + data.id : '')
                            )
                        }
                    });
            },

            line: function() {
                return (Ox.UI ? $ : Ox.$)('<div>')
                    .addClass('ui line')
                    .css({
                        top: app.window.middle + 12 + 'px',
                        left: app.window.center - 192 + 'px',
                    })
                    .html('A JavaScript Library for Web Applications')
            },

            logo: function() {
                return (Ox.UI ? $ : Ox.$)('<img>')
                    .addClass('ui logo')
                    .attr({
                        src: app.fn.getLogoURL()
                    })
                    .bind({
                        click: function() {
                            app.fn.url(app.fn.url() ? '' : app.user('url'));
                        }
                    });
            },

            page: function(page) {
                var $element = Ox.Container();
                Ox.get('readme/html/_' + page + '.html', function(html) {
                    $('<div>')
                        .addClass('OxSerif page')
                        .html(html)
                        .appendTo($element);
                });
                return $element;
            },

            panel: function() {
                return Ox.UI 
                    ? Ox.SplitPanel({
                            elements: [
                                {
                                    element: Ox.Bar({size: 32}),
                                    size: 32
                                },
                                {
                                    element: Ox.Element()
                                }
                            ],
                            orientation: 'vertical'
                        })
                        .css({opacity: 0})
                    : Ox.$('<div>').append(
                        Ox.$('<div>').addClass('bar').css({
                            width: '100%',
                            height: '32px'
                        })
                    );
            },

            readme: function() {
                return Ox.Element();
            },

            sections: function() {
                var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections');
                [
                    'about', 'readme', 'examples', 'doc',
                    'downloads', 'dev', 'contact'
                ].forEach(function(section, i) {
                    Ox.$('<span>')
                        .addClass('button' + (
                            app.user('section') == section ? ' selected' : ''
                        ))
                        .html(Ox.toTitleCase(
                            section == 'doc' ? 'documentation'
                            : section == 'dev' ? 'development'
                            : section
                        ))
                        .bind({
                            click: function() {
                                app.$ui.sections.children().removeClass('selected');
                                $(this).addClass('selected');
                                app.fn.url(section);
                            }
                        })
                        .appendTo($element);
                });
                return $element;
            },

            themes: function() {
                var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui themes');
                ['classic', 'modern'].forEach(function(theme, i) {
                    Ox.$('<span>')
                        .addClass('button' + (
                            app.user('theme') == theme ? ' selected' : ''
                        ))
                        .html(theme == 'classic' ? 'Light' : 'Dark')
                        .bind({
                            click: function() {
                                app.$ui.themes.children().removeClass('selected');
                                $(this).addClass('selected');
                                app.fn.setTheme(theme)
                            }
                        })
                        .appendTo($element);
                });
                return $element;
            }

        },

        user: Ox.localStorage('OxJS'),

    };

    app.url = app.fn.url();
    app.window = app.fn.window();
    app.fn.load();

});