refactor to get some global parameters and some initial functions

Author: cnk

our_script.js

@@ -1,17 +1,39 @@
-window.onload = function() {
+function makeNodes() {
     var paper = new Raphael(document.getElementById('canvas_container'), 1000, 500);
+    HORIZON = 200; // the y coordinate which gives us the x-axis, e.g. y=250px;
+    LINE_ATTRS = {stroke: '#aaa', 'stroke-width': 5};
+    NODE_ATTRS = {stroke: '#aaa', 'stroke-width': 2, fill: 'white'};
+    NODE_RADIUS = 50;
 
-    var ax1 = paper.path("M 0 250 l 900 0").attr({stroke: '#aaa', 'stroke-width': 5});
+    function makeLine(len) {
+        paper.path("M 0 " + HORIZON + "l "+ len +" 0").attr(LINE_ATTRS);
+    };
 
-    for(var i = 0; i < 5; i+=1) {
-        paper.circle(200*i+100, 250, 50).attr({stroke: '#aaa', 'stroke-width': 2, fill: 'white'});
+    function node(x, y) {
+        paper.circle(x, y, NODE_RADIUS).attr(NODE_ATTRS);
     };
 
-    $('#canvas_container').on("click", function(){
-        var req = paper.circle(0, 250, 5).attr({fill: 'red'});
-        var node1 = Raphael.animation({cx: 100, cy: 250}, 500, function(){
-            paper.circle(100, 250, 50).attr({fill: 'red'})
+    function animateRequest(){
+        var speed = 500;
+        var req = paper.circle(0, HORIZON, 5).attr({fill: 'red'});
+        var node1 = Raphael.animation({cx: 100, cy: HORIZON}, speed, function(){
+            paper.circle(100, HORIZON, NODE_RADIUS).attr({fill: 'red'});
+            paper.text(100, HORIZON, "Node 1").attr({"font-size": 12});
         });
         req.animate(node1);
-    });
-}
+    };
+
+    function main() {
+        makeLine(900);
+        for(var i = 0; i < 5; i+=1) {
+            node(200*i+100, HORIZON);
+        };
+    };
+    main();
+
+    // events
+    $('#canvas_container').on("click", animateRequest);
+
+};
+
+$(document).ready(makeNodes);