# HG changeset patch
# User Atul Varma <varmaa@toolness.com>
# Date 1260818411 28800
# Node ID 1909896414d86dca6436b9f2afadcc01fff4fd59
# Parent  831e6516b5d28f944f3c28789bee15f256a74004
changed microformat to not use img tags anymore, since we can't control the loading of these images on many browsers, which means all pictures are loaded at all resolutions by them.

diff -r 831e6516b5d2 -r 1909896414d8 mbp.html
--- a/mbp.html	Fri Dec 11 17:35:45 2009 -0800
+++ b/mbp.html	Mon Dec 14 11:20:11 2009 -0800
@@ -14,11 +14,11 @@
 <h1>mozilla: the big picture</h1>
 <div class="mbp-entry">
   <a class="link"
-     href="http://blog.mozilla.com/blog/2009/11/06/firefox-goes-mobile-winner-announced-plus-a-new-design-challenge/">
-    <img width="580" height="647"
-         src="http://creative.mozilla.org/images/designs/0/346/346_lg.jpg"
-         style="clip: rect(136, 375, 261, 250);"/>
-  </a>
+     href="http://blog.mozilla.com/blog/2009/11/06/firefox-goes-mobile-winner-announced-plus-a-new-design-challenge/"></a>
+  <a class="picture"
+     data-width="580" data-height="647"
+     href="http://creative.mozilla.org/images/designs/0/346/346_lg.jpg"
+     data-crop="rect(136, 375, 261, 250)"></a>
   <div class="title">Pocketfox</div>
   <div class="date">11.6.09</div>
   <div class="caption">Yaroslaff Chekunov's winning entry for the
@@ -28,15 +28,17 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.flickr.com/photos/nois3lab/4088072729/in/set-72157622640597827/">
-    <img width="3720" height="2480"
-         src="http://farm3.static.flickr.com/2567/4088072729_0286a1611c_o.jpg"/>
-    <img width="1024" height="683"
-         src="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513_b.jpg"/>
-    <img width="500" height="333"
-         src="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513.jpg"
-         style="clip: rect(36, 293, 160, 169);"/>
-  </a>
+     href="http://www.flickr.com/photos/nois3lab/4088072729/in/set-72157622640597827/"></a>
+  <a class="picture"
+     data-width="3720" data-height="2480"
+     href="http://farm3.static.flickr.com/2567/4088072729_0286a1611c_o.jpg"></a>
+  <a class="picture"
+     data-width="1024" data-height="683"
+     href="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513_b.jpg"></a>
+  <a class="picture"
+     data-width="500" data-height="333"
+     href="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513.jpg"
+     data-crop="rect(36, 293, 160, 169)"></a>
   <div class="title">Colosseo</div>
   <div class="date">11.8.09</div>
   <div class="caption">In this bold entry to the “Light the World
@@ -45,13 +47,14 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.flickr.com/photos/rogeliocalamaya/4090865406/">
-    <img width="663" height="848"
-         src="http://farm3.static.flickr.com/2778/4090865406_2cc961098e_o.jpg"/>
-    <img width="391" height="500"
-         src="http://farm3.static.flickr.com/2778/4090865406_76ed2868d9.jpg"
-         style="clip: rect(163, 240, 290, 113);"/>
-  </a>
+     href="http://www.flickr.com/photos/rogeliocalamaya/4090865406/"></a>
+  <a class="picture"
+     data-width="663" data-height="848"
+     href="http://farm3.static.flickr.com/2778/4090865406_2cc961098e_o.jpg"></a>
+  <a class="picture"
+     data-width="391" data-height="500"
+     href="http://farm3.static.flickr.com/2778/4090865406_76ed2868d9.jpg"
+     data-crop="rect(163, 240, 290, 113)"></a>
   <div class="title">Birthday</div>
   <div class="date">11.9.09</div>
   <div class="caption">Rogelio Calamaya's entry in the “Five Years of
@@ -59,11 +62,11 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://antennasoft.net/robcee/2009/11/12/firebug-1-5-new-features-revealed/">
-    <img width="749" height="401"
-         src="http://farm3.static.flickr.com/2527/4098694166_44025231d6_o.png"
-         style="clip: rect(141, 133, 270, 4);"/>
-  </a>
+     href="http://antennasoft.net/robcee/2009/11/12/firebug-1-5-new-features-revealed/"></a>
+  <a class="picture"
+     data-width="749" data-height="401"
+     href="http://farm3.static.flickr.com/2527/4098694166_44025231d6_o.png"
+     data-crop="rect(141, 133, 270, 4)"></a>
   <div class="title">Break</div>
   <div class="date">11.12.09</div>
   <div class="caption">Rob Campbell shows off Firebug's new
@@ -72,11 +75,11 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.womoz.org/blog/?p=142">
-    <img width="420" height="300"
-         src="http://womoz.org/wiki/lib/exe/fetch.php?cache=&media=logos:logo9.jpg"
-         style="clip: rect(48, 255, 250, 53);"/>
-  </a>
+     href="http://www.womoz.org/blog/?p=142"></a>
+  <a class="picture"
+     data-width="420" data-height="300"
+     href="http://womoz.org/wiki/lib/exe/fetch.php?cache=&media=logos:logo9.jpg"
+     data-crop="rect(48, 255, 250, 53)"></a>
   <div class="title">WoMoz</div>
   <div class="date">11.19.09</div>
   <div class="caption">Anamaria Stoica's submission was chosen as the new
