body {
  background: #e6e6e6;
  
  font-family: 'Roboto Condensed', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.popup-container {
  perspective: 1000px;
  width: 300px;
  margin: 50px auto;
  
  touch-action: none;
}

.popup {
  width: 100%;
  
  overflow: hidden;
  background: white;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  &__content {
    display: block;
    width: 100%;
    height: 200px;
    position: relative;
        
    .next,
    .previous {
      display: block;
      width: 48px;
      height: 100px;
      position: absolute;
      top: 50%;
      margin-top: -50px;
      
      //background: rgba(0,0,0,0.1);
      cursor: pointer;
      
      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        margin: -16px -6px;
        
        pointer-events: none;
      }
    }
    
    .previous {
      left: 0;
    }
    
    .next {
      right: 0;
    }
  }
  
  &__buttons {
    height: 72px;
    
    .button {
      display: inline-block;
      box-sizing: border-box;
      width: 50%;
      
      line-height: 72px;
    }
  }
}

.button {
  text-align: center;
  text-transform: uppercase;
  color: #333;
  cursor: pointer;
  
  transition: color, background-color;
  transition-duration: 0.2s;
  
  &:hover {
    background: rgba(0,0,0,0.05);
  }
  
  &:active {
    background: rgba(0,0,0,0.1);
  }
}

.slide {
  &--blue {
    background: #4fc3f7;
  }
  
  &--teal {
    background: #4db6ac;
  }
  
  &--green {
    background: #aed581;
  }
  
  &--yellow {
    background: #fff176;
  }
  
  &--orange {
    background: #ffb74d;
  }
  
  &--red {
    background: #e57373;
  }
  
  &--purple {
    background: #9575cd;
  }
  
  &--indigo {
    background: #5c6bc0;
  }
}

.lory {
  &__frame {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  
  &__slides {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  
  &__slide {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}

(function() {
  var popup = document.getElementById('popup');
  var popupContainer = document.getElementById('popup-container');
  var springSystem = new rebound.SpringSystem();
  var spring = springSystem.createSpring(35, 3);
  
  var force = {x: 0, y: 0};
  var pressStart = {x: 0, y: 0};
  //var pressed = false;
  
  spring.addListener({
    onSpringUpdate: function(spr) {
      var val = spr.getCurrentValue();
      rot = rebound.MathUtil.mapValueInRange(val, 0, 1, 0, 40);
      var transform = 'rotateX(' + rot * force.y / 3 + 'deg) ' 
        + 'rotateY(' + rot * force.x + 'deg)';
      
      var vendors = ['Webkit', 'Moz', 'ms'];
      for(var vendor in vendors) {
        popup.style[vendors[vendor] + 'Transform'] = transform; 
      }
    }
  });
  
  function updateRotation(relX, relY) {
    var rect = popup.getBoundingClientRect();
    var x = Math.max(Math.min(relX, rect.width), 0);
    var y = Math.max(Math.min(relY, rect.height), 0);
    force.x = (x/rect.width) - 0.5;
    force.y = -((y/rect.height) - 0.5);
    
    spring.setEndValue(Math.max(Math.abs(force.x), Math.abs(force.y)));
    //spring.setEndValue(Math.sqrt(Math.pow(Math.abs(force.x), 2) + Math.abs(Math.abs(force.y), 2)));
  }
  
  var hammertime = new Hammer(popupContainer);
  hammertime.get('pan').set({ threshold: 0 });
  
  popupContainer.addEventListener('pointerdown', function(ev) {
    //ev.preventDefault();
    var rect = popup.getBoundingClientRect();
    pressStart.x = ev.pageX - (rect.left + document.body.scrollLeft);
    pressStart.y = ev.pageY - (rect.top + document.body.scrollTop);
    
    updateRotation(pressStart.x, pressStart.y);
  });

  hammertime.on('panmove', function(ev) {
    updateRotation(pressStart.x + ev.deltaX, pressStart.y + ev.deltaY);
  });
  
  hammertime.on('panend pancancel', function(ev) {
    spring.setEndValue(0);
  });
  
  popupContainer.addEventListener('pointerup', function(ev) {
    spring.setEndValue(0);
  });
  
  var sliderEl = document.querySelector('.lory');
  var slider = lory(sliderEl, {
    infinite: 1,
    classNameFrame: 'lory__frame',
    classNameSlideContainer: 'lory__slides',
    classNamePrevCtrl: 'lory__previous',
    classNameNextCtrl: 'lory__next'
  });
  
  var mcSliderPrev = new Hammer.Manager(slider.querySelector('.lory__previous'));
  mcSliderPrev.add( new Hammer.Tap());
       
  mcSliderPrev.on("tap", function() {
    slider.prev();
  });
  
  var mcSliderNext = new Hammer.Manager(slider.querySelector('.lory__next'));
  mcSliderPrev.add( new Hammer.Tap());
       
  mcSliderPrev.on("tap", function() {
    slider.next();
  });
})();