From fd8b7462ed3282ca69d77c1750487987599ef386 Mon Sep 17 00:00:00 2001
From: Ivan Pozdnyakov <Vanya.Pozdnyakov@charter.net>
Date: Tue, 6 Oct 2015 18:20:56 -0400
Subject: [PATCH] dynamic html (integratable)

---
 VQI_Observable.js |   57 ++
 code.js           | 1388 +++++++++++++++++++++++----------------------
 index.php         |  124 +---
 main.js           |    3 +
 4 files changed, 783 insertions(+), 789 deletions(-)
 create mode 100644 VQI_Observable.js
 create mode 100644 main.js

diff --git a/VQI_Observable.js b/VQI_Observable.js
new file mode 100644
index 0000000..9f1527d
--- /dev/null
+++ b/VQI_Observable.js
@@ -0,0 +1,57 @@
+/*
+ * Class VQIObservable
+ * @author Pujan Joshi
+ * @Date April 21, 2014
+ * This is a generic Observable class
+ * This class has basic methods to deal with observers
+ * This class is also observer so it can subscribe to another obvervable class.
+ * 
+ */
+
+var VQI_Observable = function() {
+    this.subscribers = {
+        any: [] // event type: subscribers
+    };
+    this.subscribe = function(fn, type) {
+        type = type || 'any';
+        if (typeof this.subscribers[type] === "undefined") {
+            this.subscribers[type] = [];
+        }
+        this.subscribers[type].push(fn);
+    };
+    this.unsubscribe = function(fn, type) {
+        this.visitSubscribers('unsubscribe', fn, type);
+    };
+    this.publish = function(fn, type) {
+        this.visitSubscribers('publish', fn, type);
+    };
+    this.loading = function(fn, type) {
+        this.visitSubscribers('loading', fn, type);
+    };
+    this.visitSubscribers = function(action, fn, type) {
+        var pubtype = type || 'any';
+        var subscribers = this.subscribers[pubtype];
+        subscribers = subscribers || 0;
+        var i;
+        var max = subscribers.length;
+
+        for (i = 0; i < max; i += 1) {
+            if (action === 'publish') {
+//                console.log(this);
+                subscribers[i].update(fn, type);
+            } else if (action === 'loading') {
+
+                subscribers[i].loading();
+
+            } else {
+                if (subscribers[i] === fn) {
+                    subscribers.splice(i, 1);
+                }
+            }
+        }
+    };
+    
+    this.subscribeTo = function(observable, type){
+        observable.subscribe(this, type);
+    };
+};
\ No newline at end of file
diff --git a/code.js b/code.js
index 5d91961..7f1b952 100644
--- a/code.js
+++ b/code.js
@@ -1,716 +1,764 @@
-// Globals
-var states = [];
-var lastEvent = 0;
-var selectedForQueryNodes = [];
-var selectedForEditNodes = [];
-var selectedForEditEdges = [];
-var bundleCounter = 0;
-var edgeCounter = 0;
-var nodeCounter = 0;
-var loadCounts = 0;
-var target = 0;
-var header ="";
-var counts = {};
-var str_info;
-
-$(function () { // on dom ready
-
-	function onChange(event) {
-		var reader = new FileReader();
-		reader.onload = onReaderLoad;
-		reader.readAsText(event.target.files[0]);
-	}
-
-	function onReaderLoad(event) {
-		var obj = JSON.parse(event.target.result);
-		if(loadCounts==0){
-			header = obj.data;
-			visual_pathway(obj);
-		} else {
-			saveState();
-			for(var i=0; i < obj.elements.nodes.length; i++){
-				obj.elements.nodes[i].position.x = obj.elements.nodes[i].position.x+1000*loadCounts;
+var pathwayEditor = function(parent) {
+
+	// Globals
+	var states = [];
+	var lastEvent = 0;
+	var selectedForQueryNodes = [];
+	var selectedForEditNodes = [];
+	var selectedForEditEdges = [];
+	var bundleCounter = 0;
+	var edgeCounter = 0;
+	var nodeCounter = 0;
+	var loadCounts = 0;
+	var target = 0;
+	var header = "";
+	var counts = {};
+	var str_info;
+	//var rna2Color = {'red_bg',[1,2,3,4,5],'green_bg',[6,7,8,9,10]}
+	//var cnv2Color = {'red_border',[1,2,3,4,5],'purple_border',[6,7,8,9,10]}
+	//var mut2Color = {'',[1,2,3,4,5],'red_shadow',[6,7,8,9,10]}
+
+	$(function() {// on dom ready
+		function onChange(event) {
+			var reader = new FileReader();
+			reader.onload = onReaderLoad;
+			reader.readAsText(event.target.files[0]);
+		}
+
+		function onReaderLoad(event) {
+			var obj = JSON.parse(event.target.result);
+			if (loadCounts == 0) {
+				header = obj.data;
+				visual_pathway(obj);
+			} else {
+				saveState();
+				for (var i = 0; i < obj.elements.nodes.length; i++) {
+					obj.elements.nodes[i].position.x = obj.elements.nodes[i].position.x + 1000 * loadCounts;
+				}
+				window.cy.add(obj.elements)
 			}
-			window.cy.add(obj.elements)
+			loadCounts++;
 		}
-		loadCounts++;
-	}
 
-	function removeNodes(event) {
-		saveState();
-		selectedForEditNodes.remove();
-	}
-	
-	function removeEdges(event) {
-		saveState();
-		selectedForEditEdges.remove();
-	}
-	
-	function addNode(event) {
-		saveState();
-		var name = "n"+nodeCounter;
-		var node = [];
-		
-		node.push({ group: "nodes",
-      			data: {
-         			GraphId: name,
-         			LabelSize: 10,
-         			SUID: name,
-         			Type: "Protein",
-         			Valign: "Middle",
-         			Width: 100,
-         			Height: 25,
-         			id: name,
-         			name: name,
-         			selected: false,
-         			shared_name: name
-       			},
-       			position: {
-         			x: 500,
-         			y: 500
-      			},
-      			css: { 
-      				'border-color': 'black', 
-      				'color': 'black'
-      			} 
-   		})
-   		
-   		nodeCounter++;		
-   		window.cy.add(node);
-	}
-	
-	function addEdge(event){
-		saveState();
-		for(var i = 0; i < selectedForEditNodes.length-1; i++){
-			var sourceE = selectedForEditNodes[i].data('GraphId');
-			var targetE = selectedForEditNodes[i+1].data('GraphId');
-		
-			var edge = [];
-		
-    		edge.push({ 
-				group: "edges",
+		function removeNodes(event) {
+			saveState();
+			selectedForEditNodes.remove();
+		}
+
+		function removeEdges(event) {
+			saveState();
+			selectedForEditEdges.remove();
+		}
+
+		function addNode(event) {
+			saveState();
+			var name = "n" + nodeCounter;
+			var node = [];
+
+			node.push({
+				group : "nodes",
 				data : {
-        		   	id : "e"+edgeCounter,
-            		SUID : "e"+edgeCounter,
-            		LineThickness:1.0,
-            		EndArrow:"Line",
-           		 	Coords:[{"x":0,"y":0},{"x":0,"y":0}],
-           		 	GraphId:"e"+edgeCounter,
-           	 		ZOrder:"12288",
-            		source:sourceE,
-            		target:targetE, 
-            		StartArrow : "Line",
-        			selected : false
-      			},
-      			selected : false
-    		})
-    	
-    		edgeCounter++;
-    		window.cy.add(edge);
-    	}
-    }
-    
-    function unbundle(event){
-    	saveState();	
-    		
-		var nodes = [];
-		var edges =[];
-		
-    	for (var i=0; i < selectedForEditNodes.size(); i++) {
-			nodes.push({
-				group: "nodes",
-				data: {
-         			GraphId: selectedForEditNodes[i].data('GraphId'),
-         			LabelSize: selectedForEditNodes[i].data('LabelSize'),
-         			SUID: selectedForEditNodes[i].data('SUID'),
-         			Type: selectedForEditNodes[i].data('Type'),
-         			Valign: selectedForEditNodes[i].data('Valign'),
-         			Width: selectedForEditNodes[i].data('Width'),
-         			Height: selectedForEditNodes[i].data('Height'),
-         			id: selectedForEditNodes[i].data('id'),
-         			name: selectedForEditNodes[i].data('name'),
-         			selected: selectedForEditNodes[i].data('selected'),
-         			shared_name: selectedForEditNodes[i].data('shared_name'),
-       			},
-				position: {
-					x: selectedForEditNodes[i].position('x'), 
-					y: selectedForEditNodes[i].position('y')
+					GraphId : name,
+					LabelSize : 10,
+					SUID : name,
+					Type : "Protein",
+					Valign : "Middle",
+					Width : 100,
+					Height : 25,
+					id : name,
+					name : name,
+					selected : false,
+					shared_name : name
 				},
-				css: { 
-     				'border-color': 'red' 
-    			} 	
-			});
-			
-			for (var j=0; j < selectedForEditNodes[i].connectedEdges().size(); j++) {
-				edges.push({ 
-					group: "edges",
+				position : {
+					x : 500,
+					y : 500
+				},
+				css : {
+					'border-color' : 'black',
+					'color' : 'black'
+				}
+			})
+
+			nodeCounter++;
+			window.cy.add(node);
+		}
+
+		function addEdge(event) {
+			saveState();
+			for (var i = 0; i < selectedForEditNodes.length - 1; i++) {
+				var sourceE = selectedForEditNodes[i].data('GraphId');
+				var targetE = selectedForEditNodes[i + 1].data('GraphId');
+
+				var edge = [];
+
+				edge.push({
+					group : "edges",
 					data : {
-        	  			id : selectedForEditNodes[i].connectedEdges()[j].data('id'),
-             			SUID : selectedForEditNodes[i].connectedEdges()[j].data('SUID'),
-            			LineThickness: selectedForEditNodes[i].connectedEdges()[j].data('LineThickness'),
-            			EndArrow: selectedForEditNodes[i].connectedEdges()[j].data('EndArrow'),
-            			Coords: selectedForEditNodes[i].connectedEdges()[j].data('Coords'),
-            			GraphId: selectedForEditNodes[i].connectedEdges()[j].data('GraphId'),
-            			ZOrder: selectedForEditNodes[i].connectedEdges()[j].data('ZOrder'),
-            			source: selectedForEditNodes[i].connectedEdges()[j].data('source'),
-            			target: selectedForEditNodes[i].connectedEdges()[j].data('target'),
-            			StartArrow : selectedForEditNodes[i].connectedEdges()[j].data('StartArrow'),
-        				selected : selectedForEditNodes[i].connectedEdges()[j].data('selected')
-      				},
-      				selected : selectedForEditNodes[i].connectedEdges()[j].selected
-    			})
-    		}
+						id : "e" + edgeCounter,
+						SUID : "e" + edgeCounter,
+						LineThickness : 1.0,
+						EndArrow : "Line",
+						Coords : [{
+							"x" : 0,
+							"y" : 0
+						}, {
+							"x" : 0,
+							"y" : 0
+						}],
+						GraphId : "e" + edgeCounter,
+						ZOrder : "12288",
+						source : sourceE,
+						target : targetE,
+						StartArrow : "Line",
+						selected : false
+					},
+					selected : false
+				})
+
+				edgeCounter++;
+				window.cy.add(edge);
+			}
 		}
 
-		// Remove old nodes
-		selectedForEditNodes.remove();
+		function unbundle(event) {
+			saveState();
 
-		// Add new nodes
-		window.cy.add(nodes.concat(edges));
-    }
-	
-	function bundle(event){
-		saveState();		
-		var nodes = [];
-		var edges =[];
-		// Create new parent
-		nodes.push({ group: "nodes",
-      			data: {
-         			GraphId: "n"+bundleCounter,
-         			LabelSize: 10,
-         			SUID: "b6fd7",
-         			Type: "Protein",
-         			Valign: "Middle",
-         			Width: 80.75,
-         			Height: 100,
-         			id: "n"+bundleCounter,
-         			name: "n"+bundleCounter,
-         			selected: false,
-         			shared_name: "n"+bundleCounter
-       			},
-       			position: {
-         			x: 500,
-         			y: 500
-      			},
-      			css: { 
-      				"border-color": "red" 
-      			} 
-   		})
-
-		// Create copies of old nodes
-		for (var i=0; i < selectedForEditNodes.size(); i++) {
-			if(typeof selectedForEditNodes[i].data('parent') == 'undefined'){
+			var nodes = [];
+			var edges = [];
+
+			for (var i = 0; i < selectedForEditNodes.size(); i++) {
 				nodes.push({
-					group: "nodes",
-					data: {
-         				GraphId: selectedForEditNodes[i].data('GraphId'),
-         				LabelSize: selectedForEditNodes[i].data('LabelSize'),
-         				SUID: selectedForEditNodes[i].data('SUID'),
-         				Type: selectedForEditNodes[i].data('Type'),
-         				Valign: selectedForEditNodes[i].data('Valign'),
-         				Width: selectedForEditNodes[i].data('Width'),
-         				Height: selectedForEditNodes[i].data('Height'),
-         				id: selectedForEditNodes[i].data('id'),
-         				name: selectedForEditNodes[i].data('name'),
-         				selected: selectedForEditNodes[i].data('selected'),
-         				shared_name: selectedForEditNodes[i].data('shared_name'),
-         				parent: "n"+bundleCounter
-       				},
-					position: {
-						x: selectedForEditNodes[i].position('x'), 
-						y: selectedForEditNodes[i].position('y')
+					group : "nodes",
+					data : {
+						GraphId : selectedForEditNodes[i].data('GraphId'),
+						LabelSize : selectedForEditNodes[i].data('LabelSize'),
+						SUID : selectedForEditNodes[i].data('SUID'),
+						Type : selectedForEditNodes[i].data('Type'),
+						Valign : selectedForEditNodes[i].data('Valign'),
+						Width : selectedForEditNodes[i].data('Width'),
+						Height : selectedForEditNodes[i].data('Height'),
+						id : selectedForEditNodes[i].data('id'),
+						name : selectedForEditNodes[i].data('name'),
+						selected : selectedForEditNodes[i].data('selected'),
+						shared_name : selectedForEditNodes[i].data('shared_name'),
 					},
-					css: { 
-      					'border-color': 'red' 
-      				} 	
-				});
-			} else {
-				nodes.push({
-					group: "nodes",
-					data: {
-         				GraphId: selectedForEditNodes[i].data('GraphId'),
-         				LabelSize: selectedForEditNodes[i].data('LabelSize'),
-         				SUID: selectedForEditNodes[i].data('SUID'),
-         				Type: selectedForEditNodes[i].data('Type'),
-         				Valign: selectedForEditNodes[i].data('Valign'),
-         				Width: selectedForEditNodes[i].data('Width'),
-         				Height: selectedForEditNodes[i].data('Height'),
-         				id: selectedForEditNodes[i].data('id'),
-         				name: selectedForEditNodes[i].data('name'),
-         				selected: selectedForEditNodes[i].data('selected'),
-         				shared_name: selectedForEditNodes[i].data('shared_name'),
-         				parent: selectedForEditNodes[i].data('parent')
-       				},
-					position: {
-						x: selectedForEditNodes[i].position('x'), 
-						y: selectedForEditNodes[i].position('y')
+					position : {
+						x : selectedForEditNodes[i].position('x'),
+						y : selectedForEditNodes[i].position('y')
 					},
-					css: { 
-      					'border-color': 'red' 
-      				} 	
-				});				
+					css : {
+						'border-color' : 'red'
+					}
+				});
+
+				for (var j = 0; j < selectedForEditNodes[i].connectedEdges().size(); j++) {
+					edges.push({
+						group : "edges",
+						data : {
+							id : selectedForEditNodes[i].connectedEdges()[j].data('id'),
+							SUID : selectedForEditNodes[i].connectedEdges()[j].data('SUID'),
+							LineThickness : selectedForEditNodes[i].connectedEdges()[j].data('LineThickness'),
+							EndArrow : selectedForEditNodes[i].connectedEdges()[j].data('EndArrow'),
+							Coords : selectedForEditNodes[i].connectedEdges()[j].data('Coords'),
+							GraphId : selectedForEditNodes[i].connectedEdges()[j].data('GraphId'),
+							ZOrder : selectedForEditNodes[i].connectedEdges()[j].data('ZOrder'),
+							source : selectedForEditNodes[i].connectedEdges()[j].data('source'),
+							target : selectedForEditNodes[i].connectedEdges()[j].data('target'),
+							StartArrow : selectedForEditNodes[i].connectedEdges()[j].data('StartArrow'),
+							selected : selectedForEditNodes[i].connectedEdges()[j].data('selected')
+						},
+						selected : selectedForEditNodes[i].connectedEdges()[j].selected
+					})
+				}
 			}
-			for (var j=0; j < selectedForEditNodes[i].connectedEdges().size(); j++) {
-				edges.push({ 
-					group: "edges",
-					data : {
-        	   			id : selectedForEditNodes[i].connectedEdges()[j].data('id'),
-             			SUID : selectedForEditNodes[i].connectedEdges()[j].data('SUID'),
-            			LineThickness: selectedForEditNodes[i].connectedEdges()[j].data('LineThickness'),
-            			EndArrow: selectedForEditNodes[i].connectedEdges()[j].data('EndArrow'),
-            			Coords: selectedForEditNodes[i].connectedEdges()[j].data('Coords'),
-            			GraphId: selectedForEditNodes[i].connectedEdges()[j].data('GraphId'),
-            			ZOrder: selectedForEditNodes[i].connectedEdges()[j].data('ZOrder'),
-            			source: selectedForEditNodes[i].connectedEdges()[j].data('source'),
-            			target: selectedForEditNodes[i].connectedEdges()[j].data('target'),
-            			StartArrow : selectedForEditNodes[i].connectedEdges()[j].data('StartArrow'),
-        				selected : selectedForEditNodes[i].connectedEdges()[j].data('selected')
-      				},
-      				selected : selectedForEditNodes[i].connectedEdges()[j].selected
-    			})
-    		}
+
+			// Remove old nodes
+			selectedForEditNodes.remove();
+
+			// Add new nodes
+			window.cy.add(nodes.concat(edges));
 		}
 
-		// Remove old nodes
-		selectedForEditNodes.remove();
+		function bundle(event) {
+			saveState();
+			var nodes = [];
+			var edges = [];
+			// Create new parent
+			nodes.push({
+				group : "nodes",
+				data : {
+					GraphId : "n" + bundleCounter,
+					LabelSize : 10,
+					SUID : "b6fd7",
+					Type : "Protein",
+					Valign : "Middle",
+					Width : 80.75,
+					Height : 100,
+					id : "n" + bundleCounter,
+					name : "n" + bundleCounter,
+					selected : false,
+					shared_name : "n" + bundleCounter
+				},
+				position : {
+					x : 500,
+					y : 500
+				},
+				css : {
+					"border-color" : "red"
+				}
+			})
 
-		// Add new nodes
-		window.cy.add(nodes.concat(edges));
-		
-		bundleCounter++;
-	}
-	
-	function produceJSON(event){
-		download(states[states.length - 1], "data.txt", "text/plain");
-		console.log(data);
-	}
-	
-	function saveState(){
-		var nodes = cy.$('node');
-		var edges = cy.$('edge');
-		var data = '{"format_version" : "1.0","generated_by" : "cytoscape-3.2.1","target_cytoscapejs_version" : "~2.1","data" :'
-		+JSON.stringify(header)+
-		',"elements" : {"nodes" :' 
-		+ JSON.stringify(nodes.jsons()) + 
-		',"edges" :'
-		+ JSON.stringify(edges.jsons()) + 
-		'}}';
-		states.push(data);
-	}
-	
-	function undo(){
-		if(states.length > 1){
-			cy.$('node').remove();
-			cy.$('edge').remove();
-			states.pop()
-			var obj = JSON.parse(states[states.length-1]);
-			window.cy.add(obj.elements)
+			// Create copies of old nodes
+			for (var i = 0; i < selectedForEditNodes.size(); i++) {
+				if ( typeof selectedForEditNodes[i].data('parent') == 'undefined') {
+					nodes.push({
+						group : "nodes",
+						data : {
+							GraphId : selectedForEditNodes[i].data('GraphId'),
+							LabelSize : selectedForEditNodes[i].data('LabelSize'),
+							SUID : selectedForEditNodes[i].data('SUID'),
+							Type : selectedForEditNodes[i].data('Type'),
+							Valign : selectedForEditNodes[i].data('Valign'),
+							Width : selectedForEditNodes[i].data('Width'),
+							Height : selectedForEditNodes[i].data('Height'),
+							id : selectedForEditNodes[i].data('id'),
+							name : selectedForEditNodes[i].data('name'),
+							selected : selectedForEditNodes[i].data('selected'),
+							shared_name : selectedForEditNodes[i].data('shared_name'),
+							parent : "n" + bundleCounter
+						},
+						position : {
+							x : selectedForEditNodes[i].position('x'),
+							y : selectedForEditNodes[i].position('y')
+						},
+						css : {
+							'border-color' : 'red'
+						}
+					});
+				} else {
+					nodes.push({
+						group : "nodes",
+						data : {
+							GraphId : selectedForEditNodes[i].data('GraphId'),
+							LabelSize : selectedForEditNodes[i].data('LabelSize'),
+							SUID : selectedForEditNodes[i].data('SUID'),
+							Type : selectedForEditNodes[i].data('Type'),
+							Valign : selectedForEditNodes[i].data('Valign'),
+							Width : selectedForEditNodes[i].data('Width'),
+							Height : selectedForEditNodes[i].data('Height'),
+							id : selectedForEditNodes[i].data('id'),
+							name : selectedForEditNodes[i].data('name'),
+							selected : selectedForEditNodes[i].data('selected'),
+							shared_name : selectedForEditNodes[i].data('shared_name'),
+							parent : selectedForEditNodes[i].data('parent')
+						},
+						position : {
+							x : selectedForEditNodes[i].position('x'),
+							y : selectedForEditNodes[i].position('y')
+						},
+						css : {
+							'border-color' : 'red'
+						}
+					});
+				}
+				for (var j = 0; j < selectedForEditNodes[i].connectedEdges().size(); j++) {
+					edges.push({
+						group : "edges",
+						data : {
+							id : selectedForEditNodes[i].connectedEdges()[j].data('id'),
+							SUID : selectedForEditNodes[i].connectedEdges()[j].data('SUID'),
+							LineThickness : selectedForEditNodes[i].connectedEdges()[j].data('LineThickness'),
+							EndArrow : selectedForEditNodes[i].connectedEdges()[j].data('EndArrow'),
+							Coords : selectedForEditNodes[i].connectedEdges()[j].data('Coords'),
+							GraphId : selectedForEditNodes[i].connectedEdges()[j].data('GraphId'),
+							ZOrder : selectedForEditNodes[i].connectedEdges()[j].data('ZOrder'),
+							source : selectedForEditNodes[i].connectedEdges()[j].data('source'),
+							target : selectedForEditNodes[i].connectedEdges()[j].data('target'),
+							StartArrow : selectedForEditNodes[i].connectedEdges()[j].data('StartArrow'),
+							selected : selectedForEditNodes[i].connectedEdges()[j].data('selected')
+						},
+						selected : selectedForEditNodes[i].connectedEdges()[j].selected
+					})
+				}
+			}
+
+			// Remove old nodes
+			selectedForEditNodes.remove();
+
+			// Add new nodes
+			window.cy.add(nodes.concat(edges));
+
+			bundleCounter++;
+		}
+
+		function produceJSON(event) {
+			download(states[states.length - 1], "data.txt", "text/plain");
+			console.log(data);
+		}
+
+		function saveState() {
+			var nodes = cy.$('node');
+			var edges = cy.$('edge');
+			var data = '{"format_version" : "1.0","generated_by" : "cytoscape-3.2.1","target_cytoscapejs_version" : "~2.1","data" :' + JSON.stringify(header) + ',"elements" : {"nodes" :' + JSON.stringify(nodes.jsons()) + ',"edges" :' + JSON.stringify(edges.jsons()) + '}}';
+			states.push(data);
 		}
-	}
-	
 
-	function visual_pathway(obj) {
-		$('#cy').cytoscape({
-			style: cytoscape.stylesheet()
-			
+		function undo() {
+			if (states.length > 1) {
+				cy.$('node').remove();
+				cy.$('edge').remove();
+				states.pop()
+				var obj = JSON.parse(states[states.length - 1]);
+				window.cy.add(obj.elements)
+			}
+		}
+
+		function visual_pathway(obj) {
+			$('#cy').cytoscape({
+				style : cytoscape.stylesheet()
+
 				// node elements default css (unselected state)
 				.selector('node').css({
-					'content': 'data(name)',
-					'text-valign': 'center',
-					'color': 'black',
-					'padding-left': 2,
-					'padding-right': 2,
-					'font-family': 'data(LabelSize)',
-					'background-color': 'white'
-				})
-				.selector('node[Type="GeneProduct"]').css({
-					'shape': 'rectangle',
-					'width': 'data(Width)',
-					'height': 'data(Height)',
-					'text-valign': 'middle',
-					'background-color': 'white',
-					'border-color': 'black',
-					'border-width': 1
+					'content' : 'data(name)',
+					'text-valign' : 'center',
+					'color' : 'black',
+					'padding-left' : 2,
+					'padding-right' : 2,
+					'font-family' : 'data(LabelSize)',
+					'background-color' : 'white'
+				}).selector('node[Type="GeneProduct"]').css({
+					'shape' : 'rectangle',
+					'width' : 'data(Width)',
+					'height' : 'data(Height)',
+					'text-valign' : 'middle',
+					'background-color' : 'white',
+					'border-color' : 'black',
+					'border-width' : 1
+				}).selector('node[Type="Protein"]').css({
+					'shape' : 'rectangle',
+					'width' : 'data(Width)',
+					'height' : 'data(Height)',
+					'background-color' : 'white',
+					'color' : '#ff3333',
+					'border-color' : '#ff3333',
+					'border-style' : 'solid',
+					'border-width' : 1
+				}).selector('node[Shape="Brace"]').css({
+					'shape' : 'rectangle',
+					'width' : '1',
+					'height' : 'data(Width)',
+					'background-color' : 'black',
+					'color' : 'black',
+					'border-color' : 'black',
+					'border-style' : 'solid',
+					'border-width' : 1
+				}).selector('node[FillColor="ffffff"]').css({
+					'background-color' : 'white',
+					'color' : 'blue',
+					'text-halign' : 'center',
+					'text-valign' : 'top'
 				})
-				.selector('node[Type="Protein"]').css({
-					'shape': 'rectangle',
-					'width': 'data(Width)',
-					'height': 'data(Height)',
-					'background-color': 'white',
-					'color': '#ff3333',
-					'border-color': '#ff3333',
-					'border-style': 'solid',
-					'border-width': 1
-				})
-				.selector('node[Shape="Brace"]').css({
-					'shape': 'rectangle',
-					'width': '1',
-					'height': 'data(Width)',
-					'background-color': 'black',
-					'color': 'black',
-					'border-color': 'black',
-					'border-style': 'solid',
-					'border-width': 1
-				})
-				.selector('node[FillColor="ffffff"]').css({
-					'background-color': 'white',
-					'color': 'blue',
-					'text-halign': 'center',
-					'text-valign': 'top'
-				})
-				
+
 				// edge elements default css (unselected)
 				.selector('edge').css({
-					'line-color': 'black',
-					'line-style': 'solid',
-					'width': 1
-				})
-				.selector('edge[LineStyle="Dashed"]').css({
-					'line-style': 'dashed',
-					'line-color': 'black',
-					'background-color': 'black',
-					'color': 'black'
+					'line-color' : 'black',
+					'line-style' : 'solid',
+					'width' : 1
+				}).selector('edge[LineStyle="Dashed"]').css({
+					'line-style' : 'dashed',
+					'line-color' : 'black',
+					'background-color' : 'black',
+					'color' : 'black'
+				}).selector('edge[EndArrow="Arrow"]').css({
+					'target-arrow-shape' : 'triangle',
+					'target-arrow-color' : 'black',
+					'target-arrow-fill' : 'filled'
+				}).selector('edge[EndArrow="TBar"]').css({
+					'target-arrow-shape' : 'tee',
+					'target-arrow-color' : 'black',
+					'target-arrow-fill' : 'filled'
+				}).selector('edge[ConnectorType="Elbow"]').css({
+					'line-color' : 'yellow',
+					'line-style' : 'solid'
 				})
-				.selector('edge[EndArrow="Arrow"]').css({
-					'target-arrow-shape': 'triangle',
-					'target-arrow-color': 'black',
-					'target-arrow-fill': 'filled'
-				})
-				.selector('edge[EndArrow="TBar"]').css({
-					'target-arrow-shape': 'tee',
-					'target-arrow-color': 'black',
-					'target-arrow-fill': 'filled'
-				})
-				.selector('edge[ConnectorType="Elbow"]').css({
-					'line-color': 'yellow',
-					'line-style': 'solid'
-				})
-				
+
 				// node & edge elements (selected state)
 				.selector('edge:selected').css({
-					'background-color': 'yellow',
-					'line-color': 'yellow',
-					'target-arrow-color': 'yellow',
-					'source-arrow-color': 'yellow'
-				})
-				.selector('node:selected').css({
-					'background-color': 'yellow'
+					'background-color' : 'yellow',
+					'line-color' : 'yellow',
+					'target-arrow-color' : 'yellow',
+					'source-arrow-color' : 'yellow'
+				}).selector('node:selected').css({
+					'background-color' : 'yellow'
 				})
-				
+
 				// misc
 				.selector('.faded').css({
-					'opacity': 1,
-					'text-opacity': 0
+					'opacity' : 1,
+					'text-opacity' : 0
 				})
 
 				// query purpose
 				.selector('.green_bg').css({
-					'background-color': 'LightGreen',
-					'color': 'black'
-				})
-				.selector('.red_bg').css({
-					'background-color': 'LightSalmon',
-					'color': 'black'
-				})
-				.selector('.purple_border').css({
-					'border-color': 'MediumPurple',
-					'border-width': 3
-				})
-				.selector('.red_border').css({
-					'border-color': 'red',
-					'border-width': 3
-				})
-				.selector('.red_shadow').css({
-					'shadow-opacity': 1,
-					'shadow-color': 'red',
-					'border-width': 1
-				})
-				.selector('.red_circle').css({
-					'background-color': 'red',
-					'shape': 'ellipse',
-					'background-opacity': 0.5
-				})
-				.selector('.green_circle').css({
-					'background-color': 'green',
-					'shape': 'ellipse',
-					'background-opacity': 0.5
-				})
-				.selector('.reset_all').css({
-					'background-color': 'white',
-					'border-color': 'black',
-					'border-width': 1
+					'background-color' : 'LightGreen',
+					'color' : 'black'
+				}).selector('.red_bg').css({
+					'background-color' : 'LightSalmon',
+					'color' : 'black'
+				}).selector('.purple_border').css({
+					'border-color' : 'MediumPurple',
+					'border-width' : 3
+				}).selector('.red_border').css({
+					'border-color' : 'red',
+					'border-width' : 3
+				}).selector('.red_shadow').css({
+					'shadow-opacity' : 1,
+					'shadow-color' : 'red',
+					'border-width' : 1
+				}).selector('.red_circle').css({
+					'background-color' : 'red',
+					'shape' : 'ellipse',
+					'background-opacity' : 0.5
+				}).selector('.green_circle').css({
+					'background-color' : 'green',
+					'shape' : 'ellipse',
+					'background-opacity' : 0.5
+				}).selector('.reset_all').css({
+					'background-color' : 'white',
+					'border-color' : 'black',
+					'border-width' : 1
 				}),
 
-			elements: obj.elements,
+				elements : obj.elements,
 
-			layout: {
-				name: 'preset',
-				padding: 10
-			},
+				layout : {
+					name : 'preset',
+					padding : 10
+				},
 
-			ready: function () {
-				window.cy = this;
-				var selectedNodes = [];
-		
-				// custom event handlers
-				cy.on('click', 'node', function (event) {
-					
-				});
+				ready : function() {
+					window.cy = this;
+					var selectedNodes = [];
+
+					// custom event handlers
+					cy.on('click', 'node', function(event) {
+
+					});
+
+					cy.on('cxttapstart ', 'node', function(event) {
+						target = event.cyTarget;
+						dialogNode.dialog("open");
+					});
+
+					cy.on('cxttapstart ', 'edge', function(event) {
+						target = event.cyTarget;
+						dialogEdge.dialog("open");
+					});
+
+					cy.on('select', 'node', function(event) {
+						selectedForEditNodes = cy.$('node:selected');
+						//			    	saveState();
+					});
+
+					cy.on('unselect', 'node', function(event) {
+						selectedForEditNodes = cy.$('node:selected');
+						//			    	saveState();
+					});
+
+					cy.on('select', 'edge', function(event) {
+						selectedForEditEdges = cy.$('edge:selected');
+						//			    	saveState();
+					});
+
+					cy.on('unselect', 'edge', function(event) {
+						selectedForEditEdges = cy.$('edge:selected');
+						//			    	saveState();
+					});
+
+					cy.on('free', 'node', function(event) {
+						saveState();
+					});
+
+					cy.on('data', 'node', function(event) {
+						//					saveState();
+					});
+
+					cy.on('style', 'node', function(event) {
+						//					saveState();
+					});
 
-				cy.on('cxttapstart ', 'node', function(event){
-					target = event.cyTarget;
-					dialogNode.dialog("open");
-				});
-				
-				cy.on('cxttapstart ', 'edge', function(event){
-					target = event.cyTarget;
-					dialogEdge.dialog("open");
-				});
-				
-				cy.on('select', 'node', function(event){
-			    	selectedForEditNodes = cy.$('node:selected');
-//			    	saveState();
-				});
-				
-				cy.on('unselect', 'node', function(event){
-			    	selectedForEditNodes = cy.$('node:selected');
-//			    	saveState();
-				});
-				
-				cy.on('select', 'edge', function(event){
-			    	selectedForEditEdges = cy.$('edge:selected');
-//			    	saveState();
-				});
-				
-				cy.on('unselect', 'edge', function(event){
-			    	selectedForEditEdges = cy.$('edge:selected');
-//			    	saveState();
-				});
-				
-				cy.on('free', 'node', function(event){
 					saveState();
-				});
-				
-				cy.on('data', 'node', function(event){
-//					saveState();
-				});
-				
-				cy.on('style', 'node', function(event){
-//					saveState();
-				});
-				
-				saveState();
-			},
+				},
 
-  			// initial viewport state:
-  			zoom: 1,
-  			pan: { x: 0, y: 0 },
-			
-			// interaction options:
-  			minZoom: 1e-50,
-  			maxZoom: 1e50,
-  			zoomingEnabled: true,
-  			userZoomingEnabled: true,
-  			panningEnabled: true,
-  			userPanningEnabled: true,
- 	 		boxSelectionEnabled: true,
-  			selectionType: 'additive',
-  			touchTapThreshold: 8,
-  			desktopTapThreshold: 4,
-  			autolock: false,
-  			autoungrabify: false,
-  			autounselectify: false,
-
-  			// rendering options:
-  			headless: false,
-  			styleEnabled: true,
-  			hideEdgesOnViewport: false,
-  			hideLabelsOnViewport: false,
-  			textureOnViewport: false,
-  			motionBlur: false,
-  			motionBlurOpacity: 0.2,
-  			wheelSensitivity: 1,
-  			pixelRatio: 1,
-  			initrender: function(evt){ /* ... */ },
-  			renderer: { /* ... */ }
-		});	
-	}
-	
-	function clone(obj) {
-    	if (null == obj || "object" != typeof obj) return obj;
-    	var copy = obj.constructor();
-    	for (var attr in obj) {
-    	    if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
-    	}
-    	return copy;
-	}
-	
-	function setNodeStyle(target,background,border){
-		target.removeClass();
-		if(background != '')
-			target.addClass(background);
-		if(border != '')
-			target.addClass(border);
-	}
-	
-	function editEdge() {
-		saveState();
-		var direction = document.getElementById("direction").value;
-		var type = document.getElementById("type-edge").value;
-		target.data('StartArrow',type);
-		target.data('EndArrow',type);
-		if(document.getElementById('direction').checked){
-			var edge = [];
-		
-    		edge.push({ 
-				group: "edges",
-				data : {
-        		   	id : target.data('id'),
-            		SUID : target.data('SUID'),
-            		LineThickness:target.data('LineThickness'),
-            		EndArrow: target.data('EndArrow'),
-           		 	Coords: target.data('Coords'),
-           		 	GraphId: target.data('GraphId'),
-           	 		ZOrder: target.data('ZOrder'),
-            		source: target.data('target'),
-            		target: target.data('source'), 
-            		StartArrow : target.data('StartArrow'),
-        			selected : target.data('Selected')
-      			},
-      			selected : false
-    		})
-    		target.remove();
-  			window.cy.add(edge);	
+				// initial viewport state:
+				zoom : 1,
+				pan : {
+					x : 0,
+					y : 0
+				},
+
+				// interaction options:
+				minZoom : 1e-50,
+				maxZoom : 1e50,
+				zoomingEnabled : true,
+				userZoomingEnabled : true,
+				panningEnabled : true,
+				userPanningEnabled : true,
+				boxSelectionEnabled : true,
+				selectionType : 'additive',
+				touchTapThreshold : 8,
+				desktopTapThreshold : 4,
+				autolock : false,
+				autoungrabify : false,
+				autounselectify : false,
+
+				// rendering options:
+				headless : false,
+				styleEnabled : true,
+				hideEdgesOnViewport : false,
+				hideLabelsOnViewport : false,
+				textureOnViewport : false,
+				motionBlur : false,
+				motionBlurOpacity : 0.2,
+				wheelSensitivity : 1,
+				pixelRatio : 1,
+				initrender : function(evt) {/* ... */
+				},
+				renderer : {/* ... */ }
+			});
 		}
-		dialogEdge.dialog( "close" );
-	}
-	
-	function editNode() {
-		saveState();
-		var name = document.getElementById("name").value;
-		var width = document.getElementById("width").value;
-		var height = document.getElementById("height").value;
-		target.data('name', name);
-		target.data('Width', width);
-		target.data('Height', height);
-		
-		var node_name = target.data("shared_name");
-		selectedForQueryNodes.push(node_name);
-		var node_id = target.data("id");
-		var count = document.getElementById("type").value;
-					
-		// RNA
-		if (count == 1) {						
-			target.addClass('green_bg');
-		} 
-					
-		if (count == 2) {
-			target.removeClass('green_bg');
-			target.addClass('red_bg');
+
+		function clone(obj) {
+			if (null == obj || "object" != typeof obj)
+				return obj;
+			var copy = obj.constructor();
+			for (var attr in obj) {
+				if (obj.hasOwnProperty(attr))
+					copy[attr] = obj[attr];
+			}
+			return copy;
 		}
-					
-		// CNV Added
-		if (count == 3) {
-			target.addClass('purple_border');
-			target.addClass('green_bg');
-			target.removeClass('red_bg');
+
+		function setNodeStyle(target, background, border, shadow) {
+			target.removeClass();
+			if (background != '')
+				target.addClass(background);
+			if (border != '')
+				target.addClass(border);
+			if (shadow != '')
+				target.addClass(shadow);
 		}
-					
-		if (count == 4) {
-			target.addClass('purple_border');
-			target.addClass('red_bg');
-			target.removeClass('green_bg');
+
+		function editEdge() {
+			saveState();
+			var direction = document.getElementById("direction").value;
+			var type = document.getElementById("type-edge").value;
+			target.data('StartArrow', type);
+			target.data('EndArrow', type);
+			if (document.getElementById('direction').checked) {
+				var edge = [];
+
+				edge.push({
+					group : "edges",
+					data : {
+						id : target.data('id'),
+						SUID : target.data('SUID'),
+						LineThickness : target.data('LineThickness'),
+						EndArrow : target.data('EndArrow'),
+						Coords : target.data('Coords'),
+						GraphId : target.data('GraphId'),
+						ZOrder : target.data('ZOrder'),
+						source : target.data('target'),
+						target : target.data('source'),
+						StartArrow : target.data('StartArrow'),
+						selected : target.data('Selected')
+					},
+					selected : false
+				})
+				target.remove();
+				window.cy.add(edge);
+			}
+			dialogEdge.dialog("close");
 		}
-					
-		if (count == 5) {
-			target.addClass('red_border');
-			target.addClass('green_bg');
-			target.removeClass('red_bg');
-			target.removeClass('purple_border');
+
+		function editNode() {
+			saveState();
+			var name = document.getElementById("gene-name").value;
+			var width = document.getElementById("width").value;
+			var height = document.getElementById("height").value;
+			target.data('name', name);
+			target.data('Width', width);
+			target.data('Height', height);
+
+			var node_name = target.data("shared_name");
+			selectedForQueryNodes.push(node_name);
+			var node_id = target.data("id");
+			var rna = document.getElementById("rna").value;
+			var cnv = document.getElementById("cnv").value;
+			var mut = document.getElementById("mut").value;
+
+			// RNA
+			if (rna > 5) {
+				setNodeStyle(target, 'red_bg', '', '');
+			} else {
+				setNodeStyle(target, 'green_bg', '', '');
+			}
+
+			if (cnv > 5) {
+				setNodeStyle(target, '', 'red_border', '');
+			} else {
+				setNodeStyle(target, 'green_bg', '', '');
+			}
+
+			if (mut > 5) {
+				setNodeStyle(target, 'red_bg', '', '');
+			} else {
+				setNodeStyle(target, 'green_bg', '', '');
+			}
+
 			$('#variable').val($('#variable').val() + node_name + " ");
+			dialogNode.dialog("close");
 		}
-					
-		if (count == 6) {
-			target.addClass('red_border');
-			target.addClass('red_bg');
-			target.removeClass('green_bg');
-			target.removeClass('purple_border');
-		}
-					
-		if (count == 7) {
-			target.addClass('red_shadow');
-			target.addClass('red_bg');
-			target.addClass('purple_border');
-						
-			target.removeClass('green_bg');
-			target.removeClass('red_border');
-		}
-					
-		if (count == 8) {
-			target.addClass('red_shadow');
-			target.addClass('red_bg');
-			target.addClass('red_border');
-						
-			target.removeClass('green_bg');
-			target.removeClass('purple_border');
-		}
-					
-		if (count == 9) {
-			target.addClass('red_shadow');
-			target.addClass('green_bg');
-			target.addClass('red_border');
-						
-			target.removeClass('red_bg');
-			target.removeClass('purple_border');
-		}
-					
-		if (count == 10) {
-			target.addClass('red_shadow');
-			target.addClass('green_bg');
-			target.addClass('purple_border');
-						
-			target.removeClass('red_bg');
-			target.removeClass('red_border');
-		}
-		$('#variable').val($('#variable').val() + node_name + " ");
-		dialogNode.dialog( "close" );
-	}
-
- 	dialogNode = $( "#dialog-form-node" ).dialog({
-    	autoOpen: false,
-    	height: 300,
-    	width: 350,
-    	buttons: {
-    		"submit": editNode,
-    	    Cancel: function() {
-    	    	dialogNode.dialog( "close" );
-    	   	}
-    	},
-    	close: function() {
-    	}
-    });
-    
-    dialogEdge = $( "#dialog-form-edge" ).dialog({
-    	autoOpen: false,
-    	height: 300,
-    	width: 350,
-    	buttons: {
-    		"submit": editEdge,
-    	    Cancel: function() {
-    	    	dialogEdge.dialog( "close" );
-    	   	}
-    	},
-    	close: function() {
-    	}
-    });
-    	
-	document.getElementById('file').addEventListener('change', onChange);
-	document.getElementById('deleteNodes').addEventListener('click', removeNodes);
-	document.getElementById('deleteEdges').addEventListener('click', removeEdges);
-	document.getElementById('addNode').addEventListener('click', addNode);
-	document.getElementById('addEdge').addEventListener('click', addEdge);
-	document.getElementById('bundle').addEventListener('click',bundle);
-	document.getElementById('unbundle').addEventListener('click',unbundle);
-	document.getElementById('produceJSON').addEventListener('click',produceJSON);
-	document.getElementById('undo').addEventListener('click',undo);
-}); // on dom ready
+
+		dialogNode = $("#dialog-form-node").dialog({
+			open : function(event) {
+				document.getElementById("gene-name").value = target.data('name');
+			},
+			autoOpen : false,
+			height : 300,
+			width : 350,
+			buttons : {
+				"submit" : editNode,
+				Cancel : function() {
+					dialogNode.dialog("close");
+				}
+			},
+			close : function() {
+			}
+		});
+
+		dialogEdge = $("#dialog-form-edge").dialog({
+			autoOpen : false,
+			height : 300,
+			width : 350,
+			buttons : {
+				"submit" : editEdge,
+				Cancel : function() {
+					dialogEdge.dialog("close");
+				}
+			},
+			close : function() {
+			}
+		});
+
+		document.getElementById('file').addEventListener('change', onChange);
+		document.getElementById('deleteNodes').addEventListener('click', removeNodes);
+		document.getElementById('deleteEdges').addEventListener('click', removeEdges);
+		document.getElementById('addNode').addEventListener('click', addNode);
+		document.getElementById('addEdge').addEventListener('click', addEdge);
+		document.getElementById('bundle').addEventListener('click', bundle);
+		document.getElementById('unbundle').addEventListener('click', unbundle);
+		document.getElementById('produceJSON').addEventListener('click', produceJSON);
+		document.getElementById('undo').addEventListener('click', undo);
+	});
+	
+	// Outer Control Layout
+	
+	var parentDiv = document.getElementById(parent);
+	
+	var strVar = "";
+	strVar += "	<input id=\"file\" value=\"Pick File\" type=\"file\"><\/input>";
+	strVar += "	<input id=\"addNode\" value=\"Add Node\" type=\"button\"><\/input>";
+	strVar += "	<input id=\"addEdge\" value=\"Add Edge\" type=\"button\"><\/input>";
+	strVar += "	<input id=\"deleteEdges\" value=\"Delete Selected Edge(s)\" type=\"button\"><\/input>";
+	strVar += "	<input id=\"deleteNodes\" value=\"Delete Selected Node(s)\" type=\"button\"><\/input>";
+	strVar += "	<input id=\"bundle\" value=\"Bundle\" type=\"button\"><\/input>";
+	strVar += "	<input id=\"unbundle\" value=\"Unbundle\" type=\"button\"><\/input>";
+	strVar += "	<input id=\"produceJSON\" value=\"Export JSON\" type=\"button\"><\/input>";
+	strVar += "	<input id=\"undo\" value=\"Undo\" type=\"button\"><\/input>";
+	strVar += "	<form id=\"form-data\" method=\"post\" action=\"http:\/\/137.99.11.122\/pathway2\/get.php\" target=\"_blank\">";
+	strVar += "		<input type=\"hidden\" name=\"variable\" id=\"variable\"><\/input>";
+	strVar += "		<input type=\"submit\" value=\"Submit\"><\/input>";
+	strVar += "	<\/form>";
+	strVar += "	<div id=\"dialog-form-edge\" title=\"Edit edge\">";
+	strVar += " 		<form>";
+	strVar += "    		<fieldset>";
+	strVar += "      			<label for=\"direction\">change direction:<\/label>";
+	strVar += "      			<input type=\"checkbox\" name=\"direction\" id=\"direction\" value=\"Yes\"><\/input>";
+	strVar += "      			";
+	strVar += "      			<label for=\"type-edge\">type:<\/label>";
+	strVar += "      			<select style=\"width: 150px\" id=\"type-edge\" name=\"type-edge\">";
+	strVar += "  					<option selected=\"\">Please Select<\/option>";
+	strVar += "  					<option>TBar<\/option>";
+	strVar += "  					<option>Arrow<\/option>";
+	strVar += "  					<option>Line<\/option>";
+	strVar += "				<\/select>";
+	strVar += " 			    <input type=\"submit\" tabindex=\"-1\" style=\"position:absolute; top:-1000px\"><\/input>";
+	strVar += "    		<\/fieldset>";
+	strVar += "  		<\/form>";
+	strVar += "	<\/div>";
+	strVar += "	<div id=\"dialog-form-node\" title=\"Edit node\">";
+	strVar += " 		<form>";
+	strVar += "    		<fieldset>";
+	strVar += "      			<label for=\"gene-name\">gene-name:<\/label>";
+	strVar += "      			<input type=\"text\" name=\"gene-name\" id=\"gene-name\" value=\"\" class=\"text ui-widget-content ui-corner-all\"><\/input>";
+	strVar += "      			";
+	strVar += "      			<label for=\"height\">height:<\/label>";
+	strVar += "      			<input type=\"text\" name=\"height\" id=\"height\" value=\"\" class=\"text ui-widget-content ui-corner-all\"><\/input>";
+	strVar += "      			";
+	strVar += "      			<label for=\"width\">width:<\/label>";
+	strVar += "      			<input type=\"text\" name=\"width\" id=\"width\" value=\"\" class=\"text ui-widget-content ui-corner-all\"><\/input>";
+	strVar += "      			";
+	strVar += "      			<label for=\"rna\">RNA:<\/label>";
+	strVar += "      			<select style=\"width: 150px\" id=\"rna\" name=\"rna\">";
+	strVar += "  					<option selected=\"\">Please Select<\/option>";
+	strVar += "  					<option>1<\/option>";
+	strVar += "  					<option>2<\/option>";
+	strVar += "  					<option>3<\/option>";
+	strVar += "  					<option>4<\/option>";
+	strVar += "  					<option>5<\/option>";
+	strVar += "  					<option>6<\/option>";
+	strVar += "  					<option>7<\/option>";
+	strVar += "  					<option>8<\/option>";
+	strVar += "  					<option>9<\/option>";
+	strVar += "  					<option>10<\/option>";
+	strVar += "				<\/select>";
+	strVar += "				";
+	strVar += "				<label for=\"cvn\">CNV:<\/label>";
+	strVar += "      			<select style=\"width: 150px\" id=\"cvn\" name=\"cvn\">";
+	strVar += "  					<option selected=\"\">Please Select<\/option>";
+	strVar += "  					<option>1<\/option>";
+	strVar += "  					<option>2<\/option>";
+	strVar += "  					<option>3<\/option>";
+	strVar += "  					<option>4<\/option>";
+	strVar += "  					<option>5<\/option>";
+	strVar += "  					<option>6<\/option>";
+	strVar += "  					<option>7<\/option>";
+	strVar += "  					<option>8<\/option>";
+	strVar += "  					<option>9<\/option>";
+	strVar += "  					<option>10<\/option>";
+	strVar += "				<\/select>";
+	strVar += "				";
+	strVar += "				<label for=\"mut\">MUT:<\/label>";
+	strVar += "      			<select style=\"width: 150px\" id=\"mut\" name=\"mut\">";
+	strVar += "  					<option selected=\"\">Please Select<\/option>";
+	strVar += "  					<option>1<\/option>";
+	strVar += "  					<option>2<\/option>";
+	strVar += "  					<option>3<\/option>";
+	strVar += "  					<option>4<\/option>";
+	strVar += "  					<option>5<\/option>";
+	strVar += "  					<option>6<\/option>";
+	strVar += "  					<option>7<\/option>";
+	strVar += "  					<option>8<\/option>";
+	strVar += "  					<option>9<\/option>";
+	strVar += "  					<option>10<\/option>";
+	strVar += "				<\/select>";
+	strVar += " 			    <input type=\"submit\" tabindex=\"-1\" style=\"position:absolute; top:-1000px\"><\/input>";
+	strVar += "    		<\/fieldset>";
+	strVar += "  		<\/form>";
+	strVar += "	<\/div>";
+	strVar += "	<div id=\"cy\"><\/div>";
+	
+	document.getElementById(parent).innerHTML = strVar;
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index cc20ffe..ab550b0 100644
--- a/index.php
+++ b/index.php
@@ -1,7 +1,7 @@
 <html>
 <head>
 	<link href="style.css" rel="stylesheet"/>
-	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
+	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
 	<meta charset=utf-8/>
 	<title content="Json pathway file reader">Json pathway file reader</title>
 	<script src="http://danml.com/js/download.js"></script>
@@ -10,125 +10,11 @@
   	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 	<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
-	<script src="code.js"></script>
-	<script src="html2canvas.js"></script>
 </head>
-<script language="javascript">
-	html2canvas([document.getElementById('cy')], {
-		onrendered: function (cy) {
-			document.getElementById('cy').appendChild(cy);
-			var data = cy.toDataURL('image/png');
-			//display 64bit imag
-			var image = new Image();
-			image.src = data;
-			document.getElementById('image').appendChild(image);
-			// AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server
-
-			var file = dataURLtoBlob(data);
-
-			// Create new form data
-			var fd = new FormData();
-			fd.append("pattern", file);
-
-			$.ajax({
-				url: "index.php",
-				type: "POST",
-				data: fd,
-				processData: false,
-				contentType: false,
-			}).done(function (respond) {
-
-				$(".return-data").html("Uploaded Canvas image link: <a href=" + respond + ">" + respond + "</a>").hide().fadeIn("fast");
-			});
-		}
-	});
-
-	function dataURLtoBlob(dataURL) {
-		// Decode the dataURL
-		var binary = atob(dataURL.split(',')[1]);
-		
-		// Create 8-bit unsigned array
-		var array = [];
-		for (var i = 0; i < binary.length; i++) {
-			array.push(binary.charCodeAt(i));
-		}
-		
-		// Return our Blob object
-		return new Blob([new Uint8Array(array)], {type: 'image/png'});
-	}
-</script>
 <body>
-	<input id="file" type="file"/>
-	<input id="addNode" value="Add Node" type="button"/></input>
-	<input id="addEdge" value="Add Edge" type="button"/></input>
-	<input id="deleteEdges" value="Delete Selected Edge(s)" type="button"/></input>
-	<input id="deleteNodes" value="Delete Selected Node(s)" type="button"/></input>
-	<input id="bundle" value="Bundle" type="button"/></input>
-	<input id="unbundle" value="Unbundle" type="button"/></input>
-	<input id="produceJSON" value="Export JSON" type="button"/></input>
-	<input id="undo" value="Undo" type="button"/></input>
-	
-	<form id="form-data" method="post" action="http://137.99.11.122/pathway2/get.php" target="_blank">
-		<input type="hidden" name="variable" id="variable"><br>
-		<!--<input type="hidden" name="rna" id="rna"><br>
-		<input type="hidden" name="cnv" id="cnv"><br>
-		<input type="hidden" name="mut" id="mut"><br>
-		<input type="hidden" name="ts_gene" id="ts_gene"><br>
-		<input type="hidden" name="onco_gene" id="onco_gene"><br>-->
-	<input type="submit" value="Submit">
-	
-	<div id="dialog-form-edge" title="Edit edge">
- 		<form>
-    		<fieldset>
-      			<label for="direction">change direction:</label>
-      			<input type="checkbox" name="direction" id="direction" value="Yes">
-      			
-      			<label for="type-edge">type:</label>
-      			<select style="width: 150px" id="type-edge" name="type-edge">
-  					<option selected="">Please Select</option>
-  					<option>TBar</option>
-  					<option>Arrow</option>
-  					<option>Line</option>
-				</select>
- 
- 			    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
-    		</fieldset>
-  		</form>
-	</div>
-	
-	<div id="dialog-form-node" title="Edit node">
- 		<form>
-    		<fieldset>
-      			<label for="name">name:</label>
-      			<input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
-      			
-      			<label for="height">height:</label>
-      			<input type="text" name="height" id="height" value="" class="text ui-widget-content ui-corner-all">
-      			
-      			<label for="width">width:</label>
-      			<input type="text" name="width" id="width" value="" class="text ui-widget-content ui-corner-all">
-      			
-      			<label for="type">type:</label>
-      			<select style="width: 150px" id="type" name="type">
-  					<option selected="">Please Select</option>
-  					<option>1</option>
-  					<option>2</option>
-  					<option>3</option>
-  					<option>4</option>
-  					<option>5</option>
-  					<option>6</option>
-  					<option>7</option>
-  					<option>8</option>
-  					<option>9</option>
-  					<option>10</option>
-				</select>
- 
- 			    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
-    		</fieldset>
-  		</form>
-	</div>
-	<div id="cy"></div>
+	<div id="parent"></div>
+	<script src="VQI_Observable.js"></script>
+	<script src="code.js"></script>
+	<script src="main.js"></script>
 </body>
-<script>
-</script>
 </html>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..341bbda
--- /dev/null
+++ b/main.js
@@ -0,0 +1,3 @@
+pathwayEditor.prototype = new VQI_Observable();
+var pathwayEditor = new pathwayEditor("parent");
+heatmap.subscribeTo(heatmap);
\ No newline at end of file