--- a/fetch.py
+++ b/fetch.py
@@ -1,8 +1,11 @@
 from flask import Flask
 from flask import request
 from flask import render_template
+from flask import make_response
 import json
 import pymongo
+import os
+import glob
 
 app = Flask(__name__)
 
@@ -12,6 +15,44 @@
         return render_template('index.html',json=request.args['json'])
     else:
         return render_template('index.html')
+
+@app.route('/editor', methods=['GET'])
+def editor():
+  if request.args.has_key('json'):
+    filename = request.args['json']
+  else:
+    filename = 'test.json'
+  filename = os.path.join('static', filename)
+  try:
+    f = open(filename, 'r')
+  except:
+    f = open('static/test.json', 'r')
+  buf = f.read()
+  f.close()
+  return render_template('editor.html', json = buf)
+
+@app.route('/saveJSON', methods=['POST'])
+def saveJSON():
+  if request.form:
+    data = request.form
+    JSON = data['json']
+    filename = os.path.join('static', data['filename'])
+    f = open(filename, 'w')
+    f.write(JSON)
+    f.close()
+    return (data, 200)
+  else:
+    return (json.dumps(request.form), 200) # Bad Request
+
+@app.route('/history', methods=['GET'])
+def listJSON():
+  path = os.path.join('static', '*.json')
+  ls = glob.glob(path)
+  def sanitize(i):
+    return i.split('/')[-1]
+  ls = map(sanitize, ls)
+  return render_template('history.html', ls=ls)
+
 
 if __name__ == "__main__":
     app.run(debug=True, host='0.0.0.0')
--- a/static/jit.js
+++ b/static/jit.js
@@ -6764,35 +6764,44 @@
 	     }
 	     this.plot()
 	 },
