$(document).ready(function() {

  $(".projecttext").click(function(){
    $("#projecttext").fadeToggle(500);
  });

  $("#cross").click(function(){
    $("#projecttext").fadeOut(300);
  });


  // 2 variabelen: een voor de totale aantal images en een voor een start positie
  var totalImages = $('.slide').length;
  var currentPosition = 1;

  function controlImages(step) {
    var images = $('.slide');
    var visibleImage; //-> 1

    // binnen deze loop kan je gaan tellen/ bijhouden wat je positie (counter) is
    // je gebruikt het nu ook al om 'onzichtbaar' je counter bij te houden (welke image toon ik)
    for(var i = 0; i < images.length; i++) {
      if($(images[i]).hasClass('active')) {
        $(images[i]).removeClass('active');
        visibleImage = i + step;
        currentPosition = currentPosition + step;
      }
      if (visibleImage === images.length) {
        visibleImage = 0;
        currentPosition = 1;
      } else if (visibleImage < 0) {
        visibleImage = images.length - 1;
        currentPosition = images.length;
      }
    }

    // na het bepalen van je positie kan je dit meteen wegschrijven naar je scherm.
    $("#currentcount").text(currentPosition);
    $(images[visibleImage]).addClass('active');
  }

  function nextImage() {
    controlImages(1);
  }

  function prevImage() {
    controlImages(-1)
  }

  $("#next").click(function(){
    controlImages(1)
  });

  $("#prev").click(function(){
    controlImages(-1)
  });

  // eenmalig start waardes schrijven
  $( "#currentcount" ).text(currentPosition);
  $( "#totalcount" ).text(totalImages);

});