Footer and header images included from SUMO. Paths set such that this submodule works from media/global

Updating readme and adding JS.

README.rst

@@ -5,10 +5,20 @@ The following projects are currently using this code:
 Kitsune: https://github.com/jsocol/kitsune/
 Zamboni: https://github.com/jbalogh/zamboni/
 
+Out of the box, you get:
+
+* Header/footer images, CSS set such that these image paths work if the CSS is served from media/global, both minified and not
+* Fluid width for both header and footer
+* JS that adds a hide delay on header drop downs
+
 
 Requirements
 ^^^^^^^^^^^
 
+* Jinja 2.
+
 * A jinja ``|f`` filter, used to interpolate parameters, like so:
 
     'visit {0}'|f('<span>mozilla</span>')
+
+* The JS is optional, but using it requires jQuery; tested with 1.3 or later.

headerfooter.css

@@ -7,6 +7,7 @@
 }
 
 body {
+    background: #fff url(../global/background.png) 0 -700px repeat-x;
     padding-top: 10px;
 }
 
@@ -56,6 +57,7 @@ body {
 #header h1 a,
 #header h1 a:link,
 #header h1 a:visited {
+    background: url(../global/header-logos.png) 15px 0 no-repeat;
     display: block;
     height: 57px;
     width: 110px;
@@ -66,6 +68,11 @@ body {
 
 #header h1 a:hover,
 #header h1 a:active {
+    background: -moz-radial-gradient(center 45deg,
+                                     ellipse closest-side,
+                                     rgba(255,255,255,0.3) 0%,
+                                     rgba(255,255,255,0) 100%),
+                url(../global/header-logos.png) 15px 0 no-repeat;
     -moz-transition: background 0.2s ease-in-out;
 }
 
@@ -300,6 +307,7 @@ body {
 }
 
 #header a.mozilla span {
+    background: url(../global/header-logos.png) 1px -73px no-repeat;
     overflow: hidden;
     text-indent: -9999px;
     width: 64px;
@@ -321,6 +329,7 @@ body {
 ----------------------------------*/
 
 #footer {
+    background: #33559b url(../global/background.png) 0 0 repeat-x;
     clear: both;
     color: #476FBE;
     display: block;
@@ -332,6 +341,7 @@ body {
 #footer-logo a,
 #footer-logo a:link,
 #footer-logo a:visited {
+    background: url("../global/header-logos.png") no-repeat scroll 15px 0 transparent;
     display: block;
     height: 57px;
     width: 110px;
@@ -342,6 +352,11 @@ body {
 
 #footer-logo a:hover,
 #footer-logo a:active {
+    background: -moz-radial-gradient(center 45deg,
+                                     ellipse closest-side,
+                                     rgba(255,255,255,0.3) 0%,
+                                     rgba(255,255,255,0) 100%),
+                url(../global/header-logos.png) 15px 0 no-repeat;
     -moz-transition: background 0.2s ease-in-out;
 }
 

menu.js

@@ -0,0 +1,27 @@
+/* Adds delay on hiding submenu of header */
+// Use closure to avoid globals
+(function () {
+var HIDE_TIMEOUT = 750,  // hide timeout, in milliseconds
+    SHOWING = 'sfhover', // CSS class for showing submenu
+    showing = null,      // reference to last parent showing its submenu
+    timeout = null;      // reference to timeout event from setTimeout
+
+    $('#nav-main > ul > li').mouseover(function () {
+        // Ensures only one submenu displays
+        if (null !== showing) {
+            showing.removeClass(SHOWING);
+            showing = null;
+            clearTimeout(timeout);
+        }
+        // Fixes drop downs not showing on IE6
+        $(this).addClass(SHOWING);
+    }).mouseout(function () {
+        showing = $(this);
+        showing.addClass(SHOWING);
+        // Hide submenu HIDE_TIMEOUT ms
+        timeout = setTimeout(function () {
+            showing.removeClass(SHOWING);
+            showing = null;
+        }, HIDE_TIMEOUT);
+    });
+}());