$(document).ready(function() {

  var interval;

  // Javascript is aan, dus activeer de thumbnails
  $('#imgal #listwrapper').css('display', 'block');
  // Hide alle grote afbeeldingen
  $('#imgal #big img').hide();
  $('#imgal #big span').hide();
  // Maar weergeef de eerste toch maar wel
  $('#imgal #big img:first').css('display', 'block');
  $('#imgal #big span:first').css('display', 'block');
  // De eerste thumbnail is dus active
  $('#imgal #list img:first').addClass('active');
  
  if($('#imgal').hasClass('auto')){
    interval = window.setInterval(function() {
      var current = $('#imgal #list img.active');
      current.removeClass('active');
      var index = $('#imgal #list img').index(current.next('img'));
      if(index == -1){
        index = 0;
      }
      $('#imgal #list img:eq('+index+')').addClass('active')
      // Alle big images hidden
      $('#imgal #big img').hide();
      $('#imgal #big span').hide();
      // De big met zelfde id als geklikte thumb moet visible
      $('#imgal #big img:eq('+index+')').css('display', 'block');
      $('#imgal #big span:eq('+index+')').css('display', 'block');
    }, 6000);
  }
    
  // Mouseover event
  $('#imgal #list img').click( function() {
    window.clearInterval(interval);
    // Wat is de index van de thumbnail
    var index = $('#imgal #list img').index($(this));
    // Geen thumbnail meer active
    $('#imgal #list img').removeClass('active');
    // Alle big images hidden
    $('#imgal #big img').hide();
    $('#imgal #big span').hide();
    // De big met zelfde id als geklikte thumb moet visible
    $('#imgal #big img:eq('+index+')').css('display', 'block');
    $('#imgal #big span:eq('+index+')').css('display', 'block');
    // De geklikte is actieve thumb
    $(this).addClass('active');
  });
  
});