// DESCRIPTION  ---------------------------------------------------------------



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

// Definition of photo captions happens in the html file calling this script
// Definition of photos happens in the html file calling this script


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

// Amount of detail photos in this gallery
var totalPhotos = detailPhotos.length;

// How long we want each slide to display (in seconds)
var slideDuration = 2;




// THUMBNAILS & DETAIL PHOTO 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 willbe reset in the init block to 0. 
// Need to do this because we compare detailID & currentPhoto in the loadDetail function...

var currentPhoto = (totalPhotos);

// 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 lisd ehas been on display

function trackDuration() {
	// If we've completed the duration, load the next slide
	if (secondsRemaining==0) {
		updateDetailPhoto();
	}
	// 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 += 5;
      fadeinTimeout = window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 60);
    }
		// If we're done fading in...
		else {
			// Set it up for thext transition
			secondsRemaining = slideDuration;
			trackDuration();
		}
  }
}
 
 
// This function swaps the previous detail photo with the current photo that the user selected

function updateDetailPhoto() {
	// If we're not at the end yet... (adjust for array referenceing)
	if (currentPhoto < totalPhotos-1) {
		currentPhoto = currentPhoto + 1;
	}
	// Otherwise we're at the end of the slides, start over again
	else {
		currentPhoto = 0;
	}
	// Hide the detail photo
	var imageId = 'detailPhoto';
 	var image = document.getElementById(imageId);
	setOpacity(image, 0);
	// Insert "blank" image into the detailPhoto img to avoid seeing the previous image if the new one hasn't loaded yet.
	// This "blank" imae has already been preloaded as it is the image initially placed in the html
	document.getElementById('detailPhoto').src = "images/shared/blank-detail.gif";
	// Then load in the new one image
	document.getElementById('detailPhoto').src = detailPhotos[currentPhoto];
	// document.getElementById('photoCaption').innerHTML = photoCaptions[detailID];
	initImage();
}




// 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 = 'detailPhoto';
  var image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}





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


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

// Initialize....
// Set this up as a function call that can be called along with other functions in a global window.onload event handler
	
	
function initSlideshow() {
	// Set the initial text in the photo caption
	// document.getElementById('photoCaption').innerHTML = photoCaptions[currentPhoto];
	// load first detail photo
	updateDetailPhoto();
	// Start preloading remaining detail images
	var imageObj = new Image();
	for(var i=0; i<=totalPhotos; i++) {
		//alert("loading " + detailPhotos[i]);
  	imageObj.src=detailPhotos[i];
	}
}