title: The author of this Raphael JS extension has vanished from the face of the internet, help me with his script
body: <p>The extension I'm talking about is the Raphael-zpd: <a href="http://pohjoisespoo.net84.net/src/raphael-zpd.js" rel="nofollow">http://pohjoisespoo.net84.net/src/raphael-zpd.js</a></p>
  
  <p>/* EDIT The script is added to a Raphael document with this command <code>var zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false});</code> where paper is your canvas */</p>
  
  <p>The script was originally released at the authors github <a href="http://www.github.com/somnidea" rel="nofollow">http://www.github.com/somnidea</a> which no longer exists.</p>
  
  <p>What I wanted to do was run the mousewheel zoom out to the threshold as soon as the raphael is loaded. The zoomthreshold is set at the beginning of the script <code>zoomThreshold: [-37, 20]</code>. In the mousewheel scroll function it is compared to zoomCurrent which is by default 0 <code>me.zoomCurrent = 0;</code></p>
  
  <p>This is the whole mousewheel event part</p>
  
  <pre><code>me.handleMouseWheel = function(evt) {
      if (!me.opts.zoom) return;
  
      if (evt.preventDefault)
          evt.preventDefault();
  
      evt.returnValue = false;
  
      var svgDoc = evt.target.ownerDocument;
  
      var delta;
  
      if (evt.wheelDelta)
          delta = evt.wheelDelta / 3600; // Chrome/Safari
      else
          delta = evt.detail / -90; // Mozilla
  
      if (delta &gt; 0) {
          if (me.opts.zoomThreshold) 
              if (me.opts.zoomThreshold[1] &lt;= me.zoomCurrent) return;
          me.zoomCurrent++;
      } else {
          if (me.opts.zoomThreshold)
              if (me.opts.zoomThreshold[0] &gt;= me.zoomCurrent) return;
          me.zoomCurrent--;
      }
  
      var z = 1 + delta; // Zoom factor: 0.9/1.1
  
      var g = svgDoc.getElementById("viewport"+me.id);
  
      var p = me.getEventPoint(evt);
  
      p = p.matrixTransform(g.getCTM().inverse());
  
      // Compute new scale matrix in current mouse position
      var k = me.root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y);
      me.setCTM(g, g.getCTM().multiply(k));
  
      if (!me.stateTf)
          me.stateTf = g.getCTM().inverse();
  
      me.stateTf = me.stateTf.multiply(k.inverse());
  }
  </code></pre>
  
  <p>The reason I can't just draw a smaller SVG to begin with is that I'm using raster images as the background and need them to be higher resolution. I would still like to start at the furthest point I've set at the threshold. Is it possible for me to somehow use this script to do this? I'm naturally using it otherwise to handle mouse zoom/pan.</p>
  
  <p>//EDIT</p>
  
  <p>There is also this function at the end of the script, but so far I've been unable to work it.</p>
  
  <pre><code>Raphael.fn.ZPDPanTo = function(x, y) {
  var me = this;
  
  if (me.gelem.getCTM() == null) {
      alert('failed');
      return null;
  }
  
  var stateTf = me.gelem.getCTM().inverse();
  
  var svg = document.getElementsByTagName("svg")[0];
  
  if (!svg.createSVGPoint) alert("no svg");        
  
  var p = svg.createSVGPoint();
  
  p.x = x; 
  p.y = y;
  
  p = p.matrixTransform(stateTf);
  
  var element = me.gelem;
  var matrix = stateTf.inverse().translate(p.x, p.y);
  
  var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
  
  element.setAttribute("transform", s);
  
  return me;
  
  
  }
  </code></pre>
  
  <p>Seems like it's used for panning through the document through say click events so that a click would execute the function with the given coordinates. However, as said I've been unable to work it. I don't know how it's supposed to function. I tried <code>paper.ZPDPanTo(100, 100);</code> as well as just <code>ZPDPanTo(100,100)</code> but nothing happens.</p>