<!-- Images: https://www.flickr.com/photos/boston_public_library/albums/72157629000977017 -->

<section id="slideshow">
  <div id="slidewindow">
    <div><img alt="Slideshow Image I" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/345286/lion-1.jpg"></div>
    <div><img alt="Slideshow Image II" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/345286/lion-2.jpg"></div>
    <div><img alt="Slideshow Image III" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/345286/lion-3.jpg"></div>
  </div>
  <div id="controls">
    <a id="next">
      <div></div>
    </a>
    <ul id="dots"></ul>
    <a id="prev">
      <div></div>
    </a>
  </div>
</section>

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background-color: #F5F5F5;
  position: relative;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

/* Slideshow */

#slideshow {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#slideshow #slidewindow {
  position: relative;
  overflow: hidden;
}

#slideshow #slidewindow div {
  position: absolute;
  top: 0;
  width: 100%;
  transition: transform .5s ease;
}

#slideshow #slidewindow div img {
  display: block;
  width: 100%;
}

/* Controls */

#slideshow #controls {
  text-align: center;
  transition: all 200ms ease-in-out;
}

#slideshow #controls #next, #slideshow #controls #prev {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 8px;
  cursor: pointer;
}

#slideshow #controls #next {
  float: right;
}

#slideshow #controls #prev {
  float: left;
}

#slideshow #controls #next div, #slideshow #controls #prev div {
  position: absolute;
  pointer-events: none;
  border-style: solid;
  border-color: #383838;
  border-width: 2px 2px 0 0;
  content: '';
  display: inline-block;
  left: 18px;
  top: 18px;
  transform: rotate(45deg);
  vertical-align: top;
  width: 8px;
  height: 8px;
}

#slideshow #controls #prev div {
  transform: rotate(-135deg);
}

#slideshow #controls #dots {
  margin: auto;
  display: inline-block;
  padding: 0;
  list-style-type: none;
  width: auto;
}

#slideshow #controls #dots li {
  display: inline-block;
  border: 2px solid #383838;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: pointer;
  margin: 26px 4px;
}

#slideshow #controls #dots .active {
  background: #383838;
}

#slideshow #controls #dots li:hover,
#slideshow #controls #next:hover,
#slideshow #controls #prev:hover {
  transform: scale(1.125);
}

#slideshow #controls #dots li:active,
#slideshow #controls #next:active,
#slideshow #controls #prev:active {
  transform: scale(1);
}

window.onload = function() {
  "use strict";
  //autoplay true=on, false=off
  var autoplay = false;

  //slideshow autoplay timing in ms
  var autoTime = 3000;

  //vars
  var tracker = 0,
    slidewindow = document.querySelector("#slideshow #slidewindow"),
    slides = document.querySelectorAll("#slideshow #slidewindow div"),
    next = document.querySelector("#slideshow #controls #next"),
    prev = document.querySelector("#slideshow #controls #prev"),
    dots = document.querySelector("#slideshow #controls #dots"),
    allDots = dots.getElementsByTagName("LI");

  //Attach click events to next and prev
  next.onclick = direction;
  prev.onclick = direction;

  //create a dot for each slide
  for (var i = 0; i < slides.length; i++) {
    var dot = document.createElement("LI");
    dot.id = i;
    dots.appendChild(dot);
    dot.onclick = direction;
  }

  //run function on resize
  window.onresize = updateAll;

  //invoke updateAll
  updateAll();

  //update slide and container sizes
  function updateAll() {
    updateDots(tracker);

    //set width of slidewindow to 100%
    slidewindow.style.width = "100%";

    //Get current width and height
    var curWidth = slides[0].offsetWidth;
    var curHeight = slides[0].offsetHeight;

    //set current w/h of slidewindow to match slide
    slidewindow.style.width = curWidth + "px";
    slidewindow.style.height = curHeight + "px";

    //set position of each slide
    for (var i = 0; i < slides.length; i++) {
      console.log(slides[i].style.transform)
      slides[i].style.transform = "translateX(" + (i * curWidth + tracker * curWidth) + "px )";
    }
  }

  function isNumber(obj) {
    return !isNaN(parseFloat(obj));
  }

  //autoplay
  if (autoplay === true) {
    setInterval(function() {
      if (tracker > 1 - slides.length) {
        tracker -= 1;
      } else if (tracker === 1 - slides.length) {
        tracker = 0;
      } else if (tracker < 0) {
        tracker += 1;
      } else if (tracker === 0) {
        tracker = -slides.length + 1;
      }
      updateAll();
    }, autoTime);
  }

  function direction(eventObject) {
    //get id from target
    var idVal = eventObject.target.id;

    if (idVal === "next" && tracker > 1 - slides.length) {
      tracker -= 1;
    } else if (idVal === "next" && tracker === 1 - slides.length) {
      tracker = 0;
    } else if (idVal === "prev" && tracker < 0) {
      tracker += 1;
    } else if (idVal === "prev" && tracker === 0) {
      tracker = -slides.length + 1;
    } else if (isNumber(idVal)) {
      tracker = -idVal;
    }
    updateAll();
  }

  //updateDots
  function updateDots(n) {
    n *= -1;
    for (var i = 0; i < allDots.length; i++) {
      allDots[i].className = "";
    }
    allDots[n].className = "active";
  }

  //swipe event listeners
  slidewindow.addEventListener("touchstart", handleTouchStart, false);
  slidewindow.addEventListener("touchmove", handleTouchMove, false);

  //swipe vars
  var xDown = null;
  var yDown = null;

  //swipe handleTouchStart
  function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
  }

  //swipe handleTouchMove
  function handleTouchMove(evt) {
    if (!xDown || !yDown) {
      return;
    }

    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
      /*determine most significant*/
      if (xDiff > 0) {
        //swipe left - next
        if (tracker > 1 - slides.length) {
          tracker -= 1;
        } else if (tracker === 1 - slides.length) {
          tracker = 0;
        }
        updateAll();
      } else {
        //swipe right - prev
        if (tracker < 0) {
          tracker += 1;
        } else if (tracker === 0) {
          tracker = -slides.length + 1;
        }
        updateAll();
      }
    } else {
      if (yDiff > 0) {
        //swipe up
      } else {
        //swipe down
      }
    }

    /* reset values */
    xDown = null;
    yDown = null;
  }
};