firstHEADmaster

1 files changed, 497 insertions, 0 deletions

diff --git a/assets/javascripts/_env.js b/assets/javascripts/_env.js
new file mode 100644
index 0000000..ca94ee2
--- /dev/null
+++ b/assets/javascripts/_env.js
@@ -0,0 +1,497 @@
+var base_href = "http://okfocus.s3.amazonaws.com/2h/"
+var box_images = shuffle([
+	"1.gif", "2.gif", "3.gif", "4.gif", "5.gif",
+// 	"dies2.gif", "dies3.gif",
+	"6.gif", "7.gif", "8.gif", "9.gif",
+	"12.gif", "13.gif", "14.gif", "15.gif",
+	"16.gif", "17.gif", // "CCP-GIF.gif", "dies1.gif",
+])
+
+var strips = []
+
+var done_loading = false, menu_open = false, entry_open = false
+
+var environment = {}, hashes = {}
+environment.init = function(){
+	var loader = new Loader(function(){
+		environment.ready()
+	})
+	var preloadImages = $("#preload-image-list").html().split("\n").filter(function(s){ return !!s })
+	loader.preloadImages(box_images.map(function(url){
+		return base_href + url
+	}).concat(preloadImages))
+	loader.ready()
+}
+environment.ready = function(){
+  if (window.innerWidth < 500) document.body.classList.add('mobile')
+
+	controls = new MX.OrbitCamera({
+	  radius: 1000,
+	  radiusRange: [ 10, 2000 ],
+	  rotationX: PI/2,
+	  rotationY: PI,
+	  wheelEase: 20,
+	  ease: 100
+	})
+	controls.init()
+	
+  $('.cat').click( function(){
+    $('.cat').removeClass('active')
+    $('.sub').removeClass('active')
+    $(this).addClass('active')
+    $(this).next('.sub').addClass('active')
+  })
+
+	$("nav a").click(function(e){
+    e.preventDefault()
+    
+    var hash = "#" + $(this).data("hash")
+    if (done_loading && window.location.hash == hash) return
+    window.location.hash = hash
+
+	  $("nav a.active").removeClass("active")
+	  $(this).addClass("active")
+	  open_entry()
+
+    var page = $(this).attr("href")
+    if (page.indexOf("#") !== -1) page = "#"
+    
+    $("#entry_container").removeClass("visible")
+
+    var $loader = $("<div>")
+    $loader.load(page + " .entry", function(){
+      display_entry($loader.children()[0])
+    })
+
+	})
+
+	$("nav .about").click(function(e){
+    e.preventDefault()
+
+    if (done_loading && window.location.hash == "#about") return
+    window.location.hash = "#about"
+    
+	  $("nav a.active").removeClass("active")
+    open_entry()
+	  
+    $("#entry_container").removeClass("visible")
+    var $loader = $("<div>")
+    $loader.load("about .entry", function(){
+      display_entry($loader.children()[0])
+    })
+	})	
+	$("nav .contact").click(function(e){
+    e.preventDefault()
+    
+    if (done_loading && window.location.hash == "#contact") return
+    window.location.hash = "#contact"
+
+	  $("nav a.active").removeClass("active")
+	  open_entry()
+
+    $("#entry_container").removeClass("visible")
+    var $loader = $("<div>")
+    $loader.load("contact .entry", function(){
+      display_entry($loader.children()[0])
+    })
+	})	
+	$("nav .index").click(function(e){
+    e.preventDefault()
+
+    if (done_loading && window.location.hash == "#index") return
+    window.location.hash = "#index"
+    
+	  $("nav a.active").removeClass("active")
+    open_entry()
+	  
+    $("#entry_container").removeClass("visible")
+    var $loader = $("<div>")
+    $loader.load("all .entry", function(){
+      display_entry($loader.children()[0])
+    })
+	})	
+
+	$(".toggleRapper").click(toggle_menu)
+	$(".toplogo").click(hide_entry)
+	$(document).on("click", ".project", function(){
+	  var hash = as_hash( $(this).find("span").text() )
+	  load_hash(hash)
+	})
+
+	$(window).mousedown(function(e){
+	  if (! menu_open) {
+	    controls.pause()
+      controls.opt.ease = 10
+    }
+	})
+	$(window).mouseup(function(e){
+	  if (! menu_open) {
+      controls.pause()
+    }
+	  controls.opt.ease = 100
+	})
+	$(window).mousemove(function(e){
+	  if (menu_open || controls.dragging) return
+    var x = e.pageX/window.innerWidth
+	  var xmid = pow( abs( 2 * (x - 0.5) ), 1/2 )
+	  var y = e.pageY/window.innerHeight
+	  var ymid = pow( abs( 2 * (y - 0.5) ), 1/2 )
+	  var z = dist( xmid, ymid, 0, 0 )
+	  controls.zoomPercent( clamp(z - 0.3, 0, 1) )
+    controls.move(
+      (x) * TWO_PI * 4,
+      PI/2 + (1-y) * TWO_PI * 4
+    )
+	})
+	
+	$("body").removeClass('loading')
+
+  var current_hash = window.location.hash.replace("#","")
+  $("nav a").each(function(){
+    var key = as_hash(this.innerHTML)
+    hashes[key] = this
+    $(this).data("hash", key)
+  })
+  hashes['about'] = $("nav .about")
+  hashes['contact'] = $("nav .contact")
+  hashes['index'] = $("nav .index")
+
+  if (current_hash in hashes) {
+    toggle_menu()
+    load_hash(current_hash)
+    setTimeout(build_scene, 200)
+  }
+  else {
+    build_scene()
+  }
+  
+  setTimeout(function(){ done_loading = true }, 200)
+// 	$(".mx-scenery").on("mouseenter", function(e){
+// 	  e.stopPropagation()
+// 	  $(this).addClass("red")
+// 	})
+// 	$(".mx-scenery").on("mouseleave", function(e){
+// 	  e.stopPropagation()
+// 	  $(".red").removeClass("red")
+// 	})
+
+  $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){
+    setTimeout(function(){
+      if (window.innerHeight == screen.height) {
+        $("html").addClass("full-screen")
+      }
+      else {
+        $("html").removeClass("full-screen")
+      }
+      setTimeout(function(){
+        resize_gallery()
+      }, 100)
+    }, 500)
+  })
+}
+
+
+function build_scene () {
+  strips.push( new Strip({
+    images: box_images.slice(0, 5),
+    x: -100,
+    y: 100,
+	  rotationY: PI/4,
+    offset: 100,
+  }) )
+
+  strips.push( new Strip({
+    images: box_images.slice(5, 10),
+    x: 100,
+    y: 100,
+	  rotationX: PI/4,
+	  rotationY: PI/-100,
+    offset: 200,
+  }) )
+
+  strips.push( new Strip({
+    images: box_images.slice(10, 15),
+    x:  0,
+    y: 100,
+    z: 100,
+	  rotationY: PI/6,
+    offset: 300,
+  }) )
+
+  strips.push( new Strip({
+    images: box_images.slice(15, 20),
+    x: 0,
+    y: 100,
+    z: -50,
+	  rotationX: PI/2,
+	  rotationY: PI/100,
+    offset: 200,
+  }) )
+  
+	strips.forEach(function(strip){ strip.update(0) })
+	
+	scene.update()
+	environment.update = environment.updateOnReady
+}
+
+var entry_open_time = 0;
+
+function as_hash (txt) {
+  return txt.replace(/\s/g,'_')
+}
+function load_hash (hash) {
+  var $menu = $(hashes[hash])
+  $(".active").removeClass('active')
+  $menu.parent().addClass('active')
+  $menu.parent().prev(".cat").addClass('active')
+  $menu.trigger("click")
+}
+function open_entry () {
+  if (is_mobile) {
+    $("body").removeClass("menuActive")
+  }
+  if (! entry_open) {
+    entry_open = true
+    controls.zoom(40)
+    controls.wheel.lock()
+    $("#scene").addClass("fade")
+    setTimeout(function(){ $("#scene").hide() }, 200)
+  }
+  entry_open_time = +new Date
+  $("#entry_container").addClass("fade")
+}
+function display_entry ($el) {
+  var now = +new Date
+  setTimeout(function(){
+    $("#entry_container").empty().append($el)
+    $("#entry_container").removeClass("fade")
+    build_gallery()
+    if (is_mobile) {
+      $(".video").each(function(){
+        load_video( $(this) )
+      })
+    }
+    if (window.location.hash.match(/about|contact|index/)) {
+      setTimeout(function(){
+        $(".entry").addClass("ready")
+      }, 100)
+      setTimeout(function(){
+        $(".entry").addClass("done")
+      }, 600)
+    }
+    else {
+      $(".entry").addClass("ready")
+    }
+  }, max(0, 200 - (now - entry_open_time)) + 20)
+
+  $("#entry_container").scrollTop(0)
+  $("#entry_container").addClass("visible")
+  controls.setZoom(100000)
+  setTimeout(function(){ controls.zoom(100) }, 100)
+}
+function hide_entry () {
+  $("nav .active").removeClass("active")
+  $("#entry_container").addClass("fade")
+  setTimeout(function(){
+    $("#entry_container").empty()
+  }, 200)
+  $("#scene").show().removeClass("fade")
+  controls.zoom(1500)
+  window.location.hash = "#"
+}
+function toggle_menu (){
+  $("body").toggleClass("menuActive")
+  menu_open = $("body").hasClass("menuActive")
+
+  if (! is_mobile) {
+    $("#entry_container").removeClass("visible")
+  }
+
+  if (menu_open) {
+    controls.pause()
+  }
+  if (! menu_open && entry_open && ! is_mobile) {
+    entry_open = false
+    controls.wheel.unlock()
+    setTimeout(function(){ $("#scene").removeClass("fade") })
+    $("nav a.active").removeClass("active")
+  }
+  if (! menu_open && ! entry_open) {
+    window.location.hash = "#"
+    $("#scene").show()
+    $("#entry_container").empty()
+    controls.zoom(1500)
+    $('.cat').removeClass('active')
+    $('.sub').removeClass('active')
+  }
+}
+
+var gallery = null
+function build_gallery () {
+  videos = []
+  var $el = $("#entry_container #okgallery")
+  if (! $el.length) {
+    gallery = null
+    return
+  }
+  var $next = $el.next(".next")
+  var $caption = $el.next(".caption")
+  gallery = new Flickity( "#okgallery", {
+    cellSelector: '.cell',
+    cellAlign: 'left',
+    wrapAround: true,
+    prevNextButtons: false,
+    pageDots: true,
+    setGallerySize: false,
+    draggable: true,
+    imagesLoaded: true,
+  })
+
+  $("#okgallery .video").each(function(){
+    var $play = $('<div class="play"></div>')
+    var $el = $(this)
+    $el.append($play)
+    $play.click(function(e){
+      e.stopPropagation()
+      e.preventDefault()
+      if ($el.hasClass('loaded')) {
+        var player = $el.data('player')
+        player.api('play')
+      }
+      else {
+        load_video($el)
+      }
+    })
+  })
+  
+  $(".caption").click(function(){
+    fullscreen($(".gallery")[0])
+  })
+  
+  gallery.on("cellSelect", function(){
+    $caption.html( $(gallery.selectedElement).data("caption") )
+    videos.forEach(function(player){
+      player.api('pause')
+    })
+  })
+  gallery.on("settle", function(){
+    $caption.html( $(gallery.selectedElement).data("caption") )
+  })
+  gallery.on("staticClick", function(e){
+    // console.log(e)
+    var $el = $(e.target)
+    if ($el.hasClass("play")) {
+      // load_video($el)
+    }
+    else {
+      next()
+    }
+  })
+  // $next.on("click", next)
+  function next(){
+    gallery.next()
+  }
+  gallery.loader.on("progress", function(imagesLoaded, loadingImage){
+    $(loadingImage.img).addClass('loaded')
+  })
+}
+function resize_gallery () {
+  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
+    $(this).css({
+      width: w, height: h,
+    })
+  })
+  $(".flickity-viewport").css("height","")
+  gallery.resize()
+}
+var videos = []
+function load_video ($el) {
+  if ($el.hasClass('loaded')) { return }
+  $el.addClass('loaded')
+  var vimeo_id = $el.data("video").match(/\d+/)[0]
+  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)
+  var $mask = $('<div class="mask"></div>')
+  $el.append($mask)
+  var player = $f( $el.find("iframe")[0] )
+  $el.data('player', player)
+  player.addEvent('ready', function(){
+    player.addEvent('play', function(){
+      $el.addClass('playing')
+    })
+    player.addEvent('pause', function(){  
+      $el.removeClass('playing')
+    })
+  })
+  videos.push(player)
+}
+environment.update = noop
+environment.updateOnReady = function(t){
+  // strips.forEach(function(strip){ strip.update(t) })
+  controls.delta( menu_open ? 0 : 1/16, 0)
+	scene.update()
+	controls.update()
+}
+
+var titles = [
+  "BARNEY'S, GAGA CONSTELLATION",
+  "CCP GAMES, EVE ONLINE",
+  "DIESEL ACCESSORIES",
+  "DIESEL CAMPAIGN FW13/SS14",
+  "DIESEL CAMPAIGN FW14",
+  "#DIESELREBOOT",
+  "#DIESELTRIBUTE",
+  "DIESEL JOGG JEANS",
+  "DIESEL WATCHES",
+  'MAC, "UNTITLED, SELF-PORTRAIT"',
+  "MUGLER, BROTHERS OF ARCADIA",
+  "MUGLER, LADY GAGA",
+  "MUGLER, MEN’S FW11",
+  "NICOLA’S, HO HO HO CHRISTMAS SHOP",
+  "NICOLA'S, LANE CRAWFORD",
+  "NICOLA’S, NEW YORK"
+]
+var Strip = function( opt ){
+  this.opt = opt
+  
+	var root = this.root = new MX.Object3D ()
+	root.x = opt.x || 0
+	root.y = opt.y || 0
+	root.z = opt.z || 0
+	root.rotationX = opt.rotationX || 0
+	root.rotationY = opt.rotationY || 0
+	root.rotationZ = opt.rotationZ || 0
+	root.addTo(scene)
+
+	var prev = root
+	this.els = opt.images.map(function(url, i){
+		var el = new MX.Image({
+			src: base_href + url,
+			onload: function(img){
+			}
+		})
+		$(el.el).attr("data-title", choice(titles))
+ 		el.setCSSTransformOrigin( "50% 100%" )
+		el.addTo(prev)
+		el.update()
+		prev = el
+		return el
+	})
+}
+Strip.prototype.update = function(t){
+	var count = this.els.length
+	var offset = this.opt.offset
+	
+	t += offset
+
+  // this.root.rotationZ = t/10000
+  this.els.forEach(function(el, i){
+    el.rotationX = i/count * Math.PI * 2
+ 		el.skewY = cos( (1 + i) * 2 * Math.PI * t/100000 + 100 ) / 10
+		el.y = el.height / 2
+	})
+}