Merge lp:~elof-bigestans/lenasys/elofsbranch into lp:lenasys

[Elof Bigestans]

Fixed bugs pertaining to ErModeller

[lp:~elof-bigestans/lenasys/elofsbranch]

21. By Elof Bigestans <email address hidden> on 2013-04-05

 * Fixed bug #1164524 (in LIndex.html)

Unmerged revisions

=== modified file 'CodeViewer/Lindex.html'
--- CodeViewer/Lindex.html	2013-04-03 08:20:14 +0000
+++ CodeViewer/Lindex.html	2013-04-05 07:55:26 +0000
@@ -76,17 +76,17 @@
 
         <h2 id="DOMExamples">DOM Examples</h2>
 				<div class="container">
-					<a href='DOMExample1/DOMExample1.php'>DOM Example 1: Initiation and simple navigation</a><br>	
-					<a href='DOMExample1b/DOMExample1b.php'>DOM Example 2: Attribute navigation</a><br>	
-					<a href='DOMExample1c/DOMExample1c.php'>DOM Example 3: Advanced navigation</a><br>	
-					<a href='DOMExample1d/DOMExample1d.php'>DOM Example 4: Advanced navigation</a><br>	
-					<a href='DOMExample2/DOMExample2.php'>DOM Example 5: Validation #1</a><br>	
-					<a href='DOMExample2b/DOMExample2b.php'>DOM Example 6: Validation #2</a><br>	
-					<a href='DOMExample2c/DOMExample2c.php'>DOM Example 7: Validation #3</a><br>	
-					<a href='DOMExample2d/DOMExample2d.php'>DOM Example 8: Validation #4</a><br>	
-					<a href='DOMExample2e/DOMExample2e.php'>DOM Example 9: Validation #5 </a><br>	
-					<a href='DOMExample3/DOMExample3.php'>DOM Example 10: XPATH #1</a><br>	
-					<a href='DOMExample3b/DOMExample3b.php'>DOM Example 11: XPATH #2 Context Nodes</a><br>
+					<a href='DomExample1/DomExample1.php'>DOM Example 1: Initiation and simple navigation</a><br>	
+					<a href='DomExample1b/DomExample1b.php'>DOM Example 2: Attribute navigation</a><br>	
+					<a href='DomExample1c/DomExample1c.php'>DOM Example 3: Advanced navigation</a><br>	
+					<a href='DomExample1d/DomExample1d.php'>DOM Example 4: Advanced navigation</a><br>	
+					<a href='DomExample2/DomExample2.php'>DOM Example 5: Validation #1</a><br>	
+					<a href='DomExample2b/DomExample2b.php'>DOM Example 6: Validation #2</a><br>	
+					<a href='DomExample2c/DomExample2c.php'>DOM Example 7: Validation #3</a><br>	
+					<a href='DomExample2d/DomExample2d.php'>DOM Example 8: Validation #4</a><br>	
+					<a href='DomExample2e/DomExample2e.php'>DOM Example 9: Validation #5 </a><br>	
+					<a href='DomExample3/DomExample3.php'>DOM Example 10: XPATH #1</a><br>	
+					<a href='DomExample3b/DomExample3b.php'>DOM Example 11: XPATH #2 Context Nodes</a><br>
 	    	</div>
 
         <h2 id="XSLTExamples">XSLT Examples</h2>

=== modified file 'ErModeller/canvas.css'
--- ErModeller/canvas.css	2013-04-04 08:48:09 +0000
+++ ErModeller/canvas.css	2013-04-05 07:55:26 +0000
@@ -1,3 +1,13 @@
-#a			{border:2px solid black;}
-#infobox	{padding:4px;}
-#background		{border:2px solid black;background-color:#fed; width:300px;height:450px;}
+#a {
+	border:2px solid black;
+}
+
+#infobox {
+	padding:4px;
+}
+
+#background {
+	border:2px solid black;
+	background-color:#fed;
+	width:300px;height:450px;
+}
\ No newline at end of file

