// adjust fadeInterval to desired number of milliseconds between fade
 var fadeInterval = 6000;
 // ------------------------------------------------------------------   

 var images = new Array();
 var imageSrc = new Array();
 var rotatorcounter = 0;
   
 $(document).ready(function() {
   loadImages();
 });
 
function loadImages(){
  var counter = 0;
  $("#bannerpreload").find("li").each(function(i) {
     
     imageSrc[counter] = $(this).html();
     counter++;
       
  });
 
  counter = 0;
  for (counter = 0; counter < imageSrc.length; counter++) {
     images[counter] = new Image();
     if (counter == 0) {
     	$(images[counter]).load( function() {
       	 $(this).hide();
       	 $("#loader")
       	   .removeClass('loading')
       	   .append(this);	   
       	   
       	   $(this).fadeIn();
       	   // set as the background image of the loader
       	   //alert($(this).attr('src'));
       	   $("#loader").css({
       	   	'background-image': 'url(' + $(this).attr('src') + ')',
       	   	'backround-position': 'top left',
       	  	'background-repeat': 'no-repeat',
       	        'width': images[0].width,
       	   	'height': images[0].height
       	   	});
       	   
       	 }
     
      );
     } else {
       $(images[counter]).load( function() {
       	 $(this).hide();
       	 $("#loader")
       	   .removeClass('loading')
       	   .append(this);	   
       	 
       	 }
       )
     }
     $(images[counter])
       .error( function() {
     }) 
       .attr('src',imageSrc[counter]);  
  }
  setInterval("crossFade()", fadeInterval);
}

function crossFade() {
  // set the next image as the background image of the loader
  if (rotatorcounter >= images.length) {
    rotatorcounter = 0;
  }
      
  var nextImage = rotatorcounter+1;
  var currentImage = rotatorcounter;
      
  if (nextImage == (images.length)) {
    nextImage = 0;
  }
   
  $("#loader").css("background-image", 'url(' + imageSrc[nextImage] + ')');
  
  $(images[currentImage]).fadeTo("slow", 0, function callback() {
      $(this).hide();
    
      $(images[nextImage]).show();
      $(images[nextImage]).fadeTo("fast", 1);
  });  
  rotatorcounter++;  	
	
}