4 files changed, 58 insertions, 10 deletions

diff --git a/site/public/assets/images/next.png b/site/public/assets/images/next.png
index 7997259..b5782ed 100644
--- a/site/public/assets/images/next.png
+++ b/site/public/assets/images/next.png
diff --git a/site/public/assets/images/prev.png b/site/public/assets/images/prev.png
new file mode 100644
index 0000000..82050a4
--- /dev/null
+++ b/site/public/assets/images/prev.png
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 45d5231..3a72e13 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -286,6 +286,21 @@ function build_scene () {
     offset: 200,
   }) )
   
+  var wasPrev = false, navWidth
+  function resize_for_prev_next(){
+    navWidth = $("nav").width()
+  }
+  resize_for_prev_next()
+  $(window).resize(resize_for_prev_next)
+  $(window).mousemove(function(e){
+    if (! gallery) return
+    prev = ((e.pageX - navWidth) / window.innerWidth) < 0.39
+    if (prev !== wasPrev) {
+      wasPrev = prev
+      $("#okgallery").toggleClass("prev", prev)
+    }
+  })
+  
 	strips.forEach(function(strip){ strip.update(0) })
 	
 	scene.update()
@@ -416,9 +431,15 @@ function build_gallery () {
   })
 
   $("#okgallery .video").each(function(){
-    var $play = $('<div class="play"></div>')
     var $el = $(this)
+    if (! is_mobile) {
+      var $underlay = $('<div class="underlay"></div>')
+      $underlay.css("background-image", $el.css("background-image"))
+      $el.css("background-image", 'none')
+    }    
+    var $play = $('<div class="play"></div>')
     $el.append($play)
+    $el.append($underlay)
     if (is_desktop) {
       $play.on("click", function(e){
         e.stopPropagation()
@@ -454,7 +475,11 @@ function build_gallery () {
       // load_video($el)
     }
     else {
-      gallery.next()
+      if ($("#okgallery").hasClass("prev")) {
+        gallery.previous()
+      } else {
+        gallery.next()
+      }
     }
   })
   gallery.loader.on("progress", function(imagesLoaded, loadingImage){
@@ -484,8 +509,8 @@ function load_video ($el) {
   var $embed = $('<iframe src="https://player.vimeo.com/video/' + vimeo_id + '?autoplay=1&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
   $el.append($embed)
   if (! is_mobile) {
-    var $mask = $('<div class="mask"></div>')
-    $el.append($mask)
+//     var $mask = $('<div class="mask"></div>')
+//     $el.append($mask)
   }
   var player = $f( $el.find("iframe")[0] )
   $el.data('player', player)
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index 543a34a..6316159 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -337,7 +337,7 @@ nav .sub {
 
 nav .sub.active {
 	display: inline-block;
-	max-height:180px;
+	max-height: 450px;
 }
 
 nav .sub a {
@@ -519,12 +519,14 @@ nav .sub.active a {
 	-webkit-column-count: 3;
 	-moz-column-count: 3;
 	column-count: 3;
+  min-height: 130px;
 }
 .entry span div.content.noline {
 	border-top: 0;
 	padding-top: 0;
 }
 .entry span div.content div {
+  min-height: 130px;
 	width:50%;
 	-webkit-column-count: 3;
 	-moz-column-count: 3;
@@ -573,6 +575,10 @@ nav .sub.active a {
 	height:100%;
 	cursor: url(images/next.png), auto!important;
 }
+.gallery.prev,
+.gallery.prev .cell {
+	cursor: url(images/prev.png), auto!important;
+}
 .cell.video {
 	width: 80%;
 	background-size: cover;
@@ -613,12 +619,24 @@ nav .sub.active a {
 	-webkit-transition:0.4s opacity ease-in;
 	transition:0.4s opacity ease-in;
 	pointer-events: none; 
-}
-.cell iframe {
   height: 200%;
   -webkit-transform: translateY(-25%);
   transform: translateY(-25%);
 }
+.cell .underlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+	width: 100%;
+	height:100%;
+	opacity:0.2;
+	-webkit-transition:0.4s opacity ease-in;
+	transition:0.4s opacity ease-in;
+	pointer-events: none; 
+  background-size: cover;
+  background-position: center center;
+}
+
 .fullscreen {
 	text-align: right;
 }
@@ -679,22 +697,27 @@ nav .sub.active a {
 	opacity:0.0;
 	transition:0.4s opacity ease-in;
 }
+
 .cell img.loaded {
   opacity: 0.2;
 }
-.cell.is-selected img, .cell.is-selected iframe {
+.cell.is-selected .underlay, .cell.is-selected img, .cell.is-selected iframe {
 	opacity:1;
 	pointer-events: auto; 
 }
-.cell .mask {
+.cell .underlay {
 	z-index: 2;
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	top: 0; left: 0;
 }
-.cell.playing .mask {
+.cell.loaded .underlay {
+  background-image: none !important;
+}
+.cell.playing .underlay {
 	pointer-events: none;
+	opacity: 0;
 }
 .logo {
 	position: fixed;