var slideshowSpeed = 5000;
var interval;
var imgObj = [];
var imgCount= 0;
var activeContainer=1;

$("#headerimg1").css({"display" : "none","z-index" : -2 })
$("#headerimg2").css({"display" : "none","z-index" : -3 })



// Variable to store the images we need to set as background
var photos = ["../../cbtl_background/001.jpg",  "../../cbtl_background/002.jpg",  "../../cbtl_background/003.jpg","../../cbtl_background/004.jpg","../../cbtl_background/005.jpg","../../cbtl_background/006.jpg","../../cbtl_background/007.jpg","../../cbtl_background/008.jpg","../../cbtl_background/009.jpg","../../cbtl_background/010.jpg","../../cbtl_background/011.jpg","../../cbtl_background/012.jpg","../../cbtl_background/013.jpg","../../cbtl_background/014.jpg"];
	
//make the queue random
photos.sort(function() {return 0.5 - Math.random()}); //Array elements now scrambled

//put the blank page on the first
//photos.splice(0,0,"../../cbtl_background/first_bg.gif");


for (i = 0; i < photos.length; i++) {
		imgObj[i] = new Image();
		imgObj[i].src = photos[i];
}
//fire after the [1] image loaded ,  [0] is the blank
imgObj[0].onload = function() {
  //alert ("first photo loaded");		
  nextBG();
  // Start playing the animation
  interval = setInterval(function() {
  nextBG();
  }, slideshowSpeed);		
}

var nextBG = function(direction) {
   
   var currentContainer = activeContainer;
	  if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}

   // Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(" + photos[imgCount%photos.length] + ")",
			"display" : "none",
			"z-index" : -2
		});
		$("#headerimg" + currentContainer).css({
		  "display" : "block",
			"z-index" : -3
		});
		
		$("#headerimg" + activeContainer).fadeIn(1600);
		
   imgCount++;
}