<!-- slidefbshow.html.  Template HTML/Javascript for displaying a 
-                       foreground/background "split" slideshow.
-  Purpose:
-    Slidefbshow is used to display a "slide show" that has been divided
-    into a single foreground image and a single background image per "slide".
-    This division is a very powerful way to efficiently compact many
-    PowerPoint presentations for display on the web -- because the typical
-    powerpoint presentation has a background that renders well as a 
-    JPEG, while the foreground renders well as a GIF.  For more details
-    about the division process, see http://thedance.net/~roth/CAC.
-  Usage:
-    This page assumes it lives in the same directory with the images
-    that make up the "slides", where the foreground images are called
-    'slideNNN.gif' and the background images are called "backgroundN.jpg".
-    Set the assignment of 'last' to be the number of the last foreground
-    image.  Define the 'bkg' array (as shown below) to be the array
-    of background images that go with the respectively numbered foreground
-    images.
-    It is assumed that all of the images (foreground and background)
-    have the same size.  The images b1,b2,b3,b4 & b8.gif are for the
-    VCR controls.  (Clicking on the image itself has the same effect
-    as clicking on the "forward" button.)
-  How it works:
-    Assumes IE 5.01 or Netscape 6.x or higher.  (Will not work on Netscape 4.)
-    Puts the background image in the background of a table cell, and
-    the foreground image in the cell itself.  Uses the style-sheet 
-    background-image property to change backgrounds.
-    Once a foreground image has finished loading, attempts to preload the
-    "next" (foreground) slide while the user is reading the current
-    slide.  If successful, makes the slideshow appear to display *much*
-    faster.
-  Author: Charles Roth (www.thedance.net)
-  Change history:
-    7/8/02 v1.1 New page.


<script language="Javascript">
   last  = 120;           /* Number of last foreground slide image. */
   first =   1;
   slide = first;         /* current slide */

   /*** Define bkg array to have matching background images.  Note that
   /    the 'url(...)' syntax is required, since we're using style-sheets
   /    to make changing the background image work. */
   bkg = new Array();
   for (i=1;   i<=last;   ++i)  bkg[i] = "url(background1.jpg)";
   bkg[  8] = "url(background2.jpg)";
   bkg[  9] = "url(background2.jpg)";
   bkg[ 21] = "";
   bkg[ 29] = "url(background3.jpg)";
   bkg[ 30] = "url(background3.jpg)";
   bkg[ 31] = "url(background3.jpg)";
   bkg[118] = "url(background4.jpg)";

   var cell;         /* main table cell object, for convenient reference */
   var next_slide;   /* name of next slide, so we can do preloading trick */
   var preload_gif = new Image();

   /*** All VCR buttons activate this function, with slide # to go to. */
   function move_to_slide (number) {
      slide = number;
      if (slide > last)   slide = last;
      if (slide < first)  slide = first;

      if (! cell) cell = document.getElementById ("tdback");

      /*** Only change background image if we have to -- otherwise may
      /    cause some flicker. */
      if (cell.style.backgroundImage != bkg[slide])
          cell.style.backgroundImage  = bkg[slide];

      /*** Now load foreground image, after preparing it (the image object)
      /    to preload the next slide if possible. */
      if (slide < last)  next_slide = "slide" + to_digits (slide+1, 3) + ".gif";
      document.slidegif.src    = null;   /* Empty current slide */
      document.slidegif.onload = preload_next_slide;
      document.slidegif.src    = "slide" + to_digits (slide, 3) + ".gif";

      return false;

   /*** Actually do the preloading, if fired by onLoad condition on current
   /    slide. */
   function preload_next_slide() {
      if (next_slide)  preload_gif.src = next_slide;

   /*** Dumb function to convert number to zero-padded string. */
   function to_digits (snum, digits) {
      var str_form = snum + "";
      while  (str_form.length < digits)  str_form = "0" + str_form;
      return (str_form);

   /*** Confirm closing window. */
   function closer () {
      if (confirm ("OK to close window?"))  window.close();
      return false;

<!-- Don't let background image "tile" if not exactly same size as 
     foreground! -->
   TD { background-repeat: no-repeat }

<body bgcolor="#808080">

<!-- Position table at absolute top left of window -->
<span style="position:absolute; left:0; top:0">
<table border=0>
<td id=tdback style="background-image: url(background1.jpg);"
   ><a href="#" onClick="return move_to_slide (slide+1);"
   ><img name="slidegif" src="slide001.gif" border=0 ></a></td>


<!-- VCR buttons -->
   <table cellspacing=0 cellpadding=0 border=0>
   <tr><td><a href="#" onClick="return move_to_slide (first);"  
          ><img src="b1.gif" border=0></a></td>
   <tr><td><a href="#" onClick="return move_to_slide (last);" 
          ><img src="b4.gif" border=0></a></td>
   <tr><td><a href="#" onClick="return move_to_slide (slide-1);"
          ><img src="b2.gif" border=0></a></td>
   <tr><td><a href="#" onClick="return move_to_slide (slide+1);"
          ><img src="b3.gif" border=0></a></td>
   <tr><td><a href="#" onClick="return closer();"
          ><img src="b8.gif" border=0></a></td>