//============================class node begin=============================
var nodeTextPosX = 10;
var nodeTextPosY = 10;
Node = function(parentGraph){
  
  this.init1=nodeInit1;//the type1 constructor
  this.init2 = nodeInit2;
  
  this.handleEvent= nodeHandleEvent;//implement the handleEvent interface
  //register the event related functions
  this.nClickedListener = nodeClicked;
  this.nNameClkListener = nodeNameClicked;
  this.nKeyUpListener = nodeKeyUp;
  this.nMousedownListener = startNodeDrag;
  this.parentGraph = parentGraph;//maybe here is problem
}
//this node has been added to the svg, now we just add the events to them.
//now here
function nodeInit2(node){

  if (node.getAttribute("name") != "node") return;
  //change the comment position back to binary
  if (node.getAttribute("commentPos")!=null){
    node.setAttribute("commentPos",StrToUnicodStr(node.getAttribute("commentPos")));
  }
  node.addEventListener('mousedown',this,false);
  node.addEventListener('click',this,false);
  node.addEventListener('keyup',this,false);
  
  if (node.hasChildNodes){ //must be a
    var aNode = node.firstChild;
    if (aNode.nodeName == "rect"){
      aNode.addEventListener('DOMFocusIn',nodeGetFocus,false);
      aNode.addEventListener('DOMFocusOut',nodeLoseFocus,false);
    }
    var tNode = node.lastChild;
    if (tNode.nodeName =="text"){
      tNode.addEventListener("click",this,false);
    }
  }
  
   	
}
function nodeInit1(x,y,nodeName){
  this.x = x;
  this.y = y;
  this.id = "node"+this.parentGraph.nodeID;
  if (nodeName == null){
    this.name = this.id;
  }else{
    this.name = nodeName;
  }
  //this.parentGraph = parentGraph;//maybe here is problem
  this.parentGraph.nodeID++;
  
  
  
  var gNode = this.parentGraph.svgDocument.createElement("g");
  gNode.setAttribute("id",this.id);
  gNode.setAttribute("name","node");
  gNode.addEventListener('mousedown',this,false);
  gNode.addEventListener('click',this,false);
  gNode.addEventListener('keyup',this,false);

 if (this.parentGraph.isLib == false) {

   var sel = parent.hasSelectedContent();

 	 if (sel){
		var rng = sel.createRange();
		gNode.setAttribute("commentURL",parent.getURL());
		gNode.setAttribute("commentOn",rng.text);
		gNode.setAttribute("commentPos",rng.getBookmark());
		//alert(gNode.getAttribute("commentOn"));
  	}
  }
  
  this.parentGraph.root.appendChild(gNode);
  var aNode = this.parentGraph.svgDocument.createElement("rect");
  
  aNode.setAttribute("x",this.x);
  aNode.setAttribute("y",this.y);
  aNode.setAttribute("width",  25);
  aNode.setAttribute("height", 25);
  aNode.setAttribute("style", "fill: #eeeeee;stroke:black");
  aNode.addEventListener('DOMFocusIn',nodeGetFocus,false);
  aNode.addEventListener('DOMFocusOut',nodeLoseFocus,false);

  gNode.appendChild(aNode);
  
  var tNode = this.parentGraph.svgDocument.createElement('text');
  tNode.setAttribute('x',this.x+ nodeTextPosX);
  tNode.setAttribute('y',this.y+ nodeTextPosX);
  tNode.setAttribute('style','text-anchor:right;font-size:10;font-family:Arial;fill:red');
  tNode.addEventListener("click",this,false);
  gNode.appendChild(tNode);
  
  var textName = null;

  texte = this.parentGraph.svgDocument.createTextNode(this.name);
  tNode.appendChild(texte);
}

 function nodeHandleEvent(evt){
    
   	switch (evt.type){
    		case "click":
    			{
    			
    			if(evt.getTarget().tagName == 'rect'){
     				//alert(evt.getTarget());
     				this.nClickedListener(this.parentGraph,evt);
     			
     			}else if(evt.getTarget().tagName == "text"){
     				//alert(evt.getTarget());
     				this.nNameClkListener(this.parentGraph,evt);
     			}
     			break;
     		}
     		case "keyup":{
     			this.nKeyUpListener(this.parentGraph,evt);
     			break;
     			}
     		case "mousedown":{
     		 this.nMousedownListener(this.parentGraph,evt);
         break;
         }
     	
    	}
}

 function nodeClicked(graph,evt){
	graph.editSeledNode = null;	
	// mouse clicked on the node.
	if (graph.getGraphEditStatus() ==1){	//now under "NEW_LINE_1", 1st node is selected. change to "NEW_LINE_2"
		//do sth then return ;
		
		graph.startNode = evt.getTarget().getParentNode();
		graph.lineStartX = evt.getClientX();
		graph.lineStartY = evt.getClientY();
		graph.setGraphEditStatus(2);
		//get the start point;
		return;
	}
	
	if (graph.getGraphEditStatus() ==2){	////now under "NEW_LINE_2", 2st node is selected. change to "NEW_LINE_1"

		//do sth then return ;
		graph.endNode = evt.getTarget().getParentNode();
		if (graph.startNode.getAttribute("id") ==graph.endNode.getAttribute("id")){
			alert("the start node and the end node should not be the same!--> i will change in the future");
			//maybe change in the future.//draw a self-pointed line.
		}else{
			//do some drawing work.
			graph.lineEndX = evt.getClientX();
			graph.lineEndY = evt.getClientY();
			//draw a line		
			graph.addLine(graph.lineStartX,graph.lineStartY,graph.lineEndX,graph.lineEndY,graph.startNode,graph.endNode);
		}
		
		graph.startNode = null;
		graph.endNode = null;
		graph.setGraphEditStatus(1);
		return;
	}
	
	if(graph.getGraphEditStatus() ==4){
		
		var seledNode = evt.getTarget().getParentNode();
		var pos = seledNode.getAttribute("commentPos");
		
		if(seledNode.getAttribute("commentPos")!= null){
		  if (seledNode.getAttribute("commentPos")!= ""){
			parent.selectContent(seledNode.getAttribute("commentPos"));
			}
		};
		
	}

}
function nodeNameClicked(graph, evt){
	if (graph.getGraphEditStatus() == 4){//in the edit status
		//evt.getTarget().getFirstChild().selectSubString(0,evt.getTarget().getFirstChild().getNumberOfChars());	
		var newName = prompt("input the new name for this node",evt.getTarget().getFirstChild.getData());
		if (newName){
		evt.getTarget().getFirstChild.setData(newName);
		}else{//cancel is clicked,do nothing
		}
		evt.stopPropagation();
	}
		
}
function nodeGetFocus(evt){
	evt.getTarget().setAttribute("style","fill: #eeeeee;stroke:red");
}
function nodeLoseFocus(evt){
	evt.getTarget().setAttribute("style","fill: #eeeeee;stroke:black");

}

