/* 
 * small- movie.js
 *  
 *  This script implements a JavaScrip-based movie player that plays a
 *  movie whose frames are individual files, in any format understood by
 *  the browser.  The player includes buttons for playing the movie,
 *  stepping the movie forward or backward, or stopping the movie. 
 *  Multiple movies can appear on a single page.  The movie frames can be
 *  timed so that they change at a given rate when the movie is played. 
 *  The image load time is taken into account with this timing, and the
 *  frames are cached so that the movie will run at "full speed" on
 *  subsequent playings.
 *  
 *  Written by Davide P. Cervone in August 2000.
 *  Updated by dpvc in April 2003 to add the caching and improve performance.
 *  Updated by dpvc in October 2003 to work with more browsers, and to make
 *    initial frame configurable.  Added speed controls and loo/bounce controls.
 *  Modified for TFBCON2003 in October 2003
 *  
 *  Copyright 2000-2003 by Davide P. Cervone.  All rights reserved.
 * 
 */
 
version = "2.3a";


/****************************************************************************************/

/* 
 *  This returns an IMG tag for a button.  You may need to adjust the SRC to
 *  point to the buttons.  If you change the images, you may also need to
 *  adjust the HEIGHT and WIDTH.
 */

moviedir = 'movie/';

function Button(name,alt,size) {
  if (size == null) {size = 15;}
  return '<IMG SRC="'+moviedir+'buttons/'+name+'" ALT="['+alt+']" BORDER="0" HEIGHT="'+size+'" WIDTH="'+size+'" ALIGN="CENTER">';
}

/* 
 *  This tells where to find the frames.  The frame number and type will be appended
 *  to this value.  It should be relative to the page containing the movie.
 */

function MovieName(name,type) {return moviedir + name + '/' + type.toUpperCase() + '/' + name + '-';}

/*
 *  These control the initial loop and bounce attributes for the movie
 */

looping = 1;  bouncing = 0;  skipLast = 1;


/****************************************************************************************/
/*                  You should not need to change anything below this                   */
/****************************************************************************************/

/*
 *  The state information is stored in arrays so that we can have more than one movie
 *  per page.  (Probably should be redone as objects, but it works.)
 */
 
id = new Array(); running = new Array(); frame = new Array();
max = new Array(); play = new Array(); delay = new Array();
movieName = new Array(); movieType = new Array();
cache = new Array(); frametime = new Array();
loop = new Array(); bounce = new Array(); skip = new Array();

n = 0; id[0] = ''; running[0] = 0; frame[0] = 1;
loop[0] = looping; bounce[0] = bouncing; skip[0] = skipLast;

/*
 *  Test for Safari
 */
isSafari = (new RegExp(' Safari/')).test(navigator.appVersion);
isOldSafari = isSafari && navigator.userAgent.match("Safari/([0-9]+)")[1] < 125;

/****************************************************************************************/

/*
 *  These set the position to the beginning or ending frame, or step the frame.
 */
 
function Start(k) {NewFrame(k,1);}
function End(k) {NewFrame(k,max[k]);}
function NextImage(k) {NewFrame(k,frame[k]+1);}
function PrevImage(k) {NewFrame(k,frame[k]-1);}

/* 
 *  If the movie is already running, go to the next frame.
 *  If we are at the end, either loop, bounce, or stop, as needed.
 *  Otherwise, go to the beginning if necessary, and start running.
 */
function PlayForward(k) {
  var last = max[k];
  play[k] = 'PlayForward('+k+');';
  if (running[k]) {
    if (skip[k] && loop[k] && !bounce[k]) {last--}
    if (frame[k] < last) {NextImage(k)}
    else if (bounce[k]) {PlayBackward(k)}
    else if (loop[k]) {Start(k)}
    else {Stop(k)}
  } else {
    running[k] = 1;
    if (frame[k] == max[k]) {Start(k)} else {NextImage(k)}
  }
}
/*
 *  Similarly for playing backwards.
 */
function PlayBackward(k) {
  play[k] = 'PlayBackward('+k+');';
  if (running[k]) {
    if (frame[k] > 1) {PrevImage(k)}
    else if (loop[k]) {
      if (bounce[k]) {PlayForward(k)}
      else if (skip[k]) {NewFrame(k,max[k]-1)}
      else {End(k)}
    } else {Stop(k)}
  } else {
    running[k] = 1;
    if (frame[k] == 1) {End(k)} else {PrevImage(k)}
  }
}

/* 
 *  Cancel any pending frames and stop running.
 */
function Stop(k) {
  clearTimeout(id[k]);
  running[k] = 0;
}

/****************************************************************************************/

/* 
 *   This is the heart of the matter.
 *   First, make sure the frame number is valid, and set the frame indicator
 *     on the form to the correct value.
 *   Save the time that we started (so we know how long it takes to load the image).
 *   If we haven't already cached this image:
 *     Pad the image number with zeros (for the file name of the next frame).
 *     Create a new image object for the frame
 *     Load the frame, and call ShowFrame when done
 *   Otherwise, show the existing frame
 */
