$(document).ready(function() {

  // Get our element count.
  var carouselItemCount = $(".carousel-item").length;
  // An index to always know the sliding container position.
  var moveIndex = 0;
  // Always have 3 elements in view.
  var maxMove = carouselItemCount-2;

  // Function to set all elements widths.
  function setWidths(){
    // Get the window witdh
    var WWidth = $(window).width();
    console.log("WWidth: "+WWidth);

    // Are we in a Small device?
    var SM = false;
    if(WWidth<768){
      SM = true;
    }
    // If yes, wewant to show 3 elements anyway,
    // so we can't rely on the .col-sm-2 width
    // because it is equal to 100% of the window.
    if(SM){
      var SM2width = WWidth/4;
    }else{
      var SM2width = $(".col-sm-2").first().outerWidth(true);
    }
    $(".carousel-item").width(SM2width);

    // Get the items widths with and without border/margin
    var carouselItemWidth = $(".carousel-item").width();
    var carouselItemOuterWidth = $(".carousel-item").outerWidth(true);

    // Set carousel item margin (remainder of caroussel-inner - 3* items);
    var carouselInnerVisibleSpaceLeft = $(".carousel-inner").parent("div").innerWidth() - (carouselItemWidth * 3);
    $(".carousel-item").css({"margin": "0 "+carouselInnerVisibleSpaceLeft/8+"px"});

    // Get the new items outer widths (we just changed it)
    var NewCarouselItemOuterWidth = $(".carousel-item").outerWidth(true);

    // Get the items border, as it causes an offset issue.
    var border = parseInt($(".item").css("border"));
    console.log("border: "+border);

    // Set animate postion (needed on resize)
    $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},0);


    // ========== Movements triggered by user

    // LEFT
    $("#left_btn").off('click').on('click', function(e) {

      console.log("Click left");
      moveIndex++;
      if(moveIndex<maxMove){
        $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},800);
      }else{
        console.log("full left reached");
        // Canccel that moveIndex addition.
        moveIndex--;
      }
    });

    // RIGHT
    $("#right_btn").off('click').on('click', function(e) {

      console.log("Click right");
      moveIndex--;
      if(moveIndex>=0){
        $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},800);
      }else{
        console.log("full right reached");
        // Canccel that moveIndex substraction.
        moveIndex++;
      }
    });

  } // setWidths

  // Set all elements width on load and get the carousel item widths needed for movements.
  setWidths();
  // Set all elements width on resize.
  $(window).on("resize", setWidths);


  //===============================
  // DEMO BUTTONS
  $("#seeInner").on("click", function(){
    if( $(".carousel").css("overflow") == "hidden" ){
      $(".carousel").css({"overflow":"visible"});
      $(this).html("Hide carousel overflow");
    }else{
      $(".carousel").css({"overflow":"hidden"});
      $(this).html("See carousel overflow");             
    }
  });
}); // Ready