/*
  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) {
    // ===========================================
    // = options from javascript call .slideshow =
    // ===========================================
    var settings = $.extend({
      interval     : 5000,           /* tijd tussen slides    */
      speed        : 1000,           /* tijd van faden/sliden */
      delay        : 0,              /* voordat sliden begint */
      move         : 'fade',
      push         : true,
      description  : null,
      slide_cb     : function() { },
      bullets      : false,
      arrows       : false,
      random       : false,
      autostart    : true,
      cleardesc    : true
    }, options || {});
    
    return this.each(function() {
      var obj = this;
      
      if ($(obj).attr('initialized')) {
        return obj;
      }
      $(obj).attr('initialized', true);

      // =========================================
      // = overide options with options from xml =
      // =========================================
      for (var opt in settings) {
        if ($(obj).attr(opt))
          settings[opt] = $(obj).attr(opt);
      }
      
      // =========================================
      // = hoogte en breedte bepalen             =
      // = kies meestvoorkomende hoogte          =
      // = bepaal totale breedte voor move:slide =
      // =========================================
      // werkt niet in IE omdat img nog niet geladen is,
      // oplossing ligt in img.load() eventhandler of
      // width en height alleen zetten via argument
      /*
      var heightcnt  = [];
      var widthcnt   = [];
      $('img', obj).each(function() {
        var height = $(this).height();
        debug.log('src = ' + $(this).attr('src') + ', height = ' + height);
        var cnt = heightcnt['h' + height] || 0;
        heightcnt['h' + height] = cnt + 1;
        
        var width = $(this).width();
        var cnt = widthcnt['w' + width] || 0;
        widthcnt['w' + width] = cnt + 1;
        
        var url = $(this).attr('url');
        if (url) {
          $(this).click(function() {
            location = url;
            return false;
          });
        }
      });
      var cnt = 0;
      var height;
      for (var h in heightcnt) {
        if (heightcnt[h] > cnt) {
          cnt = heightcnt[h];
          var ht = parseInt(h.substr(1))
          // debug.log(ht);
          if (ht > 0)
            height = parseInt(ht);
        }
      }
      var cnt = 0;
      var width;
      for (var w in widthcnt) {
        if (widthcnt[w] > cnt) {
          cnt = widthcnt[w];
          width = parseInt(parseInt(w.substr(1)));
        }
      }
      
      if (height && width) {
        $(obj).height(height);
        $(obj).width(width);
      }
      */
      var width = $(obj).width();
      var height = $(obj).height();
      
      if (settings.first) {
        // settings.first.addClass('bovenop');
        $('img[src$="' + settings.first + '"]', obj).addClass('bovenop');
        // debug.log(settings.first);
        // debug.log('length = ' + $('img[src$="/foto/portfolio/huiselijkgeweld-home.jpg"]', obj).length);
      } else if (settings.random) {
        var n = $('img', obj).length;
        var i = Math.floor(Math.random()*n);
        $('img', obj).eq(i).addClass('bovenop');
      } else if ($('img.bovenop', obj).length == 0) {
        $('img:eq(0)', obj).addClass('bovenop');
      }

      var title = $('img.bovenop', obj).attr('title');
      if (title != "") {
        var i = $('img', obj).index($('img.bovenop', obj));
        $('div.slideshow_desc ul').children().eq(i).addClass('bovenop');
        // $(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('fade');
          return false;
        });
      }
      if (settings.arrows) {
        // maak de knoppen links en rechts aan
        var arrows =  $('<div class="arrows slideshow_buttons"/>');
        arrows.append('<a href="#" class="left">&nbsp;</a>')
        arrows.append('<a href="#" class="right">&nbsp;</a>')
        $(obj).after(arrows);
        $('a.left, a.right', arrows).click(function() {
          var bovenop_img = $('img.bovenop', obj);
          var next_img;
          var move = (settings.move == 'left' ? 'left' : 'fade');
          var speed = 0;
          if ($(this).hasClass('left')) {
            next_img = bovenop_img.prev('img').length ? bovenop_img.prev('img') : $('img:last', obj);
            if (settings.move == 'left') {
              move = 'right';
              speed = parseInt(settings.speed);
            }
          } 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;
          slide(move, speed, next_img);
          clearInterval(obj.intervalID);
          if ($('a.pause', arrows).length) {
            $('a.pause', arrows).click();
          }
          return false;
        });
      }
      if (!settings.autostart || settings.autostart == 'false') {
        var play    = $('<a href="#" class="play">afspelen</a>');
        play.click(function() {
          if (play.is('.play')) {
            slide(settings.move);
            obj.intervalID = setInterval( function() { slide(settings.move) }, settings.interval );
            play.attr('class', 'pause').text('pauze');
          } else {
            clearInterval(obj.intervalID);
            play.attr('class', 'play').text('afspelen');
          }
        })
        $('div.slideshow_buttons').append(play);
        var i = $('img', obj).index($('img.bovenop', obj)) + 1;
        var n = $('img', obj).length;
        var teller = $('<div class="slideshow_numbers"><span>' + i + '</span>' + ' van ' + n + '</div>');
        $('div.slideshow_buttons').append(teller);
      }
      
      function slide(move, speed, next) {
        if (!move)
          move = settings.move;
        
        var bovenop = $('img.bovenop', obj);
        // debug.log('inr = ' + $('img', obj).index(bovenop));
        if ( bovenop.length == 0 ) bovenop = $('img:last', obj);
        var inr;
        // if (obj.stopped) {
        //   next = $('img:eq('+obj.nr+')', obj);
        //   inr = obj.nr;
        // } else {

        if (!speed || speed === undefined) 
          speed = parseInt(settings.speed);
          
        if (!next)
          next = bovenop.next('img').length ? bovenop.next('img')  : $('img:first', obj);
          
        inr = $('img', obj).index(next);
        // }
        
        var start;
        var end   = { left:0, top:0, opacity:1.0 }
        
        if (move == 'left') {
          start = { left:width }
        } else if (move == 'right') {
          start = { left: -width }
        } else if (move == 'down') {
          start = { top: -height }
        } else if (move == 'up') {
          start = { top:height }
        } else if (move == 'leftup') {
          start = { left:width, top:height }
        } else if (move == 'rightup') {
          start = { left:-width, top:height }
        } else if (move == 'leftdown') {
          start = { left:width, top:-height }
        } else if (move == 'rightdown') {
          start = { left:-width, top:-height }
        } else {                    // fade
          start = { opacity:0.0 }
        }
        
        bovenop.addClass('erachter');
        next.css(start).addClass('bovenop');
        if (settings.cleardesc)
          $('div.slideshow_desc ul').children().hide().removeClass('bovenop');
        function after_animate() {
          bovenop.removeClass('bovenop erachter');
          if (next.attr('title') != "") {
            $('div.slideshow_desc ul').children().hide().removeClass('bovenop');
            $('div.slideshow_desc ul').children().eq(inr).show().addClass('bovenop');
          }
        }
        if (speed > 0) {
          next.animate(end, speed, 'swing', after_animate);
        } else {
          next.css(end);
          after_animate();
        }

        if (settings.push != 'false') {
          var away = null;
          if (move == 'left') {
            away = { left:-width }
          } else if (move == 'right') {
            away = { left: width }
          } else if (move == 'down') {
            away = { top: height }
          } else if (move == 'up') {
            away = { top:-height }
          }
          if (away)
            bovenop.animate(away, parseInt(settings.speed));
        }
        
        $('div.bullets a:eq('+inr+')', obj).addClass('active').siblings('a').removeClass('active');
        $('div.slideshow_numbers span').text(inr+1);
        settings.slide_cb(inr);
      }
      
      if (settings.autostart && settings.autostart != 'false') {
        $('div.bullets a:eq(0)', obj).addClass('active').siblings('a').removeClass('active');
        settings.slide_cb(0);
        if (settings.delay) {
          function startDelay() {
            obj.intervalID = setInterval( function() { slide(settings.move) }, settings.interval );
            clearInterval(obj.initialID);
          }
          obj.initialID = setInterval(startDelay, settings.delay);
        } else {
          obj.intervalID = setInterval( function() { slide(settings.move) }, settings.interval );
        }
      }
      obj.show_initialized = true;
    });
    
  }
  
  $.fn.slide_stop = function() {
    return this.each(function() {
      clearInterval(this.intervalID);
    });
  }
})(jQuery);