-	 reposition:function(){
-	     this.compute("end");
-	     var w=this.graph.getNode(this.root).pos.getc().scale(-1);
-	     e.Util.moebiusTransformation(this.graph,[w],["end"],"end","ignore");
-	     this.graph.eachNode(function(x){
-		 if(x.ignore){
-		     x.endPos.rho=x.pos.rho;
-		     x.endPos.theta=x.pos.theta
-		 }
-	     })
+	 reposition: function() {
+     this.compute("end");
+     var w=this.graph.getNode(this.root).pos.getc().scale(-1);
+     e.Util.moebiusTransformation(this.graph,[w],["end"],"end","ignore");
+     this.graph.eachNode(function(x) {
+       if(x.ignore){
+         x.endPos.rho=x.pos.rho;
+         x.endPos.theta=x.pos.theta
+       }
+     });
 	 },
-	 plot:function(){
-	     this.fx.plot()
+	 plot: function() {
+	  this.fx.plot();
 	 },
-	 onClick:function(y,w){
-// Ajay - Visual target selection
-	     if (this.graph.getNode(y)._angularWidth <= 0.5) {
-		 if (this.graph.getNode(y).data.band == "Character") {
-		     $("#character-value").html(this.graph.getNode(y).name);
-		 } else if (this.graph.getNode(y).data.band == "Jewellery") {
-		     $("#jewellery-value").html(this.graph.getNode(y).name);
-		 } else	if (this.graph.getNode(y).data.band == "Material") {
-		     $("#material-value").html(this.graph.getNode(y).name);
-		 }
-	     }
-// Ajay - end of visual target  selection
-	     var x=this.graph.getNode(y).pos.getc(true);
-	     this.move(x,w)
-	 },
+   tree_info_template: _.template($('#tree-info-template').html()),
+	 onClick: function(y, w) {
+     // Ajay - Visual target selection
+     /*if (this.graph.getNode(y)._angularWidth <= 0.5) {
+       if (this.graph.getNode(y).data.band == "Character") {
+       $("#character-value").html(this.graph.getNode(y).name);
+       } else if (this.graph.getNode(y).data.band == "Jewellery") {
+       $("#jewellery-value").html(this.graph.getNode(y).name);
+       } else	if (this.graph.getNode(y).data.band == "Material") {
+       $("#material-value").html(this.graph.getNode(y).name);
+       }
+       }*/
+     // Ajay - end of visual target  selection
+     var node = this.graph.getNode(y);
+     var children = $jit.json.getSubtree(tree_json, node.id).children;
+     if(_.isEmpty(children)) {
+       $('#tree-info ul').append(this.tree_info_template({
+         band: node.data.band,
+         node: node.name
+       }));
+     }
+     var x = node.pos.getc(true);
+     this.move(x, w);
+   },
 	 move:function(A,y){
 	     var x=r(A.x,A.y);
 	     if(this.busy===false&&x.norm()<0.9){ // Ajay - make it clickable upto the depth of tree DIRECTLY. Increase in value = deeper the length.
--- /dev/null
+++ b/static/old.json
@@ -1 +1,236 @@
+{
+    "id": "characteristics",
+    "name": "Characteristics",
+    "children": [
+        {
+            "id": "character",
+            "name": "Character",
+            "data": {
+                "band": "Characteristics",
+                "relation": "coordinators.html"
+            },
+            "children": [
+                {
+                    "id": "shiva",
+                    "name": "Shiva",
+                    "data": {
+                        "band": "Character",
+                        "relation": "individual_ranganathan.html"
+                    },
+                    "children": []
+                },
+                {
+                    "id": "parvathi",
+                    "name": "Parvathi",
+                    "data": {
+                        "band": "Character",
+                        "relation": "individual_sharat.html"
+                    },
+                    "children": []
+                },
+                {
+                    "id": "ganesha",
+                    "name": "Ganesha",
+                    "data": {
+                        "band": "Character",
+                        "relation": "individual_sharat.html"
+                    },
+                    "children": []
+                },
+                {
+                    "id": "bramha",
+                    "name": "Bramha",
+                    "data": {
+                        "band": "Character",
+                        "relation": "individual_sharat.html"
+                    },
+                    "children": []
+                },
+                {
+                    "id": "vishnu",
+                    "name": "Vishnu",
+                    "data": {
+                        "band": "Character",
+                        "relation": "individual_sharat.html"
+                    },
+                    "children": []
+                },
+                {
+                    "id": "krishna",
+                    "name": "Krishna",
+                    "data": {
+                        "band": "Character",
+                        "relation": "individual_muralimohan.html"
+                    },
+                    "children": []
+                },
+                {
+                    "id": "radha",
+                    "name": "Radha",
+                    "data": {
+                        "band": "Character",
+                        "relation": "individual_muralimohan.html"
+                    },
+                    "children": []
+                }
+            ]
+        },
+        {
+            "id": "ornament",
+            "name": "Ornament",
+            "data": {
+                "band": "Characteristics",
+                "relation": "cultural.html"
+            },
+            "children": [
+                {
+                    "id": "jewellery",
+                    "name": "Jewellery",
+                    "data": {
+                        "band": "Ornament"
+                    },
+                    "children": [
+                        {
+                            "id": "ear-ring",
+                            "name": "Ear-ring",
+                            "data": {
+                                "band": "Jewellery"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "ring",
+                            "name": "Ring",
+                            "data": {
+                                "band": "Jewellery"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "nose-ring",
+                            "name": "Nose-ring",
+                            "data": {
+                                "band": "Jewellery",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "pendent",
+                            "name": "Pendent",
+                            "data": {
+                                "band": "Jewellery",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "ankelet",
+                            "name": "Ankelet",
+                            "data": {
+                                "band": "Jewellery",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "bracelet",
+                            "name": "Bracelet",
+                            "data": {
+                                "band": "Jewellery",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "bangles",
+                            "name": "Bangles",
+                            "data": {
+                                "band": "Jewellery",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        }
+                    ]
+                },
+                {
+                    "id": "material",
+                    "name": "Material",
+                    "data": {
+                        "band": "Ornament",
+                        "relation": "project_knowledge.html"
+                    },
+                    "children": [
+                        {
+                            "id": "gold",
+                            "name": "Gold",
+                            "data": {
+                                "band": "Material",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "silver",
+                            "name": "Silver",
+                            "data": {
+                                "band": "Material",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "bronze",
+                            "name": "Bronze",
+                            "data": {
+                                "band": "Material",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "ruby",
+                            "name": "Ruby",
+                            "data": {
+                                "band": "Material",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "copper",
+                            "name": "Copper",
+                            "data": {
+                                "band": "Material",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "diamond",
+                            "name": "Diamond",
+                            "data": {
+                                "band": "Material",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        },
+                        {
+                            "id": "topaz",
+                            "name": "Topaz",
+                            "data": {
+                                "band": "Material",
+                                "relation": "project_murals.html"
+                            },
+                            "children": []
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "data": {
+        "relation": "index.html"
+    }
+}
--- a/static/test.json
+++ b/static/test.json
@@ -64,5 +64,9 @@
 				"children":[]
 			}
 								 ]}
-	]}
+	],
+  "data": {
+	    "relation": "index.html"
+	}
+}
--- a/static/tree.js
+++ b/static/tree.js
@@ -1,4 +1,4 @@
-var labelType, useGradients, nativeTextSupport, animate, ht;
+var labelType, useGradients, nativeTextSupport, animate, ht, tree_json;
 
 (function() {
     var ua = navigator.userAgent,


@@ -13,224 +13,19 @@
     nativeTextSupport = labelType == 'Native';
     useGradients = nativeCanvasSupport;
     animate = !(iStuff || !nativeCanvasSupport);
-})();
 
-function inits(){
-    //init data
-    var json = {
-        "id": "characteristics",
-        "name": "Characteristics",
-        "children": [
-	    // Location
-	    {
-		"id": "character",
-		"name": "Character",
-		"data": {
-                    "band": "Characteristics",
-                    "relation": "coordinators.html"
-		},
-		"children": [{
-                    "id": "shiva",
-                    "name": "Shiva",
-                    "data": {
-			"band": "Character",
-			"relation": "individual_ranganathan.html"
-                    },
-                    "children": []
+    //load JSON data.
+    // FIXME: the url is hardcoded, maybe you have to change it
+    // if the file is a variable one
+    $.getJSON('static/old.json', function(json) {
+      console.log('json', json);
+      tree_json = json;
+      inits();
+    });
 
-		}, {
-                    "id": "parvathi",
-                    "name": "Parvathi",
-                    "data": {
-			"band": "Character",
-			"relation": "individual_sharat.html"
-                    },
-                    "children": []
-		}, {
-                    "id": "ganesha",
-                    "name": "Ganesha",
-                    "data": {
-			"band": "Character",
-			"relation": "individual_sharat.html"
-                    },
-                    "children": []
-		},  {
-                    "id": "bramha",
-                    "name": "Bramha",
-                    "data": {
-			"band": "Character",
-			"relation": "individual_sharat.html"
-                    },
-                    "children": []
-		},  {
-                    "id": "vishnu",
-                    "name": "Vishnu",
-                    "data": {
-			"band": "Character",
-			"relation": "individual_sharat.html"
-                    },
-                    "children": []
-		}, {
-                    "id": "krishna",
-                    "name": "Krishna",
-                    "data": {
-			"band": "Character",
-			"relation": "individual_muralimohan.html"
-                    },
-                    "children": []
-		}, {
-                    "id": "radha",
-                    "name": "Radha",
-                    "data": {
-			"band": "Character",
-			"relation": "individual_muralimohan.html"
-                    },
-                    "children": []
-		}]
-            },
-    // Languages
-	    {
-		"id": "ornament",
-		"name": "Ornament",
-		"data": {
-		    "band": "Characteristics",
-		    "relation": "cultural.html"
-		},
-		"children": [{
-		    "id": "jewellery",
-		    "name": "Jewellery",
-		    "data": {
-			"band": "Ornament"
-			// "relation": "project_murals.html"
-		    },
-		    "children": [{
-			"id": "ear-ring",
-			"name": "Ear-ring",
-			"data": {
-			    "band": "Jewellery"
-			    // "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "ring",
-			"name": "Ring",
-			"data": {
-			    "band": "Jewellery"
-			    // "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "nose-ring",
-			"name": "Nose-ring",
-			"data": {
-			    "band": "Jewellery",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "pendent",
-			"name": "Pendent",
-			"data": {
-			    "band": "Jewellery",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "ankelet",
-			"name": "Ankelet",
-			"data": {
-			    "band": "Jewellery",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "bracelet",
-			"name": "Bracelet",
-			"data": {
-			    "band": "Jewellery",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "bangles",
-			"name": "Bangles",
-			"data": {
-			    "band": "Jewellery",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    }]
-		}, {
-		    "id": "material",
-		    "name": "Material",
-		    "data": {
-			"band": "Ornament",
-			"relation": "project_knowledge.html"
-		    },
-		    "children": [{
-			"id": "gold",
-			"name": "Gold",
-			"data": {
-			    "band": "Material",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "silver",
-			"name": "Silver",
-			"data": {
-			    "band": "Material",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "bronze",
-			"name": "Bronze",
-			"data": {
-			    "band": "Material",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "ruby",
-			"name": "Ruby",
-			"data": {
-			    "band": "Material",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "copper",
-			"name": "Copper",
-			"data": {
-			    "band": "Material",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "diamond",
-			"name": "Diamond",
-			"data": {
-			    "band": "Material",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    },{
-			"id": "topaz",
-			"name": "Topaz",
-			"data": {
-			    "band": "Material",
-			    "relation": "project_murals.html"
-			},
-			"children": []
-		    }]
-		}]
-	    }],
-	"data": {
-	    "relation": "index.html"
-	}
-    };
-    //end
+})();
+
+function inits() {
     var infovis = document.getElementById('infovis');
     var w = infovis.offsetWidth + 500; var h = infovis.offsetHeight + 385;
 

@@ -305,13 +100,10 @@
             style.left = (left - w / 2) + 'px';
 	},
     });
-    //load JSON data.
-    ht.loadJSON(json);
+    ht.loadJSON(tree_json);
     //compute positions and plot.
     ht.refresh();
     //end
     ht.controller.onComplete();
 }
-
-document.addEventListener("DOMContentLoaded", inits, false);
--- /dev/null
+++ b/templates/editor.html
@@ -1 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lepakshi Mural - JSON editor</title>
+    <link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
+    <meta charset="utf-8" />
+    <style>
+      textarea {
+        width: 500px;
+      }
+    </style>
+</head>
+<body>
+  <p></p><br>
+  <div class="container">
+    <h3> JSON Editor </h3>
+    <div id="json-saved" class="alert alert-success" style="display: none; width: 300px; margin: auto;">
+      <button type="button" class="close" data-dismiss="alert">&times;</button>
+      <b>Success!</b> JSON saved. See <a href="/history">here</a>
+    </div>
+    <div id="json-error" class="alert alert-error" style="display: none; width: 300px; margin: auto;">
+      <button type="button" class="close" data-dismiss="alert">&times;</button>
+      <b>Invalid JSON!</b> Verify at <a href="http://jsonlint.com">jsonlint.com</a>
+    </div>
+    <textarea id="json" rows="30">
+      {{ json }}
+    </textarea>
+    Enter JSON filename
+    <input type="text" id="filename" placeholder="newname.json">
+    <button class="btn" onclick="save();"> Save </button>
+  </div>
+  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+  <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
+  <script type="text/javascript" src="static/bootstrap.js"></script>
+  <script>
+    function save() {
+      var json = $('#json').val();
+      var filename = $('#filename').val();
+      if(!filename.match(/.json$/)) {
+        filename += '.json';
+      }
+      try {
+        json = JSON.parse(json);
+        console.log(json);
+        console.log(filename);
+        $.post('/saveJSON', {"json": json, "filename": filename}, function(data) {
+          console.log(data);
+          $('#json-saved').show();
+        }, 'json');
+      } catch(e) {
+        $('#json-error').show();
+      }
+    }
+  </script>
+</body>
+</html>
--- /dev/null
+++ b/templates/history.html
@@ -1 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lepakshi Mural - JSON history</title>
+    <link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
+    <meta charset="utf-8" />
+</head>
+<body>
+  <div class="container">
+    <h3> JSON history </h3>
+    <ul>
+      {% for file in ls %}
+      <li><a href="/editor?{{ file }}">{{ file }}</a></li>
+      {% endfor %}
+    </ul>
+  </div> 
+</body>
+</html>
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,7 +10,6 @@
 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
 	<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
-	<script type="text/javascript" src="static/jit.js"></script>
 	<script type="text/javascript" src="static/tree.js"></script>
 	<style type='text/css'>
 	  /*#annotation-tree {
@@ -24,7 +23,7 @@
 	  z-index:99999;
           }*/
   </style>
-	<title>Flask Lepakshi Mural</title>
+	<title>Lepakshi Mural</title>
 	<meta http-equiv='imagetoolbar' content='no'/>
 	<link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
 	<!--link rel="stylesheet" type="text/css" href="./tree.css"></link-->
@@ -84,6 +83,10 @@
       <button type="button" class="close" data-dismiss="alert">&times;</button>
       <b>Success!</b> Post successfully posted.
     </div>
+    <div id="tree-json-loaded" class="alert alert-success" style="display: none; width: 300px; margin: auto;">
+      <button type="button" class="close" data-dismiss="alert">&times;</button>
+      <b>Success!</b> New JSON loaded.
+    </div>
 
     <div class="btn-group">
       <button onclick="handler.trigger();"  class="btn btn-small">Mural</button>
@@ -93,6 +96,10 @@
     
     <p></p>
 
+    <input type="text" id="tree-json-file" value="old.json">
+    <button class="btn" id="load-tree-json" onclick="loadTreeJSON();">Load JSON</button>
+    <button class="btn" id="edit-tree-json" onclick="editTreeJSON();">Edit JSON</button>
+    <p></p>
     <div id="map"></div>
 
     <div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a><a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright &copy; 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>,  <a href="http://www.gdal.org/">GDAL</a> &amp; <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>
@@ -100,8 +107,8 @@
     </div>
 
     <div class="edit-json">
-      <button id="edit-json-btn" class="btn" onclick="editJSON();">Edit JSON manually</button>
-      <textarea rows="3" id="edit-json" style="display: none;"></textarea>
+      <button id="edit-json-btn" class="btn" onclick="editJSON();">Edit JSON to tweet</button>
+      <textarea rows="20" cols="50" id="edit-json" style="display: none;"></textarea>
       <button class="btn" id="save-json" style="display: none;" onclick="saveJSON();">Save</button>
     </div>
 
@@ -118,19 +125,9 @@
       </div>
     </div>
     <div class="modal-body">
-      <div id="infovis">
-        <div class="well text-info">
-          <ul>
-            <li><b>Character:</b> <span id="character-value"></span></li>
-            <li>
-              <b>Ornament:</b>
-              <ul>
-                <li><b>Material:</b> <span id="material-value"></span></li>
-                <li><b>Jewellery:</b> <span id="jewellery-value"></span></li>
-              </ul>
-            </li>
-          </ul>
-        </div>
+      <div id="infovis"> </div>
+      <div id="tree-info" class="well text-info">
+        <ul></ul>      
       </div>
     </div>
     <div class="modal-footer">
@@ -139,6 +136,10 @@
     </div>
   </div>
 
+  <script type="text/template" id="tree-info-template">
+    <li><b><%= band %></b>: <span id="<%= node %>-value"><%= node %></span></li>
+  </script>
+
 	<script type="text/javascript">
     function annotationTree() {
       $('#annotation-tree').modal();


@@ -164,28 +165,29 @@
     }
 	  function treeClose() {
       $('#annotation-tree').modal('hide');
-      attribs["character"] =  $("#character-value").text();
-      attribs["material"] = $("#material-value").text();
+      $('#tree-info ul li').each(function(idx, elem) {
+        var key = $(elem).find('b').text().toLowerCase();
+        var val = $(elem).find('span').text().toLowerCase();
+        attribs[key] = val;
+      });
       myJSON.push(attribs);
       $("#publish").attr("disabled", false);
 	  }
+    function loadTreeJSON() {
+      var file = $('#tree-json-file').val();
+      $.getJSON('static/'+file, function(json) {
+        ht.loadJSON(json);
+        ht.refresh();
+        ht.controller.onComplete();
+        $('#tree-json-loaded').show();
+      });
+    }
+    function editTreeJSON() {
+      var json = $('#tree-json-loaded').val();
+      window.open('/editor?json='+json);
+    }
 	</script>
-  
-	{% if json %}
-	<script type="text/javascript">
-
-		$.get({{ json|string|safe }} , function(data){
-		console.log(data);
-		ht.loadJSON(data);
-    //compute positions and plot.
-    ht.refresh();
-    //end
-    ht.controller.onComplete();
-
-}, 'json');
-	</script>
-	{% endif %}
-
+	<script type="text/javascript" src="static/jit.js"></script>
 </body>
 </html>