var isf = { 'clock' : null, 'fade' : true, 'count' : 1 }

function swapfade() {
  isf.mainimgobj = document.getElementById('mainimg');
	// if the timer is not already going
	if (isf.clock == null) {
		// remember the clicked thumbnail
		isf.thumbnailObj = arguments[0];
		
		//store the supported form of opacity
		if (typeof isf.mainimgobj.style.opacity != 'undefined') {
			isf.type = 'w3c';
		} else if (typeof isf.mainimgobj.style.MozOpacity != 'undefined') {
			isf.type = 'moz';
		} else if (typeof isf.mainimgobj.style.KhtmlOpacity != 'undefined')	{
			isf.type = 'khtml';
		} else if (typeof isf.mainimgobj.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.mainimgobj.filters.length > 0 && typeof isf.mainimgobj.filters.alpha == 'object' && typeof isf.mainimgobj.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(arguments[1], 10) * 100;
			
			//create fade resolution argument as 20 steps per transition
			//again, split for the two distrinct transitions
			isf.resolution = parseInt(arguments[1], 10) * 10;
			
			//start the timer
			isf.clock = setInterval('isf.swapfade()', isf.length/isf.resolution);
		} else {
		  // otherwise if opacity is not supported just do the image swap
		  largeimg(arguments[0]);
		}
	}
};

isf.swapfade = function() {
	//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
		if ( navigator.userAgent.indexOf('Safari') > 0 ) {
		  // Safari needs it's workaround...
		  largeimg(isf.thumbnailObj);
		} else {
		  isf.mainimgobj.src = isf.thumbnailObj.src.replace("thumb_", "")
		}
		isf.mainimgobj = document.getElementById('mainimg');

		//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;
	}

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

function largeimg(thumbnailObj) {
  // Changing the image by changing the innerHTML of a div is a workaround for a Safari bug:
  // it doesn't resize the image correctly when only changing the src attribute of an img element.
  document.getElementById('mainimgdiv').innerHTML = '<img id="mainimg" STYLE="filter: alpha(opacity=100);" src="' + thumbnailObj.src.replace("thumb_", "")
	+ '" galleryimg="no" oncontextmenu="notice(); return false;" onmousedown = "right;">';
}

function onclickHandler(evt) {
  var targetElement = (evt) ? evt.target : ( (window.event) ? window.event.srcElement : null );
  if (targetElement.className == "thumbnail") {
    // If images and Quicktime are on the same page, stop any Quicktime movie before
    // changing to an image.
    if ( document.getElementById('qt') ) document.getElementById('qt').Stop();
	swapfade(targetElement, '1');
  }
}

function onmouseoverHandler(evt) {
  var targetElement = (evt) ? evt.target : ( (window.event) ? window.event.toElement : null );
  if (targetElement.className == "thumbnail" || targetElement.className == "thumbnailStatic") {
	targetElement.style.border = "2px red solid";
  }
}

function onmouseoutHandler(evt) {
  var targetElement = (evt) ? evt.target : ( (window.event) ? window.event.fromElement : null );
  if (targetElement.className == "thumbnail" || targetElement.className == "thumbnailStatic") {
	targetElement.style.border = "2px white solid";
  }
}

function showthumbs(thumbDivId, subDivIndex)
{
  // subDivs contains all the alternate thumb divs
  var subDivs = document.getElementById(thumbDivId).getElementsByTagName("DIV");
  for (i = 0; i < subDivs.length; i++) {
	subDivs[i].style.display = 'none';
  }
  subDivs[subDivIndex].style.display = 'block';
  // If images and Quicktime are on the same page, stop any Quicktime movie before
  // changing to an image.
  if ( document.getElementById('qt') ) document.getElementById('qt').Stop();
  largeimg( subDivs[subDivIndex].getElementsByTagName("IMG")[0] );
}

function showVideoThumbs(thumbDivId, subDivIndex)
{
  // subDivs contains all the alternate thumb divs
  var subDivs = document.getElementById(thumbDivId).getElementsByTagName("DIV");
  for (i = 0; i < subDivs.length; i++) {
	subDivs[i].style.display = 'none';
  }
  subDivs[subDivIndex].style.display = 'block';
}

function notice() {
  alert("Copyright Catchy Graphics");
}

function right(e) {
  if (navigator.appName == 'Netscape' && e.which == 3) {
    notice();
    return false;
  }
  if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
    notice();
    return false;
  } else return true;
}