-var baseURL = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318'

-var data = [{title: 'Forest', imgLeft: baseURL + '/forest-left.jpg', imgRight: baseURL + '/forest-right.jpg'},{title: 'Mountain', imgLeft: baseURL + '/mountain-left.jpg', imgRight: baseURL + '/mountain-right.jpg'},{title: 'Ocean', imgLeft: baseURL + '/ocean-left.jpg', imgRight: baseURL + '/ocean-right.jpg'},{title: 'Canyon', imgLeft: baseURL + '/canyon-left.jpg', imgRight: baseURL + '/canyon-right.jpg'},{title: 'Lake', imgLeft: baseURL + '/lake-left.jpg', imgRight: baseURL + '/lake-right.jpg'}]

#container
  ul#slides
    each item in data
      li.slide
        .slide-partial.slide-left
          img(src= item.imgLeft)
        .slide-partial.slide-right
          img(src= item.imgRight)
        h1.title
          span.title-text= item.title
        
  ul#slide-select
    li.btn.prev <
    each item in data
      li.selector
    li.btn.next >
  
a.codepen-link(href='https://www.codepen.io/seanfree' target='_blank')

*
  box-sizing: border-box
body
  background-color: #0c0c0c
  overflow: hidden
#container
  position: absolute
  width: 100%
  height: 100%
  overflow: hidden
#slides
  position: relative
  width: 100%
  height: 100%
  .slide
    position: absolute
    display: flex
    width: 100%
    height: 100%
    .title
      position: absolute
      top: calc(50% - 0.5em)
      left: 20px
      z-index: 2
      padding-top: 5px
      font-family: 'Reem Kufi', sans-serif
      font-size: 5em
      color: white
      overflow: hidden
      .title-text
        display: block
        transform: translateY(1.2em)
        transition: transform 1s ease-in-out
    .slide-partial
      position: absolute
      width: 50%
      height: 100%
      overflow: hidden
      transition: transform 1s ease-in-out
      img
        position: absolute
        z-index: 1
        width: 100%
        height: 100%
        object-fit: cover
        transition: transform 1s ease-in-out
    .slide-left
      top: 0
      left: 0
      transform: translateX(-100%)
      img
        top: 0
        right: 0
        object-position: 100% 50%
        transform: translateX(50%)
    .slide-right
      top: 0
      right: 0
      transform: translateX(100%)
      transition-delay: 0.2s
      img
        top: 0
        left: 0
        object-position: 0% 50%
        transition-delay: 0.2s
        transform: translateX(-50%)
    &.active
      .title .title-text
        transform: translate(0)
        transition-delay: 0.3s
      .slide-partial, .slide-partial img
        transform: translateX(0)
#slide-select
  position: absolute
  bottom: 20px
  left: 20px
  z-index: 100
  display: flex
  align-items: center
  justify-content: space-around
  font-family: 'Reem Kufi', sans-serif
  font-size: 1.5em
  font-weight: lighter
  color: white
  li
    position: relative
    cursor: pointer
    margin: 0 5px
    &.prev:hover
      transform: translateX(-2px)
    &.next:hover
      transform: translateX(2px)
  .selector
    height: 14px
    width: 14px
    border: 2px solid white
    background-color: transparent
    transition: background-color 0.5s ease-in-out
    &.current
      background-color: white
  
.codepen-link
  position: absolute
  bottom: 20px
  right: 20px
  height: 40px
  width: 40px
  z-index: 10
  border-radius: 50%
  box-sizing: border-box
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg')
  background-position: center center
  background-size: cover
  opacity: 0.5
  transition: all 0.25s
  &:hover
    opacity: 0.8
    box-shadow: 0 2px 6px #0c0c0c

let $slides, interval, $selectors, $btns, currentIndex, nextIndex;

let cycle = index => {
  let $currentSlide, $nextSlide, $currentSelector, $nextSelector;

  nextIndex = index !== undefined ? index : nextIndex;

  $currentSlide = $($slides.get(currentIndex));
  $currentSelector = $($selectors.get(currentIndex));

  $nextSlide = $($slides.get(nextIndex));
  $nextSelector = $($selectors.get(nextIndex));

  $currentSlide.removeClass("active").css("z-index", "0");

  $nextSlide.addClass("active").css("z-index", "1");

  $currentSelector.removeClass("current");
  $nextSelector.addClass("current");

  currentIndex = index !== undefined
    ? nextIndex
    : currentIndex < $slides.length - 1 
      ? currentIndex + 1 
      : 0;
  
  nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0;
};

$(() => {
  currentIndex = 0;
  nextIndex = 1;

  $slides = $(".slide");
  $selectors = $(".selector");
  $btns = $(".btn");

  $slides.first().addClass("active");
  $selectors.first().addClass("current");

  interval = window.setInterval(cycle, 6000);

  $selectors.on("click", e => {
    let target = $selectors.index(e.target);
    if (target !== currentIndex) {
      window.clearInterval(interval);
      cycle(target);
      interval = window.setInterval(cycle, 6000);
    }
  });

  $btns.on("click", e => {
    window.clearInterval(interval);
    if ($(e.target).hasClass("prev")) {
      let target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1;
      cycle(target);
    } else if ($(e.target).hasClass("next")) {
      cycle();
    }
    interval = window.setInterval(cycle, 6000);
  });
});