.coverflow
  a.prev-arrow
  - var cdn = ""
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cce3166bd8fb50afaf8b_Life_DSC_2872.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cceadec3b41d523afae3_Life_DSC_2784.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35ccfa47f4bbb8a99f669b_Life_DSC_2841.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cd0f3485b66c88f9fa2f_Life_DSC_2913.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cd1d3485b6392bf9fb3d_Life_DSC_2915.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cd247cb2541e9fd34e7a_Life_IMG_3627.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cd3627d4f03e0239e562_Life_DSC_2959.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cd3c7cb2543fb1d34e9b_Life_DSC_3035.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cd43dec3b42b503aff07_Life_Numbers.png")
  img.coverflow__image(src=cdn+"https://uploads-ssl.webflow.com/5c1278fdbcb24105acc6d386/5d35cd4927d4f083ad39f7ba_Life_DSC_3209.png")
  a.next-arrow

body {
  background: #f7e8d5;
}

//////////////////////////////
// Coverflow styles
//////////////////////////////
$imageW: 300px;
$imageH: 240px;

$transitionSpeed: 350ms;
$transitionEasing: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */

$nonfocusSpacing: 90px;
$focusMargin: 210px;
$maxNonfocusOpacity: 0.5;
$maxNonfocusScale: 0.5;
$minNonfocusScale: 0.2;
$numNonfocusVisible: 3;

$centerGlow: 0 1px 25px 10px rgba(#000000, 0.6);
$perspective: 1000px;
$leftTransform: rotateY(45deg);
$rightTransform: rotateY(-45deg);

$maxImages: 10;

// Main Styles
.coverflow {
  position: relative;
  height: $imageH;
  padding: 3rem;
  overflow: hidden;
  perspective: $perspective;

  &__image {
    user-select: none;
    width: $imageW;
    height: $imageH;
    transition: all $transitionSpeed $transitionEasing;
    &[data-coverflow-index] {
      position: absolute;
      left: 50%;
      transform-origin: 50% 50%;
      &:before {
        content: " ";
        z-index: 1;
        position: absolute;
        top: 300px;
        width: 100%;
        height: 10%;
        box-shadow: 0 0 30px rgba(#000000, 0.7);
      }
    }
  }

  @for $x from 1 through $maxImages {
    &[data-coverflow-position="#{$x}"] {
      @for $y from 1 through $maxImages {
        @if ($y < $x) {
          //left
          $dist: $x - $y;
          .coverflow__image[data-coverflow-index="#{$y}"] {
            z-index: $maxImages - $dist;
            $scale: (
                (
                    ($maxNonfocusScale - $minNonfocusScale) / ($numNonfocusVisible -
                          1)
                  ) * ($numNonfocusVisible - ($dist - 1))
              ) + $minNonfocusScale;
            $translateX: (-1 * $nonfocusSpacing * ($dist - 1)) - ($imageW / 2) -
              $focusMargin;
            transform: translateX($translateX) scale($scale) $leftTransform;
            opacity: ($maxNonfocusOpacity / $numNonfocusVisible) * ($numNonfocusVisible -
                  (
                    $dist - 1
                  ));
          }
        }
        @if ($y == $x) {
          //center (focus)
          .coverflow__image[data-coverflow-index="#{$y}"] {
            z-index: $maxImages;
            transform: translateX(-1 * ($imageW / 2));
          }
        }
        @if ($y > $x) {
          //right
          $dist: $y - $x;
          .coverflow__image[data-coverflow-index="#{$y}"] {
            z-index: $maxImages - $dist;
            $scale: (
                (
                    ($maxNonfocusScale - $minNonfocusScale) / ($numNonfocusVisible -
                          1)
                  ) * ($numNonfocusVisible - ($dist - 1))
              ) + $minNonfocusScale;
            $translateX: ($nonfocusSpacing * ($dist - 1)) - ($imageW / 2) + $focusMargin;
            transform: translateX($translateX) scale($scale) $rightTransform;
            opacity: ($maxNonfocusOpacity / $numNonfocusVisible) * ($numNonfocusVisible -
                  (
                    $dist - 1
                  ));
          }
        }
      }
    }
  }
}

// Arrows
%arrow-control {
  cursor: pointer;
  z-index: $maxImages;
  position: absolute;
  top: 50%;
  padding: 1.5rem 2rem;
  color: rgba(#000000, 0.5);
  font-size: 3rem;
  line-height: 3rem;
  background: rgba(#000000, 0.00);
  border-radius: 1rem;
  transform-origin: 50% 50%;
  transform: translateY(-50%);
  transition: color 200ms, background 200ms;
  &:hover, &:focus {
    color: rgba(#EFC516, 0.9);
  }
}
.prev-arrow {
  @extend %arrow-control;
  left: 5%;
  &:before {
    content: "❮";
  }
}
.next-arrow {
  @extend %arrow-control;
  right: 5%;
  &:after {
    content: "❯";
  }
}

//DOM elements
const coverflowContainer = document.querySelector('.coverflow');
const coverflowImages = [...document.querySelectorAll('.coverflow__image')];
const prevArrow = document.querySelector('.prev-arrow');
const nextArrow = document.querySelector('.next-arrow');

//set indicies and initial position
coverflowImages.forEach(function(coverflowImage, i) {
  coverflowImage.dataset.coverflowIndex = i + 1;
});
let coverflowPosition = Math.floor(coverflowImages.length/2) + 1;
coverflowContainer.dataset.coverflowPosition = coverflowPosition;

//navigation functions
function viewPrevImage() {
  coverflowPosition = Math.max(1, coverflowPosition - 1);
  coverflowContainer.dataset.coverflowPosition = coverflowPosition;
}
function viewNextImage() {
  coverflowPosition = Math.min(coverflowImages.length, coverflowPosition + 1);
  coverflowContainer.dataset.coverflowPosition = coverflowPosition;
}
function jumpToImage(targetImage) {
  coverflowPosition = Math.min(coverflowImages.length, Math.max(1, targetImage.dataset.coverflowIndex));
  coverflowContainer.dataset.coverflowPosition = coverflowPosition;
}

//add event handlers
prevArrow.addEventListener('click', viewPrevImage);
nextArrow.addEventListener('click', viewNextImage);
coverflowImages.forEach(function(image) {
  image.addEventListener('click', evt => jumpToImage(evt.target));
});
window.addEventListener('keyup', (evt) => {
  if (evt.which ===  37) { //left arrow
    viewPrevImage();
  } else if (evt.which === 39) { //right arrow
    viewNextImage();
  }
});