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")
	var loader = new Loader(environment.ready, new HustleLoader)
	var preloadImages = $("#preload-image-list").html().split("\n").filter(function(s){ return !!s })
	boxImages = $("#box-image-list").html().split("\n")
  var postImages = $(".sub a").toArray().map(function(el){ return $(el).data("image") })

  var images = preloadImages.concat(postImages).concat(boxImages).filter(function(s){ return !!s })
	loader.preloadImages( images )
	loader.ready()
}
environment.ready = function(){
  if (window.innerWidth < 500) document.body.classList.add('mobile')

	if (is_mobile) {
    controls = new MX.OrbitCameraMobile({
      radius: 100000,
      radiusRange: [ 10, 2000 ],
      rotationX: PI/2,
      rotationY: PI,
      wheelEase: 20,
      ease: 100
    })
  }
  else {
    controls = new MX.OrbitCamera({
      radius: 100000,
      radiusRange: [ 10, 2000 ],
      rotationX: PI/2,
      rotationY: PI,
      wheelEase: 20,
      ease: 100
    })
  }
	controls.init()
	
  $('.cat').click( function(){
    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){
    if ($(this).parent().hasClass("contact")) return;

    e.preventDefault()
        
    var page = "/" + $(this).data("type") + "/" + $(this).data("id")
    var hash = "#" + page
    if (done_loading && window.location.hash == hash) return
    window.location.hash = hash

	  $("nav a.active").removeClass("active")
	  var $link = $(this)
	  $link.addClass("active")
	  open_entry()
    
    $("#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(){
      console.log($loader.html())
      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()

	$(".toggleRapper").click(toggle_menu)
	$(document).on("click", ".project", function(){
    var page = "/" + $(this).data("type") + "/" + $(this).data("id")
    $(".entry").css("pointer-events", "none")
	  load_hash(page)
	})
	$(".toplogo,.logo").click(function(e){
	  e.preventDefault()
    $(".active").removeClass('active')
    $('.cat.active, .sub.active, .sub.a').addClass('active')
    controls.pause()
    window.location.hash = "#"
    // $(".index").trigger("click")
    load_index()
	  // hide_entry()
	})

	Share.init()

	$(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 page = "/" + $(this).data("type") + "/" + $(this).data("id")
    hashes[page] = this
    $(this).data("hash", page)
  })
  hashes['/about'] = $("nav .about")
  // hashes['/contact'] = $("nav .contact")
  // hashes['/index'] = $("nav .index")

  if (current_hash in hashes) {
    toggle_menu(false)
    load_hash(current_hash)
    setTimeout(build_scene, 200)
  }
  else {
    build_scene()
    setTimeout(function(){
      $("#scene").removeClass("fade")
    }, 100)
  }
  
  setTimeout(function(){ done_loading = true }, 200)

  $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){
    onFullScreenSettle(requestAnimationFrame, getFullScreenElement(), onSettle)

    function onSettle(isFullScreen) {
      if (isFullScreen) {
        $("html").addClass("full-screen")
      }
      else {
        $("html").removeClass("full-screen")
      }
      resize_gallery(isFullScreen)
    }
  })

  $("#scene_container").click(function(e){
    if ( $("body").hasClass("menuActive") || $(".entry").length ) {
      return
    }
    else {
      toggle_menu()
    }
  })
  if (is_desktop) {
    $(document).on("mouseenter", ".project", function(){
      var type = $(this).data("type")
      $(".entry").addClass("hover")
      $(this).addClass("hover")
      $(".top .cat").not("[data-type=" + type + "]").addClass("no-hover")
      $(".cat[data-type=" + type + "]").addClass("hover")
    })
    $(document).on("mouseleave", ".project", function(){
      var type = $(this).data("type")
      $(".entry").removeClass("hover")
      $(this).removeClass("hover")
      $(".cat").removeClass("hover").removeClass("no-hover")
    })
  }
}


