// JavaScript Document
(function($)
{
   $.fn.funImageSlide = function(_options)
   {
      var options = $.extend({
         slideWidth: 100,
         slideHeight: 100,
         pauseTime: 5000,
         fadeDuration: 1000,
         slidesContainerClassName: 'slides',
         slideClassName: 'slide',
         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);
         }
      }

      //Voor de zekerheid funImage = $this leegmaken
      $this.empty();
      for (var ti = 0; ti < thumbsArray.length; ti++)
      {
         $this.parent().append(thumbsArray[ti]);
      }
      //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':'350'});
      //hierna, parent is absolute of relative, dit kind kan absolute gezet worden
      $this.css({'position':'absolute', 'left':0,'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\"></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', '350');
										 //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');
         }
         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;
      }
      //
      function callNextImage()
      {
         killTimer();
         timerId = setTimeout(nextImage, options.pauseTime);
      }
      //
      function removeLastImage()
      {
         if (lastOpenSlidesNumber >= 0)$("#imagecontainer").append($(slideArray[lastOpenSlidesNumber][lastOpenImageNumber]));
      }
      //
      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+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 (slideCounter > 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();
         var navLeft = options.slideWidth - $navigation.outerWidth();
         var h = $navigation.outerHeight();
         var navTop = options.slideHeight - $navigation.outerHeight();//(true);
         $("#funImageNavigation").css({'left':navLeft,'top':navTop,'width':w,'height':h,'display':'none'});
      }
      else
      {
         $("#funImageNavigation").hide();
      }
      return $(this);
   }
})(jQuery);