var slideTime = 5000;

var loaded = 0;
var index = 0;
var bannerFiles = ['../../images/banner1.jpg', '../../images/banner2.jpg', '../../images/banner3.jpg', '../../images/banner4.jpg', '../../images/banner5.jpg']; 
var images = [];

/**
 * Pre load the banner images 
 * when the document is ready
 */		
function startBanner() {
	
  //Loop all the banner files and load the images
  jQuery.each(bannerFiles, function(index, val) {
  	images[index] = new Image();
  	
  	$(images[index])
  	  
  	  //on image load
  	  .load(function() {
  	  	
  	  	//Set the image as hidden and append the class
  	  	$(this).addClass('banner');
  	  	
  	  	//Add the image to the header
  	  	$('#header').append(this);
  	  	
  	  	//Increment the loaded count
  	  	loaded++;
  	  	
  	  	//if fully loaded, start the fade cycle
  	  	if(loaded == bannerFiles.length) setTimeout(cycleImages, 1500);
  	  })
  	  
  	  //If there was an error loading
  	  .error(function() {
  	  })
  	  
  	  //Set the image source attribute
  	  .attr('src', val);
  })
}

/**
 * Cycle the banner images
 */
function cycleImages() {
	
	//Get the current image
	var current = images[index];
	
	//Update index
	index = (index+1)%images.length;

	//fade in next and then fade out current
	$(images[index]).animate({opacity:1, filter:'alpha(opacity=100)'}, 750, function() {
		$(current).animate({opacity:0, filter:'alpha(opactiy=0)'}, 750);
		
		//run loop again
		setTimeout(cycleImages, slideTime);
	});
}