// global gallery data sotrage object
var galleryData = new Array();
var galleryIndexes = new Array();
var currentGallery;
var currentImageLoad;

// move to next image
function nextImage( productId )
{
	// get next image from array
	galleryIndexes[ productId ] += 1;
	// recycle to beginning when we've passed the end of the array
	if( galleryIndexes[ productId ] > galleryData[ productId ].length - 1 )
	{
		galleryIndexes[ productId ] = 0;
	}
	currentImageLoad = productId;
	fadeImage( productId );
}

// move to next image
function prevImage( productId )
{
	// get previous image from array
	galleryIndexes[ productId ] -= 1;
	// recycle to end when we've passed the beginning of the array
	if( galleryIndexes[ productId ] < 0 )
	{
		galleryIndexes[ productId ] = galleryData[ productId ].length - 1;
	}
	currentImageLoad = productId;
	fadeImage( productId );
}

function fadeImage( productId )
{
	// fade out image, then set new image
	Effect.Fade( $( productId + '_image' ), { duration:.2, afterFinish:setImage } );
}

function appearImage()
{
	// set image in html source
	$( currentImageLoad + '_image' ).src = galleryData[ currentImageLoad ][ galleryIndexes[ currentImageLoad ] ];
	// fade in new image
	Effect.Appear( $( currentImageLoad + '_image' ), { duration:.3 } );
}

function setImage()
{
	// clear current image
	$( currentImageLoad + '_image' ).hide();
	$( currentImageLoad + '_image' ).src = null;
	// preload image. call the "appearImage" function when it's done
	var image = new Image();
	image.onload = appearImage;
	image.src = galleryData[ currentImageLoad ][ galleryIndexes[ currentImageLoad ] ];
}