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

  function fotospecial(nr) {
    var bovenop = $('div.fotospecial div.large img.bovenop').addClass('erachter');
    $('div.fotospecial div.large img').eq(nr).hide().addClass('bovenop').fadeIn(function() {
      bovenop.removeClass('bovenop erachter');
    });
    $('div.fotospecial div.caption p').eq(nr).addClass('bovenop').siblings('p').removeClass('bovenop');
  }

  $('div.fotospecial div.small img').mouseover(function() { fotospecial($(this).index() + 1) });
  $('div.fotospecial div.small img').mouseout(function()  { fotospecial(0) });
});

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));
}