.hero#hero
  .hero__container
    .hero__item      
      figure.hero__itemImage(style='background-image:url(https://c2.staticflickr.com/8/7061/6850716805_73aea1b7de_o.jpg)')
      .hero__itemText
        h1.hero__itemTitle Greensock Tilt Effect
        p Move your mouse
        p Your current position is x: <span class='slider__itemX'>0</span>, y: <span class='slider__itemY'>0</span>

@import 'breakpoint';

$desktop: 800px;

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: #999;
  height: 100%;
  font-family: 'industry', sans-serif;
  overflow: hidden;
}

.hero {
  
  & {
    height: 100%;
    width: 100%;
    padding: 1em;
    
    @include breakpoint($desktop) {
      padding: 2em;
    }
  }
  
  &__container {
    width: 100%;
    overflow: hidden;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    white-space: nowrap;
  }
  
  &__item {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
  }
  
  &__itemImage {
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.5) 100%);
    }
  }
  
  &__itemText {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 2em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 100;
    
    p {
      margin: 0;
      text-shadow: 0 1px 1px #000;
      font-size: 1.125em;
    }
  }
  
  &__itemTitle {
    text-transform: uppercase;
    font-weight: 300;    
    margin: 0 auto;
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 0;
    text-shadow: 0 1px 1px #000;  
    
    @include breakpoint($desktop) {
      font-size: 3em;
    }
  }
}

// Minified: only 160 bytes!
function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}

var TiltAnimation = function() {
  
  var
    hero,
    mouseX,
    mouseY,
    textX,
    textY;

  var _init = function() {
    mouseX    = 0;
    mouseY    = 0;
    slider    = document.getElementById('hero');
    textX     = document.getElementsByClassName('slider__itemX')[0];
    textY     = document.getElementsByClassName('slider__itemY')[0];
    
    _addEventHandlers();    
  }
  
  var _addEventHandlers = function() {
    window.addEventListener('mousemove', _getMousePos, false);
    if (window.DeviceMotionEvent != undefined) {
      window.addEventListener('devicemotion', _accelerometerUpdate, false);
    }
  }
 
  var _accelerometerUpdate = function(e) {
    // http://stackoverflow.com/questions/4474508/access-accelerometer-via-javascript-in-android
    var aX = event.accelerationIncludingGravity.x*1;
    var aY = event.accelerationIncludingGravity.y*1;
    var aZ = event.accelerationIncludingGravity.z*1;
    //The following two lines are just to calculate a
    // tilt. Not really needed. 
    var xPosition = Math.atan2(aY, aZ) * 20;
    var yPosition = Math.atan2(aX, aZ) * 20;
    
    xPosition = Math.round(xPosition * 1000) / 1000;
    yPosition = Math.round(yPosition * 1000) / 1000;
    
    _animate(yPosition, xPosition);
    
    textY.innerHTML = yPosition;
    textX.innerHTML = xPosition;
  }
  
  var _getMousePos = function(e) {
    e = e || window.event;
    
    mouseX = e.pageX;
    mouseY = e.pageY;
    
    var xPos = (mouseX / window.innerWidth) - 0.5;
    var yPos = (mouseY / window.innerHeight) - 0.5;
    var rotationYValue = 5 * xPos;
    var rotationXValue = 5 * yPos;
    
    _animate(rotationYValue,rotationXValue);
    textX.innerHTML = mouseX;
    textY.innerHTML = mouseY;
  }
  
  var _animate = function(rotationYValue, rotationXValue) {
    TweenLite.to(slider, 0.6, { rotationY:rotationYValue, rotationX:rotationXValue, ease:Power1.easeOut, transformPerspective:900, transformOrigin:"center" });
  }
  
  return {
    init: _init
  }
}();

TiltAnimation.init();