var currentCount; //the current index in the LIs array - controls which slide shows.
var LIs; //list of li tags in the slideshow
var the_interval = 6; //seconds
var the_transition = 600; //1200; //milliseconds
var useTransitions = 1; //0 = no transitions, 1 = transitions.  Probably still need the_transition to be set to a non-zero.
/* Timer variables declared here so we can cancel them if needed later */
var timey;
var fadeToWhite;
var in10;
var in20;
var in30;
var in40;
var in50;
var in60;
var in70;
var in80;
var in90;
var in100;
var out0;
var out10;
var out20;
var out30;
var out40;
var out50;
var out60;
var out70;
var out80;
var out90;

var in15;
var in25;
var in35;
var in45;
var in55;
var in65;
var in75;
var in85;
var in95;
var in5;
var out5;
var out15;
var out25;
var out35;
var out45;
var out55;
var out65;
var out75;
var out85;
var out95;
/* starts the slideshow - call on page load. */
function startSlideshow(){

  currentCount = 0; 
  changeSlide(true, false);

  //want this to run every x seconds (unless cancelled):
  timey = setInterval("changeSlide(true, true)", (the_interval * 1000));
}
/* keepGoing means we are going to show fadeOut in a few seconds
   doTransition means do a fadeIn right now
*/
function changeSlide(keepGoing, doTransition){
  var theUL = document.getElementById("slideShowUL");
 
  //get the length right for the list of LI tags in slideshow
  var l=0;
  for(var j=0; j<theUL.childNodes.length; j++){
    if(theUL.childNodes[j].id){
      if(theUL.childNodes[j].id.indexOf("slide") >= 0){
        l++;
      }
    }
  }
  //initialize the array
  var theLIs = new Array(l);
  
  //put the relevant LI tags into the array
  var k=0;
  for(var j=0; j<theUL.childNodes.length; j++){
    if(theUL.childNodes[j].id){
      if(theUL.childNodes[j].id.indexOf("slide") >= 0){
        theLIs[k] = theUL.childNodes[j];
        k++;
      }
    }
  }

  //go through the LI tags
  for(var i=0; i<theLIs.length; i++){

    if(i == currentCount){
      //show this slide and mark the thumb as "shown"
      theLIs[i].style.display = "block";
      makeThumb(i + 1, true);
    }else{
      //hide this slide
      theLIs[i].style.display = "none";
      makeThumb(i + 1, false);
    }
  }
  
  //increment so next time the next slide shows.
  currentCount += 1;
  currentCount = currentCount % theLIs.length; //this wraps it back to 0
  
 //if we want to fade into the image
 if(doTransition == true){
   transition(0);
 }
 
 //if we keep going, we need to transition out of the image
 if(keepGoing == true){
   fadeToWhite = setTimeout("transition(1)", ((the_interval * 1000) - (the_transition / 2)));
   //math: assumes the transition runs half on each image (fade in = 100 ms, fade out = 100 ms if the transition = 200ms)
 }
}
/* isIn = 1 means we are fading into white */
function transition(isIn){
 //turning off transitions
 if(useTransitions == 1){
    //what we are doing is setting up a series of timers to change the CSS class at intervals to create the illusion of a fade in/out.
    if(isIn == 1){
      in5  = setTimeout("transitionValue('cover5')",   ( 1 * ((the_transition / 2) / 20 )));
      in10 = setTimeout("transitionValue('cover10')",  ( 1 * ((the_transition / 2) / 10 )));
      in15 = setTimeout("transitionValue('cover15')",  ( 3 * ((the_transition / 2) / 20 )));
      in20 = setTimeout("transitionValue('cover20')",  ( 2 * ((the_transition / 2) / 10 )));
      in25 = setTimeout("transitionValue('cover25')",  ( 5 * ((the_transition / 2) / 20 )));
      in30 = setTimeout("transitionValue('cover30')",  ( 3 * ((the_transition / 2) / 10 )));
      in35 = setTimeout("transitionValue('cover35')",  ( 7 * ((the_transition / 2) / 20 )));
      in40 = setTimeout("transitionValue('cover40')",  ( 4 * ((the_transition / 2) / 10 )));
      in45 = setTimeout("transitionValue('cover45')",  ( 9 * ((the_transition / 2) / 20 )));
      in50 = setTimeout("transitionValue('cover50')",  ( 5 * ((the_transition / 2) / 10 )));
      in55 = setTimeout("transitionValue('cover55')",  ( 11 * ((the_transition / 2) / 20 )));
      in60 = setTimeout("transitionValue('cover60')",  ( 6 * ((the_transition / 2) / 10 )));
      in65 = setTimeout("transitionValue('cover65')",  ( 13 * ((the_transition / 2) / 20 )));
      in70 = setTimeout("transitionValue('cover70')",  ( 7 * ((the_transition / 2) / 10 )));
      in75 = setTimeout("transitionValue('cover75')",  ( 15 * ((the_transition / 2) / 20 )));
      in80 = setTimeout("transitionValue('cover80')",  ( 8 * ((the_transition / 2) / 10 )));
      in85 = setTimeout("transitionValue('cover85')",  ( 17 * ((the_transition / 2) / 20 )));
      in90 = setTimeout("transitionValue('cover90')",  ( 9 * ((the_transition / 2) / 10 )));
      in95 = setTimeout("transitionValue('cover95')",  ( 19 * ((the_transition / 2) / 20 )));
      in100 = setTimeout("transitionValue('cover100')", (10 * ((the_transition / 2) / 10 )));

    }else{
      out95 = setTimeout("transitionValue('cover95')", ( 1 * ((the_transition / 2) / 20 )));
      out90 = setTimeout("transitionValue('cover90')", ( 1 * ((the_transition / 2) / 10 )));
      out85 = setTimeout("transitionValue('cover85')", ( 3 * ((the_transition / 2) / 20 )));
      out80 = setTimeout("transitionValue('cover80')", ( 2 * ((the_transition / 2) / 10 )));
      out75 = setTimeout("transitionValue('cover75')", ( 5 * ((the_transition / 2) / 20 )));
      out70 = setTimeout("transitionValue('cover70')", ( 3 * ((the_transition / 2) / 10 )));
      out65 = setTimeout("transitionValue('cover65')", ( 7 * ((the_transition / 2) / 20 )));
      out60 = setTimeout("transitionValue('cover60')", ( 4 * ((the_transition / 2) / 10 )));
      out55 = setTimeout("transitionValue('cover55')", ( 9 * ((the_transition / 2) / 20 )));
      out50 = setTimeout("transitionValue('cover50')", ( 5 * ((the_transition / 2) / 10 )));
      out45 = setTimeout("transitionValue('cover45')", ( 11 * ((the_transition / 2) / 20 )));
      out40 = setTimeout("transitionValue('cover40')", ( 6 * ((the_transition / 2) / 10 )));
      out35 = setTimeout("transitionValue('cover35')", ( 13 * ((the_transition / 2) / 20 )));
      out30 = setTimeout("transitionValue('cover30')", ( 7 * ((the_transition / 2) / 10 )));
      out25 = setTimeout("transitionValue('cover25')", ( 15 * ((the_transition / 2) / 20 )));
      out20 = setTimeout("transitionValue('cover20')", ( 8 * ((the_transition / 2) / 10 )));
      out15 = setTimeout("transitionValue('cover15')", ( 17 * ((the_transition / 2) / 20 )));
      out10 = setTimeout("transitionValue('cover10')", ( 9 * ((the_transition / 2) / 10 )));
      out5 = setTimeout("transitionValue('cover5')", ( 19 * ((the_transition / 2) / 20 )));
      out0 = setTimeout("transitionValue('coverNo')", (10 * ((the_transition / 2) / 10 )));
    }
  }
 
}
/* empties the thumbnail container */
function clearThumbs(){
  var thumbContainer = document.getElementById("slideshowThumbs");
  if(thumbContainer){
    thumbContainer.innerHTML = "";
  }
}
/* adds a thumbnail to the thumbnail container
  number is the index of the thumb (1 based)
  isSelected true/false means is this the slide that is showing 
  If the thumbnail is already there, we simply change its css class.
*/
function makeThumb(number, isSelected){
  var thumbContainer = document.getElementById("slideshowThumbs");
  if(thumbContainer){
    var thumbnail = document.getElementById("thumbNail_" + number);
    if(thumbnail){
        if(isSelected){
          thumbnail.className = "selected";
        }else{
          thumbnail.className = "";
        }
      }
    else{
      //we need to dynamically create the thumbnail:
      var thumby = document.createElement("div");
      thumby.id = "thumbNail_" + number;
      thumby.innerHTML = "<a onclick='clickLink(\"" + number + "\");return false;'>" + number + "</a>";
      if(isSelected){
        thumby.className = "selected";
      }
      thumbContainer.appendChild(thumby)
    }
  }
}
/* sets the css class for the "coverUp" div to the passed in class name (clas) */
function transitionValue(clas){
  var theDiv;
  theDiv = document.getElementById("coverUp");
  //we are skipping the transition for IE6 due to their iffy support for PNGs with transparencies
  if(!isIE6 || isIE6 == 0){
    if(theDiv){
      theDiv.className = clas;
    }   
  }

}
/* if you click a thumbnail, we want to go to that slide and cancel the looping */
function clickLink(numberOfLink){

  //clear all possible timers
  clearTimeout(fadeToWhite);
  clearInterval(timey);
  clearTimeout(timey);
  
  clearTimeout(in10);
  clearTimeout(in20);
  clearTimeout(in30);
  clearTimeout(in40);
  clearTimeout(in50);
  clearTimeout(in60);
  clearTimeout(in70);
  clearTimeout(in80);
  clearTimeout(in90);
  clearTimeout(in100);
  clearTimeout(out90);
  clearTimeout(out80);
  clearTimeout(out70);
  clearTimeout(out60);
  clearTimeout(out50);
  clearTimeout(out40);
  clearTimeout(out30);
  clearTimeout(out20);
  clearTimeout(out10);
  clearTimeout(out0); 
  
  clearTimeout(in15);
  clearTimeout(in25);
  clearTimeout(in35);
  clearTimeout(in45);
  clearTimeout(in55);
  clearTimeout(in65);
  clearTimeout(in75);
  clearTimeout(in85);
  clearTimeout(in95);
  clearTimeout(in5);
  clearTimeout(out95);
  clearTimeout(out85);
  clearTimeout(out75);
  clearTimeout(out65);
  clearTimeout(out55);
  clearTimeout(out45);
  clearTimeout(out35);
  clearTimeout(out25);
  clearTimeout(out15);
  clearTimeout(out5); 
  //set the currentCount = to the link clicked (currentCount is 0 based, number of link is 1 based)
  currentCount = numberOfLink - 1;
  
  //fade away
  transition(1);
  
  //schedule the slide change for when the transition is complete
  timey = setTimeout("changeSlide(false, true)", (the_transition / 2));

  //if we want it to start rotatation after a manual change...
  //we would also need to change the first parameter passed to changeSlide in the line above this one...
  //in other words: timey = setTimeout("changeSlide(true, true)", (the_transition / 2));
  //timey = setInterval("changeSlide(true, true)", (the_interval * 1000));
  
}