$(document).ready(function() {

	//-------------------------------MOVE SITE BG -------------------------------------------
	var activeBG = "#imgBG";
	var inactiveBG = "#imgBG2";
	var activeItem = "#itemImageHolder1";
	var inactiveItem = "#itemImageHolder2";
	var BGwidth = 1500;
	var bMacOS = (navigator.appVersion.indexOf("Mac") != -1) ? true : false;
	var bFireFox = (navigator.userAgent.indexOf("Firefox")!=-1) ? true : false;
		
	function showNewBG(aniStyle,imgURL){
		
		if(pageType=="home") {
			if(aniStyle == "slideLeft"){
				nextQuote();
			}else{
				prevQuote();
			}
		}
		
		// the stops keep the animation from sliding right when called in the middle of another animation
		$(activeBG).stop();
		$(inactiveBG).stop();
		
		
		if(imgURL==undefined) {
			if(aniStyle == "slideLeft"){
				csImgIndex = (csImgIndex==csImgArray.length-1) ? 0 : csImgIndex+1;
			}else{
				csImgIndex = (csImgIndex==0) ? csImgArray.length-1 : csImgIndex-1;
			}
			imgURL = csImgArray[csImgIndex];
		}
		
		$(inactiveBG).html('');
		//alert('hey');
		$(inactiveBG).image(imgURL,function(){								
			if(aniStyle == "slideLeft"){
				// sets the start in case it was called in the middle of another animation
				$(activeBG).css({left: "0px"});
				$(inactiveBG).css({left: BGwidth+"px"});
				
				$(activeBG).animate({left: (0-BGwidth)+"px"}, 500 );
				$(inactiveBG).animate({left: "0px"}, 500 );
			}else if(aniStyle == "slideRight"){
				// sets the start in case it was called in the middle of another animation
				$(activeBG).css({left: "0px"});
				$(inactiveBG).css({left: (0-BGwidth)+"px"});
				
				$(activeBG).animate({left: BGwidth+"px"}, 500 );
				$(inactiveBG).animate({left: "0px"}, 500 );
			}else{
				if(bMacOS && bFireFox){//if it is Mac & FireFox don't fade, just show
				//if(bMacOS){//if it is Mac don't fade, just show
					$(inactiveBG).css({opacity: 1});
				}else{
					// sets the start in case it was called in the middle of another animation
					$(activeBG).css({opacity: 1});
					$(inactiveBG).css({opacity: 0});
					
					$(activeBG).animate({opacity: 0}, 500, function(){ $(inactiveItem).html(''); });
					$(inactiveBG).animate({opacity: 1}, 500 );
				}
			}
			if(activeBG == "#imgBG"){
				activeBG = "#imgBG2";
				inactiveBG = "#imgBG";
			}else{
				activeBG = "#imgBG";
				inactiveBG = "#imgBG2";
			}
		});
		
		if(aniStyle == "slideLeft"){
			$(inactiveBG).css({left:BGwidth+"px",opacity:1});
			$(activeBG).css({opacity:1});
		}else if(aniStyle == "slideRight"){
			$(inactiveBG).css({left:(0-BGwidth)+"px",opacity:1});
			$(activeBG).css({opacity:1});
		}else{
			$(inactiveBG).css({opacity: 0,left:"0px" });
		}
	}
	window.showNewBG = showNewBG;
	
	
	// --------------------------- ITEM IMAGE GALLERY ---------------------------- //
	
	
	function loadItemImage(index){
		
		if(itemImgIndex == index) return true;
		
		// the stops keep the animation from animating when called in the middle of another animation
		$(activeItem).stop();
		$(inactiveItem).stop();
		
		itemImgIndex = index;
		var imgURL = itemImgArray[index-1];
		
		$(inactiveItem).html('');
		//alert('hey');
		$(inactiveItem).image(imgURL,function(){								
			
			if(bMacOS && bFireFox){//if it is Mac & FireFox don't fade, just show
			//if(bMacOS){//if it is Mac don't fade, just show
				$(inactiveItem).css({opacity: 1});
			}else{
				// sets the start in case it was called in the middle of another animation
				$(activeItem).css({opacity: 1});
				$(inactiveItem).css({opacity: 0});
				
				$(activeItem).animate({opacity: 0}, 500, function(){ $(inactiveItem).html(''); });
				$(inactiveItem).animate({opacity: 1}, 500 );
			}
			
			if(activeItem == "#itemImageHolder1"){
				activeItem = "#itemImageHolder2";
				inactiveItem = "#itemImageHolder1";
			}else{
				activeItem = "#itemImageHolder1";
				inactiveItem = "#itemImageHolder2";
			}
		});
	}
	window.loadItemImage = loadItemImage;
	
	$.fn.image = function(src, f){
		return this.each(function(){
			var i = new Image();
			i.src = src;
			i.id = "boxImage";
			i.onload = f;
			this.appendChild(i);
			//this.css({ backgroundImage: "url("+src+")" });  // Chris switched July 3rd...
		});
	}
	function nextQuote(){
		quoteIndex = (quoteIndex>=quoteArray.length-1) ? 0 : quoteIndex+1;
		updateQuote();
	}
	function prevQuote(){
		quoteIndex = (quoteIndex<=0) ? quoteArray.length-1 : quoteIndex-1;
		updateQuote();
	}
	function updateQuote(){
		$('#homeQuote').html(quoteArray[quoteIndex]);
	}
});