// JavaScript Document
(function($)
{
   $.fn.nikiImageSlide = function(_options)
   {
      var options = $.extend({
         slideWidth: 100,
         slideHeight: 100,
         pauseTime: 4000,
         fadeDuration: 1000,
         slides: []
      }, _options);
      //check sommige options
      if (options.slideWidth < 0){
         options.slideWidth *= -1;
      }
      if (options.slideHeight < 0){
         options.slideHeight *= -1;
      }
      if (options.pauseTime < options.fadeDuration)
      {
         options.pauseTime = options.fadeDuration;
         options.fadeDuration = options.pauseTime;
      }
      //
      $this = $(this);
      $this.css({'width':options.slideWidth,'height':options.slideHeight});
      if (options.slides.length < 1)
      {
         $('a', this).each(function(num, el)
         {
            options.slides[num] = $(el).attr('href');
         });
      }
      //Voor de zekerheid nikiImage = $this leegmaken
      $this.empty();

      //insert alvast de ul
      if($('#nikiImageNavigation').length<1){
         $this.parent().append("<div id=\"nikiImageNavigation\"></div>");
      }
      $('#nikiImageNavigation').append("<ul></ul>");
      $navigation = $('#nikiImageNavigation ul');
      //welke image staat open
      var openImageNumber = 0;
      //welek image stond open
      var lastOpenImageNumber = 0;
      var totalSlides = options.slides.length;
      var slideArray = new Array();
      /*		var w=0;
       var h=0;*/
//      log('parent position= '+$this.parent().css('position'));
      //zet eventueel, als dat nog niet gedaan is, de css position = relative, voor de parent container
      if (!($this.parent().css('position') == 'absolute' || $this.parent().css('position')=='relative')){
         $this.parent().css('position', 'relative');
      }
      //hierna, parent is absolute of relative, dit kind kan absolute gezet worden
      $this.css({'left':0,'overflow':'hidden'});
      //creeer een imagecontainer in de body, hierin komen alle images.
      //fadeIn animatie is niet mooi als er te veel images zitten in één container
      $('body').append("<div id=\"imagecontainer\" style=\"position: absolute; left: -10000px; top: -10000px;display: none\">dag allemaal dit is de hidden div</div>");
      //top en min Z-index numebr
      var topZ = 100;
      var minZ = 50;
      //er wordt een id voor de TimeOut gezet, zodat deze uitgezet kan worden
      var timerId = null;
      //Is de fadeIn bezig, dan geen next/prev image
      var fadeInAnimation = false;
      //door de totale aantal slides heen
      for (var i = 0; i < totalSlides; i++)
      {
         //slideArray[number] wordt image
         slideArray[i] = new Image();
         // doe er wat mee
         $(slideArray[i])
            // image geladen? initialize
               .load(function ()
         {
            $("#imagecontainer").append($(this));
            $(this).attr('width', options.slideWidth);
            $(this).attr('height', options.slideHeight);
            //als dit de eerste image is, ga naar functie showImageFirstTime
            if ($(this).attr('id') == 'slide_0'){
               showImageFirstTime(0);
            }
            openImageNumber = 0;
         })
            // if there was an error loading the image, react accordingly
               .error(function ()
         {
            // notify the user that the image could not be loaded
         })
            //zet een unieke id, die wordt niet gebruikt, but joe never know
               .attr('id', ('slide_' + i))
            //zet nog wat css
               .css({'position':'absolute','left':0,'top':0,'z-index':'100'})
            // zet de src attribute zodat image gaat laden
               .attr('src', options.slides[i])
         //als er een image is dan is er ook een navigation, later wordt gekeken of er maar één image is
         var appendString = "<li><a name=\"";
         appendString += i;
         appendString += "\"></a></li>";
         $navigation.append(appendString);
         if (i < 1){
            $("#nikiImageNavigation a[name=0]").addClass('active');
         }


      }
      //

      //
      function stopSlide()
      {
         if (!fadeInAnimation)
         {
            killTimer();
         }
      }

      //
      function playSlide()
      {
         if (!fadeInAnimation)
         {
            nextImage();
         }
      }

      //
      function showImageFirstTime(number)
      {
         $this.prepend($(slideArray[number]));
         if (totalSlides > 1)
         {
            callNextImage();
         }
      }

      //
      function nikiImageNavigationClick()
      {
         if (!fadeInAnimation)
         {
            var name = $(this).attr('name');
            switch (name)
                  {
               case 'prev':
                  prevImage(null);
                  break;
               case 'next':
                  nextImage(null);
                  break;
               default:
                  killTimer();
                  showImage(parseInt(name));
            }
         }
      }

      //
      function showImage(number)
      {

         $(slideArray[openImageNumber]).stop(true, true);
         //de huidige image een lage z-index geven
         $(slideArray[openImageNumber]).css('z-index', minZ);
         //de nieuwe image voorbereiden, opacity op 0, z-index op top
         $(slideArray[number]).css({'opacity':0});
         $(slideArray[number]).css('z-index', topZ);
         //verplaats image naar de slider container
         $this.prepend($(slideArray[number]));
         // start de fade iN, als ie daarmee klaar is naar functie fadeInReady
         $(slideArray[number]).animate({'opacity':1}, options.fadeDuration, 'swing', fadeInReady);
         //Er wordt geanimeerd, zet de vlag fadeInAnimation op true;
         fadeInAnimation = true;
         //nu image geladen wordt zet number van slideArray in 'openImageNumber'
         //navigtaion uitzetten van vorige li-a active
         $("#nikiImageNavigation a[name=" + openImageNumber + "]").removeClass("active");
         lastOpenImageNumber = openImageNumber;
         openImageNumber = number;
         //navigation de goede li-a op active zetten
         $("#nikiImageNavigation a[name=" + openImageNumber + "]").addClass("active");
      }

      //
      function fadeInReady()
      {

         //check of er wel meer images zijn anders blijft het hierbij
         if (totalSlides > 1)
         {
            //de vorige slide wordt weer verplaatst naar imagecontainer
            removeLastImage();
            //timer wordt gezet om volgende slide te plaatsen
            callNextImage();
         }
         //animatie is klaar, fadeInAnimation op falkse zetten
         fadeInAnimation = false;
      }

      //
      function callNextImage()
      {
         killTimer();

         timerId = setTimeout(nextImage, options.pauseTime);
      }

      //
      function removeLastImage()
      {
         $("#imagecontainer").append($(slideArray[lastOpenImageNumber]));
      }

      //
      function prevImage(event)
      {
         //mededeling("number in nextImage = "+openImageNumber);
         killTimer();
         if (openImageNumber < 1)
         {
            showImage(totalSlides - 1);
         }
         else
         {
            showImage(openImageNumber - 1);
         }
      }

      //
      function nextImage(event)
      {
         //mededeling("number in nextImage = "+openImageNumber);
         killTimer();
         if (openImageNumber < totalSlides - 1)
         {
            showImage(openImageNumber + 1);
         }
         else
         {
            showImage(0);
         }
      }

      //
      function killTimer()
      {
         if (timerId){
            clearTimeout(timerId);
         }
         timerId = null;
      }

      //
      var orgTxt = "";

      function trace(t)
      {
         //orgTxt=$('#tracer').html();
         $('#tracer').html(t);
      }

      //als er meer dan één image is moet er genavigeerd kunnen worden
      //een stop play knop bovenop de images maken
      if (totalSlides > 1)
      {
         $this.append("<div id=\"id_stopplay\"></div>");
         $('#id_stopplay').css({'position':'absolute','left':0,'top':0,'width':options.slideWidth,'height':options.slideHeight,'z-index':1000,'cursor':'pointer'}).toggle(stopSlide, playSlide);
         //de slideArray = doorlopen, zet next en prev in $navigation
         $navigation.prepend("<li><a name=\"prev\" class=\"prev\"></a>");
         $navigation.append("<li><a name=\"next\" class=\"next\"></a>");
         //de navigation op goede plek zetten.
         $("#nikiImageNavigation a").click(nikiImageNavigationClick);

         //navigation on top
         $("#nikiImageNavigation").css('z-index', 10000);
         $("#nikiImageNavigation").show();
         var w = $navigation.outerWidth();
         var navLeft = options.slideWidth - $navigation.outerWidth();
         var h = $navigation.outerHeight();
         var navTop = options.slideHeight - $navigation.outerHeight();//(true);
         $("#nikiImageNavigation").css({'left':navLeft,'top':navTop,'width':w,'height':h,'display':'block'});
      }
      else
      {
         $("#nikiImageNavigation").hide();
      }
      return $(this);
   };
})(jQuery);