// Image Browser

// slide show times
SLIDESHOWINTERVAL      = 5000; // normal interval in millisecs
SLIDESHOWFIRSTINTERVAL = 300;  // interval to first
SLIDESHOWCHECKINTERVAL = 1000; // after the interval is up, recheck for image loading after 1 sec
// the three above must be different!

// single image times
QUICKCHECKINTERVAL = 100;  // a cached image doesn't load instantly, so check quickly
IMAGECHECKINTERVAL = 1000;  // if the image wasn't loaded after the quick check, use this interval
// the two above must be different!

var currentimageindex = 0;
var showturnedon = 0;
var loadingimage = "../images/loading.gif";
var screenimage = "../images/screen.gif";

function showslideno (i) { 
showslide (i,QUICKCHECKINTERVAL);}


function startslideshow() {
  showrunning = 1;
  showturnedon = 1; 
  currentimageindex = slide.length-1;
  nextslide(SLIDESHOWFIRSTINTERVAL);  // interval = time to first slide
}

function startselector() {
  startslideshow();  
}

function stopslideshow() {
  showturnedon = 0;  
}

function change(){ // this is for the pulldown menu
showslide (slide.selectedIndex);}

function showslide (index, interval)
{
    stopslideshow();
    if (interval == IMAGECHECKINTERVAL) { messageloading(); }  // if not first time through
    requiredimageindex = index;   // to ensure that the slide show starts at the right place
    requestimage (index);
    if (imageloaded(index))   // if image fully loaded
    {
      //imageFadeIn(document.images.show);
	  //imageFadeOut(document.images.behind); 
      //document.images.behind.src = document.images.show.src;  // put old one behind
      document.images.show.src = bufferimages[index].src;  // display new one
      currentimageindex = index;
      commenton (index);
    }
    else
    {
      window.setTimeout("showslide("+index+", IMAGECHECKINTERVAL)", interval);
    }
}

function messageon(msg) {
 if (messagearea) {
	 descr.innerHTML = msg; 
	 imageFadeOut(document.images.screen);
 }
}
function commenton(index) {
 if (messagearea) {
	 messageon(comment[index]); 
 }
}

function messageoff() {
messageon(""); 
}

function messageloading() {
messageon("Loading..."); }

showrunning = 0;
requiredimageindex = -1;

function nextslide(interval) 
{
  if (showturnedon) 
  {
    if (interval == SLIDESHOWCHECKINTERVAL) { messageloading(); }  // if not first time through
    if (requiredimageindex == -1)  // if this is the first time into this function
    {
      requiredimageindex = (currentimageindex == slide.length-1) ? 0 : currentimageindex+1;
      requestimage (requiredimageindex);   // request the next image now and then wait to display it
    }
    if (imageloaded(requiredimageindex))   // if the previously requested image is fully loaded
    {
        if (interval != SLIDESHOWFIRSTINTERVAL) { 
		    imageFadeIn(document.images.show); 
		    imageFadeOut(document.images.behind); 
		}
        // document.images.behind.src = document.images.show.src;  // put old one behind
        document.images.show.src = bufferimages[requiredimageindex].src;  // display new one
        commenton (requiredimageindex);
        currentimageindex = requiredimageindex;
        interval = SLIDESHOWINTERVAL;
        requiredimageindex = (currentimageindex == slide.length-1) ? 0 : currentimageindex+1;
        requestimage (requiredimageindex);  // get the next image in the show
    }
    //}
    window.setTimeout("nextslide("+SLIDESHOWCHECKINTERVAL+")", interval);  // reschedule subsequent calls at 1 second
  } 
  else
  {
    showrunning = 0;  // the user has turned off the show and this is the next "nextslide()" after that
  }
}


bufferimages = [];   // can't test for fully loaded images in a single, reused image
                     // need an array to ensure each picture has its own image object

var loadingimageindex = -1;
var messagearea = 0;

function requestimage (index)
{
  if (!bufferimages[index]) // if the image has not previuously been requested
  { 
    bufferimages[index] = new Image;  // create the new image object
    bufferimages[index].src = slide[index]; 
    loadingimageindex = index;
  }
  else  // the image has been previously requested
  {
    if (loadingimageindex != -1 &&           // if there has been a previous request
        !imageloaded (loadingimageindex) &&  // and if the last requested image hasn't been loaded
        index != loadingimageindex)          // and its not the one we want now
    {
         delete bufferimages[loadingimageindex].src;  // abort the previous request
    }
  }
}

function imageloaded (index)
{
   return bufferimages[index].complete;
}


function imageFadeOut(img) 
{
  if ( document.all) 
  {
    img.opacity = 100;
    setOpacity(img.name, -100, 10);   // make -5, 100 to fade, -100, 10 to switch
  }
}

function imageFadeIn(img) 
{
  if ( document.all) 
  {
    img.opacity = 0;
    setOpacity(img.name, 100, 10);    /// make 5, 50  to fade, 100, 10 to switch
  }
}

function setOpacity (imgName, step, delay) 
{
  var img = document.images[imgName];
  img.opacity += step;
  if (document.all) {
  // IE/Win
  img.style.filter = "alpha(opacity:"+img.opacity+")";
  // Safari<1.2, Konqueror
  img.style.KHTMLOpacity = img.opacity/100;
  // Older Mozilla and Firefox
  img.style.MozOpacity = ((img.opacity == 100)?99.999:img.opacity)/100;
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  img.style.opacity = ((img.opacity == 100)?99.999:img.opacity)/100;
  }
  if (step > 0 && img.opacity < 100 || step < 0 && img.opacity > 0)
    setTimeout('setOpacity("' + img.name + '",' + step + ', ' + delay + ')', delay);
  if (img.opacity == 0) img.style.visibility = "hidden"; // so you can click links under it
  else img.style.visibility = "visible";
} 

function writeselector() {
document.write('<div class="selector"><div class="inner">');
document.write('<div style="position: absolute; top:0px; left: 0px; width: 344px; height: 258px; z-index: 1;"><img src="' + loadingimage + '" width="344" height="258" name="behind"></div>');
document.write('<div id="topdiv" style="position: absolute; top:0px; left: 0px; width: 344px; height: 258px; z-index: 2;"><img src="' + loadingimage + '" width="344" height="258" name="show"></div>');
document.write('<div id="navimages" style="position: absolute; top:-5px; left: 351px; width: 120px;">');
for (var i = 0; i< thumbnail.length; i++) {
  document.write ('<a href="#" onclick="showslideno(' + i + ');"><img src="' + thumbnail[i] + '" width=42 height=42 style="margin: 5px; border: 1px solid #9C7B42;"></a>');
  }
document.write('</div>');
document.write('<div id="descr" class="descr" style="position: absolute; top: 290px; left: 4px; width: 440px;"></div>');
document.write('<div style="position: absolute; top: 290px; left: 4px;"><img src="' + screenimage + '" width="440" height="52" name="screen"></div>');
document.write('</div></div>');
messagearea = 1;
}

function writeslideshow() {
document.write('<div class="slideshow"><div class="inner">');
document.write('<div style="position: absolute; top:0px; left: 0px; z-index: 1;"><img src="' + loadingimage + '" name="behind"></div>');
document.write('<div id="topdiv" style="position: absolute; top:0px; left: 0px; z-index: 2;"><img src="' + loadingimage + '" name="show"></div>');
document.write('</div></div>');
messagearea = 0;
}