//variable to hold each face
var faces1 = [];
faces1[0] = {'src':'images/face1_1.gif'};
faces1[1] = {'src':'images/face1_2.gif'};
var facePair1 = {'imgId':'faceImage1', 'faces':faces1, 'currentIndex':0};

var faces2 = [];
faces2[0] = {'src':'images/face2_1.gif'};
faces2[1] = {'src':'images/face2_2.gif'};
var facePair2 = {'imgId':'faceImage2', 'faces':faces2, 'currentIndex':0};

var faces3 = [];
faces3[0] = {'src':'images/face3_1.gif'};
faces3[1] = {'src':'images/face3_2.gif'};
var facePair3 = {'imgId':'faceImage3', 'faces':faces3, 'currentIndex':0};

var faces4 = [];
faces4[0] = {'src':'images/face4_1.gif'};
faces4[1] = {'src':'images/face4_2.gif'};
var facePair4 = {'imgId':'faceImage4', 'faces':faces4, 'currentIndex':0};

var facePairs = [];
facePairs[0] = facePair1;
facePairs[1] = facePair2;
facePairs[2] = facePair3;
facePairs[3] = facePair4;

var currentPair = 0;

//global object
var isf = { 'clock' : null, 'fade' : true, 'count' : 1 , 'imageIndex':0 }
/*******************************************************/

isf.transitionLength=4;

//swapfade setup function
function startImageTransitions()
{

	//clear initial interval
	isf.startDelay=null;
	
	//if the timer is not already going
	if(isf.clock == null)
	{
		
		//cache all images
		isf.cache = [];
		var imageCount = 0;
		for(var i=0; i<facePairs.length; i++)
		{
			isf.cache[imageCount] = new Image;
			isf.cache[imageCount].src = facePairs[i].faces[0];
			imageCount++;
			isf.cache[imageCount] = new Image;
			isf.cache[imageCount].src = facePairs[i].faces[1];
		}
		//copy the image object 
		isf.obj = document.getElementById(facePairs[currentPair].imgId);
		//set the image source to the first image
		isf.src = facePairs[currentPair].faces[1].src;
		facePairs[currentPair].currentIndex=1;
		
		//store the supported form of opacity
		if(typeof isf.obj.style.opacity != 'undefined')
		{
			isf.type = 'w3c';
		}
		else if(typeof isf.obj.style.MozOpacity != 'undefined')
		{
			isf.type = 'moz';
		}
		else if(typeof isf.obj.style.KhtmlOpacity != 'undefined')
		{
			isf.type = 'khtml';
		}
		else if(typeof isf.obj.filters == 'object')
		{
			//weed out win/ie5.0 by testing the length of the filters collection (where filters is an object with no data)
			//then weed out mac/ie5 by testing first the existence of the alpha object (to prevent errors in win/ie5.0)
			//then the returned value type, which should be a number, but in mac/ie5 is an empty string
			isf.type = (isf.obj.filters.length > 0 && typeof isf.obj.filters.alpha == 'object' && typeof isf.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none';
		}
		else
		{
			isf.type = 'none';
		}
		
		//if any kind of opacity is supported
		if(isf.type != 'none')
		{
			//copy and convert fade duration argument 
			//the duration specifies the whole transition
			//but the swapfade is two distinct transitions
			isf.length = parseInt(isf.transitionLength, 10) * 500;
			
			//create fade resolution argument as 20 steps per transition
			//again, split for the two distrinct transitions
			isf.resolution = parseInt(isf.transitionLength, 10) * 10;
			
			//start the timer
			isf.clock = setInterval('isf.swapfade()', isf.length/isf.resolution);
			
			
		}
		
		//otherwise if opacity is not supported
		else
		{
			//just do the image swap
			isf.obj.src = isf.src;
		}
		
	}
};


//swapfade timer function
isf.swapfade = function()
{
	var gotoNextFacePair = false;
	
	//increase or reduce the counter on an exponential scale
	isf.count = (isf.fade) ? isf.count * 0.9 : (isf.count * (1/0.9)); 
	
	//if the counter has reached the bottom
	if(isf.count < (1 / isf.resolution))
	{
		//clear the timer
		clearInterval(isf.clock);
		isf.clock = null;

		//do the image swap
		isf.obj.src = isf.src;

		//reverse the fade direction flag
		isf.fade = false;
		
		//restart the timer
		isf.clock = setInterval('isf.swapfade()', isf.length/isf.resolution);

	}
	
	//if the counter has reached the top
	if(isf.count > (1 - (1 / isf.resolution)))
	{
		//clear the timer
		clearInterval(isf.clock);
		isf.clock = null;

		//reset the fade direction flag
		isf.fade = true;
		
		//reset the counter
		isf.count = 1;
		
		//flag to go to next image
		gotoNextFacePair = true;
	}

	//set new opacity value on element
	//using whatever method is supported

	switch(isf.type)
	{
		
		case 'ie' :
			isf.obj.filters.alpha.opacity = isf.count * 100;
			break;
			
		case 'khtml' :
			isf.obj.style.KhtmlOpacity = isf.count;
			break;
			
		case 'moz' : 
			//restrict max opacity to prevent a visual popping effect in firefox
			isf.obj.style.MozOpacity = (isf.count == 1 ? 0.9999999 : isf.count);
			break;
			
		default : 
			//restrict max opacity to prevent a visual popping effect in firefox
			isf.obj.style.opacity = (isf.count == 1 ? 0.9999999 : isf.count);
	}
	
	//check if we are done with this image transition
	if(gotoNextFacePair){
		//get the next face pair
		currentPair++;
		if(currentPair>3){
			currentPair = 0;
		}
		var nextFacePair = facePairs[currentPair];
		isf.obj = document.getElementById(nextFacePair.imgId);
		
		if(nextFacePair.currentIndex==0){
			isf.src = nextFacePair.faces[1].src;
			nextFacePair.currentIndex=1;
		}else{
			isf.src = nextFacePair.faces[0].src;
			nextFacePair.currentIndex=0;
		}

		//restart the timer
		isf.clock = setInterval('isf.nextTransition()',2000);
	}
	
	//alert("done swapFade");
};

isf.nextTransition = function()
{
	clearInterval(isf.clock);
	//reset the swap clocking
	isf.clock = setInterval('isf.swapfade()', isf.length/isf.resolution);
};