| LEFT | RIGHT | 
|   1 (function(){ |   1 (function(){ | 
|   2  |  | 
|   3   function addListener(target, event, callback) |   2   function addListener(target, event, callback) | 
|   4   { |   3   { | 
|   5     if (target.addEventListener) |   4     if (target.addEventListener) | 
|   6     { |  | 
|   7       return target.addEventListener(event, callback, false); |   5       return target.addEventListener(event, callback, false); | 
|   8     } |  | 
|   9     else |   6     else | 
|  10     { |  | 
|  11       return target.attachEvent("on" + event, callback); |   7       return target.attachEvent("on" + event, callback); | 
|  12     } |  | 
|  13   } |   8   } | 
|  14  |   9  | 
|  15   function onLoad(callback) |  10   function onLoad(callback) | 
|  16   { |  11   { | 
|  17     if (document.addEventListener) |  12     if (document.addEventListener) | 
|  18     { |  | 
|  19       return addListener(document, "DOMContentLoaded", callback); |  13       return addListener(document, "DOMContentLoaded", callback); | 
|  20     } |  | 
|  21     else |  14     else | 
|  22     { |  | 
|  23       return addListener(window, "load", callback); |  15       return addListener(window, "load", callback); | 
|  24     } |  | 
|  25   } |  16   } | 
|  26  |  17  | 
|  27   onLoad(function() |  18   onLoad(function() | 
|  28   { |  19   { | 
|  29     // expand & contract fixed header |  20     // expand & contract fixed header | 
|  30  |  | 
|  31     var header = document.getElementById("header"); |  21     var header = document.getElementById("header"); | 
|  32     var headerPadding = 13; |  22     var headerPadding = 13; | 
|  33  |  | 
|  34     addListener(window, "scroll", function() |  23     addListener(window, "scroll", function() | 
|  35     { |  24     { | 
|  36       var scrollY = window.scrollY || document.documentElement.scrollTop; |  25       var scrollY = window.scrollY || document.documentElement.scrollTop; | 
|  37  |  | 
|  38       if (scrollY < headerPadding) |  26       if (scrollY < headerPadding) | 
|  39       { |  | 
|  40         header.className = "top"; |  27         header.className = "top"; | 
|  41       } |  | 
|  42       else |  28       else | 
|  43       { |  | 
|  44         header.className = ""; |  29         header.className = ""; | 
|  45       } |  | 
|  46     }); |  30     }); | 
|  47  |  | 
|  48     // open & close header menu (on small screens) |  31     // open & close header menu (on small screens) | 
|  49  |  | 
|  50     var menu = document.getElementById("menu"); |  32     var menu = document.getElementById("menu"); | 
|  51     var menuButton = document.getElementById("header-hamburger"); |  33     var menuButton = document.getElementById("header-hamburger"); | 
|  52  |  | 
|  53     addListener(menuButton, "click", function() |  34     addListener(menuButton, "click", function() | 
|  54     { |  35     { | 
|  55       if (menu.className === "open") |  36       if (menu.className === "open") | 
|  56       { |  37       { | 
|  57         menu.className = ""; |  38         menu.className = ""; | 
|  58         menu.setAttribute("aria-expanded", false); |  39         menu.setAttribute("aria-expanded", false); | 
|  59       } |  40       } | 
|  60       else |  41       else | 
|  61       { |  42       { | 
|  62         menu.className = "open"; |  43         menu.className = "open"; | 
|  63         menu.setAttribute("aria-expanded", true); |  44         menu.setAttribute("aria-expanded", true); | 
|  64       } |  45       } | 
|  65     }); |  46     }); | 
|  66   }); |  47   }); | 
|  67  |  | 
|  68 }()); |  48 }()); | 
| LEFT | RIGHT |