use jquery backstretch to make the background appearance a bit more m…

…odernj

public/js/app.js

@@ -7,7 +7,7 @@ var namespaceLimit = "all";
 var includeRobots = true;
 var includeUsers = true;
 var includeAnonymous = true;
-var backgroundTimeout = 1000 * 5;
+var backgroundTimeout = 1000 * 10;
 var showBackground = true;
 var lastBackgroundChange = new Date() - backgroundTimeout;
 
@@ -63,14 +63,7 @@ function addUpdate(msg) {
       if (image['width'] > 500 
         && image['height'] > 500
         && (new Date() - lastBackgroundChange > backgroundTimeout)) {
-        $('html').css({
-            'background': 'url(' + image['url'] + ') no-repeat center center fixed',
-            '-webkit-background-size': 'cover',
-            '-moz-background-size': 'cover',
-            '-o-background-size': 'cover',
-            'background-size': 'cover'
-
-        });
+        $.backstretch(image['url'], {speed: 1000});
         lastBackgroundChange = new Date();
       }
     });

public/js/jquery.backstretch.js

@@ -0,0 +1,118 @@
+/*
+ * jQuery Backstretch
+ * Version 1.2.5
+ * http://srobbin.com/jquery-plugins/jquery-backstretch/
+ *
+ * Add a dynamically-resized background image to the page
+ *
+ * Copyright (c) 2011 Scott Robbin (srobbin.com)
+ * Dual licensed under the MIT and GPL licenses.
+*/
+
+(function($) {
+
+    $.backstretch = function(src, options, callback) {
+        var defaultSettings = {
+            centeredX: true,         // Should we center the image on the X axis?
+            centeredY: true,         // Should we center the image on the Y axis?
+            speed: 0                 // fadeIn speed for background after image loads (e.g. "fast" or 500)
+        },
+        container = $("#backstretch"),
+        settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default
+        existingSettings = container.data('settings'),
+        rootElement = ("onorientationchange" in window) ? $(document) : $(window), // hack to acccount for iOS position:fixed shortcomings
+        imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS;
+
+        // Extend the settings with those the user has provided
+        if(options && typeof options == "object") $.extend(settings, options);
+
+        // Just in case the user passed in a function without options
+        if(options && typeof options == "function") callback = options;
+
+        // Initialize
+        $(document).ready(_init);
+
+        // For chaining
+        return this;
+
+        function _init() {
+            // Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo
+            if(src) {
+                var img;
+
+                // If this is the first time that backstretch is being called
+                if(container.length == 0) {
+                    container = $("<div />").attr("id", "backstretch")
+                                            .css({left: 0, top: 0, position: "fixed", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "100%", width: "100%"});
+                } else {
+                    // Prepare to delete any old images
+                    container.find("img").addClass("deleteable");
+                }
+
+                img = $("<img />").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999})
+                                  .bind("load", function(e) {                                          
+                                      var self = $(this),
+                                          imgWidth, imgHeight;
+
+                                      self.css({width: "auto", height: "auto"});
+                                      imgWidth = this.width || $(e.target).width();
+                                      imgHeight = this.height || $(e.target).height();
+                                      imgRatio = imgWidth / imgHeight;
+
+                                      _adjustBG(function() {
+                                          self.fadeIn(settings.speed, function(){
+                                              // Remove the old images, if necessary.
+                                              container.find('.deleteable').remove();
+                                              // Callback
+                                              if(typeof callback == "function") callback();
+                                          });
+                                      });
+
+                                  })
+                                  .appendTo(container);
+
+                // Append the container to the body, if it's not already there
+                if($("body #backstretch").length == 0) {
+                    $("body").append(container);
+                }
+
+                // Attach the settings
+                container.data("settings", settings);
+
+                img.attr("src", src); // Hack for IE img onload event
+                // Adjust the background size when the window is resized or orientation has changed (iOS)
+                $(window).resize(_adjustBG);
+            }
+        }
+
+        function _adjustBG(fn) {
+            try {
+                bgCSS = {left: 0, top: 0}
+                bgWidth = rootElement.width();
+                bgHeight = bgWidth / imgRatio;
+
+                // Make adjustments based on image ratio
+                // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
+                if(bgHeight >= rootElement.height()) {
+                    bgOffset = (bgHeight - rootElement.height()) /2;
+                    if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
+                } else {
+                    bgHeight = rootElement.height();
+                    bgWidth = bgHeight * imgRatio;
+                    bgOffset = (bgWidth - rootElement.width()) / 2;
+                    if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
+                }
+
+                $("#backstretch, #backstretch img:not(.deleteable)").width( bgWidth ).height( bgHeight )
+                                                   .filter("img").css(bgCSS);
+            } catch(err) {
+                // IE7 seems to trigger _adjustBG before the image is loaded.
+                // This try/catch block is a hack to let it fail gracefully.
+            }
+
+            // Executed the passed in function, if necessary
+            if (typeof fn == "function") fn();
+        }
+    };
+
+})(jQuery);

public/stylesheets/style.css

@@ -16,9 +16,8 @@ header {
     padding: 5px;
     margin-bottom: 10px;
     margin-top: 10px;
-    opacity: 0.8;
-    background-color: white;
-    border: thin gray solid;
+    opacity: 0.7;
+    background-color: #eeeeee;
 }
 
 header span.wikistream {
@@ -43,10 +42,9 @@ header img {
     margin-right: auto;
     height: 825px;
     width: 800px;
-    border: thin gray solid;
-    padding: 3px;
+    padding: 4px;
     background-color: #eeeeee;
-    opacity: 0.8;
+    opacity: 0.7;
 }
 
 #controls {
@@ -191,3 +189,10 @@ a.page {
 select#wikis {
     width: 175px;
 }
+
+#background {
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}

views/layout.jade

@@ -13,6 +13,7 @@ html
         script(src='/js/app.js')
         script(src='/js/jquery.blockUI.js')
         script(src='/js/jquery-ui.js')
+        script(src='/js/jquery.backstretch.js')
 
     - if (trends)
         script(src="/js/trends.js")