1 files changed, 81 insertions, 18 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,
     })