function build_scene () {
  controls.setZoom(100000)
  controls.zoom(1000)

/*
  strips.push( new Strip({
    images: $(".sub[data-type=advertising] a"),
    x: -100,
    y: 100,
	  rotationY: PI/4,
    offset: 100,
  }) )

  strips.push( new Strip({
    images: $(".sub[data-type=retail] a"),
    x: 100,
    y: 100,
	  rotationX: PI/4,
	  rotationY: PI/-100,
    offset: 200,
  }) )

  strips.push( new Strip({
    images: $(".sub[data-type=experiential] a"),
    x:  0,
    y: 100,
    z: 100,
	  rotationY: PI/6,
    offset: 300,
  }) )

  strips.push( new Strip({
    images: $(".sub[data-type=content] a"),
    x: 0,
    y: 100,
    z: -50,
	  rotationX: PI/2,
	  rotationY: PI/100,
    offset: 200,
  }) )
*/

  strips.push( new Strip({
    images: boxImages.slice(0, 5),
    x: -100,
    y: 100,
	  rotationY: PI/4,
    offset: 100,
  }) )

  strips.push( new Strip({
    images: boxImages.slice(5, 10),
    x: 100,
    y: 100,
	  rotationX: PI/4,
	  rotationY: PI/-100,
    offset: 200,
  }) )

  strips.push( new Strip({
    images: boxImages.slice(10, 15),
    x:  0,
    y: 100,
    z: 100,
	  rotationY: PI/6,
    offset: 300,
  }) )

  strips.push( new Strip({
    images: boxImages.slice(15, 20),
    x: 0,
    y: 100,
    z: -50,
	  rotationX: PI/2,
	  rotationY: PI/100,
    offset: 200,
  }) )
  
  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.415
    if (prev !== wasPrev) {
      wasPrev = prev
      $("#okgallery").toggleClass("prev", prev)
    }
  })
  
	strips.forEach(function(strip){ strip.update(0) })
	
	scene.update()
	environment.update = environment.updateOnReady
}

var entry_open_time = 0;

