function slideLoadr(hRemainder){
     var imgLoaded = [];
     var imgToLoad = [];
    
     for (var i in hRemainder){
      // add images to the preloader array
      imgToLoad.push(hRemainder[i].Img);
      imgToLoad.push(hRemainder[i].InnerSwirl);
      imgToLoad.push(hRemainder[i].OuterSwirl);
      
      // make the new list-item and its sub-elements.
      $("<li>")
      .attr({'id': hRemainder[i].Id})
      .hide()
      .append(
        $('<ul>')
          .append($('<li>').attr({'class': 'overlay-outer'}).append(
               $("<img>").attr({'src': hRemainder[i].OuterSwirl, 'alt': '', 'width': '427', 'height': '275'}).load(function(){imgLoaded.push($(this).attr('src'));})
               )
          )
          .append($('<li>').attr({'class': 'overlay-outer'}).append(
               $("<img>").attr({'src': hRemainder[i].InnerSwirl, 'alt': '', 'width': '427', 'height': '275'}).load(function(){imgLoaded.push($(this).attr('src'));})
               )
          )
      )
      .append(
         $("<img>").attr({'class': 'rotator-image', 'src': hRemainder[i].Img, 'alt': hRemainder[i].Alt, 'width': '427', 'height': '275'}).load(function(){imgLoaded.push($(this).attr('src'));})
      ).appendTo('#homepage-rotator');
      
    }
    
    var loadCheck = window.setInterval(function(){
      if (imgLoaded.length === imgToLoad.length && imgLoaded.length !== 0){  
        slideshowInit();
        window.clearInterval(loadCheck);
      }
    }, 500);
  }
  
  function slideshowInit(){
    var slides = $('#homepage-rotator > li');
    var currentSlide = 0;
    var nextSlide = 1;
    $('img', slides).css({opacity: 0, position: 'absolute', 'z-index': 0, 'display': 'block'}).filter('.overlay-outer, .overlay-inner').css({'z-index': 2});
    // show the list elements, they are hidden via css initially.
    $('li', slides).css({'display': 'block'});    
    // hide all but the first slide.
    slides.css({'z-index': '1'}).eq(0).css({'z-index': '2'}).children('img').css({'opacity': '1'});    
    window.setInterval(function(){
      slideTransition(slides.eq(currentSlide), slides.eq(nextSlide), 2000);
      (nextSlide == (slides.length - 1)) ? nextSlide = 0 : nextSlide++;
      (currentSlide == (slides.length - 1)) ? currentSlide = 0 : currentSlide++;
    }, 7500);
  }
  
  function slideTransition(outSlide, inSlide, duration){
    outSlide.css({'z-index' : '2'});
    // hide all images in incoming slide.
    $('img', inSlide).css({opacity: 0});
    // move slide to the top of the pile.
    inSlide.css({'z-index': '3'}).show();
    // animate the component parts.
    // animation is concurrent.
    var outer = $('li img[src$="inner.png"]', inSlide);
    var inner = $('li img[src$="outer.png"]', inSlide);
    var bg = inSlide.children('img');
        
    inner.animate({opacity: 1}, duration * 0.3, 'easeInSine', function(){});
    outer.delay(duration * 0.2).animate({opacity: 1}, duration * 0.3, 'easeInSine', function(){});
    bg.delay(duration * 0.4).animate({opacity: 1}, duration * 0.3, 'easeInSine', function(){
         inner.animate({opacity: 0}, duration * 0.3, 'easeOutSine');
         outer.delay(duration * 0.1).animate({opacity:0}, duration * 0.3, 'easeOutSine', function(){
          outSlide.css({'z-index': '1'}).hide();
          inSlide.css({'z-index': '2'});
        });
    }); 
  }