Separated the different Raphael examples into separate scripts.

index.html

@@ -4,10 +4,13 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
         <title>Paper vs. Processing vs. Rapha&euml;l</title> 
 
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="paper.js" type="text/javascript" charset="utf-8"></script>
         <script src="processing.js" type="text/javascript"></script>
         <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
-        <script src="raphael_shapes.js" type="text/javascript"></script>
+        <script src="raphael_circle.js" type="text/javascript"></script>
+        <script src="raphael_animation.js" type="text/javascript"></script>
+        <script src="raphael_interaction.js" type="text/javascript"></script>
 
         <script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script>
         <script type="text/paperscript" canvas="paperAnimation" src="paper_animation.pjs" id="script"></script>
@@ -90,13 +93,13 @@ <h2><a href="http://processingjs.org/">Processing</a></h2>
             <div id="raphael">
                 <h2><a href="http://raphaeljs.com/">Rapha&euml;l</a></h2>
                 <div id="raphaelCircle" class="canvas"></div>
-                <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+                <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_circle.js" class="sourceLink">view source</a>
 
                 <div id="raphaelAnimation" class="canvas"></div>
-                <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+                <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_animation.js" class="sourceLink">view source</a>
 
                 <div id="raphaelInteraction" class="canvas"></div>
-                <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+                <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_interaction.js" class="sourceLink">view source</a>
 
                 <a href="raphael_gears.html" id="raphaelGears" class="canvas"> </a>
             </div>

raphael_animation.js

@@ -0,0 +1,33 @@
+jQuery(document).ready(function() {
+    var paper = Raphael('raphaelAnimation', 200, 200);
+
+    var back = paper.rect(10, 10, 180, 180);
+    back.attr({
+        'fill': 'white',
+        'stroke': 'white'
+    });
+    back.click(function() {
+        main.raphaelAnimationStopped = !main.raphaelAnimationStopped;
+    });
+
+
+    var c = paper.ellipse(100, 100, 10, 10);
+    c.attr({
+        'fill': '#00aeef',
+        'stroke': '#00aeef'
+    });
+
+    var r = paper.rect(60, 60, 80, 80);
+    r.attr({
+        'stroke-width': 2,
+        'stroke': '#00aeef'
+    });
+
+    r.rotate(60);
+
+    setInterval(function() {
+        if (!main.raphaelAnimationStopped) {
+            r.rotate(6);
+        }
+    }, 33);
+});

raphael_circle.js

@@ -0,0 +1,9 @@
+jQuery(document).ready(function() {
+    var paper = Raphael('raphaelCircle', 200, 200);
+    console.log('paper: ' + paper);
+    var c = paper.ellipse(100, 100, 10, 10);
+    c.attr({
+        'fill': '#00aeef',
+        'stroke': '#00aeef'
+    });
+});

raphael_interaction.js

@@ -0,0 +1,25 @@
+jQuery(document).ready(function() {
+    var paper = Raphael('raphaelInteraction', 200, 200);
+    var r = paper.rect(60, 60, 80, 80);
+    r.attr({
+        'fill': '#00aeef',
+        'stroke': '#00aeef'
+    });
+
+    var clicked = false;
+
+    r.click(function() {
+        if (clicked) {
+            r.attr({
+                'fill': '#00aeef',
+                'stroke': '#00aeef'
+            });
+        } else {
+            r.attr({
+                'fill': '#f00ff0',
+                'stroke': '#f00ff0'
+            });
+        }
+        clicked = !clicked;
+    });
+});