not ready

// SETTINGS
slider_settings = {
  verbose: true,
  verbose_name: "DOBBY",
  navigation: true,
  bullets: true
}

// post DOM load stuff
$(document).ready(function(){

  // gather all images
  var imageList = $("[data-what='slider-image']");


  // lets design some stuff
  vc__slider_generateCss();

  // get listeners
  $("[data-what='slider-controller']").click(function(e){
    var direction = $(this).data("direction");
    var animation = $("[data-what='slider-container']").data("animation");
    var fadeTime = $("[data-what='slider-container']").data("fadetime");
    vc__slider_move(direction, animation, fadeTime);

    // lets look for existant Interval
    // if there is one, lets kill it and restart
    // We also need to check the origin of the event,
    // if the event generated is "originalEvent" then we have a manual click.
    // we dont want to mess with the interval if the click is generated by the interval :)
    if (autoInterval && e["originalEvent"]){
      verbose("Manually triggered click. Automatically swipe timer has been restarted");
      clearInterval(autoInterval);
      vc_slider_autoScroll();
    }
  });

  vc_slider_autoScroll();

  vc_slider_bullets(slider_settings.bullets, imageList);

});


// NOTE: FUNCTIONS AREA
// ########################################################

// @params => [status ('bullet' property from  slider_settings), imageList]
// Generate bullets if the setting is true
function vc_slider_bullets(status, imageList){

  // first we need to check setting status.
  // if false.. return
  if (!status) { return false; }

  // validations are over > Proceed
  // collect DOM references
  var sliderWrapper = $(".slider__wrapper");
  var imageWidth = $("[data-what='slider-image']").width();
  // prepare injection elements
  var bulletsContainer_model = `
    <div
      class="slider__bullets-container"
      data-what="slider-bullet-container"
      style= "
        width: ${imageWidth}px;
        margin: auto;
        height: 15px;
        text-align: center;
      "
    >
    </div>
  `


  // Inject bullet points container markup into the DOM
  sliderWrapper.append(bulletsContainer_model);
  // collect new element info
  var bulletsContainer = $("[data-what='slider-bullet-container']");
  // now we need a singleBullet_model per image...
  // lets loop
  for (x = 0; x < imageList.length; x++) {
    // lets create the model
    // I should do this outside of this loop for memory optimization.
    // but should work just fine even on a potato computer
    var singleBullet_model = `
      <div
        class="slider__bullets"
        data-what="slider-bullet"
        data-index="${x}"
        style = "
          display: inline-block;
          height: 15px;
          width: 15px;
          border-radius: 50%;
          opacity: 0.1;
          background-color: rgba(0, 0, 0, 1);
        "
      >
      </div>
    `
    // then we append the model
    bulletsContainer.append(singleBullet_model)
  }




}


// @params => NONE;
// Generate stylesheet to handle images and stuff
function vc__slider_generateCss(){
  $("[data-what='slider-image']").hide();
  $(".vc-slider__image").css("height", "100%");
  $("[data-slider-index='0']").css("display", "initial");

  // validate navigation option from init
  // if false send the controllers behind :)
  // for now i still need them as the auto-nav works through the click event
  if (!slider_settings.navigation) {
    // verbose it out
    verbose("Slider navigation is deactivated");
    // adjust css
    $(".slider__controllers").css({
      "width": "0",
      "left": "-100px",
      "z-index": "-10"
    });

  }

  return;
}

// @params => [direction, animation, fadeTime]
// Will perform the slider animation according to picked animation option
function vc__slider_move(direction, animation, fadeTime){
  var sliderWrapper = $(".slider__wrapper");
  var sliderContainer = $("[data-what='slider-container']");
  var currentSlide = sliderContainer.data("activeslide");
  var preAnimSlide = currentSlide;
  var totalSlides = $("[data-what='slider-image']").length;
  var animationDelay = fadeTime;
  // accepted Animation effects
  var acceptedAnimations = ["opacity"];

  // Animation validation
  if (animation != acceptedAnimations[0]){
    verbose("Animation not recognized");
    return false;
  }

  // SWITCH Case for accepted animations
  var animation_off_options = null;
  var animation_on_options = null;
  switch (animation) {
    case "opacity":
      animation_off_options = {opacity: 0};
      animation_on_options = {opacity: 1};
      break;
    default:
      verbose("Animation not found on switch case");
  }

  // SWITCH Case for direction
  var nextSlide = null;

  switch (direction) {
    case "left":
      // NOTE: Validate slider min limit.
      // If limit is hit, display last slider from the array
      if (eval(currentSlide - 1) < 0){
        currentSlide = eval(totalSlides - 1);
      }
      else{
        currentSlide = eval(currentSlide - 1);
      }

      // Now we need to mark the Active Slider
      sliderWrapper.data("activeslide", currentSlide);
      break;

    case "right":
      // NOTE: validate slider max limit.
      // If limit is hit, display the first slider from the array

      if (eval(currentSlide + 1) > eval(totalSlides - 1)){
        currentSlide = 0;
      }
      else {
        currentSlide = eval(currentSlide + 1);
      }

      // Now we need to mark the Active Slider
      sliderWrapper.data("activeslide", currentSlide);
      break;

    default:
      verbose("Direction case scenario has bugged its brains out.");
  }

  // NOTE: Time to perform the animation

  // Remove & Animate old slide
  $(`[data-slider-index=${preAnimSlide}]`).animate(animation_off_options, animationDelay, function(){
    // hide old slide
    $(this).hide();
    // inject new slide with opacity 0
    $(`[data-slider-index=${currentSlide}]`).css("opacity", "0");
    $(`[data-slider-index=${currentSlide}]`).show();
    // display and animate new slider
    $(`[data-slider-index=${currentSlide}]`).animate(animation_on_options, animationDelay, function(){
      // last animation concludes
      verbose("Slider changed. New slide displayed is: " + currentSlide);
    })
  })

  return;
}

// @params = NONE;
// Defines interval to auto swipe the slides
function vc_slider_autoScroll(){
  var sliderWrapper = $(".slider__wrapper");
  // lets validate if the autoscroll attribute is on
  if (!sliderWrapper.data("auto")){
    return false;
  }

  // validation is over
  var timer = Number(sliderWrapper.data("autotimer"));
  autoInterval = setInterval(function(){
    $("[data-direction='right']").click();
  }, timer);

  return;
}

// @params = [string] > Verbose log text
// If activated, prints output into dev console.
function verbose(string){

  // validate verbose settings
  if (!slider_settings.verbose){
    return false;
  }

  var verboseInit = slider_settings.verbose_name + " SAYS >> ";
  console.log(verboseInit + " " + string);

}