// usage:
//     The following three pages have to be set up and used together:
//     vh_imageloop.php        index page to hold the other 2 pages
//     vh_imageloop_options.php      option page used to control the image looping
//     vh_imageloop_showpage.php     page to show the image loop
// 

//**************************************************************************
// these variables will be set by the compoments on imageloop_options.php
// 
animation_name1 = "u";  //the base "path/name" of the image set without the numbers
animation_name2 = ".png";  //the base "path/name" of the image set without the numbers

animation_first_image = 501;                    //first image number
animation_last_image = 548;                    //last image number

   //!!! the size is very important - if incorrect, browser tries to
   //!!! resize the images and slows down significantly
animation_height = 400;              //height of the images in the animation
animation_width = 420;               //width of the images in the animation - Do not use this!!!! it will skew your images - L. Brown 1-14-2009
animation_colorbar ="";

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



//=== THE CODE STARTS HERE - no need to change anything below ===
//=== global variables ====
var theImages;
normal_delay = 200;
delay = normal_delay;  //delay between frames in 1/100 seconds
delay_step = 10;
delay_max = 4000;
delay_min = 10;
current_image = animation_first_image;     //number of the current image
timeID = null;
animation_status = 0;            // 0-stopped, 1-playing
play_mode = 0;         // 0-normal, 1-loop, 2-swing
size_valid = 0;


// set Image Number Box
function animate_setTextBox(){
	document.control_form.frame_nr.value = "Image:" + current_image ;
}

//===> displays image depending on the play mode in forward direction
function animate_fwd()
{
   current_image++;
   if(current_image > animation_last_image)
   {
      if (play_mode == 0)
      {
         current_image = animation_last_image;
         animation_status=0;
         return;
      };                           //NORMAL
      if (play_mode == 1)
      {
         current_image = animation_first_image; //LOOP
      };
      if (play_mode == 2)
      {
         current_image = animation_last_image;
         animate_rev();
         return;
      };
   };
   document.animation.src = theImages[current_image].src;
   animate_setTextBox();
   timeID = setTimeout("animate_fwd()", delay);
}

//===> displays image depending on the play mode in reverse direction
function animate_rev()
{
   current_image--;
   if(current_image < animation_first_image)
   {
      if (play_mode == 0)
      {
         current_image = animation_first_image;
         animation_status=0;
         return;
      };                           //NORMAL
      if (play_mode == 1)
      {
         current_image = animation_last_image; //LOOP
      };
      if (play_mode == 2)
      {
         current_image = animation_first_image;
         animate_fwd();
         return;
      };
   };
   document.animation.src = theImages[current_image].src;
   animate_setTextBox();
   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;
}

//===> stop the movie
function stop()
{
	//alert(	"stop(), animation_status="+animation_status +" delay_max ="+ delay_max);
   if (animation_status == 1) clearTimeout (timeID);
   animation_status = 0;

}

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

//===> jumps to a given image number
function go2image(number)
{
   stop();
   if (number > animation_last_image) number = animation_last_image;
   if (number < animation_first_image) number = animation_first_image;
   current_image = number;
   document.animation.src = theImages[current_image].src;
   animate_setTextBox();
}

//===> "play reverse"
function rev()
{
   stop();
   animation_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() {
    alert('Animation file has been downloaded. Please press "Play" button to start the animation.');
}


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

	// the following variable is determined by selection on "imageloopOptionFrame"
	var father = parent;		
		animation_name1 = father.animation_name1
		animation_name2 = father.animation_name2;  

		animation_first_image = father.animation_first_image;
		animation_last_image  =  father.animation_last_image;

		animation_height = father.animation_height;
		animation_width = father.animation_width;
		animation_colorbar = father.animation_colorbar;
	
	
	//===> preload the images - gets executed first, while downloading the page
		theImages = new Array(animation_last_image- animation_first_image +1);
		for (var i = animation_first_image; i <= animation_last_image; i++)
		{
		   theImages[i] = new Image();
		   theImages[i].src = (i < 10) ? (animation_name1 + '0'+ i +animation_name2) :
										 (animation_name1 + i +animation_name2);
			//alert(	theImages[i].src);
		};

    document.writeln( "<form method='post' Name='control_form'><div style='width: 70em; border: 1px solid #666666; padding: 4px; margin-bottom: 12px;'>"
      + "<strong>Animation controls:</strong>&nbsp;&nbsp;<select title='select animation mode' name='play_mode_selection' onChange='change_mode(this.selectedIndex)'> "
      + "<option selected value='0'>play once</option> "
      + "<option value='1'>loop</option> "
      + "<option value='2'>swing</option> "
      + "</select> "
      + "<input type='button' title='play backwards' value='< Play' onClick='rev()'> "
      + "<input type='button' title='stop animation' value='Stop' onClick='stop()'> "
      + "<input type='button' title='play forwards' value='Play >' onClick='fwd()'> "
//       + "    &nbsp;<input type='button' value=' Slower ' onClick='change_speed(delay_step)'> "
//      + "          <input type='button' value=' Faster ' onClick='change_speed(-delay_step)'> "
//      + " <br>" //</td></tr><tr><td align='center'>"
	  + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
      + "<input type='button' title='show first image in animation' name='start_but' value='Image "+ animation_first_image +"' onClick='go2image(animation_first_image)'> "
      + "<input type='button' title='step back one frame' value='< Previous' onClick='go2image(--current_image)'> "
      + "&nbsp;<input type='text' name='frame_nr' title='frame currently displayed' value='0' size='7' "
      + "onFocus='this.select();' onChange='go2image(this.value);'> "
      + "<input type='button' title='step ahead one frame' Value='Next >' onClick='go2image(++current_image);'> "
      + "<input type='button' name='end_but' title='show last image in animation' value='Image " + animation_last_image + "' onClick='go2image(animation_last_image);'> "
      + "</div></form>");
	document.writeln( "<img name='animation' style='bordered' src='"+ theImages[animation_first_image].src+"' alt='gif animation of vegetation health images.'>" );
	document.writeln( "<br><img name='colorbar' alt='image color scale' src='"+ animation_colorbar +"'>");
   
   stop();
   current_image = animation_first_image;
   document.animation.src = theImages[current_image].src;
   animate_setTextBox();

   // this needs to be done to set the right mode when the page is manually reloaded
   change_mode (document.control_form.play_mode_selection.selectedIndex);
}