// initialize crossfade capability
function imageCrossfadeInit() {
  // get all images in rightPic
  var images = document.getElementById('rightPic').getElementsByTagName('img');

  if(images.length>1) {  // more than one image in container
    for(var j=0; j<images.length; j++) {  // loop through images
      if(images[j].id=='');  // image doesn't have an ID
        images[j].id = 'crossfade-photo-'+j;  // dynamically give image an ID
      images[j].onclick = imageCrossfade;  // set onclick to crossfade

      if(j==0) {  // is first image
        images[j].style.zIndex = 100;  // brint to front
        images[j].style.display = '';  // show image
        imageFadeIn(images[j].id, 0);  // start fading image in
      }
      else {  // not first image
        images[j].style.display = 'none';  // hide image
        images[j].style.zIndex = 0;  // send to back
      }
    }
  }

  setInterval('imageCrossfade(1)', 3000);  // rotate header banner image
}

// crossfade two images
function imageCrossfade(direction) {
  // get all images in rightPic
  var images = document.getElementById('rightPic').getElementsByTagName('img');

  var selected = 0;  // selected image

  for(var j=0; j<images.length; j++)  // loop through images
    if(images[j].style.zIndex==100) {  // is up-front image
      selected = j;  // is selected image
      break;  // stop looking
    }

  if(direction==-1)  // move left
    selected--;  // decrement selected image
  else  // move right
    selected++;  // increment selected image

  if(selected>=images.length)  // past last image
    selected = 0;  // loop back to first
  else if(selected<0)  // before first
    selected = images.length - 1;  // loop back to last

  for(var j=0; j<images.length; j++)  // loop through images
    if(j==selected) {  // is selected image
      images[j].style.display = '';  // show image
      images[j].style.zIndex = 100;  // bring to front
      imageFadeIn(images[j].id, 0);  // start fading image in
    }
    else if(images[j].style.zIndex==100)  // previously selected image
      images[j].style.zIndex = 50;  // send to middle
    else  // isn't selected image
      images[j].style.zIndex = 0;  // send to back
}

// fades image in gradually
function imageFadeIn(photoID, opacity) {
  var photo = document.getElementById(photoID);

  if(!photo.complete) {  // image hasn't finished loading
    photo.style.opacity = 0;  // zero out opacity
    photo.style.filter = 'alpha(opacity=0)';  // zero out opacity (IE)
    setTimeout('imageFadeIn(\''+photoID+'\', 0);', 25);  // check again in a bit
  }
  else if(opacity<=100) {  // is loaded, but not fully faded in
    photo.style.opacity = opacity/100;  // set to given opacity
    photo.style.filter = 'alpha(opacity=' + opacity + ')';  // set to given opacity (IE)
    if(opacity<100)  // still not full opacity
      setTimeout('imageFadeIn(\''+photoID+'\', '+(opacity+5)+');', 25);  // continue fade in
  }
}

imageCrossfadeInit();  // prep images for crossfading