// 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;
      }
      //

      var thisNikiImageContainer = $(this);


      //
      // slides vullen
      //
      if (options.slides.length < 1)
      {
         
         $('img', this).each(function(num, el)
         {

            var dumSrc=$(el).attr('src').split('?')[0];
            var dumId=$(el).attr('src').split('?')[1].split('id=')[1];
            dumSrc+="?id="+dumId;
            //options.slides[num] = $(el).attr('src');
            options.slides[num]=dumSrc;
         });
      }
      //Voor de zekerheid nikiImage = $this leegmaken
      $(this).empty();
      //
      var thisNikiImageContainerId="#"+$(this).attr('id');
      if($(this).parent().attr('id')!="nikiImages"){
         //$('body').append('<div id="nikiImages"></div>');
         $('<div id="nikiImages"></div>').insertBefore('#nikiImage');

          
         var theWidth= parseInt($(this).parent().css('width'));
         if(isNaN(theWidth)){
            theWidth= $(this).parent().width();
         }
         var theDefaultWidth =$('#nikiImages').css('width'); //parseInt($('#nikiImages').css('width'));
         var theDefaultHeight = $('#nikiImages').css('height'); //parseInt($('#nikiImages').css('height'));
         if(theDefaultWidth == 'auto' || theDefaultWidth === undefined || parseInt(theDefaultWidth)<=0 ){
             theDefaultWidth = 560;
         }
          else {
             theDefaultWidth = parseInt(theDefaultWidth);
         }
         if(theDefaultHeight == 'auto' || theDefaultHeight === undefined || parseInt(theDefaultHeight)<=0){
             theDefaultHeight = 320;
         }
          else {
             theDefaultHeight = parseInt(theDefaultHeight);
         }

         if(theWidth === undefined || theWidth<=0){
             theWidth = theDefaultWidth;
         }
         var newH=((theWidth*theDefaultHeight)/theDefaultWidth);
         $('#nikiImages').css({'width':theWidth,'height':newH});
        $('#nikiImages').append($(this));
        $(this).css({'position':'absolute','left':0,'top':0});
      }
      if (!($(this).css('position') == 'absolute')){
         $(this).css({'position':'absolute'});
      }
      var nikiImageMaxWidth=parseInt($(this).parent().css('width'));
       if (isNaN(nikiImageMaxWidth))
       {
           nikiImageMaxWidth = $(this).parent().width();
       }
      var nikiImageMaxHeight=parseInt($(this).parent().css('height'));
       if (isNaN(nikiImageMaxHeight))
       {
           nikiImageMaxHeight = $(this).parent().height();
       }
      $(this).css({'width':'100%','height':'100%'});
      //
      for(telSlides=0;telSlides<options.slides.length;telSlides++){
            options.slides[telSlides]+="&width="+nikiImageMaxWidth+"&height="+nikiImageMaxHeight+"&crop=false";;
       }
      //insert alvast de ul
      if($('#nikiImageNavigation').length<1){
         $(this).parent().append("<div id=\"nikiImageNavigation\"></div>");
      }
      $('#nikiImageNavigation').append("<ul></ul>");
      var $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 slideDivArray=new Array();
      /*		var w=0;
       var h=0;*/
//      log('parent position= '+$thisNikiImageContainer.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
     // $thisNikiImageContainer.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();
         $('body').append('<div id="divslide_'+i+'" class="nikiImageHolder"></div>');
         log("divslide_"+ i);
         slideDivArray[i]=$("#divslide_"+i);
         // doe er wat mee
         $(slideArray[i])
            // image geladen? initialize
            .load(function ()
            {
               var thisNumId=$(this).attr('id').split('_')[1];
               /* zet de hoogte uitgelijnd */
               var h=nikiImageMaxHeight;
               var ih=$(this).attr('height');

               if(ih<h && ih>0){
                  $(this).css({'margin-top':(Math.floor(h-ih)/2)});
               }
               $(slideDivArray[thisNumId]).append($(this));
               $("#imagecontainer").append($(slideDivArray[thisNumId]));


               //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 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)
      {

         $(thisNikiImageContainerId).append($(slideDivArray[number]));
         
         /*var dI=$(this).attr('id');
         log("ik ben in firstTime van nikiSlide en $this = "+dI);*/
         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)
      {

         $(slideDivArray[openImageNumber]).stop(true, true);
         //de huidige image een lage z-index geven
         $(slideDivArray[openImageNumber]).css('z-index', minZ);
         $(slideDivArray[openImageNumber]).animate({'opacity':0}, options.fadeDuration, 'swing');
         //de nieuwe image voorbereiden, opacity op 0, z-index op top
         $(slideDivArray[number]).css({'opacity':0});
         $(slideDivArray[number]).css('z-index', topZ);
         //verplaats image naar de slider container
         $(thisNikiImageContainerId).prepend($(slideDivArray[number]));
         // start de fade iN, als ie daarmee klaar is naar functie fadeInReady
         $(slideDivArray[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($(slideDivArray[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;
      }

      function trace(t)
      {
         $('#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)
      {
         //$(thisNikiImageContainerId).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=parseInt(options.slideWidth/2-w/2);
        // var navLeft = options.slideWidth - $navigation.outerWidth();
         var h = $navigation.outerHeight();
         var navTop = $('#nikiImages').outerHeight() - $navigation.outerHeight()-10;//(true);
         $("#nikiImageNavigation").css({'left':navLeft,'top':navTop,'width':w,'height':h,'display':'block'});
      }
      else
      {
         $("#nikiImageNavigation").hide();
      }
      return $(this);
   };
})(jQuery);