// background img obj
var BGO = {		
	imgPath:'bgimages/',
	bgImgArray:null,					// array of all background images, indexed with a key
	currBgArray:[],						// array of bg images belonging to the current section
	backgroundXMLRead:false,			// whether the background xml has been read and the array created
	imageLoaded:false,					// whether the background img has been loaded
	t:null,								// timeout for changing bg
	tAmount:8000,						// timeout amount - 8 seconds
	currPage:'',						// id of this page within the section
	currImg:0							// index of where I am in currBgArray
};	

BGO.resetVars = function(){
	this.bgImgArray.length = 0;
	this.currBgArray.length = 0;
	this.backgroundXMLRead = false;
	this.imageLoaded=false;
	this.currPage = '';					
	this.currImg=0;
}

/************************************* img *****************************************/
 BGO.createBackgroundImgArray = function(){
	this.bgImgArray = {};
	var _BGO = this;
	$.ajax({
	  type: "GET",
		 url: "content/bg_images.xml",
		 dataType: "xml",
		 success: function(xml) {
			 $(xml).find('section').each(function(){
			 var id_text = $(this).attr('id');				// id = section
				 var pageArray = {};
				 $(this).find('page').each(function(){
					 var imgArray = [];								// empty image array
				   	 $(this).find('img').each(function(){
						imgArray.push($(this).attr('src'));			// fill the image array
					 });
					 var id_page = $(this).attr('id');
					 pageArray[id_page] = imgArray;
				 });
				
				 _BGO.bgImgArray[id_text] = pageArray;					// set the var in bgImgArray object
					
			 }); //close each(
			 _BGO.backgroundXMLRead = true;
			 if(PO.sectionCalled){
				 PO.loadNewSection(); 
			 }
		 }
	}); //close $.ajax(
		
}	

/*** load the background img
	if it's the first img in that section, fade in the section too
***/
BGO.loadImg = function(isFirstImg){
	var div = $('#' + PO.newSection + ' div.container');
	var src = this.imgPath + this.currBgArray[this.currImg];
	if(isFirstImg){this.imageLoaded = false};
	var img = new Image();
	var bwImg = new Image();
	
	// wrap our new image in jQuery, then:
	  $(img)
		.load(function () { 
			BGO.imageLoaded = true;
	
			$(this).hide();
			$(this).addClass('fullscreen');
					
			// fade our image in to create a nice effect
			$(div).append(this);
			if(isFirstImg){							// show the image and animate in the whole section
				$(this).show();	
				if(PO.sectionLoaded && !PO.showingSplashPage){
					PO.animateSection();
				}
				
				//BGO.t = setTimeout('BGO.timeoutCallback()',BGO.tAmount);			// set the timeout to load the appropriate b&w image
			}else{
				// resize the newly-loaded image
				//$(this).fadeIn(3000, function(){
					$(this).show();
					$(this).parent().find('img.fullscreen').not(':last').remove();			  
				//});				// animate in the image
				//BGO.t = setTimeout('BGO.timeoutCallback()',BGO.tAmount);		// set the timeout to load the b&w image
			
			}
			PO.doResize();	
		})		
		.error(function () {
					// notify the user that the image could not be loaded
		})
		.attr('src', src);
}

BGO.timeoutCallback = function(){
	this.currImg < this.currBgArray.length-1?this.currImg++:this.currImg=0;
	this.loadImg(false);
}

BGO.setUpArray = function(section, page){
	if(page!=undefined && page != ''){
		this.currBgArray = this.bgImgArray[section][page];
	}else{
		// get first key
		var keys = [];
		for(var key in this.bgImgArray[section]){
		   keys.push(key);
		}
		this.currBgArray = this.bgImgArray[section][keys[0]];
	}
	
	this.currImg = Math.floor(Math.random()*this.currBgArray.length);
	//this.currImg = 0;
	if(PO.oldSection != PO.newSection){
		this.loadImg(true);									//load img will call animate 	
	}else{
		this.loadImg(false);	
	}
}