$(document).ready(function() {
  
  //current photo index
  var i = 1;
  
  //number of photos
  var max = 6;
  
  //path to the photos
  var path = "/naep/images/photo_0";
  
  //clone the image so we can cross fade, set the ID, put it in place, add a class and set it to be 'underneath' the main image.
  $("#rotateHeaderTop").clone()
                       .attr("id", "rotateHeaderBot")
                       .prependTo("#crossfade")
                       .addClass("imageForCrossfade")
                       .css("z-index", 5555);
  
  //every 5000ms fire this function
  $.timer(5000, function (timer) {
      //if index is higher than the images available reset to beginning otherwise just increment
      i >= max ? i = 1 : i++;  
      
      //hide the top image, go to next image, fade it in -> callback - when fade is done increment the bottom image
      //bottom always has to match the top after the fade so we get a crossfade rather than just a fade
      $("#rotateHeaderTop").hide().attr("src", path + i + ".jpg").fadeIn("slow", function(){
        $("#rotateHeaderBot").attr("src", path + i + ".jpg");
      });
  });
  
});