launch sequence

build/js/ox.load.js

@@ -1,44 +1,120 @@
-(function() {
-    var image = new Image(),
-        src = document.scripts ?
-                document.scripts[0].getAttribute('src')
-                .replace('js/ox.load.js', 'png/ox.ui.classic/loading.png') :
-                '/static/oxjs/build/png/ox.ui.classic/loading.png';
-    image.src = src;
-    image.onload = function() {
-        var deg = 0,
-            img = document.createElement('img'),
-            key,
-            style = {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-                width: '32px',
-                height: '32px',
-                margin: 'auto',
-                //opacity: 0,
-                MozUserSelect: 'none',
-                WebkitUserSelect: 'none'
-            };
-        img.setAttribute('src', src);
-        for (var key in style) {
-            img.style[key] = style[key];
-        }
-        document.body ? loaded() : document.addEventListener('DOMContentLoaded', loaded, false);
+$(function() {
+
+    var $body = $('body'),
+        $head = $('head'),
+        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': '',
+            '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;
+            }
+        });
+        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'
+                    }))
+                    .appendTo($body),
+                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 opacity = 0;
-            document.removeEventListener('DOMContentLoaded', loaded, false);
-            //document.body.style.background = 'rgb(240, 240, 240)';
-            document.body.appendChild(img);
-            setInterval(function() {
-                //opacity += 0.083
-                deg = (deg + 30) % 360;
-                //img.style.opacity = Math.max(opacity, 1);
-                img.style.MozTransform = 'rotate(' + deg + 'deg)';
-                img.style.WebkitTransform = 'rotate(' + deg + 'deg)';
-            }, 83);
+            var $div = $('<div>')
+                    .css($.extend(css, {
+                        width: '216px',
+                        height: '72px'
+                    }));
+            $.each(src, function(name, src) {
+                $('<a>')
+                    .attr({
+                        href: userAgents[name],
+                        title: name
+                    })
+                    .append(
+                        $('<img>')
+                            .attr({
+                                src: src
+                            })
+                            .css({
+                                float: 'left',
+                                width: '64px',
+                                height: '64px',
+                                border: 0,
+                                margin: '4px',
+                                cursor: 'pointer'
+                            })
+                    )
+                    .appendTo($div);
+            });
+            $div.appendTo($body);
+            //throw new Error('User Agent not supported.');
         }
     }
-})();
+
+});