var imageFadeIncrement = 0.05; // rate of incremental change  0 < imageFadeIncrement < 1
var imageFadeDelay = .5; // delay in seconds between checks
var imageNumberCurrent = 0; // get value for first image

var imageFadeState = 0; 
var imageFadeStateCurrent = 0 - (25 * imageFadeIncrement); 


var requestedFadeID = '';
var currentFadeID = '';

var checkingInterval = 1000 * imageFadeDelay;


function imagesStart() {
	currentFadeID = infoNextID;
	requestedFadeID = infoNextID;
	document.nextImage.src = imageArray[infoNextID].src;
	requestImageChange();
}

function goToTarget(targetID) {
	
	if (targetID!=currentFadeID) { // only do anything if this represents a change of ID
	
		requestedFadeID = targetID; // set the value of the requested image
	
		// clear thisTab status of other M2 items
		clearLinkTabs();
		
		if (imageFadeState==0) { // If no transition in progress start one
				requestImageChange();
		}
	}
}



function requestImageChange() { // check to see if next image is uploaded if so clear checking action and start fade
	// set new source image and start fade
	
	if (currentFadeID != requestedFadeID) {
		
		infoFadeDirection = 'out';
		infoFadeText = ''; // ? ------------------------------------------------------------------------------------------------------------- What to I need to do 
		
	}
		
		currentFadeID = requestedFadeID; // 
		awaitingRefresh = setInterval('checkDelay()', checkingInterval);
		
		// document.getElementById('debug').innerHTML += 'currentFadeID now = ' + currentFadeID + '<br/>';	
				
		// fade out old text
	

}

function checkDelay() { // check to see if next image is uploaded if so clear checking action and start fade
	
	if (isImageLoaded(requestedFadeID)) {
		clearInterval(awaitingRefresh);
		switchingImages = setInterval('switchImages()', 50);
	}
	
}


function switchImages() {
	
	if (imageFadeState == 0) { // more images to visible location at start of transition
		document.nextImage.src = imageArray[requestedFadeID].src; 
		setOpacity('nextImageContainer', 0);	 // make new current image fully hidden
		document.getElementById('nextImageContainer').style.top = '0px';
		document.getElementById('nextImageContainer').style.display = 'block';
	}
	
	if (imageFadeStateCurrent<1) { // apply transitions 
		
		imageFadeState += imageFadeIncrement;
		imageFadeStateCurrent += imageFadeIncrement; // fade out background image more slowly for transparent pngs		
		
	} else {
		
		document.getElementById('currentImage').src = document.getElementById('nextImage').src;  // switch source of current image
		
		clearInterval(switchingImages); // kill the fade action 
		setOpacity('currentImageContainer', 1);	 // make new current image fully visible
		document.getElementById('currentImageContainer').style.display = 'block';
		
		document.getElementById('nextImageContainer').style.top = '350px'; // hide old image
		document.getElementById('nextImageContainer').style.display = 'none';
		
		 // set the new tabbed link when the fade is complete 
		setTabbedLink(requestedFadeID);
		
		requestURL = '../../scripts/item_text.xml?itemID=' + currentFadeID; // request new text
		makeRequest(requestURL);

		
		imageFadeState = 0;
		imageFadeStateCurrent = 0;
		
		setOpacity('nextImageContainer', imageFadeState);		
		
		if (currentFadeID != requestedFadeID) { // if requested does not match current,  start new transition
				requestImageChange();
		}
		
	
	}
	
		
	if (imageFadeState <= 1)	{
		setOpacity('nextImageContainer', imageFadeState);	
	}
		
	if (imageFadeStateCurrent > 0)	{
		
		var fileName = document.getElementById('nextImage').src;
		
		if (fileName.indexOf('.png') != -1) {
			setOpacity('currentImageContainer', 1 - imageFadeStateCurrent);	
		}
	}

}

// set opacity function will need changin to adapt for more browsers

function setOpacity(layerName, alphaState) {
		document.getElementById(layerName).style.opacity = alphaState;
		document.getElementById(layerName).style.filter = 'alpha(opacity=' + Math.floor(alphaState*100) + ')';
}