var oldnode = null;


		function markRoot(node)
		{
			if(oldnode != null) oldnode.domElement.style.fontWeight="";
			
			if(node != null && node != false)
			{
				node.domElement.style.fontWeight="bold";
				oldnode = node;
			}
		}



		var ox = 0;
		var oy = 0;
		var or = 0;
		var ob = 0;


		function getClientWidth() {
		  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
		}

		function getClientHeight() {
		  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
		}

		
		function getPosition(element)
		{
		  var elem=element,tagname="",x=0,y=0;
		  
		  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
		  {
		    y+=elem.offsetTop;     /* Offset des jeweiligen Elements addieren */
		    x+=elem.offsetLeft;    /* Offset des jeweiligen Elements addieren */
		    tagname=elem.tagName.toUpperCase(); /* tag-Name ermitteln, Grossbuchstaben */

		    if (tagname=="BODY")
		      elem=0;

		    if (typeof(elem)=="object")
		      if (typeof(elem.offsetParent)=="object")
		        elem=elem.offsetParent;
		  }

		  position=new Object();
		  position.x=x;
		  position.y=y;
		  return position;
		}

		
		function toggleGraph()
		{
			hoverGraph(0);
			
			var box = document.getElementById("outerGraph");
			var dimmer = document.getElementById("dimmerGraph");
			var shadow = document.getElementById("shadowGraph");
			
			
			var steps = 10;
			var timeperstep = 60;
			var mode;
			
			var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body

			var dsoctop=document.all? iebody.scrollTop : pageYOffset
			
			if(box.style.position!="fixed")
			{
				dimmer.style.display = "";
				shadow.style.display = "";
				
				var pos = getPosition(box);
				
				ox = pos.x;
				oy = pos.y;
				or = ox +  box.offsetWidth;
				ob = oy + box.offsetHeight ;
				
				
				var sx = ox;
				var sy = oy - dsoctop;
				var sr = ox +  box.offsetWidth;
				var sb = oy + box.offsetHeight - dsoctop;
				
				
				
				var tx = getClientWidth()/2-(600/2) ;
				var ty = getClientHeight()/2-(600/2) ;
				var tr = tx+600;
				var tb = ty+600;
				
				if(ty < 0) 
				{
					ty = 0;
					tb = 600;
				}
				
				mode = 1;
			}
			else
			{
				var ctrl = document.getElementById("controlGraph");
				ctrl.style.display = "none";
				
				var pos = getPosition(box);
				
				var sx = pos.x;
				var sy = pos.y;
				var sr = sx +  box.offsetWidth;
				var sb = sy + box.offsetHeight ;
				
				var tx = ox ;
				var ty = oy - dsoctop;
				var tr = or;
				var tb = ob - dsoctop;

				mode = 2;
				
			}

			for(var i = 0; i <=steps; i++)
			{
				var x = sx+((tx-sx)/steps)*i;
				var y = sy+((ty-sy)/steps)*i;
				var r = sr+((tr-sr)/steps)*i;
				var b = sb+((tb-sb)/steps)*i;
				
				if(mode == 1) // Größer werdend
				{
					window.setTimeout("placeGraph("+x+","+y+","+(r-x)+","+(b-y)+","+((i/(steps))*30)+"); curGraph.config.levelDistance = "+(((i/(steps))*70)+50)+"; curGraph.refresh();",i*timeperstep);
				}
				else if(mode == 2)
				{
					window.setTimeout("placeGraph("+x+","+y+","+(r-x)+","+(b-y)+","+(30-((i/(steps))*30))+"); curGraph.config.levelDistance = "+(70-(((i/(steps)))*70)+50)+"; curGraph.refresh();",i*timeperstep);
				}
			}
			
			if(mode == 1)
			{
				window.setTimeout("showToolbar();",steps*timeperstep);
			}
			
			if(mode == 2)
			{
				window.setTimeout("hideShadows();",steps*timeperstep);
			}
			
		}

		function showToolbar()
		{
			var ctrl = document.getElementById("controlGraph");
			var box = document.getElementById("outerGraph");
			var cover = document.getElementById("graphCover");
			
			cover.style.display = "none";
			
			ctrl.style.display = "";
			ctrl.style.position = "fixed";
			ctrl.style.left = box.offsetLeft+"px";
			ctrl.style.top = box.offsetTop+"px";
			
		}

		function hideShadows()
		{
			var box = document.getElementById("outerGraph");
			var dimmer = document.getElementById("dimmerGraph");
			var shadow = document.getElementById("shadowGraph");
			
			var cover = document.getElementById("graphCover");
			cover.style.display = "";
			
			box.style.position ="relative";
			box.style.left = "";
			box.style.top = "";
			box.style.width ="140px";
			box.style.height ="140px";
			dimmer.style.display = "none";
			shadow.style.display = "none";
		}

		function placeGraph(_x,_y,_w,_h,_alpha)
		{
			var box = document.getElementById("outerGraph");
			var img = document.getElementById("infovis");
			var shadow = document.getElementById("shadowGraph");
			var dimmer = document.getElementById("dimmerGraph");
			
			box.style.position="fixed";
			box.style.left = _x + "px";
			box.style.top = _y+"px";
			box.style.width = _w+"px";
			box.style.height = _h+"px";
			

			shadow.style.position="fixed";
			shadow.style.left = 5+_x+ parseInt(_alpha/10) + "px";
			shadow.style.top = 5+_y+ parseInt(_alpha/10)+"px";
			shadow.style.width = _w+ parseInt(_alpha/10)+"px";
			shadow.style.height = _h+ parseInt(_alpha/10)+"px";
			shadow.style.filter="alpha(opacity="+_alpha+")";
			shadow.style.opacity=_alpha/100;
			shadow.style.mozOpacity=_alpha/100;
			
			dimmer.style.filter="alpha(opacity="+(_alpha/2)+")";
			dimmer.style.opacity=_alpha/50;
			dimmer.style.mozOpacity=_alpha/50;
			
			img.style.left = (-(600-_w)/2)+"px";
			img.style.top = (-(600-_h)/2)+"px";
			

			dimmer.style.left = "0px";
			dimmer.style.top = "0px";
			dimmer.style.width = getClientWidth() + "px";
			dimmer.style.height = getClientHeight() + "px";
			
			//var graphDiv;
			
			//console.log(_x+","+_y+"  "+_w+","+_h);
		}

		function hoverGraph(_onoff)
		{
			var box = document.getElementById("outerGraph");
			box.style.backgroundColor = (_onoff== 1 ? "#FFFFDD" : "#FFFFFF");
			
		}

		var graphSelButton= 1;

		function onGraphButtonClick(_num)
		{
			document.getElementById("graphButton1").className="graphButtonUp";
			document.getElementById("graphButton2").className="graphButtonUp";
			document.getElementById("graphButton3").className="graphButtonUp";


			if(_num == 1 || _num == 2 || _num==3)
			{
				graphSelButton = _num;
			}
			else
			{
				toggleGraph();
			}
			
			document.getElementById("graphButton"+graphSelButton).className="graphButtonPressed";
			
		}

		var newPartGraph = null;

		function extendGraph()
		{
			if(!injectOk || curGraph.busy)
			{
				window.setTimeout("extendGraph()",200);
				return;
			}
			
			injectOk = false;
			

			//get animation type.
			curGraph.op.sum(newPartGraph, {
			type: "fade:seq",
			fps: 30,
			duration: 1000,
			hideLabels: false
			});
		}; 



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';
		    }
		};

		var curGraph = null;
		var curRoot = null;

		var curCanvas = null;

		function addEvent(obj, type, fn) {
		    if (obj.addEventListener) obj.addEventListener(type, fn, false);
		    else obj.attachEvent('on' + type, fn);
		};

		var injectOk = true;


		function initGraph(_word, _json)
		{
		    var infovis = document.getElementById('infovis');
		    var w = 600;
		    var h = 600;
		    //init data
		    //If a node in this JSON structure
		    //has the "$type" or "$dim" parameters
		    //defined it will override the "type" and
		    //"dim" parameters globally defined in the
		    //RGraph constructor.


		    var json = _json;
		    //RootKnoten für die Position in der Darstellung. Suchwort hier:mittig
		    var root = _word;
		    

		    
		    //end
		    //init canvas
		    //Create a new canvas instance.
		    var canvas = new Canvas('bgcanvas', {
		        'injectInto': 'infovis',
		        'width': w,
		        'height': h,
		        //Optional: Add a background canvas
		        //that draws some concentric circles.
		        'backgroundCanvas': {
		            'styles': {
		                
		                'strokeStyle': '#CCCCCC'
		            },
		            'impl': {
		                'init': function(){},
		                'plot': function(canvas, ctx){
		                    var times = 2, d = 120;
		                    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();
		                    }
		                }
		            }
		        }
		    });
		    //init RGraph
		    
		    var rgraph = new RGraph(canvas, {
		        //Nodes and Edges parameters
		        //can be overriden if defined in
		        //the JSON input data.

		        //This way we can define different node
		        //types individually.

		    	
		        Node: {
		            'overridable': true,
		            'color': '#6487A0'

		        },
		        Edge: {
		            'overridable': true,
		            'color': '#DDDDDD'
		        },

		        //Set polar interpolation.
		        //Default's linear.
		        interpolation: 'linear',

		        //Change the transition effect from linear
		        //to elastic.
		        transition: Trans.Quint.easeIn,
		        //Change other animation parameters.
		        duration:1000,
		        fps: 30,
		        //Change father-child distance.
		        levelDistance: 50,
		        //This method is called right before plotting
		        //an edge. This method is useful to change edge styles
		        //individually.
		        
		        
		        
		        onBeforePlotLine: function(adj){
		            if (!adj.data.$lineWidth)
		                adj.data.$lineWidth= 1;
		        },


		        //Add node click handler and some styles.
		        //This method is called only once for each node/label crated.
		        
		        onAfterCompute: function(node)
		        {
		        	injectOk = true;
		        	
		        },
		        
		        onCreateLabel: function(domElement, node){
		            domElement.innerHTML = node.name;
		            node.domElement = domElement;
		            domElement.onclick = function () {
		                

		                /*Alert des Knoten, hier können weitere Aktionen auf den Knoten ausgeführt werden.*/
		            	
		                markRoot(node);
		                
		                if(graphSelButton == 1)
		                {
		                  document.getElementById("W3L_Query").value = node.name;
		                  document.getElementById("sem_search").submit();
		                  toggleGraph();
		                  return false;
		                }
		                else if(graphSelButton == 2)
		                {
		                	 document.getElementById("W3L_Query").value = document.getElementById("W3L_Query").value + " " + node.name;
		                     document.getElementById("sem_search").submit();
		                     toggleGraph();
		                     return false;
		                }
		                else if(graphSelButton == 3)
		                {
		                	requestExtend(node.name);
		                }
		                
		                
		                
		              

		                rgraph.onClick(node.id, { hideLabels: false });
		                
		                //alert("Sie haben: "+node.id+" gewählt");
		            };
		            var style = domElement.style;
		            style.cursor = 'pointer';
		            style.fontSize = "10px";
		            style.color = "#446790";
		        },
		        //This method is called when rendering/moving a label.
		        //This is method is useful to make some last minute changes
		        //to node labels like adding some position offset.
		        onPlaceLabel: function(domElement, node){
		            var style = domElement.style;
		            var left = parseInt(style.left);
		            var w = domElement.offsetWidth;
		            style.left = (left - w / 2) + 'px';
		        }
		       

		    });
		    //load graph.
		    
		    curGraph = rgraph;
		    
		    rgraph.loadJSON(json,"gn_"+ root);
		    //compute positions and plot
		    rgraph.refresh();
		    //end
		    
		   
		    rgraph.controller.onBeforeCompute(rgraph.graph.getNode(rgraph.root));
		    rgraph.controller.onAfterCompute();
		    markRoot(rgraph.graph.getNode(rgraph.root));
		    
		    
		}