$(document).ready(function() {  
  $('div.slideshow').append('<div id="slide_teller"></div>');
  
  $('div.slideshow').slideshow({
    intervalTime: 4000, 
    fadingTime  : 1000,
    bullets: false,
    arrows: true,
    slide_cb: function(nr) {
      nr++;
      var img_count = $('div.slideshow img').length;
      $('div.slideshow div#slide_teller').text(nr + '/' + img_count);
    }
  });
  
  
  // ==============
  // = ledenlijst =
  // ==============
  function ledennaam(li) {
    var all   = $(li).text();
    var adres = $('ul', li).text();
    var name = all.substr(0, all.length - adres.length).replace(/\s+$/, '');
    return name;
  }
  
  $('div.ledenlijst>ul>li').click(function() {
    if ($(this).hasClass('expanded')) {
      var li = this;
      $('ul', li).slideUp(function() { $(li).removeClass('expanded') });
      var name = ledennaam(this);
      $('div.kaart a:contains(' + name + ')').removeClass('selected2');
      
    } else {
      $(this).addClass('expanded').siblings('li').each(function() {
        var li = this;
        $('ul', li).slideUp(function() { $(li).removeClass('expanded') });
      });
      $('ul', this).slideDown();
      var name = ledennaam(this);
      $('div.kaart a:contains(' + name + ')').addClass('selected2').siblings('a').removeClass('selected2 selected');
    }
  });
  
  $('div.ledenlijst>ul>li').hover(
    function() {
      var name = ledennaam(this);
      $('div.kaart a:contains(' + name + ')').addClass('selected');
    },
    function() {
      if (!$(this).hasClass('expanded')) {
        var name = ledennaam(this);
        $('div.kaart a:contains(' + name + ')').removeClass('selected');
      }
    }
  );
  
  
  $('div.kaart a').each(function() {
    var px = $(this).attr('px');
    var py = $(this).attr('py');
    $(this).css({left:px+'px', top:py+'px'});
  });
  
  
  $('div.kaart a').click(function() {
    var name = $(this).text();
    $('div.ledenlijst>ul>li:contains(' + name + ')').addClass('expanded').find('ul').slideDown();
    $('div.ledenlijst>ul>li:contains(' + name + ')').siblings('li').each(function() {
      var li = this;
      $('ul', li).slideUp(function() { $(li).removeClass('expanded') });
    });
    $(this).siblings('a').removeClass('selected2 selected');
    $(this).addClass('expanded').siblings('a').removeClass('expanded')
  });


  $('div.kaart a').hover(
    function() {
      $(this).addClass('selected');
      var name = $(this).text();
      $('div.ledenlijst>ul>li:contains(' + name + ')').addClass('selected').siblings('li').removeClass('selected');
    },
    function () {
      if (!$(this).hasClass('expanded')) {
        $(this).removeClass('selected');
        var name = $(this).text();
        $('div.ledenlijst>ul>li:contains(' + name + ')').removeClass('selected');
      }
    }
  );
  
  // if ($('div.ledenlijst>ul>li').hasClass('expanded')) {
  //   var name = $(this).text().split('\n');
  //   console.log(name);
  // }

  
  
});