/*****************************************************
Image Fader By: Jim Hultquist - 4/27/03
Use it, just give me Credit!

The following must be added to the top of every HTML page that calls
this script:

<SCRIPT LANGUAGE=JavaScript SRC="Fade.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
	
if (navigator.appName.indexOf("Microsoft")!=-1) {
	var IncIn = 5; //Fade in time 1-100  100= switch on
	var IncOut = -5; } //Fade out time 1-100 100=switch off
	
else { //netscape fades faster than i.e. - choose smaller number
	var IncIn = 1.5; //Fade in time 1-100  100= switch on
	var IncOut = -1.5; } //Fade out time 1-100 100=switch off
	
	var SI = new Array; //Set Interval value
	var inc = new Array; //increment value
	var opac = new Array; // opacity value
	var Out = new Array; //Boolean to signal mouse out/over
</SCRIPT>

To set up the fade:
Set up a table and make the opening image the background of the cell.  Then use
the following code to set up the invisable image (the one to be faded)
over the background.  The MouseOver will fade in the invisable image, fading
out the background image.
 
<TABLE border="0" cellpadding="0" cellspacing="0" bgcolor="white">
<tr>
<td background="images/photo/photo02i.jpg">
	<a href="photo02.html"
		onMouseOver="FadeIn(2)" 
		onMouseOut="FadeOut(2)">
			<img src="images/photo/photo02.jpg" name="image2" border=0" 
				style="filter:alpha(opacity=0); -moz-opacity:0;"/>
	</a>
</td>
</tr></table>

Note the following crucial variables:
The image names can be anything you want.
The img name must be called "image#" where the # is the same integer as the 
integer you are passing to FadeIn and FadeOut.

******************************************************/


FadeIn = function(num){
  var n = num;  //must declare n in every function
  Out[n] = false;  //MouseOut has not occured.	
  clearInterval (SI[n]); //clears first SI when mouseover happens before clear below.
  inc[n] = IncIn;
	
  if (document.images['image'+n].style.MozOpacity) { //is this netscape?
	opac[n]=(document.images['image'+n].style.MozOpacity) * 100;}
  else if (document.images['image'+n].filters) { //is this i.e.
	opac[n]=document.images['image'+n].filters.alpha.opacity; }

  SI[n]=setInterval('timeit('+n+')', 1);  //change '1' for to higher number for slower fade
}


FadeOut = function(num) {
  var n = num;
  Out[n] = true; //MouseOut has occured.
  
  if (opac[n] > 98) inc[n] = IncOut; //if opacity is maxed fade it out
	else inc[n] = IncIn; //if opacity hasn't yet reached max, fade it in
}

//This is a local function only used by FadeIn and FadeOut
function timeit(num){
  var n = num;
  opac[n]+=inc[n];

 if (opac[n] > 99) {
	inc[n] = 0;	//if opacity reaches max, stop fadeing and wait for mouseout
	opac[n] = 99; //netscape gets snippy above this number	
	 	if (Out[n]) inc[n] = IncOut; //if mouseout has occured - fade it
  } 

  if (opac[n] < 0) clearInterval (SI[n]) //clear when fade is complete
	 
  if (document.images['image'+n].style.MozOpacity) { //is this netscape?
	document.images['image'+n].style.MozOpacity=opac[n]/100;}
  else if (document.images['image'+n].filters) { //is this i.e.
	document.images['image'+n].filters.alpha.opacity=opac[n];}
	 
}

function stats(num){
	var n = num;
	window.status=(opac + "inc = " + inc[n]); 
	}