// JavaScript Document
/*
am HomeSlide simple slide show
Fundament All Media voor AM
scripting G. Druiven 2010
*/
(function($)
{
   $.fn.amHomeSlide = function(_options)
   {
      var options = $.extend({
         pauseTime: 5000,
         fadeDuration: 1000,
         slideClassName: '.slide'
      }, _options);
      //$('body').append("<div style=\"position: absolute;width: 300px; height: 500px; background-color: #fff; z-index: 50000; left: 0; top: 0;\" id=\"tracer\"></div");
      // this zetten
      //
      var $this = $(this);
      //check of ie relative is of absolute
      //zet eventueel, als dat nog niet gedaan is, de css position = relative, voor de parent container
      if (!($this.css('position') == 'absolute' || $this.css('position') == 'relative'))$this.css('position', 'relative');
      //check sommige options
      /*var slideWidth = $(this).width();
      var slideHeight = $(this).height();*/
       //checken op css width en height
      var slideWidth = parseInt($(this).css('width'));
       if(isNaN(slideWidth)){
          slideWidth = $(this).width();
       }
      var slideHeight =parseInt($(this).css('height'));
       if(isNaN(slideHeight)){
          slideHeight = $(this).height();
       }
      // als de animatie gestopt moet worden ( klik tijdens animatie */
      var stopAnimating=false;

      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.css({'background':'url(content/common/amc30_slide/gfx/ajax-loader.gif) no-repeat center center'});
      var deSlides = new Array();
      $('.slide', this).each(function(num)
      {
         deSlides[num] = {};
         deSlides[num].imageSrc = $(this).attr('href');
         trace("deSlides[" + num + "].imageSrc : " + deSlides[num].imageSrc);
         deSlides[num].alt = $(this).attr('title');
      });
      //Voor de zekerheid this kan geleegd worden
      $this.empty();
      //maak een imageholder aan in this
      $this.append("<div id=\"deSlideHolder\" style=\"width: 100%; height: 100%; position: absolute; z-index: 1;left: 0;top: 0; overflow: hidden\"></div>");
      var $slideHolder = $('#deSlideHolder');
      //slide Navigation
      //slideNavigation Top
      var nTop = slideHeight - 16;
      var nWidth = deSlides.length * 12;
      $this.append("<div id=\"slideNavigationHolder\" style=\"left: 0;top: " + nTop + "px;\"><div id=\"slideNavigation\" style=\"width:" + nWidth + "px\"></div></div>");
      $navigation = $('#slideNavigation');
      //welke image staat open
      var openImageNumber = -1;

      //welke image stond open
      var lastOpenImageNumber = -1;

      var slideDiv = $slideHolder;
      //var totalSlidesContainers = options.slides.length;

      var txt = "";
      var slideArray = new Array();
      /*		var w=0;
       var h=0;*/

      //hierna, parent is absolute of relative, dit kind kan absolute gezet worden

      //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 < deSlides.length; j++)
      {
         //slideArray[number] wordt array 

         slideArray[j] = new Image();
         // doe er wat mee
         dumId = j;
         $(slideArray[j])
            // image geladen? initialize
               .load(function ()
         {
            $("#imagecontainer").append($(this));
            $(this).attr('width', slideWidth);
            $(this).attr('height', slideHeight);
            //als dit de eerste image is, ga naar functie showImageFirstTime
            if ($(this).attr('id') == 'slide_0')
            {

               showImage(0);
               openImageNumber = 0;
               $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]);

            slideArray[deJ] = null;

            trace("slide " + ev.target + " is null")
         })
            //zet een unieke id, die wordt niet gebruikt, but joe never know

               .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', deSlides[j].imageSrc)
            //zet de alt tekst
               .attr('alt', deSlides[j].alt);
         //als er een image is dan is er ook een navigation, later wordt gekeken of er maar één image is
         var appendString = "<div class=\"homeSlideNavje\"><a name=\"";
         //appendString+=slideCounter;
         appendString += (dumId);
         appendString += "\"></a></div>";
         $navigation.append(appendString);
         if (j < 1)$("#slideNavigation a[name=0]").addClass('active');
         slideCounter++;


      }
      //
      var totalSlides = slideArray.length;

      //
      function showImage(j)
      {

         //de nieuwe image voorbereiden, opacity op 0, z-index op top
         //checken of het geen error image is = null

         $(slideArray[j]).css({'opacity':0});
         $(slideArray[j]).css('z-index', topZ++);
         //verplaats image naar de slider container
         $slideHolder.prepend($(slideArray[j]));
         // start de fade iN, als ie daarmee klaar is naar functie fadeInReady
         $(slideArray[j]).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
         $("#slideNavigation a[name=" + openImageNumber + "]").removeClass("active");

         lastOpenImageNumber = openImageNumber;

         openImageNumber = j;


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


         //check of er wel meer images zijn anders blijft het hierbij
         if (slideCounter > 1)
         {

            //timer wordt gezet om volgende slide te plaatsen
           if(!stopAnimating)callNextImage();
           else{
               $(slideArray[openImageNumber]).stop().css({'opacity':1});
           }
            //de vorige slide wordt weer verplaatst naar imagecontainer
            removeLastImage();
         }
         //animatie is klaar, fadeInAnimation op false zetten
         fadeInAnimation = false;
         

      }
      //
      function callNextImage()
      {
         killTimer();
         timerId = setTimeout(nextImage, options.pauseTime);
      }
      //
      function removeLastImage()
      {
         if (lastOpenImageNumber >= 0)$("#imagecontainer").append($(slideArray[lastOpenImageNumber]));
      }
      //
      function nextImage()
      {
         killTimer();
         var totalSlides = slideArray.length;
         //alert(totalSlides);


         var slideNum = openImageNumber + 1;
         //alert("slidesNum = "+slidesNum);
         if (slideNum >= totalSlides)slideNum = 0;
         showImage(slideNum);
      }
      //
      function stopSlide()
      {
         stopAnimating=true;
         $('#slideNavigationHolder').hide('slow');
         killTimer();
         fadeInAnimation=false;
      }
      //
      function playSlide()
      {
         stopAnimating=false;
         if (!fadeInAnimation)
         {
            nextImage();
            $('#slideNavigationHolder').show('slow');
         }
      }
      //
      function stopPlaySlide(){

         stopAnimating=!stopAnimating;
         
         if(stopAnimating){
            if($('#slideNavigationHolder').is(':visible'))$('#slideNavigationHolder').hide();
            fadeInReady();
            killTimer();
         }
         else {
            if($('#slideNavigationHolder').is(':hidden'))$('#slideNavigationHolder').show();
            if(!fadeInAnimation){
               nextImage();
            }
         }
      }

      //
      function slideNavigationClick()
      {

         if (!fadeInAnimation)
         {
            killTimer();
            showImage(parseInt($(this).attr('name')));
         }
      }

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

      //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':slideWidth,'height':slideHeight,'z-index':1000,'cursor':'pointer'}).click(stopPlaySlide);//toggle(stopSlide, playSlide);
         /* a klik in Navigation */
         $("#slideNavigation a").click(slideNavigationClick);

         //navigation on top
         $("#slideNavigation").css('z-index', 10000);
         $("#slideNavigation").show();
      }
      else
      {
         $("#slideNavigation").hide();
      }
      return $(this);
   }
})(jQuery);