<div class="t-container">
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img00.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img01.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img02.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img03.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img04.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img05.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img06.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img07.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img08.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img09.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img10.jpg" alt=""/> <div class="cover"></div> </div>
      <div class="t-content"><img class="t-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/img11.jpg" alt=""/> <div class="cover"></div> </div>
    </div>

    <div class="container">
      <button type="button" class="btn btn-primary" id="toggle">Toggle</button>
    </div>

@import "compass/css3";

// bower:scss
// endbower
//@import "compass/reset";
@import "compass/css3";

body{
  overflow: hidden;
}

canvas{
  width: 100%;
  height: 100%;
}



.t-container{
  position: absolute;
  top: 0;
  left: 0;
  .t-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 225px;
    img{
      position: absolute;

      width: 400px;
      height: 225px;
    }

    .cover{
      position: absolute;
      top: 0;
      left: 0;

      background-color: rgba(0, 0, 0, .75);

      width: 400px;
      height: 225px;
    }
  }
}

.container{
  position: absolute;
  @include translateX(-50%);
  left: 50%;
  bottom: 50px;
  .btn{
    //position: absolute;
    //
    //
    //

    z-index: 9999;
  }
}

function createGrid(transform, xx, yy, isHorizon){
  var elemWidth, elemHeight;

  if(isHorizon){
    elemWidth = window.innerWidth/4;
    elemHeight = window.innerHeight/3;
  }else{
    elemWidth = window.innerWidth/3;
    elemHeight = window.innerHeight/4;
  }

  var xPos = elemWidth * xx;
  var yPos = elemHeight * yy;


  var curTopLeft  = {x: transform.topLeft.x, y: transform.topLeft.y};
  var curTopRight = {x: transform.topRight.x, y: transform.topRight.y};
  var curBotLeft  = {x: transform.bottomLeft.x, y: transform.bottomLeft.y};
  var curBotRight = {x: transform.bottomRight.x, y: transform.bottomRight.y};

  var targetTopLeft  = {x: xPos, y: yPos};
  var targetTopRight = {x: xPos + elemWidth, y: yPos};
  var targetBotLeft  = {x: xPos, y: yPos + elemHeight};
  var targetBotRight = {x: xPos + elemWidth, y: yPos + elemHeight};

  var curObject = {rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1};

  function onUpdateGridHandler(){
    var tempTopLeftX = curTopLeft.x * curObject.rate + targetTopLeft.x * (1 - curObject.rate);
    var tempTopLeftY = curTopLeft.y * curObject.rate + targetTopLeft.y * (1 - curObject.rate);

    var tempTopRightX = curTopRight.x * curObject.rate + targetTopRight.x * (1 - curObject.rate);
    var tempTopRightY = curTopRight.y * curObject.rate + targetTopRight.y * (1 - curObject.rate);

    var tempBotLeftX = curBotLeft.x * curObject.rate + targetBotLeft.x * (1 - curObject.rate);
    var tempBotLeftY = curBotLeft.y * curObject.rate + targetBotLeft.y * (1 - curObject.rate);

    var tempBotRightX = curBotRight.x * curObject.rate + targetBotRight.x * (1 - curObject.rate);
    var tempBotRightY = curBotRight.y * curObject.rate + targetBotRight.y * (1 - curObject.rate);

    transform.topLeft.x = tempTopLeftX;
    transform.topLeft.y = tempTopLeftY;

    transform.topRight.x = tempTopRightX;
    transform.topRight.y = tempTopRightY;

    transform.bottomLeft.x = tempBotLeftX;
    transform.bottomLeft.y = tempBotLeftY;

    transform.bottomRight.x = tempBotRightX;
    transform.bottomRight.y = tempBotRightY;

  }

  function onUpdate0GridHandler(){

    var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);
    var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);

    transform.topLeft.x = tempTopLeftX;
    transform.topLeft.y = tempTopLeftY;
  }

  function onUpdate1GridHandler(){

    var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);
    var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);


    transform.topRight.x = tempTopRightX;
    transform.topRight.y = tempTopRightY;

  }

  function onUpdate2GridHandler(){

    var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);
    var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);

    transform.bottomLeft.x = tempBotLeftX;
    transform.bottomLeft.y = tempBotLeftY;

  }

  function onUpdate3GridHandler(){

    var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);
    var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);

    transform.bottomRight.x = tempBotRightX;
    transform.bottomRight.y = tempBotRightY;

  }

 TweenLite.to(curObject,.4, {rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power2.easeOut"});
  TweenLite.to(curObject,.4, {rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut"});
  TweenLite.to(curObject,.4, {rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power4.easeOut"});
  TweenLite.to(curObject,.4, {rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut"});

  //console.log(transform)
  var cover = $(transform.element).find(".cover")[0]
  TweenLite.to(cover,.4, {opacity: 0, ease: "Power1.easeOut"});
}
function pileElement(transform, num, maxNumber){
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  // -----------------------------

  var camera = {
    focus : 400,
    self : {
      x : 0,
      y : 0,
      z : 0
    },
    rotate : {
      x : 0,
      y : 0,
      z : 0
    },
    up : {
      x : 0,
      y : 1,
      z : 0
    },
    zoom : 1,
    display : {
      x : width/2,
      y : height/2,
      z : 0
    }
  };

  // ================================

  var y = -10 * (num + 1) + window.innerHeight /2 * .8;
  var width = 400;
  var height = 400 * 9 / 16;
  var topLeftPos  = {x: -width/2, z: -height};
  var topRightPos = {x : width/2, z: -height};
  var botLeftPos  = {x : -width/2, z: 0};
  var botRightPos = {x : width/2, z: 0};

  var topScale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - topLeftPos.z))* camera.zoom;
  var botScale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - botLeftPos.z))* camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);

  var targetTopLeftX = topScale * topLeftPos.x;
  var targetTopLeftY = topScale * y;

  var targetTopRightX = topScale * topRightPos.x;
  var targetTopRightY = topScale * y;

  var targetBotLeftX = botScale * botLeftPos.x;
  var targetBotLeftY = botScale * y;

  var targetBotRightX = botScale * botRightPos.x;
  var targetBotRightY  = botScale * y;

  var halfWidth = window.innerWidth/2;
  var halfHeight = window.innerHeight/2;

  // --------------------------------------

  transform.topLeft.x = targetTopLeftX + halfWidth;
  transform.topLeft.y = targetTopLeftY + halfHeight;


  transform.topRight.x = targetTopRightX + halfWidth;
  transform.topRight.y = targetTopRightY + halfHeight;

  transform.bottomLeft.x = targetBotLeftX + halfWidth;
  transform.bottomLeft.y = targetBotLeftY + halfHeight;

  transform.bottomRight.x = targetBotRightX + halfWidth;
  transform.bottomRight.y = targetBotRightY + halfHeight;


};

function createPile(transform, num){
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  // -----------------------------

  var camera = {
    focus : 400,
    self : {
      x : 0,
      y : 0,
      z : 0
    },
    rotate : {
      x : 0,
      y : 0,
      z : 0
    },
    up : {
      x : 0,
      y : 1,
      z : 0
    },
    zoom : 1,
    display : {
      x : width/2,
      y : height/2,
      z : 0
    }
  };

  // ================================
  var halfWidth = window.innerWidth/2;
  var halfHeight = window.innerHeight/2;

  var y = -10 * (num + 1) + window.innerHeight /2 * .8;
  var width = 400;
  var height = 400 * 9 / 16;
  var topLeftPos  = {x: -width/2, z: -height};
  var topRightPos = {x : width/2, z: -height};
  var botLeftPos  = {x : -width/2, z: 0};
  var botRightPos = {x : width/2, z: 0};

  var topScale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - topLeftPos.z))* camera.zoom;
  var botScale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - botLeftPos.z))* camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);

  var targetTopLeftX = topScale * topLeftPos.x + halfWidth;
  var targetTopLeftY = topScale * y + halfHeight;

  var targetTopRightX = topScale * topRightPos.x + halfWidth;
  var targetTopRightY = topScale * y + halfHeight;

  var targetBotLeftX = botScale * botLeftPos.x+ halfWidth;
  var targetBotLeftY = botScale * y+ halfHeight;

  var targetBotRightX = botScale * botRightPos.x+ halfWidth;
  var targetBotRightY  = botScale * y+ halfHeight;

  var curTopLeft  = {x: transform.topLeft.x, y: transform.topLeft.y};
  var curTopRight = {x: transform.topRight.x, y: transform.topRight.y};
  var curBotLeft  = {x: transform.bottomLeft.x, y: transform.bottomLeft.y};
  var curBotRight = {x: transform.bottomRight.x, y: transform.bottomRight.y};

  var targetTopLeft  = {x: targetTopLeftX, y: targetTopLeftY};
  var targetTopRight = {x: targetTopRightX, y: targetTopRightY};
  var targetBotLeft  = {x: targetBotLeftX, y: targetBotLeftY};
  var targetBotRight = {x: targetBotRightX, y: targetBotRightY};

  var curObject = {rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1};


  function onUpdate0GridHandler(){

    var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);
    var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);

    transform.topLeft.x = tempTopLeftX;
    transform.topLeft.y = tempTopLeftY;
  }

  function onUpdate1GridHandler(){

    var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);
    var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);


    transform.topRight.x = tempTopRightX;
    transform.topRight.y = tempTopRightY;

  }

  function onUpdate2GridHandler(){

    var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);
    var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);

    transform.bottomLeft.x = tempBotLeftX;
    transform.bottomLeft.y = tempBotLeftY;

  }

  function onUpdate3GridHandler(){

    var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);
    var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);

    transform.bottomRight.x = tempBotRightX;
    transform.bottomRight.y = tempBotRightY;

  }


  TweenLite.to(curObject,.4, {rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power1.easeOut"});
  TweenLite.to(curObject,.4, {rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut"});
  TweenLite.to(curObject,.4, {rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power3.easeOut"});
  TweenLite.to(curObject,.4, {rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut"});


  var cover = $(transform.element).find(".cover")[0];
  TweenLite.to(cover,.4, {opacity: 1, ease: "Power1.easeIn"});


  // --------------------------------------

  /*
  transform.topLeft.x = targetTopLeftX + halfWidth;
  transform.topLeft.y = targetTopLeftY + halfHeight;


  transform.topRight.x = targetTopRightX + halfWidth;
  transform.topRight.y = targetTopRightY + halfHeight;

  transform.bottomLeft.x = targetBotLeftX + halfWidth;
  transform.bottomLeft.y = targetBotLeftY + halfHeight;

  transform.bottomRight.x = targetBotRightX + halfWidth;
  transform.bottomRight.y = targetBotRightY + halfHeight;*/


};


(function () {
// create PerspectiveTransfrom
  var elem = document.getElementById("t-content00");
  var width = 400;
  var height = 225;
  var useBackFacing = true;
  var curCount;
  var $elem = $(".t-content");
  var isHorizon = false;
  var isAnimation = true;
  var isOpen = true;
  if(window.innerWidth > window.innerHeight) isHorizon = true;



  var transformArr = [];

  //console.log(typeof $elem);
  $elem.each(function (index) {
    var transform = new PerspectiveTransform(this, width, height, true);
    transformArr.push(transform);
  });

  curCount = transformArr.length - 1;

  //

  $elem.each(function (index) {
    var transform = transformArr[index]
    pileElement(transform, index);
  });

  function animation(){
    isAnimation = true;
    var transformCount = transformArr.length -curCount - 1;
    var xx, yy;

    if(isHorizon){
      xx = transformCount % 4;
      yy = parseInt(transformCount / 4);
    }else{
      xx = transformCount % 3;
      yy = parseInt(transformCount / 3);
    }

    createGrid(transformArr[curCount], xx, yy, isHorizon);

    curCount--;
    if(curCount >= 0) {

      setTimeout(animation, 100);
    }
    else isAnimation = false;
  }


  function animation2(){
    isAnimation = true;

    createPile(transformArr[curCount], curCount)

    curCount++;
    if(curCount <= transformArr.length-1) setTimeout(animation2, 50);
    else isAnimation = false;
  };




  function loop(){

    $elem.each(function (index) {
        transformArr[index].update();
    });

    requestAnimationFrame(loop);
  };

  loop();

  setTimeout(animation, 500);


  $("#toggle").click(function(ev){
    if(!isAnimation){

      if(isOpen) {
        curCount = 0;
        animation2();
      }
      else {
        curCount = transformArr.length - 1;
        animation();
      }

      isOpen = !isOpen;
    }
  });
})();