$(document).ready(function() {
  $('body#ledenlijst h3').click( function(e) {
    $(this).next('p').slideToggle('slow', function() { $(this).prev('h3').toggleClass('down') } );
  });
  fotos_init();
});

var alles = [];
var volgn = [];
var posit = [];
var intervalID;

function fotos_init() {
  // verzamel alle gebruikte foto's
  var shown = [];
  $('#fotos img').each( function() {
    var src = $(this).attr('src').replace(/\/foto\/vierkant\//, '');
    shown.push(src);
  });
  
  // maak array met alle nog niet gebruikte foto's
  $('#allefotos p').each( function() {
    var src = $(this).text(); 
    if ($.inArray(src, shown) == -1)
      alles.push(src);
  });
  alles.sort(function() {return 0.5 - Math.random()}); // make random order

  // maak array met positie en parent van ieder van de 10 foto's  
  for (var i=0; i<10; i++) {
    var img = $('#fotos img:eq('+i+')');
    var offset = img.position();
    offset.parent = img.parent();
    posit.push(offset);
  }
  intervalID = setInterval(foto_change, 4000);
}

function foto_change() {
  if (volgn.length == 0) {
    volgn = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    volgn.sort(function() {return 0.5 - Math.random()}); // make random order
  }
  if (alles.length == 0) {
    clearInterval(intervalID);
    return;
  }
  var nr = volgn.pop();
  var img = $('<img class="change" src="/foto/vierkant/' + alles.pop() + '" width="100" height="100"/>').css('top', posit[nr].top).hide();
  posit[nr].parent.append(img.fadeIn(1000));
}