function nodeKeyUp(graph, evt){
	if (graph.getGraphEditStatus() == 4){// now in the edit status
	
		if (evt.keyCode == 127) {//delete key
			graph.delNode(evt.getTarget().getParentNode());
			return;	
		}else{
			//alert("u press keycode="+ evt.keyCode+" charcode="+evt.charCode+"  on "+evt.getTarget().getParentNode().getAttribute("id"));
			return;
		}
		
	}
	
}

function startNodeDrag(graph,evt){
  if(graph.getGraphEditStatus() != 3) return; //drag only works when we are in the status of  "SELECT_OBJECT"
  
	if (graph.seledNode!=null){
		graph.seledNode.style.setProperty('pointer-events', 'all');
	}
	var tmpNode = evt.getTarget();
	var parNode = tmpNode.getParentNode();
	if (parNode.getTagName() =="g"){
		graph.seledNode = parNode;
 		var matrix = graph.seledNode.getCTM();		
		//get the offset		
		graph.offsetX = matrix.e - evt.getClientX();
		graph.offsetY = matrix.f - evt.getClientY();
		
		//get all the lines related to this node,and make them invisible.
		var sLines = graph.seledNode.getAttribute("startFromLines");
		var eLines = graph.seledNode.getAttribute("endAtLines");
		sLines = sLines+eLines;
		

		var nodeID = "";
		var tmpIndex = sLines.indexOf(":");
		while(tmpIndex >=0){
			index = -1
			
			sLines = sLines.substring(1,sLines.length);
			
			tmpIndex = sLines.indexOf(":");
			if (tmpIndex ==-1 ){
				nodeID = sLines;
				sLines = "";
			}else{
				nodeID = sLines.substring(0,tmpIndex);
				sLines = sLines.substring(tmpIndex,sLines.length);
			}
			
			
			//alert(nodeID);
			var line = graph.root.getElementById(nodeID); 
			line.style.setProperty('display', 'none');
			//line.style.setProperty('pointer-events', 'none');
			
		}
		
		//move the node to the top of the graph
		graph.seledNode = graph.root.removeChild(graph.seledNode);
		graph.root.appendChild(graph.seledNode);
		
		graph.seledNode.style.setProperty('pointer-events', 'none');
		graph.root.style.setProperty('pointer-events', 'all');
		evt.stopPropagation();
	}
	
	
}
//=============================class node end=============================



