diff --git a/code.js b/code.js
index 888b388..c94d5f7 100644
--- a/code.js
+++ b/code.js
@@ -23,157 +23,33 @@ $(function () { // on dom ready
 	function remove(event) {
 		selectedForEditNodes.remove();
 	}
-	
-	/*
-	 function sendFileToServer(formData, status) {
-	 var uploadURL = "http://localhost/pathway/cy_v1/index.php"; //Upload URL
-	 var extraData = {}; //Extra Data.
-	 var jqXHR = $.ajax({
-	 xhr: function () {
-	 var xhrobj = $.ajaxSettings.xhr();
-	 if (xhrobj.upload) {
-	 xhrobj.upload.addEventListener('progress', function (event) {
-	 var percent = 0;
-	 var position = event.loaded || event.position;
-	 var total = event.total;
-	 if (event.lengthComputable) {
-	 percent = Math.ceil(position / total * 100);
-	 }
-	 //Set progress
-	 status.setProgress(percent);
-	 }, false);
-	 }
-	 return xhrobj;
-	 },
-	 url: uploadURL,
-	 type: "POST",
-	 contentType: false,
-	 processData: false,
-	 cache: false,
-	 data: formData,
-	 success: function (data) {
-	 status.setProgress(100);
-	 $("#information").html(data);
-	 $("#status1").append("File upload Done<br>");
-	 }
-	 });
-
-	 status.setAbort(jqXHR);
-	 }
-
-	 var rowCount = 0;
-
-	 function createStatusbar(obj) {
-	 rowCount++;
-	 var row = "odd";
-	 if (rowCount % 2 == 0) row = "even";
-	 this.statusbar = $("<div class='statusbar " + row + "'></div>");
-	 this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
-	 this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
-	 this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
-	 this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
-	 obj.after(this.statusbar);
-
-	 this.setFileNameSize = function (name, size) {
-	 var sizeStr = "";
-	 var sizeKB = size / 1024;
-	 if (parseInt(sizeKB) > 1024) {
-	 var sizeMB = sizeKB / 1024;
-	 sizeStr = sizeMB.toFixed(2) + " MB";
-	 }
-	 else {
-	 sizeStr = sizeKB.toFixed(2) + " KB";
-	 }
-
-	 this.filename.html(name);
-	 this.size.html(sizeStr);
-	 }
-	 this.setProgress = function (progress) {
-	 var progressBarWidth = progress * this.progressBar.width() / 100;
-	 this.progressBar.find('div').animate({width: progressBarWidth}, 10).html(progress + "% ");
-	 if (parseInt(progress) >= 100) {
-	 this.abort.hide();
-	 }
-	 }
-	 this.setAbort = function (jqxhr) {
-	 var sb = this.statusbar;
-	 this.abort.click(function () {
-	 jqxhr.abort();
-	 sb.hide();
-	 });
-	 }
-	 }
-
-	 function handleFileUpload(files, obj) {
-	 for (var i = 0; i < files.length; i++) {
-	 var fd = new FormData();
-	 fd.append('file', files[i]);
-
-	 var status = new createStatusbar(obj); //Using this we can set progress.
-	 status.setFileNameSize(files[i].name, files[i].size);
-	 sendFileToServer(fd, status);
-
-	 }
-	 }
-
-	 var obj = $("#dragandrophandler");
-	 obj.on('dragenter', function (e) {
-	 e.stopPropagation();
-	 e.preventDefault();
-	 $(this).css('border', '2px solid #0B85A1');
-	 });
-	 obj.on('dragover', function (e) {
-	 e.stopPropagation();
-	 e.preventDefault();
-	 });
-	 obj.on('drop', function (e) {
-
-	 $(this).css('border', '2px dotted #0B85A1');
-	 e.preventDefault();
-	 var files = e.originalEvent.dataTransfer.files;
-
-	 //We need to send dropped files to Server
-	 handleFileUpload(files, obj);
-	 });
-	 $(document).on('dragenter', function (e) {
-	 e.stopPropagation();
-	 e.preventDefault();
-	 });
-	 $(document).on('dragover', function (e) {
-	 e.stopPropagation();
-	 e.preventDefault();
-	 obj.css('border', '2px dotted #0B85A1');
-	 });
-	 $(document).on('drop', function (e) {
-	 e.stopPropagation();
-	 e.preventDefault();
-	 });
-
-	 function addCircle(nodeId, circleText) {
-	 console.log(nodeId, circleText);
-	 var parentNode = cy.$('#' + nodeId);
-	 if (parentNode.data('isCircle') || parentNode.data('circleId'))
-	 return;
-	 parentNode.lock();
-	 var px = parentNode.position('x') + 10;
-	 var py = parentNode.position('y') - 10;
-	 var circleId = (cy.nodes().size() + 1).toString();
-	 parentNode.data('circleId', circleId);
-	 cy.add({
-	 group: 'nodes',
-	 data: {weight: 75, id: circleId, name: circleText, isCircle: true},
-	 position: {x: px, y: py},
-	 locked: true
-	 }).css({
-	 'background-color': 'yellow',
-	 'shape': 'ellipse',
-	 'background-opacity': 0.5
-	 }).unselectify();
-	 }
-	 */
-
-
-	//dCircle('1', 'Bubble A');
+/*	Color: "ff0033"
+	GraphId: "b6fd7"
+	Height: 27
+	LabelSize: 10
+	SUID: "b6fd7"
+	Type: "Protein"
+	Valign: "Middle"	
+	Width: 80.75
+	XrefDatasource: "Uniprot-TrEMBL"
+	XrefId: "O15350"
+	id: "b6fd7"
+	name: "TP73alpha"
+	selected: false
+	shared_name: "TP73alpha"
+*/
+	function add(event) {	
+		var node = { group: "nodes", x: 10, y: 35, 
+		data: { Color: "ff0033",GraphId: "b6fd8", 
+				Height: 27, Labelsize: 10, 
+				SUID: "b6fd8", Type: "Protein", 
+				Valign: "Middle", Width: 80.75,
+				XrefDatasource: "Uniprot-TrEMBL",
+				XrefId: 01530, id: "b6fd8", name: "O15350",
+				selected: false, shared_names: "TP73alpha" } };
+		
+		cy.add(node);
+	}
 
 	function visual_pathway(obj) {
 		$('#cy').cytoscape({
@@ -283,40 +159,34 @@ $(function () { // on dom ready
 				name: 'preset',
 				padding: 10
 			},
-			//style: {
-			//    name: 'WikiPathways'
-			//},
-
-			// on graph initial layout done (could be async depending on layout...)
-
 
 			ready: function () {
 				window.cy = this;
-
-				//cy.elements().unselectify();
-
-				//$('#information').append("You have selected:" + "<br>");
-
+				var selectedNodes = [];
+		
 				// custom event handlers
 				cy.off('click', 'node').on('click', 'node', function (e) {
+
 					e.preventDefault();
 
 					var node = this;
 
 					var node_name = node.data("shared_name");
+					selectedNodes.push(node_name);
 					var node_id = node.data("id");
-					//console.log(node_name);
+					var count = selectedNodes.filter(function (value) {
+						return value === node_name;
+					}).length;
 
-					if ($.inArray(node_name, selectedForQueryNodes) !== -1) {
+					selectedForQueryNodes.push(node_name);
+					if (count % 2 == 0) {
+						node.removeClass('green');
 						node.addClass('red');
-						var old_html = $('#params').text;
-						console.log(old_html);
-						$('#params').append(node_name + ":" + "high" + "\n");
 					} else {
-						selectedForQueryNodes.push(node_name);
+						node.removeClass('red');
 						node.addClass('green');
-						$('#params').append(node_name + ":" + "low" + "\n");
 					}
+
 				});
 				
 				cy.on('select', 'node', function(event){
@@ -360,4 +230,5 @@ $(function () { // on dom ready
 
 	document.getElementById('file').addEventListener('change', onChange);
 	document.getElementById('delete').addEventListener('click', remove);
+	document.getElementById('add').addEventListener('click', add);
 }); // on dom ready
diff --git a/index.php b/index.php
index 3df6edf..446a723 100644
--- a/index.php
+++ b/index.php
@@ -1,11 +1,3 @@
-<?php
-/**
- * Created by PhpStorm.
- * User: thamhoang
- * Date: 8/26/15
- * Time: 3:27 PM
- */
-?>
 <html>
 <head>
 	<link href="style.css" rel="stylesheet"/>
@@ -16,81 +8,6 @@
 	<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>
-	<style>
-		#dragandrophandler {
-			border: 2px dotted #0B85A1;
-			width: 150px;
-			color: #92AAB0;
-			text-align: left;
-			vertical-align: middle;
-			padding: 10px 10px 10px 10px;
-			margin-bottom: 10px;
-			font-size: 100%;
-		}
-
-		.progressBar {
-			width: 200px;
-			height: 22px;
-			border: 1px solid #ddd;
-			border-radius: 5px;
-			overflow: hidden;
-			display: inline-block;
-			margin: 0px 10px 5px 5px;
-			vertical-align: top;
-		}
-
-		.progressBar div {
-			height: 100%;
-			color: #fff;
-			text-align: right;
-			line-height: 22px; /* same as #progressBar height if we want text middle aligned */
-			width: 0;
-			background-color: #0ba1b5;
-			border-radius: 3px;
-		}
-
-		.statusbar {
-			border-top: 1px solid #A9CCD1;
-			min-height: 25px;
-			width: 700px;
-			padding: 10px 10px 0px 10px;
-			vertical-align: top;
-		}
-
-		.statusbar:nth-child(odd) {
-			background: #EBEFF0;
-		}
-
-		.filename {
-			display: inline-block;
-			vertical-align: top;
-			width: 250px;
-		}
-
-		.filesize {
-			display: inline-block;
-			vertical-align: top;
-			color: #30693D;
-			width: 100px;
-			margin-left: 10px;
-			margin-right: 5px;
-		}
-
-		.abort {
-			background-color: #A8352F;
-			-moz-border-radius: 4px;
-			-webkit-border-radius: 4px;
-			border-radius: 4px;
-			display: inline-block;
-			color: #fff;
-			font-family: arial;
-			font-size: 13px;
-			font-weight: normal;
-			padding: 4px 15px;
-			cursor: pointer;
-			vertical-align: top
-		}
-	</style>
 </head>
 <script language="javascript">
 	html2canvas([document.getElementById('cy')], {
@@ -105,7 +22,7 @@
 
 			var file = dataURLtoBlob(data);
 
-// Create new form data
+			// Create new form data
 			var fd = new FormData();
 			fd.append("pattern", file);
 
@@ -124,37 +41,37 @@
 	});
 
 	function dataURLtoBlob(dataURL) {
-// Decode the dataURL
+		// Decode the dataURL
 		var binary = atob(dataURL.split(',')[1]);
-// Create 8-bit unsigned array
+		
+		// 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 our Blob object
 		return new Blob([new Uint8Array(array)], {type: 'image/png'});
 	}
 
 </script>
 <body>
-<input id="file" type="file"/>
-<input id="delete" value="Delete" type="button"/></input>
-<form action="get.php" method="post" id="pathway">
-	<textarea id="params" name="params" rows="10" cols="10"></textarea>
-	<input type="submit" id="submit" value="Save and Query">
-</form>
-<br/>
-
-<div id="cy"></div>
-<br/>
-<!--<div id="information"></div>
-<br/>-->
-<div id="result"></div>
-<!--
-<div style="width:200px; float:left" id="image">
-	<p style="float:left">Image: </p>
-</div>
-<div style="float:left;margin-top: 120px;" class="return-data">
--->
+	<input id="file" type="file"/>
+	<input id="add" value="Add" type="button"/></input>
+	<input id="delete" value="Delete Selected Node(s)" type="button"/></input>
+	<table class="dd" id="data">
+		<tr>
+			<td>Node:</td>
+			<td><input name="name" id="name" type="text" /></td>
+			<td>Type:</td>
+			<td><select name="type" id="type">
+  				<option value="1">Rectangle</option>
+  			</select></td>
+		</tr>
+	</table>
+	<br/>
+	<div id="cy"></div>
+	<br/>
+	<div id="result"></div>
 </body>
 </html>
diff --git a/style.css b/style.css
index aba63ac..e6c6e8f 100644
--- a/style.css
+++ b/style.css
@@ -10,24 +10,7 @@ body {
   /*top: 100px;*/
 }
 
-#info {
-  color: #c88;
-  font-size: 1em;
-  position: absolute;
-  z-index: -1;
-  left: 1em;
-  top: 1em;
-}
-
-.thumb {
-    height: 75px;
-    border: 1px solid #000;
-    margin: 10px 5px 0 0;
-}
-
-rect.selection {
-    stroke          : red;
-    stroke-dasharray: 4px;
-    stroke-opacity  : 1.0;
-    fill            : transparent;
+.dd {
+	position: relative;
+	float: right;	
 }