//call on load
  function startUp() {
   buildForm(30,90);
   newDiagram();
  }
   
  function newDiagram() {
   var workspace = document.getElementById('workspace'); 		
    workspace.innerHTML="";
   var diagram=document.createElement("div");	       
	diagram.id = "diagram";
	//note: when adding multiple diagrams to the same blog we may have a complaint about this tag.
	//can it be removed on export and put back on import
		    
	diagram.className = "diagram";   
	workspace.appendChild(diagram);	
	blankForm();
	outputCode();
    showEdgeForms(); 
  }
  
  //call if any field changes  
  function update() {
   var diagram = document.getElementById("diagram");
   var node;
   var nodeId=document.nodeForm.nodeId.value;
  
   if (nodeId=="none") {
      if (confirm("Create a new Node?")) {
        //create new id 
        getNewNodeID();
        node = document.createElement("div");         
        diagram.appendChild(node);
       } else { 
        showEdgeForms();       
        return;  
      } 
    } else {
      node = document.getElementById(nodeId);  
    }   
   nodeMarkup(node);     
   outputCode();
   showEdgeForms(); 
  }
  
  function showEdgeForms() {
        
    showOne(document.nodeForm.ulActive.checked,
    		document.getElementById("ulFields"));
    
    showOne(document.nodeForm.umActive.checked,
    		document.getElementById("umFields"));
    
    showOne(document.nodeForm.urActive.checked,
    		document.getElementById("urFields"));
    
    showOne(document.nodeForm.mlActive.checked,
    		document.getElementById("mlFields"));
    
    showOne(document.nodeForm.mrActive.checked,
    		document.getElementById("mrFields"));
        
	showOne(document.nodeForm.dlActive.checked,
    		document.getElementById("dlFields"));
    
    showOne(document.nodeForm.dmActive.checked,
    		document.getElementById("dmFields"));
    
    showOne(document.nodeForm.drActive.checked,
    		document.getElementById("drFields"));
     
  }
  
  function showOne(checked, element) {
    if (checked) {
		element.style.display="block";
	} else {
	    element.style.display="none";
	}  
  }
  
  //call when new button pressed
  function newNode() {
  	blankForm();
    
  	var nodeId=getNewNodeID();
      
    var diagram = document.getElementById("diagram");    
    var node= document.createElement("div");  
    diagram.appendChild(node);
    nodeMarkup(node);
    outputCode();
  }
  
  function blankForm(){
    document.nodeForm.nodeId.value="none"
    document.nodeForm.colSelect.value='2em';
    document.nodeForm.rowSelect.value='2em';
    document.nodeForm.widthSelect.value='3em';
    document.nodeForm.heightSelect.value='2em';
    
    document.nodeForm.content.value="";
     
    setEdgeForm('ul',false,false,'1em','1em',"");    
    setEdgeForm('um',false,false,'1em','1em',"");    
    setEdgeForm('ur',false,false,'1em','1em',"");
       
    setEdgeForm('ml',false,false,'1em','1em',"");
    setEdgeForm('mr',false,false,'1em','1em',"");
       
    setEdgeForm('dl',false,false,'1em','1em',"");    
    setEdgeForm('dm',false,false,'1em','1em',"");    
    setEdgeForm('dr',false,false,'1em','1em',"");
  }
  
  function setEdgeForm(prefix,active,arrow,x,y,text) {
    document.nodeForm[prefix+'Active'].checked=active;
    document.nodeForm[prefix+'Arrow'].checked=arrow;
    document.nodeForm[prefix+'x'].value=x;
    document.nodeForm[prefix+'y'].value=y;
    document.nodeForm[prefix+'Text'].value=text; 
      
    showOne(active,document.getElementById(prefix+"Fields")); 
  }
  
  //call when edit is clicked on a div node
  function editNode(nodeId) {
    var node = document.getElementById(nodeId);
 	
 	blankForm();
 	
 	document.nodeForm.nodeId.value=node.id;
 	document.nodeForm.colSelect.value=node.style.left;
    document.nodeForm.rowSelect.value=node.style.top;
    document.nodeForm.widthSelect.value=node.style.width;
    document.nodeForm.heightSelect.value=node.style.height;
    
    var h3=node.getElementsByTagName("h3")[0];
    document.nodeForm.content.value = h3.innerHTML;
    
    var edges = node.getElementsByTagName('li');
    for (var i = 0; i < edges.length; i++)
   {
    var edge = edges[i];
    var arrow = edge.getElementsByTagName('samp').length > 0;
    
    var span = edge.getElementsByTagName('span');
    var text=null;
    if (span.length>0) {
		text=span[0].innerHTML;
    }
    
    var prefix=edge.className;    
    setEdgeForm(prefix,true,arrow,
    			edge.style.width,
    			edge.style.height,    			
    			text);    
   }
  }
  
  //call when delete is clicked on a div node
  function deleteNode(nodeId) {
    var diagram = document.getElementById("diagram");
    diagram.removeChild(document.getElementById(nodeId));    
    
    var editNode=document.getElementById(makeEditNodeName(nodeId));
    editNode.parentNode.removeChild(editNode);
    
    blankForm();        
    outputCode();
  }
  
  //send old diagram text into this method 
  function uploadDiagram() {
        var textArea = document.getElementById('source');
        var oldDiagram = textArea.value;
      
        var workspace = document.getElementById('workspace');
 		workspace.innerHTML=oldDiagram; 
 		
 		var diagram = document.getElementById("diagram");
 		
 		for (var i = 0; i < diagram.childNodes.length; i++)
        { 
    	  var box = diagram.childNodes[i];
    	  if (box.className!="hide") {    	      	  
 		  var editDelete = getEditDeleteNode(box); 		 		  
	      editDelete.style.top = box.style.top;	  						 
          editDelete.style.left = box.style.left;  
          }       
 		} 		
 						
 		textArea.value=oldDiagram;
 		 		  
  }
    
  
  //helper methods here
 
  var lastId;
  function getNewNodeID() {    
	    if (lastId==null) {
	     lastId=1;
	    } else {
	     lastId=lastId+1;
	    }	    
	    //id must start with a char
	    document.nodeForm.nodeId.value="i"+lastId;
	    return document.nodeForm.nodeId.value;	    	
  }
        
  function outputCode() {   	
 		var workspace = document.getElementById('workspace');
 		var textArea = document.getElementById('source');
 		
 		//remove the editing code that must remain private 		
 		var edParent = document.getElementById("edParent");
 		if (edParent!=null) { 		 
 		 var diagram = edParent.parentNode;
 		 diagram.removeChild(edParent);
 		  		 	 
 		 var sourceCode = workspace.innerHTML; 		
 		 sourceCode=sourceCode+"<!--HTTP://javanut.com/blogdraw-->";
 		 textArea.value = sourceCode;     
 		  		
 		 diagram.appendChild(edParent);
 		}
  }
  
  //TODO add checkbox for circular references
  
  function buildForm(diagramWidth, diagramHeight) {
                
        buildOptions("colSelect","c:",diagramWidth,2,0);
        buildOptions("rowSelect","r:",diagramHeight,2,0);

		buildOptions("widthSelect","w:",diagramWidth,3,0);
		buildOptions("heightSelect","h:",diagramHeight,2,0);

        buildOptions("ulx","x",diagramWidth,1,-.05);
        buildOptions("uly","y",diagramHeight,1,-.05);      
        buildOptions("umx","x",7,1,-.05);
        buildOptions("umy","y",diagramHeight,1,-.05);   
        buildOptions("urx","x",diagramWidth,1,-.05);
        buildOptions("ury","y",diagramHeight,1,-.05);
            
        buildOptions("mlx","x",diagramWidth,1,-.05);
        buildOptions("mly","y",3,1,-.05);    
        buildOptions("mrx","x",diagramWidth,1,-.05);
        buildOptions("mry","y",3,1,-.05);    
        
        buildOptions("dlx","x",diagramWidth,1,-.05);
        buildOptions("dly","y",diagramHeight,1,-.05);      
        buildOptions("dmx","x",7,1,-.05);
        buildOptions("dmy","y",diagramHeight,1,-.05);   
        buildOptions("drx","x",diagramWidth,1,-.05);
        buildOptions("dry","y",diagramHeight,1,-.05);            
   }
       
   function buildOptions(parent,prefix,count,def,delta) {
	    var select=document.getElementById(parent);		
	 	var r = 1;
	 	while(r<count) {
		  var option = document.createElement("option");
		  option.value=(r+delta)+"em";
		  var textNode = document.createTextNode(prefix+r);
	  	  option.appendChild(textNode); 	
		  select.appendChild(option);
		  r=r+1;	   	
	 	}			 	
	 	select.value=def+"em";	
   }
  
  function maxVal(a, b) {
  
   if ((a==null)||(a=="")) return b;
   if ((b==null)||(b=="")) return a;
   
   var aInt;
   var bInt;
   
   aInt = parseInt(a.substring(0,a.length-2));
   bInt = parseInt(b.substring(0,b.length-2));
      
   if (aInt>bInt) {
      return a;
    } else {
      return b;
    }  
  }
     
  function bottomVal(top, height) {
  var bottom = parseInt(top.substring(0,top.length-2));
  bottom = bottom + parseInt(height.substring(0,height.length-2));
  return bottom+"em";
  }   
         
  function nodeMarkup(box) {    
      box.innerHTML="";

	  box.style.top =  document.nodeForm.rowSelect.value;
      box.style.left =  document.nodeForm.colSelect.value;
      box.style.width = document.nodeForm.widthSelect.value;
      box.style.height = document.nodeForm.heightSelect.value;
      box.id = document.nodeForm.nodeId.value;
   	    
   	  //set the height of the diagram box to the greatest top
   	  var diagram = document.getElementById("diagram");
   	  diagram.style.height = maxVal( diagram.style.height,
   	  						bottomVal(box.style.top,box.style.height));
   	    	    
   	  //allow full html in content	  
	  var contentNode = document.createElement("h3");
	  contentNode.innerHTML=document.nodeForm.content.value;	     
	  box.appendChild(contentNode);   
	  	  
	  var edgesNode = document.createElement("ul");
	  	  		  
	  addEdge(edgesNode,'ul');
	  addEdge(edgesNode,'um');
	  addEdge(edgesNode,'ur');
	  addEdge(edgesNode,'mr');
	  addEdge(edgesNode,'ml');	  			  
	  addEdge(edgesNode,'dl');
	  addEdge(edgesNode,'dm');
	  addEdge(edgesNode,'dr');
	  //note: some browsers are having trouble with accepting an empty ul as well formed.
	  //to solve this it should not be added unless one of the edges were turned on!
	  if (edgesNode.childNodes.length>0) {
	   box.appendChild(edgesNode);		
	  }
  		 	 
	  var editDelete = getEditDeleteNode(box);	    	    
	  //here are the only values that can be changed.	
	  editDelete.style.top = box.style.top;	  						 
      editDelete.style.left = box.style.left;         			          	 	
  }
   
  function addEdge(edgesNode,prefix) {
  if (document.nodeForm[prefix+'Active'].checked) {
	     edgeMarkup(edgesNode,
	      document.nodeForm[prefix+'x'].value, 
	      document.nodeForm[prefix+'y'].value,prefix, 
	      document.nodeForm[prefix+'Text'].value,
	      document.nodeForm[prefix+'Arrow'].checked);	           
	  }	  	
  }     
  
  function edgeMarkup(el, width, height, className, content, arrow) {
  		var arrowNode = document.createElement("li");
  		arrowNode.className = className;
  		arrowNode.style.width = width;
  		arrowNode.style.height = height;
  		
  		var textNode;
  		
  		var sampNode = document.createElement("samp");
  		textNode = document.createTextNode(content);
  		sampNode.appendChild(textNode);
  		arrowNode.appendChild(sampNode);
  	  	  	  	
  	  	if (arrow) {
  		 var spanNode = document.createElement("span");  		
  		 textNode = document.createTextNode(content);
  		 spanNode.appendChild(textNode);
  		 arrowNode.appendChild(spanNode);  		
  		}
  		el.appendChild(arrowNode);     
  }
   
   function makeEditNodeName(nodeName) {
  	return nodeName+"ed";
  } 
   
  function getEditDeleteNode(box) {
      var editDeleteId = makeEditNodeName(box.id);
	  var editDelete = document.getElementById(editDeleteId);
	  if (editDelete==null) {
	  	editDelete = document.createElement("div");
	  	editDelete.id = editDeleteId;
	  	var anchorEdit=createAnchor(" Edit|","editNode('"+box.id+"')");
	  	//var space = document.createTextNode("|");
	    var anchorDelete=createAnchor("|Del","deleteNode('"+box.id+"')");
	    editDelete.appendChild(anchorEdit);
	    //editDelete.appendChild(space);
	    editDelete.appendChild(anchorDelete);
	  	editDelete.className="editDelete";
	  		  		 	  	
	  	editDelete.style.width='4em';
	    editDelete.style.height='1.2em';
	    
	    getEditDeleteParent(box).appendChild(editDelete);	  		  	
	  } 
	  return editDelete;
  } 
   
  function getEditDeleteParent(box) {  
   var edParent = document.getElementById("edParent");
   if (edParent==null) {
      edParent = document.createElement("div");
      edParent.id = "edParent";      
      edParent.className = "hide";
      box.parentNode.appendChild(edParent);  
   }
   return edParent;  
  } 
   
  function createAnchor(label,operation) {
   var anchor = document.createElement("a");
   //for firefox
   anchor.setAttribute("onclick",operation);//a must for onclick
   //for ie
   anchor.href="javascript:"+operation;
   var text = document.createTextNode(label);
   anchor.appendChild(text);
   return anchor;
  }