Fix up the jetpack docs page

apps/devhub/templates/devhub/builder.html

@@ -10,6 +10,12 @@
       <strong>Builder and SDK:</strong> Create Add-ons Quickly and Easily
       {% endtrans %}
     </h2>
+    <div class="builder-videos">
+      <a href="http://people.mozilla.org/~clouserw/public/blog/amo-2011-development.ogv" rel="video-lightbox">
+        <img src="{{ media('img/developers/jetpack_video_1.jpg') }}" alt="{{ _('Video 1') }}"></a>
+      <a href="http://people.mozilla.org/~clouserw/public/blog/amo-2011-development.ogv" rel="video-lightbox">
+        <img src="{{ media('img/developers/jetpack_video_2.jpg') }}" alt="{{ _('Video 2') }}"></a>
+    </div>
     <p>
     {% trans %}
       Add-ons empower millions of Firefox users to personalize their browser's form and function.
@@ -22,9 +28,10 @@
 </div>
 
 <h2 class="section">{{ _('Choose Your Build Environment') }}</h2>
+<div class='equal'>
   <div class='cols'>
-  <div class='col-2'>
-    <div class='island jetpack-builder'>
+    <div class='col-2 island'>
+      <div class='jetpack-builder'>
         <img src="{{ media('img/illustrations/logo-collections-100x125.png') }}">
         <h2><a href='https://builder.addons.mozilla.org'>{{ _('Add-on Builder (Beta)') }}</a></h2>
         <p>
@@ -38,8 +45,9 @@
         <a href='https://builder.addons.mozilla.org' class='button add'>{{ _('Try the Builder Now') }}</a>
       </div>
     </div>
-  <div class='col-2'>
-    <div class='island jetpack-sdk'>
+    <div class="col"></div>
+    <div class='col-2 island'>
+      <div class='jetpack-sdk'>
         <img src="{{ media('img/developers/command.png') }}">
         <h2><a href='https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip'>
           {{ _('Add-on SDK') }}</a></h2>
@@ -56,6 +64,7 @@
       </div>
     </div>
   </div>
+</div>
 
 <div class='cols cols-light'>
   <div class='col-3'>

media/css/impala/developers.less

@@ -20,8 +20,23 @@
         }
     }
     &.jetpack {
-        div.promo-container {
-            width: 600px;
+        div.builder-videos {
+            float: right;
+            margin-bottom: 2em;
+            margin-left: 1em;
+            a {
+                background-color: #FFFFFF;
+                display: inline-block;
+                border: 1px solid #BCDCF2;
+                .border-radius(4px);
+                .box-shadow(0 2px 3px #D1E5F4);
+                margin-left: 1em;
+                opacity: 0.8;
+                padding: 6px;
+                &:hover {
+                    opacity: 1;
+                }
+            }
         }
         p {
             .p-light;
@@ -39,6 +54,26 @@
     }
 }
 
+#jetpack-overlay {
+    background-color: rgba(0, 0, 0, 0.6);
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+
+    video {
+        height: 400px;
+        left: 50%;
+        margin-left: -300px;
+        margin-top: -200px;
+        position: absolute;
+        top: 50%;
+        width: 600px;
+    }
+}
+
 #jetpack {
     h2.section {
         font-family: Georgia;

media/css/impala/site.less

@@ -133,6 +133,9 @@ a {
         float: left;
         padding-right: 1em;
     }
+    div.col {
+        width: 1em;
+    }
     div.col-2 {
         width: 50%;
     }
@@ -141,6 +144,20 @@ a {
     }
 }
 
+.equal {
+    display: table;
+    width: 100%;
+    border-spacing: 1em;
+    border-collapse: separate;
+    .cols {
+        display: table-row;
+        div.col, div.col-2, div.col-3 {
+            float: none;
+            display: table-cell;
+        }
+    }
+}
+
 .html-rtl .cols {
     div.col-2 {
         padding-right: 0;

media/js/zamboni/devhub.js

@@ -1,5 +1,4 @@
 $(document).ready(function() {
-
     // Edit Add-on
     if($("#edit-addon").length){
         initEditAddon();
@@ -88,6 +87,22 @@ $(document).ready(function() {
         }
     }
 
+    // Jetpack
+    if($('#jetpack').exists()) {
+        $('a[rel=video-lightbox]').click(_pd(function() {
+            var overlay = $('<div>', {id:'jetpack-overlay'}),
+                video = $('<video>', {'src': $(this).attr('href'), controls: 'controls',
+                                      'text': gettext('Your browser does not support the video tag')});
+            $(overlay).append(video);
+            $('body').append(overlay);
+            video[0].play();
+            $(video).click(function(e){ e.stopPropagation(); });
+            $(overlay).click(function() {
+                $(overlay).remove();
+            });
+        }));
+    }
+
     $(".invisible-upload a").click(_pd(function() {}));
 
     // Choosing platform when submitting an Addon and/or files.