title: How do I "uniquely" repeat a function n times in javascript?
body: <p>so I have some code that draws a path and a circle. the circle is animated across the path every single time the function is initiated. I simply want to create 10 paths, each with their own circle that animates across each path. When I simply execute the function 10 times, the paths are generated fine, however the circle all animate along the same, single path. what am I doing wrong here? Is the best method here to create a for(i=0) loop? </p>
  
  <p>You can view my code on <a href="http://jsfiddle.net/VEdwG/4/" rel="nofollow">jfiddle</a>, or take a look at it here: </p>
  
  <pre><code>function commerce() {
  Raphael("commercebounce", function () {
              var r = this;   
              function pathfade() {
              var pa = .1,
                  pb = .4, 
                  pc = [0, 2], 
                  pd = [50, 300], 
                  pe = [150, 800], 
                  pf = [150, 350], 
                  pg = pd[0] + Math.random() * (pd[1] - pd[0]), 
                  ph = pe[0] + Math.random() * (pe[1] - pe[0]), 
                  pi = pf[0] + Math.random() * (pf[1] - pf[0]),
                  bd = .1,
                  be = .9,
                  pathspot = bd + Math.random() * (be - bd),
                  colours = ["215,10,45", "115,115,115"],
                  stroke = ["", "- "];
                  opacity = pa + Math.random() * (pb - pa), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = pc[Math.round(Math.random())];
                  pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"opacity": 0});
                  bh = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() {
                  var t = this.attr("transform")})
                  leng = pj.getTotalLength();
                  r.customAttributes.along1 = function (v) {
                      var point = pj.getPointAtLength(v * leng);
                      return {
                          transform: "t" + [point.x, point.y] + "r" + point.alpha
                         }
                  };
                  return bh.attr({along1:0}), bh.animate({along1:pathspot},300), pj.animate({opacity:opacity},300), pj, bh
               }
  pathfade();//how do i repeat this function n times?               
      }); 
  }
  commerce();
  </code></pre>