buttondir = "http://www.shef.ac.uk/nps/anim/";

pics = new Object;

function ControlledAnimation(name,dirname,numframes,width,height) {
  var i;

  this.name = name;
  this.dirname = dirname;
  this.numframes = numframes;
  this.width = width;
  this.height = height;
  this.timeout = 100.0;
  this.state = 'Stop';
  this.count = 0;
  this.move = 0;
  this.timer = null;
  this.image = eval("document." + name);
  this.frames = new Array(numframes);
  for (i = 0; i < numframes; i++) {
    this.frames[i] = new Image(width,height);
    if (this.dirname == '-') {
      this.frames[i].src = i + ".gif";
    } else {
      this.frames[i].src = dirname + name + "/" + i + ".gif";
    }
  }
}

function SetFrame(c) {
  this.count = c;
  eval("document." + this.name + ".src = this.frames[c].src;");
}

actions =
  new Array([
	     'Slower',
	     'Faster',
	     'Backwards',
	     'BackwardsOnce',
	     'BackwardsStep',
	     'Stop',
	     'ForwardsStep',
	     'ForwardsOnce',
	     'Forwards',
	     'BothWays'
  ]);

states =
 new Array([
	    'Backwards',	// 0
	    'BackwardsOnce',	// 1
	    'Stop',		// 2
	    'ForwardsOnce',	// 3
	    'Forwards'		// 4
 ])

function Slower() {
  this.timeout *= 1.2;
}

ControlledAnimation.prototype.Slower = Slower;

function Faster() {
  this.timeout /= 1.2;
}

ControlledAnimation.prototype.Faster = Faster;

function Backwards() {
  this.state = 'Backwards';
  this.move = -1;
  this.Start(1);
}

function BackwardsOnce() {
  this.state = 'BackwardsOnce';
  this.SetFrame(this.numframes - 1);
  this.move = -1;
  this.Start(1);
}

function BackwardsStep() {
  this.state = 'Stop';
  this.move = 0;
  if (this.count == 0) {
    this.SetFrame(this.numframes - 1);
  } else {
    this.SetFrame(this.count - 1);
  }
}

function Stop() {
  this.state = 'Stop';
  this.move = 0;
}

function ForwardsStep() {
  this.state = 'Stop';
  this.move = 0;
  if (this.count == this.numframes - 1) {
    this.SetFrame(0);
  } else {
    this.SetFrame(this.count + 1);
  }
}

function ForwardsOnce() {
  this.state = 'ForwardsOnce';
  this.SetFrame(0);
  this.move =  1;
  this.Start(1);
}

function Forwards() {
  this.state = 'Forwards';
  this.move = 1;
  this.Start(1);
}

function BothWays() {
  this.state = 'BothWays';
  if (this.move == 0) {
    this.move = 1;
  };
  this.Start(1);
}

function Start(n) {
 clearTimeout(this.timer);
 this.timer =
  setTimeout('pics["' + this.name + '"].Move()',n * this.timeout); 
}

function Move() {
  var c,d;
  c = this.count + this.move;

  if (c < 0) {
    if (this.state == 'Backwards' || this.state == 'BackwardsStep') {
      this.SetFrame(this.numframes - 1);
    } else if (this.state == 'BothWays') {
      this.SetFrame(0);
      this.move =  1;
    } else {
      this.Stop();
    }
  } else if (c >= this.numframes) {
    if (this.state == 'Forwards' || this.state == 'ForwardsStep') {
      this.SetFrame(0);
    } else if (this.state == 'BothWays') {
      this.SetFrame(this.numframes - 1);
      this.move = -1;
    } else {
      this.Stop();
    }
  } else {
    this.SetFrame(c);
  }

  if (this.move != 0) {
   if ( (this.state == 'Backwards' && this.count == 0) ||
        (this.state == 'Forwards' && this.count == this.numframes - 1)) {
     d = 10;
   } else {
     d = 1;
   };
   this.Start(d);
  }
}


ControlledAnimation.prototype.Slower = Slower;
ControlledAnimation.prototype.Faster = Faster;
ControlledAnimation.prototype.Backwards = Backwards;
ControlledAnimation.prototype.BackwardsOnce = BackwardsOnce;
ControlledAnimation.prototype.BackwardsStep = BackwardsStep;
ControlledAnimation.prototype.Stop = Stop;
ControlledAnimation.prototype.ForwardsStep = ForwardsStep;
ControlledAnimation.prototype.ForwardsOnce = ForwardsOnce;
ControlledAnimation.prototype.Forwards = Forwards;
ControlledAnimation.prototype.BothWays = BothWays;
ControlledAnimation.prototype.SetFrame = SetFrame;
ControlledAnimation.prototype.Start = Start;
ControlledAnimation.prototype.Move = Move;

function jlink(name,action) {
 var x;

 x = "<td><a href='javascript:pics[";
 x += '"' + name + '"].';
 x += action;
 x += "()'>";
 x += "<img width=32 height=33 border=0 src='";
 x += buttondir;
 x += action;
 x += ".gif'></a></td>";

 return(x);

}

function MakeAnimation(name,dirname,numframes,width,height) {
  var tags,anim,j;

  if (dirname == '-') {
   tags =
    "<img name='" + name + "' " +
	  "src='0.gif' " +
	"width='" + width + "' " +
       "height='" + height + "'>\n" +
    "<br>\n";
  } else {
   tags =
    "<img name='" + name + "' " +
	  "src='" + dirname + name + "/0.gif' " +
	"width='" + width + "' " +
       "height='" + height + "'>\n" +
    "<br>\n";
  }

  tags += 
    "<table cellpadding='0' cellspacing='0' border='0'" +
    "width=320 height=33><tr>" +
    jlink(name,'Slower') +
    jlink(name,'Faster') +
    jlink(name,'Backwards') +
    jlink(name,'BackwardsOnce') +
    jlink(name,'BackwardsStep') +
    jlink(name,'Stop') +
    jlink(name,'ForwardsStep') +
    jlink(name,'ForwardsOnce') +
    jlink(name,'Forwards') +
    jlink(name,'BothWays') +
   "</tr></table>\n" +
   "<br>\n";

  document.write(tags);

  pics[name] = new ControlledAnimation(name,dirname,numframes,width,height);

}