/********Image Crossfader************************************************************************
/*
/* This set of functions scrolls through a set of images with crossfading.
/*
/* Enter "startScroll();" into the html body's "onload" event handler to start the function.
/*
/* The following is the correct format for the HTML. Place it anywhere on your page and load it
/* with the first two pictures in your picture array:
/*
/*       <div style="position: relative; width: 98%; height: 286px; margin: auto; background-color: black;">
/*        <img id="headimg1" src="imgs/site/ffhome1.jpg" style="position: absolute; left: 0px; top: 0px; border: 1px solid #aaa; width: 100%; z-index: 100;" />
/*        <img id="headimg2" src="imgs/site/ffhome2.jpg" style="position: absolute; left: 0px; top: 0px; border: 1px solid #aaa; width: 100%; z-index: 99" />
/*       </div>
/*
/*
/* Variables --
/*
/* imgArray is self explanatory, baseImgId is the base of the id for the two img tags, (in the
/* above example, it would be 'headimg'), dispTime is how long you want each img to be shown, fadeSpd is the
/* speed in milliseconds that the opacity is changed, and fadeDegree is the degree by which the
/* opacity is changed. (Opacity is a value from 0 to 100, so to get a rougher but faster fade,
/* you can increase the degree).
/*
/* If you want it to stop scrolling after a certain number of images, enter that number
/* (specifically, the number of times you want it to CHANGE images) into stopAfter. Otherwise,
/* leave it at -1;
/*
/* For smoother operation, you may want to use an image preloading function, though the images
/* load in the background anyway.
/*
/***********************************************************************************************/

/***-- Editable Parameters --***/
var imgArray = new Array('imgs/scroll1.jpg','imgs/scroll2.jpg','imgs/scroll3.jpg','imgs/scroll4.jpg','imgs/scroll5.jpg','imgs/scroll6.jpg','imgs/scroll7.jpg');
var baseImgId = 'headimg';
var dispTime = 6; //In Seconds
var fadeSpd = 20; //In Milliseconds
var fadeDegree = 1; //Interval of Fade (0-100)
var stopAfter = -1; //Set to -1 for unlimited scrolling

/***-- Meat --***/
var chngCnt;
var stp;
var nxtPic = 1;
var curDiv = 1;
var opacity = 100;

function startScroll() {
 stp = 0;
 chngCnt = 0;
 setTimeout('fadeOut();',dispTime*1000);
}

function stopScroll() {
 stp = 1;
}

function fadeOut() {
 if (opacity > 0) {
  opacity = opacity-fadeDegree;
  chngOpcty(opacity);
  setTimeout('fadeOut();',fadeSpd);
 } else {
  opacity = 0;
  chngOpcty(opacity);
  var chng = chngPic();
  if (chng) {
   setTimeout('fadeIn()',dispTime*1000);
  } else {
   stopScroll();
  }
 }
}

function fadeIn() {
 if (opacity < 100) {
  opacity = opacity+fadeDegree;
  chngOpcty(opacity);
  setTimeout('fadeIn();',fadeSpd);
 } else {
  opacity = 100;
  chngOpcty(opacity);
  var chng = chngPic();
  if (chng) {
   setTimeout('fadeOut()',dispTime*1000);
  } else {
   stopScroll();
  }
 }
}

function chngOpcty(op) {
 var opMoz = op/100;
 document.getElementById(baseImgId+'1').style.opacity = opMoz;
 document.getElementById(baseImgId+'1').style.filter = 'alpha(opacity='+opacity+')';
}

function chngPic() {
 document.getElementById(baseImgId+curDiv).src = imgArray[nxtPic];
 nxtPic++;
 if (nxtPic == imgArray.length) {
  nxtPic = 0;
 }
 if (curDiv == 1) {
  curDiv++;
 } else {
  curDiv--;
 }
 chngCnt++;
 if (chngCnt-1 == stopAfter || stp == 1) {
  return false;
 }
 return true;
}