// ISF1.11 :: Image swap-fade 
// *****************************************************
// DOM scripting by brothercake -- http://www.brothercake.com/
//******************************************************
//global object
var isf = { 'clock' : null, 'fade' : true, 'alpha' : 1, 'isLoading' : false, 'preloadAnimTimer' : 0 }
/*******************************************************/

//cache the spinner images
isf.cache = [];
for(var i=1; i <= 12; i++)
{
	isf.cache[i] = new Image();
	isf.cache[i].src = 'http://www.happy-digital.com/images/zoom-spin-'+i+'.png';
}

// WAIT SPINNER from FancyZoom.js - v1.1 - http://www.fancyzoom.com

var inBody = document.getElementsByTagName("body").item(0);

var inSpinbox = document.createElement("div");
inSpinbox.setAttribute('id', 'ZoomSpin');
inSpinbox.style.position = 'absolute';
inSpinbox.style.left = '10px';
inSpinbox.style.top = '10px';
inSpinbox.style.visibility = 'hidden';
inSpinbox.style.zIndex = '525';
inBody.insertBefore(inSpinbox, inBody.firstChild);

var inSpinImage = document.createElement("img");
inSpinImage.setAttribute('id', 'SpinImage');
inSpinImage.setAttribute('src', 'http://www.happy-digital.com/images/zoom-spin-1.png');
inSpinbox.appendChild(inSpinImage);

// Utility: Get the size of the window, and set myWidth and myHeight
// Credit to quirksmode.org

function getSize() {

	// Window Size

	if (self.innerHeight) { // Everyone but IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
		myScroll = window.pageYOffset;
	} else if (document.documentElement && document.documentElement.clientHeight) { // IE6 Strict
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
		myScroll = document.documentElement.scrollTop;
	} else if (document.body) { // Other IE, such as IE7
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
		myScroll = document.body.scrollTop;
	}

	// Page size w/offscreen areas

	if (window.innerHeight && window.scrollMaxY) {	
		myScrollWidth = document.body.scrollWidth;
		myScrollHeight = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) { // All but Explorer Mac
		myScrollWidth = document.body.scrollWidth;
		myScrollHeight = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		myScrollWidth = document.body.offsetWidth;
		myScrollHeight = document.body.offsetHeight;
	}
}

// Zoom: Start the preloading animation cycle.

isf.preloadAnimStart = function()
{
	document.getElementById("ZoomSpin").style.left = (myWidth / 2) + 'px';	// [FIXME] maybe we can center this on the isf.obj image object...
	document.getElementById("ZoomSpin").style.top = ((myHeight / 2) + myScroll) + 'px';
	document.getElementById("ZoomSpin").style.visibility = "visible";	
	isf.preloadFrame = 1;
	document.getElementById("SpinImage").src = 'http://www.happy-digital.com/images/zoom-spin-'+isf.preloadFrame+'.png';  
	isf.preloadAnimTimer = setInterval("isf.preloadAnim()", 100);
}

// Zoom: Display and ANIMATE the jibber-jabber widget.

isf.preloadAnim = function()
{
	if (isf.isLoading != false) {
		document.getElementById("SpinImage").src = 'http://www.happy-digital.com/images/zoom-spin-'+isf.preloadFrame+'.png';
		isf.preloadFrame++;
		if (isf.preloadFrame > 12) isf.preloadFrame = 1;
	} else {
		document.getElementById("ZoomSpin").style.visibility = "hidden";    
		clearInterval(isf.preloadAnimTimer);
		isf.preloadAnimTimer = 0;
	}
}


//swapfade setup function
function swapfade()
{
	getSize();

	//copy the image object 
	isf.obj = arguments[0];
	
	//copy the image src argument 
	isf.src = arguments[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';
	}
	
	//change the image alt text if defined
	if(typeof arguments[3] != 'undefined' && arguments[3] != '')
	{
		isf.obj.alt = arguments[3];
	}
	
	//if any kind of opacity is supported
	if(isf.type != 'none')
	{
		// set the multiplier
		isf.multiplier = arguments[2] * 0.5;
		
		//if the timer is already going
		if(isf.clock != null)
		{
			//reset the fade direction flag
			isf.fade = true;
			return;
		}
		//start the timer
		isf.clock = setInterval('isf.swapfade()', 60);
	}
	
	//otherwise if opacity is not supported
	else
	{
		//just do the image swap
		isf.obj.src = isf.src;
	}
};

isf.setalpha = function()
{
	//set new opacity value on element
	//using whatever method is supported
	switch(isf.type)
	{
		case 'ie' :
			arguments[0].filters.alpha.opacity = arguments[1] * 100;
			break;
			
		case 'khtml' :
			arguments[0].style.KhtmlOpacity = arguments[1];
			break;
			
		case 'moz' : 
			//restrict max opacity to prevent a visual popping effect in firefox
			arguments[0].style.MozOpacity = (arguments[1] == 1 ? 0.9999999 : arguments[1]);
			break;
			
		default : 
			//restrict max opacity to prevent a visual popping effect in firefox
			arguments[0].style.opacity = (arguments[1] == 1 ? 0.9999999 : arguments[1]);
	}
}

//swapfade timer function
isf.swapfade = function()
{
	if (isf.fade)
	{
		//if the counter has reached the bottom
		if(isf.alpha < (1.0 / 200.0))
		{
			if (!isf.isLoading)
			{
				isf.isLoading = true;
				// do the preload
				isf.imageHasLoaded = false;
				if (isf.preloadAnimTimer != 0)
				{
					clearInterval(isf.preloadAnimTimer);
					isf.preloadAnimTimer = 0;
				}
				imgPreload = new Image();
				imgPreload.onload = function()
				{
					isf.imageHasLoaded = true;
				}
				imgPreload.src = isf.src;
				return
			}
			// check if the new image has loaded
			if (isf.imageHasLoaded == false)
			{
				// still loading, display the spinner if it's not already being displayed
				if (isf.preloadAnimTimer == 0)
				{
					isf.preloadAnimStart();
				}
				return;
			}

			// clear the preload flag
			isf.isLoading = false;

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

			//clear the timer
			clearInterval(isf.clock);
			isf.clock = null;

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

		// reduce the alpha on an exponential scale
		isf.alpha = isf.alpha * isf.multiplier; 

		//set new opacity value on element
		isf.setalpha(isf.obj, isf.alpha);
	}
	else
	{	
		//if the counter has reached the top
		if(isf.alpha > (1.0 - (1.0 / 200.0)))
		{
			//clear the timer
			clearInterval(isf.clock);
			isf.clock = null;

			//reset the fade direction flag
			isf.fade = true;
			
			//reset the counter
			isf.alpha = 1;

			// all done
			return;
		}
		else
		{
			// increase the alpha on an exponential scale
			isf.alpha = isf.alpha / isf.multiplier;
		}

		// set new opacity value on element
		isf.setalpha(isf.obj, isf.alpha);
	}
};