//=============================class graph begin=============================
Graph = function(x,y,width,height){
  this.svgDocument = evt.target.ownerDocument;
  this.root = this.svgDocument.getElementById("root");
  this.definedStatus = new Array("NEW_NODE","NEW_LINE_1","NEW_LINE_2","SELECT_OBJECT","EDIT_OBJECT"); 
  this.status = 0;
  this.nodeID = 0;
  this.lineID = 0;
  
  this.startNode =null;
  this.endNode = null;
  this.editSeledNode = null;
  this.seledNode = null;
  this.offsetX = 0;//the offset of point -> graph node
  this.offsetY = 0; 
  
  
  this.lineStartX = 0;
  this.lineStartY =0;
  this.lineEndX = 0;
  this.lineEndY = 0;
  this.isLib = false;
  //functions
  this.setLibType =function(isLib){
	  this.isLib = isLib;
  };
  this.setGraphEditStatus = svgSetIDEStatus;
  this.getGraphEditStatus = svgIDEStatus;
  this.addNode = svgAddNode;
  this.delNode = doDeleteNode;
  this.addLine = svgAddLine;
  this.getRoot = getRoot;
  this.getNodeByID = getNodeByID;
  this.clearCanvas = clearCanvas;
//  this.getAllRoot = getAllRoot;
  this.svgAddElements = addElements;
  this.printNode = printNode;
  //event listener
  this.mouseupListener = endNodeDrag;
  this.mousemoveListener = doNodeDrag;

  var rectNode = this.svgDocument.createElement("rect");
  
  rectNode.setAttribute("id","rootRect");
  rectNode.setAttribute("x",x);
  rectNode.setAttribute("y",y);
  rectNode.setAttribute("width",width);
  rectNode.setAttribute("height",height);
  rectNode.setAttribute("style","stroke: blue;fill: white; fill-opacity:0");
  rectNode.addEventListener('mouseup',this,false);
  rectNode.addEventListener('mousemove',this,false);
  rectNode.addEventListener('click',this,false);
  
  var svgRoot = this.svgDocument.documentElement();
  svgRoot.insertBefore(rectNode,this.root);
  
  //printNode(this.root);
  //printNode(rectNode);
  
  this.handleEvent= function(evt){
  	switch (evt.type){
    		case "mouseup":
    			{
      		this.mouseupListener(evt);
      		break;
     		 }
     		case "mousemove":{
     			this.mousemoveListener(evt);
     			break;
     			}
     		case "click":{
     		 this.addNode(evt);
         break;
         }
     	
    	}
   }

}



//class graph end

//class IDE status begin

function svgSetIDEStatus(sta){
	if ((sta>=0) && (sta< this.definedStatus.length)){
		this.status = sta;
	}
		
}
function svgIDEStatus(){
	return this.status;
	
}
//class IDE status end


