// time to wait for switching next image:
var fpi_LoopDelay = 4000;

// amount of fade per step:
var fpi_FadeAmount = 0.03;

// amount of time between fading images:
var fpi_FadeDelay = 30;

// general timer var:
var fpi_Timer;
var fpi_TimerFade;

// when switch, set old image to know for looping:
var fpi_Old;

// set image gather mode:
var fpi_Current = 0;
var fpi_Old = false;
var fpi_Total = 0;
var fpi_List = new Array();

// start looping when DOM has loaded:
AttachEvent(window, 'load', function(e){fti_Initialize();}, false);

// gather images and set timer:
function fti_Initialize()
{
	fpi_List = E('fpi_main').getElementsByTagName('div');

	fpi_Total = fpi_List.length;

	fpi_Timer = setTimeout(fpi_StartLoop, fpi_LoopDelay);
}

// loop sequence:
function fpi_StartLoop()
{
	if(!E('fpi_main'))
	{
		return fpi_Shutdown();
	}

	// if none or only 1 image exist, leave it as is:
	if(fpi_Total <= 1)
	{
		return false
	}
	
	// if the last image is in the loop, switch to first:
	if(fpi_Current == fpi_Total - 1)
		var nextLoop = 0;

	// else just get next image:
	else
		var nextLoop = fpi_Current + 1;

	// (image_from, image_to)
	fpi_SwitchImage(fpi_Current, nextLoop);
}

function fpi_SwitchImage(imgFrom, imgTo)
{
	if(!E('fpi_main'))
	{
		return fpi_Shutdown();
	}

	// return false when clicking same button:
	if(fpi_Current == imgTo)
		return false;

	// when switching image manually, clear the timer:
	clearTimeout(fpi_Timer);

	// if old exists, reset previous slide (this happens when you manually click some button while in middle of slide:):
	if(fpi_Old)
	{
		clearTimeout(fpi_TimerFade);
		fpi_FadeImage(fpi_Old, fpi_Current, 0);
	}

	// set old new for switching:
	fpi_Old = imgFrom;
	fpi_Current = imgTo;
	
	// set old image on top of stack, and display new image:
	E('fpi_img_'+fpi_Old).style.zIndex = 4;
	E('fpi_img_'+fpi_Current).style.zIndex = 3;

	// hide old image / display new image:
	fpi_FadeImage(imgFrom, imgTo, 1);

	// set next loop
	fpi_Timer = setTimeout(fpi_StartLoop, fpi_LoopDelay);
}

function fpi_FadeImage(imgFrom, imgTo, currentFade)
{
	if(!E('fpi_main'))
	{
		return fpi_Shutdown();
	}

	// finished fading:
	if(currentFade - fpi_FadeAmount <= 0)
	{
		// set final fade:
		fpi_SetFade(imgFrom, 0);
		fpi_SetFade(imgTo, 1);

		E('fpi_img_'+imgFrom).style.zIndex = 2;
		E('fpi_img_'+imgTo).style.zIndex = 3;

		fpi_Old = false;
	}
	else
	{
		var nextFade = currentFade - fpi_FadeAmount;

		fpi_SetFade(imgFrom, nextFade);
		fpi_SetFade(imgTo, 1 - nextFade);

		fpi_TimerFade = setTimeout(function(e){fpi_FadeImage(imgFrom, imgTo, nextFade);}, fpi_FadeDelay);
	}
}

function fpi_SetFade(i, fadeAmount)
{
	if(!E('fpi_main'))
	{
		return fpi_Shutdown();
	}

	/*
	E("fpi_img_"+i).setAttribute("opacity", "0"); // Standard: FF gt 1.5, Opera, Safari
	E("fpi_img_"+i).setAttribute("filter", "alpha(opacity=0)"); // IE lt 8
	E("fpi_img_"+i).setAttribute("-ms-filter", "alpha(opacity=0)"); // IE 8 
	E("fpi_img_"+i).setAttribute("-khtml-opacity", "0"); // Safari 1.
	E("fpi_img_"+i).setAttribute("-moz-opacity", "0"); // FF lt 1.5, Netscape
	*/

	if(fadeAmount == 0)
	{
		/* Standard: FF gt 1.5, Opera, Safari */
		E("fpi_img_"+i).style.opacity = 0;

		/* IE lt 8 */
		E("fpi_img_"+i).style.filter = 'alpha(opacity=0)';
	}
	else if (fadeAmount == 1)
	{
		/* Standard: FF gt 1.5, Opera, Safari */
		E("fpi_img_"+i).style.opacity = 1;

		/* IE lt 8 */
		E("fpi_img_"+i).style.filter = 'alpha(opacity=100)';
	}
	else
	{
		/* Standard: FF gt 1.5, Opera, Safari */
		E("fpi_img_"+i).style.opacity = fadeAmount;

		/* IE lt 8 */
		E("fpi_img_"+i).style.filter = 'alpha(opacity='+parseInt(fadeAmount * 100)+')';
	}
}

function fpi_Shutdown()
{
	if(fpi_Old)
	{
		clearTimeout(fpi_TimerFade);
		fpi_Old = false;
	}
	
	clearTimeout(fpi_Timer);
	fpi_Current = 0;

	fpi_Timer = setTimeout(fpi_StartLoop, fpi_LoopDelay);

	return false;
}