//var servletUrl = "/services/2007/ccs-viz/servlet";
var servletUrl = "/ccs-viz/servlet";
var topLevelWindow = null;
function initialize(servletURL){
  var content ='<div style="position:absolute; z-index:-20;">'+
	'<h1>CCS-Process Visualization</h1>'+
	'<div style="border-style: solid">'+
		'<h2>How to use</h2>'+
		'Processes from the list spawn new windows<br>'+
		'<div class="grayDiv">=</div>Move<br>'+
		'<div class="grayDiv">+</div>Resize<br>'+
		'<div class="grayDiv">X</div>Close<br>'+
		'<div class="grayDiv">R</div>Refresh<br>'+
		'<div class="normal" style="text-decoration:underline;" onclick="clearWindow()">Click here to clear Processes</div>'+
		'<br>'+
	'</div>'+
'</div>'+
'<div id="nodeCreation" style="display:none"></div>'+
'<div style="position:absolute;" id="mainBody"></div>'+
'<div id="nodes" style="position:absolute; left:770px" ><div id="nodeSelection" class="nodes"></div>'+
  '<div class="dragger" style="left:232px; top:497px;" onmouseover="dragActivate();" onmousedown="dragStart(this, \'size\');">+</div>'+
  '<div class="dragger" style="left:2px; top:2px;" onmouseover="dragActivate();" onmousedown="dragStart(this.parentNode,  \'move\');">=</div>'+
  '<div class="dragger" style="left:23px; top:3px;" onclick="getProcesses(this.parentNode.firstChild);">R</div>'+
'</div>';
  document.getElementsByTagName("BODY")[0].innerHTML = content;
  getProcesses(document.getElementById("nodeSelection"));
  servletUrl = servletURL;
}

function toTop(element){
	if(topLevelWindow != null)
		topLevelWindow.style.zIndex = "-1";
	element.parentNode.style.zIndex = "10";
	topLevelWindow = element.parentNode;
}

function getRequest()
{
	var xmlHttp = false;
	 // Internet Explorer
	  try {
		  xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
	  } catch(e) {
		  try {
			  xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
		  } catch(e) {
			  xmlHttp  = false;
		  }
	  }
	  // Mozilla, Opera und Safari
	  if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
		  xmlHttp = new XMLHttpRequest();
	  }

	  return xmlHttp;
}

function clearWindow(){
	var cwindow = makeNewWindow();
	
	var xmlHttp = getRequest();
	  if (!xmlHttp) return;
	  xmlHttp.open('GET',  servletUrl+"/getClearProcessesJS" , true);
	  xmlHttp.onreadystatechange = function ()
	  {
	        if (xmlHttp.readyState == 4)
	        	cwindow.parentNode.parentNode.innerHTML = "<br>"+xmlHttp.responseText;

	  };
	   xmlHttp.send(null);
}

function clearProc(id,element){
	var xmlHttp = getRequest();
	  if (!xmlHttp) return;
	  var windowBody = element.parentNode.parentNode;
	  windowBody.innerHTML = '<img id="busy-indicator" style="position: absolute; left:50%; top:50%;" src="wait20trans.gif"/>';
	  xmlHttp.open('GET',  servletUrl+"/clear?id="+id , true);
	  xmlHttp.onreadystatechange = function ()
	  {
	        if (xmlHttp.readyState == 4){
	        	alert("Tree under "+id+" is cleared");
		        var xmlHttp1 = getRequest();
				  if (!xmlHttp1) return;
	
				  xmlHttp1.open('GET',  servletUrl+"/getClearProcessesJS" , true);
				  xmlHttp1.onreadystatechange = function ()
				  {
				        if (xmlHttp1.readyState == 4)
				        	windowBody.innerHTML = "<br>"+xmlHttp1.responseText;
				  };
				   xmlHttp1.send(null);
	        }
	  };
	   xmlHttp.send(null);
   
}

