// JavaScript Document
(function($)
{
   $.fn.funImageSlide = function(_options)
   {
      var options = $.extend({
         slideWidth: 100,
         slideHeight: 100,
         pauseTime: 4000,
         fadeDuration: 1000,
         slidesContainerClassName: 'slides',
         slideClassName: 'slide',
         ShowSimpleNaviagtion : false,
         slides: []
      }, _options);
      //check sommige options
      if (options.slideWidth < 0)options.slideWidth *= -1;
      if (options.slideHeight < 0)options.slideHeight *= -1;
      if (options.pauseTime < 0)options.pauseTime *= -1;
      if (options.fadeDuration < 0)options.fadeDuration *= -1;
      if (options.pauseTime < options.fadeDuration)
      {
         var dumD = options.pauseTime;
         options.pauseTime = options.fadeDuration;
         options.fadeDuration = options.pauseTime;
      }


      //
      $this = $(this);
      $this.css({'background':'url(content/common/fun-image-slide/gfx/ajax-loader.gif) no-repeat center center'});
      $slidesContainers = $('.' + options.slidesContainerClassName);

      var thumbsArray = new Array();
      var $thumbs = false;
      if ($slidesContainers.length > 0)
      {

         $slidesContainers.each(function(num1, el_slides)
         {
            options.slides[num1] = new Array();
            thumbsArray[num1] = $('.thumb', el_slides).clone();

            $('a[rel=slide]', this).each(function(num, el)
            {
               options.slides[num1][num] = $(el).attr('href');
            });
            thumbsArray[num1].attr('id', 'thumb_' + num1);
            //thumbsArray[num1].css('left', (8 + num1 * 242));
         });
      }
      else
      {

         options.slides[0] = new Array();
         thumbsArray[0] = $('.thumb', this).clone();

         $('a[rel=slide]', this).each(function(num, el)
         {

            options.slides[0][num] = $(el).attr('href');
         });
         if (thumbsArray[0].length > 0)
         {
            thumbsArray[0].attr('id', 'thumb_' + 0);
            thumbsArray[0].css('left', 10);
         }
      }

      var thumbWidth = $('.thumb', this).outerWidth(true);
      //Voor de zekerheid funImage = $this leegmaken
      $this.empty();
      $this.parent().append('<div id="thumbholderHover" class="thumbholderHover"></div>');
      $('.thumbholderHover').append('<div class="thumbholder"><div class="thumbs"></div></div>');
      /*$('.thumbholderHover').append('<div class="thumbprev"></div><div class="thumbnext"></div>');*/

      //maak thumbholder zo breed als er thumbs zijn maal de breedte van de thumb met margins

      var thumbholderwidth = thumbsArray.length * thumbWidth;
      $('.thumbholderHover').css({'width':options.slideWidth + 'px'});
      $('.thumbholder').css({'opacity':'0', 'width': thumbholderwidth + 'px'});
      for (var ti = 0; ti < thumbsArray.length; ti++)
      {

         $('.thumbs').append(thumbsArray[ti]);
      }
      /*
       hover mouseover mouseout config
       $("ul li").hoverIntent({
       *	sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
       *	interval: 100,   // number = milliseconds of polling interval
       *	over: showNav,  // function = onMouseOver callback (required)
       *	timeout: 0,   // number = milliseconds delay before onMouseOut function call
       *	out: hideNav    // function = onMouseOut callback (required)
       * });

       */
      var thumbSliderTimerID = null;//
      var thumbSliderTargetX = 0;
      function animateThumbSlide(event)
      {

         var divX = (thumbSliderTargetX - parseInt($('.thumbholder').css('left'))) / 25;
         var leftX = thumbSliderTargetX - divX;

         trace("Math.abs(divX) = " + Math.abs(divX))
         if (!(divX > -.05 && divX < .05))
         {
            //trace("Math.abs(divX) = "+Math.abs(divX)+"<br />");
            $('.thumbholder').css({'left':leftX});

         }
         else
         {
            killThumbSliderTimer();
            $('.thumbholder').css({'left':thumbSliderTargetX});
         }
      }

      function killThumbSliderTimer()
      {
         clearInterval(thumbSliderTimerID);
         thumbSliderTimerID = null;
         //trace("thumbSliderTargetX = "+thumbSliderTargetX);
      }
      // variabelen nodig om keurig te kunnen schuiven
      var thumbHolderHoverOuterWidth = $('.thumbholderHover').outerWidth(true);
      //helemaal links en rechts krijgt een margin, muisbeweging hierin heeft geen invloed op slide
      var moveMargin = 50;
      var moveMinX = moveMargin;
      var moveMaxX = thumbHolderHoverOuterWidth - moveMargin;
      var moveWidth = $('.thumbholder').outerWidth(true) - (thumbHolderHoverOuterWidth);
      //als thumbHolder is kleiner dan breedte stage, zet breedte 100% , stylish
      if (moveWidth <= 0)$('.thumbholder').css({'width':thumbHolderHoverOuterWidth})
      var moveXWidth = (thumbHolderHoverOuterWidth - moveMargin * 2)
      var thumbHolderMaxX = 0;
      var thumbHolderMinX = (thumbHolderHoverOuterWidth) - $('.thumbholder').outerWidth(true);
      function showNav()
      {
         $('.thumbholder').animate({
            opacity: 1,
            top: '0px'
         }, 200, function()
         {
            // Animation complete.
         });
         //als thumbHolder is breder dan de stage, dan moet er geslide worden
         if (moveWidth > 0)
         {
            $(this).mousemove(function(event)
            {
               var iks = event.pageX - $(this).offset().left;
               if (iks > moveMinX && iks < moveMaxX)
               {
                  iks -= moveMargin;
                  thumbSliderTargetX = (moveWidth * iks) / moveXWidth;
                  $('.thumbholder').css({'left':-thumbSliderTargetX});
               }
               else
               {
                  if (iks < moveMinX)
                  {
                     $('.thumbholder').css({'left':thumbHolderMaxX});
                  }
                  else
                  {
                     $('.thumbholder').css({'left':thumbHolderMinX});
                  }
               }
            });
         }

      }

      function hideNav()
      {
         $('.thumbholder').animate({
            opacity: 1,
            top: '100px'
         }, 500, function()
         {
            // Animation complete.
         });
         $(this).mousemove = null;
         //killThumbSliderTimer();
      }


      var hoverConfiguration = {
         sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
         interval: 50,   // number = milliseconds of polling interval
         over: showNav,  // function = onMouseOver callback (required)
         timeout: 2000,   // number = milliseconds delay before onMouseOut function call
         out: hideNav
      }


      //$('.thumbholderHover').hoverIntent(hoverConfiguration);

      //
      $('.thumbholder').css({'opacity':0,'top':0});



         function firstHideNav(){
            $('.thumbholder').animate({
            opacity: 1,
            top: '100px'
          }, 500, function() {
            $('.thumbholderHover').hoverIntent(hoverConfiguration);
          });
         }

      $('.thumbholder').animate({
               opacity: 1
            }, 1000, firstHideNav
          );
      //insert alvast de ul
      if ($('#funImageNavigation').length < 1)
      {
         $this.parent().append("<div id=\"funImageNavigation\"></div>");
      }
      $('#funImageNavigation').append("<ul></ul>");
      $navigation = $('#funImageNavigation ul');
      //welke image staat open
      var openImageNumber = 0;
      //
      var openSlidesNumber = 0;
      //
      var openThumbNumber = 0;
      //welek image stond open
      var lastOpenImageNumber = 0;
      var lastOpenSlidesNumber = 0;
      var slideDiv = $(this);
      var totalSlidesContainers = options.slides.length;

      var txt = "";
      var slideArray = new Array();
      /*		var w=0;
       var h=0;*/
      //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');
      $this.parent().css({'width':options.slideWidth,'height':options.slideHeight});
      //hierna, parent is absolute of relative, dit kind kan absolute gezet worden
      $this.css({'position':'absolute', 'left':0,'top':0,'overflow':'hidden'});
      //creeer een imagecontainer in de body, hierin komen alle images.
      //fadeIn animatie is niet mooi ( haperingen in de fadein ) als er te veel images zitten in één container
      //dus het oevrschot aan images, wat op een bepaald moment niet in hoeft te faden wordt apart in een div gezet
      $('body').append("<div id=\"imagecontainer\" style=\"position: absolute; left: -10000px; top: -10000px;display: none\"></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 slideCounter = 0;
      var fadeInAnimation = false;
      var dumId = "";
      //door de totale aantal slides heen
      //

      for (var j = 0; j < options.slides.length; j++)
      {
         //slideArray[number] wordt array
         slideArray[j] = new Array();
         for (var i = 0; i < options.slides[j].length; i++)
         {
            slideArray[j][i] = new Image();
            // doe er wat mee
            dumId = j + '_' + i;
            $(slideArray[j][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_0')
               {

                  showImageFirstTime(0, 0);
                  openSlidesNumber = 0;
                  openImageNumber = 0;
                  openThumbNumber = 0;
                  if ($thumbs)thumbsArray[0].addClass('thumbactive');
                  $this.css({'background':'none'});
               }
            })
               // if there was an error loading the image, react accordingly
             .error(function (ev)
            {
               var deJ = parseInt($(this).attr('id').split('_')[1]);
               var deI = parseInt($(this).attr('id').split('_')[2]);
               slideArray[deJ][deI] = null;
               /**/
               for (ei in ev)
               {
                  trace(ev[ei])
               }
               //trace("slide "+ev.target+" is null")
            })
               //zet een unieke id, die wordt niet gebruikt, but joe never know
               //.attr('id',('slide_'+slideCounter))
                  .attr('id', ('slide_' + dumId))
               //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[j][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+=slideCounter;
            appendString += (dumId);
            appendString += "\"></a></li>";
            $navigation.append(appendString);
            if (i < 1)$("#funImageNavigation a[name=0_0]").addClass('active');
            slideCounter++;
         }

      }
      //
      var totalSlides = slideArray.length;
      //
      function stopSlide()
      {
         if (!fadeInAnimation)
         {
            killTimer();
         }
      }
      //
      function playSlide()
      {
         if (!fadeInAnimation)
         {
            nextImage();
         }
      }
      //
      function showImageFirstTime(j, number)
      {
         $this.prepend($(slideArray[j][number]));
         //if(totalSlides>1){
         callNextImage();
         //}
      }
      //
      function thumbClick(ev)
      {

         numId = parseInt($(this).parent().attr('id').split('_')[1]);
         killTimer();
         trace("numId = " + numId);
         showImage(numId, 0);


      }
      //
      function funImageNavigationClick()
      {
         if (!fadeInAnimation)
         {
            var name = $(this).attr('name');
            switch (name)
                  {
               case 'prev':
                  prevImage(null);
                  break;
               case 'next':
                  nextImage(null);
                  break;
               default:
                  killTimer();
                  showImage(parseInt(name.split('_')[0]), parseInt(name.split('_')[1]));
            }
         }
      }

      //
      function showImage(j, number)
      {

         if (openSlidesNumber >= 0)
         {
            $(slideArray[openSlidesNumber][openImageNumber]).stop(true, true);
            //de huidige image een lage z-index geven
            $(slideArray[openSlidesNumber][openImageNumber]).css('z-index', minZ);
         }
         //de nieuwe image voorbereiden, opacity op 0, z-index op top
         //checken of het geen error image is = null
         if (slideArray[j][number] == null)
         {
            if (number < slideArray[j].length - 1)number++;
            else if ((j + 1) < slideArray.length - 1)j++;
            else
            {
               j = 0;
               number = 0;
            }
         }
         $(slideArray[j][number]).css({'opacity':0});
         $(slideArray[j][number]).css('z-index', topZ);
         //verplaats image naar de slider container
         $this.prepend($(slideArray[j][number]));
         // start de fade iN, als ie daarmee klaar is naar functie fadeInReady
         $(slideArray[j][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
         $("#funImageNavigation a[name=" + openSlidesNumber + '_' + openImageNumber + "]").removeClass("active");
         if (j != openSlidesNumber && $thumbs)
         {
            thumbsArray[openSlidesNumber].removeClass('thumbactive');
            thumbsArray[j].addClass('thumbactive');
            $('.div_videodescription').html($('.thumbinfocontent',thumbsArray[j]).html());
         }
         lastOpenImageNumber = openImageNumber;
         lastOpenSlidesNumber = openSlidesNumber;
         openImageNumber = number;
         openSlidesNumber = j;

         //navigation de goede li-a op active zetten
         $("#funImageNavigation a[name=" + openSlidesNumber + '_' + openImageNumber + "]").addClass("active");
      }
      //
      function handleNullImage(j, i)
      {
      }
      //
      function fadeInReady()
      {

         //check of er wel meer images zijn anders blijft het hierbij
         if (slideCounter > 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;
      }
      //
      //roep volgende image aan
      //
      function callNextImage()
      {
         killTimer();
         timerId = setTimeout(nextImage, options.pauseTime);
      }
      //
      //zet laatste image die getoond was in imagecontainer
      //
      function removeLastImage()
      {
         if (lastOpenSlidesNumber >= 0)$("#imagecontainer").append($(slideArray[lastOpenSlidesNumber][lastOpenImageNumber]));
      }
      //
      //er is geklikt op vorige
      //
      function prevImage(ev)
      {
         killTimer();
         var totalSlides = slideArray.length;
         //alert(totalSlides);

         var slidesNum = openSlidesNumber;
         var slideNum = openImageNumber;
         //alert("slidesNum = "+slidesNum);
         if (slideNum > 0)
         {
            showImage(slidesNum, slideNum - 1);
         }
         else
         {
            if (slidesNum > 0)
            {
               showImage(slidesNum - 1, slideArray[slidesNum - 1].length - 1);
            }
            else
            {
               showImage(slideArray.length - 1, slideArray[slideArray.length - 1].length - 1);

            }
         }

      }
      //
      function nextImage(ev)
      {
         killTimer();
         var totalSlides = slideArray.length;
         //alert(totalSlides);

         var slidesNum = openSlidesNumber;
         var slideNum = openImageNumber;
         //alert("slidesNum = "+slidesNum);

         if (slideNum < slideArray[slidesNum].length - 1)
         {
            showImage(slidesNum, slideNum + 1);

         }
         else
         {
            if (slidesNum < totalSlides - 1)
            {
               showImage(slidesNum + 1, 0);
            }
            else
            {
               showImage(0, 0);
            }
         }

      }

      //
      function killTimer()
      {
         if (timerId)clearTimeout(timerId);
         timerId = null;
      }
      //
      var orgTxt = "";
      function trace(t)
      {
         if ($('#tracer').length > 0)
         {
            orgTxt = $('#tracer').html();
            $('#tracer').html(t + "<br />" + orgTxt);
         }
      }
      /*
       * Navigatie
       */
      //
      if (thumbsArray[0].length > 0)
      {
         $thumbs = true;

         for (var ti = 0,tii = thumbsArray.length; ti < tii; ti++)
         {
            $('img', thumbsArray[ti]).click(thumbClick);
            $('img', thumbsArray[ti]).css({'cursor':'hand','cursor':'pointer'});
         }
      }
      //als er meer dan één image is moet er genavigeerd kunnen worden
      //een stop play knop boven op de images maken
      if (options.ShowSimpleNaviagtion > 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.
         $("#funImageNavigation a").click(funImageNavigationClick);

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