Merge lp:~a11danjo/lenasys/branch into lp:~lenasysimpl1/lenasys/GammaBear

[Daniel Johansson]

Mostly to ErModeller and some stuff in WebGL and Widget Library

[Daniel Johansson (a11danjo)]

review: Approve

=== added file 'ErModeller/canvas.css'
--- ErModeller/canvas.css	1970-01-01 00:00:00 +0000
+++ ErModeller/canvas.css	2013-04-03 11:33:22 +0000
@@ -0,0 +1,3 @@
+#a			{border:2px solid black;}
+#infobox	{padding:4px;}
+#background		{border:2px solid black;background-color:#fed; width:300;height:450;}

=== added file 'ErModeller/canvas.js'
--- ErModeller/canvas.js	1970-01-01 00:00:00 +0000
+++ ErModeller/canvas.js	2013-04-03 11:33:22 +0000
@@ -0,0 +1,604 @@
+		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) {
+//			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);
+//			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

=== modified file 'ErModeller/canvas_ER_demo_duggajs.html'
--- ErModeller/canvas_ER_demo_duggajs.html	2013-04-02 07:26:15 +0000
+++ ErModeller/canvas_ER_demo_duggajs.html	2013-04-03 11:33:22 +0000
@@ -1,627 +1,25 @@
+<!DOCTYPE html>
 <html>
 	<head>
-		<script type="text/javascript" src="jquery.js"></script>
-		<script lang='Javascript'>
-		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) {
-//			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);
-//			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);
-		}
-	</script>
+	<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>
 	</head>
 	<body onload="setupcanvas();">
 		<table>
 			<tr>
 				<td>
-					<canvas id='a' width='600' height='600' style='border:2px solid black;'>
+					<canvas id='a' width='600' height='600'>
 					</canvas>
 				</td>
 				<td valign="top">
-					<div style="border:2px solid black;background-color:#fed;width:300;height:450;">
-						<div id="infobox" style="padding:4px;">
+					<div id="background">
+						<div id="infobox">
 						   Change values to update diagram.<br>
 						</div>
 					</div>
-				</td>			
+				</td>
 			</tr>
 		</table>
 	</body>

=== added file 'WebGL and Benchmarking/test1shaderstartup.css'
--- WebGL and Benchmarking/test1shaderstartup.css	1970-01-01 00:00:00 +0000
+++ WebGL and Benchmarking/test1shaderstartup.css	2013-04-03 11:33:22 +0000
@@ -0,0 +1,2 @@
+#canvas		{border: none;" width="400" height="400}
+#fps		{}
\ No newline at end of file

=== renamed file 'WebGL and Benchmarking/Test1ShaderStartup.html' => 'WebGL and Benchmarking/test1shaderstartup.html'
--- WebGL and Benchmarking/Test1ShaderStartup.html	2013-03-28 14:57:59 +0000
+++ WebGL and Benchmarking/test1shaderstartup.html	2013-04-03 11:33:22 +0000
@@ -139,7 +139,7 @@
 
 <body onload="genID('Startup Screenaligned'); webGLStart('canvas');">
 
-	<canvas id="canvas" style="border: none;" width="400" height="400"></canvas>
+	<canvas id="canvas"></canvas>
 	<div id="fps"></div>
 
 </body>

=== renamed file 'ErModeller/jquery.js' => 'js/jquery.js'