var thumbsShown = 5;
var minTotalThumbs = 5;
var selectedThumb = null;

var gBehaviorsArray = [];
var gImageLoader = null;


// Trigger the transition animation from the current image
// being displayed to the image at imgPath.
function setMainImage(imgPath, width, height, id, styles) {
	var dt = new Date();
	var img = Spry.$("mainImg");	
	if (!img)
		return;
	
	if(Spry.$("imgCount")) {
		Spry.$("imgCount").innerHTML = (Number(id) + 1) + " of " + count;	
	}
	
	
	selectThumb(Spry.$("p" + id));
	img.alt = Spry.$("thumb" + id).alt;
	
	cancelBehavior("mainImg");

	if (gImageLoader) {
		gImageLoader.onload = function() {};
		gImageLoader = null;
	}

	gBehaviorsArray["mainImg"] = new Spry.Effect.Opacity(img, Spry.Effect.getOpacity(img), 0, { duration: 400,
		finish: function()
		{
			Spry.$("mainImgOutline").style.marginTop = Math.round(-height/2);
			gBehaviorsArray["mainImg"] = new Spry.Effect.Size(img.parentNode, Spry.Effect.getDimensions(img.parentNode), { width: width, height: height, units:"px"}, {duration: 400,
				finish: function()
				{
					// Use an image loader to make sure we only fade in the new image after
					// it is completely loaded.
					gImageLoader = new Image();
					gImageLoader.onload = function()
					{
						img.src = gImageLoader.src;
						gImageLoader = null;
						gBehaviorsArray["mainImg"] = new Spry.Effect.Opacity(img, 0, 1, { duration: 400,
							finish: function()
							{
								gBehaviorsArray["mainImg"] = null;
								
								// Our new image is fully visible now. Remove any opacity related
								// style properties on the img to workaround the IE bug that creates
								// white dots/holes in the images. Removing the properties forces
								// IE to re-render the image correctly.	
								img.style.opacity = "";
								img.style.filter = "";
								
								//Spry.Effect.Move = function(element, fromPos, toPos, options)
								
							}});
						gBehaviorsArray["mainImg"].start();
					};
					gImageLoader.src = imgPath.split("?")[0] + "?" + dt.getTime();
				}
		  });
		  gBehaviorsArray["mainImg"].start();
		}
	});
	gBehaviorsArray["mainImg"].start();
}

// Cancel the animation behavior of the object with the given id.	
function cancelBehavior(id) {
	if (gBehaviorsArray[id]) {
		gBehaviorsArray[id].cancel();
		gBehaviorsArray[id] = null;
	}
}

/* Goes to first thumb */
function firstPanel() {
	iS.showFirstPanel();
}

/* Goes to previous thumb */
function previousPanel() {
	if(iS.getContentPanelIndex(iS.getCurrentPanel()) == 1) {
		Spry.$("prev").className = "hiddenArrow";
	}
	Spry.$("next").className = "visibleArrow";
	iS.showPreviousPanel(); 
	return false;
}

/* Goes to next thumb */
function nextPanel() {
	if (iS.getContentPanelIndex(iS.getCurrentPanel()) == count - (thumbsShown + 1)) {
		Spry.$("next").className = "hiddenArrow";
	}
	Spry.$("prev").className = "visibleArrow";
	iS.showNextPanel();
	return false;
}

/* Selects a thumb */
function selectThumb(div) {
	if (Spry.$(selectedThumb)) {
		Spry.$(selectedThumb).style.borderColor = "silver";
	}
	if (div) {
		selectedThumb = div.id;
		div.style.borderColor = "#70a8fc";
	}
}

/* Tracks how many times images or clips have been viewed */
function trackMediaView(lid, type) {
	var args = "fgn_listingRecId="+lid+"&txtTrackerType=MediaClick&txtListingType="+type+"&txtEnhancedListingType=Galleries";
	Spry.Utils.loadURL("GET", "/remoting/remoteEnhancedListingTrackerService.cfc?method=manageEnhancedListingTracker&" + args, false, null);
}