function NewFrame(k,m) {
  if (m < 1) {m = 1;}
  if (m > max[k]) {m = max[k];}
  frame[k] = m;
  frametime[k] = (new Date).getTime();
  if (cache[k][m] == null) {
    var mmm = m;
    if (mmm < 10) {mmm = '00'+mmm;} else if (mmm < 100) {mmm = '0'+mmm;}
    cache[k][m] = new Image();
    cache[k][m].onload = function () {ShowFrame(k,m)};
    cache[k][m].src = movieName[k] + mmm + movieType[k];
    if (isSafari) {document.images['movie'+k].src = movieName[k] + mmm + movieType[k]}
  } else {
    ShowFrame(k,m);
  }
}

/* 
 *  Display the cached frame and go on to the next frame if the
 *  movie is currently running.
 */
function ShowFrame(k,m) {
  if (isOldSafari) {
      /* 
       * Safari doesn't seem to work from the cache array, but since we have just
       * loaded the image, it should be in the browser cache, so this should
       * do effectively the same thing
       */
    var mmm = m;
    if (mmm < 10) {mmm = '00'+mmm;} else if (mmm < 100) {mmm = '0' + mmm;}
    document.images['movie'+k].src = movieName[k] + mmm + movieType[k];
  } else {
    document.images['movie'+k].src = cache[k][m].src;
  }
  if (running[k]) {Continue(k);}
}
/* 
 *  Determine how long it took to load the frame, and
 *  subtract that from the delay time.  Then play the
 *  next frame after the appropriate delay.
 */
function Continue(k) {
  var time = (new Date).getTime() - frametime[k];
  time = delay[k]-time; if (time < 1) {time = 1}
  if (time < 8 && isSafari) {time = 8}  /* Safari gets messed up with times less than 6 or so */
  id[k] = setTimeout(play[k],time);
}

/****************************************************************************************/

/* 
 *  This saves the state data for the movie and prints the HTML needed for the
 *  buttons and movie image.  Then the first frame is loaded.
 *  The global 'n' counts how many movies are on the page, so that we can store
 *  state for multiple movies.
 */
function Movie(name,type,frames,del,start,link) {
  movieName[n] = MovieName(name,type);
  movieType[n] = '.' + type.toLowerCase();
  max[n] = frames;
  if (start == null) {start = 1}
  if (del == 1 || del == null) {del = 80}
  delay[n] = del; play[n] = "";
  frame[n] = start; id[n] = ""; running[n] = 0;
  cache[n] = new Array(frames);
  loop[n] = looping; bounce[n] = bouncing; skip[n] = skipLast;
  
  if (start < 10) {start = '00'+start}  else if (start < 100) {start = '0'+start}

  document.write('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="CENTER">\n');
  document.write('<TR><TD ALIGN="CENTER">');
  document.write('<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="2" ALIGN="CENTER">\n');
  document.write('<TR><TD><IMG SRC="'+movieName[n]+start+movieType[n]+'" NAME="movie'+n+'"></TD></TR>\n');
  document.write('</TABLE>');
  document.write('</TD></TR>\n');
  document.write('<TR><TD HEIGHT="3"></TD></TR>\n');  
  document.write('<TR VALIGN="MIDDLE">\n');
  document.write('<TD NOWRAP="NOWRAP" ALIGN="CENTER">');
  document.write('&nbsp;&nbsp;');
  document.write('<A HREF="javascript:Stop('+n+');Start('+n+');" onDblClick="Stop('+n+');Start('+n+');" onMouseOver="return true;">'+Button('start.gif','Go to Start')+'</A>');
  document.write('<A HREF="javascript:Stop('+n+');PrevImage('+n+');" onDblClick="Stop('+n+');PrevImage('+n+');" onMouseOver="return true;">'+Button('prev.gif','Step Backward')+'</A>');
  document.write('<A HREF="javascript:Stop('+n+');NextImage('+n+');" onDblClick="Stop('+n+');NextImage('+n+');" onMouseOver="return true;">'+Button('next.gif','Step Forward')+'</A>');
  document.write('<A HREF="javascript:Stop('+n+');End('+n+');" onDblClick="Stop('+n+');End('+n+');" onMouseOver="return true;">'+Button('end.gif','Go to End')+'</A>');
  document.write('&nbsp;');
  document.write('<A HREF="javascript:Stop('+n+');PlayBackward('+n+');" onMouseOver="return true;">'+Button('playback.gif','Play Backward')+'</A>');
  document.write('<A HREF="javascript:Stop('+n+');" onMouseOver="return true;">'+Button('stop.gif','Stop')+'</A>');
  document.write('<A HREF="javascript:Stop('+n+');PlayForward('+n+');" onMouseOver="return true;">'+Button('play.gif','Play Forward')+'</A>');
  document.write('&nbsp;');
  document.write('<A HREF="movie/help.html" onMouseOver="return true;">'+Button('help.gif','Help',10)+'</A>');
  document.write('</TD></TR>\n');
  if (link != null) {
    document.write('<TR><TD HEIGHT="1"></TD></TR>\n');  
    document.write('<TR><TD ALIGN="CENTER"><SMALL><A HREF="'+link+'">About this movie</A></SMALL></TD></TR>\n');
  }
  document.write('</TABLE>\n');
  n++;
}