// Flickr Album JSON URL
// https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=3bf1ac3b0cfa8b508aef75e92071d1e8&photoset_id=72157628222699421&user_id=68940242@N06&extras=url_o&format=json&nojsoncallback=1

var userId = "68940242@N06";
var apiKey = "3bf1ac3b0cfa8b508aef75e92071d1e8";
var photoSetId = "72157628222699421";
var method = "flickr.photosets.getPhotos";
var limit = 10;
var photosUrl =
  "https://api.flickr.com/services/rest/?method=" +
  method +
  "&api_key=" +
  apiKey +
  "&photoset_id=" +
  photoSetId +
  "&user_id=" +
  userId +
  "&extras=url_o&format=json&nojsoncallback=1&per_page=" +
  limit;

var photos;

$.ajax({
  url: photosUrl,
  context: document.body
}).done(function(data) {
  photos = data.photoset.photo;

  setupSlider();
  setupEvents();
});

function setupSlider() {
  var files;
  var $slider = $(".slider");

  photos.map(photo => {
    var $slide = $("<div>", { class: "slide" });
    var $img = $("<img>", { class: "slide-image", src: photo.url_o });
    var $bullet = $("<div>", { class: "bullet" });

    // Set up slides
    $slider.append($slide);
    $slide.append($img);
    
    // Set up bullets
    $(".bullets").append($bullet);
  });
  
  $(".bullet:first-child").addClass("selected"); // Sets first bullet as selected bullet
}

var slideIndex = 1, // Sets index number for first slide (+1 for every slide thereafter)
  slideChangeSpeed = 5000, // Time between slide change in milliseconds
  slideFadeIn = 1400, // Fade in time in milliseconds
  slideFadeOut = 1400; // Fade out time in milliseconds

// Start slideshow
var beginSlideShow = setInterval(function() {
  var $slider = $(".slider");
  var $sliderChildren = $slider.children();

  $sliderChildren
    .fadeOut(slideFadeOut)
    .eq(slideIndex)
    .fadeIn(slideFadeIn);
  $(".bullet")
    .eq(slideIndex)
    .addClass("selected")
    .siblings()
    .removeClass("selected");
  slideIndex++;
  if (slideIndex === $sliderChildren.length) {
    slideIndex = 0;
  }
}, slideChangeSpeed);

// Show specific slide based on bullet choice and stop slideshow
function setupEvents() {
  var $slider = $(".slider");
  var $sliderChildren = $slider.children();

  $(".bullet").click(function() {
    $this = $(this);

    clearInterval(beginSlideShow);
    $sliderChildren.fadeOut(slideFadeOut); // Fades out all slides
    $sliderChildren.eq($(this).index()).fadeIn(slideFadeIn); // Uses the selected bullet's index to fade in the corresponding slide
    $(this)
      .addClass("selected")
      .siblings()
      .removeClass("selected"); // Sets all bullets to unselected, then sets the selected bullet to selected
  });
}