function clearAll(element){
	var xmlHttp = getRequest();
	  if (!xmlHttp) return;
	  var windowBody = element.parentNode.parentNode;
	  windowBody.innerHTML = '<img id="busy-indicator" style="position: absolute; left:50%; top:50%;" src="wait20trans.gif"/>';
	  xmlHttp.open('GET',  servletUrl+"/clear" , true);
	  xmlHttp.onreadystatechange = function ()
	  {
	        if (xmlHttp.readyState == 4){
		       	alert("All Processes cleared");
		        var xmlHttp1 = getRequest();
				  if (!xmlHttp1) return;
		
				  xmlHttp1.open('GET',  servletUrl+"/getClearProcessesJS" , true);
				  xmlHttp1.onreadystatechange = function ()
				  {
				        if (xmlHttp1.readyState == 4)
				        	windowBody.innerHTML = "<br>"+xmlHttp1.responseText;
				  };
				   xmlHttp1.send(null);
	        }
	  };
	   xmlHttp.send(null);
}

function insertTest(element)
{
  var xmlHttp = getRequest();
  if (!xmlHttp) return;

  xmlHttp.open('GET',  servletUrl+"/getProcessesHtml", true);
  xmlHttp.onreadystatechange = function ()
  {
        element.innerHTML = xmlHttp.responseText;
  };
  xmlHttp.send(null);
}

function getTree(id, orgNode){
  var xmlHttp = getRequest();
  if (!xmlHttp) return;

  xmlHttp.open('GET',  servletUrl+"/getTreeJs?deepth=30&id="+id , true);
  xmlHttp.onreadystatechange = function ()
  {
        if (xmlHttp.readyState == 4)
          writeProcess(xmlHttp.responseText, orgNode);
  };
   xmlHttp.send(null);
}

function writeProcess(nodesS, orgNode){

      var nodesA = nodesS.split("&");
      var nodeA = nodesA[0].split(";");
      //makeRoot(nodeA[2],nodeA[1],orgNode);
      var bodyStretcher = getBodyStretcher(makeRoot(nodeA[2],nodeA[1],orgNode));
      for(var i=1; i<nodesA.length-1; i++){
       nodeA = nodesA[i].split(";");
         appendNode(nodeA[0],makeNode(nodeA[2],nodeA[1]), bodyStretcher);
      }
}

function getProcesses(element){
  var xmlHttp = getRequest();
  if (!xmlHttp) return;
  element.innerHTML ='<img id="busy-indicator" style="position: absolute; left:50%; top:50%;" src="wait20trans.gif"/>';
  xmlHttp.open('GET',  servletUrl+"/getProcessesJs", true);
  xmlHttp.onreadystatechange = function ()
  {
	  if (xmlHttp.readyState == 4){
		  element.innerHTML = "<br>"+xmlHttp.responseText;
	  }
  };
  xmlHttp.send(null);
}

function test(siblings, deepht){
	var name = "#0";
	for(var d = 1;  d < deepht; d++){
		for(var s = siblings; s > 0; s--){
			appendNode(name,makeNode("#"+d+"."+s));
		}
		name = "#"+d+".1";
	}
}

function getFragment(id, element){
 var xmlHttp = getRequest();
  xmlHttp.open('GET',  servletUrl+"/getFragment?id="+id , true);
  xmlHttp.onreadystatechange = function ()
  {
    if (xmlHttp.readyState == 4){
      element.firstChild.nextSibling.innerHTML="<pre style=\"white-space:pre; overflow:auto;\"></pre>";
      element.firstChild.nextSibling.firstChild.innerHTML=xmlHttp.responseText;
      element.firstChild.nextSibling.style.display = "";
      element.onclick = function () {hideDiv(this);};
      expandNode(element.parentNode);
    }
  };
   xmlHttp.send(null);
}

