$(document).ready(function() {
  
  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      }, wait);
      if (immediate && !timeout) func.apply(context, args);
    };
  };
  
  function hoverEffect(px) {
    $(".element").each(function() {
      var $back = $(this).find(".back"),
          $text = $(this).find(".hover-text"),
          backH = $back.height(),
          textH = $text.height(),
          diff = 0,
          dur = 0,
          pxPerSecond = px || 100,
          that = this;

      $(this).unbind("mouseenter mouseleave");

      if (backH < textH) {
        diff = textH - backH + 50;
        dur = parseFloat(diff /  pxPerSecond).toFixed(2);
        $text.css("transition", "transform " + dur +"s 0.5s linear");
        $(that).hover(function() {
          $text.css("transition", "transform " + dur +"s 0.5s linear");
          $text.css("transform", "translateY("+ (0 - diff) +"px)");
        }, function() {
          $text.css("transition", "transform 0.5s 0.5s linear");
          $text.css("transform", "translateY(0px)");
        });
      }

    });
  };
  
  hoverEffect();
  
  var winWidth = $(window).width(),
      winHeight = $(window).height(),
      winWHalf = winWidth/2,
      winHHalf = winHeight/2,
      maxDeg = 10,
      xPoint = parseFloat(winWHalf/maxDeg),
      yPoint = parseFloat(winHHalf/maxDeg),
      xDeg = 0,
      yDeg = 0,
      $plat = $(".platform");
  
  var calculations = debounce(function(deg) {
    winWidth = $(window).width();
    winHeight = $(window).height();
    winWHalf = winWidth/2;
    winHHalf = winHeight/2;
    maxDeg = deg || 10;
    xPoint = parseFloat(winWHalf/maxDeg);
    yPoint = parseFloat(winHHalf/maxDeg);
    
    hoverEffect();
    
  }, 200);

  var movePlatform = debounce(function(e) {
    requestAnimationFrame(movePlatform);
    if (e.pageX <= winWHalf && e.pageY <= winHHalf) {
      yDeg = parseFloat( (winWHalf - e.pageX) / xPoint);
      xDeg = parseFloat( (winHHalf - e.pageY) / yPoint);
      $plat.css("transform", "rotateX("+ xDeg +"deg) rotateY("+ (0 - yDeg) +"deg)");
    } else if (e.pageX > winWHalf && e.pageY <= winHHalf) {
      yDeg = parseFloat( (e.pageX - winWHalf) / xPoint);
      xDeg = parseFloat( (winHHalf - e.pageY) / yPoint);
      $plat.css("transform", "rotateX("+ xDeg +"deg) rotateY("+ yDeg +"deg)");
    } else if (e.pageX <= winWHalf && e.pageY > winHHalf) {
      yDeg = parseFloat( (winWHalf - e.pageX) / xPoint);
      xDeg = parseFloat( (e.pageY - winHHalf) / yPoint);
      $plat.css("transform", "rotateX("+ (0 - xDeg) +"deg) rotateY("+ (0 - yDeg) +"deg)");
    } else if (e.pageX > winWHalf && e.pageY > winHHalf) {
      yDeg = parseFloat( (e.pageX - winWHalf) / xPoint);
      xDeg = parseFloat( (e.pageY - winHHalf) / yPoint);
      $plat.css("transform", "rotateX("+ (0 - xDeg) +"deg) rotateY("+ yDeg +"deg)");
    }
  }, 2);

  $(document).on("mousemove", movePlatform);

  $(window).resize(function() {
    calculations();
  });
  
  $(document).on("change keyup", ".deg", function() {
    calculations($(this).val());
  });
  
  $(document).on("change keyup", ".text-px", function() {
    hoverEffect($(this).val());
  });
  
  $(document).on("click", ".element:not(.duplicate)", function() {
    $(this).unbind("mouseenter mouseleave");
    $(document).off("mousemove", movePlatform);
    $plat.attr("style", "");
    $plat.addClass("inactive");
    var $duplicate = $(this).clone()
    .css({"top": $(this).offset().top,
          "left": $(this).offset().left});
    $(this).addClass("clicked");
    $("body").append($duplicate);
    $duplicate.addClass("duplicate");
    $duplicate.css("top");
    $duplicate.addClass("active");
    $duplicate.find(".side, .face, .back").hide();
    setTimeout(function() {
      $duplicate.find(".content").show();
      $duplicate.find(".content").css("top");
      $duplicate.find(".content").addClass("visible");
    }, 500);
  });
  
  $(document).on("click", ".close", function(e) {
    var $elem = $(this).parents(".element");
    $elem.find(".content").attr("style", "");
    $elem.removeClass("active");
    $plat.removeClass("inactive");
    setTimeout(function() {
      $(".element").removeClass("clicked");
      $elem.remove();
      hoverEffect();
      $(document).on("mousemove", movePlatform);
    }, 500);
    e.stopPropogation();
  });
  
});