var currentSlide = 0;       // Startpoint of slide show
var maxSlides = 4;          // Number of slides
var slideInterval = 10000;  // Interval for automatic slideshow
var fadeInterval = 1000;    // Interval for fade effect

var intervalID;

// Automatic sliding
intervalID = window.setInterval(nextSlide, slideInterval);

function nextSlide()
{
  // Goto next slide and show it
  currentSlide = (currentSlide+1)%maxSlides;
  showCurrentSlide();
}

function gotoSlide(n)
{
  // Check if given slide value is valid
  if (n >= 0 && n < maxSlides)
  {
    // Show new current slide
    currentSlide = n;
    showCurrentSlide();

    // Reset timer for automatic sliding
    window.clearInterval(intervalID)
    intervalID = window.setInterval(nextSlide, slideInterval); // HINT: Commenting this out makes the automatic slideshow stop when a button is clicked.
  }
}

function showCurrentSlide()
{
  // Fade out other slides
  for (var i=0;i<maxSlides;i++)
  {
    if (i != currentSlide)
      $("div.slider"+(i+1)).fadeOut(fadeInterval);
  }

  // Fade in current slide
  $("div.slider"+(currentSlide+1)).fadeIn(fadeInterval);
}

// Go through the button elements of the document and attach event handler
$(document).ready(function(){
  for (var i=0;i<maxSlides;i++)
    $("a.sb"+(i+1)).click(function(value) { return function() { gotoSlide(value); } }(i));
});