//============================================================
//                >> jsImagePlayer 1.0 << 
//            for Netscape3.0+, September 1996
//============================================================
//              by (c)Martin Holecko 1996-98
//           and et netera s.r.o. (www.etnetera.cz)
//             Praha, Czech Republic, Europe
//
// feel free to copy and use as long as the credits are given
//          by having this header in the code
//
//             contact: martin@etnetera.cz
//          http://sgi.felk.cvut.cz/~xholecko
//
//============================================================
// Thanx to Karel & Martin for beta testing and suggestions!
//============================================================

// DESCRIPTION: preloads number of images named in format 
//   "imagename#.ext" (where "#" stands for number and "ext"
//   for file extension of given filetype (gif, jpg, ...))
//   into cache and then provides usual movie player controls 
//   for managing these images (i.e. frames). A picture 
//   (loading.gif) is displayed while loading the movie.
//   To make it work just set up the variables below.
//   An image "loading.gif" is expected in the directory
//   where this page is located (it asks user to wait while
//   the animation is being downloaded).
//   Enjoy! BASTaRT. (it's spelled with a "T" ! :) 
//  KNOWN BUG:  when page is located on a WWW Server that
//   cannot handle the POST form submit method, pressing Enter
//   after changing the frame number in the little input field
//   causes the page to reload and an alert window to appear.
//   This can be avoided by clicking with the mouse somewhere 
//   outside the input field rather than hitting the Enter to
//   jump to the desired frame.
//
//**************************************************************************
//********* SET UP THESE VARIABLES - MUST BE CORRECT!!!*********************


   //!!! the size is very important - if incorrect, browser tries to 
   //!!! resize the images and slows down significantly
//animation_height = 150;              //height of the images in the animation
//animation_width = 200;               //width of the images in the animation
//**************************************************************************
//**************************************************************************



//=== THE CODE STARTS HERE - no need to change anything below ===
//=== global variables ====
image_array = new Array();
normal_delay = 110;  
delay = normal_delay;  //delay between frames in 1/100 seconds
delay_step = 30;
delay_max = 1000;
delay_min = 20; 

dwell_multipler = 3;
dwell_step = 1;
end_dwell_multipler   = 8;
start_dwell_multipler = 8;


current_image = first_image;     //number of the current image
timeID = null;
status = 0;            // 0-stopped, 1-playing
play_mode = 0;         // 0-normal, 1-loop, 2-swing
size_valid = 0;

//===> makes sure the first image number is not bigger than the last image number
if (first_image > last_image) 
{
   var help = last_image;
   last_image = first_image;
   first_image = help;
};

//===> preload the images - gets executed first, while downloading the page
for (var i = first_image; i <= last_image; i++) 
{
   image_array[i] = new Image();
   //image_array[i].onerror = my_alert("\nError loading ",image_name,i,image_type,"!");
   //image_array[i].onabort = my_alert("\nLoading of ",image_name,i,image_type," aborted!");
   image_array[i].src = image_path[i];
};


//===> displays image depending on the play mode in forward direction
function animate_fwd() 
{
   current_image++;
   if(current_image > last_image)
   { 
      if (play_mode == 0) 
      {
         current_image = last_image; 
         status=0;
         return;
      };                           //NORMAL
      if (play_mode == 1) 
      {
         current_image = first_image; //LOOP
      };
      if (play_mode == 2) 
      {
         current_image = last_image; 
         animate_rev();
         return; 
      };
   };                             
   document.animation.src = image_array[current_image].src;
   document.control_form.frame_nr.value = current_image;
   delay_time = delay;
   if ( current_image == first_image) delay_time = start_dwell_multipler*delay;
   if (current_image == last_image)   delay_time = end_dwell_multipler*delay;

   
   
   timeID = setTimeout("animate_fwd()", delay_time);
}

//===> displays image depending on the play mode in reverse direction
function animate_rev() 
{
   current_image--;
   if(current_image < first_image)
   { 
      if (play_mode == 0) 
      {
         current_image = first_image; 
         status=0;
         return;
      };                           //NORMAL
      if (play_mode == 1) 
      {
         current_image = last_image; //LOOP
      };
      if (play_mode == 2) 
      {
         current_image = first_image; 
         animate_fwd();
         return; 
      };
   };                             
   document.animation.src = image_array[current_image].src;
   document.control_form.frame_nr.value = current_image;
  delay_time = delay;
   if ( current_image == first_image) delay_time = start_dwell_multipler*delay;
   if (current_image == last_image)   delay_time = end_dwell_multipler*delay;

   
   
   timeID = setTimeout("animate_rev()", delay_time);

}

