var bDebugMode	= false;
var iNumImages	= 10;
var iMaxShow	= 4;
var iFadeDelay = 3000;
var iTimerDelay = 0;

//on page load set up the Popup Layer Pic links
$(document).ready(function(){
	//WriteDebug('document.ready');

	var iImageSlot = 0;

	//hide our debug mode immediately if we aren't debugging anything
	if ( !bDebugMode ) {
		$("#debugmode").hide();
	}
	else {
		$("#debugmode").show();
		$("#debugmode").css("color","black");
	}

	return false;

	//loop through our image slots
	for(iImageSlot=1; iImageSlot<=iMaxShow; iImageSlot++) {
		WriteDebug('immediately fading in slot #' + iImageSlot);

		//show the first image that is in each slot
		//$('#header #otherimages .productimages .imagegroup' + iImageSlot + ' img:first').show();

		$('#header #otherimages .productimages .imagegroup' + iImageSlot + ' img:first').fadeIn(iFadeDelay,stuff(iImageSlot));
	}

	//return false;

	//WriteDebug('starting fade immediately on slot #1');
	//start the first image fade immediately
	//fadeImageSlot(1);

});

function stuff (iImageSlot) {

				$('#header #otherimages .productimages .imagegroup' + iImageSlot + ' img').show();

			WriteDebug('showing all images etc #' + iImageSlot);

			//set the timer delay to be 1 second more than the fade delay multiplied by the slot number minus 1
			iTimerDelay = (iFadeDelay + 1000) * (iImageSlot);

			WriteDebug('looping through slots (current #' + iImageSlot + '), set timer to be ' + iTimerDelay);

			//set the function to be called later
			setTimeout('fadeImageSlot('+iImageSlot+')',iTimerDelay);
}

function fadeImageSlot ( iImageSlot ) {
	//set the pause time to be 1 second more than the fade delay multiplied by the slot number
	var iPause = (iFadeDelay + 1000) * iMaxShow;

	WriteDebug('setting pause amount for image slot ' + iImageSlot + ' to be ' + iPause);

	//start the fade for this item
	$('#header #otherimages .productimages .imagegroup' + iImageSlot).cycle({fx: 'fade', random: 1, speed: iFadeDelay, timeout:iPause});
}

function WriteDebug (sMessage) {
	if ( bDebugMode ) {
		$("#debugmode")[0].innerHTML = sMessage + "<br />" + $("#debugmode")[0].innerHTML;
	}
}

function changeImage ( iImageSlot ) {
	//WriteDebug('changeImage ::: executing for image slot ' + iImageSlot + ', image number : ' + iImageNum);
	WriteDebug('changeImage ::: executing for image slot ' + iImageSlot);

	var iRandom	= 0;
	var bFound	= false;
	var iCount	= 0;
	var iDelay	= 0;
	var sSpaces = ""

	for (var i=0;i<iImageSlot*10;i++){
		sSpaces = sSpaces + " ";
	}

	//WriteDebug(sSpaces + ' :: Changing Image Slot ' + iImageSlot + ', with Image Number ' + iImageNum);

	//loop until we have found an image
	while ( !bFound && iCount < 20 ) {
		//get a random image
		iRandom = iGetRandomNumber(iNumImages);

		WriteDebug('changeImage ::: Generated random number: (1,10) :: ' + iRandom + ' (count :: ' + iCount + ')');

		//check to see if the current one is currently showing
		if ( bImageIsHidden(iRandom) ) {
			//WriteDebug('changeImage ::: Image ' + iRandom + ' is hidden, and so we are showing it.' + ' (count :: ' + iCount + ')');

			//initialise our variable defaults
			iImageNum = 0;

			//loop through all of the images in the dom
			for (var i=1;i<=iNumImages;i++){
				//check to see if this image has the class that we are about to apply
				if ( $("#header #otherimages .productimages img:eq(" + i + ")").hasClass("productimage" + iImageSlot) ) {
					//store the image that has the class for later use
					iImageNum = i;

					WriteDebug('changeImage ::: Found that image#' + i + ', already has class of "productimage' + iImageSlot + '". Will remove it in a sec.');
				}
			}

			//add a class to the image based on which slot is taking
			$("#header #otherimages .productimages img:eq(" + iRandom + ")").addClass("productimage" + iImageSlot);

			WriteDebug('changeImage ::: Added class to image #' + iRandom + ', "productimage' + iImageSlot + '" (count :: ' + iCount + ')');

			//fade in the next image over the top of the current one
			$("#header #otherimages .productimages img:eq(" + iRandom + ")").fadeIn(1000,function() {

				if ( iImageNum > 0 ) {

					WriteDebug('changeImage ::: finished showing image, removing class from orig ' + iImageNum + ' (count :: ' + iCount + ')');

					//remove the class from the image
					$("#header #otherimages .productimages img:eq(" + iImageNum + ")").removeClass("productimage" + iImageSlot);

					//hide the image
					$("#header #otherimages .productimages img:eq(" + iImageNum + ")").hide();

					//fade out the last one, leaving behind the first one as the rest are hidden
					$("#header #otherimages .productimages img:eq(" + iImageNum + ")").fadeOut(1000);
				}

				if ( iImageSlot == iMaxShow ) {
					changeImage ( 1 );
				}
				else {

					changeImage ( iImageSlot + 1 );
				}
			});

	//generate a random number to use to wait for a period of time before running the function (10-20 secs)
	//iDelay = iGetRandomNumber(10) + 10;
	//iDelay = iGetRandomNumber(5) + 5;
	//iDelay = 5;

	//WriteDebug('changeImage ::: generated random num for next changeImage exec is ===' + iRandom + '===' + ' (count :: ' + iCount + ')');

	//setTimeout('changeImage(' + iImageSlot + ',' + iRandom + ')',iDelay * 1000);
			
			bFound = true;
		}

		iCount++;
	}
	


}

function bImageIsHidden ( iImageNum ) {
	if ( $("#header #otherimages .productimages img:eq(" + iImageNum + ")").is(':hidden') ) {
		return true;
	}
	else {
		return false;
	}
}

function iGetRandomNumber ( iHigh ) {
	return ( Math.floor ( Math.random ( ) * iHigh + 1 ) );
}