build list of boxes with javascript code only (simulate json import)

ui/css/flowchartDemo.css

@@ -34,16 +34,16 @@ filter:alpha(opacity=60);
 }
 
 #window1 { top:10em;left:5em;}
-#window2 { top:10em; left:20em;}
-#window3 { top:10em;left:35em; }
+#window2 { top:10em; left:15em;}
+#window3 { top:10em;left:25em; }
 #window4 { top:30em; left:5em;}
-#window5 { top:30em; left:20em;}
-#window6 { top:30em; left:35em;}
-#window7 { top:20em; left:50em;}
-#window8 { top:10em; left:65em;}
-#window9 { top:10em; left:80em;}
-#window10 { top:30em; left:65em;}
-#window11 { top:30em; left:80em;}
+#window5 { top:30em; left:15em;}
+#window6 { top:30em; left:25em;}
+#window7 { top:20em; left:35em;}
+#window8 { top:10em; left:45em;}
+#window9 { top:10em; left:55em;}
+#window10 { top:30em; left:45em;}
+#window11 { top:30em; left:55em;}
 ._jsPlumb_connector { z-index:3; }
 ._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; }
 .hl { border:3px solid red; }

ui/index.html

@@ -10,7 +10,7 @@
 		<div id="headerWrapper"><div id="header"></div></div>		
         <div id="main">
 			<div id="render"></div>
-			<div class="window" id="window1"><strong>1</strong><br/><br/></div>
+			<!--div class="window" id="window1"><strong>1</strong><br/><br/></div>
 			<div class="window" id="window2"><strong>2</strong><br/><br/></div>
 		    <div class="window" id="window3"><strong>3</strong><br/><br/></div>
 		    <div class="window" id="window4"><strong>4</strong><br/><br/></div>		
@@ -20,7 +20,7 @@
         <div class="window" id="window8"><strong>8</strong><br/><br/></div>   
         <div class="window" id="window9"><strong>Packaging</strong><br/><br/></div>   
         <div class="window" id="window10"><strong>10</strong><br/><br/></div>   
-        <div class="window" id="window11"><strong>Packaging</strong><br/><br/></div>   
+        <div class="window" id="window11"><strong>Packaging</strong><br/><br/></div-->
 	    </div>
 		<div id="sidebar">			
             <div id="explanation">

ui/src/flowchartConnectorsDemo.js

@@ -43,16 +43,16 @@
 			jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
 
       var line;
-      line = jsPlumb.connect({source:"window1", target: "window2"});
-      line = jsPlumb.connect({source:"window2", target: "window3"});
-      line = jsPlumb.connect({source:"window4", target: "window5"});
-      line = jsPlumb.connect({source:"window5", target: "window6"});
-      // Example to change line color
-      // line.setPaintStyle({strokeStyle:"#42a62c", lineWidth:2 });
-      line = jsPlumb.connect({source:"window3", target: "window7"});
-      line = jsPlumb.connect({source:"window6", target: "window7"});
-      line = jsPlumb.connect({source:"window7", target: "window8"});
-      line = jsPlumb.connect({source:"window7", target: "window10"});
+//       line = jsPlumb.connect({source:"window1", target: "window2"});
+//       line = jsPlumb.connect({source:"window2", target: "window3"});
+//       line = jsPlumb.connect({source:"window4", target: "window5"});
+//       line = jsPlumb.connect({source:"window5", target: "window6"});
+//       // Example to change line color
+//       // line.setPaintStyle({strokeStyle:"#42a62c", lineWidth:2 });
+//       line = jsPlumb.connect({source:"window3", target: "window7"});
+//       line = jsPlumb.connect({source:"window6", target: "window7"});
+//       line = jsPlumb.connect({source:"window7", target: "window8"});
+//       line = jsPlumb.connect({source:"window7", target: "window10"});
 			//
             
 			//
@@ -80,6 +80,56 @@
 	};
 })();
 
+(function() {
+   function displayGraph() {
+     // So instead of having html filled with data, we will use
+     // a structure (like if we got it from json) and we will render it
+     var graph_data = {}, i, i_length, render_dom, box, j, j_length;
+     graph_data.box_list = [
+       {id: 'window1', title: '1', target_list: ['window2']},
+       {id: 'window2', title: '2', target_list: ['window3']},
+       {id: 'window3', title: '3', target_list: ['window7']},
+       {id: 'window4', title: '4', target_list: ['window5']},
+       {id: 'window5', title: '5', target_list: ['window6']},
+       {id: 'window6', title: '6', target_list: ['window7']},
+       {id: 'window7', title: 'Moulding', target_list: ['window8', 'window10']},
+       {id: 'window8', title: '8', target_list: ['window9']},
+       {id: 'window9', title: '9'},
+       {id: 'window10', title: '10', target_list: ['window11']},
+       {id: 'window11', title: '11'},
+     ];
+
+     // Add boxes in the render div
+     render_dom = $("[id=render]");
+     i_length = graph_data.box_list.length;
+     for (i=0; i < i_length; i++) {
+       box = graph_data.box_list[i];
+       render_dom.append('<div class="window" id="' +
+                         box.id + '"><strong>' + box.title
+                         + '</strong><br/><br/></div>');
+     }
+
+     // Now that we have all boxes, connect them
+     for (i=0; i < i_length; i++) {
+       box = graph_data.box_list[i];
+       if (box.target_list !== undefined) {
+         j_length = box.target_list.length;
+         for (j=0; j < j_length; j++) {
+           line = jsPlumb.connect({source:box.id, target: box.target_list[j]});
+         }
+       }
+     }
+
+
+     // Initial DEMO code : make all the window divs draggable
+     jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
+  }
+  setTimeout(function () {
+    console.log("in timeout");
+    displayGraph()
+  }, 500);
+})();
+
 (function() {
    function sendData(url, data, onSuccess, onError) {