/*
  slideshow
  
  javascript:
    $('div.slideshow').slideshow();
    
  styles:
    div.slideshow { position:relative }
    div.slideshow img { position:absolute; top:0; left:0; z-index:8 }
    div.slideshow img.bovenop   { z-index:10 }
    div.slideshow img.erachter  { z-index:9 }
    div.slideshow div.buttons   { position:absolute; left:x; bottom:y }
    div.slideshow div.buttons a { display:inline-block; width:10px; height:10px; background:url(../gfx/xxx.gif) }

  xml:
    <slideshow>
      [WebEtui::thumbs(album:album, desc_class:acties)]
    </slideshow>
  
  html:
    <div class="slideshow">
      <img src="foto/album/foto1.jpg"/>
      <img src="foto/album/foto2.jpg"/>
      <img src="foto/album/foto3.jpg"/>
      ..
    </div>
*/

(function($) {
  $.fn.slideshow = function(options) {
    var settings = $.extend({
      intervalTime : 5000,
      fadingTime   : 1000,
      initialDelay : 0,
      description  : null,
      slide_cb     : function() { },
      bullets      : false,
      arrows       : false
    }, options || {});
    
    return this.each(function() {
      var obj = this;
      var title = $('img:eq(0)', this).addClass('bovenop').attr('title');
      if (settings.description && title != "") {
        $(settings.description).children(':contains(' + title + ')').addClass('bovenop');
      }
      if (settings.bullets) {
        var bullets = $('<div class="bullets"/>');
        for(var i = 0; i < $('img', this).length; i++) {
          bullets.append('<a href="#">&nbsp;</a>');
        }
        $(obj).append(bullets);
        $('a', bullets).click(function() {
          obj.stopped = true;
          obj.nr = $('a', bullets).index(this);
          clearInterval(obj.intervalID);
          slide();
          return false;
        });
      }
      if (settings.arrows) {
        // maak de knoppen links en rechts aan
        var arrows =  $('<div class="arrows"/>');
        arrows.append('<a href="#" class="left">&nbsp;</a>')
        arrows.append('<a href="#" class="right">&nbsp;</a>')
        $(obj).append(arrows);
        $('a', arrows).click(function() {
          var bovenop_img = $('img.bovenop', obj);
          var next_img;
          if ($(this).hasClass('left')) {
            next_img = bovenop_img.prev('img').length ? bovenop_img.prev('img') : $('img:last', obj);
          } else {
            next_img = bovenop_img.next('img').length ? bovenop_img.next('img') : $('img:first', obj);
          }
          obj.nr = $('img', obj).index(next_img);
          obj.stopped = true;
          clearInterval(obj.intervalID);
          slide();
          return false;
        });
      }
      function slide() {
        var bovenop = $('img.bovenop', obj);
        if ( bovenop.length == 0 ) bovenop = $('img:last', obj);
        var next;
        var inr;
        if (obj.stopped) {
          next = $('img:eq('+obj.nr+')', obj);
          inr = obj.nr;
        } else {
          next = bovenop.next('img').length ? bovenop.next('img')  : $('img:first', obj);
          inr = $('img', obj).index(next);
        }
        bovenop.addClass('erachter');
        
        if (settings.description && next.attr('title') != "") {
          $(settings.description, obj).children().removeClass('bovenop');
          $(settings.description, obj).children(':contains(' + next.attr('title') + ')').addClass('bovenop');
        }
        
        next.css({opacity: 0.0})
          .addClass('bovenop')
          .animate({opacity: 1.0}, settings.fadingTime, function() {
              bovenop.removeClass('bovenop erachter');
          });
        $('div.bullets a:eq('+inr+')', obj).addClass('active').siblings('a').removeClass('active');
        settings.slide_cb(inr);
      }
      $('div.bullets a:eq(0)', obj).addClass('active').siblings('a').removeClass('active');
      settings.slide_cb(0);
      if (settings.initialDelay) {
        function startDelay() {
          obj.intervalID = setInterval( slide, settings.intervalTime );
          clearInterval(obj.initialID);
        }
        obj.initialID = setInterval(startDelay, settings.initialDelay);
      } else {
        obj.intervalID = setInterval( slide, settings.intervalTime );
      }
      obj.show_initialized = true;
    });
    
  }
  
  $.fn.slide_stop = function() {
    return this.each(function() {
      clearInterval(this.intervalID);
    });
  }
})(jQuery);