4 files changed, 139 insertions, 19 deletions

diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 53d5f12..e74a020 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -3,6 +3,62 @@ var strips = [], boxImages = []
 var done_loading = false, menu_open = false, entry_open = false
 var shuffled_indexes
 
+var wasPrev = false, navWidth
+
+/**
+ * Polls the viewport to check when fullscreening is settled
+ * TODO Doesn't work in IE10 and under
+ */
+function onFullScreenSettle(raf, fullScreenEl, fn, freq) {
+  freq = freq || 200
+
+  function pollSettled(fullscreen, getHeight) {
+    var isSettled = settledPredicate(getHeight)
+    var poll = throttle(function doPoll() {
+      if (isSettled()) {
+        fn(fullscreen)
+      } else {
+        raf(poll)
+      }
+    }, freq)
+    raf(poll)
+  }
+
+  function settledPredicate(getHeight) {
+    var count = 0
+    // Guard against a false positive by requiring predicate to match
+    // passCount number of times
+    var passCount = 2
+    var last
+    /**
+     * Checks whether the fullscreen element height has changed
+     * since the last poll
+     */
+    return function isSettled() {
+      var height = getHeight()
+      if (!last) {
+        last = height
+      } else {
+        var result = height === last && (++count === passCount)
+        last = height
+        return result
+      }
+    }
+  }
+
+  // If fullscreening in progress
+  if (fullScreenEl) {
+    pollSettled(true, function() {
+      return fullScreenEl.offsetHeight
+    })
+  // Otherwise, fullscreen is turning off
+  } else {
+    pollSettled(false, function() {
+      return window.innerHeight
+    })
+  }
+}
+
 var environment = {}, hashes = {}
 environment.init = function(){
   $("#scene").addClass("fade")
@@ -29,10 +85,16 @@ environment.ready = function(){
 	controls.init()
 	
   $('.cat').click( function(){
-    $('.cat').removeClass('active')
-    $('.sub').removeClass('active')
-    $(this).addClass('active')
-    $(this).next('.sub').addClass('active')
+    if ($(this).hasClass('active')) {
+      $('.cat').removeClass('active')
+      $('.sub').removeClass('active')
+    }
+    else {
+      $('.cat').removeClass('active')
+      $('.sub').removeClass('active')
+      $(this).addClass('active')
+      $(this).next('.sub').addClass('active')
+    }
   })
 
 	$("nav a").click(function(e){
@@ -162,19 +224,19 @@ environment.ready = function(){
   }
   
   setTimeout(function(){ done_loading = true }, 200)
-  
+
   $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){
-    setTimeout(function(){
-      if (window.innerHeight == screen.height) {
+    onFullScreenSettle(requestAnimationFrame, getFullScreenElement(), onSettle)
+
+    function onSettle(isFullScreen) {
+      if (isFullScreen) {
         $("html").addClass("full-screen")
       }
       else {
         $("html").removeClass("full-screen")
       }
-      setTimeout(function(){
-        resize_gallery()
-      }, 100)
-    }, 500)
+      resize_gallery(isFullScreen)
+    }
   })
 
   $("#scene_container").click(function(e){
@@ -281,7 +343,6 @@ function build_scene () {
     offset: 200,
   }) )
   
-  var wasPrev = false, navWidth
   function resize_for_prev_next(){
     navWidth = $("nav").width()
   }
@@ -289,7 +350,7 @@ function build_scene () {
   $(window).resize(resize_for_prev_next)
   $(window).mousemove(function(e){
     if (! gallery) return
-    prev = ((e.pageX - navWidth) / window.innerWidth) < 0.39
+    prev = ((e.pageX - navWidth) / window.innerWidth) < 0.415
     if (prev !== wasPrev) {
       wasPrev = prev
       $("#okgallery").toggleClass("prev", prev)
@@ -445,6 +506,7 @@ function toggle_menu (isInitialLoad){
 var gallery = null
 function build_gallery () {
   videos = []
+  wasPrev = -1
   var $el = $("#entry_container #okgallery")
   if (! $el.length) {
     gallery = null
@@ -528,12 +590,13 @@ function build_gallery () {
   $(".nextbutton").click(function(){ gallery.next() })
   $(".prevbutton").click(function(){ gallery.previous() })
 }
-function resize_gallery () {
+function resize_gallery (isFullScreen) {
   if (! gallery) return;
-  var isFullscreen = $("html").hasClass("full-screen")
-  $("#okgallery").find(".cell img").each(function(){
-    var h = isFullscreen ? window.innerHeight : 0.6 * window.innerHeight
-    var w = isFullscreen ? "auto" :  this.naturalWidth / this.naturalHeight * h
+  var fullScreenElement = getFullScreenElement()
+  var $gallery = $("#okgallery")
+  $gallery.find(".cell img").each(function(){
+    var h = isFullScreen ? $(fullScreenElement).height() : $gallery.height()
+    var w = isFullScreen ? "auto" :  this.naturalWidth / this.naturalHeight * h
     $(this).css({
       width: w, height: h,
     })
diff --git a/site/public/assets/javascripts/app.js b/site/public/assets/javascripts/app.js
index 0d51a3f..4e00f30 100644
--- a/site/public/assets/javascripts/app.js
+++ b/site/public/assets/javascripts/app.js
@@ -19,6 +19,12 @@ app.init = function () {
 
 app.launch = function () {
   // if ($.browser.msie || ! has3d()) { return app.fallback() }
+  if ($.browser.msie) {
+    $("html").addClass("msie")
+  }
+  else {
+    $("html").addClass("notmsie")
+  }
   
 	scene = new MX.Scene().addTo('#scene')
 
diff --git a/site/public/assets/javascripts/vendor/polyfill.js b/site/public/assets/javascripts/vendor/polyfill.js
index 411d90f..8c26e80 100644
--- a/site/public/assets/javascripts/vendor/polyfill.js
+++ b/site/public/assets/javascripts/vendor/polyfill.js
@@ -97,4 +97,34 @@ function fullscreen (el) {
   } else if (el.webkitRequestFullscreen) {
     el.webkitRequestFullscreen();
   }
-}
\ No newline at end of file
+}
+
+/*
+ * Proper fullscreen detection using the HTML5
+ * Full Screen API. Not supported on mobile or
+ * IE10 and under
+ * TODO Need to disable fullscreen button on IE10 and lower
+ */
+function isFullScreen() {
+  return !!getFullScreenElement()
+}
+
+function getFullScreenElement() {
+  return document.fullScreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+}
+
+var raf = window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame
+
+var caf = window.cancelAnimationFrame ||
+    window.webkitCancelAnimationFrame ||
+    window.mozCancelAnimationFrame ||
+    window.oCancelAnimationFrame ||
+    window.msCancelAnimationFrame
+
diff --git a/site/public/assets/javascripts/vendor/util.js b/site/public/assets/javascripts/vendor/util.js
index 0f5c6ed..487fe56 100644
--- a/site/public/assets/javascripts/vendor/util.js
+++ b/site/public/assets/javascripts/vendor/util.js
@@ -240,6 +240,27 @@ if (!Function.prototype.bind) {
         };
 }());
 
+/*
+ * Throttle a function to be called no more often
+ * than ms milliseconds
+ */
+function throttle(fn, ms) {
+  ms = ms || 100
+  var ready = true
+  var last
+  return function() {
+    var now = Date.now()
+    if (ready) {
+      last = now
+      return fn.apply(this, arguments)
+      ready = false
+    } else {
+      if (now - last > ms) {
+        ready = true
+      }
+    }
+  }
+}
 
 function selectElementContents(el) {
   if (window.getSelection && document.createRange) {