oxjs/build/js/ox.load.js

$(function() {

    var $body = $('body'),
        $div = $('<div>')
            .css({
                position: 'absolute',
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                background: 'rgb(240, 240, 240)',
                opacity: 1,
                zIndex: 1000
            })
            .appendTo($body),
        css = {
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            margin: 'auto',
            MozUserSelect: 'none',
            WebkitUserSelect: 'none'
        },
        file = 'js/ox.load.js',
        path = $('script[src*="' + file + '"]').attr('src').replace(file, ''),
        userAgent,
        userAgents = {
            'Chrome': 'http://www.google.com/chrome/',
            'Firefox': 'http://www.mozilla.org/firefox/',
            'Internet Explorer': '',
            'Opera': 'http://www.opera.com/',
            'Safari': 'http://www.apple.com/safari/'
        };

    userAgent = getUserAgent();
    userAgents[userAgent] ? start() : stop();

    function getUserAgent() {
        var userAgent = '';
        $.each(userAgents, function(name, link) {
            if (navigator.userAgent.indexOf(name) > -1) {
                userAgent = name;
                return false;
            }
            if (!userAgent && navigator.userAgent.indexOf('Gecko') > -1)
                userAgent = 'Firefox';
        });
        return userAgent;
    }

    function start() {
        var image = new Image(),
            src = path + 'png/ox.ui.classic/loading.png';
        image.src = src;
        image.onload = function() {
            var $img = $('<img>')
                    .attr({
                        src: src
                    })
                    .css($.extend(css, {
                        width: '32px',
                        height: '32px'
                    }))
                    .mousedown(function(e) {
                        e.preventDefault();
                    })
                    .appendTo($div),
                deg = 0,
                interval = setInterval(function() {
                    deg = (deg + 30) % 360;
                    $img.css({
                        MozTransform: 'rotate(' + deg + 'deg)',
                        WebkitTransform: 'rotate(' + deg + 'deg)',
                    });
                }, 83);
        };
    }

    function stop() {
        var counter = 0,
            length = 0,
            src = {};
        $.each(userAgents, function(name, link) {
            if (link) {
                length++;
            }
        });
        $.each(userAgents, function(name, link) {
            var image;
            if (link) {
                image = new Image();
                src[name] = path + 'png/ox.ui/browser' + name + '128.png';
                image.src = src[name];
                image.onload = function() {
                    if (++counter == length) {
                        loaded();
                    }
                }
            }
        });
        function loaded() {
            var $div_ = $('<div>')
                    .css($.extend(css, {
                        width: (length * 72) + 'px',
                        height: '72px'
                    })),
                i = 0;
            $.each(src, function(name, src) {
                $('<a>')
                    .attr({
                        href: userAgents[name],
                        title: name
                    })
                    .css({
                        position: 'absolute',
                        left: (i++ * 72) + 'px',
                        width: '72px',
                        height: '72px',
                    })
                    .append(
                        $('<img>')
                            .attr({
                                src: src
                            })
                            .css($.extend(css, {
                                width: '64px',
                                height: '64px',
                                border: 0,
                                cursor: 'pointer'
                            }))
                            .mousedown(function(e) {
                                e.preventDefault();
                            })
                            .mouseenter(function() {
                                $(this).animate({
                                    width: '72px',
                                    height: '72px',
                                }, 250);
                            })
                            .mouseleave(function() {
                                $(this).animate({
                                    width: '64px',
                                    height: '64px',
                                }, 250);                                
                            })
                    )
                    .appendTo($div_);
            });
            $div_.appendTo($div);
            //throw new Error('User Agent not supported.');
        }
    }

});