var labelType, useGradients, nativeTextSupport, animate;



//read data as json result from amfphp web service
//getUrlVars()["page"]
//$.getJSON('amfphp/json.php/core.Page.getToc', function(data) { initHT( data ) });

//eseguo solo se il browser supporta la <canvas>
if ( !!document.createElement('canvas').getContext )
{
	$.getJSON('amfphp/json.php/core.Page.getToc/'+getUrlVars()["page"], function(data) { initST( data ) });
}


function initST( json ){
	
	//per sicurezza prima cancello l'infovis corrente
	document.getElementById('infovis').innerHTML = "";
	
    var infovis = document.getElementById('infovis');
    var w = infovis.offsetWidth, h = infovis.offsetHeight;
	
	var selectedNode = "";
	
	//set invisible the tree before it's complete
	//document.getElementById("infovis").style.display = "none";
	document.getElementById("infovis").style.opacity = "0";
	
    //init Hypertree
    var tree = new $jit.ST({
		//id of the visualization container
		injectInto: 'infovis',
		//canvas width and height
		width: w-5,
		height: h-5,
		duration: 1,
		transition: $jit.Trans.Quart.easeInOut,
		levelDistance: 25,
		constrained: false,
		levelsToShow: 10,
		orientation: "top",
		subtreeOffset: 0,  
		offsetX: 0,  
		offsetY: 0,  
        //enable panning
        Navigation: {
			enable:true,
			panning:true
        },		
		
		//Change node and edge styles such as
		//color, width and dimensions.
		Node: {
			height: 8,
			width: 10,
			type: 'rectangle',
			overridable: true,
			color: "transparent"
		},
		Edge: {
			lineWidth: 2,
			color: "#eeeeee",
			type: 'bezier',
			overridable: true
		},
		onBeforeCompute: function(node){
		  //Log.write("centering");
		},
		//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;
			//add elements
			
			//creo bottone cliccabile
			var buttonGo = document.createElement('img');
			buttonGo.setAttribute('id', node.id);		  
			//buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8.png');		  
			buttonGo.setAttribute('style', 'width: 10px; height: 8px;');		  
			if (node.data.htmlname == getUrlVars()["page"]) {
				buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_20x15_green.png');
				buttonGo.setAttribute('style', 'width: 20px; height: 15px; position: relative; left: -5px; top: -3.5px;	cursor: pointer;');		  
			}
			else
			{
				buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8.png');
				buttonGo.setAttribute('style', 'width: 10px; height: 8px; cursor: pointer;');		  
			}
			domElement.appendChild(buttonGo);
		  
			//creo label
			var label = document.createElement('div');
			//alert(node.name);
			label.innerHTML = node.name;
			//label.style.display = "none";	  
			label.setAttribute('href', '#');		  
			label.setAttribute('class', 'nodeLabel');		  
			label.setAttribute('style', ' display: none;');		  
			domElement.appendChild(label);
		  
			
			//attivo rollover sul nodo
			$jit.util.addEvent(domElement, 'mouseover', function () {
				if (node.data.htmlname == getUrlVars()["page"]) {
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_20x15_green.png');
					buttonGo.setAttribute('style', 'width: 20px; height: 15px; position: relative; left: -5px; top: -3.5px; cursor: pointer;');		  
					/*
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_arrow_e_30x30.png');		  
					buttonGo.setAttribute('style', 'width: 30px; height: 30px; position: relative; left: -8px; top: -11px;');		  
					*/
					label.setAttribute('style', 'bottom: 20px; color: #ffffff; background-color: #66aa66;');		  
				}
				else
				{
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_20x15.png');		  
					buttonGo.setAttribute('style', 'width: 20px; height: 15px; position: relative; left: -5px; top: -3.5px; cursor: pointer;');		  
					label.setAttribute('style', 'bottom: 20px; color: inherit; background-color: #ffffff;');
				}
				label.style.display = "block";
			});
			$jit.util.addEvent(domElement, 'mouseout', function () {
				if (node.data.htmlname == getUrlVars()["page"]) {
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_20x15_green.png');
					buttonGo.setAttribute('style', 'width: 20px; height: 15px; position: relative; left: -5px; top: -3.5px; cursor: pointer;');		  
					//buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8_green.png');		  
				}
				else
				{
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8.png');		  
					buttonGo.setAttribute('style', 'width: 10px; height: 8px; cursor: pointer;');		  
				}
				label.style.display = "none";
			});
			
			//attivo il click sul nodo
			domElement.addEventListener ("click", function () {
				//if ( node._depth == 0) {
					//alert(node.name);
					//alert(node.data.htmlname);
					//tree.onClick(node.id);
					window.location = "index.php?page="+node.data.htmlname;
				//} else {
				//}
			}, false);
			
			//controllo se il nodo corrente è il selezionato
			if ( node.data.htmlname == getUrlVars()["page"] )
			{
				//alert("creato nodo selezionato: "+node.id);
				selectedNode = node.id;
				//tree.onClick(tree.root);
			}
			
			
		},
		
        //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 = "transparent";
            }
            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 = ['transparent', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'][count];                    
                    node.data.$color = "transparent";                    
                }
            }
        },
        
        //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 = "#66aa66";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        },      
		
		
		
		
		onAfterCompute: function()
		{
		}
    });
	
    //load JSON data.
    tree.loadJSON(json);
    //compute node positions and layout
    tree.compute();
    //optional: make a translation of the tree
    tree.geom.translate(new $jit.Complex(-200, 0), "current");
    //emulate a click on the root node.
	tree.onClick(tree.root, {  
		onComplete: function() {  
			//alert("finito: "+selectedNode);
			if ( selectedNode != "" )
			{
				tree.onClick(selectedNode,  {
					onComplete: function() {
						//document.getElementById("infovis").style.display = "block";
						document.getElementById("infovis").style.opacity = "1";
					}
				});
			}
			
		}  
	});
	//alert("primo calcio"+tree.root);
	//alert(selectedNode);
	//se sono io la pagina corrente, posiziono l'albero su di me
	/*
	if ( selectedNode != "" )
	{
		tree.onClick(selectedNode);
	}
	else
	{
		tree.onClick(tree.root);
	}
	*/
	
	
	
	
    //end
	/*
    //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');
        
    
    function changeHandler() {
        if(this.checked) {
            top.disabled = bottom.disabled = right.disabled = left.disabled = true;
            tree.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
	*/

}