function getBindings(id, element){
 var xmlHttp = getRequest();
 
 element.firstChild.nextSibling.style.display = "";
 element.firstChild.nextSibling.innerHTML='<img id="busy-indicator" src="wait20trans.gif"/>';
 xmlHttp.open('GET',  servletUrl+"/getBindings?id="+id , true);
  xmlHttp.onreadystatechange = function ()
  {
     if (xmlHttp.readyState == 4){
      element.firstChild.nextSibling.innerHTML=xmlHttp.responseText;
      expandNode(element.parentNode);
      element.onclick = function () {hideDiv(this);};      
    }
  };
   xmlHttp.send(null);
}

function hideDiv(div){
	if (div.firstChild.nextSibling.style.display != "none"){
		div.firstChild.nextSibling.style.display = "none";
	}
	else{
		div.firstChild.nextSibling.style.display = "";
	}
	if(div.parentNode.firstChild.nextSibling.nextSibling.firstChild.nextSibling.style.display == "none" && div.parentNode.firstChild.nextSibling.nextSibling.nextSibling.firstChild.nextSibling.style.display == "none"){
      collapseNode(div.parentNode);
	}
	else{
		expandNode(div.parentNode);
	}
}

function makeNode(id, type){

  var nodeString = '<div class="node">'+
        				'<table cellspacing="0px">'+
            '<tr>'+
            	'<td class="top-left"></td>'+
                '<td class="top-right"></td>'+
                '<td class="spacer"></td>'+
            '</tr>'+
            '<tr>'+
            	'<td colspan="2">'+
                	'<div class="node-element" name="'+id+'" id="'+id+'" >'+
                        '<div class="headline" onclick="getTree('+id+',this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode)">Process:'+id+'</div>'+
                        '<div class="Type">Type:'+type+'</div>'+
                        '<div class="fragment" onclick="getFragment('+id+',this)"><div>Fragment:</div><div style="display:none;"></div></div>'+
                        '<div class="bindings" onclick="getBindings('+id+',this)"><div>Bindings:</div><div style="display:none;"></div></div>'+
                    '</div>'+
                '</td>'+
            '</tr>'+
            '<tr>'+
                '<td class="top-left"></td>'+
            	'<td class="top-right"></td>'+
            '</tr>'+
        '</table>'+
    '</div>';

    document.getElementById("nodeCreation").innerHTML = nodeString;
    node = document.getElementById("nodeCreation").firstChild.cloneNode(true);
    document.getElementById("nodeCreation").removeChild(document.getElementById("nodeCreation").firstChild);
    return node;
}

function makeRoot(name, type, orgNode){
	var node = makeNode(name, type);
	if(node != null){
	   node.firstChild.firstChild.firstChild.firstChild.style.borderTopStyle = "none";
	   node.firstChild.firstChild.firstChild.firstChild.nextSibling.style.borderTopStyle = "none";
	   node.firstChild.firstChild.firstChild.firstChild.nextSibling.nextSibling.style.borderTopStyle = "none";
	   firstNode=getBodyStretcher(orgNode).firstChild;
	   firstNode.innerHTML = "";
	   firstNode.appendChild(node);
	   getBodyStretcher(node).style.width = "200px";
	   setBodyStretcher(node);
	 }
	return node;
}

function makeNewWindow(){
	document.getElementById("mainBody").innerHTML +='<div class="window"  >'
	                                                + '<div class="body" onclick="toTop(this);">'
	  	                                               +'<div id="bodyStretcher" class="bodyStretcher" style="display:block; width:200px; height:1px;">'
	  		                                                +'<div class="node"><img id="busy-indicator" style="position: absolute; left:50%; top:50%;" src="wait20trans.gif"/></div>'
	  	                                               +'</div>'
	                                                + '</div>'
	                                                + '<div class="dragger" style="left:23px; top:3px;" onclick="closeWindow(this.parentNode)">X</div>'
	                                                + '<div class="dragger" style="left:741px; top:496px;" onmouseover="dragActivate();" onmousedown="dragStart(this, \'size\');toTop(this);">+</div>'
	                                                + '<div class="dragger" style="left:3px; top:3px;" onmouseover="dragActivate();" onmousedown="dragStart(this.parentNode, \'move\');toTop(this);">=</div>'
	                                              + '</div>';
	toTop(document.getElementById("mainBody").lastChild.firstChild);
	return document.getElementById("mainBody").lastChild.firstChild.firstChild.firstChild;
}

