casper floats across the screen

casper.html

<script src="static/js/raphael-min.js"></script>
<span id="injection" style="display:none;">&nbsp;</span>
<script>(function() {
     $("#injection").parent().parent().remove();

     var paper = new Raphael("content", "100%", "100%");
     $(paper.canvas).css({
          position: "absolute",
          left: 0,
          top: 0,
          "z-index": 200
     });
     var imagePath = "static/images/casper.png";
     var casper = paper.image(imagePath, 0, "20%", 333, 187);
     casper.attr('opacity', 0.00);
     casper.animate({opacity: 1.0, x: 400}, 1000, "linear", function() {
          casper.animate({opacity: 0.0, x: 800}, 1000, "linear", function() {
               $(paper.canvas).remove();
          });
     });
})();</script>