function initHT( json ){
	
    var infovis = document.getElementById('infovis');
    var w = infovis.offsetWidth, h = infovis.offsetHeight;
    
    //init Hypertree
    var tree = new $jit.Hypertree({
		//id of the visualization container
		injectInto: 'infovis',
		//canvas width and height
		width: w,
		height: h,
		offset: 0.1,
		duration: 800,
		//Change node and edge styles such as
		//color, width and dimensions.
		Node: {
			dim: 10,
			color: "#fff"
		},
		Edge: {
		  lineWidth: 2,
		  color: "#dfdfdf"
		},
		onBeforeCompute: function(node){
		  //Log.write("centering");
		},
		//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;
			//add elements
			
			//creo bottone cliccabile
			var buttonGo = document.createElement('img');
			buttonGo.setAttribute('id', node.id);		  
			//buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8.png');		  
			buttonGo.setAttribute('style', 'width: 10px; height: 8px;');		  
			if (node._depth == 0) {
				buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8_green.png');		  
			}
			else
			{
				buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8.png');		  
			}
			domElement.appendChild(buttonGo);
		  
			//creo label
			var label = document.createElement('div');
			label.innerHTML = node.name;
			//label.style.display = "none";	  
			label.setAttribute('href', '#');		  
			label.setAttribute('class', 'nodeLabel');		  
			label.setAttribute('style', ' display: none;');		  
			domElement.appendChild(label);
		  
			
			//attivo rollover sul nodo
			$jit.util.addEvent(domElement, 'mouseover', function () {
				if (node._depth == 0) {
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_arrow_e_30x30.png');		  
					buttonGo.setAttribute('style', 'width: 30px; height: 30px; position: relative; left: -8px; top: -11px;');		  
					label.setAttribute('style', 'bottom: 40px; color: #ffffff; background-color: #66aa66;');		  
				}
				else
				{
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_20x15.png');		  
					buttonGo.setAttribute('style', 'width: 20px; height: 15px; position: relative; left: -5px; top: -3.5px;');		  
					label.setAttribute('style', 'bottom: 20px; color: inherit; background-color: #ffffff;');
				}
				label.style.display = "block";
			});
			$jit.util.addEvent(domElement, 'mouseout', function () {
				if (node._depth == 0) {
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8_green.png');		  
				}
				else
				{
					buttonGo.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8.png');		  
				}
				buttonGo.setAttribute('style', 'width: 10px; height: 8px;');		  
				label.style.display = "none";
			});
			
			//attivo il click sul nodo
			domElement.addEventListener ("click", function () {
				if ( node._depth == 0) {
					//alert(node.name);
					//alert(node.data.htmlname);
					window.location = "index.php?page="+node.data.htmlname;
				} else {
					tree.onClick(node.id);
				}
			}, false);
      },
      //Change node styles when labels are placed
      //or moved.
      onPlaceLabel: function(domElement, node){
			//set styles
			var style = domElement.style;
			style.display = '';
			style.cursor = 'pointer';
			if (node._depth == 0) {
			  //style.fontSize = "18px";
			  //style.color = "#66aa66";
			} else if(node._depth == 1){
			  //style.fontSize = "10px";
			  //style.color = "#666666";
			} else if(node._depth == 2){
			  //style.fontSize = "10px";
			  //style.color = "#999999";
			  //style.display = "none";
			} else {
			  style.display = 'none';
			}
			var left = parseInt(style.left);
			var top = parseInt(style.top);
			var w = domElement.offsetWidth;
			var h = domElement.offsetHeight;
			style.left = (left - w / 2) + 'px';
			style.top = (top - h / 2) + 'px';
			
			
			if (node._depth == 0) {
				domElement.firstChild.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8_green.png');		  
			}
			else
			{
				domElement.firstChild.setAttribute('src', 'styles/assets/pov/icon_core_object_10x8.png');		  
			}
			
		},
      
		onAfterCompute: function(){
		}
    });
	
    //load JSON data.
    tree.loadJSON(json);
    //compute positions and plot.
    tree.refresh();
    //end
    tree.controller.onAfterCompute();
}


