/**********************************************************\
 * animate.js                                             *
 *                                                        *
 * By: Peter Liebert                                      *
 * 9/18/2007                                              *
 *                                                        *
 * Frame animation of multiple discreet sequential images *
\**********************************************************/

var Animate = {
   init : function(args) {  // id [image id], frames [number of frames], autostart [true|false], speed [1-300]
      if ((!document.images) && (!document.getElementById)) return false;
      if ((typeof args.id == 'undefined') || (typeof args.frames == 'undefined')) return false;

      var o = document.getElementById(args.id);
      var imagePath = o.src.substring(0,o.src.lastIndexOf("/")+1);
      var imageName = o.src.substring(imagePath.length,o.src.length);
      var imageExt = imageName.substring(imageName.lastIndexOf("."),imageName.length);
      var imageBase = imageName.substring(0,imageName.lastIndexOf("_")+1);
      var seqStart = imageName.substring(imageName.lastIndexOf("_")+1,imageName.lastIndexOf("."));
      var startNum = parseInt(seqStart);
      var endNum = startNum+parseInt(args.frames)-1;
      
      o.id = args.id;
  		o.imageSrc = new Array();
      o.numFrames = args.frames;
      o.speed = (typeof args.speed == 'undefined') ? 100 : args.speed;
      o.direction = (typeof args.dir == 'undefined') ? 1 : args.dir;
  		o.curFrame = 0;
  		o.isPaused = (typeof args.autostart == 'undefined') ? false : !args.autostart;
  		o.isDragging = false;
  		o.initX = 0; o.initY = 0;
  		o.prevX = 0; o.prevY = 0;
		
  		o.oncontextmenu = function() { return false;}
  		
      o.onmousedown = function(e) {
         o.isDragging = true;
         e = Animate.fixE(e);
         o.initX = e.clientX, o.initY = e.clientY; 
         o.prevX = e.clientX, o.prevY = e.clientY; 
         document.getElementById(o.id).style.cursor = "e-resize";
         Animate.cursorSet(o.id,"e-resize");
         return false;
      }
      
      o.onmousemove = function(e) {
         if (!o.isDragging) return;
         o.isPaused = true;
         e = Animate.fixE(e);
    
         var currY = e.clientY, currX = e.clientX;     
         if (currX > o.prevX+5) { Animate.prevFrame(o.id); o.prevX = currX; o.prevY = currY; }
         if (currX < o.prevX-5) { Animate.nextFrame(o.id); o.prevX = currX; o.prevY = currY; }
         Animate.cursorSet(o.id,"e-resize");
         return false;
      }
      
      o.onmouseup = function(e) {
         o.isDragging = false;
         e = Animate.fixE(e);
    
         var currY = e.clientY, currX = e.clientX;
         if ((currX == o.initX) && (currY == o.initY)) {
            o.isPaused = !o.isPaused; 
            if (!o.isPaused) Animate.cycle(o.id);
         }
         Animate.cursorClear(o.id);
         return false;
      }

      o.onerror = function() {
         o.onmousedown = null;
         o.onmousemove = null;
         o.onmouseup = null;
         o.alt = "Image failed to load!"
      }

      for (var i=startNum; i<=endNum; i++) {
         var oImage = new Image();
         var seq = (i < 10) ? "0"+i : i;
         oImage.src = imagePath + imageBase + seq + imageExt;
         o.imageSrc.push (oImage);
      }
      o.onload = null;
      setTimeout("Animate.cycle('"+o.id+"')", 250);
   },

   cycle : function(oID) {
      var o = document.getElementById(oID);
      if (!o.isPaused) {
         (o.direction==1) ? Animate.nextFrame(oID) : Animate.prevFrame(oID);
         setTimeout("Animate.cycle('"+oID+"')", o.speed);
      }
   },

   nextFrame : function(oID) {
      var o = document.getElementById(oID);
      o.curFrame++;
      if (o.curFrame == o.numFrames) o.curFrame=0;
      document.images[o.id].src = o.imageSrc[o.curFrame].src;
   },

   prevFrame : function(oID) {
      var o = document.getElementById(oID);
      o.curFrame--;
      if (o.curFrame < 1) o.curFrame=o.numFrames-1;
      document.images[o.id].src = o.imageSrc[o.curFrame].src;
   },

   cursorSet : function(oID,cName) {
      document.getElementById(oID).style.cursor = cName;
   },

   cursorClear : function(oID) {
      document.getElementById(oID).style.cursor = "default";
   },

   fixE : function(e) {
      if (typeof e == 'undefined') e = window.event;
      if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
      if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
      return e;
   }
};