var GAniFw=
{
    version: '1.6',
    creator: 'Giffits GmbH - http://www.giffits.de/ - P. Mott - pmo@giffits.de',


    help: function()
    {
      alert('COPYRIGHT: '+this.creator+'\n\n\
USAGE OF GAniFw version '+this.version+'\n\
=========================================\n\n\
Instanciate your own object.\n\
Use a global object variable and pass its name to the creator function: \n\n\
    myobj = new GAniFw.instance(\'myobj\', pic width (single frame), pic height,\n\
               number of frames, id of image, nomouse [true/false], overlayImage )\n\n\
Use your object to control the animation:\n\n\
    myobj.engine.setInterval(120) /\/ set animation speed \n\
    myobj.engine.setDir(-1) /\/ set direction, 1 or -1. \n\
    myobj.engine.play() /\/ start animation \n\
    myobj.engine.play(maxRounds,stopMode) /\/\n\
               maxRounds : max. number of rounds before stop\n\
               stopMode=0 : donīt show icon after stop\n\
               stopMode=1 : show overlay icon after stop when not moved manually\n\
               stopMode=2 : show overlay icon after every stop\n\
    myobj.engine.stop() /\/ stop animation \n\
    myobj.engine.next() /\/ show next frame; stops animation \n\
    myobj.engine.prev() /\/ show previous frame; stops animation \n\
    myobj.engine.timerStop() /\/ stops all timer events\n\
\n\
See the example to see how to embed animated images into HTML pages.\n\n\
      ');
    },
        
    instance: function(objname,width,height,frames,imgid,nomouse,overlayImage)
    {
      var _this=this;
      var _hasTouch='createTouch' in document;
      var _obj=objname;
      var _width=width;
      var _height=height;
      var _frames=frames;
      var _imgid=imgid;
      var _interval=70;
      var _overlayImage='GAniFw_overlay.png';
      
      var _tickTimers=Array();
      var _tickTimerNum=0;
      var _running=false;
      
      var _fullWidth=_width*_frames;
      var _dir=1;
      var _dirBefore=0;
      var _pos=0;
      var _round=0;
      var _maxRounds=9999999999;
      var _stopMode=0;
      var _firstPlay=true;
      var _allowOverlay=false;
      var _tickCount=0;
      
      var _lastX=-100;
      var _dX=0;
      var _moveTurns=1.2;
      var _lastFrame=0;
      
      this.helpers=
      {
        $: function(x)
        {
          return(document.getElementById(x));
        },
        
        show: function(x)
        {
          this.$(x).style.display='block';
        },
        
        hide: function(x)
        {
          this.$(x).style.display='none';
        }
      };
      
      this.engine=
      {
        timerStart: function()
        {
          engine.timerStop();
          _tickTimers[_tickTimerNum]=setInterval(_obj+".engine.tick()",_interval);
          _tickTimerNum++;
        },
        
        timerStop: function()
        {
          for(var x in _tickTimers)
          {
            clearInterval(_tickTimers[x]);
          }
          _tickTimerNum=0;
        },
                
        play: function(maxRounds,stopMode)
        {
          _oImage.style.display='none';
          if(maxRounds>0)
            _maxRounds=maxRounds;
          if(stopMode>0)
          {
            _stopMode=stopMode;
            if((_firstPlay && _stopMode==1) || _stopMode==2)
            {
              _allowOverlay=true;
            }
          }
          _running=true;
          _firstPlay=false;
          if(_tickTimerNum==0)
          {
            engine.timerStart();
          }
        },
        
        stop: function()
        {
          _running=false;
          engine.timerStop();
        },

        rewind: function()
        {
          _pos=0;
          _img.style.left=_pos+'px';
          _round=1;
        },
                
        setDir: function(d)
        {
          _dirBefore=_dir;
          _pos=_width*parseInt(_pos/_width);
          _dir=d;
        },

        tick: function()
        {
          if(!_running)
            return;
          _pos+=_width*_dir;
          if(_pos<=-_fullWidth)
          {
            _pos=0;
            _round++;
          }
          else if(_pos>=0)
          {
            _pos=-_fullWidth+_width;
            if(_tickCount>_frames*0.2)
              _round++;
          }
          if(_round>=_maxRounds)
          {
            engine.stop();
            _round=0;
            _tickCount=0;
            _pos=0;
            if(_stopMode==1 || _stopMode==2)
            {
              if(_allowOverlay)
              {
                _oImage.style.display='inline';
              }
            }
          }
          if((_pos % _width)==0)
          { 
            _img.style.left=_pos+'px';
            _tickCount++;
          }
        },
        
        next: function()
        {
          engine.timerStop();
          _running=true;
          engine.tick();
        },
        
        prev: function()
        {
          engine.timerStop();
          var d=_dir;
          _dir=-_dir;
          _running=true;
          engine.tick();
          _dir=d;
        },
        
        setInterval: function(i)
        {
          _interval=i;
          if(_tickTimerNum>0)
          {
            engine.timerStart();
          }
        },
        
        setTurnsPerWidth: function(t)
        {
          _moveTurns=t;
        },
        
        moveHandler: function(ev)
        {
          if(!ev)
            ev=window.event;
          if(ev.touches)
          	ev.preventDefault();
          engine.stop();
          _oImage.style.display='none';
          currentX=ev.pageX || ((ev.touches?ev.touches[0].pageX:ev.clientX)+(document.documentElement.scrollLeft || document.body.scrollLeft));
          if(_lastX!=-100)
          {
            if(_stopMode==1)
            {
              _allowOverlay=false;
            }
            _dX+=currentX-_lastX;
            var f=_frames-Math.round(_moveTurns*_frames*(_dX/_width));
            if(f<0)
            {
              while(f<0)
              {
                f+=_frames;
              }
            }
            else if(f>=_frames)
            {
              while(f>=_frames)
              {
                f-=_frames;
              }
            }
            if(f!=_lastFrame)
            {
              _pos=-_width*f;
              _img.style.left=_pos+'px';
            }
            _lastFrame=f;
          }
          _lastX=currentX;
        }
        
      };
      
      var helpers=this.helpers;
      var engine=this.engine;
      var _img=helpers.$(_imgid);

      var _oImage=document.createElement("img");

      if(nomouse!=true)
      {
        if(undefined!=overlayImage)
          _overlayImage=overlayImage;
        _oImage.src=_overlayImage;
        _oImage.style.position='absolute';
        _oImage.style.display='none';
        var oIl=Math.round(_width*0.5-72);
        if(oIl<0)
          oIl=0;
        var oIt=Math.round(_height*0.5-90);
        if(oIt<0)
          oIt=0;
        _oImage.style.left=oIl+'px';
        _oImage.style.top=oIt+'px';
        _img.parentNode.appendChild(_oImage);
  
        if(window.addEventListener)
        {
          helpers.$(_imgid).addEventListener(_hasTouch?"touchmove":"mousemove",this.engine.moveHandler,false);
        }
        else if(window.attachEvent)
        {
          helpers.$(_imgid).attachEvent("onmousemove",this.engine.moveHandler);
        }
      }
           
    }
    
};