function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}









	/*
    //init data
    var json = {
        "id": "347_0",
        "name": "Nine Inch Nails",
        "children": [{
            "id": "126510_1",
            "name": "Jerome Dillon",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "52163_2",
                "name": "Howlin' Maggie",
                "data": {
                    "band": "Jerome Dillon",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "324134_3",
                "name": "nearLY",
                "data": {
                    "band": "Jerome Dillon",
                    "relation": "member of band"
                },
                "children": []
            }]
        }, {
            "id": "173871_4",
            "name": "Charlie Clouser",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": []
        }, {
            "id": "235952_5",
            "name": "James Woolley",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": []
        }, {
            "id": "235951_6",
            "name": "Jeff Ward",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "2382_7",
                "name": "Ministry",
                "data": {
                    "band": "Jeff Ward",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "2415_8",
                "name": "Revolting Cocks",
                "data": {
                    "band": "Jeff Ward",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "3963_9",
                "name": "Pigface",
                "data": {
                    "band": "Jeff Ward",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "7848_10",
                "name": "Lard",
                "data": {
                    "band": "Jeff Ward",
                    "relation": "member of band"
                },
                "children": []
            }]
        }, {
            "id": "235950_11",
            "name": "Richard Patrick",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "1007_12",
                "name": "Filter",
                "data": {
                    "band": "Richard Patrick",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "327924_13",
                "name": "Army of Anyone",
                "data": {
                    "band": "Richard Patrick",
                    "relation": "member of band"
                },
                "children": []
            }]
        }, {
            "id": "2396_14",
            "name": "Trent Reznor",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "3963_15",
                "name": "Pigface",
                "data": {
                    "band": "Trent Reznor",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "32247_16",
                "name": "1000 Homo DJs",
                "data": {
                    "band": "Trent Reznor",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "83761_17",
                "name": "Option 30",
                "data": {
                    "band": "Trent Reznor",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "133257_18",
                "name": "Exotic Birds",
                "data": {
                    "band": "Trent Reznor",
                    "relation": "member of band"
                },
                "children": []
            }]
        }, {
            "id": "36352_19",
            "name": "Chris Vrenna",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "1013_20",
                "name": "Stabbing Westward",
                "data": {
                    "band": "Chris Vrenna",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "3963_21",
                "name": "Pigface",
                "data": {
                    "band": "Chris Vrenna",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "5752_22",
                "name": "Jack Off Jill",
                "data": {
                    "band": "Chris Vrenna",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "33602_23",
                "name": "Die Warzau",
                "data": {
                    "band": "Chris Vrenna",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "40485_24",
                "name": "tweaker",
                "data": {
                    "band": "Chris Vrenna",
                    "relation": "is person"
                },
                "children": []
            }, {
                "id": "133257_25",
                "name": "Exotic Birds",
                "data": {
                    "band": "Chris Vrenna",
                    "relation": "member of band"
                },
                "children": []
            }]
        }, {
            "id": "236021_26",
            "name": "Aaron North",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": []
        }, {
            "id": "236024_27",
            "name": "Jeordie White",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "909_28",
                "name": "A Perfect Circle",
                "data": {
                    "band": "Jeordie White",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "237377_29",
                "name": "Twiggy Ramirez",
                "data": {
                    "band": "Jeordie White",
                    "relation": "is person"
                },
                "children": []
            }]
        }, {
            "id": "235953_30",
            "name": "Robin Finck",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "1440_31",
                "name": "Guns N' Roses",
                "data": {
                    "band": "Robin Finck",
                    "relation": "member of band"
                },
                "children": []
            }]
        }, {
            "id": "235955_32",
            "name": "Danny Lohner",
            "data": {
                "band": "Nine Inch Nails",
                "relation": "member of band"
            },
            "children": [{
                "id": "909_33",
                "name": "A Perfect Circle",
                "data": {
                    "band": "Danny Lohner",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "1695_34",
                "name": "Killing Joke",
                "data": {
                    "band": "Danny Lohner",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "1938_35",
                "name": "Methods of Mayhem",
                "data": {
                    "band": "Danny Lohner",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "5138_36",
                "name": "Skrew",
                "data": {
                    "band": "Danny Lohner",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "53549_37",
                "name": "Angkor Wat",
                "data": {
                    "band": "Danny Lohner",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "113510_38",
                "name": "Puscifer",
                "data": {
                    "band": "Danny Lohner",
                    "relation": "member of band"
                },
                "children": []
            }, {
                "id": "113512_39",
                "name": "Renhold\u00ebr",
                "data": {
                    "band": "Danny Lohner",
                    "relation": "is person"
                },
                "children": []
            }]
        }],
        "data": []
    };
    //end
	*/