body {
  background-color: #000000;
  margin: 0;
  overflow: hidden;
}

article {
  position: absolute;
  top: 50%;
  margin-top: -2.5vw;
  div.container {
    -webkit-perspective: 800px;
    width: 5vw;
    >div {
      &.element-container {
        -webkit-transform-style: preserve-3d;
        opacity: 0;
      }
      &.reset {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
        opacity: 1;
        -webkit-transition: 0.4s -webkit-transform ease-out, 0.4s opacity ease-out;
        margin-top: 0px;
        -webkit-transform-style: preserve-3d;
      }
      >div.element {
        width: 5vw;
        height: 5vw;
        position:absolute;
        color: #ffffff;
        font-family: futura;
        font-size: 5vw;
        line-height: 5vw;
        text-align: center;
      }
    }
  }
}

button#reset-btn {
  position: absolute;
  top: -30px;
  left: 0;
  width: 90px;
  height: 30px;
  font-size: 10px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
  border: none;
  background-color: #ffffff;
  &:focus {
    outline: 0;
  }
}

@for $i from 1 through 20 {
  div.container:nth-child(#{$i}) {
    position: absolute;
    top: 0;
    left: (#{$i * 5 - 5}) + vw;
    div.element-container{
      -webkit-transform: rotateX((random(720) - 360) + deg) rotateY((random(720) - 360) + deg) rotateZ((random(720) - 360) + deg) translateX((random(720) - 360) + px) translateY((random(720) - 360) + px) translateZ((random(720) - 360) + px);
      > div {
        top: 0;
        left: (#{$i * 5 - 5}) + vw;
      }
    }

  }
}

$(function(){
  init();
});

function init() {
  setEventListener();
  setAnimationManager();
}

function setEventListener() {
  $('#reset-btn').on('click', function() {
    swapBtnView('hide');
    setAnimationManager();
  });
}

function swapBtnView(state) {
  var value = (state === 'hide') ? -30 : 0;
  $('#reset-btn').animate({
    top: value
  });
}

function setAnimationManager() {
  var promise = setAnimations();
  promise
  .then(function() {
    reset();
  });
}

function reset() {
  var promise = hideContainers();
  promise
  .then(resetPosition);
}

function resetPosition() {
  var $targets = $('div.container').find('>div');
  $targets.removeClass();
  $targets.addClass('element-container');
  $('div.container').css({
    opacity: 1
  });
  swapBtnView('show');
}

function hideContainers() {
  var promises = [];
  var length = $('div.container').length;
  for(var i = 0; i < length; i++) {
    var promise = hideContainer(i);
    promises.push(promise);
  }

  // apply
  return $.when.apply(undefined, promises).promise();
}

function hideContainer(i) {
  var deferred = $.Deferred();
  $('div.container').eq(i)
  .delay(500)
  .animate({
    opacity: 0
  }, function() {
    return deferred.resolve();
  });

  return deferred.promise();
}

function setAnimations() {
  var LENGTH = 20;
  var promises = [];
  for(var i = 0; i < LENGTH; i++) {
    var promise = setAnimation(i);
    promises.push(promise);
  }

  // apply
  return $.when.apply(undefined, promises).promise();
}

function setAnimation(i) {
  var deferred = $.Deferred();
  var $target = $('div.container').eq(i);
  setTimeout(function() {
    $target.find('>div').removeClass();
    $target.find('>div').addClass('reset');
    return deferred.resolve();
  }, i * 150);
  return deferred.promise();
}