//===> changes playing speed by adding to or substracting from the delay between frames
function change_speed(dv) 
{
   delay+=dv;
   if(delay > delay_max) delay = delay_max;
   if(delay < delay_min) delay = delay_min;
}

//===> stop the movie
function stop() 
{
   if (status == 1) clearTimeout (timeID);
   status = 0;
}

//===> "play forward"
function fwd() 
{
   stop();
   status = 1;
   animate_fwd();
}

//===> jumps to a given image number
function go2image(number)
{
   stop();
   if (number > last_image) number = last_image;
   if (number < first_image) number = first_image;
   current_image = number;
   document.animation.src = image_array[current_image].src;
   document.control_form.frame_nr.value = current_image;
}

//===> "play reverse"
function rev() 
{
   stop();
   status = 1;
   animate_rev();
}

//===> changes play mode (normal, loop, swing)
function change_mode(mode) 
{
   play_mode = mode;
}

//===> sets everything once the whole page and the images are loaded (onLoad handler in <body>)
function launch() 
{
   stop();
   current_image = first_image;
   document.animation.src = image_array[current_image].src;
   document.control_form.frame_nr.value = current_image;
   // this is trying to set the text (Value property) on the START and END buttons 
   // to S(first_image number), E(last_image number). It's supposed (according to 
   // JavaScrtipt Authoring Guide) to be a read only value but for some reason
   // it works on win3.11 (on IRIX it doesn't).
   //document.control_form.start_but.value = " S(" + first_image + ") ";
   //document.control_form.end_but.value = " E(" + last_image + ") ";
   // this needs to be done to set the right mode when the page is manualy reloaded
   change_mode (document.control_form.play_mode_selection.selectedIndex);
   // modified to start animation after load
   fwd();
}

//===> writes the interface into the code where you want it
function animation()
{
   document.write(" <P><IMG NAME=\"animation\" SRC=\"loading.gif\" HEIGHT=",animation_height, " WIDTH=", animation_width, "\" ALT=\"[jsMoviePlayer]\">");
   document.write(" <FORM Method=POST Name=\"control_form\"> ");
   document.write("    <INPUT TYPE=\"button\" Name=\"start_but\" Value=\"  FIRST  \" onClick=\"go2image(first_image)\"> ");
   document.write("    <INPUT TYPE=\"button\" Value=\" -1 \" onClick=\"go2image(--current_image)\"> ");
   document.write("    <INPUT TYPE=\"button\" Value=\" REWIND \" onClick=\"rev()\"> ");
   document.write("    <INPUT TYPE=\"button\" Value=\" STOP \" onClick=\"stop()\"> ");
   document.write("    <INPUT TYPE=\"button\" Value=\" PLAY \" onClick=\"fwd()\"> ");
   document.write("    <INPUT TYPE=\"button\" Value=\" +1 \" onClick=\"go2image(++current_image)\"> ");
   document.write("    <INPUT TYPE=\"button\" Name=\"end_but\" Value=\"   LAST   \" onClick=\"go2image(last_image)\"> ");
   document.write(" <BR> ");
   document.write("    <SELECT NAME=\"play_mode_selection\" onChange=\"change_mode(this.selectedIndex)\"> ");
   document.write("       <OPTION SELECTED VALUE=0>play once ");
   document.write("       <OPTION VALUE=1>loop ");
   document.write("       <OPTION VALUE=2>swing ");
   document.write("    </SELECT> ");
   document.write("    <INPUT TYPE=\"text\" NAME=\"frame_nr\" VALUE=\"0\" SIZE=\"5\" ");
   document.write("     onFocus=\"this.select()\" onChange=\"go2image(this.value)\"> ");
   document.write("    &nbsp;<INPUT TYPE=\"button\" Value=\" - \" onClick=\"change_speed(delay_step)\"> speed ");
   document.write("    <INPUT TYPE=\"submit\" Value=\" + \" onClick=\"change_speed(-delay_step)\;return false\"> ");
   document.write(" </FORM> ");
   document.write(" </P> ");
};