=== modified file 'ErModeller/canvas.js'
--- ErModeller/canvas.js	2013-04-03 09:15:09 +0000
+++ ErModeller/canvas.js	2013-04-05 07:55:26 +0000
@@ -1,604 +1,612 @@
-		var startx = 0;
-		var starty = 0;
-		var deltax = 0;
-		var deltay = 0;	
-		var gridsize = 20;
-		
-		// Multi-select move offset
-		var offsx = 0;
-		var offsy = 0;
-		// Drawing Globals -- For while in transit drawing
-		var drawlinesx;
-		var drawlinesy;
-		var drawlinedx;
-		var drawlinedy;
-		var drawlinekind = 0;
-		// List of objects
-		// List of identifiers 
-		// List of selected object identifiers 
-		// The context object
-		var Objects = new Array();
-		var Selected = new Array();
-		var Identifiers = new Array();
-		var ContextObj;
-		// Mouse Down Result
-		var downRes;
-		// User Interface Mode Variables
-		var multiselect = 0;
-		var dragsensitivity = 12;
-		var sidetol = 12;
-		var printstr;
-
-		/*
-		User interface callbacks
-		*/
-		function handler_mouseup()
-		{
-			if(clickstate == 1) {
-				// Either select on/off for multi or single select
-				if(multiselect) {
-					if(Selected[downRes.objid]) {
-						Selected[downRes.objid] = false;
-					} else {
-						Selected[downRes.objid] = true;
-					}
-				} else {
-					if(ContextObj == downRes.objid) {
-							ContextObj = "";
-					} else {
-						ContextObj = downRes.objid;
-					}
-				}
-			} else if(clickstate == 8) {
-				// Draw Attribute Line
-				upRes=mouseover(gridx,gridy);
-				if(upRes.code != "None") {
-					obj = Objects[downRes.objid];
-					if(upRes.typ == "ERAttribute" || upRes.typ == "Entity" || upRes.typ == "ERRel") {
-						obj.DrawtoID = upRes.objid;
-						obj.DrawfromSide = downRes.side;
-						if(upRes.side != "None") {
-							obj.DrawtoSide = upRes.side;
-							obj.DrawtoPerc = upRes.sideperc;
-						} else {
-							upobj = Objects[downRes.objid];
-							var sid = 1;
-							var	perco = 0.5;
-							var x1g = Math.abs(upRes.x1 - gridx);
-							var x2g = Math.abs(upRes.x2 - gridx);
-							var y1g = Math.abs(upRes.y1 - gridy);
-							var y2g = Math.abs(upRes.y2 - gridy);
-							if(x1g <= x2g && x1g <= y1g && x1g <= y2g){
-								sid = 1;
-								perco = makesideperc(gridy, upRes.y1, upRes.y2);
-							} else if(x2g <= x1g && x2g <= y1g && x2g <= y2g){
-								sid = 3;
-								perco = makesideperc(gridy, upRes.y1, upRes.y2);
-							} else if(y1g <= x1g && y1g <= x2g && y1g <= y2g){
-								sid = 4;
-								perco = makesideperc(gridx, upRes.x1, upRes.x2);
-							} else if(y2g <= x1g && y2g <= x2g && y2g <= y1g){
-								sid = 2;
-								perco = makesideperc(gridx, upRes.x1, upRes.x2);
-							}
-							obj.DrawtoSide = sid;
-							obj.DrawtoPerc = perco;
-						}
-						if(upRes.typ == "ERAttribute" || upRes.typ == "ERRel") obj.DrawtoPerc = 0.5;
-					}
-				}
-			} else if(clickstate == 9) {
-				// Draw Relationship line
-				upRes = mouseover(gridx, gridy);
-				if(upRes.code != "None") {
-					obj = Objects[downRes.objid];
-					if(upRes.side != "None") {
-						if(obj.DrawtoID == "None") {
-							obj.DrawtoID = upRes.objid;
-							obj.DrawtoSide = upRes.side;
-							obj.DrawtoPerc = upRes.sideperc;
-							obj.DrawfromSide = downRes.side;
-						} else {
-							obj.DrawtoIDDest = upRes.objid;
-							obj.DrawtoSideDest = upRes.side;
-							obj.DrawtoPercDest = upRes.sideperc;
-							obj.DrawfromSideDest = downRes.side;										
-						}
-					} else {
-						upobj = Objects[downRes.objid];
-						var sid = 1;
-						var	perco = 0.5;
-						var x1g = Math.abs(upRes.x1-gridx);
-						var x2g = Math.abs(upRes.x2-gridx);
-						var y1g = Math.abs(upRes.y1-gridy);
-						var y2g = Math.abs(upRes.y2-gridy);
-						if(x1g <= x2g && x1g <= y1g && x1g <= y2g) {
-							sid = 1;
-							perco = makesideperc(gridy, upRes.y1, upRes.y2);
-						} else if(x2g <= x1g && x2g <= y1g && x2g <= y2g) {
-							sid = 3;
-							perco = makesideperc(gridy, upRes.y1, upRes.y2);
-						} else if(y1g <= x1g && y1g <= x2g && y1g <= y2g) {
-							sid = 4;
-							perco = makesideperc(gridx, upRes.x1, upRes.x2);
-						} else if(y2g <= x1g && y2g <= x2g && y2g <= y1g){
-							sid = 2;
-							perco = makesideperc(gridx, upRes.x1, upRes.x2);
-						}									
-						if(obj.DrawtoID == "None") {
-							obj.DrawtoID = upRes.objid;
-							obj.DrawtoSide = sid;
-							obj.DrawtoPerc = perco;
-							obj.DrawfromSide = downRes.side;										
-						} else {
-							obj.DrawtoIDDest = upRes.objid;
-							obj.DrawtoSideDest = sid;
-							obj.DrawtoPercDest = perco;
-							obj.DrawfromSideDest = downRes.side;										
-						}
-					}								
-				}
-			}
-			clickstate = 0;
-			cpsel = 0;
-			drawlinekind = 0;		
-		}
-		/*
-		 *	Mouse down state
-		 */
-		function handler_mousedown() {
-			clickstate = 1;
-			downRes = mouseover(gridx, gridy);
-			startx = gridx;
-			starty = gridy;	
-		}
-		
-		/*
-		 *	Mouse move
-		 */
-		function handler_mousemove(cx, cy) {
+var startx = 0;
+var starty = 0;
+var deltax = 0;
+var deltay = 0;	
+var gridsize = 20;
+
+// Multi-select move offset
+var offsx = 0;
+var offsy = 0;
+
+// Drawing Globals -- For while in transit drawing
+var drawlinesx;
+var drawlinesy;
+var drawlinedx;
+var drawlinedy;
+var drawlinekind = 0;
+
+// List of objects
+var Objects = new Array();
+
+// List of identifiers 
+var Selected = new Array();
+
+// List of selected object identifiers 
+var Identifiers = new Array();
+
+// The context object
+var ContextObj;
+
+// Mouse Down Result
+var downRes;
+// User Interface Mode Variables
+var multiselect = 0;
+var dragsensitivity = 12;
+var sidetol = 12;
+var printstr;
+
+/*
+ *  User interface callbacks
+ */
+function handler_mouseup() {
+	if(clickstate == 1) {
+
+		// Either select on/off for multi or single select
+		if(multiselect) {
+			if(Selected[downRes.objid]) {
+				Selected[downRes.objid] = false;
+			} else {
+				Selected[downRes.objid] = true;
+			}
+		} else {
+			if(ContextObj == downRes.objid) {
+					ContextObj = "";
+			} else {
+				ContextObj = downRes.objid;
+			}
+		}
+	} else if(clickstate == 8) {
+
+		// Draw Attribute Line
+		upRes=mouseover(gridx,gridy);
+		if(upRes.code != "None") {
+			obj = Objects[downRes.objid];
+			if(upRes.typ == "ERAttribute" || upRes.typ == "Entity" || upRes.typ == "ERRel") {
+				obj.DrawtoID = upRes.objid;
+				obj.DrawfromSide = downRes.side;
+				if(upRes.side != "None") {
+					obj.DrawtoSide = upRes.side;
+					obj.DrawtoPerc = upRes.sideperc;
+				} else {
+					upobj = Objects[downRes.objid];
+					var sid = 1;
+					var	perco = 0.5;
+					var x1g = Math.abs(upRes.x1 - gridx);
+					var x2g = Math.abs(upRes.x2 - gridx);
+					var y1g = Math.abs(upRes.y1 - gridy);
+					var y2g = Math.abs(upRes.y2 - gridy);
+					if(x1g <= x2g && x1g <= y1g && x1g <= y2g){
+						sid = 1;
+						perco = makesideperc(gridy, upRes.y1, upRes.y2);
+					} else if(x2g <= x1g && x2g <= y1g && x2g <= y2g){
+						sid = 3;
+						perco = makesideperc(gridy, upRes.y1, upRes.y2);
+					} else if(y1g <= x1g && y1g <= x2g && y1g <= y2g){
+						sid = 4;
+						perco = makesideperc(gridx, upRes.x1, upRes.x2);
+					} else if(y2g <= x1g && y2g <= x2g && y2g <= y1g){
+						sid = 2;
+						perco = makesideperc(gridx, upRes.x1, upRes.x2);
+					}
+					obj.DrawtoSide = sid;
+					obj.DrawtoPerc = perco;
+				}
+				if(upRes.typ == "ERAttribute" || upRes.typ == "ERRel") obj.DrawtoPerc = 0.5;
+			}
+		}
+	} else if(clickstate == 9) {
+
+		// Draw Relationship line
+		upRes = mouseover(gridx, gridy);
+		if(upRes.code != "None") {
+			obj = Objects[downRes.objid];
+			if(upRes.side != "None") {
+				if(obj.DrawtoID == "None") {
+					obj.DrawtoID = upRes.objid;
+					obj.DrawtoSide = upRes.side;
+					obj.DrawtoPerc = upRes.sideperc;
+					obj.DrawfromSide = downRes.side;
+				} else {
+					obj.DrawtoIDDest = upRes.objid;
+					obj.DrawtoSideDest = upRes.side;
+					obj.DrawtoPercDest = upRes.sideperc;
+					obj.DrawfromSideDest = downRes.side;										
+				}
+			} else {
+				upobj = Objects[downRes.objid];
+				var sid = 1;
+				var	perco = 0.5;
+				var x1g = Math.abs(upRes.x1-gridx);
+				var x2g = Math.abs(upRes.x2-gridx);
+				var y1g = Math.abs(upRes.y1-gridy);
+				var y2g = Math.abs(upRes.y2-gridy);
+				if(x1g <= x2g && x1g <= y1g && x1g <= y2g) {
+					sid = 1;
+					perco = makesideperc(gridy, upRes.y1, upRes.y2);
+				} else if(x2g <= x1g && x2g <= y1g && x2g <= y2g) {
+					sid = 3;
+					perco = makesideperc(gridy, upRes.y1, upRes.y2);
+				} else if(y1g <= x1g && y1g <= x2g && y1g <= y2g) {
+					sid = 4;
+					perco = makesideperc(gridx, upRes.x1, upRes.x2);
+				} else if(y2g <= x1g && y2g <= x2g && y2g <= y1g){
+					sid = 2;
+					perco = makesideperc(gridx, upRes.x1, upRes.x2);
+				}									
+				if(obj.DrawtoID == "None") {
+					obj.DrawtoID = upRes.objid;
+					obj.DrawtoSide = sid;
+					obj.DrawtoPerc = perco;
+					obj.DrawfromSide = downRes.side;										
+				} else {
+					obj.DrawtoIDDest = upRes.objid;
+					obj.DrawtoSideDest = sid;
+					obj.DrawtoPercDest = perco;
+					obj.DrawfromSideDest = downRes.side;										
+				}
+			}								
+		}
+	}
+	clickstate = 0;
+	cpsel = 0;
+	drawlinekind = 0;		
+}
+/*
+ *	Mouse down state
+ */
+function handler_mousedown() {
+	clickstate = 1;
+	downRes = mouseover(gridx, gridy);
+	startx = gridx;
+	starty = gridy;	
+}
+
+/*
+ *	Mouse move
+ */
+function handler_mousemove(cx, cy) {
 //			gridx=Math.round((cx-(gridsize/2.0))/gridsize)*gridsize;
 //			gridy=Math.round((cy-(gridsize/2.0))/gridsize)*gridsize;				
-			gridx = cx;
-			gridy = cy;
-			deltax = startx - gridx;
-			deltay = starty - gridy;		
-			// We start drag mode
-			if((distance(gridx, gridy, startx, starty) > dragsensitivity) && clickstate == 1) {
-				clickstate = 2;
-			}
-			// We are in drag mode				
-			if(clickstate == 2) {																										
-				// Single Object Move - If Not Selected, Or if Selected and Center Area Is Dragged
-				if((downRes.typ == "Entity" || downRes.typ == "ERAttribute" || downRes.typ == "ERRel") && (downRes.code == "NonSel" || (downRes.code == "Cont" && downRes.side == "None") || (downRes.code == "ContDraw" && downRes.side == "None"))) {
-					clickstate = 3;
-				}
-				// Single Object Scale Left
-				if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "1")) {
-					clickstate=4;
-				}
-				// Single Object Scale Bottom
-				if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "2")) {
-					clickstate=5;
-				}
-				// Single Object Scale Right
-				if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "3")) {
-					clickstate=6;
-				}
-				// Single Object Scale Top
-				if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "4")) {
-					clickstate=7;
-				}
-				if(downRes.typ == "ERAttribute" && downRes.code == "ContDraw" && downRes.side != "None") {													
-					clickstate=8; // Attribute Connection Draw
-					drawlinekind=1;	// Tell drawing engine to draw attribute line symbol
-					if(downRes.side == "1") {
-						drawlinesx = downRes.x1; // Initiate start parameters for line drawing left side
-						drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
-					} else if(downRes.side == "2") {
-						drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
-						drawlinesy = downRes.y2;
-					} else if(downRes.side == "3") {
-						drawlinesx = downRes.x2; // Initiate start parameters for line drawing left side
-						drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
-					} else if(downRes.side == "4") {
-						drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
-						drawlinesy = downRes.y1;
-					}
-					drawlinedx = drawlinesx;
-					drawlinedy = drawlinesy;	
-				}
-				if(downRes.typ == "ERRel" && downRes.code == "ContDraw" && downRes.side != "None") {						
-					var obj=Objects[downRes.objid];													
-					if(downRes.side != obj.DrawfromSide && downRes.side != obj.DrawfromSideDest) {
-						clickstate = 9; // Attribute Connection Draw
-						drawlinekind = 1; // Tell drawing engine to draw relation line symbol 
-						if(downRes.side == "1") {
-							drawlinesx = downRes.x1; // Initiate start parameters for line drawing left side
-							drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
-						} else if(downRes.side == "2") {
-							drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
-							drawlinesy = downRes.y2;
-						} else if(downRes.side == "3") {
-							drawlinesx = downRes.x2; // Initiate start parameters for line drawing left side
-							drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
-						} else if(downRes.side == "4") {
-							drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
-							drawlinesy = downRes.y1;
-						}
-						drawlinedx = drawlinesx;
-						drawlinedy = drawlinesy;
-					}
-				}				
-			}
-			if(clickstate > 2) {
-				var obj = Objects[downRes.objid];
-			}
-			if(clickstate == 3) { // We are in single rectangular object move 
-				obj.x1 = downRes.x1 - deltax;
-				obj.y1 = downRes.y1 - deltay;
-				obj.x2 = downRes.x2 - deltax;
-				obj.y2 = downRes.y2 - deltay;
-			} else if(clickstate == 4) { // We are in single rectangular object scale left 
-				if((obj.x2 - downRes.x1 + deltax) > 60) obj.x1 = downRes.x1 - deltax;
-			} else if(clickstate == 5) { // We are in single rectangular object scale bottom
-				if((downRes.y2 - obj.y1 - deltay) > 40) obj.y2 = downRes.y2 - deltay;
-			} else if(clickstate==6) {	// We are in single rectangular object scale right
-				if((downRes.x2 - obj.x1 - deltax) > 60) obj.x2 = downRes.x2 - deltax;
-			} else if(clickstate == 7) { // We are in single rectangular object scale top
-				if((obj.y2 - downRes.y1 + deltay) > 40) obj.y1 = downRes.y1 - deltay;
-			} else if(clickstate == 8 || clickstate == 9) { // We are in straight connective line drawing mode 
-				drawlinedx = gridx;
-				drawlinedy = gridy;
-			}
-		}
-		
-		/*
-		 *	Call-forward for mouse-over event
-		 */
-		function mouseover(x, y) {
-			// Code of touch, and if available object id and id of side of object that was touched
-			// Tolerances included as constant
-			var obj_code = "None";
-			var obj_id = "None";
-			var obj_sidentifier =" None";
-			var obj_sideperc = 0;
-			var obj_centerdist = 0;
-			var obj_type = "None";
-			var obj_x1 = 0; 
-			var obj_y1 = 0; 
-			var obj_x2 = 0; 
-			var obj_y2 = 0;
-			var Cont;
-			var found = 0;
-			var side;
-			for(j = 0; j < Identifiers.length; j++) {
-				var objid = Identifiers[j];
-				var obj = Objects[objid];				
-				var Sel = Selected[objid];
-				if(ContextObj == objid) {
-					Cont = 1;
-				} else {
-					Cont = 0;
-				}
-				// Compute coordinates including offset
-				if(obj.type == "Entity" || obj.type == "ERAttribute" || obj.type == "ERRel") {										
-					x1 = obj.x1 + offsx;
-					y1 = obj.y1 + offsy;
-					x2 = obj.x2 + offsx;
-					y2 = obj.y2 + offsy;
-					rx = (x2 - x1) * 0.5;
-					ry = (y2 - y1) * 0.5;
-				}
-				found = 0;
-				// For each kind of clickable object, check if we are inside object and if so assign variables
-				// Any general properties for all object types are set when "found" is true
-				if(obj.type == "Entity") {				
-					if(x > (x1 - sidetol) && y > (y1 - sidetol ) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
-						obj_code = "NonSel";
-						if(Sel) {
-							obj_code = "Sel";
-						}
-						if(Cont) {
-							obj_code = "Cont";
-						}
-						side = computeside(x, y, x1, y1, x2, y2, sidetol);
-						obj_sidentifier = side.side;
-						obj_sideperc = side.perc;
-						obj_centerdist = side.dist;					
-						found = 1;																	
-					}
-				} else if(obj.type=="ERAttribute") {
-						if(x > (x1 - sidetol) && y > (y1 - sidetol) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
-							obj_code = "NonSel";
-							if(Sel) {
-								obj_code="Sel";
-							}							
-							if(Cont) {
-								if(obj.DrawtoID == "None") {
-									obj_code = "ContDraw";											
-								} else {
-									obj_code = "Cont";
-								}
-							} 
-							side = computeside(x, y, x1, y1, x2, y2, sidetol);
-							obj_sidentifier = side.side;
-							obj_sideperc = side.perc;
-							obj_centerdist = side.dist;
-							found = 1;
-						}
-				} else if(obj.type == "ERRel") {
-					if(x > (x1 - sidetol) && y > (y1 - sidetol) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
-						xk = x - x1;
-						// Colision detection against diamond
-						var inside = 0;																		
-						if(xk <= rx) {
-							if(y > (y1 + ry - xk - sidetol) && y < (y1 + ry + xk + sidetol)) {
-								inside = 1;
-							}
-						} else {
-							if(y > (y1 - rx + xk - sidetol) && y < ( y2 + rx - xk + sidetol)) {
-								inside = 1;
-							}
-						}
-						if(inside) {	
-							if((x > (x1 - sidetol)) && (x < (x1 + sidetol)) && (y > (y1 + ry - sidetol)) && (y < (y1 + ry + sidetol))) {
-								obj_sidentifier = 1;
-							}
-							if((x > (x1 + rx - sidetol)) && (x < (x1 + rx + sidetol)) && (y > (y2 - sidetol)) && (y < (y2 + sidetol))) {
-								obj_sidentifier = 2;
-							}
-							if((x > (x2 - sidetol)) && (x < (x2 + sidetol)) && (y > (y1 + ry - sidetol)) && (y < (y1 + ry + sidetol))) {
-								obj_sidentifier = 3;
-							}
-							if((x > (x1 + rx - sidetol)) && (x < (x1 + rx + sidetol)) && (y > (y1 - sidetol)) && (y < (y1 + sidetol))) {
-								obj_sidentifier = 4;
-							}
-							obj_code = "NonSel";
-							if(Sel) {
-								obj_code = "Sel";
-							}
-							if(Cont) {
-								if(obj.DrawtoID == "None"){
-									obj_code = "ContDraw";											
-								} else if(obj.DrawtoIDDest == "None") {
-									obj_code = "ContDraw";											
-								} else {
-									obj_code = "Cont";
-								}
-							} 
-							obj_sideperc = 0.5;
-							found = 1;
-						}
-					}			
-				}
-				if(found == 1) {
-					// Save coordinates at time of click									
-					obj_x1 = x1;
-					obj_y1 = y1;
-					obj_x2 = x2;
-					obj_y2 = y2;						
-					obj_id = objid;
-					obj_type = obj.type;
-					printstr=obj_id + " " + obj_sidentifier + " " + obj_sideperc;
-				}
-			}						
-			return {
-				objid:obj_id,
-				code:obj_code,
-				side:obj_sidentifier,
-				sideperc:obj_sideperc,
-				centerdist:obj_centerdist,
-				typ:obj_type,
-				x1:obj_x1,
-				y1:obj_y1,
-				x2:obj_x2,
-				y2:obj_y2
-			}
-		}
-		
-		/*
-		 *
-		 */
-		function importdata() {				
-			for(i = 0; i < 7; i++) {
-				if(i == 0) {
-					obj = jQuery.parseJSON('{"type":"ERAttribute","id":"ATT1","kind":"Multiple","name":"Addressfosoppooo","x1":220,"y1":100,"x2":300,"y2":140, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"None", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":""}');
-				}
-				if(i == 1) {
-					obj = jQuery.parseJSON('{"type":"Entity","id":"ENT2","kind":"Weak","name":"Carsmashoepppoloo","x1":100,"y1":160,"x2":220,"y2":220}');
-				}
-				if(i == 2) {
-					obj = jQuery.parseJSON('{"type":"ERAttribute","id":"ATT3","kind":"Key","name":"SSNFooomesPoo","x1":160,"y1":260,"x2":260,"y2":300, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"None", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":""}');
-				}
-				if(i == 3) {
-					obj = jQuery.parseJSON('{"type":"Entity","id":"ENT4","kind":"Strong","name":"Trailerfpdddpeoooooe","x1":320,"y1":260,"x2":420,"y2":320}');
-				}
-				if(i == 4) {
-					obj = jQuery.parseJSON('{"type":"Entity","id":"ENT5","kind":"Strong","name":"Grail","x1":120,"y1":440,"x2":220,"y2":480}');
-				}
-				if(i == 5) {
-					obj = jQuery.parseJSON('{"type":"ERRel","id":"REL6","kind":"Strong","name":"FGFool","x1":460,"y1":160,"x2":520,"y2":220, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Fumo", "DrawtoXoffs":"20", "DrawtoYoffs":"50", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Luma", "DrawtoDestXoffs":"0", "DrawtoDestYoffs":"-50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
-				}
-				if(i == 6) {
-					obj = jQuery.parseJSON('{"type":"ERRel","id":"REL7","kind":"Weak","name":"PODrool","x1":360,"y1":360,"x2":420,"y2":420, "DrawtoID":"None",  "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Kumo", "DrawtoXoffs":"60", "DrawtoYoffs":"70", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Zuuma", "DrawtoDestXoffs":"40", "DrawtoDestYoffs":"50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
-				}
-				objid = obj.id;
-				Objects[objid] = obj;
-				Identifiers.push(objid);
-			}
-		}
-		
-		/* 
-		 * 	prepareobj
-		 * 	Prepares all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
-		 * 	Ofss in prepare are not finished.
-		 */
-		function prepareobj(obji) {
-			var fromobj = Objects[obji];
-			// Attributes are prepared by re-pointing the DrawX1, DrawY1, DrawX2 and DrawY2 variables and Relationships are prepared by re-pointing DrawX1-DrawX4 and DrawY1-DrawY4
-			if((fromobj.type == "ERAttribute" || fromobj.type == "ERRel") && fromobj.DrawtoID != "None") {									
-				var toid = fromobj.DrawtoID;
-				var toobj = Objects[toid];
-				var sidek;
-				if(fromobj.DrawtoIDDest != "None" && fromobj.DrawtoIDDest != undefined) {
-					var toiddest = fromobj.DrawtoIDDest;
-					var toobjdest = Objects[toiddest];						
-					sidek = makeside(fromobj.DrawfromSideDest, fromobj.x1, fromobj.y1, fromobj.x2, fromobj.y2, 0.5);
-					fromobj.DrawX3 = sidek.x;
-					fromobj.DrawY3 = sidek.y;
-					sidek = makeside(fromobj.DrawtoSideDest, toobjdest.x1, toobjdest.y1, toobjdest.x2, toobjdest.y2, fromobj.DrawtoPercDest);
-					fromobj.DrawX4 = sidek.x;
-					fromobj.DrawY4 = sidek.y;
-				}
-				//printstr=fromobj.DrawfromSide+" "+fromobj.x1+" "+fromobj.y1+" "+fromobj.x2+" "+fromobj.y2+" :: "+fromobj.DrawtoSide+" "+toobj.x1+" "+toobj.y1+" "+toobj.x2+" "+toobj.y2+" "+fromobj.DrawtoPerc;				
-				sidek = makeside(fromobj.DrawfromSide, fromobj.x1, fromobj.y1, fromobj.x2, fromobj.y2, 0.5);
-				fromobj.DrawX1 = sidek.x;
-				fromobj.DrawY1 = sidek.y;				
-				sidek = makeside(fromobj.DrawtoSide, toobj.x1, toobj.y1, toobj.x2, toobj.y2, fromobj.DrawtoPerc);
-				fromobj.DrawX2 = sidek.x; 
-				fromobj.DrawY2 = sidek.y;						
-			}
-		}
-		
-		/*
-		 * 	Drawobj
-		 * 	Draws all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
-		 */
-		function drawobj(obji) {
-			var obj = Objects[obji];
-			var Sel = Selected[obji];
-			if(ContextObj == obji) {
-				Cont = 1;
-			} else {
-				Cont = 0;
-			}
-			context.strokeStyle = '#000';
-			context.lineWidth = 2.0;
-			// Compute coordinates including offset
-			if(obj.type == "Entity" || obj.type == "ERAttribute" || obj.type == "ERRel") {									
-				x1 = obj.x1 + offsx;
-				y1 = obj.y1 + offsy;
-				x2 = obj.x2 + offsx;
-				y2 = obj.y2 + offsy;
-				rx = (x2 - x1) * 0.5;
-				ry = (y2 - y1) * 0.5;
-			}
-			if(obj.type == "Entity") {				
-				//Draw Local Graphic
-				drawrect(x1, y1, x2, y2, "#000");
-				if(obj.kind == "Weak") {
-					drawrect(x1 + 5, y1 + 5, x2 - 5, y2 - 5, "#000");
-					cliptext(x1 + 5, y1 + 5, x2 - 5, y2 - 5, obj.name, "20px Calibri", "center", 8, 6, "#000", 1, 0);		
-
-				} else {
-					cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 1, 0);						
-				}
-				// Draw Select Marker
-				if(Sel || Cont) {
-					fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#5f8");								
-				}
-			} else if(obj.type == "ERAttribute") {
-				drawellipse(x1, y1, x2, y2);
-				if(obj.kind == "Key") {
-					cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 2, 1);						
-				} else {
-					cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 2, 0);												
-				}
-				if(obj.DrawtoID != "None") {
-					drawline(obj.DrawX1, obj.DrawY1, obj.DrawX2, obj.DrawY2, "#000", 2.0);
-				}
-				// Draw Select Marker
-				if(Cont && obj.DrawtoID == "None") {
-					fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#fa2");
-				} else if(Sel || (Cont && obj.DrawtoID != "None")) {
-					fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#5f8");
-				}
-			} else if(obj.type == "ERRel") {
-				if(obj.DrawtoID != "None") {
-					drawline(obj.DrawX1, obj.DrawY1, obj.DrawX2, obj.DrawY2, "#000", 2.0);
-					drawcardinality(obj.DrawX2, obj.DrawY2, obj.DrawtoSide, obj.DrawtoCard, obj.DrawtoXoffsCard, obj.DrawtoYoffsCard, "20px Calibri", 20, 1, "#0a0");
-					drawcardinality(obj.DrawX2, obj.DrawY2, obj.DrawtoSide, obj.DrawtoRole, obj.DrawtoXoffsRole, obj.DrawtoYoffsRole, "20px Calibri", 20, 2, "#0a0");
-//					function drawcardinality(x,y,side,tex,xoffs,yoffs,font,baseline,sign,color)
-//					if(i==5) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL6","kind":"Strong","name":"FGFool","x1":460,"y1":160,"x2":520,"y2":220, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Fumo", "DrawtoXoffsCard":"20", "DrawtoYoffsCard":"50","DrawtoXoffsRole":"20", "DrawtoYoffsRole":"-50", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"1", "DrawtoDestRole":"Luma", "DrawtoDestXoffsCard":"0", "DrawtoDestYoffsCard":"-50","DrawtoDestXoffsRole":"0", "DrawtoDestYoffsRole":"-50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
-//					if(i==6) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL7","kind":"Weak","name":"PODrool","x1":360,"y1":360,"x2":420,"y2":420, "DrawtoID":"None",  "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"1", "DrawtoRole":"Kumo", "DrawtoXoffsCard":"60", "DrawtoYoffsCard":"70", "DrawtoXoffsCard":"80", "DrawtoYoffsCard":"-70", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Zuuma", "DrawtoDestXoffsCard":"40", "DrawtoDestYoffsCard":"50", "DrawtoDestXoffsRole":"40", "DrawtoDestYoffsRole":"50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
-				}
-				if(obj.DrawtoIDDest != "None") {
-					drawline(obj.DrawX3, obj.DrawY3, obj.DrawX4, obj.DrawY4, "#000", 2.0);
-				}
-				if(obj.kind == "Weak") {
-					drawdiamond(x1 - 4, y1 - 4, x2 + 4, y2 + 4);
-					drawdiamond(x1 + 4, y1 + 4, x2 - 4, y2 - 4);
-					cliptext(x1 + 8, y1 + 8, x2 - 8, y2 - 8, obj.name, "20px Calibri", "center", 8, 6, "#000", 3, 0);												
-				} else {
-					drawdiamond(x1, y1, x2, y2, 0);
-					cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 3, 0);												
-				}
-				// Draw Select Markers
-				if(Sel || (Cont && obj.DrawtoID != "None" && obj.DrawtoIDDest != "None")) {
-					fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#5f8");
-				} else if(Cont) {
-					if(obj.DrawfromSide != 1 && obj.DrawfromSideDest != 1) {
-						point(x1, y1 + ry, "#fa2");
-					}
-					if(obj.DrawfromSide != 2 && obj.DrawfromSideDest != 2) {
-						point(x1 + rx, y2, "#fa2");
-					}
-					if(obj.DrawfromSide != 3 && obj.DrawfromSideDest != 3) {
-						point(x2, y1 + ry, "#fa2");
-					}
-					if(obj.DrawfromSide != 4 && obj.DrawfromSideDest != 4) {
-						point(x1 + rx, y1, "#fa2");
-					}
-				}
-			}
-		}
-		importdata();
-		
-		/*
-		 *
-		 */
-		function foo() {
-			context.clearRect(0, 0, 600, 600);
+	gridx = cx;
+	gridy = cy;
+	deltax = startx - gridx;
+	deltay = starty - gridy;		
+	// We start drag mode
+	if((distance(gridx, gridy, startx, starty) > dragsensitivity) && clickstate == 1) {
+		clickstate = 2;
+	}
+	// We are in drag mode				
+	if(clickstate == 2) {																										
+		// Single Object Move - If Not Selected, Or if Selected and Center Area Is Dragged
+		if((downRes.typ == "Entity" || downRes.typ == "ERAttribute" || downRes.typ == "ERRel") && (downRes.code == "NonSel" || (downRes.code == "Cont" && downRes.side == "None") || (downRes.code == "ContDraw" && downRes.side == "None"))) {
+			clickstate = 3;
+		}
+		// Single Object Scale Left
+		if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "1")) {
+			clickstate=4;
+		}
+		// Single Object Scale Bottom
+		if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "2")) {
+			clickstate=5;
+		}
+		// Single Object Scale Right
+		if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "3")) {
+			clickstate=6;
+		}
+		// Single Object Scale Top
+		if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "4")) {
+			clickstate=7;
+		}
+		if(downRes.typ == "ERAttribute" && downRes.code == "ContDraw" && downRes.side != "None") {													
+			clickstate=8; // Attribute Connection Draw
+			drawlinekind=1;	// Tell drawing engine to draw attribute line symbol
+			if(downRes.side == "1") {
+				drawlinesx = downRes.x1; // Initiate start parameters for line drawing left side
+				drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
+			} else if(downRes.side == "2") {
+				drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
+				drawlinesy = downRes.y2;
+			} else if(downRes.side == "3") {
+				drawlinesx = downRes.x2; // Initiate start parameters for line drawing left side
+				drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
+			} else if(downRes.side == "4") {
+				drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
+				drawlinesy = downRes.y1;
+			}
+			drawlinedx = drawlinesx;
+			drawlinedy = drawlinesy;	
+		}
+		if(downRes.typ == "ERRel" && downRes.code == "ContDraw" && downRes.side != "None") {						
+			var obj=Objects[downRes.objid];													
+			if(downRes.side != obj.DrawfromSide && downRes.side != obj.DrawfromSideDest) {
+				clickstate = 9; // Attribute Connection Draw
+				drawlinekind = 1; // Tell drawing engine to draw relation line symbol 
+				if(downRes.side == "1") {
+					drawlinesx = downRes.x1; // Initiate start parameters for line drawing left side
+					drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
+				} else if(downRes.side == "2") {
+					drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
+					drawlinesy = downRes.y2;
+				} else if(downRes.side == "3") {
+					drawlinesx = downRes.x2; // Initiate start parameters for line drawing left side
+					drawlinesy = downRes.y1 + ((downRes.y2 - downRes.y1) * 0.5);									
+				} else if(downRes.side == "4") {
+					drawlinesx = downRes.x1 + ((downRes.x2 - downRes.x1) * 0.5); // Initiate start parameters for line drawing bottom side
+					drawlinesy = downRes.y1;
+				}
+				drawlinedx = drawlinesx;
+				drawlinedy = drawlinesy;
+			}
+		}				
+	}
+	if(clickstate > 2) {
+		var obj = Objects[downRes.objid];
+	}
+	if(clickstate == 3) { // We are in single rectangular object move 
+		obj.x1 = downRes.x1 - deltax;
+		obj.y1 = downRes.y1 - deltay;
+		obj.x2 = downRes.x2 - deltax;
+		obj.y2 = downRes.y2 - deltay;
+	} else if(clickstate == 4) { // We are in single rectangular object scale left 
+		if((obj.x2 - downRes.x1 + deltax) > 60) obj.x1 = downRes.x1 - deltax;
+	} else if(clickstate == 5) { // We are in single rectangular object scale bottom
+		if((downRes.y2 - obj.y1 - deltay) > 40) obj.y2 = downRes.y2 - deltay;
+	} else if(clickstate==6) {	// We are in single rectangular object scale right
+		if((downRes.x2 - obj.x1 - deltax) > 60) obj.x2 = downRes.x2 - deltax;
+	} else if(clickstate == 7) { // We are in single rectangular object scale top
+		if((obj.y2 - downRes.y1 + deltay) > 40) obj.y1 = downRes.y1 - deltay;
+	} else if(clickstate == 8 || clickstate == 9) { // We are in straight connective line drawing mode 
+		drawlinedx = gridx;
+		drawlinedy = gridy;
+	}
+}
+
+/*
+ *	Call-forward for mouse-over event
+ */
+function mouseover(x, y) {
+	// Code of touch, and if available object id and id of side of object that was touched
+	// Tolerances included as constant
+	var obj_code = "None";
+	var obj_id = "None";
+	var obj_sidentifier =" None";
+	var obj_sideperc = 0;
+	var obj_centerdist = 0;
+	var obj_type = "None";
+	var obj_x1 = 0; 
+	var obj_y1 = 0; 
+	var obj_x2 = 0; 
+	var obj_y2 = 0;
+	var Cont;
+	var found = 0;
+	var side;
+	for(j = 0; j < Identifiers.length; j++) {
+		var objid = Identifiers[j];
+		var obj = Objects[objid];				
+		var Sel = Selected[objid];
+		if(ContextObj == objid) {
+			Cont = 1;
+		} else {
+			Cont = 0;
+		}
+		// Compute coordinates including offset
+		if(obj.type == "Entity" || obj.type == "ERAttribute" || obj.type == "ERRel") {										
+			x1 = obj.x1 + offsx;
+			y1 = obj.y1 + offsy;
+			x2 = obj.x2 + offsx;
+			y2 = obj.y2 + offsy;
+			rx = (x2 - x1) * 0.5;
+			ry = (y2 - y1) * 0.5;
+		}
+		found = 0;
+		// For each kind of clickable object, check if we are inside object and if so assign variables
+		// Any general properties for all object types are set when "found" is true
+		if(obj.type == "Entity") {				
+			if(x > (x1 - sidetol) && y > (y1 - sidetol ) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
+				obj_code = "NonSel";
+				if(Sel) {
+					obj_code = "Sel";
+				}
+				if(Cont) {
+					obj_code = "Cont";
+				}
+				side = computeside(x, y, x1, y1, x2, y2, sidetol);
+				obj_sidentifier = side.side;
+				obj_sideperc = side.perc;
+				obj_centerdist = side.dist;					
+				found = 1;																	
+			}
+		} else if(obj.type=="ERAttribute") {
+				if(x > (x1 - sidetol) && y > (y1 - sidetol) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
+					obj_code = "NonSel";
+					if(Sel) {
+						obj_code="Sel";
+					}							
+					if(Cont) {
+						if(obj.DrawtoID == "None") {
+							obj_code = "ContDraw";											
+						} else {
+							obj_code = "Cont";
+						}
+					} 
+					side = computeside(x, y, x1, y1, x2, y2, sidetol);
+					obj_sidentifier = side.side;
+					obj_sideperc = side.perc;
+					obj_centerdist = side.dist;
+					found = 1;
+				}
+		} else if(obj.type == "ERRel") {
+			if(x > (x1 - sidetol) && y > (y1 - sidetol) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
+				xk = x - x1;
+				// Colision detection against diamond
+				var inside = 0;																		
+				if(xk <= rx) {
+					if(y > (y1 + ry - xk - sidetol) && y < (y1 + ry + xk + sidetol)) {
+						inside = 1;
+					}
+				} else {
+					if(y > (y1 - rx + xk - sidetol) && y < ( y2 + rx - xk + sidetol)) {
+						inside = 1;
+					}
+				}
+				if(inside) {	
+					if((x > (x1 - sidetol)) && (x < (x1 + sidetol)) && (y > (y1 + ry - sidetol)) && (y < (y1 + ry + sidetol))) {
+						obj_sidentifier = 1;
+					}
+					if((x > (x1 + rx - sidetol)) && (x < (x1 + rx + sidetol)) && (y > (y2 - sidetol)) && (y < (y2 + sidetol))) {
+						obj_sidentifier = 2;
+					}
+					if((x > (x2 - sidetol)) && (x < (x2 + sidetol)) && (y > (y1 + ry - sidetol)) && (y < (y1 + ry + sidetol))) {
+						obj_sidentifier = 3;
+					}
+					if((x > (x1 + rx - sidetol)) && (x < (x1 + rx + sidetol)) && (y > (y1 - sidetol)) && (y < (y1 + sidetol))) {
+						obj_sidentifier = 4;
+					}
+					obj_code = "NonSel";
+					if(Sel) {
+						obj_code = "Sel";
+					}
+					if(Cont) {
+						if(obj.DrawtoID == "None"){
+							obj_code = "ContDraw";											
+						} else if(obj.DrawtoIDDest == "None") {
+							obj_code = "ContDraw";											
+						} else {
+							obj_code = "Cont";
+						}
+					} 
+					obj_sideperc = 0.5;
+					found = 1;
+				}
+			}			
+		}
+		if(found == 1) {
+			// Save coordinates at time of click									
+			obj_x1 = x1;
+			obj_y1 = y1;
+			obj_x2 = x2;
+			obj_y2 = y2;						
+			obj_id = objid;
+			obj_type = obj.type;
+			printstr=obj_id + " " + obj_sidentifier + " " + obj_sideperc;
+		}
+	}						
+	return {
+		objid:obj_id,
+		code:obj_code,
+		side:obj_sidentifier,
+		sideperc:obj_sideperc,
+		centerdist:obj_centerdist,
+		typ:obj_type,
+		x1:obj_x1,
+		y1:obj_y1,
+		x2:obj_x2,
+		y2:obj_y2
+	}
+}
+
+/*
+ * Turns JSON data into jQuery objects 
+ */
+function importdata() {				
+	for(i = 0; i < 7; i++) {
+		if(i == 0) {
+			obj = jQuery.parseJSON('{"type":"ERAttribute","id":"ATT1","kind":"Multiple","name":"Addressfosoppooo","x1":220,"y1":100,"x2":300,"y2":140, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"None", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":""}');
+		}
+		if(i == 1) {
+			obj = jQuery.parseJSON('{"type":"Entity","id":"ENT2","kind":"Weak","name":"Carsmashoepppoloo","x1":100,"y1":160,"x2":220,"y2":220}');
+		}
+		if(i == 2) {
+			obj = jQuery.parseJSON('{"type":"ERAttribute","id":"ATT3","kind":"Key","name":"SSNFooomesPoo","x1":160,"y1":260,"x2":260,"y2":300, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"None", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":""}');
+		}
+		if(i == 3) {
+			obj = jQuery.parseJSON('{"type":"Entity","id":"ENT4","kind":"Strong","name":"Trailerfpdddpeoooooe","x1":320,"y1":260,"x2":420,"y2":320}');
+		}
+		if(i == 4) {
+			obj = jQuery.parseJSON('{"type":"Entity","id":"ENT5","kind":"Strong","name":"Grail","x1":120,"y1":440,"x2":220,"y2":480}');
+		}
+		if(i == 5) {
+			obj = jQuery.parseJSON('{"type":"ERRel","id":"REL6","kind":"Strong","name":"FGFool","x1":460,"y1":160,"x2":520,"y2":220, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Fumo", "DrawtoXoffs":"20", "DrawtoYoffs":"50", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Luma", "DrawtoDestXoffs":"0", "DrawtoDestYoffs":"-50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
+		}
+		if(i == 6) {
+			obj = jQuery.parseJSON('{"type":"ERRel","id":"REL7","kind":"Weak","name":"PODrool","x1":360,"y1":360,"x2":420,"y2":420, "DrawtoID":"None",  "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Kumo", "DrawtoXoffs":"60", "DrawtoYoffs":"70", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Zuuma", "DrawtoDestXoffs":"40", "DrawtoDestYoffs":"50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
+		}
+		objid = obj.id;
+		Objects[objid] = obj;
+		Identifiers.push(objid);
+	}
+}
+
+/* 
+ * 	prepareobj
+ * 	Prepares all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
+ * 	Ofss in prepare are not finished.
+ */
+function prepareobj(obji) {
+	var fromobj = Objects[obji];
+	// Attributes are prepared by re-pointing the DrawX1, DrawY1, DrawX2 and DrawY2 variables and Relationships are prepared by re-pointing DrawX1-DrawX4 and DrawY1-DrawY4
+	if((fromobj.type == "ERAttribute" || fromobj.type == "ERRel") && fromobj.DrawtoID != "None") {									
+		var toid = fromobj.DrawtoID;
+		var toobj = Objects[toid];
+		var sidek;
+		if(fromobj.DrawtoIDDest != "None" && fromobj.DrawtoIDDest != undefined) {
+			var toiddest = fromobj.DrawtoIDDest;
+			var toobjdest = Objects[toiddest];						
+			sidek = makeside(fromobj.DrawfromSideDest, fromobj.x1, fromobj.y1, fromobj.x2, fromobj.y2, 0.5);
+			fromobj.DrawX3 = sidek.x;
+			fromobj.DrawY3 = sidek.y;
+			sidek = makeside(fromobj.DrawtoSideDest, toobjdest.x1, toobjdest.y1, toobjdest.x2, toobjdest.y2, fromobj.DrawtoPercDest);
+			fromobj.DrawX4 = sidek.x;
+			fromobj.DrawY4 = sidek.y;
+		}
+		//printstr=fromobj.DrawfromSide+" "+fromobj.x1+" "+fromobj.y1+" "+fromobj.x2+" "+fromobj.y2+" :: "+fromobj.DrawtoSide+" "+toobj.x1+" "+toobj.y1+" "+toobj.x2+" "+toobj.y2+" "+fromobj.DrawtoPerc;				
+		sidek = makeside(fromobj.DrawfromSide, fromobj.x1, fromobj.y1, fromobj.x2, fromobj.y2, 0.5);
+		fromobj.DrawX1 = sidek.x;
+		fromobj.DrawY1 = sidek.y;				
+		sidek = makeside(fromobj.DrawtoSide, toobj.x1, toobj.y1, toobj.x2, toobj.y2, fromobj.DrawtoPerc);
+		fromobj.DrawX2 = sidek.x; 
+		fromobj.DrawY2 = sidek.y;						
+	}
+}
+
+/*
+ * 	Drawobj
+ * 	Draws all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
+ */
+function drawobj(obji) {
+	var obj = Objects[obji];
+	var Sel = Selected[obji];
+	if(ContextObj == obji) {
+		Cont = 1;
+	} else {
+		Cont = 0;
+	}
+	context.strokeStyle = '#000';
+	context.lineWidth = 2.0;
+	// Compute coordinates including offset
+	if(obj.type == "Entity" || obj.type == "ERAttribute" || obj.type == "ERRel") {									
+		x1 = obj.x1 + offsx;
+		y1 = obj.y1 + offsy;
+		x2 = obj.x2 + offsx;
+		y2 = obj.y2 + offsy;
+		rx = (x2 - x1) * 0.5;
+		ry = (y2 - y1) * 0.5;
+	}
+	if(obj.type == "Entity") {				
+		//Draw Local Graphic
+		drawrect(x1, y1, x2, y2, "#000");
+		if(obj.kind == "Weak") {
+			drawrect(x1 + 5, y1 + 5, x2 - 5, y2 - 5, "#000");
+			cliptext(x1 + 5, y1 + 5, x2 - 5, y2 - 5, obj.name, "20px Calibri", "center", 8, 6, "#000", 1, 0);		
+
+		} else {
+			cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 1, 0);						
+		}
+		// Draw Select Marker
+		if(Sel || Cont) {
+			fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#5f8");								
+		}
+	} else if(obj.type == "ERAttribute") {
+		drawellipse(x1, y1, x2, y2);
+		if(obj.kind == "Key") {
+			cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 2, 1);						
+		} else {
+			cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 2, 0);												
+		}
+		if(obj.DrawtoID != "None") {
+			drawline(obj.DrawX1, obj.DrawY1, obj.DrawX2, obj.DrawY2, "#000", 2.0);
+		}
+		// Draw Select Marker
+		if(Cont && obj.DrawtoID == "None") {
+			fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#fa2");
+		} else if(Sel || (Cont && obj.DrawtoID != "None")) {
+			fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#5f8");
+		}
+	} else if(obj.type == "ERRel") {
+		if(obj.DrawtoID != "None") {
+			drawline(obj.DrawX1, obj.DrawY1, obj.DrawX2, obj.DrawY2, "#000", 2.0);
+			drawcardinality(obj.DrawX2, obj.DrawY2, obj.DrawtoSide, obj.DrawtoCard, obj.DrawtoXoffsCard, obj.DrawtoYoffsCard, "20px Calibri", 20, 1, "#0a0");
+			drawcardinality(obj.DrawX2, obj.DrawY2, obj.DrawtoSide, obj.DrawtoRole, obj.DrawtoXoffsRole, obj.DrawtoYoffsRole, "20px Calibri", 20, 2, "#0a0");
+			//function drawcardinality(x,y,side,tex,xoffs,yoffs,font,baseline,sign,color)
+			//if(i==5) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL6","kind":"Strong","name":"FGFool","x1":460,"y1":160,"x2":520,"y2":220, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Fumo", "DrawtoXoffsCard":"20", "DrawtoYoffsCard":"50","DrawtoXoffsRole":"20", "DrawtoYoffsRole":"-50", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"1", "DrawtoDestRole":"Luma", "DrawtoDestXoffsCard":"0", "DrawtoDestYoffsCard":"-50","DrawtoDestXoffsRole":"0", "DrawtoDestYoffsRole":"-50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
+			//if(i==6) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL7","kind":"Weak","name":"PODrool","x1":360,"y1":360,"x2":420,"y2":420, "DrawtoID":"None",  "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"1", "DrawtoRole":"Kumo", "DrawtoXoffsCard":"60", "DrawtoYoffsCard":"70", "DrawtoXoffsCard":"80", "DrawtoYoffsCard":"-70", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Zuuma", "DrawtoDestXoffsCard":"40", "DrawtoDestYoffsCard":"50", "DrawtoDestXoffsRole":"40", "DrawtoDestYoffsRole":"50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
+		}
+		if(obj.DrawtoIDDest != "None") {
+			drawline(obj.DrawX3, obj.DrawY3, obj.DrawX4, obj.DrawY4, "#000", 2.0);
+		}
+		if(obj.kind == "Weak") {
+			drawdiamond(x1 - 4, y1 - 4, x2 + 4, y2 + 4);
+			drawdiamond(x1 + 4, y1 + 4, x2 - 4, y2 - 4);
+			cliptext(x1 + 8, y1 + 8, x2 - 8, y2 - 8, obj.name, "20px Calibri", "center", 8, 6, "#000", 3, 0);												
+		} else {
+			drawdiamond(x1, y1, x2, y2, 0);
+			cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 3, 0);												
+		}
+		// Draw Select Markers
+		if(Sel || (Cont && obj.DrawtoID != "None" && obj.DrawtoIDDest != "None")) {
+			fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#5f8");
+		} else if(Cont) {
+			if(obj.DrawfromSide != 1 && obj.DrawfromSideDest != 1) {
+				point(x1, y1 + ry, "#fa2");
+			}
+			if(obj.DrawfromSide != 2 && obj.DrawfromSideDest != 2) {
+				point(x1 + rx, y2, "#fa2");
+			}
+			if(obj.DrawfromSide != 3 && obj.DrawfromSideDest != 3) {
+				point(x2, y1 + ry, "#fa2");
+			}
+			if(obj.DrawfromSide != 4 && obj.DrawfromSideDest != 4) {
+				point(x1 + rx, y1, "#fa2");
+			}
+		}
+	}
+}
+importdata();
+
+/*
+ * 
+ */
+function foo() {
+	context.clearRect(0, 0, 600, 600);
 //			overline(gridx,gridy,150,550,550,300,8.0);
-			// Draw grid lines				
-			context.strokeStyle = '#ddd';
-			context.lineWidth = 0.5;
-			context.beginPath();
-			for(i = 0; i < 600; i += 20) {
-				context.moveTo(i, 0);
-				context.lineTo(i, 600);
-				context.moveTo(0, i);
-				context.lineTo(600, i);
-			}
-			context.stroke();			
-			// Draw drawing line				
-			if(drawlinekind == 1) {
-				drawline(drawlinesx, drawlinesy, drawlinedx, drawlinedy, "#000", 1.0);
-			}
-			// Prepare model objects
-			for(i = 0; i < Identifiers.length; i++){
-				var objid = Identifiers[i];
-				prepareobj(objid);
-			}
-			// Draw model objects
-			for(i = 0; i < Identifiers.length; i++){
-				var objid = Identifiers[i];
-				drawobj(objid);
-			}								
-			// Draw Crosshair
-			context.beginPath();
-			context.strokeStyle = '#444';
-			context.lineWidth   = 1.0;
-			context.moveTo(gridx - gridsize, gridy);
-			context.lineTo(gridx + gridsize, gridy);
-			context.moveTo(gridx, gridy - gridsize);
-			context.lineTo(gridx, gridy + gridsize);
-			context.stroke();											
-			context.strokeStyle = '#ddd';
-			context.fillStyle = '#000';
-			context.font = "bold 16px Arial";
-			context.textAlign = "left";
-			context.fillText("currop: " + printstr, 20, 576);
-			setTimeout("foo();", 100);
-		}
\ No newline at end of file
+	// Draw grid lines				
+	context.strokeStyle = '#ddd';
+	context.lineWidth = 0.5;
+	context.beginPath();
+	for(i = 0; i < 600; i += 20) {
+		context.moveTo(i, 0);
+		context.lineTo(i, 600);
+		context.moveTo(0, i);
+		context.lineTo(600, i);
+	}
+	context.stroke();			
+	// Draw drawing line				
+	if(drawlinekind == 1) {
+		drawline(drawlinesx, drawlinesy, drawlinedx, drawlinedy, "#000", 1.0);
+	}
+	// Prepare model objects
+	for(i = 0; i < Identifiers.length; i++){
+		var objid = Identifiers[i];
+		prepareobj(objid);
+	}
+	// Draw model objects
+	for(i = 0; i < Identifiers.length; i++){
+		var objid = Identifiers[i];
+		drawobj(objid);
+	}								
+	// Draw Crosshair
+	context.beginPath();
+	context.strokeStyle = '#444';
+	context.lineWidth   = 1.0;
+	context.moveTo(gridx - gridsize, gridy);
+	context.lineTo(gridx + gridsize, gridy);
+	context.moveTo(gridx, gridy - gridsize);
+	context.lineTo(gridx, gridy + gridsize);
+	context.stroke();											
+	context.strokeStyle = '#ddd';
+	context.fillStyle = '#000';
+	context.font = "bold 16px Arial";
+	context.textAlign = "left";
+	context.fillText("currop: " + printstr, 20, 576);
+	setTimeout("foo();", 100);
+}
\ No newline at end of file

