function Left(str, n){
	if (n <= 0)
	    return "";
	else if (n > String(str).length)
	    return str;
	else
	    return String(str).substring(0,n);
}

function init() {
	Config.interpolation = "linear";
	Config.levelDistance = 140;
	Config.drawConcentricCircles = 2;
	Config.concentricCirclesColor = "#999999";
	Config.animationTime = 750;
	Config.nodeRadius = 6;
	var canvas = new Canvas('mycanvas', {  
     //Where to inject the canvas. Any div container will do.  
     'injectInto':'infovis',  
     //width and height for canvas. Default's to 200.  
     'width': 600,  
     'height':600,  
     //Canvas styles  
     'styles': {  
        'fillStyle': '#ccddee',  
         'strokeStyle': '#772277'  
     },  
     //Add a background canvas for plotting  
     //concentric circles.  
     'backgroundCanvas': {  
         //Add Canvas styles for the bck canvas.  
       'styles': {  
             'fillStyle': '#444',  
             'strokeStyle': '#444'  
         },  
         //Add the initialization and plotting functions.  
         'impl': {  
             'init': $empty,  
             'plot': function(canvas, ctx) {  
                 var times = 6, d = Config.levelDistance;  
                 var pi2 = Math.PI*2;  
                 for(var i=1; i<=times; i++) {  
                     ctx.beginPath();  
                     ctx.arc(0, 0, i * d, 0, pi2, true);  
                     ctx.stroke();  
                     ctx.closePath();  
                 }  
             }  
         }  
     }  
  });  
	
	var ht= new Hypertree(canvas,  {
	  		  	
	  	getName: function(node1, node2) {
	  		for(var i=0; i<node1.data.length; i++) {
	  			var dataset = node1.data[i];
	  			if(dataset.key == node2.name) return dataset.value;
	  		}
	  		
			for(var i=0; i<node2.data.length; i++) {
	  			var dataset = node2.data[i];
	  			if(dataset.key == node1.name) return dataset.value;
	  		}
	  	},
	  	
	 	onCreateLabel: function(domElement, node) {
		var d = $(domElement);
		d.setOpacity(0.7).set('tween', { duration: 100 }).set('html', node.name).addEvents({
			'mouseenter': function() {
				d.tween('opacity', 1);
			},
			
			'mouseleave': function() {
				d.tween('opacity', 0.7);
			},
			
			'click': function() {
				ht.onClick(d.id);
			}
		});
		
		},
	
		onPlaceLabel: function(domElement, node) {
		domElement.innerHTML = '';
		 if(node._depth <= 2) {
			if (Left(node.id,6)=='photos') {
				useHTML = '<a href="/photos/index.cfm?photoID=' + node.id.replace("photos","") + '"';
				if (location.href.indexOf('facebook')>=0) {
					useHTML += ' target="new"';
				}
				useHTML += '><img src="/photosthumb/' + node.data[0].value + '" border="0" width="50"></a>';
				domElement.innerHTML = useHTML;
			} else {
				domElement.innerHTML = '<div style="background-color:#036;padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:4px;color:white;"><b>' + node.name + '</b></div>';
			}
			var left = parseInt(domElement.style.left);
			domElement.style.width = '';
			domElement.style.height = '';
			var w = domElement.offsetWidth;
			if (w>200) { 
				w=200;
				domElement.style.width = w + 'px'; 
			}
			domElement.style.left = (left - w /2) + 'px';
			
		} 
		}
	  	
	  });
	    
	  ht.loadTreeFromJSON(json);
	  ht.refresh();
	  ht.controller.onBeforeCompute(GraphUtil.getNode(ht.graph, ht.root));
	  ht.controller.onAfterCompute();
}