document.write("<style type='text/css'>#ibafter {visibility:hidden;}</style>");
document.write("<style type='text/css'>.subimage {visibility:hidden;}</style>");


//The initImage function makes the photo completely tranpsarent by using the setOpacity function to set its opacity to zero. The photo can then be made visible and faded in using the fadeIn function:

function initImage() {
  imageId = 'ibafter';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0,1,50,showImages);
}

//The setOpacity function is passed an object and an opacity value. It then sets the opacity of the supplied object using four proprietary ways. It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting the value to 99.999% instead.

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

//The fadeIn function uses a Timeout to call itself every 100ms with an object Id and an opacity. The opacity is specified as a percentage and increased rate% at a time. The loop stops once the opacity reaches 100%:

function fadeIn(objId,opacity,rate,triggerpercent,ontrigger) {
  if (document.getElementById) {
    var obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += rate;
	  if ( triggerpercent > 0  && ontrigger!=null && opacity >= triggerpercent ) {
		  ontrigger();
		  triggerpercent = 0;
	  }
      //window.setTimeout("fadeIn('"+objId+"',"+opacity+"',"+rate+")", 100);
      window.setTimeout(function() { fadeIn(objId,opacity,rate,triggerpercent,ontrigger); }, 100);
    }
  }
}

function getElementByClass(tagName,className)  {
	var arrElements = (tagName == "*" && document.all)? document.all : document.getElementsByTagName(tagName);
	var arrReturnElements = new Array();
	strClassName = className.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}

function showTooltips() {
    //document.getElementById('tooltip').style.visibility = 'visible';
	tooltipVisibility(true);
}

function showImages() {
	var elems = getElementByClass("img","subimage");
	for(var i=0; i<elems.length; i++) {
		elem = elems[i];
		//elem.className = "subimagevisible";
 		setOpacity(elem, 0);
		elem.style.visibility = 'visible';
		fadeIn(elem.id,0,2,50,showTooltips); // they will all set visibility, but ok
	}
}

tooltipVisibility(false);
window.onload = function() {initImage();}