function closeWindow(window){
	document.getElementById("mainBody").removeChild(window);
}
function setBodyStretcher(node){
	var stretcher = getBodyStretcher(node);
	stretcher.style.width = stretcher.clientWidth + node.clientWidth;
}

function setBodyStretcherTemp(leng, node){
	var stretcher = getBodyStretcher(node);
	stretcher.style.width = stretcher.clientWidth + leng;
}

function getBodyStretcher(node){
	while(node.parentNode.className != "bodyStretcher")
		node = node.parentNode;
	return node.parentNode;
}
function appendNode(parentNodedId, node, bodyStretcher){
	if(node != null){
	    var parentNodeFrame = getParentNodeFrame(parentNodedId, bodyStretcher);
	  	parentNodeFrame.appendChild(node);
	
	  	if (node.previousSibling.tagName=="TABLE"){
	  		//wenn kein linker sibling, dann nur eine senkrechte verbindung anzeigen
	  		node.firstChild.firstChild.firstChild.firstChild.style.borderTopStyle = "none";
	  		node.firstChild.firstChild.firstChild.firstChild.nextSibling.style.borderTopStyle = "none";
	  		node.firstChild.firstChild.firstChild.firstChild.nextSibling.nextSibling.style.borderTopStyle = "none";
	  		//parent unterer verbindung anziegen
	  		node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.style.borderRightStyle ="solid";
	  		node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.nextSibling.style.borderLeftStyle ="solid";
	  	}
	  	if (node.previousSibling.className=="node"){
	  		//spacer nicht anzeigen
	  		node.firstChild.firstChild.firstChild.lastChild.style.borderTopStyle = "none";
	  		//rechte Verbindung nicht anzeign
	  		node.firstChild.firstChild.firstChild.lastChild.previousSibling.style.borderTopStyle = "none";
	  		//rechte Verbindung des linken Siblings anzeigen
	  		node.previousSibling.firstChild.firstChild.firstChild.firstChild.nextSibling.style.borderTopStyle = "solid";
	  		//spacer des linken Siblings anzeigen
	  		node.previousSibling.firstChild.firstChild.firstChild.firstChild.nextSibling.nextSibling.style.borderTopStyle = "solid";
	
	  		setBodyStretcher(node);
	  		matchSpacer(parentNodeFrame);
	  	}
	}
}

