--- a/openlayers.html
+++ b/openlayers.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
       <head>
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
 	<script type="text/javascript">
-	  function annotationTree() {
-	  tree_div = document.getElementById('annotation-tree');
-	  tree_div.style.display = 'block';
+	  function annotationTree() {    
+	  $('#annotation-tree').show();
 	  }
+
+	  function closeForm() {
+	  $('#annotation-tree').hide();
+	  }
+
+	  function faceOrnament() {
+	  x = document.getElementsByClassName('annotate');
+	  if(x[0].checked == true && x[0].value == 'face') {
+	  $('face').show();
+	  }
+	  else if (x[1].checked == true && x[1].value == 'ornament') {
+	  $('ornament').show();
+	  }
+	  else {
+	  alert('Please select any one of the option')
+	  }
+	  }
 	</script>
-	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
-	<script type="text/javascript" src="./jit.js"></script>
-	<script type="text/javascript" src="./tree.js"></script>
 	<style type='text/css'>
 	  #annotation-tree {
 	  position:fixed;

@@ -21,10 +35,13 @@
 	  display:none;
 	  z-index:99999;                                         
           }
+	  #face, #ornament {
+	  display:none;
+	  }
 	</style>
 	<title>Lepakshi Mural</title>
 	<meta http-equiv='imagetoolbar' content='no'/>