function load_index (e){
  e && e.preventDefault()
  // if (done_loading && window.location.hash == "#/index") return
  // window.location.hash = "#/index"
  // console.log("load index")
  
  $("nav a.active").removeClass("active")
  open_entry(true)

  window.location.hash = "#"
  
  $("#entry_container").removeClass("visible")
  var $loader = $("<div>")
  $loader.load("all .entry", function(){
    $("body").addClass("menuActive")
    display_entry($loader.children()[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 (entryIsAll) {
  if (is_mobile && ! entryIsAll) {
    $("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
  var $el = $(el)
  var isIndex = $el.hasClass("all")
  if (is_mobile) {
    $("body").toggleClass("menuActive", isIndex)
//     $el.find(".brady > a").remove()
  }
  if (isIndex) {
    var $project_list = $el.find("#project_list")
    var $projects = $project_list.find(".project")
    if (! shuffled_indexes) {
      shuffled_indexes = []
      for (var i = 0; i < $projects.length; i++) {
        shuffled_indexes[i] = i
      }
      shuffle(shuffled_indexes)
    }
    $project_list.html("")
    for (var i = 0; i < $projects.length; i++) {
      $project_list.append($projects[shuffled_indexes[i]])
    }
  }
  setTimeout(function(){
    $("#entry_container").empty().append($el)
    $("#entry_container").removeClass("fade")
    setTimeout(function(){
      build_gallery()
    })
    if (is_mobile) {
      $(".video").each(function(){
        load_video( $(this) )
      })
    }
    if (window.location.hash.match(/about|contact/) || $(".entry").hasClass("all")) {
      setTimeout(function(){
        $(".entry").addClass("ready")
        if ($(".entry").hasClass("all")) {
          setTimeout(function(){
            $(".entry").removeClass("undone")
          }, 500)
        }
      }, 100)
    }
    else {
      $(".entry").addClass("ready")
    }
  }, max(0, 200 - (now - entry_open_time)) + 20)

  $("#entry_container").scrollTop(0)
  $("#entry_container").addClass("visible")
  $("#scene").addClass("fade")
  $(".cat").removeClass("hover").removeClass("no-hover")
  setTimeout(function(){
    $("#scene").hide()
  }, 200)
}
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 (isInitialLoad){
  $("body").toggleClass("menuActive")
  menu_open = $("body").hasClass("menuActive")

  if (! is_mobile) {
    $("#entry_container").removeClass("visible")
  }

  if (menu_open && isInitialLoad !== false) {
    controls.pause()
    // $(".index").trigger("click")
    load_index()
  }
  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 = []
  wasPrev = -1
  var $el = $("#entry_container #okgallery")
  if (! $el.length) {
    gallery = null
    return
  }
  var $cells = $("#entry_container #okgallery .cell")
  if ($cells.length == 1) {
    $(".entry").addClass("singleton")
  }
  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 $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()
        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(){
    if (! gallery.selectedElement) return
    $caption.html( $(gallery.selectedElement).data("caption") )
    videos.forEach(function(player){
      player.api('pause')
    })
  })
  gallery.on("settle", function(){
    if (! gallery || ! gallery.selectedElement) { return }
    $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 {
      if ($("#okgallery").hasClass("prev")) {
        gallery.previous()
      } else {
        gallery.next()
      }
    }
  })
  gallery.loader.on("progress", function(imagesLoaded, loadingImage){
    $(loadingImage.img).addClass('loaded')
    $(loadingImage.img).parent().removeClass('loading')
  })
  $(".nextbutton").click(function(){ gallery.next() })
  $(".prevbutton").click(function(){ gallery.previous() })
}
function resize_gallery (isFullScreen) {
  if (! gallery) return;
  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,
    })
  })
  $(".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)
  if (! is_mobile) {
//     var $mask = $('<div class="mask"></div>')
//     $el.append($mask)
  }
  var player = $f( $el.find("iframe")[0] )
  $el.data('player', player)
  player.addEvent('ready', function(){
//     console.log("ready")
    $el.addClass('playing')
    player.addEvent('play', function(){
//       console.log("playing")
      $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 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.toArray ? opt.images.toArray() : opt.images ).map(function(el, i){
	  var url
	  if (typeof el == "string") {
	    url = el
	  }
	  else {
      var data = $(el).data()
      url = data.image
	  }
		var el = new MX.Image({
			src: url,
			onload: function(img){
			}
		})
 		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
	})
}

function HustleLoader () {
  var svg = document.getElementById("loader_svg_status")
  function init(){
    build()
  }
  function build(){
    setTimeout(function(){ $("#loader_svg").addClass("slide") }, 100)
  }
  this.update = function (i) {
    var y = lerp(1-i, 336, 118)
    svg.setAttribute("y", y )
  }
  this.finish = function(cb){
		$("#loader_rapper").addClass("hidden")
 		setTimeout(cb, 100)
    setTimeout(function(){
     	$("#loader_rapper").hide()
    }, 500)
  }
  init()
}

var Share = {
  init: function(){
    $(document).on("click", ".fb", Share.facebook)
    $(document).on("click", ".tw", Share.twitter)
    setTimeout(function(){
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '643786815755427',
          xfbml      : true,
          version    : 'v2.3'
        });
      };

      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    }, 1000)
  },
  
	facebook: function (e) {
	  e.preventDefault()
	  // var link = window.location.href
	  // var msg = $(".postname").html()
		// var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(link) + "&t=" + encodeURIComponent(msg)
		// window.open(url, "_blank")
		
		var picture = $(".gallery img").first().attr("src") || ($(".gallery .underlay").css('background-image') || "").replace("url(","").replace(")","") || "http://twohustlers.com/assets/images/2H_LOGOMARK.png"
    FB.ui({
      method: 'feed',
      link: window.location.href,
      caption: $(".postname").html(),
      picture: picture,
    }, function(response){});
	},

	twitter: function (e) {
	  e.preventDefault()
	  var link = window.location.href
	  var msg = $(".postname").html()
    var url = "https://twitter.com/home?status=" + encodeURIComponent(msg + " " + link)
		window.open(url, "_blank")
	},
}