function expandNode(nodeElement){
setBodyStretcherTemp(650, nodeElement);
    var node = getParentNodeFrame(nodeElement.getAttribute("name"), getBodyStretcher(nodeElement));
    nodeElement.style.width = "600px";
		//node with one child
		if(node.firstChild.nextSibling){
			if(node.firstChild.nextSibling.firstChild.firstChild.firstChild.nextSibling.firstChild.firstChild.style.width != "600px"){
			node.firstChild.nextSibling.firstChild.firstChild.firstChild.lastChild.style.width = "150px";
			node.firstChild.nextSibling.firstChild.firstChild.firstChild.lastChild.style.borderTopStyle = "solid";
			node.firstChild.nextSibling.firstChild.firstChild.firstChild.lastChild.previousSibling.style.borderTopStyle = "solid";

			}
		}
		if(!node.firstChild.nextSibling && !node.nextSibling){
			node.firstChild.firstChild.firstChild.lastChild.style.width = "150px";
			node.firstChild.firstChild.firstChild.lastChild.style.borderTopStyle = "none";
			node.firstChild.firstChild.firstChild.lastChild.previousSibling.style.borderTopStyle = "none";
		}
		if(node.previousSibling){
			if(node.previousSibling.tagName=="TABLE"){
				node.firstChild.firstChild.firstChild.firstChild.style.borderTopStyle = "solid";
				node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.style.borderLeftStyle = "solid";
				node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.style.borderLeftWidth = "2px";
				node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.style.borderRightStyle = "none";
				node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.nextSibling.style.borderLeftStyle = "none";


			}
		}
		matchSpacer(nodeElement.parentNode.parentNode.parentNode.parentNode.parentNode);
}
function collapseNode(nodeElement){
	var node = getParentNodeFrame(nodeElement.getAttribute("name"), getBodyStretcher(nodeElement));
	nodeElement.style.width = "150px";
	setBodyStretcherTemp(-650,nodeElement);
	//node with one child
	if(node.firstChild.nextSibling){
		node.firstChild.nextSibling.firstChild.firstChild.firstChild.lastChild.style.width = "50px";
		if(!node.firstChild.nextSibling.nextSibling){
			node.firstChild.nextSibling.firstChild.firstChild.firstChild.lastChild.previousSibling.style.borderTopStyle = "none";
			node.firstChild.nextSibling.firstChild.firstChild.firstChild.lastChild.style.borderTopStyle = "none";
		}
	}
	if(!node.firstChild.nextSibling){
		if(node.previousSibling.firstChild.firstChild.nextSibling && node.previousSibling.firstChild.firstChild.nextSibling.firstChild.firstChild.style.width == "600px"){
			node.firstChild.firstChild.firstChild.lastChild.style.width = "150px";
			node.firstChild.firstChild.firstChild.lastChild.style.borderTopStyle = "solid";
			node.firstChild.firstChild.firstChild.lastChild.previousSibling.style.borderTopStyle = "solid";
		}
	}
	if(node.previousSibling){
		if(node.previousSibling.tagName=="TABLE"){
			node.firstChild.firstChild.firstChild.firstChild.style.borderTopStyle = "none";
	        node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.style.borderLeftStyle = "none";
	        node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.style.borderLeftWidth = "";
	        node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.style.borderRightStyle = "solid";
	        node.previousSibling.firstChild.firstChild.nextSibling.nextSibling.firstChild.nextSibling.style.borderLeftStyle = "solid";
		}
		matchSpacer(nodeElement.parentNode.parentNode.parentNode.parentNode.parentNode);
	}
}

function changeNodeSize(nodeElement){
	node = getParentNodeFrame(nodeElement.getAttribute("name"), getBodyStretcher(nodeElement));
	if(nodeElement.style.width != "600px"){
		expandNode(nodeElement);
	}
	else{
		collapseNode(nodeElement)
	}
	matchSpacer(node);
}

function matchSpacer(nodeFrame){

	var rootNode = getBodyStretcher(nodeFrame).firstChild;
	while (nodeFrame != rootNode){
		if(nodeFrame.nextSibling){
			nodeFrame.firstChild.firstChild.firstChild.lastChild.style.width = "50px";
			nodeFrame.firstChild.firstChild.firstChild.lastChild.style.width = nodeFrame.clientWidth - nodeFrame.firstChild.firstChild.firstChild.lastChild.previousSibling.clientWidth * 2;
		}
		if (nodeFrame.previousSibling && nodeFrame.previousSibling.className == "node"){
			nodeFrame.firstChild.firstChild.firstChild.lastChild.style.width = "50px";
			nodeFrame.firstChild.firstChild.firstChild.lastChild.style.width = nodeFrame.clientWidth - nodeFrame.firstChild.firstChild.firstChild.lastChild.previousSibling.clientWidth * 2;
			//nodeFrame.firstChild.firstChild.firstChild.lastChild.style.width = nodeFrame.clientWidth ;
		}
		nodeFrame = nodeFrame.parentNode;
	}
}

function getParentNodeFrame(parentNodeId, bodyStretcher){
	var nodes = document.getElementsByName(parentNodeId);
	var k = 0;
	while(k < nodes.length & getBodyStretcher(nodes[k]) != bodyStretcher){
		k++;
	}
	if(getBodyStretcher(nodes[k]) == bodyStretcher){
		parentNode = nodes[k];
	}
	else{
		parentNode= null;
	}
	if(parentNode != null){
		return parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
	}
	else{
		return bodyStretcher.firstChild;
	}
}