function doDeleteNode(node){
	
	alert("u press delete on "+node.getAttribute("id"));	
	//delete this node.
	node = this.root.removeChild(node);
	
	//delete all the lines related to the node.
	//1. about the satrtlines
	var sLines = node.getAttribute("startFromLines");
	var tmpLineID = "";
	var tmpIndex = sLines.indexOf(":");
	while(tmpIndex >=0){
		sLines = sLines.substring(1,sLines.length);
		
		tmpIndex = sLines.indexOf(":");
		if (tmpIndex ==-1 ){
			tmpLineID = sLines;
			sLines = "";
		}else{
			tmpLineID = sLines.substring(0,tmpIndex);
			sLines = sLines.substring(tmpIndex,sLines.length);
		}
		
		
		var line = this.root.getElementById(tmpLineID); 
		
		//remove the line
		line = this.root.removeChild(line);
		//change the other node info related to the line.
		var tmpNode2 = this.root.getElementById(line.getFirstChild().getAttribute("node2"));
		
		var endLinesStr = tmpNode2.getAttribute("endAtLines");
		
		var endLinePos = endLinesStr.indexOf(":"+tmpLineID);
		
		endLinesStr = endLinesStr.substring(0,endLinePos) + endLinesStr.substring(endLinePos + 1+tmpLineID.length,endLinesStr.length);
		tmpNode2.setAttribute("endAtLines",endLinesStr);
	}
	//about the endLines
	sLines = node.getAttribute("endAtLines");
	tmpLineID = "";
	tmpIndex = sLines.indexOf(":");
	while(tmpIndex >=0){
		sLines = sLines.substring(1,sLines.length);
		
		tmpIndex = sLines.indexOf(":");
		if (tmpIndex ==-1 ){
			tmpLineID = sLines;
			sLines = "";
		}else{
			tmpLineID = sLines.substring(0,tmpIndex);
			sLines = sLines.substring(tmpIndex,sLines.length);
		}
		
		
		var line = this.root.getElementById(tmpLineID); 
		
		//remove the line
		line = this.root.removeChild(line);
		//change the other node info related to the line.
		var tmpNode2 = this.root.getElementById(line.getFirstChild().getAttribute("node1"));
		
		var endLinesStr = tmpNode2.getAttribute("startFromLines");
		var endLinePos = endLinesStr.indexOf(":"+tmpLineID);
		endLinesStr = endLinesStr.substring(0,endLinePos) + endLinesStr.substring(endLinePos+1+tmpLineID.length,endLinesStr.length);
		tmpNode2.setAttribute("startFromLines",endLinesStr);
	}
	
}




function svgAddNode(evt){
	if (this.getGraphEditStatus()!=0) return;	//only work under "NEW_NODE" status;
	var pNode = new Node(this);
	pNode.init1(evt.getClientX(),evt.getClientY());
  return pNode;

}


function doNodeDrag(evt){
	if(this.getGraphEditStatus() != 3) return; 
	
	if (this.seledNode == null) 
	{
		return ;
	}
	
	var x = evt.getClientX() + this.offsetX;
	var y = evt.getClientY() + this.offsetY;
	
	
	this.seledNode.setAttribute('transform', 'translate(' + x + ',' + y + ')');
	evt.stopPropagation();
}


