// css + js image fade in effect
// http://clagnut.com/sandbox/imagefades/

/*
The photo is a straightforward image in a div. Each has an id:

<div id='photoholder'>
	<img src='/images/someimagefile.jpg' alt='your description here' id='thephoto' />
</div>

The 'loading…' image is set as the background to the photoholder div, and the photoholder is 
sized to match the photo:

#photoholder {
  width:450px;
  height:338px;
  background:#fff url('/images/loading.gif') 50% 50% no-repeat;
}
#thephoto {
  width:450px;
  height:338px;
}

To prevent a cached photo from displaying before it has been faded in, when need to make
the photo hidden. JavaScript is used to write a style rule so that users without JavaScript 
enabled will not have the photo permanently hidden:

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

*/

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

function initImage() {
	imageId = "thephoto";
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}

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

function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 2;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 10);
    }
  }
}

window.onload = function() {initImage()}