// GALLERY CONFIG/SETTINGS  ---------------------------------------------------------------

// Define case study links
/*var detailLinks=new Array(
	"sermon-series/gospelology.php",
	"/",
	"https://redeemerchurch.onthecity.org/kiosk/3160/signup"
);*/

// Define case study detail photos
/*var detailGraphics=new Array(
	"images/home/feature-detail-fpo-1.jpg",
	"images/home/feature-detail-fpo-2.jpg",
	"images/home/feature-detail-fpo-3.jpg"
);*/

// Amount of case study features being displayed
var totalDetails = detailGraphics.length;

// How long we want each feature to display (in seconds)
var normalDuration = 5;
var pauseDuration = 10;

// assigned a value found in the two varables above, depending on the type of the transition 
// (user-initiated vs. normal slideshow). Set as "normal" for npw.
var slideDuration = normalDuration;

// A white placeholder image that serves to clear detail images in-between transitions 
var blank = new Image();
blank.src="images/home/feature-detail-blank.gif";



// DETAIL GRAPHIC FUNCTIONALITY ----------------------------------------


// Keeps track of array reference of image being currently viewed.
// We're going to hack this for now by setting it as the very last image in the sequence. It will be reset in the init block to 0. 
// Need to do this because we compare detailID & currentDetail in the loadDetail function...

var currentDetail = (totalDetails);
var previousDetail;

// Keeps a reference to our fade-in setTimeouts
var fadeinTimeout;

// Keeps a reference to our duration setTimeouts
var durationTimeout;
var secondsRemaining;


// Tracks how long a detail has been on display

function trackDuration() {
	// If we've completed the duration, load the next detail
	if (secondsRemaining==0) {
		updateDetailGraphic();
		// Set the slideDuration back to "normal" in case the user had initiated a "pause" 
		slideDuration = normalDuration;
		// Reset for the next slideshow session
		secondsRemaining = slideDuration;
	}
	// Otherwise, keep tracking time (in seconds)
	else {
		secondsRemaining = secondsRemaining - 1;
		durationTimeout = window.setTimeout("trackDuration()", 1000);
	}
}


// The setOpacity function is passed an object and an opacity value. It then sets the opacity of the supplied object 
// using four proprietary ways. It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting 
// the value to 99.999% instead.

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}


// The fadeIn function uses a Timeout to call itself every 100ms with an object Id and an opacity. The opacity 
// is specified as a percentage and increased 10% at a time. The loop stops once the opacity reaches 100%.

function fadeIn(objId, opacity) {
  if (document.getElementById) {
    var obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 10;
      fadeinTimeout = window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 50);
    }
		// If we're done fading in...
		else {
			// Set it up for the next transition
			//alert ("done fading in. Begin the timer.");
			trackDuration();
		}
  }
}
 
 
// This function swaps the previous detail with the current detail that the user selected

function updateDetailGraphic(detailID) {
	//alert("detailID: " + detailID);
	
	// Begin the transition to the next detail graphic
	previousDetail = currentDetail;
	
	// clear the slideshow functionality and reset for the next slideshow session
	clearTimeout(fadeinTimeout);
	clearTimeout(durationTimeout);
	secondsRemaining = slideDuration;
	
	// If the detail is getting updated as a result of the slideshow functionality...
	// Note: because "0" is read as "false", we need to check that detailID wasn't delivered 
	// AND make sure that it wasn't set at 0 (and actually delivered)
	if ((!detailID) && (detailID != 0))  {
		if (currentDetail < (totalDetails-1)) {
			currentDetail= currentDetail + 1;
			}
		else {
			currentDetail=0;
		}
		// alert("detailID not provided. currentDetail now set at: " + currentDetail);
	}
	// Otherwise, if the transition is user-initiated...
	else {
		currentDetail=detailID;
		// alert("detailID WAS provided. currentDetail now set at: " + currentDetail);
		// Double the slide duration to simulate a "paused state" so the user has time to read the graphic
		slideDuration = pauseDuration;
		// Reset for the next slideshow session
		secondsRemaining = slideDuration;
		// alert("slideDuration: " + slideDuration);
	}
	
	// Hide the detail image
	var imageId = 'detailGraphic';
 	var image = document.getElementById(imageId);
	setOpacity(image, 0);
	// Insert "blank" image into the detailGraphic img to avoid seeing the previous image if the new one hasn't loaded yet.
	// This "blank" image has already been preloaded as it is the image initially placed in the html
	document.getElementById('detailGraphic').src = "images/home/feature-detail-blank.gif";
	// Then update the image link and load in the new image
	document.getElementById('featureDetail').href = detailLinks[currentDetail];
	document.getElementById('detailGraphic').src = detailGraphics[currentDetail];
	initImage();
	// Update display of thumbnails
	resetThumbnails();
}


// The initImage function makes the photo completely tranpsarent by using the setOpacity function to set  
// its opacity to zero. The photo can then be made visible and faded in using the fadeIn function:

function initImage() {
  var imageId = 'detailGraphic';
  var image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}



// THUMBMNAILS FUNCTIONALITY  --------------------------------------------------



// Updates the display state of thumbnails/descriptors

function resetThumbnails() {
	// Remove the highlight state of the thumbnail for the detail previously being viewed
	var previousThumbnail = ("#features ul#descriptors li a#descriptor" + previousDetail);
 	$(previousThumbnail).removeClass('currentItem');
	// Set the highlight state for the thumbanil currently being viewed 
	var currentThumbnail = ("#features ul#descriptors li a#descriptor" + currentDetail);
 	$(currentThumbnail).addClass('currentItem');
}


// This function highlights the thumbnail images when user rolls over them

function doRollover( thumbnailID ) {
	// If User is not mousing over the thumbail for the current Detail Photo, do the rollover effect
	if (thumbnailID != currentDetail) {
		// Update the visual state of the descriptor link (thumbnail)
		// var targetThumbnail = ("#features ul#descriptors li a#descriptor" + thumbnailID);
 		// $(targetThumbnail).addClass('currentItem');
		// Update the detail grpahic
		updateDetailGraphic(thumbnailID);
	}
 } 



// INITIALIZE THE PAGE ELEMENTS  --------------------------------------------------



// First, hide the detail until it is completely cached (when page has finished loading)
document.write("<style type='text/css'>#detailGraphic {visibility:hidden;} </style>");

// Initialize....
function initFeatureGallery() {
	// load first detail graphic
	updateDetailGraphic();
	// Set up thumbnail links (doing it with .js so the web programmer only has to edit the link in one place)
	document.getElementById('descriptor0').href = detailLinks[0];
	document.getElementById('descriptor1').href = detailLinks[1];
	document.getElementById('descriptor2').href = detailLinks[2];	
	// Set up the display of the thumbnails
	resetThumbnails()
	// Start preloading remaining detail graphics
	var imageObj = new Image();
	for(var i=0; i<=totalDetails; i++) {
		//alert("loading " + detailGraphics[i]);
  	imageObj.src=detailGraphics[i];
	}
}