function endNodeDrag(evt){
	if(this.getGraphEditStatus() != 3) return; 
	
	if (this.seledNode == null) return;
	
	//redraw all the lines related to the node
	//get all the lines related to this node,and make them visible.
	
	
	//1.about the startLines
	var sLines = this.seledNode.getAttribute("startFromLines");
	var tmpLineID = "";
	var tmpIndex = sLines.indexOf(":");
	while(tmpIndex >=0){
		sLines = sLines.substring(1,sLines.length);
		
		tmpIndex = sLines.indexOf(":");
		if (tmpIndex ==-1 ){
			tmpLineID = sLines;
			sLines = "";
		}else{
			tmpLineID = sLines.substring(0,tmpIndex);
			sLines = sLines.substring(tmpIndex,sLines.length);
		}
		
		var line = this.root.getElementById(tmpLineID); 
		//change the line
		var matrix = this.seledNode.getCTM();		
		var lineEle = line.getFirstChild();
		
		var offsetX1 = parseInt(lineEle.getAttribute("offsetX1"));
		var offsetY1 = parseInt(lineEle.getAttribute("offsetY1"));
		var newX = parseInt(lineEle.getAttribute("savedX1")) + matrix.e - offsetX1;
		var newY = parseInt(lineEle.getAttribute("savedY1")) + matrix.f - offsetY1;
		lineEle.setAttribute("x1",newX);
		lineEle.setAttribute("y1",newY);
	
		//change the text pos.
		var tmpText = lineEle.getNextSibling();
		
		tmpText.setAttribute("x",(newX+parseInt(lineEle.getAttribute("x2")))/2);
		tmpText.setAttribute("y",(newY+parseInt(lineEle.getAttribute("y2")))/2);
		//tmpText.setAttribute('transform', 'translate(' + (matrix.e - offsetX1)/2 + ',' + (matrix.f-offsetY1)/2+ ')');
		//show the line (with text)
		line.style.setProperty('display', 'inline');
			
	}
	//2. about the endLines
	var eLines = this.seledNode.getAttribute("endAtLines");
	sLines = eLines;
	tmpIndex = sLines.indexOf(":");
	while(tmpIndex >=0){
		sLines = sLines.substring(1,sLines.length);
		
		tmpIndex = sLines.indexOf(":");
		if (tmpIndex ==-1 ){
			tmpLineID = sLines;
			sLines = "";
		}else{
			tmpLineID = sLines.substring(0,tmpIndex);
			sLines = sLines.substring(tmpIndex,sLines.length);
		}
		
		
		var line = this.root.getElementById(tmpLineID); 
		var lineEle = line.getFirstChild();
		//change the line
		var matrix = this.seledNode.getCTM();		
		var offsetX2 = parseInt(lineEle.getAttribute("offsetX2"));
		var offsetY2 = parseInt(lineEle.getAttribute("offsetY2"));
		var newX = parseInt(lineEle.getAttribute("savedX2")) + matrix.e - offsetX2;
		var newY = parseInt(lineEle.getAttribute("savedY2")) + matrix.f - offsetY2;
		lineEle.setAttribute("x2",newX);
		lineEle.setAttribute("y2",newY);
		//change the text pos.
		var tmpText = lineEle.getNextSibling();
		tmpText.setAttribute("x",(parseInt(lineEle.getAttribute("x1")) +newX)/2);
		tmpText.setAttribute("y",(parseInt(lineEle.getAttribute("y1"))+newY)/2);
		
		//tmpText.setAttribute('transform', 'translate(' + (matrix.e - offsetX2)/2 + ',' + (matrix.f - offsetY2)/2+ ')');
		
		//show the line
		line.style.setProperty('display', 'inline');
	}
	
	
	//set back event linseners.
	this.seledNode.style.setProperty('pointer-events', 'all');
	this.seledNode = null;
	this.offsetX = 0;
	this.offsetY = 0;
	evt.stopPropagation();

}
//for node drag end

//=============================class graph end=============================


