//============================================================
//                >> jsImagePlayer 1.0 << 
//            for Netscape3.0+, September 1996
//============================================================
//              by (c)Martin Holecko 1996-98
//             Praha, Czech Republic, Europe
//
// feel free to copy and use as long as the credits are given
//          by having this header in the code
//
//          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!!!*********************
//image_name = "pvd_ec4_";
//image_type = "jpg";
//first_image =1;
//last_image = 44; 
//animation_height = "450";
//animation_width = "800";

   //!!! the size is very important - if incorrect, browser tries to 
   //!!! resize the images and slows down significantly
//**************************************************************************

//=== THE CODE STARTS HERE - no need to change anything below ===
//=== global variables ====

first_image=0;
last_image=image_filenames.length-1;
nbimages =image_filenames.length;

theImages = new Array(nbimages);
normal_delay = 200;  
delay = normal_delay;  //delay between frames in 1/100 seconds
delay_step = 100;
delay_max = 4000;
delay_min = 20; 
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;




function preload() {


//===> preload the images - gets executed first, while downloading the page
for (var i = first_image; i <= last_image; i++) 
{
   theImages[i] = new Image();
   theImages[i].src = image_basename + image_filenames[i];
};

}



function update_status() {
  var loaded = 0;
  for (var i = first_image; i <= last_image; i++)  {
    if (theImages[i].complete || theImages[i].complete==null) 
      loaded++;
  };

  setProgressbar(100*loaded/nbimages,loaded + " images loaded / "  + nbimages);


  if (loaded < nbimages)
    timeID = setTimeout("update_status()", 1000);
}



//===> 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 = theImages[current_image].src;
   document.control_form.frame_nr.value = current_image;
   timeID = setTimeout("animate_fwd()", delay);
}

//===> 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 = theImages[current_image].src;
   document.control_form.frame_nr.value = current_image;
   timeID = setTimeout("animate_rev()", delay);
}

//===> 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;

   document.control_form.frame_delay.value = delay;
}


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

   document.control_form.frame_delay.value = delay;
}


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

//===> "play forward"
function fwd() 
{
   stop();
   status = 1;
   if (current_image == last_image)
   {
      current_image =  first_image;
   }

   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 = theImages[current_image].src;
   document.control_form.frame_nr.value = current_image;
}

//===> "play reverse"
function rev() 
{
   stop();
   status = 1;
   if (current_image == first_image)
   {
      current_image =  last_image;
   }

   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 = last_image;
   document.animation.src = theImages[current_image].src;
   document.control_form.frame_nr.value = current_image;
   document.control_form.frame_delay.value = delay;

   // 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 = " First(" + first_image + ") ";
   //document.control_form.end_but.value = " Last(" + 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);
}

//===> writes the interface into the code where you want it
function animation()
{


   document.write("<p><table border=\"1\"><tr><td nowrap valign=\"top\" align=\"center\"> ");
   document.write("<table border=0 cellpadding=0 cellspacing=3><tr><td> <b><font color=\"#8000040\">Loading:  </font><b> </td><td>");
   writeProgressbar(); 
   document.write(" </td></table>");

   document.write("<b><h3><font color=\"#8000040\">Animation Control</font></h3></b>");

   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=\" < \" onClick=\"go2image(--current_image)\"> ");
   document.write("    <INPUT TYPE=\"button\" Value=\" Rev \" 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=\" > \" onClick=\"go2image(++current_image)\"> ");
   document.write("    <INPUT TYPE=\"button\" Name=\"end_but\" Value=\"  Last  \" onClick=\"go2image(last_image)\"> ");   
   document.write("    </td><td nowrap valigh=\"bottom\" align=\"center\"> ");
   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("    Go To Frame = <INPUT TYPE=\"text\" NAME=\"frame_nr\" VALUE=\"0\" SIZE=\"5\" ");
   document.write("     onFocus=\"this.select()\" onChange=\"go2image(this.value)\"> ");
   document.write("    <br> ");
   document.write(" <BR> ");
   document.write("    &nbsp;<INPUT TYPE=\"button\" Value=\" Slower \" onClick=\"change_speed(delay_step)\"> ");
   document.write("    <INPUT TYPE=\"submit\" Value=\" Faster \" onClick=\"change_speed(-delay_step)\;return false\"> ");
   document.write("    Delay between frames (ms) <INPUT TYPE=\"text\" NAME=\"frame_delay\" VALUE=\"100\" SIZE=\"5\"  onChange=\"set_delay(this.value);\" ");

   document.write(" </FORM> ");
   document.write("</td></tr> ");
   document.write("<tr><td colspan=\"2\">");
   document.write(" <P><IMG NAME=\"animation\" SRC=\"loading.gif\" HEIGHT=",animation_height, " WIDTH=", animation_width, "\" ALT=\"[jsMoviePlayer]\">");
   document.write("</td></tr></table> ");
   document.write(" </P> ");

   progressBarInit();
   preload();
   update_status();
};

//=== THE CODE ENDS HERE - no need to change anything above ===