Trying to get an animation from one path to another working here... onclick

test.js

window.onload = function(){
  var paper = new Raphael("pseudologo", 160, 300),
	    // shape = paper.circle(80, 140, 50),
      circlepath = "M80,40c0,-30 40,-30 40,0z",
      rectpath   = "M15,179l140,0 0,30 -140,0z",
      groovy = { stroke: "none", fill: Raphael.hsl(117, 53, 76), cursor: "pointer" },
      dashed = { fill: "green", stroke: "black", "stroke-dasharray": "- " }
	    testtrigger = paper.circle(20, 20, 20).attr(groovy)

  // var rect   = paper.path(path2).attr(dashed)

  // shape.attr(groovy)
  // shape.hover(
  //   function()  { shape.animate({fill: Raphael.hsl(297, 53, 76)}, 250) },
  //   function () { shape.animate({fill: Raphael.hsl(117, 53, 76)}, 250) });

  var el = paper.path(rectpath).attr(groovy),
      elattrs = [{path: rectpath}, {path: circlepath}],
      now = 1;

  console.debug(testtrigger)

  testtrigger.node.onclick = function() { 
    el.stop().animate(elattrs[+(now = !now)], 1000);
    // location = "/"; this.style.curser = 'pointer'; 
  }
    // var mk = paper.text(80, 50, "M K").attr({fill: '#fff'});
}

I tried to do it like here (http://raphaeljs.com/animation.html) but apparently I fail...

Error Message: Uncaught TypeError: Cannot set property 'onclick' of undefined