/* Author: 

*/


var box;
var init = function () {
  console.log("initing");
    box = document.getElementsByClassName("box")[0];
    console.log(box.style.transform);
    console.log(Modernizr.csstransforms3d);
    //need the initial state set to this also, so we don't get FOUC
    box.style.webkitTransformOrigin = "left bottom";
    box.style.webkitTransform = "skew(" + skewXValue + "deg , " + skewYValue + "deg)";
    //box.style.webkitTransform = "skewX(" + skewXValue + "deg)";
    // so we'd want a shim to make transform work across browser engines.


    (function animloop(){
      render();
      requestAnimFrame(animloop);
    })();
};

var skewYValue = -27;
var skewXValue = 0;
var render = function () {
    if (skewXValue > -40) {
        skewXValue--;
        //box.style.webkitTransform = "skewY(" + skewYValue + "deg)";
        box.style.webkitTransform = "skew(" + skewXValue + "deg, " + skewYValue + "deg)";
    }
};


window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();