//=============================class Line begin=============================
Line = function(parentGraph){
  this.parentGraph = parentGraph;
  this.init1 = lineInit1;
  this.init2 = lineInit2;
  

  this.doDeleteline = doDeleteline;
  this.keyUpListener = lineKeyUp;
  this.lineclickListener = lineSelected;
  this.lineNameClkListener = lineNameSelected;
  this.handleEvent= lineHandleEvent;

}
//now modify here
function lineInit2(node){

  if (node.getAttribute("name") != "line") return;
  node.addEventListener('keyup',this,false);
  
  if (node.hasChildNodes){ //must be a
    var aLine = node.firstChild;
    //alert(aNode.nodeName);
    if (aLine.nodeName == "line"){
      	aLine.addEventListener('DOMFocusIn',lineGetFocus,false);
	      aLine.addEventListener('DOMFocusOut',lineLoseFocus,false);
	      aLine.addEventListener('click',this,false);
    }
    
    var tNode = node.lastChild;
    if (tNode.nodeName =="text"){
      tNode.addEventListener("click",this,false);
    }
  }

}
function lineInit1(x1,y1,x2,y2,node1,node2,lineName){
this.id = "line" + this.parentGraph.lineID;
  this.parentGraph.lineID++;
  if (lineName == null){
    this.name = this.id;
  }else{
    this.name = lineName;
  }
  //create a new line for the xml and draw
	//1. create a <g> node
	//2. create a <line> node
	//3. create a <text> node.
	//final: <g id = "" onmousedown = "startNodeDrag(evt)"> <line/><line/><text></text></g>	
	
	//<g> node	
	var gNode = this.parentGraph.svgDocument.createElement("g");
	gNode.setAttribute("id",this.id);
	gNode.setAttribute("name","line");
	gNode.addEventListener('keyup',this,false);
	//find the right place inserting the line(and its name).
	var tmpNode = node1.nextSibling;
	var isNode1Prv = false;

	while(tmpNode !=null){
		if (tmpNode.getAttribute("id") == node2.getAttribute("id")){
			//node2 is after node1.
			isNode1Prv = true;
			break;
		}
		tmpNode = tmpNode.nextSibling;
		
	};
	if(isNode1Prv == true) {
		//root.appendChild(gNode);
		this.parentGraph.root.insertBefore(gNode,node1);
		
	}else{
		this.parentGraph.root.insertBefore(gNode,node2);
	}

	
	//<line> node
	var aLine = this.parentGraph.svgDocument.createElement("line");
	aLine.addEventListener('DOMFocusIn',lineGetFocus,false);
	aLine.addEventListener('DOMFocusOut',lineLoseFocus,false);
	aLine.setAttribute("x1",x1);
	aLine.setAttribute("y1",y1);
	aLine.setAttribute("x2",x2);
	aLine.setAttribute("y2", y2);
	aLine.setAttribute("node1",node1.getAttribute("id"));
	aLine.setAttribute("node2",node2.getAttribute("id"));

	//save (x1,y1),(x2,y2) for future usage
	aLine.setAttribute("savedX1",x1);
	aLine.setAttribute("savedY1",y1);
	aLine.setAttribute("savedX2",x2);
	aLine.setAttribute("savedY2",y2);
	
	//save the CTM() of the nodes for future usage;
	var m = node1.getCTM();		
	aLine.setAttribute("offsetX1",m.e);
	aLine.setAttribute("offsetY1",m.f);
	m = node2.getCTM();		
	aLine.setAttribute("offsetX2",m.e);
	aLine.setAttribute("offsetY2",m.f);
	
	//style
	aLine.setAttribute("style", "stroke:black");
	aLine.addEventListener('click',this,false);
	gNode.appendChild(aLine);
	
	//<text> node add the name of the edge
	var tNode = this.parentGraph.svgDocument.createElement('text');
	tNode.setAttribute('x',(x1+x2)/2);
	tNode.setAttribute('y',(y1+y2)/2);
	tNode.setAttribute('style','text-anchor:right;font-size:10;font-family:Arial;fill:red');
	tNode.addEventListener("click",this,false);
	
	gNode.appendChild(tNode);
	texte = this.parentGraph.svgDocument.createTextNode(this.name);
	tNode.appendChild(texte);


	//set the line info to the nodes
	var lineList = node1.getAttribute("startFromLines");
	node1.setAttribute("startFromLines",lineList+":"+this.id);//add the lines start from this node
	
	lineList = node2.getAttribute("endAtLines");
	node2.setAttribute("endAtLines",lineList+":"+this.id);//add the lines end at this node;
	
	//event handler interface
  
   
  

}
function lineHandleEvent(evt){
  	switch (evt.type){
    		case "click":
    			{
    			if(evt.getTarget().tagName=="line"){
    			 this.lineclickListener(this.parentGraph,evt);
    			}else if (evt.getTarget().tagName=="text"){
    			 this.lineNameClkListener(this.parentGraph,evt);
          }
          
     			break;
     		}
     		case "keyup":{
     		this.keyUpListener(this.parentGraph,evt);
     		 break;
     		}
     	
    	}

}
//class line end

//maybe this function can be removed.
function lineSelected(graph,evt){
	if (graph.getGraphEditStatus() == 4){//only work under edit status
		var line = evt.getTarget();
		var str = line.getAttribute("node1")+":"+line.getAttribute("node2")+"\n";
		var node1 = line.getAttribute("node1");
		var node2 = line.getAttribute("node2");

		//alert(str);
		//move the line to the end root node, so it can be at up
		return;
	}
}