=== modified file 'ErModeller/canvas_ER_demo_duggajs.html'
--- ErModeller/canvas_ER_demo_duggajs.html	2013-04-03 09:20:17 +0000
+++ ErModeller/canvas_ER_demo_duggajs.html	2013-04-05 07:55:26 +0000
@@ -4,7 +4,7 @@
 	<link rel="stylesheet" type="text/css" href="canvas.css">
 	<script type="text/javascript" src="../js/jquery.js"></script>
 	<script type="text/javascript" src="canvas.js"></script>
-	<script type="text/javascript" src="dugga.js"></script>
+	<script type="text/javascript" src="../js/dugga.js"></script>
 	</head>
 	<body onload="setupcanvas();">
 		<table>

=== removed file 'ErModeller/dugga.js'
--- ErModeller/dugga.js	2013-03-28 16:01:26 +0000
+++ ErModeller/dugga.js	1970-01-01 00:00:00 +0000
@@ -1,608 +0,0 @@
-/********************************************************************************
-  Mouse coordinate and canvas globals
-  Handles both Touch and Mouse/Keyboard input at the same time
- *********************************************************************************/
-
-// Mouse coordinate globals
-var gridx, gridy;
-var clickstate = 0;
-var acanvas;
-var context;
-
-/********************************************************************************
-  Canvas Setup and Click Handling Code
-
-  Handles both Touch and Mouse/Keyboard input at the same time and executes 
-  handler callbacks.
-  Also declares canvas globals
- *********************************************************************************/
-
-function setupcanvas() {
-	acanvas = document.getElementById('a');
-	context = acanvas.getContext("2d");		
-	setTimeout("foo();",50);
-	setupClickHandling();		
-}
-
-function setupClickHandling() {
-	// Mouse and Keyboard Events
-	acanvas.addEventListener('mousemove', ev_mousemove, false);
-	acanvas.addEventListener('mouseup', ev_mouseup, false);
-	acanvas.addEventListener('mousedown', ev_mousedown, false);
-
-	// Touch Events
-	acanvas.addEventListener('touchstart', ev_touchstart, false);
-	acanvas.addEventListener('touchend', ev_touchend, false);
-	acanvas.addEventListener('touchmove', ev_touchmove, false);		
-}						
-
-// Keyboard/Mouse Mouse Up Handler
-function ev_mouseup(ev) {
-	handler_mouseup();
-}
-
-// Keyboard/Mouse Mouse Down Handler
-function ev_mousedown(ev) {
-	handler_mousedown();		
-}
-
-// Keyboard/Mouse Mouse Move Handler
-function ev_mousemove (ev) {
-	var cx, cy = 0;
-	if (ev.layerX || ev.layerX == 0) { // Firefox
-		cx = ev.layerX - acanvas.offsetLeft;
-		cy = ev.layerY - acanvas.offsetTop;
-	} else if (ev.offsetX || ev.offsetX == 0) { // Opera
-		cx = ev.offsetX - acanvas.offsetLeft;
-		cy = ev.offsetY - acanvas.offsetTop;
-	}
-	coord = findPos(acanvas);
-	cx = cx - coord.x;
-	cy = cy - coord.y;
-	handler_mousemove(cx, cy);
-}		
-
-// Touch start event
-function ev_touchstart(event) {  
-	event.preventDefault();  
-	var numtouch = event.touches.length;  
-	targetEvent =  event.touches.item(0);
-	var cx = targetEvent.pageX;
-	var cy = targetEvent.pageY;
-	gridx = cx;
-	gridy = cy;
-	handler_mousedown();
-};  
-
-// Touch end event
-function ev_touchend(event) {  
-	event.preventDefault();  
-	var numtouch = event.touches.length;  
-	handler_mouseup();
-};
-
-// Touch move event
-function ev_touchmove(event) {  
-	event.preventDefault();  
-	var numtouch = event.touches.length;  
-	targetEvent =  event.touches.item(0);
-	var cx = targetEvent.pageX;
-	var cy = targetEvent.pageY;
-	handler_mousemove(cx, cy);				
-};
-
-// Fix scrolling on touch devices
-var ScrollFix = function(elem) {
-	// Variables to track inputs
-	var startY, startTopScroll;
-	elem = elem || document.querySelector(elem);
-
-	// If there is no element, then do nothing  
-	if(!elem) {
-		return;
-	}
-
-	// Handle the start of interactions
-	elem.addEventListener('touchstart', function(event) {
-		startY = event.touches[0].pageY;
-		startTopScroll = elem.scrollTop;
-
-		if(startTopScroll <= 0) {
-			elem.scrollTop = 1;
-		}
-
-		if(startTopScroll + elem.offsetHeight >= elem.scrollHeight) {
-			elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
-		}
-	}, false);
-};
-
-/********************************************************************************
-  Canvas Diagram Drawing Code
- *********************************************************************************/
-
-// Draws a stroked rectangle of certain thicknes and color
-function drawrect(x1, y1, x2, y2, color) {
-	context.lineWidth = 1.5;
-	context.strokeStyle = color;
-	context.strokeRect(x1, y1, x2 - x1, y2 - y1);
-}
-
-// Draws a perfect round circle
-function drawcircle(radius, color) {
-	context.lineWidth = 1.5;
-	context.strokeStyle = color;
-	context.arc(0, 0, radius, 0 , 2 * Math.PI, false);
-}
-
-// Draws 90 degree arc
-function drawellipse(x1, y1, x2, y2) {
-	var rx = (x2 - x1) * 0.5;
-	var ry = (y2 - y1) * 0.5;
-	context.beginPath();					
-	context.moveTo(x1, y1 + ry);
-	context.quadraticCurveTo(x1, y1, x1 + rx, y1);
-	context.quadraticCurveTo(x2, y1, x2, y1 + ry);
-	context.quadraticCurveTo(x2, y2, x2 - rx, y2);
-	context.quadraticCurveTo(x1, y2, x1, y1 + ry);
-	context.stroke();
-}	
-
-// Draw a point		
-function point(x, y, col) {
-	context.strokeStyle = "#000";
-	context.lineWidth = 1;
-	context.fillStyle = col;
-	context.fillRect(x - 4, y - 4, 8, 8);		
-	context.strokeRect(x - 4, y - 4, 8, 8);						
-}
-
-// Draw a box around a point to indicate highlight
-function highlight(px, py) {
-	context.strokeStyle = "#aaa";
-	context.lineWidth = 1;
-	context.strokeRect(px - 8, py - 8, 16, 16);						
-}
-
-// Draw a line using current context
-function drawline(x1, y1, x2, y2, strokestyle, linewidth) {
-	context.strokeStyle = strokestyle;
-	context.lineWidth = linewidth;
-	context.beginPath();
-	context.moveTo(x1, y1);
-	context.lineTo(x2, y2);
-	context.stroke();
-}
-
-function fourpoints(x1, y1, x2, y2, x3, y3, x4, y4, col) {
-	point(x1, y1, col);
-	point(x2, y2, col);
-	point(x3, y3, col);
-	point(x4, y4, col);				
-}
-
-function drawdiamond(x1, y1, x2, y2) {
-	var rx = (x2 - x1) * 0.5;
-	var ry = (y2 - y1) * 0.5;
-	context.beginPath();					
-	context.moveTo(x1, y1 + ry);
-	context.lineTo(x1 + rx, y2);
-	context.lineTo(x2, y1 + ry);
-	context.lineTo(x1 + rx, y1);
-	context.lineTo(x1, y1 + ry);			
-	context.stroke();											
-}
-
-// Dashed Line in Segments of given size
-function dashedline(sx, sy, ex, ey, dashlen, linewidth, col) {
-	var dx = ex - sx;
-	var dy = ey - sy;
-	len = Math.sqrt((dx * dx) + (dy * dy));
-	notimes = Math.round(len / dashlen);
-	dx = dx / notimes;
-	dy = dy / notimes;
-	context.lineWidth = linewidth;
-	context.strokeStyle = col;
-	context.beginPath();
-	var xk, yk;
-	xk = sx;
-	yk = sy;
-	xh = dx / 2.0;
-	yh = dy / 2.0;
-	for(var i = 0; i < notimes; i++) {
-		context.moveTo(xk, yk);				
-		context.lineTo(xk + xh, yk + yh);
-		xk += dx;
-		yk += dy;
-	}
-	context.stroke();
-}
-
-// Arcto only works if both x1 and y2 are on circle border
-function arcto(x0, y0, x1, y1, x2, y2) {
-	var r = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
-	var x = x0 - r;
-	var y = y0 - r;
-	var startAngle = (180 / Math.PI * Math.atan2(y1 - y0, x1 - x0));
-	var endAngle = (180 / Math.PI * Math.atan2(y2 - y0, x2 - x0));
-	context.arc(x0, y0, r, 0, Math.PI * 2.0, 1.0);
-}
-
-// Draws 90 degree arc
-function arcdeg(x1, y1, x2, y2, x3, y3) {
-	// First quadrant positive positive			
-	dashedline(x1, y1, x2, y2, 8, 1.0, "#999");
-	dashedline(x3, y3, x2, y2, 8, 1.0, "#999");					
-	point(x1, y1, "#ff5");
-	point(x2, y2, "#f55");
-	point(x3, y3, "#f55");
-
-	k = (y3 - y1) / (x3 - x1);					
-	yk = y1 + ((x2 - x1) * k);
-	rx = x3 - x1;
-	ry = y3 - y1;
-	point(x2, yk, "#f5f");
-
-	context.strokeStyle = '#49f';
-	context.lineWidth = 1.0;					
-	context.beginPath();					
-	context.moveTo(x1, y1);
-	for(i = 0; i < 48; i++) {
-		if(y3 >= y1) {
-			if(yk >= y2) {
-				context.lineTo(x1 + (Math.sin(((Math.PI / 96.0) * -i) + (Math.PI * 1.0)) * rx), y3 + (Math.cos(((Math.PI / 96.0) * -i) + (Math.PI * 1.0)) * ry));
-			} else {
-				context.lineTo(x3 + (Math.sin(((Math.PI / 96.0) * i) + (Math.PI * 1.5)) * rx), y1 + (Math.cos(((Math.PI / 96.0) * i) + (Math.PI * 1.5)) * ry));
-			}
-		} else {
-			if(yk <= y2) {
-				context.lineTo(x1 + (Math.sin(((Math.PI / 96.0) * -i) + (Math.PI * 1.0)) * rx), y3 + (Math.cos(((Math.PI / 96.0) * -i) + (Math.PI * 1.0)) * ry));
-			} else {
-				context.lineTo(x3 + (Math.sin(((Math.PI / 96.0) * i) + (Math.PI * 1.5)) * rx), y1 + (Math.cos(((Math.PI / 96.0) * i) + (Math.PI * 1.5)) * ry));
-			}
-		}
-	}
-	context.stroke();
-}
-
-// function that draws one part of the sun	
-function sundial(radius, angle, scale) {
-	cosv = Math.cos(angle);
-	sinv = Math.sin(angle);
-	yaddx = scale * cosv;
-	yaddy = scale * sinv;
-	xaddx = -scale * sinv;
-	xaddy = scale * cosv;
-	xk = cosv * radius;
-	yk = sinv * radius;
-
-	context.bezierCurveTo((-1.5 * xaddx) + (yaddx * 1.5) + xk, (-1.5 * xaddy) + (yaddy * 1.5) + yk, xaddx + (yaddx * 2.0) + xk, xaddy + (yaddy * 2.0) + yk, xaddx + (yaddx * 3.0) + xk, xaddy + (yaddy * 3.0) + yk);
-	context.bezierCurveTo(xaddx + yaddx + xk, xaddy + yaddy + yk, (1.5 * xaddx) + yaddx + xk, (1.5 * xaddy) + yaddy + yk, (3.0 * xaddx) + xk, (3.0 * xaddy) + yk);
-}
-
-// function that daws the sun
-function drawsun() {
-	context.fillStyle = "#fe9";
-	context.strokeStyle = "#d82";
-	context.lineWidth = 1.5;
-	context.beginPath();
-	context.moveTo(30, 0);
-	for(i = 0.0; i < 360.0; i += 22.5) {
-		angle = (i / 360.0) * 2 * Math.PI;
-		sundial(30, angle, 3);
-	}
-	context.stroke();
-	context.fill();															
-}
-
-// Draws the ball (used in various examples)
-function drawball(cx, cy, radie, innerradie, ballradie, col1, inangle, inangleadd) {
-
-	angleadd = (inangleadd / 360.0) * 2 * Math.PI;
-	context.fillStyle = col1;					
-	for(i = 0; i < 360; i += inangle) {
-		angle = (i / 360.0) * 2 * Math.PI;
-		angle2 = angle + angleadd;
-		angle3 = angle + (angleadd * 2.0);
-		angle4 = angle - angleadd;
-
-		cosv = Math.cos(angle);
-		sinv = Math.sin(angle);
-
-		cosv2 = Math.cos(angle2);
-		sinv2 = Math.sin(angle2);
-
-		cosv4 = Math.cos(angle4);
-		sinv4 = Math.sin(angle4);
-
-		context.beginPath();
-
-		context.moveTo(cx, cy);
-		context.quadraticCurveTo(cx + (cosv * innerradie), cy + (sinv * innerradie), cx + (cosv2 * radie), cy + (sinv2 * radie));							
-		context.arc(cx, cy, radie, angle2, angle, 1.0);
-		context.quadraticCurveTo(cx + (cosv4 * innerradie), cy + (sinv4 * innerradie), cx, cy);							
-		context.fill();	
-	}
-
-	context.beginPath();
-	context.arc(cx, cy, radie, 0, Math.PI * 2.0, 1.0);												
-	context.stroke();															
-}
-
-// Draws underlined/dashed underlined text clipped inside a rectangle, a quadratic curve ellipsis or a diamond
-function cliptext(x1, y1, x2, y2, tex, font, align, edgeoffs, baseline, color, clipkind, underlinekind) {
-	var rx = (x2 - x1) * 0.5;
-	var ry = (y2 - y1) * 0.5;
-	var tx = x1;    		
-
-	if(clipkind != 0) {
-		context.save();
-		context.beginPath();				
-	}
-
-	// Make Rectangle / Ellipse / Diamond Clipping Paths
-	if(clipkind == 1) {
-		context.moveTo(x1, y1);
-		context.lineTo(x1, y2);
-		context.lineTo(x2 - edgeoffs, y2);
-		context.lineTo(x2 - edgeoffs, y1);
-		context.lineTo(x1, y1);
-	} else if(clipkind == 2) {
-		context.moveTo(x1, y1 + ry);
-		context.quadraticCurveTo(x1 + edgeoffs, y1 + edgeoffs, x1 + edgeoffs + rx, y1 + edgeoffs);
-		context.quadraticCurveTo(x2 - edgeoffs, y1 + edgeoffs, x2 - edgeoffs , y1 + ry + edgeoffs);
-		context.quadraticCurveTo(x2 - edgeoffs, y2 - edgeoffs, x2 - rx - edgeoffs, y2 - edgeoffs);
-		context.quadraticCurveTo(x1 + edgeoffs, y2 - edgeoffs, x1 + edgeoffs, y1 + ry + edgeoffs);
-	} else if(clipkind == 3) {
-		context.moveTo(x1, y1 + ry);
-		context.lineTo(x1 + rx, y2);
-		context.lineTo(x2, y1 + ry);
-		context.lineTo(x1 + rx, y1);
-		context.lineTo(x1, y1 + ry);			
-	}
-
-	if(clipkind != 0) {
-		context.clip();				
-	}
-
-	context.font = font;
-	context.textAlign = "left";
-	context.fillStyle = color;
-
-	var metrics = context.measureText(tex);
-	var hwidth = metrics.width * 0.5;
-
-	// Compute left-justified centered coordinate    		
-	if((rx - hwidth - edgeoffs) < 0) {
-		tx = x1 + edgeoffs;
-	} else {
-		tx = x1 + rx - hwidth;
-	}
-
-	context.fillText(tex, tx, y2 - ry + baseline);
-
-	// Draw underlining - can handle dashed underline!
-	if(underlinekind == 1) {
-		drawline(tx, y2 - ry + baseline + 5.0, tx + (hwidth*2), y2 - ry + baseline + 5.0, "#000", 2.0);										
-	}
-
-	if(clipkind != 0) context.restore(); 
-
-}
-
-// Draws cardinality at a certain offset from a coordinate
-function drawcardinality(x, y, side, tex, xoffs, yoffs, font, baseline, sign, color)
-{
-	// Xoffs is along line
-	xoffs = 0;
-	// Yoffs is distance from line
-	yoffs = 10;
-
-	var metrics = context.measureText(tex);
-	var twidth = metrics.width;
-	var theight = 12;
-
-	point(x, y, "#f8f");
-
-	context.font = font;
-	context.textAlign = "left";
-	context.fillStyle = color;
-
-	if(side == 1 && sign == 1){
-		context.fillText(tex, x - twidth - xoffs, y - yoffs);
-		drawrect(x - twidth - xoffs, y - yoffs,x - xoffs, y - yoffs - theight);
-	}else if(side == 2 && sign == 1){
-		context.fillText(tex, x + yoffs, y + xoffs + theight);					
-		drawrect(x + yoffs, y + xoffs + theight,x + yoffs + twidth, y + xoffs);
-	}else if(side == 3 && sign == 1){
-		context.fillText(tex, x + xoffs, y - yoffs);
-	}else if(side == 4 && sign == 1){
-		context.fillText(tex, x + yoffs, y - xoffs);					
-	}else if(side == 1 && sign == 2){
-		context.fillText(tex, x - twidth - xoffs, y + theight + yoffs);					
-		drawrect(x - twidth - xoffs, y + yoffs,x - xoffs, y + theight + yoffs);
-	}else if(side == 2 && sign == 2){
-		context.fillText(tex, x - yoffs - twidth, y + xoffs + theight);					
-		drawrect(x - yoffs - twidth, y + xoffs,x - yoffs, y + xoffs + theight);
-	}else if(side == 3 && sign == 2){
-		context.fillText(tex, x + xoffs, y + theight + yoffs);
-	}else if(side == 4 && sign == 2){
-		context.fillText(tex, x - yoffs - twidth, y - xoffs);					
-	}
-}
-
-/********************************************************************************
-  Canvas and Diagram Measuring Functions
-
-  These functions allow us to measure pixels in diagram and other apps
- *********************************************************************************/
-
-// Recursive Pos of div in document - should work in most browsers
-function findPos(obj) {
-	var curleft = curtop = 0;
-	if(obj.offsetParent) {
-		curleft = obj.offsetLeft;
-		curtop = obj.offsetTop;
-		while (obj = obj.offsetParent) {
-			curleft += obj.offsetLeft;
-			curtop += obj.offsetTop;
-		}
-	}
-	return {
-		x:curleft,
-		y:curtop
-	};
-}
-
-// Make side coordinates for drawing Model
-function makeside(side, x1, y1, x2, y2, perc) {
-	var xk = 0;
-	var yk = 0;
-
-	if(side == 1) {
-		xk = x1;
-		yk = y1  +  ((y2 - y1) * perc);
-	} else if(side == 2) {
-		xk = x1 + ((x2 - x1) * perc);
-		yk = y2;
-	} else if(side == 3){
-		xk = x2;
-		yk = y1 + ((y2 - y1) * perc);						
-	} else if(side == 4){
-		xk = x1 + ((x2 - x1) * perc)
-		yk = y1;
-	}
-
-	return {
-		x:xk, 
-		y:yk
-	};
-}		
-
-// Computes side identifier for a mouse coordinate and object coordinates
-function computeside(x, y, x1, y1, x2, y2, sidetol) {
-	var obj_sidentifier = "None";
-	var obj_sideperc = 0;
-	var obj_centerdist = 0;
-
-	// Left Side
-	if(x > x1 - sidetol && x < x1 + sidetol && y > y1 - sidetol && y < y2 + sidetol) {
-		obj_sidentifier = 1;
-		obj_sideperc = makesideperc(y, y1, y2);
-		obj_centerdist = centerdist(y, y1, y2);
-	}
-
-	// Bottom Not Including Left Side or Right Side
-	if(x > x1 + sidetol && x < x2 - sidetol && y > y2 - sidetol && y < y2 + sidetol) {
-		obj_sidentifier = 2;
-		obj_sideperc = makesideperc(x, x1, x2);
-		obj_centerdist = centerdist(x, x1, x2);
-	}
-
-	// Right Side
-	if(x > x2 - sidetol && x < x2 + sidetol && y > y1 - sidetol && y < y2 + sidetol) {
-		obj_sidentifier = 3;
-		obj_sideperc = makesideperc(y, y1, y2);
-		obj_centerdist=centerdist(y, y1, y2);
-	}
-
-	// Top Not Including Left Side or Right Side
-	if(x > x1 + sidetol && x < x2 - sidetol && y > y1 - sidetol && y < y1 + sidetol) {
-		obj_sidentifier = 4;
-		obj_sideperc = makesideperc(x, x1, x2);
-		obj_centerdist=centerdist(x, x1, x2);
-	}
-
-	return {
-		side:obj_sidentifier,
-		perc:obj_sideperc,
-		dist:obj_centerdist
-	};
-}		
-
-// Make side perc for ER model
-function makesideperc(x, x1, x2) {
-	r = x2 - x1;
-	perc = (x - x1) / r;
-
-	if(perc > 1.0) perc = 1.0;
-	if(perc < 0.0) perc = 0.0;
-
-	return perc;
-}
-
-function centerdist(x, x1, x2){
-	r = x1 + ((x2 - x1) * 0.5);
-
-	return (x - r);
-}
-
-// Euclidian distance - Yo!
-function distance(x1, y1, x2, y2) {
-	var dist = Math.sqrt(((y2 - y1) * (y2 - y1)) + ((x2 - x1) * (x2 - x1)));
-
-	return dist;
-}
-
-// Are we over a line or not.
-function overline(x, y, x1, y1, x2, y2, tolerance) {
-	var distance = 10000;
-	dx = x2 - x1;
-	dy = y2- y1;
-
-	straighttolerance = 2.0;
-
-	var box1, boy1, box2, boy2;
-
-	if(x1 > x2) {
-		box1 = x2;
-		box2 = x1;
-	} else {
-		box1 = x1;
-		box2 = x2;				
-	}
-
-	if(y1 > y2) {
-		boy1 = y2;
-		boy2 = y1;
-	} else {
-		boy1 = y1;
-		boy2 = y2;				
-	}
-
-	//drawrect(box1-tolerance,boy1-tolerance,box2+tolerance,boy2+tolerance,"#aaa");
-	if((x > (box1 - tolerance)) && (x < (box2 + tolerance)) && (y > (boy1 - tolerance)) && (y < (boy2 + tolerance))) {
-		// Straight X, Straight Y or Positive or Negative Incline
-		if(Math.abs(dx) < straighttolerance) {
-			if(y1 < y2) {
-				if(y > y1 - tolerance && y < y2 + tolerance) {
-					distance = Math.abs(x1 - x);
-				}
-			} else {
-				if(y > y2 - tolerance && y < y1 + tolerance) {
-					distance = Math.abs(x1 - x);
-				}		
-			}
-		} else if(Math.abs(dy) < straighttolerance) {
-			if(x1 < x2){
-				if(x > x1 - tolerance && x < x2 + tolerance) {
-					distance = Math.abs(y1 - y);
-				}
-			} else {
-				if(x > x2 - tolerance && x < x1 + tolerance) {
-					distance = Math.abs(y1 - y);
-				}
-			}
-		} else if(Math.abs(dx) >= Math.abs(dy)) {
-			k = dy / dx;								
-			yk = y1 + ((x - x1) * k);
-			distance = Math.abs(yk - y);
-		} else {
-			k = dx / dy;
-			xk = x1 + ((y - y1) * k);
-			distance = Math.abs(xk - x);						
-		}
-	}
-
-	return distance;
-}