-	<link rel="stylesheet" type="text/css" href="./tree.css"></link>
+	<!-- <link rel="stylesheet" type="text/css" href="./tree.css"></link> -->
 	<style type="text/css"> v\:* {behavior:url(#default#VML);}
 	  html, body {padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
 	  body { margin: 10px; background: #fff; }
@@ -72,17 +89,42 @@
   </div>
   <script type="text/javascript" >resize()</script>
   <div id="annotation-tree">
-    <input type="button" value="close" onClick="treeClose();"/>
-    <input type="button" value="publish" onClick="publish();"/>
-    <div id="infovis">
-      <form>
-	<div>Character: <span id="character-value"></span></div>
-	<div>Ornament </div>
-	<div>Material: <span id="material-value"></span></div>
-	<div>Jewellery: <span id="jewellery-value"></span></div>
-      </form>
-    </div>    
-  </div>
-</body>
+    <input id="close-form" type="submit" onClick="closeForm();" value="Close" title="Close this form" />
+    <div id="annotate" name="annotateForm" >
+      Choose a category for annotated part : <br />
+      <input type="radio" class="annotate" name="annotate" value="face" /> Face <br />
+      <input type="radio" class="annotate" name="annotate" value="ornament" /> Ornament <br />
+      <input type="submit" name="annotate" value="Next" onclick="faceOrnament();" />
+    </div>
+    <div id="face" name="faceForm">
+      Choose whose face is it : <br>
+	<input type="radio" name="face" value="Shiva" /> Shiva <br />
+	<input type="radio" name="face" value="Vishnu" /> Vishnu <br />
+	<input type="radio" name="face" value="Krishna" /> Krishna <br />
+	<input type="radio" name="face" value="Parvati" /> Parvati <br />
+	<input type="radio" name="face" value="Lakshmi" /> Lakshmi <br />
+	<input type="radio" name="face" value="Saraswati" /> Saraswati <br />
+      </div>
+      
+      <div id="ornament" name="ornamentForm" >
+	Choose what jewellery is it : <br />
+	<input type="radio" name="jewellery" value="Neckless" /> Neckless <br />
+	<input type="radio" name="jewellery" value="Bangles" /> Bangles <br />
+	<input type="radio" name="jewellery" value="Ear-ring" /> Ear-ring <br />
+	<input type="radio" name="jewellery" value="Nose-ring" /> Nose-ring <br />
+	<input type="radio" name="jewellery" value="Waistlet" /> Waistlet <br />
+	<input type="radio" name="jewellery" value="Ankalet" /> Ankalet <br />
+	<br />
+	Choose what materal of an ornament : <br />
+	<input type="radio" name="material" value="Gold" /> Gold <br />
+	<input type="radio" name="material" value="Silver" /> Silver <br />
+	<input type="radio" name="material" value="Bronze" /> Bronze <br />
+	<input type="radio" name="material" value="Ruby" /> Ruby <br />
+	<input type="radio" name="material" value="Diamond" /> Diamond <br />
+	<input type="radio" name="material" value="Platinum" /> Platinum <br />
+      </div>
+      
+    </div>
+  </body>
 </html>
--- a/tree.js
+++ b/tree.js
@@ -1,449 +1,900 @@
 var labelType, useGradients, nativeTextSupport, animate;
 
 (function() {
-    var ua = navigator.userAgent,
-    iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
-    typeOfCanvas = typeof HTMLCanvasElement,
-    nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
-    textSupport = nativeCanvasSupport 
+  var ua = navigator.userAgent,
+      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
+      typeOfCanvas = typeof HTMLCanvasElement,
+      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
+      textSupport = nativeCanvasSupport 
         && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
-    //I'm setting this based on the fact that ExCanvas provides text support for IE
-    //and that as of today iPhone/iPad current text support is lame
-    labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
-    nativeTextSupport = labelType == 'Native';
-    useGradients = nativeCanvasSupport;
-    animate = !(iStuff || !nativeCanvasSupport);
+  //I'm setting this based on the fact that ExCanvas provides text support for IE
+  //and that as of today iPhone/iPad current text support is lame
+  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
+  nativeTextSupport = labelType == 'Native';
+  useGradients = nativeCanvasSupport;
+  animate = !(iStuff || !nativeCanvasSupport);
 })();
 
+var Log = {
+  elem: false,
+  write: function(text){
+    if (!this.elem) 
+      this.elem = document.getElementById('log');
+    this.elem.innerHTML = text;
+    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
+  }
+};
+
+
 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": []
-
-		}, {
-                    "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"
-	}
+        id: "node02",
+        name: "0.2",
+        data: {},
+        children: [{
+            id: "node13",
+            name: "1.3",
+            data: {},
+            children: [{
+                id: "node24",
+                name: "2.4",
+                data: {},
+                children: [{
+                    id: "node35",
+                    name: "3.5",
+                    data: {},
+                    children: [{
+                        id: "node46",
+                        name: "4.6",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node37",
+                    name: "3.7",
+                    data: {},
+                    children: [{
+                        id: "node48",
+                        name: "4.8",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node49",
+                        name: "4.9",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node410",
+                        name: "4.10",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node411",
+                        name: "4.11",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node312",
+                    name: "3.12",
+                    data: {},
+                    children: [{
+                        id: "node413",
+                        name: "4.13",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node314",
+                    name: "3.14",
+                    data: {},
+                    children: [{
+                        id: "node415",
+                        name: "4.15",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node416",
+                        name: "4.16",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node417",
+                        name: "4.17",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node418",
+                        name: "4.18",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node319",
+                    name: "3.19",
+                    data: {},
+                    children: [{
+                        id: "node420",
+                        name: "4.20",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node421",
+                        name: "4.21",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node222",
+                name: "2.22",
+                data: {},
+                children: [{
+                    id: "node323",
+                    name: "3.23",
+                    data: {},
+                    children: [{
+                        id: "node424",
+                        name: "4.24",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }]
+        }, {
+            id: "node125",
+            name: "1.25",
+            data: {},
+            children: [{
+                id: "node226",
+                name: "2.26",
+                data: {},
+                children: [{
+                    id: "node327",
+                    name: "3.27",
+                    data: {},
+                    children: [{
+                        id: "node428",
+                        name: "4.28",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node429",
+                        name: "4.29",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node330",
+                    name: "3.30",
+                    data: {},
+                    children: [{
+                        id: "node431",
+                        name: "4.31",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node332",
+                    name: "3.32",
+                    data: {},
+                    children: [{
+                        id: "node433",
+                        name: "4.33",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node434",
+                        name: "4.34",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node435",
+                        name: "4.35",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node436",
+                        name: "4.36",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node237",
+                name: "2.37",
+                data: {},
+                children: [{
+                    id: "node338",
+                    name: "3.38",
+                    data: {},
+                    children: [{
+                        id: "node439",
+                        name: "4.39",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node440",
+                        name: "4.40",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node441",
+                        name: "4.41",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node342",
+                    name: "3.42",
+                    data: {},
+                    children: [{
+                        id: "node443",
+                        name: "4.43",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node344",
+                    name: "3.44",
+                    data: {},
+                    children: [{
+                        id: "node445",
+                        name: "4.45",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node446",
+                        name: "4.46",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node447",
+                        name: "4.47",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node348",
+                    name: "3.48",
+                    data: {},
+                    children: [{
+                        id: "node449",
+                        name: "4.49",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node450",
+                        name: "4.50",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node451",
+                        name: "4.51",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node452",
+                        name: "4.52",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node453",
+                        name: "4.53",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node354",
+                    name: "3.54",
+                    data: {},
+                    children: [{
+                        id: "node455",
+                        name: "4.55",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node456",
+                        name: "4.56",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node457",
+                        name: "4.57",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node258",
+                name: "2.58",
+                data: {},
+                children: [{
+                    id: "node359",
+                    name: "3.59",
+                    data: {},
+                    children: [{
+                        id: "node460",
+                        name: "4.60",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node461",
+                        name: "4.61",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node462",
+                        name: "4.62",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node463",
+                        name: "4.63",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node464",
+                        name: "4.64",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }]
+        }, {
+            id: "node165",
+            name: "1.65",
+            data: {},
+            children: [{
+                id: "node266",
+                name: "2.66",
+                data: {},
+                children: [{
+                    id: "node367",
+                    name: "3.67",
+                    data: {},
+                    children: [{
+                        id: "node468",
+                        name: "4.68",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node469",
+                        name: "4.69",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node470",
+                        name: "4.70",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node471",
+                        name: "4.71",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node372",
+                    name: "3.72",
+                    data: {},
+                    children: [{
+                        id: "node473",
+                        name: "4.73",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node474",
+                        name: "4.74",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node475",
+                        name: "4.75",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node476",
+                        name: "4.76",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node377",
+                    name: "3.77",
+                    data: {},
+                    children: [{
+                        id: "node478",
+                        name: "4.78",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node479",
+                        name: "4.79",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node380",
+                    name: "3.80",
+                    data: {},
+                    children: [{
+                        id: "node481",
+                        name: "4.81",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node482",
+                        name: "4.82",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node283",
+                name: "2.83",
+                data: {},
+                children: [{
+                    id: "node384",
+                    name: "3.84",
+                    data: {},
+                    children: [{
+                        id: "node485",
+                        name: "4.85",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node386",
+                    name: "3.86",
+                    data: {},
+                    children: [{
+                        id: "node487",
+                        name: "4.87",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node488",
+                        name: "4.88",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node489",
+                        name: "4.89",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node490",
+                        name: "4.90",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node491",
+                        name: "4.91",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node392",
+                    name: "3.92",
+                    data: {},
+                    children: [{
+                        id: "node493",
+                        name: "4.93",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node494",
+                        name: "4.94",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node495",
+                        name: "4.95",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node496",
+                        name: "4.96",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node397",
+                    name: "3.97",
+                    data: {},
+                    children: [{
+                        id: "node498",
+                        name: "4.98",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node399",
+                    name: "3.99",
+                    data: {},
+                    children: [{
+                        id: "node4100",
+                        name: "4.100",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4101",
+                        name: "4.101",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4102",
+                        name: "4.102",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4103",
+                        name: "4.103",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node2104",
+                name: "2.104",
+                data: {},
+                children: [{
+                    id: "node3105",
+                    name: "3.105",
+                    data: {},
+                    children: [{
+                        id: "node4106",
+                        name: "4.106",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4107",
+                        name: "4.107",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4108",
+                        name: "4.108",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node2109",
+                name: "2.109",
+                data: {},
+                children: [{
+                    id: "node3110",
+                    name: "3.110",
+                    data: {},
+                    children: [{
+                        id: "node4111",
+                        name: "4.111",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4112",
+                        name: "4.112",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node3113",
+                    name: "3.113",
+                    data: {},
+                    children: [{
+                        id: "node4114",
+                        name: "4.114",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4115",
+                        name: "4.115",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4116",
+                        name: "4.116",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node3117",
+                    name: "3.117",
+                    data: {},
+                    children: [{
+                        id: "node4118",
+                        name: "4.118",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4119",
+                        name: "4.119",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4120",
+                        name: "4.120",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4121",
+                        name: "4.121",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node3122",
+                    name: "3.122",
+                    data: {},
+                    children: [{
+                        id: "node4123",
+                        name: "4.123",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4124",
+                        name: "4.124",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node2125",
+                name: "2.125",
+                data: {},
+                children: [{
+                    id: "node3126",
+                    name: "3.126",
+                    data: {},
+                    children: [{
+                        id: "node4127",
+                        name: "4.127",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4128",
+                        name: "4.128",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4129",
+                        name: "4.129",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }]
+        }, {
+            id: "node1130",
+            name: "1.130",
+            data: {},
+            children: [{
+                id: "node2131",
+                name: "2.131",
+                data: {},
+                children: [{
+                    id: "node3132",
+                    name: "3.132",
+                    data: {},
+                    children: [{
+                        id: "node4133",
+                        name: "4.133",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4134",
+                        name: "4.134",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4135",
+                        name: "4.135",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4136",
+                        name: "4.136",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4137",
+                        name: "4.137",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }, {
+                id: "node2138",
+                name: "2.138",
+                data: {},
+                children: [{
+                    id: "node3139",
+                    name: "3.139",
+                    data: {},
+                    children: [{
+                        id: "node4140",
+                        name: "4.140",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4141",
+                        name: "4.141",
+                        data: {},
+                        children: []
+                    }]
+                }, {
+                    id: "node3142",
+                    name: "3.142",
+                    data: {},
+                    children: [{
+                        id: "node4143",
+                        name: "4.143",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4144",
+                        name: "4.144",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4145",
+                        name: "4.145",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4146",
+                        name: "4.146",
+                        data: {},
+                        children: []
+                    }, {
+                        id: "node4147",
+                        name: "4.147",
+                        data: {},
+                        children: []
+                    }]
+                }]
+            }]
+        }]
     };
     //end
-    var infovis = document.getElementById('infovis');
-    var w = infovis.offsetWidth + 500; var h = infovis.offsetHeight + 385;
-    
-    //init Hypertree
-    var ht = new $jit.Hypertree({
-	//id of the visualization container
-	injectInto: 'infovis',
-	//canvas width and height
-	width: w,
-	height: h,
-	//Change node and edge styles such as
-	//color, width and dimensions.
-	Node: {
-            dim: 2.5,
-            color: "#555"
-	},
-	Edge: {
-	    lineWidth: 1,
-            color: "#222"
-	},
+    //init Spacetree
 
-	// On hover
-	Tips: {  
-	    enable: false,  
-
-	    onShow: function(tip, node) {
-		ht.tips.config.offsetX = "10";
-		ht.tips.config.offsetY = "10";
-//		tip.addEventListener("click", alert('hello'), false);
- 		tip.innerHTML = "<div id=\"value\" class=\"tip-title\" style=\"text-align:center;\">" + node.name + "</div>";
-//		    + node.data.relation + " style=\"color:#fff;\">" + node.name + "</a></div>";    
- 	    } 
-	},  
-
-	//Attach event handlers and add text to the
-	//labels. This method is only triggered on label
-	//creation
-	onCreateLabel: function(domElement, node){
-            domElement.innerHTML = node.name;
-            $jit.util.addEvent(domElement, 'click', function () {
-		ht.onClick(node.id, {
-                    onComplete: function() {
-			ht.controller.onComplete();
-                    }
-		});
-            });
-	},
-	//Change node styles when labels are placed
-	//or moved.
-	onPlaceLabel: function(domElement, node){
-            var style = domElement.style;
-            style.display = '';
+    //Create a new ST instance
+    var st = new $jit.ST({
+        //id of viz container element
+        injectInto: 'infovis',
+        //set duration for the animation
+        duration: 800,
+        //set animation transition type
+        transition: $jit.Trans.Quart.easeInOut,
+        //set distance between node and its children
+        levelDistance: 50,
+        //enable panning
+        Navigation: {
+          enable:true,
+          panning:true
+        },
+        //set node and edge styles
+        //set overridable=true for styling individual
+        //nodes or edges
+        Node: {
+            height: 20,
+            width: 60,
+            type: 'rectangle',
+            color: '#aaa',
+            overridable: true
+        },
+        
+        Edge: {
+            type: 'bezier',
+            overridable: true
+        },
+        
+        onBeforeCompute: function(node){
+            Log.write("loading " + node.name);
+        },
+        
+        onAfterCompute: function(){
+            Log.write("done");
+        },
+        
+        //This method is called on DOM label creation.
+        //Use this method to add event handlers and styles to
+        //your node.
+        onCreateLabel: function(label, node){
+            label.id = node.id;            
+            label.innerHTML = node.name;
+            label.onclick = function(){
+            	if(normal.checked) {
+            	  st.onClick(node.id);
+            	} else {
+                st.setRoot(node.id, 'animate');
+            	}
+            };
+            //set label styles
+            var style = label.style;
+            style.width = 60 + 'px';
+            style.height = 17 + 'px';            
             style.cursor = 'pointer';
-	    ht.controller.Node.transform = false;
-	    ht.controller.Edge.alpha = "0.3";
-            if (node._depth == 0) {
-		style.fontSize = "0.8em";
-		style.color = "#111";	    
-            } else if(node._depth == 1){
-		style.fontSize = "0.9em";
-		style.color = "#222";
-            } // else if(node._depth == 2){
-	    // 	style.fontSize = "0.7em";
-	    // 	style.color = "#444";
-            // }
-	    else {
-		style.display = 'none';
+            style.color = '#333';
+            style.fontSize = '0.8em';
+            style.textAlign= 'center';
+            style.paddingTop = '3px';
+        },
+        
+        //This method is called right before plotting
+        //a node. It's useful for changing an individual node
+        //style properties before plotting it.
+        //The data properties prefixed with a dollar
+        //sign will override the global node style properties.
+        onBeforePlotNode: function(node){
+            //add some color to the nodes in the path between the
+            //root node and the selected node.
+            if (node.selected) {
+                node.data.$color = "#ff7";
             }
-
-            var left = parseInt(style.left);
-            var w = domElement.offsetWidth;
-            style.left = (left - w / 2) + 'px';
-	},
+            else {
+                delete node.data.$color;
+                //if the node belongs to the last plotted level
+                if(!node.anySubnode("exist")) {
+                    //count children number
+                    var count = 0;
+                    node.eachSubnode(function(n) { count++; });
+                    //assign a node color based on
+                    //how many children it has
+                    node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
+                }
+            }
+        },
+        
+        //This method is called right before plotting
+        //an edge. It's useful for changing an individual edge
+        //style properties before plotting it.
+        //Edge data proprties prefixed with a dollar sign will
+        //override the Edge global style properties.
+        onBeforePlotLine: function(adj){
+            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
+                adj.data.$color = "#eed";
+                adj.data.$lineWidth = 3;
+            }
+            else {
+                delete adj.data.$color;
+                delete adj.data.$lineWidth;
+            }
+        }
     });
-    //load JSON data.
-    ht.loadJSON(json);
-    //compute positions and plot.
-    ht.refresh();
+    //load json data
+    st.loadJSON(json);
+    //compute node positions and layout
+    st.compute();
+    //optional: make a translation of the tree
+    st.geom.translate(new $jit.Complex(-200, 0), "current");
+    //emulate a click on the root node.
+    st.onClick(st.root);
     //end
-    ht.controller.onComplete();
-}
-
-document.addEventListener("DOMContentLoaded", inits, false);
-
-    /* ****************************************************************************************************** */
-
-// function inits(){
-//     //init data
-//     var jsons = {
-//         "id": "narrations",
-//         "name": "Narrations",
-//         "children": [{
-// 		"id": "kannada",
-// 		"name": "Kannada",
-// 		"data": {
-//                     "band": "Narrations"
-// 		},
-// 		"children": []
-//             }, {
-// 		"id": "english",
-// 		"name": "English",
-// 		"data": {
-// 		    "band": "Narrations"
-// 		},
-// 		"children": []
-// 	    }, {
-// 		"id": "hindi",
-// 		"name": "Hindi",
-// 		"data": {
-// 		    "band": "Narrations"
-// 		},
-// 		"children": []
-// 	    }, {
-// 		"id": "tamil",
-// 		"name": "Tamil",
-// 		"data": {
-//                     "band": "Narrations"
-// 		},
-// 		"children": []
-//             }, {
-// 		"id": "bengali",
-// 		"name": "Bengli",
-// 		"data": {
-// 		    "band": "Narrations"
-// 		},
-// 		"children": []
-// 	    }, {
-// 		"id": "marathi",
-// 		"name": "Marathi",
-// 		"data": {
-// 		    "band": "Narrations"
-// 		},
-// 		"children": []
-// 	    }],
-// 	"data": {
-// 	    "relation": "index.html"
-// 	}
-//     };
-//     //end
-//     var infonar = document.getElementById('infonar');
-//     var w = infonar.offsetWidth - 0, h = infonar.offsetHeight - 0;
+    //Add event handlers to switch spacetree orientation.
+    var top = $jit.id('r-top'), 
+        left = $jit.id('r-left'), 
+        bottom = $jit.id('r-bottom'), 
+        right = $jit.id('r-right'),
+        normal = $jit.id('s-normal');
+        
     
-//     //init Hypertree
-//     var ht = new $jit.Hypertree({
-// 	//id of the visualization container
-// 	injectInto: 'infonar',
-// 	//canvas width and height
-// 	width: w,
-// 	height: h,
-// 	//Change node and edge styles such as
-// 	//color, width and dimensions.
-// 	Node: {
-//             dim: 2.5,
-//             color: "#555"
-// 	},
-// 	Edge: {
-// 	    lineWidth: 1,
-//             color: "#222"
-// 	},
-
-// 	// On hover
-// 	Tips: {  
-// 	    enable: false,  
-// 	    onShow: function(tip, node) {
-// 		ht.tips.config.offsetX = "10";
-// 		ht.tips.config.offsetY = "10";
-//  		tip.innerHTML = "<div id=\"value\" class=\"tip-title\" style=\"text-align:center;\">" + node.name + "</div>";
-// //		    + node.data.relation + " style=\"color:#fff;\">" + node.name + "</a></div>";    
-//  	    } 
-// 	},  
-
-// 	//Attach event handlers and add text to the
-// 	//labels. This method is only triggered on label
-// 	//creation
-// 	onCreateLabel: function(domElement, node){
-//             domElement.innerHTML = node.name;
-//             $jit.util.addEvent(domElement, 'click', function () {
-// 		ht.onClick(node.id, {
-//                     onComplete: function() {
-// 			ht.controller.onComplete();
-//                     }
-// 		});
-//             });
-// 	},
-// 	//Change node styles when labels are placed
-// 	//or moved.
-// 	onPlaceLabel: function(domElement, node){
-//             var style = domElement.style;
-//             style.display = '';
-//             style.cursor = 'pointer';
-// 	    ht.controller.Node.transform = false;
-// 	    ht.controller.Edge.alpha = "0.3";
-//             if (node._depth == 0) {
-// 		style.fontSize = "0.8em";
-// 		style.color = "#111";	    
-//             } else if(node._depth == 1){
-// 		style.fontSize = "0.9em";
-// 		style.color = "#222";
-//             }
-// 	    else {
-// 		style.display = 'none';
-//             }
-
-//             var left = parseInt(style.left);
-//             var w = domElement.offsetWidth;
-//             style.left = (left - w / 2) + 'px';
-// 	},
-//     });
-//     //load JSON data.
-//     ht.loadJSON(jsons);
-//     //compute positions and plot.
-//     ht.refresh();
-//     //end
-//     ht.controller.onComplete();
-// }
+    function changeHandler() {
+        if(this.checked) {
+            top.disabled = bottom.disabled = right.disabled = left.disabled = true;
+            st.switchPosition(this.value, "animate", {
+                onComplete: function(){
+                    top.disabled = bottom.disabled = right.disabled = left.disabled = false;
+                }
+            });
+        }
+    };
+    
+    top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
+    //end
+}