path: root/site/public/assets/javascripts/_env.js

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()
	})
	loader.preloadImages(box_images.map(function(url){
		return base_href + url
	}))
	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
	})
}