function lineGetFocus(evt){
	evt.getTarget().setAttribute("style","fill: #eeeeee;stroke:red");
}
function lineLoseFocus(evt){
	evt.getTarget().setAttribute("style", "stroke:black");
}
function lineKeyUp(graph,evt){
	if (graph.getGraphEditStatus() == 4){// now in the edit status
		if (evt.keyCode == 127) {//delete key
			
			this.doDeleteline(graph,evt.getTarget().getParentNode());
			return;	
		}else{
			alert("u press keycode="+ evt.keyCode+" charcode="+evt.charCode+"  on "+evt.getTarget().getParentNode().getAttribute("id"));
		}
	}
}

function doDeleteline(graph,line){
	line = graph.root.removeChild(line);
	//change the nodes infomation linked with this line
	//about node1
	var nodeID = line.getFirstChild().getAttribute("node1");
	var node = graph.root.getElementById(nodeID);
	var tmpLines = node.getAttribute("startFromLines");
	
	var linePos = tmpLines.indexOf(":"+line.getAttribute("id"));

	tmpLines = tmpLines.substring(0,linePos) + tmpLines.substring(linePos+1+line.getAttribute("id").length,tmpLines.length);
	node.setAttribute("startFromLines",tmpLines);
	var msg = "start node--lines from:" + node.getAttribute("startFromLines") + "\n lines end:" +node.getAttribute("endAtLines");
	alert(msg);

	//about node2
	nodeID = line.getFirstChild().getAttribute("node2");
	node = graph.root.getElementById(nodeID);
	tmpLines = node.getAttribute("endAtLines");
	linePos = tmpLines.indexOf(":"+line.getAttribute("id"));
	tmpLines = tmpLines.substring(0,linePos) + tmpLines.substring(linePos+1+line.getAttribute("id").length,tmpLines.length);
	node.setAttribute("endAtLines",tmpLines);
	msg = "endNode --lines from: " + node.getAttribute("startFromLines") + "\n lines end:" +node.getAttribute("endAtLines");
	alert(msg);

}


function svgAddLine(x1,y1,x2,y2,node1,node2){
	//data structure
	var lineNode = new Line(this);
	lineNode.init1(x1,y1,x2,y2,node1,node2);
}

function lineNameSelected(graph,evt){
	if (graph.getGraphEditStatus() == 4){//in the edit status
		//evt.getTarget().getFirstChild().selectSubString(0,evt.getTarget().getFirstChild().getNumberOfChars());	
		var newName = prompt("input the new name for this line",evt.getTarget().getFirstChild.getData());
		if (newName != null){
			evt.getTarget().getFirstChild.setData(newName);
		}
		evt.stopPropagation();
	}
}

//-- end line


function showmsg(msg){
  alert("msg:"+msg);
}


function getRoot(){
  
 	return this.root;

}



function getNodeByID(id){
  return this.svgDocument.getElementById(id);
}

/*
function getAllRoot(){
  return svgDocument.documentElement();
}
*/

function addElements(str){
  var node = parseXML(str,document);
  childNodes = node.childNodes;
  svgNode = node.childNodes.item(0);
  
  childNodes = svgNode.getElementsByTagName('g');
  for (var i = 0; i<childNodes.length;i++){
    gNode = childNodes.item(i);
    if (gNode.getAttribute("name")=="node"){
      //add event for the nodes
      pNode = new Node(this);
      pNode.init2(gNode);
      
    }else if (gNode.getAttribute("name")=="line"){
      pLine = new Line(this);
      pLine.init2(gNode); 
    }
  }
  
  
  pa = this.root.parentNode;
  pa.replaceChild(node,this.root);
  this.root = this.svgDocument.getElementById("root");
	
}

//todo
function clearCanvas(){
	str = "<svg id='root'></svg>";
	var node = parseXML(str, document);
	pa = this.root.parentNode;
	pa.replaceChild(node, this.root);
	this.root = this.svgDocument.getElementById("root");
}