@@ -84,13 +87,14 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://blog.stephenhorlander.com/2009/11/20/sketch-day/">
-    <img width="1172" height="906"
-         src="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-large.jpg"/>
-    <img width="490" height="375"
-         src="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-small.jpg"
-         style="clip: rect(16, 206, 197, 25);"/>
-  </a>
+     href="http://blog.stephenhorlander.com/2009/11/20/sketch-day/"></a>
+  <a class="picture"
+     data-width="1172" data-height="906"
+     href="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-large.jpg"></a>
+  <a class="picture"
+     data-width="490" data-height="375"
+     href="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-small.jpg"
+     data-crop="rect(16, 206, 197, 25)"></a>
   <div class="title">Sketch Day</div>
   <div class="date">11.20.09</div>
   <div class="caption">Stephen Horlander, visual designer extraordinaire,
@@ -99,11 +103,11 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.azarask.in/blog/post/identity-in-the-browser-firefox/">
-    <img width="1000" height="1500"
-         src="http://farm3.static.flickr.com/2552/4128966575_9876fdb834_o.png"
-         style="clip: rect(411, 720, 573, 558);"/>
-  </a>
+     href="http://www.azarask.in/blog/post/identity-in-the-browser-firefox/"></a>
+  <a class="picture"
+     width="1000" height="1500"
+     href="http://farm3.static.flickr.com/2552/4128966575_9876fdb834_o.png"
+     data-crop="rect(411, 720, 573, 558)"></a>
   <div class="title">Identity</div>
   <div class="date">11.24.09</div>
   <div class="caption">Aza Raskin, Mozilla's Head of User Experience,
diff -r 831e6516b5d2 -r 1909896414d8 mbp.js
--- a/mbp.js	Fri Dec 11 17:35:45 2009 -0800
+++ b/mbp.js	Mon Dec 14 11:20:11 2009 -0800
@@ -1,52 +1,61 @@
 $(window).ready(
   function() {
     var containerWidth = $("#container").width();
-    var rectRegexp = /rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)/;
+    var rectRegexp = /rect\((\d+),? (\d+),? (\d+),? (\d+)\)/;
+
+    function dWidth(element) {
+      return parseInt($(element).attr("data-width"));
+    }
 
     // Each entry may have multiple resolutions of the same image;
     // choose the one that's best for our display device, and
-    // make sure we have a clipping area for its thumbnail.
+    // make sure we have a cropping area for its thumbnail.
     $(".mbp-entry").each(
       function() {
-        var images = $(this).find("img");
-        var lastClip = null;
+        var pictures = $(this).find(".picture");
+        var lastCrop = null;
         var best = null;
-        images.each(
+        pictures.each(
           function() {
-            var clip = $(this).css("clip");
-            if (clip != "auto")
-              lastClip = this;
+            var crop = $(this).attr("data-crop");
+            if (crop)
+              lastCrop = this;
             if (best) {
               // The "best" image is the lowest-resolution image
               // that's still bigger than the width of our container:
               // this way we never upscale, but we also don't waste
               // bandwidth getting a massive image that we won't
               // see.
-              if (this.width < best.width &&
-                  this.width >= containerWidth) {
+              if (dWidth(this) < dWidth(best) &&
+                  dWidth(this) >= containerWidth) {
                 best = this;
               }
             } else
               best = this;
           });
 
-        // If our best image doesn't have a CSS clipping rect associated
-        // with it, we'll use the scaled clipping rect of another
+        // If our best picture doesn't have a cropping rect associated
+        // with it, we'll use the scaled cropping rect of another
         // resolution.
-        if ($(best).css("clip") == "auto" && lastClip) {
-          var scaling = best.width / lastClip.width;
-          var parts = $(lastClip).css("clip").match(rectRegexp);
+        if (!$(best).attr("data-crop") && lastCrop) {
+          var scaling = dWidth(best) / dWidth(lastCrop);
+          var parts = $(lastCrop).attr("data-crop").match(rectRegexp);
           if (!parts)
-            throw new Error("Invalid 'clip' CSS for " + lastClip.src);
+            throw new Error("Invalid 'data-crop' for " + lastCrop.href);
 
           var newParts = [];
           for (var i = 1; i <= 4; i++)
-            newParts.push(Math.floor(parts[i] * scaling) + "px");
-          $(best).css({clip: "rect(" + newParts.join(", ") + ")"});
+            newParts.push(Math.floor(parts[i] * scaling));
+          $(best).attr("data-crop", "rect(" + newParts.join(", ") + ")");
         }
 
-        // Remove all the non-ideal images we don't need.
-        images.each(function() { if (this != best) $(this).remove(); });
+        var image = $("<img/>");
+        image.attr("src", best.href);
+        image.attr("width", $(best).attr("data-width"));
+        image.attr("height", $(best).attr("data-height"));
+        image.attr("data-crop", $(best).attr("data-crop"));
+        $(this).find(".link").empty().append(image);
+        pictures.remove();
       });
 
     var images = $(".mbp-entry img");
@@ -58,17 +67,10 @@
         function onLoaded() {
           $("#countdown").text(--loadsLeft);
 
-          while (this.previousSibling &&
-                 this.previousSibling.isElementContentWhitespace)
-            $(this.previousSibling).remove();
-          while (this.nextSibling &&
-                 this.nextSibling.isElementContentWhitespace)
-            $(this.nextSibling).remove();
-
-          var clip = $(this).css("clip");
-          var parts = clip.match(rectRegexp);
+          var crop = $(this).attr("data-crop");
+          var parts = crop.match(rectRegexp);
           if (!parts)
-            throw new Error("Invalid 'clip' CSS for " + this.src);
+            throw new Error("Invalid 'data-crop' for " + this.src);
 
           var crop = {top: parts[1],
                       right: parts[2],