
var jpath = "./common/js/";         // JS path

//
// functions for animation:
//

//
// external function: openWin0
// external variable: w
// both are defined in main.js
// main.js was included in main program before this JS
// so can directory use them here
//

//
// needed args:
//   x_sz -- new window x size
//   y_sz -- new window y size
//   iary -- image file name array
//   wtit -- title for new window, default: Animation
//
function AnimateImage(x_sz, y_sz, iary, wtit, cimg, cysz) {
  // check if have color bar
  // use JS build-in operator "typeof" to check if variable is defined
  var cbar = 1;
  if(typeof cimg == "undefined") cbar = 0;
//alert("cimg: " + cimg + "\ncysz: " + cysz + "\ncbar: " + cbar);

  // set default title
  if(wtit == '') wtit = "Animation";

  // get image array length
  var ilen = iary.length;

  wxsz = x_sz + 40;
  wysz = y_sz + 150;
  if(cbar == 1) wysz = wysz + cysz;
  openWin0('', 'animation', wxsz, wysz);

  w.document.writeln("<html>");
  w.document.writeln("<head>");
  w.document.writeln("<title>" + wtit + "</title>");
  w.document.writeln("</head>");

  // define needed globle JS variables
  //   first_img, last_img, current_img
  //   delay, delay_default, delay_step, delay_max, delay_min
  //   timerID, status, loopflg, speeddir, imglpdir
  //   image array
  w.document.writeln("<script language='javascript'>");
  w.document.writeln("var first_img = 1;");
  w.document.writeln("var last_img = " + ilen + ";");
  w.document.writeln("var current_img = first_img - 1;");

  w.document.writeln("var delay_default = 500;");
  w.document.writeln("var delay_step = 100;");
  w.document.writeln("var delay_max = 4000;");
  w.document.writeln("var delay_min = 10;");
  w.document.writeln("var delay = delay_default;");

  w.document.writeln("var timerID = null;");

  w.document.writeln("var status = 0;");       // 0 -- stoped,  1 -- playing
  w.document.writeln("var loopflg = 0;");      // 0 -- no loop, 1 -- loop through the images
  w.document.writeln("var speeddir = '';");    // '+' slow,    '-' fast
  w.document.writeln("var imglpdir = '';");    // '+' forward, '-' reverse

  w.document.writeln("var ImgList = new Array();");
  for(var i = 0; i < ilen; i++) {
    w.document.writeln("ImgList[" + i + "] = new Image();");
    w.document.writeln("ImgList[" + i + "].src = '" + iary[i] + "';");
  }
  w.document.writeln("</script>");

  w.document.writeln("<script language='javascript' src='" + jpath + "AnimateImage.js'></script>");


  // onLoad: default to forward direction looping
  w.document.writeln("<body onLoad=\"loopflg=1;imglpdir='+';loop_image()\">");

  w.document.writeln("<br>");
  w.document.writeln("<table border='1' cellspacing='1' cellpadding='1' "
                   + "align='center' bgcolor='#CCCCFF'>");

  w.document.writeln("<tr>");
  w.document.writeln("<td align='center' height='35'>");
  w.document.writeln("<span style='font:bold 12px Arial'>" + wtit + "</span>");
  w.document.writeln("</td>");
  w.document.writeln("</tr>");

  w.document.writeln("<tr>");
  w.document.writeln("<td bgcolor='#FFFFFF'>");
  w.document.writeln("<img name='animation' width='" + x_sz + "' height='" + y_sz + "'>");
  w.document.writeln("</td>");
  w.document.writeln("</tr>");

  w.document.writeln("<tr>");
  w.document.writeln("<td height='40' valign='middle' align='center'>");
  w.document.writeln("<input type='button' value='Slow' onClick=\"speeddir='+';change_speed()\">");
  w.document.writeln("<input type='button' value='<<' onClick=\"loopflg=1;imglpdir='-';loop_image()\">");
  w.document.writeln("<input type='button' value='<' onClick=\"loopflg=0;imglpdir='-';loop_image()\">");
  w.document.writeln("<input type='button' value='Stop' onClick='stop_loop()'>");
  w.document.writeln("<input type='button' value='>' onClick=\"loopflg=0;imglpdir='+';loop_image()\">");
  w.document.writeln("<input type='button' value='>>' onClick=\"loopflg=1;imglpdir='+';loop_image()\">");
  w.document.writeln("<input type='button' value='Fast' onClick=\"speeddir='-';change_speed()\">");
  w.document.writeln("</td>");
  w.document.writeln("</tr>");

  if(cbar == 1) {
    w.document.writeln("<tr>");
    w.document.writeln("<td align='center' bgcolor='#FFFFFF'>");
    w.document.writeln("<img src='" + cimg + "' border='0'>");
    w.document.writeln("</td>");
    w.document.writeln("</tr>");
  }

  w.document.writeln("</table>");

  w.document.writeln("</body>");
  w.document.writeln("</html>");

  w.document.close();
}

function stop_loop() {
  if(status == 1) clearTimeout(timerID);
  status = 0;
}

function loop_image() {
  stop_loop();
  status = 1;

  if(imglpdir == '+') {
    current_img++;
    if(current_img > last_img) current_img = first_img;
  }
  else if(imglpdir == '-') {
    current_img--;
    if(current_img < first_img) current_img = last_img;
  }

  document.animation.src = ImgList[current_img - first_img].src;

  if(loopflg == 1) {
    timerID = setTimeout("loop_image()", delay);
  }
}

function change_speed() {
  if(speeddir == '+') {
    delay += delay_step;
    if(delay > delay_max) delay = delay_max;
  }
  else if(speeddir == '-') {
    delay -= delay_step;
    if(delay < delay_min) delay = delay_min;
  }
}

