Implement CONST_m and added Images

3 files changed, 2171 insertions, 1306 deletions

diff --git a/css/common.css b/css/common.css
index 5eb0b45..fb41533 100644
--- a/css/common.css
+++ b/css/common.css
@@ -150,3 +150,25 @@ td.mxPopupMenuIcon {
 	background-color: #D0D0D0;
 	padding: 2px 4px 2px 4px;
 }
+
+/* Properties window - Start */
+
+#contentProperties {
+	border-style: solid;
+	border-width: 1px;
+	margin:10px 10px 10px 10px;
+}
+
+#headingProperties {
+	padding-left:2pc;
+}
+
+#resetButtonProperties{
+	float:right;
+}
+
+#formProperties {
+	margin-right:2pc;
+	margin-left:2pc;
+	margin-bottom:2pc;
+}
diff --git a/details.js b/details.js
index 1681f74..f035fe2 100644
--- a/details.js
+++ b/details.js
@@ -1,204 +1,763 @@
-// All arrays - separated by ',' or ';' or ' ' are taken to be 1 Dimensional
 // Only during printing, their nomenclature will change
 // Good read: http://javascript.info/tutorial/arguments#keyword-arguments
+/*
+Author name: ASP1234, Chhavi2208
+*/
+/*
+function findModel() {
+	var model = ["model", "sim", "in", "in2", "intyp", "out", "out2", "outtyp", "evtin", "evtout", "state", "dstate", "odstate", "rpar", "ipar", "opar", "blocktype", "firing", "dep_ut", "label", "nzcross", "nmode", "equations", "uid"];
+	return model.indexOf(arguments[0]);
+}
+
+function findBlock() {
+	var block = ["Block", "graphics", "model", "gui", "doc"];
+	return block.indexOf(arguments[0]);
 
-function scicos_block() {
-	var options = arguments[0] || new Object();
-	this.graphics = options.graphics || new scicos_graphics();
-	this.model = options.model || new scicos_model();
-	this.gui = options.gui || '';
-	this.docs = options.docs || [];
 }
 
-function scicos_graphics() {
-	var options = arguments[0] || new Object();
-	this.orig = options.orig || [0, 0];
-	this.sz = options.sz || [80, 80]; // Space and comma works the same!
-	this.flip = options.flip || true;
-	this.theta = options.theta || 0;
-	this.exprs = options.exprs || [];
-	this.pin = options.pin || [];
-	this.pout = options.pout || [];
-	this.pein = options.pein || [];
-	this.peout = options.peout || [];
-	this.gr_i = options.gr_i || [];
-	this.id = options.id || '';
-	this.in_implicit = options.in_implicit || [];
-	this.out_implicit = options.out_implicit || ''; // There is only one!
-	this.in_style = options.in_style || [];
-	this.out_style = options.out_style || '';
-	this.in_label = options.in_label || [];
-	this.out_label = options.out_label || '';
-	this.style = options.style || '';
+function findGraphics() {
+	var graphics = ["graphics", "orig", "sz", "flip", "theta", "exprs", "pin", "pout", "pein", "peout", "gr_i", "id", "in_implicit", "out_implicit", "in_style", "out_style", "in_label", "out_label", "style"];
+	return graphics.indexOf(arguments[0]);
 }
+*/
+//graphics start
+const orig=1;
+const sz=2;
+const flip=3;
+const theta=4;
+const exprs=5;
+const pin=6;
+const pout=7;
+const pein=8;
+const peout=9;
+const gr_i=10;
+const id=11;
+const in_implicit=12;
+const out_implicit=13;
+const in_style=14;
+const out_style=15;
+const in_label=16;
+const out_label=17;
+const style=18;
+// graphics end
+
+//model begins
+const sim=1;
+const in1=2; //Can't use 'in' as const name -- keyword in javascript
+const in2=3;
+const intyp=4;
+const out=5;
+const out2=6;
+const outtyp=7;
+const evtin=8;
+const evtout=9;
+const state=10;
+const dstate=11;
+const odstate=12;
+const rpar=13;
+const ipar=14;
+const opar=15;
+const blocktype=16;
+const firing=17;
+const dep_ut=18;
+const label=19;
+const nzcross=20;
+const nmode=21;
+const equations=22;
+const uid=23;
+//model ends
+
+//block begin
+const graphics=1;
+const model=2;
+const gui=3;
+const doc=4;
+//block ends
+
+//Diagram begins
+const props=1;
+const objs=2;
+const version=3;
+const contrib=4;
+//Diagram ends
+
+//Params begins
+const wpar=1;
+const title=2;
+const tol=3;
+const tf=4;
+const context=5;
+const void1=6;
+const options=7;
+const void2=8;
+const void3=9;
+//const doc=10;
+//Params ends
+
+//Default options begins
+const D3=1; // 3D
+const Background=2;
+const Link=3;
+const ID=4;
+const Cmap=5;
+//Default options ends
 
-function scicos_model() {
+function scicos_block() {
 	var options = arguments[0] || new Object();
-	this.sim = options.sim || '';
-	this.in = options.in || [];
-	this.in2 = options.in2 || [];
-	this.intyp = options.intyp || [];
-	this.out = options.out || [];
-	this.out2 = options.out2 || [];
-	this.outtyp = options.outtyp || 1;
-	this.evtin = options.evtin || [];
-	this.evtout = options.evtout || [];
-	this.state = options.state || [];
-	this.dstate = options.dstate || [];
-	this.odstate = options.odstate || [];
-	this.ipar = options.ipar || [];
-	this.rpar = options.rpar || [];
-	this.opar = options.opar || [];
-	this.blocktype = options.blocktype || 'c';
-	this.firing = options.firing || [];
-	this.dep_ut = options.dep_ut || [false, false];
-	this.label = options.label || ''; // If label not available, use image
-	this.nzcross = options.nzcross || 0;
-	this.nmode = options.nmode || 0;
-	this.equations = options.equations || [];
-	this.uid = options.uid || '';	
-}
+	var i = 0;
+	var l = 0;
 
-// This might also have to be overloaded
-function scicos_diagram() {
-	this.props = new scicos_params();
-	this.objs = [];
-	this.version = '';
-	this.contrib = [];
-}
+	this.type = new ScilabString(new data("block", i++, l), new data("graphics", i++, l), new data("model", i++, l), new data("gui", i++, l), new data("docs", i++, l));
+	this.graphics = options.graphics || new scicos_graphics();
+	this.model = options.model || new scicos_model();
+	this.gui = options.gui || new ScilabString();
+	this.docs = options.docs || list();
 
-// This might also have to be overloaded
-function scicos_params() {
-	this.wpar = [600, 450, 0, 0, 600, 450];
-	this.titlex = 'Untitled';
-	this.tf = 100000;
-	this.tol = [Math.pow(10, -6), Math.pow(10, -6), Math.pow(10, -10), this.tf+1, 0, 1, 0];
-	this.context = [];
-	this.void1 = [];
-	this.options = new default_options();
-	this.void2 = [];
-	this.void3 = [];
-	this.doc = [];
+	return mlist(this.type, this.graphics, this.model, this.gui, this.docs);
 }
 
-// This might also have to be overloaded
-function default_options() {
-	var options = new Object();
-    var col3d = [0.8, 0.8, 0.8];
-    options['3D'] = [true, 33];
-    options['Background'] = [8, 1]; // white,black
-    options['Link'] = [1, 5]; // black,red
-    options['ID'] = [[4, 1, 10, 1], [4, 1, 2, 1]];
-    options['Cmap'] = col3d;
-    return options;
-}
+function scicos_graphics() {
+	var options = arguments[0] || new Object();
+	var i = 0;
+	var l = 0;
+
+	this.type = new ScilabString(new data("graphics", i++, l), new data("orig", i++, l), new data("sz", i++, l), new data("flip", i++, l), new data("theta", i++, l), new data("exprs", i++, l), new data("pin", i++, l), new data("pout", i++, l), new data("pein", i++, l), new data("peout", i++, l), new data("gr_i", i++, l), new data("id", i++, l), new data("in_implicit", i++, l), new data("out_implicit", i++, l), new data("in_style", i++, l), new data("out_style", i++, l), new data("in_label", i++, l), new data("out_label", i++, l), new data("style", i++, l));
+	this.orig = options.orig || new ScilabDouble(new data(0, 0, 0), new data(0, 1, 0));
+	this.sz = options.sz || new ScilabDouble(new data(80, 0, 0), new data(80, 1, 0));
+	this.flip = options.flip || new ScilabBoolean(new data("true", 0, 0));
+	this.theta = options.theta || new ScilabDouble(new data(0, 0, 0));
+	this.exprs = options.exprs || new ScilabDouble();
+	this.pin = options.pin || new ScilabDouble();;
+	this.pout = options.pout || new ScilabDouble();;
+	this.pein = options.pein || new ScilabDouble();;
+	this.peout = options.peout || new ScilabDouble();;
+	this.gr_i = options.gr_i || new ScilabString();
+	this.id = options.id || new ScilabString(new data("", 0, 0));
+	this.in_implicit = options.in_implicit || new ScilabDouble();
+	this.out_implicit = options.out_implicit || new ScilabDouble();
+	this.in_style = options.in_style || new ScilabDouble();
+	this.out_style = options.out_style || new ScilabDouble();
+	this.in_label = options.in_label || new ScilabDouble();
+	this.out_label = options.out_label || new ScilabDouble();
+	this.style = options.style || new ScilabString();
+
+	return mlist(this.type, this.orig, this.sz, this.flip, this.theta, this.exprs, this.pin, this.pout, this.pein, this.peout, this.gr_i, this.id, this.in_implicit, this.out_implicit, this.in_style, this.out_style, this.in_label, this.out_label, this.style);
+
 
-function zeros(n){
-	return new Array(n+1).join('0').split('').map(parseFloat);
 }
 
 function standard_define() {
 	var sz = arguments[0];
 	var model = arguments[1];
 	var label = arguments[2];
-	var gr_i = arguments[3] || [];
-	
-	var pin = [];
-	var pout = [];
-	var pein = [];
-	var peout = [];
-	
-	var nin = model.in.length;
-	if(nin > 0){
+	var gr_i = arguments[3] || new ScilabString();
+
+	var pin = new ScilabDouble();
+	var pout = new ScilabDouble();
+	var pein = new ScilabDouble();
+	var peout = new ScilabDouble();
+
+	var nin = model[in1].length;
+	if (nin > 0) {
 		pin = zeros(nin);
 	}
-	var nout = model.out.length;
-	if(nout > 0){
+	var nout = model[out].length;
+	if (nout > 0) {
 		pout = zeros(nout);
 	}
-	var ncin = model.evtin.length;
-	if(ncin > 0){
+	var ncin = model[evtin].length;
+	if (ncin > 0) {
 		pein = zeros(ncin);
 	}
-	var ncout = model.evtout.length;
-	if(ncout > 0){
+	var ncout = model[evtout].length;
+	if (ncout > 0) {
 		peout = zeros(ncout);
 	}
-	gr_i = [gr_i, 8];
-	if(gr_i[1] == []){
-		gr_i[1] = 8;
+
+	gr_i = list(gr_i, new ScilabDouble(new data(8, 0, 0)));
+	
+	if (gr_i[1] == []) {
+		gr_i[1] = new ScilabDouble(new data(8, 0, 0));
 	}
-	if(gr_i[1] == 0){
-		gr_i[1] = [];
+	if (gr_i[1] == 0) {
+		gr_i[1] = new ScilabDouble();
 	}
+
 	var graphics_options = {
-	  sz: sz,
-	  pin: pin,
-	  pout: pout,
-	  pein: pein,
-	  peout: peout,
-	  gr_i: gr_i,
-	  exprs: label
+		sz: sz,
+		pin: pin,
+		pout: pout,
+		pein: pein,
+		peout: peout,
+		gr_i: gr_i,
+		exprs: label
 	};
 	var graphics = new scicos_graphics(graphics_options);
 	var block_options = {
-	  graphics: graphics,
-	  model: model,
-	  gui: arguments.callee.caller.name
+		graphics: graphics,
+		model: model,
+		gui: new ScilabString(new data(arguments.callee.caller.name, 0, 0))
 	};
 	return new scicos_block(block_options);
 }
 
-function scicos_link (){
-	this.xx = [];
-	this.yy = [];
-	this.id = '';
-	this.thick = [0, 0];
-	this.ct = [1, 1];
-	this.from = [];
-	this.to = [];
+function ScilabString() {
+	var i = 0;
+
+	for (i = 0; i < arguments.length; i++)
+		this['data' + i] = arguments[i];
+	if(arguments.length>1)
+	{
+		if(arguments[arguments.length-1].line>0)
+		{
+			this.height=arguments.length;
+			this.width=arguments[0].column+1;
+		}
+		else
+		{
+			this.height = arguments[0].line+1;
+			this.width = arguments.length;
+		}
+	}
+
+}
+
+function ScilabBoolean() {
+	var i = 0;
+
+	for (i = 0; i < arguments.length; i++)
+		this['data' + i] = arguments[i];
+	if(arguments.length>1)
+	{
+		if(arguments[arguments.length-1].line>0)
+		{
+			this.height=arguments.length;
+			this.width=arguments[0].column+1;
+		}
+		else
+		{
+			this.height = arguments[0].line+1;
+			this.width = arguments.length;
+		}
+	}
 }
 
-function ANDLOG_f(){
-    var model = new scicos_model();
-    model.sim = "andlog";
-    model.out = [1];
-    model.out2 = [1]; // null -> 1
-    model.evtin = [-1,-1]; // 1, 1 -> -1, -1
-    model.blocktype = "d";
-    model.firing = [];
-    model.dep_ut = [false, false];
-    var gr_i = "xstringb(orig(1),orig(2),txt,sz(1),sz(2),'fill');";
-    var block = new standard_define([80,80], model, 'LOGICAL<BR>AND', gr_i); // 3 -> 80
-    
-    // Style
-    block.graphics.out_implicit = "E";
-    //block.graphics.out_style = "ExplicitOutputPort;align=right;verticalAlign=middle;spacing=10.0;rotation=0";
-    block.graphics.style = "ANDLOG_f";
-    return block;
+function ScilabDouble() {
+	var i = 0;
+
+	for (i = 0; i < arguments.length; i++)
+		this['data' + i] = arguments[i]
+	if(arguments.length>1)
+	{
+		if(arguments[arguments.length-1].line>0) //@ASP1234 Inverse Array
+		{
+			this.height=arguments.length;
+			this.width=arguments[0].column+1;
+		}
+		else									//@ASP1234 Normal Array
+		{
+			this.height = arguments[0].line+1;
+			this.width = arguments.length;
+		}
+	}
 }
 
+function isNumber(obj) {
+	if(obj==="")
+		return false;
+	if(typeof obj == "string")
+		return false;
+		return !isNaN(obj);
+}
 
+function data() {
+	if (isNumber(arguments[0])) {
+		this.column = arguments[1];
+		this.line = arguments[2];
+		this.realPart = arguments[0];
+	}
 
+	else {
+		this.column = arguments[1];
+		this.line = arguments[2];
+		this.value = arguments[0];
+	}
 
+}
 
+function list() {
+	this.ScilabList = [];
+	var i = 0;
 
+	for (i = 0; i < arguments.length; i++)
+		this.ScilabList.push(arguments[i]);
 
+	this.ScilabList.scilabClass = "ScilabList";
 
+	return this.ScilabList;
 
+}
 
+function mlist() {
+	this.ScilabMList = [];
+	var i = 0;
 
+	for (i = 0; i < arguments.length; i++)
+		this.ScilabMList.push(arguments[i]);
+		
+	this.ScilabMList.varName="";
+	this.ScilabMList.scilabClass = "ScilabMList";
 
+	return this.ScilabMList;
 
+}
 
+function tlist() {
+	this.ScilabTList = [];
+	var i = 0;
 
+	for (i = 0; i < arguments.length; i++)
+		this.ScilabTList.push(arguments[i]);
 
+	this.ScilabTList.scilabClass = "ScilabTList";
 
+	return this.ScilabTList;
 
+}
 
 
+function scicos_model() {
+	var options = arguments[0] || new Object();
+	var i = 0;
+	var l = 0
+
+	this.type = new ScilabString(new data("model", i++, l), new data("sim", i++, l), new data("in", i++, l), new data("in2", i++, l), new data("intyp", i++, l), new data("out", i++, l), new data("out2", i++, l), new data("outtyp", i++, l), new data("evtin", i++, l), new data("evtout", i++, l), new data("state", i++, l), new data("dstate", i++, l), new data("odstate", i++, l), new data("rpar", i++, l), new data("ipar", i++, l), new data("opar", i++, l), new data("blocktype", i++, l), new data("firing", i++, l), new data("dep_ut", i++, l), new data("label", i++, l), new data("nzcross", i++, l), new data("nmode", i++, l), new data("equations", i++, l), new data("uid", i++, l));
+	this.sim = options.sim || new ScilabString();
+	this.in = options.in || new ScilabDouble();
+	this.in2 = options.in2 || new ScilabDouble();
+	this.intyp = options.intyp || new ScilabDouble();//new data(1, 0, 0)
+	this.out = options.out || new ScilabDouble();
+	this.out2 = options.out2 || new ScilabDouble();
+	this.outtyp = options.outtyp || new ScilabDouble(new data(1, 0, 0));
+	this.evtin = options.evtin || new ScilabDouble();
+	this.evtout = options.evtout || new ScilabDouble();
+	this.state = options.state || new ScilabDouble();
+	this.dstate = options.dstate || new ScilabDouble();
+	this.odstate = options.odstate || list();
+	this.ipar = options.ipar || new ScilabDouble();
+	this.rpar = options.rpar || new ScilabDouble();
+	this.opar = options.opar || list();//new ScilabDouble();
+	this.blocktype = options.blocktype || new ScilabString(new data('c', 0, 0));
+	this.firing = options.firing || new ScilabDouble();
+	this.dep_ut = options.dep_ut || new ScilabBoolean(new data('false', 0, 0), new data('false', 1, 0));
+	this.label = options.label || new ScilabString(new data("",0,0)); // If label not available, use image
+	this.nzcross = options.nzcross || new ScilabDouble(new data(0, 0, 0));
+	this.nmode = options.nmode || new ScilabDouble(new data(0, 0, 0));;
+	this.equations = options.equations || list();
+	this.uid = options.uid || new ScilabString();
+
+	return mlist(this.type, this.sim, this.in, this.in2, this.intyp, this.out, this.out2, this.outtyp, this.evtin, this.evtout, this.state, this.dstate, this.odstate, this.ipar, this.rpar, this.opar, this.blocktype, this.firing, this.dep_ut, this.label, this.nzcross, this.nmode, this.equations, this.uid);
+}
 
 
 
+function scicos_diagram() {
+	
+	var options = arguments[0] || new Object();
+	var i = 0;
+	var l = 0;
+	
+	this.type2=new ScilabString(new data("diagram",i++,l),new data("props",i++,l),new data("objs",i++,l),new data("version",i++,l),new data("contrib",i++,l));
+	this.props = options.props|| scicos_params();
+	this.objs = options.objs || list();
+	this.version = options.version || new ScilabString(new data("",0,0));
+	this.contrib = options.contrib || list();
+	
+	return mlist(this.type2,this.props,this.objs,this.version,this.contrib);
+}
+
 
+function scicos_params() {
+	
+	var options = arguments[0] || new Object();
+	var i = 0;
+	var l = 0;
+	
+	this.type=new ScilabString(new data("params",i++,l),new data("wpar",i++,l),new data("title",i++,l),new data("tol",i++,l),new data("tf",i++,l),new data("context",i++,l),new data("void1",i++,l),new data("options",i++,l),new data("void2",i++,l),new data("void3",i++,l),new data("doc",i++,l));
+	this.wpar = options.wpar || new ScilabDouble(new data(600,0,0),new data(450,1,0),new data(0,2,0),new data(0,3,0),new data(600,4,0),new data(450,5,0));
+	this.titlex = options.title||options.Title||new ScilabString(new data("Untitled",0,0));
+	this.tf = options.tf|| new ScilabDouble(new data(100000,0,0));
+	this.tol = options.tol|| new ScilabDouble(new data(Math.pow(10, -6),0,0),new data(Math.pow(10, -6),0,1),new data(Math.pow(10, -10),0,2),new data(100001,0,3),new data(0,0,4),new data(1,0,5),new data(0,0,6));
+	this.context = options.context|| new ScilabString(new data("",0,0));
+	this.void1 = new ScilabDouble();
+	this.options = options.options||new default_options();
+	this.void2 = new ScilabDouble();
+	this.void3 = new ScilabDouble();
+	this.doc = options.doc || list();
+	
+	
+	return tlist(this.type,this.wpar,this.titlex,this.tol,this.tf,this.context,this.void1,this.options,this.void2,this.void3,this.doc);
+	
+}
 
+// This might also have to be overloaded
+function default_options() {
+	
+	var i=0;
+	var l=0;
+	
+	this.type=new ScilabString(new data("scsopt",i++,l),new data("3D",i++,l),new data("Background",i++,l),new data("Link",i++,l),new data("ID",i++,l),new data("Cmap",i++,l));
+	this.D3=list(new ScilabBoolean(new data("true",0,0)),new ScilabDouble(new data(33,0,0)));
+	this.Background=new ScilabDouble(new data(8,0,0),new data(1,1,0));
+	this.Link=new ScilabDouble(new data(1,0,0),new data(5,1,0));
+	this.ID=list(new ScilabDouble(new data(4,0,0),new data(1,1,0),new data(10,2,0),new data(1,3,0)),new ScilabDouble(new data(4,0,0),new data(1,1,0),new data(2,2,0),new data(1,3,0)));
+	this.Cmap=new ScilabDouble(new data(0.8,0,0),new data(0.8,1,0),new data(0.8,2,0));
+	
+	return tlist(this.type,this.D3,this.Background,this.Link,this.ID,this.Cmap);
+}
+//Returns ScilabDouble which contains a list with size =n and all values=0
+function zeros(n) {
+	var arg=new  Array(n + 1).join('0').split('').map(parseFloat);
+	var port = new ScilabDouble();
+	var i = 0;
+
+	for (i = 0; i < arg[0].length; i++)
+		port.list.push(new data(arg[0][i], i, 0));
+
+	return port;
+}
+
+
+function scicos_link() {
+	var options=arguments[0];
+	var i=0;
+	var l=0;
+	this.type = new ScilabString(new data("Link", i++, l),new data("xx", i++, l),new data("yy", i++, l),new data("id", i++, l),new data("thick", i++, l),new data("ct", i++, l),new data("from", i++, l),new data("to", i++, l));
+	this.xx = options.xx || new ScilabDouble(); //inverse array
+	this.yy = options.yy || new ScilabDouble(); //inverse array
+	this.id = options.id || new ScilabString();
+	this.thick =options.thick || new ScilabDouble(new data(0,0,0),new data(0,1,0));
+	this.ct = options.ct || new ScilabDouble(new data(1,0,0), new data(1,1,0));
+	this.from = options.from || new ScilabDouble();
+	this.to = options.xx || new ScilabDouble();
+	
+	return mlist(this.type,this.xx,this.yy,this.id,this.thick,this.ct,this.from,this.to);
+}
+
+function CLKIN_f() {
+	var model = scicos_model();
+	var port=1;
+	
+	model[sim] = new ScilabString(new data('input', 0, 0));
+	model[evtout] = new ScilabDouble(); // 1, 1 -> -1, -1
+	model[ipar]=new ScilabDouble(new data(port,0,0));
+	model[blocktype] = new ScilabString(new data('d', 0, 0));
+	model[firing] = new ScilabDouble(new data(-1,0,0));
+	model[dep_ut] = new ScilabBoolean(new data('false', 0, 0), new data('false', 1, 0));
+	
+	var exprs=ScilabString(new data(""+port,0,0));
+	var gr_i = new ScilabString(new data("xstringb(orig(1),orig(2),\"CLKIN_f\",sz(1),sz(2));", 0, 0));
+	var block = new standard_define(new ScilabDouble(new data(80, 0, 0), new data(80, 1, 0)), model,exprs,gr_i); // 1 -> 80
+	
+	block[graphics][style] = new ScilabString(new data("CLKIN_f", 0, 0));
+	return block
+}
+
+function CLKOUT_f() {
+	var model = scicos_model();
+	var port=1;
+	
+	model[sim] = new ScilabString(new data('output', 0, 0));
+	model[evtin] = new ScilabDouble(new data(-1,0,0)); // 1, 1 -> -1, -1
+	model[ipar]=new ScilabDouble(new data(port,0,0));
+	model[blocktype] = new ScilabString(new data('d', 0, 0));
+	model[firing] = new ScilabDouble();
+	model[dep_ut] = new ScilabBoolean(new data('false', 0, 0), new data('false', 1, 0));
+	
+	var exprs=ScilabString(new data(""+port,0,0));
+	var gr_i = new ScilabString(new data("xstringb(orig(1),orig(2),\"CLKOUT_f\",sz(1),sz(2));", 0, 0));
+	var block = new standard_define(new ScilabDouble(new data(80, 0, 0), new data(80, 1, 0)), model,exprs,gr_i); // 1 -> 80
+	
+	block[graphics][style] = new ScilabString(new data("CLKOUT_f", 0, 0));
+	return block
+}
+
+
+function IFTHEL_f() {
+	var model = scicos_model();
+	model[sim] = list(new ScilabString(new data('ifthel', 0, 0)),new ScilabDouble(new data(-1,0,0)));
+	model[in1]=new ScilabDouble(new data(1,0,0));
+	model[in2]=new ScilabDouble(new data(1,0,0));
+	model[intyp]=new ScilabDouble(new data(-1,0,0));
+	model[evtin]=new ScilabDouble(new data(-1,0,0));
+	model[evtout] = new ScilabDouble(new data(-1, 0, 0), new data(-1, 0, 1)) // 1, 1 -> -1, -1 inverse
+	model[blocktype] = new ScilabString(new data('l', 0, 0));
+	model[firing] = new ScilabDouble(new data(-1, 0, 0), new data(-1, 0, 1)); // inverse
+	model[dep_ut] = new ScilabBoolean(new data('true', 0, 0), new data('false', 1, 0));
+	model[nmode] = new ScilabDouble(new data(1,0,0));
+	model[nzcross] = new ScilabDouble(new data(1,0,0));
+	
+	var gr_i = new ScilabString(new data("xstringb(orig(1),orig(2),\"IFTHEL_f\",sz(1),sz(2));", 0, 0));
+	var exprs=new ScilabString(new data("1",0,0),new data("1",0,1)); //value model.in, model.nmode inverse
+	var block = new standard_define(new ScilabDouble(new data(80, 0, 0), new data(80, 1, 0)), model, exprs, gr_i); // 3 -> 80
+	block[graphics][style] = new ScilabString(new data("IFTHEL_f", 0, 0));
+	return block;
+}
+
+
+
+function CLKSPLIT_f() {
+	var model = scicos_model();
+	model[sim] = new ScilabString(new data('split', 0, 0));
+	model[evtin]=new ScilabDouble(new data(-1,0,0));
+	model[evtout] = new ScilabDouble(new data(-1, 0, 0), new data(-1, 0, 1)) // 1, 1 -> -1, -1 inverse
+	model[blocktype] = new ScilabString(new data('d', 0, 0));
+	model[firing] = new ScilabDouble(new data(-1, 0, 0), new data(-1, 0, 1)); // inverse
+	model[dep_ut] = new ScilabBoolean(new data('true', 0, 0), new data('false', 1, 0));
+	
+	var gr_i = new ScilabString(new data("xstringb(orig(1),orig(2),\"CLKSPLIT_f\",sz(1),sz(2));", 0, 0));
+	
+	var block = new standard_define(new ScilabDouble(new data(80, 0, 0), new data(80, 1, 0)), model, new ScilabDouble(), gr_i); // 1 -> 80
+	block[graphics][style] = new ScilabString(new data("CLKSPLIT_f", 0, 0));
+	return block;
+}
+
+
+function ANDLOG_f() {
+	var model = scicos_model();
+	model[sim] = new ScilabString(new data('andlog', 0, 0));
+	model[out] = new ScilabDouble(new data(1, 0, 0));
+	model[out2] = new ScilabDouble(new data(1, 0, 0)); // null -> 1
+	model[evtin] = new ScilabDouble(new data(-1, 0, 0), new data(-1, 1, 0)) // 1, 1 -> -1, -1
+	model[blocktype] = new ScilabString(new data('d', 0, 0));
+	model[firing] = new ScilabDouble();
+	model[dep_ut] = new ScilabBoolean(new data('false', 0, 0), new data('false', 1, 0));
+
+	var gr_i = new ScilabString(new data("xstringb(orig(1),orig(2),\"ANDLOG_f\",sz(1),sz(2));", 0, 0));
+	var block = new standard_define(new ScilabDouble(new data(80, 0, 0), new data(80, 1, 0)), model, new ScilabDouble(), gr_i); // 3 -> 80
+	
+	// Style
+	block[graphics][out_implicit] = new ScilabString(new data("E",0,0));
+	//block.graphics.out_style = "ExplicitOutputPort;align=right;verticalAlign=middle;spacing=10.0;rotation=0";
+	block[graphics][style] = new ScilabString(new data("ANDLOG_f", 0, 0));
+	return block;
+}
+
+function BasicBlock()
+{
+	switch(arguments[0])
+	{
+		case "ANDBLK":
+			var attributes = {
+				style: "ANDBLK",
+				simulationFunctionName: "csuper",
+				simulationFunctionType: "DEFAULT",
+				blockType: "h",
+				interfaceFunctionName: "ANDBLK"
+			};
+			break;
+		case "CONST_m":
+			var attributes = {
+				style: "CONST_m",
+				simulationFunctionName: "cstblk4",
+				simulationFunctionType: "C_OR_FORTRAN",
+				blockType: "d",
+				interfaceFunctionName: "CONST_m"
+			};
+			break;
+	}
+	var options = attributes || new Object();
+	
+	this.angle=options.angle||"";
+	this.blockType=options.blockType||"";
+	this.connectable=options.connectable||"";
+	this.dependsOnT=options.dependsOnT||"";
+	this.dependsOnU=options.dependsOnU||"";
+	this.id=options.id||"";
+	this.interfaceFunctionName=options.interfaceFunctionName||"";
+	this.ordering=options.ordering||"";
+	this.parent=options.parent||"";
+	this.simulationFunctionName=options.simulationFunctionName||"";
+	this.simulationFunctionType=options.simulationFunctionType||"";
+	this.style=options.style||"";
+	this.value=options.value||"";
+	this.vertex=options.vertex||"";
+	this.visible=options.visible||"";
+	
+	switch(arguments[0])
+	{
+		case "ANDBLK":
+			this.realParameters=ANDBLK();
+			break;
+		case "CONST_m":
+			this.realParameters=CONST_m("define");
+			break;
+	}
+}
+
+function ANDBLK() {
+	
+	var andlog=ANDLOG_f("define");
+	andlog[graphics][orig]=new ScilabDouble(new data(194,0,0),new data(133,1,0));
+	andlog[graphics][sz]=new ScilabDouble(new data(60,0,0),new data(60,1,0));
+	andlog[graphics][flip]=new ScilabBoolean(new data("true",0,0));
+	andlog[graphics][pout]=new ScilabDouble(new data(9,0,0));
+	andlog[graphics][pein]=new ScilabDouble(new data(4,0,0),new data(11,0,1));
+	
+	var input_port1=CLKIN_f("define");
+	input_port1[graphics][orig]=new ScilabDouble(new data(149,0,0),new data(287,1,0));
+	input_port1[graphics][sz]=new ScilabDouble(new data(20,0,0),new data(20,1,0));
+	input_port1[graphics][flip]=new ScilabBoolean(new data("true",0,0));
+	input_port1[graphics][exprs]=new ScilabString(new data("1",0,0));
+	input_port1[graphics][peout]=new ScilabDouble(new data(4,0,0));
+	input_port1[graphics][ipar]=new ScilabDouble(new data(1,0,0));
+	
+	var output_port=CLKOUT_f("define");
+	output_port[graphics][orig]=new ScilabDouble(new data(450,0,0),new data(83,1,0));
+	output_port[graphics][sz]=new ScilabDouble(new data(20,0,0),new data(20,1,0));
+	output_port[graphics][flip]=new ScilabBoolean(new data("true",0,0));
+	output_port[graphics][exprs]=new ScilabString(new data("1",0,0));
+	output_port[graphics][pein]=new ScilabDouble(new data(8,0,0));
+	output_port[graphics][ipar]=new ScilabDouble(new data(1,0,0));
+	
+	var input_port2=CLKIN_f("define");
+	input_port2[graphics][orig]=new ScilabDouble(new data(141,0,0),new data(330,1,0));
+	input_port2[graphics][sz]=new ScilabDouble(new data(20,0,0),new data(20,1,0));
+	input_port2[graphics][flip]=new ScilabBoolean(new data("true",0,0));
+	input_port2[graphics][exprs]=new ScilabString(new data("2",0,0));
+	input_port2[graphics][peout]=new ScilabDouble(new data(6,0,0));
+	input_port2[graphics][ipar]=new ScilabDouble(new data(2,0,0));
+	
+	var ifthel=IFTHEL_f("define");
+	ifthel[graphics][orig]=new ScilabDouble(new data(331,0,0),new data(137,1,0));
+	ifthel[graphics][sz]=new ScilabDouble(new data(60,0,0),new data(60,1,0));
+	ifthel[graphics][flip]=new ScilabBoolean(new data("true",0,0));
+	ifthel[graphics][pin]=new ScilabDouble(new data(9,0,0));
+	ifthel[graphics][pein]=new ScilabDouble(new data(12,0,0));
+	ifthel[graphics][peout]=new ScilabDouble(new data(8,0,0),new data(0,0,1));
+	
+	var split=CLKSPLIT_f("define");
+	split[graphics][orig]=new ScilabDouble(new data(234,0,0),new data(275.78348,1,0));
+	split[graphics][pein]=new ScilabDouble(new data(6,0,0));
+	split[graphics][peout]=new ScilabDouble(new data(11,0,0),new data(12,1,0));
+	
+	var diagram=scicos_diagram();
+	diagram[objs].push(andlog);
+	diagram[objs].push(input_port1);
+	diagram[objs].push(output_port);
+	var scicos_link1={xx : new ScilabDouble(new data(169,0,0),new data(214,1,0),new data(214,2,0)), 
+					  yy : new ScilabDouble(new data(297,0,0),new data(297,1,0),new data(198.71,2,0)),
+					  ct : new ScilabDouble(new data(5,0,0),new data(-1,1,0)),
+					  from : new ScilabDouble(new data(2,0,0),new data(1,1,0)),
+					  to : new ScilabDouble(new data(1,0,0),new data(1,1,0))
+	};
+	diagram[objs].push(scicos_link(scicos_link1));
+	diagram[objs].push(input_port2);
+	var scicos_link2={xx : new ScilabDouble(new data(161,0,0),new data(234,1,0),new data(234,2,0)), 
+					  yy : new ScilabDouble(new data(340,0,0),new data(340,1,0),new data(275.78,2,0)),
+					  ct : new ScilabDouble(new data(5,0,0),new data(-1,1,0)),
+					  from : new ScilabDouble(new data(5,0,0),new data(1,1,0)),
+					  to : new ScilabDouble(new data(10,0,0),new data(1,1,0))
+	};
+	diagram[objs].push(scicos_link(scicos_link2));
+	diagram[objs].push(ifthel);
+	var scicos_link3={xx : new ScilabDouble(new data(351,0,0),new data(351,1,0),new data(450,2,0)), 
+					  yy : new ScilabDouble(new data(131.29,0,0),new data(93,1,0),new data(93,2,0)),
+					  ct : new ScilabDouble(new data(5,0,0),new data(-1,1,0)),
+					  from : new ScilabDouble(new data(7,0,0),new data(1,1,0)),
+					  to : new ScilabDouble(new data(3,0,0),new data(1,1,0))
+	};
+	diagram[objs].push(scicos_link(scicos_link3));
+	var scicos_link4={xx : new ScilabDouble(new data(262.57,0,0),new data(322.43,1,0)), 
+					  yy : new ScilabDouble(new data(163,0,0),new data(167,1,0)),
+					  ct : new ScilabDouble(new data(1,0,0),new data(1,1,0)),
+					  from : new ScilabDouble(new data(1,0,0),new data(1,1,0)),
+					  to : new ScilabDouble(new data(7,0,0),new data(1,1,0))
+	};
+	diagram[objs].push(scicos_link(scicos_link4));
+	diagram[objs].push(split);
+	var scicos_link5={xx : new ScilabDouble(new data(234,0,0),new data(234,1,0)), 
+					  yy : new ScilabDouble(new data(275.78,0,0),new data(198.71,1,0)),
+					  ct : new ScilabDouble(new data(5,0,0),new data(-1,1,0)),
+					  from : new ScilabDouble(new data(10,0,0),new data(1,1,0)),
+					  to : new ScilabDouble(new data(1,0,0),new data(2,1,0))
+	};
+	diagram[objs].push(scicos_link(scicos_link5));
+	var scicos_link6={xx : new ScilabDouble(new data(234,0,0),new data(361,1,0),new data(361,2,0)), 
+					  yy : new ScilabDouble(new data(275.78,0,0),new data(275.78,1,0),new data(202.71,2,0)),
+					  ct : new ScilabDouble(new data(5,0,0),new data(-1,1,0)),
+					  from : new ScilabDouble(new data(10,0,0),new data(2,1,0)),
+					  to : new ScilabDouble(new data(7,0,0),new data(1,1,0))
+	};
+	diagram[objs].push(scicos_link(scicos_link6));
+	
+	
+	var x=scicos_block();
+	x[gui]=new ScilabString(new data("ANDBLK",0,0));
+	x[graphics][sz]= new ScilabDouble(new data(2,0,0),new data(2,1,0));
+	x[graphics][gr_i]=new ScilabDouble();
+	x[graphics][pein]=new ScilabDouble(new data(0,0,0),new data(0,1,0));
+	x[graphics][peout]=new ScilabDouble(new data(0,0,0));
+	x[model][sim]= new ScilabString(new data("csuper",0,0));
+	x[model][evtin]=new ScilabDouble(new data(1,0,0), new data(1,1,0));
+	x[model][evtout]=new ScilabDouble(new data(1,0,0));
+	x[model][blocktype]= new ScilabString(new data("h",0,0));
+	x[model][firing]= new ScilabBoolean(new data("false",0,0));
+	x[model][dep_ut]= new ScilabBoolean(new data("false",0,0),new data("false",1,0));
+	x[model][rpar]=diagram;
+	return x;
+}
+
+function sci2exp(c)
+{
+	if(c.length==1)
+	return new ScilabString(new data(c.toString(),0,0));
+	else
+	return new ScilabString(new data("["+c.toString()+"]",0,0));
+}
+
+
+function C()
+{
+	var i=0;
+	var arr=[]
+	for(i=0;i<arguments[0].length;i++)
+	{
+		arr.push(new data(arguments[0][i],i,0));
+	}
+	return new ScilabDouble(...arr);
+}
+
+function CONST_m()
+{
+	var c=[1];
+	switch(arguments[0])
+	{
+		
+		case "get":
+			var array=["Constant_Value"];
+			return array;
+		case "set":
+			c=new Array(arguments[1].Constant_Value);
+			console.log(c);
+			break;
+		case "define":
+			console.log(c);
+			var model = scicos_model();
+			model[sim] = list(new ScilabString(new data('cstblk4', 0, 0)),new ScilabDouble(new data(4,0,0)));
+			model[in1]=new ScilabDouble();
+			model[out]=new ScilabDouble(new data(c.length,0,0));
+			model[in2]=new ScilabDouble();
+			model[out2]=new ScilabDouble(new data(c.length,0,0));
+			model[rpar]=C(c);
+			model[opar]=list();
+			model[blocktype] = new ScilabString(new data('d', 0, 0));
+			model[dep_ut] = new ScilabBoolean(new data('false', 0, 0), new data('false', 1, 0));
+			
+			var gr_i = new ScilabString(new data("xstringb(orig(1),orig(2),\"CONST_m\",sz(1),sz(2));", 0, 0));
+			var exprs=sci2exp(c);
+			var block = new standard_define(new ScilabDouble(new data(80, 0, 0), new data(80, 1, 0)), model, exprs, gr_i); // 1 -> 80
+			block[graphics][style] = new ScilabString(new data("CONST_m", 0, 0));
+			return block;
+	}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index d393c65..4ba3077 100644
--- a/index.html
+++ b/index.html
@@ -1,1191 +1,1475 @@
 <html>
+
 <head>
-	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-	<meta content="utf-8" http-equiv="encoding">
-	<title>Xcos</title>
-	<style type="text/css" media="screen">
-		BODY {
-			font-family: Arial;
-		}
-		H1 {
-			font-size: 18px;
-		}
-		H2 {
-			font-size: 16px;
-		}
-	</style>
-
-	<!-- Loads and initializes the library -->
-	<script type="text/javascript" src="mxClient.min.js"></script>
-	<script type="text/javascript" src="editor/mxDefaultKeyHandler.js"></script>
-	<script type="text/javascript" src="handler/mxKeyHandler.js"></script>
-	
-	<link rel="stylesheet" href="jquery/jquery-ui.css">
-	<script src="jquery/jquery-1.8.2.js"></script>
-	<script type="text/javascript" src="details.js"></script>
-	<script type="text/javascript" src="json2.js"></script>
-	<!-- Example code -->
-	<script type="text/javascript">
-		// Program starts here. Creates a sample graph in the
-		// DOM node with the specified ID. This function is invoked
-		// from the onLoad event handler of the document (see below).
-		function main(container, outline, toolbar, sidebar, status)
-		{
-			// Checks if the browser is supported
-			if (!mxClient.isBrowserSupported())
-			{
-				// Displays an error message if the browser is not supported.
-				mxUtils.error('Browser is not supported!', 200, false);
-			}
-			else
-			{
-				// Assigns some global constants for general behaviour, eg. minimum
-				// size (in pixels) of the active region for triggering creation of
-				// new connections, the portion (100%) of the cell area to be used
-				// for triggering new connections, as well as some fading options for
-				// windows and the rubberband selection.
-				mxConstants.MIN_HOTSPOT_SIZE = 16;
-				mxConstants.DEFAULT_HOTSPOT = 1;
-				
-				// Enables guides
-				mxGraphHandler.prototype.guidesEnabled = true;
-
-			    // Alt disables guides
-			    mxGuide.prototype.isEnabledForEvent = function(evt)
-				{
-					return !mxEvent.isAltDown(evt);
-				};
-
-				// Enables snapping waypoints to terminals
-				mxEdgeHandler.prototype.snapToTerminals = true;
-
-				// Workaround for Internet Explorer ignoring certain CSS directives
-				if (mxClient.IS_QUIRKS)
-				{
-					document.body.style.overflow = 'hidden';
-					new mxDivResizer(container);
-					new mxDivResizer(outline);
-					new mxDivResizer(toolbar);
-					new mxDivResizer(sidebar);
-					new mxDivResizer(status);
-				}
-				
-				// Creates a wrapper editor with a graph inside the given container.
-				// The editor is used to create certain functionality for the
-				// graph, such as the rubberband selection, but most parts
-				// of the UI are custom in this example.
-				var editor = new mxEditor();
-				var graph = editor.graph;
-				var model = graph.getModel();
-
-				// Disable highlight of cells when dragging from toolbar
-				graph.setDropEnabled(false);
-
-				// Uses the port icon while connections are previewed
-				graph.connectionHandler.getConnectImage = function(state)
-				{
-					return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);
-				};
-
-				// Centers the port icon on the target port
-				graph.connectionHandler.targetConnectImage = true;
-
-				// Does not allow dangling edges
-				graph.setAllowDanglingEdges(false);
-
-				// Sets the graph container and configures the editor
-				editor.setGraphContainer(container);
-				//var config = mxUtils.load('config/editor-commons.xml').getDocumentElement();
-				var config = mxUtils.load('config/keyhandler-commons.xml').getDocumentElement();
-				editor.configure(config);
-
-				// Disables drag-and-drop into non-swimlanes.
-				graph.isValidDropTarget = function(cell, cells, evt)
-				{
-					return this.isSwimlane(cell);
-				};
-				
-				// Disables drilling into non-swimlanes.
-				graph.isValidRoot = function(cell)
-				{
-					return this.isValidDropTarget(cell);
-				}
-
-				// Does not allow selection of locked cells
-				graph.isCellSelectable = function(cell)
-				{
-					return !this.isCellLocked(cell);
-				};
-				
-				// Returns a shorter label if the cell is collapsed and no
-				// label for expanded groups
-				graph.getLabel = function(cell)
-				{
-					var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"
-					
-					if (this.isCellLocked(cell))
-					{
-						// Returns an empty label but makes sure an HTML
-						// element is created for the label (for event
-						// processing wrt the parent label)
-						return '';
-					}
-					else if (this.isCellCollapsed(cell))
-					{
-						var index = tmp.indexOf('</h1>');
-						
-						if (index > 0)
-						{
-							tmp = tmp.substring(0, index+5);
-						}
-					}
-					
-					return tmp;
-				}
-				
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <title>Xcos</title>
+    <style type="text/css" media="screen">
+        BODY {
+            font-family: Arial;
+        }
 
-				// Disables HTML labels for swimlanes to avoid conflict
-				// for the event processing on the child cells. HTML
-				// labels consume events before underlying cells get the
-				// chance to process those events.
-				//
-				// NOTE: Use of HTML labels is only recommended if the specific
-				// features of such labels are required, such as special label
-				// styles or interactive form fields. Otherwise non-HTML labels
-				// should be used by not overidding the following function.
-				// See also: configureStylesheet.
-				graph.isHtmlLabel = function(cell)
-				{
-					return !this.isSwimlane(cell);
-				}
-
-				// To disable the folding icon, use the following code:
-				graph.isCellFoldable = function(cell)
-				{
-					return false;
-				}
-
-				// Shows a "modal" window when double clicking a vertex.
-				graph.dblClick = function(evt, cell)
-				{
-					// Do not fire a DOUBLE_CLICK event here as mxEditor will
-					// consume the event and start the in-place editor.
-					if (this.isEnabled() &&
-						!mxEvent.isConsumed(evt) &&
-						cell != null &&
-						this.isCellEditable(cell))
-					{
-						if (!this.isHtmlLabel(cell))
-						{
-							this.startEditingAtCell(cell);
-						}
-						else
-						{
-							var content = document.createElement('div');
-							content.innerHTML = this.convertValueToString(cell);
-							showModalWindow(this, 'Properties', content, 400, 300);
-						}
-					}
-
-					// Disables any default behaviour for the double click
-					mxEvent.consume(evt);
-				};
-				
-				graph.getTooltipForCell = function(cell){
-					var text = null;
-					// If cell is a block or port
-					if(cell.source == null && cell.target == null) {
-						if(cell.connectable) { // Cell is a port
-							// @ToDo: Port Number
-							text = 'Style : '+ cell.style + "\n";
-						}
-						else{ //Cell is a block
-							// @ToDo: Block Name, Simulation, Flip, Mirror
-							// @ToDo: Number of Input, Output, Control, Command Ports
-							var geometry = cell.getGeometry();
-							text =  'UID : '+ cell.id + "\n" + 
-									'Style : '+ cell.style + "\n" +
-									'x : '+ geometry.x + "\n" +
-									'y : '+ geometry.y + "\n" +
-									'w : '+ geometry.width + "\n" +
-									'h : '+ geometry.height + "\n";	
-						}
-					}
-					return text;
-				};
-				
-				// Create XML tags!
-				// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
-				// https://jgraph.github.io/mxgraph/docs/js-api/files/model/mxCell-js.html
-				// Uncomment this block to see XML tags work
-				/*graph.convertValueToString = function(cell)
-				{
-				  if (mxUtils.isNode(cell.value))
-				  {
-				    return cell.getAttribute('label', '');
-				  }
-				};*/
-				
-				var cellLabelChanged = graph.cellLabelChanged;
-				graph.cellLabelChanged = function(cell, newValue, autoSize)
-				{
-				  if (mxUtils.isNode(cell.value))
-				  {
-				    // Clones the value for correct undo/redo
-				    var elt = cell.value.cloneNode(true);
-				    elt.setAttribute('label', newValue);
-				    newValue = elt;
-				  }
-				
-				  cellLabelChanged.apply(this, arguments);
-				};
+        H1 {
+            font-size: 18px;
+        }
 
-				// Enables new connections
-				graph.setConnectable(true);
+        H2 {
+            font-size: 16px;
+        }
+    </style>
 
-				// Adds all required styles to the graph (see below)
-				configureStylesheet(graph);
+    <!-- Loads and initializes the library -->
+    <script type="text/javascript" src="mxClient.min.js"></script>
+    <script type="text/javascript" src="editor/mxDefaultKeyHandler.js"></script>
+    <script type="text/javascript" src="handler/mxKeyHandler.js"></script>
 
-				// Adds sidebar icons.
-				addIcons(graph,sidebar);
-				
-				// Creates a new DIV that is used as a toolbar and adds
-				// toolbar buttons.
-				var spacer = document.createElement('div');
-				spacer.style.display = 'inline';
-				spacer.style.padding = '8px';
-
-
-				// Defines a new export action
-				editor.addAction('toggle', function(editor, cell)
-				{
-					var toggle = document.getElementById("toggleBlocks");
-					var button = document.getElementById("toggle");
-					toggle.click();
-					button.innerHTML = '';
-					if(toggle.innerHTML == 'Expand All'){
-						createButtonImage(button, 'images/navigate_plus.png');
-					}
-					else if(toggle.innerHTML == 'Collapse All'){
-						createButtonImage(button, 'images/navigate_minus.png');
-					}
-					var titleName = document.createTextNode(toggle.innerHTML);  
-					button.appendChild(titleName);
-				});
-
-				addToolbarButton(editor, toolbar, 'toggle', 'Expand All', 'images/navigate_plus.png');
-				toolbar.appendChild(spacer.cloneNode(true));
-				
-				
-				addToolbarButton(editor, toolbar, 'delete', 'Delete', 'images/delete2.png');
-				toolbar.appendChild(spacer.cloneNode(true));
-				
-				addToolbarButton(editor, toolbar, 'cut', 'Cut', 'images/cut.png');
-				addToolbarButton(editor, toolbar, 'copy', 'Copy', 'images/copy.png');
-				addToolbarButton(editor, toolbar, 'paste', 'Paste', 'images/paste.png');
+    <link rel="stylesheet" href="jquery/jquery-ui.css">
+    <script src="jquery/jquery-1.8.2.js"></script>
+    <script type="text/javascript" src="details.js"></script>
+    <script type="text/javascript" src="json2.js"></script>
+    <script type="text/javascript">
+        function main(container, outline, toolbar, sidebar, status) {
+            // Checks if the browser is supported
+            if (!mxClient.isBrowserSupported()) {
+                // Displays an error message if the browser is not supported.
+                mxUtils.error('Browser is not supported!', 200, false);
+            } else {
+                // If connect preview is not moved away then getCellAt is used to detect the cell under
+                // the mouse if the mouse is over the preview shape in IE (no event transparency), ie.
+                // the built-in hit-detection of the HTML document will not be used in this case.
+                mxConnectionHandler.prototype.movePreviewAway = false;
+                mxConnectionHandler.prototype.waypointsEnabled = true;
+                mxGraph.prototype.resetEdgesOnConnect = false;
 
-				toolbar.appendChild(spacer.cloneNode(true));
-				
-				addToolbarButton(editor, toolbar, 'undo', '', 'images/undo.png');
-				addToolbarButton(editor, toolbar, 'redo', '', 'images/redo.png');
-				
-				toolbar.appendChild(spacer.cloneNode(true));
-				
-				addToolbarButton(editor, toolbar, 'show', 'Show', 'images/camera.png');
-				addToolbarButton(editor, toolbar, 'print', 'Print', 'images/printer.png');
-				
-				toolbar.appendChild(spacer.cloneNode(true));
-
-				// Defines a new export action
-				editor.addAction('export', function(editor, cell)
-				{
-					var textarea = document.createElement('textarea');
-					textarea.style.width = '400px';
-					textarea.style.height = '400px';
-					var enc = new mxCodec(mxUtils.createXmlDocument());
-					var node = enc.encode(editor.graph.getModel());
-					//alert(mxUtils.getPrettyXml(node));
-					textarea.value = mxUtils.getPrettyXml(node);
-					showModalWindow(graph, 'XML', textarea, 410, 440);
-				});
-
-				addToolbarButton(editor, toolbar, 'export', 'Export', 'images/export1.png');
-				
-				// Adds toolbar buttons into the status bar at the bottom
-				// of the window.
+                // Enables guides
+                mxGraphHandler.prototype.guidesEnabled = true;
 
-				addToolbarButton(editor, status, 'zoomIn', '', 'images/zoom_in.png', true);
-				addToolbarButton(editor, status, 'zoomOut', '', 'images/zoom_out.png', true);
-				addToolbarButton(editor, status, 'actualSize', '', 'images/view_1_1.png', true);
-				addToolbarButton(editor, status, 'fit', '', 'images/fit_to_size.png', true);
-				
-				// Creates the outline (navigator, overview) for moving
-				// around the graph in the top, right corner of the window.
-				var outln = new mxOutline(graph, outline);
+                // Alt disables guides
+                mxGuide.prototype.isEnabledForEvent = function(evt) {
+                    return !mxEvent.isAltDown(evt);
+                };
 
-				// To show the images in the outline, uncomment the following code
-				//outln.outline.labelsVisible = true;
-				//outln.outline.setHtmlLabels(true);
-				
-				// Fades-out the splash screen after the UI has been loaded.
-				var splash = document.getElementById('splash');
-				if (splash != null)
-				{
-					try
-					{
-						mxEvent.release(splash);
-						mxEffects.fadeOut(splash, 100, true);
-					}
-					catch (e)
-					{
-					
-						// mxUtils is not available (library not loaded)
-						splash.parentNode.removeChild(splash);
-					}
-				}
-				
-				// Handles cursor keys - guides.html
-			    var nudge = function(keyCode){
-			    	graph.container.focus();
-			    	if (!graph.isSelectionEmpty()){
-			    		var dx = 0;
-			    		var dy = 0;
-			    		if (keyCode == 37){
-			    			dx = -1;
-						}
-			    		else if (keyCode == 38){
-			    			dy = -1;
-			    		}
-			    		else if (keyCode == 39){
-			    			dx = 1;
-			    		}
-			    		else if (keyCode == 40){
-			    			dy = 1;
-			    		}
-			    		graph.moveCells(graph.getSelectionCells(), dx, dy);
-					}
-			    };
-				// Transfer initial focus to graph container for keystroke handling
-				//graph.container.focus();
-			    // Handles keystroke events
-			    var keyHandler = new mxKeyHandler(graph);
-			    keyHandler.bindKey(37, function(){
-					nudge(37);
-				});
-			    keyHandler.bindKey(38, function(){
-			    	nudge(38);
-			    });
-			    keyHandler.bindKey(39, function(){
-			    	nudge(39);
-			    });
-			    keyHandler.bindKey(40, function(){
-			    	nudge(40);
-			    });
-			}
-		}
-		
-		function createButtonImage(button, image){
-			if (image != null)
-			{
-				var img = document.createElement('img');
-				img.setAttribute('src', image);
-				img.style.width = '16px';
-				img.style.height = '16px';
-				img.style.verticalAlign = 'middle';
-				img.style.marginRight = '2px';
-				button.appendChild(img);
-			}
-		}
-		
-		function addIcons(graph, sidebar){
-			var req = mxUtils.load('palettes/palettes.xml');
-			var root = req.getDocumentElement();
-			var x = root.getElementsByTagName('node')[0];
-			var categories = x.getElementsByTagName('node');
-			for (var i = 0, nodeLength = categories.length; i < nodeLength; i++) {
-				var categoryName = categories[i].getAttribute('name');
-				var title = document.createElement('h3');
-				title.setAttribute('class', 'accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all');
-				var span = document.createElement('span');
-				span.setAttribute('class', 'ui-accordion-header-icon ui-icon ui-icon-triangle-1-e');
-				var titleName = document.createTextNode(categoryName);  
-				title.appendChild(span);
-				title.appendChild(titleName);
-				sidebar.appendChild(title);
-				var newImages = document.createElement('div');
-				newImages.setAttribute('class', 'ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom');
-				var blocks = categories[i].getElementsByTagName('block');
-				for (var j = 0, blockLength = blocks.length; j < blockLength; j++) {
-					var name = blocks[j].getAttribute('name');
-					var icon = blocks[j].getElementsByTagName('icon')[0];
-					var iconPath = icon.getAttribute('path');
-					addSidebarIcon(graph, newImages, name, iconPath);
-				}
-				sidebar.appendChild(newImages);
-			}
-		}
-		
-		function getImgHTML(name){
-			return '<img src="'+'blocks/'+name+'.svg'+'" height="80" width="80">';
-		}
-		
-		function addToolbarButton(editor, toolbar, action, label, image, isTransparent)
-		{
-			var button = document.createElement('button');
-			button.style.fontSize = '10';
-			createButtonImage(button, image);
-			if (isTransparent)
-			{
-				button.style.background = 'transparent';
-				button.style.color = '#FFFFFF';
-				button.style.border = 'none';
-			}
-			mxEvent.addListener(button, 'click', function(evt)
-			{
-				editor.execute(action);
-			});
-			mxUtils.write(button, label);
-			button.setAttribute('id',action);
-			toolbar.appendChild(button);
-		};
-
-		function showModalWindow(graph, title, content, width, height)
-		{
-			var background = document.createElement('div');
-			background.style.position = 'absolute';
-			background.style.left = '0px';
-			background.style.top = '0px';
-			background.style.right = '0px';
-			background.style.bottom = '0px';
-			background.style.background = 'black';
-			mxUtils.setOpacity(background, 50);
-			document.body.appendChild(background);
-			
-			if (mxClient.IS_IE)
-			{
-				new mxDivResizer(background);
-			}
-			
-			var x = Math.max(0, document.body.scrollWidth/2-width/2);
-			var y = Math.max(10, (document.body.scrollHeight || document.documentElement.scrollHeight)/2-height*2/3);
-			var wnd = new mxWindow(title, content, x, y, width, height, false, true);
-			wnd.setClosable(true);
-			
-			// Fades the background out after after the window has been closed
-			wnd.addListener(mxEvent.DESTROY, function(evt)
-			{
-				graph.setEnabled(true);
-				mxEffects.fadeOut(background, 50, true, 10, 30, true);
-			});
-
-			graph.setEnabled(false);
-			graph.tooltipHandler.hide();
-			wnd.setVisible(true);
-		};
-		
-		function addSidebarIcon(graph, sidebar, name, image)
-		{
-			
-			// Function that is executed when the image is dropped on
-			// the graph. The cell argument points to the cell under
-			// the mousepointer if there is one.
-			var funct = function(graph, evt, cell, x, y)
-			{
-				var parent = graph.getDefaultParent();
-				var model = graph.getModel();
-				var v1 = null;
-				var doc = mxUtils.createXmlDocument();
-				model.beginUpdate();
-				try
-				{
-					var label = getImgHTML(name); // Will not exist for all blocks
-					
-					if(name == 'ANDBLK'){
-						var Object = {
-							style: "ANDBLK",
-							simulationFunctionName: "csuper",
-							simulationFunctionType: "DEFAULT",
-							blockType: "h",
-							interfaceFunctionName: "ANDBLK"
-						};
-						/*
-						var details = doc.createElement('BasicBlock');
-						details.setAttribute('name', name);
-						details.setAttribute('label', label);
-						*/
-						var obj = new BasicBlock(Object); // This isn't even the right function!
+                // Enables snapping waypoints to terminals
+                mxEdgeHandler.prototype.snapToTerminals = true;
+
+                // Assigns some global constants for general behaviour, eg. minimum
+                // size (in pixels) of the active region for triggering creation of
+                // new connections, the portion (100%) of the cell area to be used
+                // for triggering new connections, as well as some fading options for
+                // windows and the rubberband selection.
+                mxConstants.MIN_HOTSPOT_SIZE = 16;
+                mxConstants.DEFAULT_HOTSPOT = 1;
+
+                // Workaround for Internet Explorer ignoring certain CSS directives
+                if (mxClient.IS_QUIRKS) {
+                    document.body.style.overflow = 'hidden';
+                    new mxDivResizer(container);
+                    new mxDivResizer(outline);
+                    new mxDivResizer(toolbar);
+                    new mxDivResizer(sidebar);
+                    new mxDivResizer(status);
+                }
+
+                // Creates a wrapper editor with a graph inside the given container.
+                // The editor is used to create certain functionality for the
+                // graph, such as the rubberband selection, but most parts
+                // of the UI are custom in this example.
+                var editor = new mxEditor();
+                var graph = editor.graph;
+                var model = graph.getModel();
+
+                graph.setPanning(true);
+                graph.setConnectable(true);
+                graph.setConnectableEdges(true);
+                graph.setDisconnectOnMove(false);
+                graph.foldingEnabled = false;
+
+                // Disable highlight of cells when dragging from toolbar
+                graph.setDropEnabled(false);
+
+                // Centers the port icon on the target port
+                graph.connectionHandler.targetConnectImage = true;
+
+                // Does not allow dangling edges
+                graph.setAllowDanglingEdges(false);
+
+                // Sets the graph container and configures the editor
+                editor.setGraphContainer(container);
+
+                //var config = mxUtils.load('config/editor-commons.xml').getDocumentElement();
+                var config = mxUtils.load('config/keyhandler-commons.xml').getDocumentElement();
+                editor.configure(config);
+
+                // Disables drag-and-drop into non-swimlanes.
+                graph.isValidDropTarget = function(cell, cells, evt) {
+                    return this.isSwimlane(cell);
+                };
+
+                // Disables drilling into non-swimlanes.
+                graph.isValidRoot = function(cell) {
+                    return this.isValidDropTarget(cell);
+                }
+
+                // Does not allow selection of locked cells
+                graph.isCellSelectable = function(cell) {
+                    return !this.isCellLocked(cell);
+                };
+
+                // Returns a shorter label if the cell is collapsed and no
+                // label for expanded groups
+                graph.getLabel = function(cell) {
+                    var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"
+
+                    if (this.isCellLocked(cell)) {
+                        // Returns an empty label but makes sure an HTML
+                        // element is created for the label (for event
+                        // processing wrt the parent label)
+                        return '';
+                    } else if (this.isCellCollapsed(cell)) {
+                        var index = tmp.indexOf('</h1>');
+
+                        if (index > 0) {
+                            tmp = tmp.substring(0, index + 5);
+                        }
+                    }
+
+                    return tmp;
+                }
+
+                // Disables HTML labels for swimlanes to avoid conflict
+                // for the event processing on the child cells. HTML
+                // labels consume events before underlying cells get the
+                // chance to process those events.
+                //
+                // NOTE: Use of HTML labels is only recommended if the specific
+                // features of such labels are required, such as special label
+                // styles or interactive form fields. Otherwise non-HTML labels
+                // should be used by not overidding the following function.
+                // See also: configureStylesheet.
+                graph.isHtmlLabel = function(cell) {
+                    return !this.isSwimlane(cell);
+                }
+
+                // To disable the folding icon, use the following code:
+                graph.isCellFoldable = function(cell) {
+                    return false;
+                }
+
+                // Shows a "modal" window when double clicking a vertex.
+                graph.dblClick = function(evt, cell) {
+                    // Do not fire a DOUBLE_CLICK event here as mxEditor will
+                    // consume the event and start the in-place editor.
+                    if (this.isEnabled() &&
+                        !mxEvent.isConsumed(evt) &&
+                        cell != null &&
+                        this.isCellEditable(cell)) {
+                        if (!this.isHtmlLabel(cell)) {
+                            this.startEditingAtCell(cell);
+                        } else {
+                           /* 
+                            var content = document.createElement('div');
+                            content.innerHTML = this.convertValueToString(cell);
+                            showModalWindow(this, 'Properties', content, 400, 300);*/
+                            
+                        	showPropertiesWindow(graph);
+                        }
+                    }
+
+                    // Disables any default behaviour for the double click
+                    mxEvent.consume(evt);
+                };
+
+                graph.getTooltipForCell = function(cell) {
+                    var text = null;
+                    // If cell is a block or port
+                    if (cell.source == null && cell.target == null) {
+                        if (cell.connectable) { // Cell is a port
+                            // @ToDo: Port Number
+                            text = 'Style : ' + cell.style + "\n";
+                        } else { //Cell is a block
+                            // @ToDo: Block Name, Simulation, Flip, Mirror
+                            // @ToDo: Number of Input, Output, Control, Command Ports
+                            var geometry = cell.getGeometry();
+                            text = 'UID : ' + cell.id + "\n" +
+                                'Style : ' + cell.style + "\n" +
+                                'x : ' + geometry.x + "\n" +
+                                'y : ' + geometry.y + "\n" +
+                                'w : ' + geometry.width + "\n" +
+                                'h : ' + geometry.height + "\n";
+                        }
+                    }
+                    return text;
+                };
+
+                // Create XML tags!
+                // @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+                // https://jgraph.github.io/mxgraph/docs/js-api/files/model/mxCell-js.html
+                // Uncomment this block to see XML tags work
+                graph.convertValueToString = function(cell)
+                {
+                  if (mxUtils.isNode(cell.value))
+                  {
+                    return cell.getAttribute('label', '');
+                  }
+                };
+
+                var cellLabelChanged = graph.cellLabelChanged;
+                graph.cellLabelChanged = function(cell, newValue, autoSize) {
+                    if (mxUtils.isNode(cell.value)) {
+                        // Clones the value for correct undo/redo
+                        var elt = cell.value.cloneNode(true);
+                        elt.setAttribute('label', newValue);
+                        newValue = elt;
+                    }
+
+                    cellLabelChanged.apply(this, arguments);
+                };
+
+                // Enables new connections
+                graph.setConnectable(true);
+
+                // Adds all required styles to the graph (see below)
+                configureStylesheet(graph);
+
+                // Adds sidebar icons.
+                addIcons(graph, sidebar);
+
+                // Creates a new DIV that is used as a toolbar and adds
+                // toolbar buttons.
+                var spacer = document.createElement('div');
+                spacer.style.display = 'inline';
+                spacer.style.padding = '8px';
+
+                // Defines a new export action
+                editor.addAction('toggle', function(editor, cell) {
+                    var toggle = document.getElementById("toggleBlocks");
+                    var button = document.getElementById("toggle");
+                    toggle.click();
+                    button.innerHTML = '';
+                    if (toggle.innerHTML == 'Expand All') {
+                        createButtonImage(button, 'images/navigate_plus.png');
+                    } else if (toggle.innerHTML == 'Collapse All') {
+                        createButtonImage(button, 'images/navigate_minus.png');
+                    }
+                    var titleName = document.createTextNode(toggle.innerHTML);
+                    button.appendChild(titleName);
+                });
+
+                addToolbarButton(editor, toolbar, 'toggle', 'Expand All', 'images/navigate_plus.png');
+                toolbar.appendChild(spacer.cloneNode(true));
+
+                addToolbarButton(editor, toolbar, 'delete', 'Delete', 'images/delete2.png');
+                toolbar.appendChild(spacer.cloneNode(true));
+
+                addToolbarButton(editor, toolbar, 'cut', 'Cut', 'images/cut.png');
+                addToolbarButton(editor, toolbar, 'copy', 'Copy', 'images/copy.png');
+                addToolbarButton(editor, toolbar, 'paste', 'Paste', 'images/paste.png');
+
+                toolbar.appendChild(spacer.cloneNode(true));
+
+                addToolbarButton(editor, toolbar, 'undo', '', 'images/undo.png');
+                addToolbarButton(editor, toolbar, 'redo', '', 'images/redo.png');
+
+                toolbar.appendChild(spacer.cloneNode(true));
+
+                addToolbarButton(editor, toolbar, 'show', 'Show', 'images/camera.png');
+                addToolbarButton(editor, toolbar, 'print', 'Print', 'images/printer.png');
+
+                toolbar.appendChild(spacer.cloneNode(true));
+
+                // Defines a new export action
+                editor.addAction('export', function(editor, cell) {
+                    var textarea = document.createElement('textarea');
+                    textarea.style.width = '400px';
+                    textarea.style.height = '400px';
+                    var enc = new mxCodec(mxUtils.createXmlDocument());
+                    var node = enc.encode(editor.graph.getModel());
+                    textarea.value = mxUtils.getPrettyXml(node);
+                    showModalWindow(graph, 'XML', textarea, 410, 440);
+                });
+
+                addToolbarButton(editor, toolbar, 'export', 'Export', 'images/export1.png');
+
+                // Adds toolbar buttons into the status bar at the bottom
+                // of the window.
+
+                addToolbarButton(editor, status, 'zoomIn', '', 'images/zoom_in.png', true);
+                addToolbarButton(editor, status, 'zoomOut', '', 'images/zoom_out.png', true);
+                addToolbarButton(editor, status, 'actualSize', '', 'images/view_1_1.png', true);
+                addToolbarButton(editor, status, 'fit', '', 'images/fit_to_size.png', true);
+
+                // Creates the outline (navigator, overview) for moving
+                // around the graph in the top, right corner of the window.
+                var outln = new mxOutline(graph, outline);
+
+                // To show the images in the outline, uncomment the following code
+                //outln.outline.labelsVisible = true;
+                //outln.outline.setHtmlLabels(true);
+
+                // Fades-out the splash screen after the UI has been loaded.
+                var splash = document.getElementById('splash');
+                if (splash != null) {
+                    try {
+                        mxEvent.release(splash);
+                        mxEffects.fadeOut(splash, 100, true);
+                    } catch (e) {
+
+                        // mxUtils is not available (library not loaded)
+                        splash.parentNode.removeChild(splash);
+                    }
+                }
+
+                // Handles cursor keys - guides.html
+                var nudge = function(keyCode) {
+                    graph.container.focus();
+                    if (!graph.isSelectionEmpty()) {
+                        var dx = 0;
+                        var dy = 0;
+                        if (keyCode == 37) {
+                            dx = -1;
+                        } else if (keyCode == 38) {
+                            dy = -1;
+                        } else if (keyCode == 39) {
+                            dx = 1;
+                        } else if (keyCode == 40) {
+                            dy = 1;
+                        }
+                        graph.moveCells(graph.getSelectionCells(), dx, dy);
+                    }
+                };
+                // Transfer initial focus to graph container for keystroke handling
+                //graph.container.focus();
+                // Handles keystroke events
+                var keyHandler = new mxKeyHandler(graph);
+                keyHandler.bindKey(37, function() {
+                    nudge(37);
+                });
+                keyHandler.bindKey(38, function() {
+                    nudge(38);
+                });
+                keyHandler.bindKey(39, function() {
+                    nudge(39);
+                });
+                keyHandler.bindKey(40, function() {
+                    nudge(40);
+                });
+
+                // Starts connections on the background in wire-mode
+                var connectionHandlerIsStartEvent = graph.connectionHandler.isStartEvent;
+                graph.connectionHandler.isStartEvent = function(me) {
+                    return connectionHandlerIsStartEvent.apply(this, arguments);
+                };
+
+                // Avoids any connections for gestures within tolerance except when in wire-mode
+                // or when over a port
+                var connectionHandlerMouseUp = graph.connectionHandler.mouseUp;
+                graph.connectionHandler.mouseUp = function(sender, me) {
+                    if (this.first != null && this.previous != null) {
+                        var point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY());
+                        var dx = Math.abs(point.x - this.first.x);
+                        var dy = Math.abs(point.y - this.first.y);
+
+                        if (dx < this.graph.tolerance && dy < this.graph.tolerance) {
+                            // Selects edges in non-wire mode for single clicks, but starts
+                            // connecting for non-edges regardless of wire-mode
+                            if (this.graph.getModel().isEdge(this.previous.cell)) {
+                                this.reset();
+                            }
+
+                            return;
+                        }
+                    }
+
+                    connectionHandlerMouseUp.apply(this, arguments);
+                };
+
+
+                mxEvent.disableContextMenu(container);
+            }
+        };
+
+
+        function showPropertiesWindow(graph) {
+
+            /*var array = ["Number of curves",
+                "color (>0) or mark (<0)",
+                "line or mark size",
+                "Output window number (-1 for automatic)",
+                "Output window position",
+                "Output window sizes",
+                "Xmin and Xmax",
+                "Ymin and Ymax",
+                "Zmin and Zmax",
+                "Alpha and Theta",
+                "Buffer size"
+            ];*/
+            var array=CONST_m("get");
+            //console.log(array);
+
+            // Create basic structure for the form.
+            var content = document.createElement('div');
+            //content.id = "contentProperties";
+            content.setAttribute("id", "contentProperties");
+
+            // Heading of content.
+            var heading = document.createElement('h2');
+            heading.innerHTML = "Set Scope Parameters";
+            heading.id = "headingProperties"
+            content.appendChild(heading);
+
+            // Add Form.
+            var myform = document.createElement("form");
+            myform.method = "post";
+            myform.id = "formProperties";
+
+            // Line break.
+            var linebreak = document.createElement('br');
+            myform.appendChild(linebreak);
+
+            for (field in array) {
+                // Input Title.
+                var fieldName = array[field];
+                var namelabel = document.createElement('label');
+                namelabel.innerHTML = fieldName;
+                myform.appendChild(namelabel);
+
+
+                // Input.
+                var input = document.createElement("input");
+                input.name = fieldName;
+                input.style.cssText = 'float: right;';
+                input.id = fieldName;
+                myform.appendChild(input);
+
+                // Line break.
+                var linebreak = document.createElement('br');
+                myform.appendChild(linebreak);
+
+                // Line break.
+                var linebreak = document.createElement('br');
+                myform.appendChild(linebreak);
+
+            }
+            // Line break.
+            var linebreak = document.createElement('br');
+            myform.appendChild(linebreak);
+
+            // Button - Submit.
+            var btn = document.createElement("button");
+            btn.innerHTML = 'Submit';
+            btn.type = "button";
+            btn.name = "submit";
+
+            // Executes when button 'btn' is clicked.
+            btn.onclick = function() {
+                var params = {};
+                var i=0;
+                for(i=0;i<array.length;i++)
+                    params[array[i]] = document.getElementById(array[i]).value;
+                console.log(params);
+                CONST_m("set",params);
+            };
+            myform.appendChild(btn);
+
+            // Button - Reset.
+            var btn = document.createElement("button");
+            btn.innerHTML = 'Reset';
+            btn.type = "button";
+            btn.name = "submit";
+            btn.id = "resetButtonProperties"
+                //btn.style.cssText='float:right;';
+            btn.onclick = function() {
+                // Only removes the content div, not the modal window.
+            };
+
+
+            myform.appendChild(btn);
+            // Base height without fields : 135 px
+            height = 135 + 26 * array.length + 15;
+
+            content.appendChild(myform);
+            showModalWindow(graph, 'Properties', content, 450, height);
+        };
+
+
+        function createButtonImage(button, image) {
+            if (image != null) {
+                var img = document.createElement('img');
+                img.setAttribute('src', image);
+                img.style.width = '16px';
+                img.style.height = '16px';
+                img.style.verticalAlign = 'middle';
+                img.style.marginRight = '2px';
+                button.appendChild(img);
+            }
+        }
+
+        function addIcons(graph, sidebar) {
+            var req = mxUtils.load('palettes/palettes.xml');
+            var root = req.getDocumentElement();
+            var x = root.getElementsByTagName('node')[0];
+            var categories = x.getElementsByTagName('node');
+            for (var i = 0, nodeLength = categories.length; i < nodeLength; i++) {
+                var categoryName = categories[i].getAttribute('name');
+                var title = document.createElement('h3');
+                title.setAttribute('class', 'accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all');
+                var span = document.createElement('span');
+                span.setAttribute('class', 'ui-accordion-header-icon ui-icon ui-icon-triangle-1-e');
+                var titleName = document.createTextNode(categoryName);
+                title.appendChild(span);
+                title.appendChild(titleName);
+                sidebar.appendChild(title);
+                var newImages = document.createElement('div');
+                newImages.setAttribute('class', 'ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom');
+                var blocks = categories[i].getElementsByTagName('block');
+                for (var j = 0, blockLength = blocks.length; j < blockLength; j++) {
+                    var name = blocks[j].getAttribute('name');
+                    var icon = blocks[j].getElementsByTagName('icon')[0];
+                    var iconPath = icon.getAttribute('path');
+                    addSidebarIcon(graph, newImages, name, iconPath);
+                }
+                sidebar.appendChild(newImages);
+            }
+        }
+
+        function getImgHTML(name) {
+            return '<img src="' + 'blocks/' + name + '.svg' + '" height="80" width="80">';
+        }
+
+        function addToolbarButton(editor, toolbar, action, label, image, isTransparent) {
+            var button = document.createElement('button');
+            button.style.fontSize = '10';
+            createButtonImage(button, image);
+            if (isTransparent) {
+                button.style.background = 'transparent';
+                button.style.color = '#FFFFFF';
+                button.style.border = 'none';
+            }
+            mxEvent.addListener(button, 'click', function(evt) {
+                editor.execute(action);
+            });
+            mxUtils.write(button, label);
+            button.setAttribute('id', action);
+            toolbar.appendChild(button);
+        };
+
+        function showModalWindow(graph, title, content, width, height) {
+            var background = document.createElement('div');
+            background.style.position = 'absolute';
+            background.style.left = '0px';
+            background.style.top = '0px';
+            background.style.right = '0px';
+            background.style.bottom = '0px';
+            background.style.background = 'black';
+            mxUtils.setOpacity(background, 50);
+            document.body.appendChild(background);
+
+            if (mxClient.IS_IE) {
+                new mxDivResizer(background);
+            }
+
+            var x = Math.max(0, document.body.scrollWidth / 2 - width / 2);
+            var y = Math.max(10, (document.body.scrollHeight || document.documentElement.scrollHeight) / 2 - height * 2 / 3);
+            var wnd = new mxWindow(title, content, x, y, width, height, false, true);
+            wnd.setClosable(true);
+
+            // Fades the background out after after the window has been closed
+            wnd.addListener(mxEvent.DESTROY, function(evt) {
+                graph.setEnabled(true);
+                mxEffects.fadeOut(background, 50, true, 10, 30, true);
+                //alert("jitesh");
+            });
+
+            graph.setEnabled(false);
+            graph.tooltipHandler.hide();
+            wnd.setVisible(true);
+        };
+
+        function addSidebarIcon(graph, sidebar, name, image) {
+
+            // Function that is executed when the image is dropped on
+            // the graph. The cell argument points to the cell under
+            // the mousepointer if there is one.
+            var funct = function(graph, evt, cell, x, y) {
+                var parent = graph.getDefaultParent();
+                var model = graph.getModel();
+                var v1 = null;
+                var doc = mxUtils.createXmlDocument();
+                model.beginUpdate();
+                try {
+                    var label = getImgHTML(name); // Will not exist for all blocks
+
+                    if(name == 'ANDBLK'){
+						
+						var details = new BasicBlock(name);
 						var encoder = new mxCodec();
-						var result = encoder.encode(obj);
-						var xml = mxUtils.getPrettyXml(result);
-						var blockName = document.createTextNode(xml);
+						var result = encoder.encode(details);
+						result.setAttribute('label',label);
+						//var xml = mxUtils.getPrettyXml(result);
+						//var blockName = document.createTextNode(xml);
 						//alert(blockName);
 						//details.appendChild(blockName);
 						//alert(details);
-						//console.log(details);
-						v1 = graph.insertVertex(parent, null, obj, x, y, 80, 80, 'ANDBLK'); //replaced details with obj @Chhavi
+						//console.log(details);*/
+						var temp=encoder.encode(parent);
+						result.setAttribute('parent',temp.getAttribute('id')); //@ASP1234 to get id in Basic Block
+						v1 = graph.insertVertex(parent, null,result, x, y, 80, 80, 'ANDBLK'); 
 						createPorts(graph, v1, [], ['CONTROL','CONTROL'], [], ['COMMAND']);
-					}
-					else if(name == 'CMSCOPE'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'CMSCOPE');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], ['CONTROL'], [], []);
-					}
-					else if(name == 'CONST_m'){
-						v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80,'CONST_m');
-						createPorts(graph, v1, [], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'CONVERT'){
-						v1 = graph.insertVertex(parent, null, 'Convert to', x, y, 80, 80,'CONVERT');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'CSCOPXY'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'CSCOPXY');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], ['CONTROL'], [], []);
-					}
-					else if(name == 'DEMUX'){
-						v1 = graph.insertVertex(parent, null, '', x, y, 80, 80,'DEMUX');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT','EXPLICIT'], []);
-					}
-					else if(name == 'IN_f'){
-						v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80,'IN_f');
-						createPorts(graph, v1, [], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'LOGICAL_OP'){
-						v1 = graph.insertVertex(parent, null, 'AND', x, y, 80, 80,'LOGICAL_OP');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'MUX'){
-						v1 = graph.insertVertex(parent, null, '', x, y, 80, 80,'MUX');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'NRMSOM_f'){
-						v1 = graph.insertVertex(parent, null, '', x, y, 80, 80,'NRMSOM_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'OUT_f'){
-						v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80,'OUT_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], [], []);
-					}
-					else if(name == 'RELATIONALOP'){
-						v1 = graph.insertVertex(parent, null, '<FONT SIZE="6"><</FONT>', x, y, 80, 80,'RELATIONALOP');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SWITCH2_m'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'SWITCH2_m');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					
-					// CONTINUOUS
-					
-					else if(name == 'CLINDUMMY_f'){
-						v1 = graph.insertVertex(parent, null, 'DUMMY<BR>CLSS', x, y, 80, 80,'CLINDUMMY_f');
-						createPorts(graph, v1, [], [], [], []);
-					}
-					else if(name == 'CLR'){
-						v1 = graph.insertVertex(parent, null, '1<BR><HR>1 + s', x, y, 80, 80,'CLR');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'CLSS'){
-						v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD ALIGN="RIGHT">xd</TD><TD>=</TD><TD>Ax+Bu</TD></TR><TR><TD ALIGN="RIGHT">y</TD><TD>=</TD><TD>Cx+Du</TD></TR></TABLE>', x, y, 130, 80,'CLSS');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'DERIV'){
-						v1 = graph.insertVertex(parent, null, 'du / dt', x, y, 80, 80,'DERIV');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'INTEGRAL_f'){
-						v1 = graph.insertVertex(parent, null, '1/s', x, y, 80, 80,'INTEGRAL_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'INTEGRAL_m'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'INTEGRAL_m');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'PID'){
-						v1 = graph.insertVertex(parent, null, 'PID', x, y, 80, 80,'PID');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'TCLSS'){
-						v1 = graph.insertVertex(parent, null, 'Jump<BR>(A,B,C,D)', x, y, 80, 80,'TCLSS');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'TIME_DELAY'){
-						v1 = graph.insertVertex(parent, null, 'Continuous<BR>fix delay', x, y, 80, 80,'TIME_DELAY');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'VARIABLE_DELAY'){
-						v1 = graph.insertVertex(parent, null, 'Variable<BR>delay', x, y, 80, 80,'VARIABLE_DELAY');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'PDE'){
-						v1 = graph.insertVertex(parent, null, 'PDE', x, y, 80, 80,'PDE');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT','EXPLICIT','EXPLICIT','EXPLICIT'], [], ['EXPLICIT','EXPLICIT'], []);
-					}
-					
-					// DISCONTINUOUS
-					
-					else if(name == 'BACKLASH'){
-						v1 = graph.insertVertex(parent, null, 'Backlash', x, y, 80, 80,'BACKLASH');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'DEADBAND'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'DEADBAND');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'DELAYV_f'){
-						v1 = graph.insertVertex(parent, null, 'Variable<BR>delay', x, y, 80, 80,'DELAYV_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], ['CONTROL'], ['EXPLICIT'], ['COMMAND','COMMAND']);
-					}
-					else if(name == 'HYSTHERESIS'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'HYSTHERESIS');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'RATELIMITER'){
-						v1 = graph.insertVertex(parent, null, 'Rate limiter', x, y, 80, 80,'RATELIMITER');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'QUANT_f'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'QUANT_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SATURATION'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'SATURATION');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					
-					// DISCRETE
-					else if(name == 'AUTOMAT'){
-						v1 = graph.insertVertex(parent, null, 'Automaton<BR>nM=2, nX=1', x, y, 80, 80,'AUTOMAT');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT','EXPLICIT'], ['COMMAND']);
-					}
-					else if(name == 'DELAY_f'){
-						v1 = graph.insertVertex(parent, null, 'Delay', x, y, 80, 80,'DELAYV_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'DLR'){
-						v1 = graph.insertVertex(parent, null, '1<BR><HR>1 + z', x, y, 80, 80,'DLR');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'DLRADAPT_f'){
-						v1 = graph.insertVertex(parent, null, 'N(z,p)<BR><HR>D(z,p)', x, y, 80, 80,'DLRADAPT_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'DLSS'){
-						v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD ALIGN="RIGHT">x</TD><TD ALIGN="CENTER">+=</TD><TD>Ax+Bu</TD></TR><TR><TD ALIGN="RIGHT">y</TD><TD ALIGN="CENTER">=</TD><TD>Cx+Du</TD></TR></TABLE>', x, y, 80, 80,'DLSS');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'DOLLAR_f'){
-						v1 = graph.insertVertex(parent, null, '1/z', x, y, 80, 80,'DOLLAR_f');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'DOLLAR'){
-						v1 = graph.insertVertex(parent, null, '1/z', x, y, 80, 80,'DOLLAR');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'DOLLAR_m'){
-						v1 = graph.insertVertex(parent, null, '1/z', x, y, 80, 80,'DOLLAR_m');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'SAMPHOLD_m'){
-						v1 = graph.insertVertex(parent, null, 'S / H', x, y, 80, 80,'SAMPHOLD_m');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'REGISTER'){
-						v1 = graph.insertVertex(parent, null, 'Shift<BR>register', x, y, 80, 80,'REGISTER');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
-					}
-					
-					// EVENTS
-					else if(name == 'CLOCK_c'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'CLOCK_c');
-						createPorts(graph, v1, [], [], [], ['COMMAND']);
-					}
-					else if(name == 'SampleCLK'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'SampleCLK');
-						createPorts(graph, v1, [], [], [], ['COMMAND']);
-					}
-					else if(name == 'VirtualCLK0'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'VirtualCLK0');
-						createPorts(graph, v1, [], ['CONTROL'], [], []);
-					}
-					// ANDBLK to come here
-					
-					else if(name == 'ANDLOG_f'){
-						v1 = graph.insertVertex(parent, null, 'LOGICAL<BR>AND', x, y, 80, 80,'ANDLOG_f');
-						createPorts(graph, v1, [], ['CONTROL','CONTROL'], ['EXPLICIT'], []);
-					}
-					else if(name == 'CEVENTSCOPE'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'CEVENTSCOPE');
-						createPorts(graph, v1, [], ['CONTROL'], [], []);
-					}
-					else if(name == 'CLKFROM'){
-						v1 = graph.insertVertex(parent, null, 'A', x, y, 80, 80,'CLKFROM');
-						createPorts(graph, v1, [], [], [], ['COMMAND']);
-					}
-					else if(name == 'CLKGOTO'){
-						v1 = graph.insertVertex(parent, null, 'A', x, y, 80, 80,'CLKGOTO');
-						createPorts(graph, v1, [], ['CONTROL'], [], []);
-					}
-					else if(name == 'CLKGotoTagVisibility'){
-						v1 = graph.insertVertex(parent, null, '{A}', x, y, 80, 80,'CLKGotoTagVisibility');
-						createPorts(graph, v1, [], [], [], []);
-					}
-					else if(name == 'CLKOUTV_f'){
-						v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80,'CLKOUTV_f');
-						createPorts(graph, v1, [], ['CONTROL'], [], []);
-					}
-					else if(name == 'CLKSOMV_f'){
-						v1 = graph.insertVertex(parent, null, '+', x, y, 80, 80,'CLKSOMV_f');
-						createPorts(graph, v1, [], ['CONTROL','CONTROL','CONTROL'], [], ['COMMAND']);
-					}
-					else if(name == 'EDGE_TRIGGER'){
-						v1 = graph.insertVertex(parent, null, 'Edge<BR>trigger', x, y, 80, 80,'EDGE_TRIGGER');
-						createPorts(graph, v1, ['EXPLICIT'], [], [], ['COMMAND']);
-					}
-					else if(name == 'ENDBLK'){
-						v1 = graph.insertVertex(parent, null, 'END', x, y, 80, 80,'ENDBLK');
-						createPorts(graph, v1, [], [], [], []);
-					}
-					else if(name == 'END_c'){
-						v1 = graph.insertVertex(parent, null, 'END', x, y, 80, 80,'END_c');
-						createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND']);
-					}
-					else if(name == 'ESELECT_f'){
-						v1 = graph.insertVertex(parent, null, 'Event select', x, y, 80, 80,'ESELECT_f');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], [], ['COMMAND','COMMAND']);
-					}
-					else if(name == 'EVTDLY_c'){
-						v1 = graph.insertVertex(parent, null, 'Delay: 0.1', x, y, 80, 80,'EVTDLY_c');
-						createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND']);
-					}
-					else if(name == 'EVTGEN_f'){
-						v1 = graph.insertVertex(parent, null, 'Event at<BR>time 0', x, y, 80, 80,'EVTGEN_f');
-						createPorts(graph, v1, [], [], [], ['COMMAND']);
-					}
-					else if(name == 'EVTVARDLY'){
-						v1 = graph.insertVertex(parent, null, 'Event<BR>delay', x, y, 80, 80,'EVTVARDLY');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], [], ['COMMAND']);
-					}
-					else if(name == 'Extract_Activation'){
-						v1 = graph.insertVertex(parent, null, 'Extract<BR>activation', x, y, 80, 80,'Extract_Activation');
-						createPorts(graph, v1, ['EXPLICIT'], [], [], ['COMMAND']);
-					}
-					else if(name == 'HALT_f'){
-						v1 = graph.insertVertex(parent, null, 'HALT', x, y, 80, 80,'HALT_f');
-						createPorts(graph, v1, [], ['CONTROL'], [], []);
-					}
-					else if(name == 'IFTHEL_f'){
-						v1 = graph.insertVertex(parent, null, 'if in>0<BR>then else', x, y, 80, 80,'IFTHEL_f');
-						createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], [], ['COMMAND','COMMAND']);
-					}
-					else if(name == 'M_freq'){
-						v1 = graph.insertVertex(parent, null, 'Multiple<BR>frequency', x, y, 80, 80,'M_freq');
-						createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND','COMMAND','COMMAND']);
-					}
-					else if(name == 'MCLOCK_f'){
-						v1 = graph.insertVertex(parent, null, '2freq clock<BR>f/n f', x, y, 80, 80,'MCLOCK_f');
-						createPorts(graph, v1, [], [], [], ['COMMAND','COMMAND']);
-					}
-					else if(name == 'MFCLCK_f'){
-						v1 = graph.insertVertex(parent, null, 'M. freq<BR>clock', x, y, 80, 80,'MFCLCK_f');
-						createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND','COMMAND']);
-					}
-					else if(name == 'freq_div'){
-						v1 = graph.insertVertex(parent, null, 'Frequency<BR>division', x, y, 80, 80,'freq_div');
-						createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND']);
-					}
-					// LOOKUP TABLES
-					else if(name == 'INTRP2BLK_f'){
-						v1 = graph.insertVertex(parent, null, 'Interp 2', x, y, 80, 80,'INTRP2BLK_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'INTRPLBLK_f'){
-						v1 = graph.insertVertex(parent, null, 'Interp', x, y, 80, 80,'INTRPLBLK_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'LOOKUP_f'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'LOOKUP_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					// MATHEMATICAL OPERATIONS
-					else if(name == 'ABS_VALUE'){
-						v1 = graph.insertVertex(parent, null, 'ABS', x, y, 80, 80,'ABS_VALUE');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'BIGSOM_f'){
-						v1 = graph.insertVertex(parent, null, label, x, y, 80, 80,'BIGSOM_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'COSBLK_f'){
-						v1 = graph.insertVertex(parent, null, 'COS', x, y, 80, 80,'COSBLK_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'EXPBLK_m'){
-						v1 = graph.insertVertex(parent, null, 'a^u', x, y, 80, 80,'EXPBLK_m');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'GAINBLK_f'){
-						v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80,'GAINBLK_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'GAINBLK'){
-						v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80,'GAINBLK');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'GAIN_f'){
-						v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80,'GAIN_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'INVBLK'){
-						v1 = graph.insertVertex(parent, null, '1/u', x, y, 80, 80,'INVBLK');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'LOGBLK_f'){
-						v1 = graph.insertVertex(parent, null, 'LOG', x, y, 80, 80,'LOGBLK_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'MATMAGPHI'){
-						v1 = graph.insertVertex(parent, null, 'Mag & Phi', x, y, 80, 80,'MATMAGPHI');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT','EXPLICIT'], []);
-					}
-					else if(name == 'MATZREIM'){
-						v1 = graph.insertVertex(parent, null, 'Re & Im', x, y, 80, 80,'MATZREIM');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT','EXPLICIT'], []);
-					}
-					else if(name == 'MAXMIN'){
-						v1 = graph.insertVertex(parent, null, 'MAX', x, y, 80, 80,'MAXMIN');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'MAX_f'){
-						v1 = graph.insertVertex(parent, null, 'MAX', x, y, 80, 80,'MAX_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'MIN_f'){
-						v1 = graph.insertVertex(parent, null, 'MIN', x, y, 80, 80,'MIN_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'POWBLK_f'){
-						v1 = graph.insertVertex(parent, null, 'u^a', x, y, 80, 80,'POWBLK_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'PRODUCT'){
-						v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD>*</TD><TD ROWSPAN="2"><FONT SIZE="6">∏</FONT><TD></TR><TR><TD>÷</TD><TD/></TR></TABLE>', x, y, 80, 80,'PRODUCT');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'PROD_f'){
-						v1 = graph.insertVertex(parent, null, 'X', x, y, 80, 80,'PROD_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SIGNUM'){
-						v1 = graph.insertVertex(parent, null, 'SIGN', x, y, 80, 80,'SIGNUM');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SINBLK_f'){
-						v1 = graph.insertVertex(parent, null, 'SIN', x, y, 80, 80,'SINBLK_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SQRT'){
-						v1 = graph.insertVertex(parent, null, 'SQRT', x, y, 80, 80,'SQRT');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SUMMATION'){
-						v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD>+</TD> <TD ROWSPAN="2"><FONT SIZE="6">∑</FONT><TD></TR><TR><TD>-</TD> <TD/></TR></TABLE>', x, y, 80, 80,'SUMMATION');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SUM_f'){
-						v1 = graph.insertVertex(parent, null, '+', x, y, 80, 80,'SUM_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'SOM_f'){
-						v1 = graph.insertVertex(parent, null, '+', x, y, 80, 80,'SOM_f');
-						createPorts(graph, v1, ['EXPLICIT','EXPLICIT','EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'TANBLK_f'){
-						v1 = graph.insertVertex(parent, null, 'TAN', x, y, 80, 80,'TANBLK_f');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					else if(name == 'TrigFun'){
-						v1 = graph.insertVertex(parent, null, 'Trig function', x, y, 80, 80,'TrigFun');
-						createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
-					}
-					// MATRIX
-					
-					
-					else if(name == 'OpAmp'){
-						v1 = graph.insertVertex(parent, null, '<table><tr><td>+</td><td></td></tr><tr><td></td><td>OP</td></tr><tr><td>-</td><td></td></tr></table>', x, y, 80, 80,'OpAmp');
-						createPorts(graph, v1, ['IMPLICIT','IMPLICIT'], [], ['IMPLICIT'], []);
-					}
-					
-					else if(name == 'TEXT_f'){
-						v1 = graph.insertVertex(parent, null, '', x, y, 80, 80,'TEXT_f');
-						createPorts(graph, v1, [], [], [], []);
-					}
-					
-					v1.setConnectable(false);
-					
-				}
-				finally
-				{
-					model.endUpdate();
-				}
 				
-				graph.setSelectionCell(v1);
-			}
-			
-			var para = document.createElement('p');
-			var blockFigure = document.createElement('figure');
-			var img = document.createElement('img');
-			img.setAttribute('src', image);
-			var caption = document.createElement('figcaption');
-			var blockName = document.createTextNode(name);  
-			caption.appendChild(blockName);
-			blockFigure.appendChild(img);
-			blockFigure.appendChild(caption);
-			para.appendChild(blockFigure);
-			sidebar.appendChild(para);
-			
-			var dragElt = document.createElement('div');
-			dragElt.style.border = 'dashed black 1px';
-			dragElt.style.width = '80px';
-			dragElt.style.height = '80px';
-			  					
-			// Creates the image which is used as the drag icon (preview)
-			var ds = mxUtils.makeDraggable(img, graph, funct, dragElt, 0, 0, true, true);
-			ds.setGuidesEnabled(true);
-		};
-		
-		
-		// Create ports
-		function createPorts(graph, block, left, top, right, bottom){
-			createInputPorts(graph, block, left, top);
-			createOutputPorts(graph, block, right, bottom);
-		}
-		
-		function createInputPorts(graph, block, leftArray, topArray){
-			var topNumber = topArray.length;
-			var leftNumber = leftArray.length;
-			if(leftNumber != 0){
-				for(var i=1; i<=leftNumber; i++){
-					var x = 0;
-					var y = (i/(leftNumber+1)).toFixed(4);
-					var portType = leftArray[i-1];
-					createInputPort(graph, block, x, y, portType, 'left');
-				}
-			}
-			if(topNumber != 0){
-				for(var i=1; i<=topNumber; i++){
-					var x = (i/(topNumber+1)).toFixed(4);
-					var y = 0;
-					var portType = topArray[i-1];
-					createInputPort(graph, block, x, y, portType, 'top');
-				}
-			}
-		};
-		
-		function createOutputPorts(graph, block, rightArray, bottomArray){
-			var bottomNumber = bottomArray.length;
-			var rightNumber = rightArray.length;
-			if(rightNumber != 0){
-				for(var i=1; i<=rightNumber; i++){
-					var x = 1;
-					var y = (i/(rightNumber+1)).toFixed(4);
-					var portType = rightArray[i-1];
-					createOutputPort(graph, block, x, y, portType, 'right');
-				}
-			}
-			if(bottomNumber != 0){
-				for(var i=1; i<=bottomNumber; i++){
-					var x = (i/(bottomNumber+1)).toFixed(4);
-					var y = 1;
-					var portType = bottomArray[i-1];
-					createOutputPort(graph, block, x, y, portType, 'bottom');
-				}
-			}
-		};
-		
-		function createInputPort(graph, block, x, y, portType, position){
-			var port = null;
-			if(portType == 'COMMAND'){
-				port = graph.insertVertex(block, null, 'CommandPort', x, y, 10, 10,'CommandPort', true);
-			}
-			else if(portType == 'CONTROL'){
-				port = graph.insertVertex(block, null, 'ControlPort', x, y, 10, 10, 'ControlPort', true);
-			}
-			else if(portType == 'IMPLICIT'){
-				port = graph.insertVertex(block, null, 'ImplicitInputPort', x, y, 10, 10, 'ImplicitInputPort', true);
-			}
-			else if(portType == 'EXPLICIT'){
-				port = graph.insertVertex(block, null, 'ExplicitInputPort', x, y, 10, 10,'ExplicitInputPort', true);
-			}
-			if(port != null){
-				if(position == 'top'){
-					port.geometry.offset = new mxPoint(-6, -10);	
-				}
-				else if(position == 'left'){
-					port.geometry.offset = new mxPoint(-10, -6);	
-				}
-			}
-		};
-		
-		function createOutputPort(graph, block, x, y, portType, position){
-			var port = null;
-			if(portType == 'COMMAND'){
-				port = graph.insertVertex(block, null, 'CommandPort', x, y, 10, 10, 'CommandPort', true);
-			}
-			else if(portType == 'CONTROL'){
-				port = graph.insertVertex(block, null, 'ControlPort', x, y, 10, 10, 'ControlPort', true);
-			}
-			else if(portType == 'IMPLICIT'){
-				port = graph.insertVertex(block, null, 'ImplicitOutputPort', x, y, 10, 10,'ImplicitOutputPort',true);
-			}
-			else if(portType == 'EXPLICIT'){
-				port = graph.insertVertex(block, null, 'ExplicitOutputPort', x, y, 10, 10, 'ExplicitOutputPort', true);
-			}
-			if(port != null){
-				if(position == 'bottom'){
-					port.geometry.offset = new mxPoint(-6, 0);	
-				}
-				if(position == 'right'){
-					port.geometry.offset = new mxPoint(0, -6);
-				}
-			}
-		};
-		
-		function configureStylesheet(graph)
-		{
-			var req = mxUtils.load('styles/Xcos-style.xml');
-			var root = req.getDocumentElement();
-			var dec = new mxCodec(root.ownerDocument);
-			dec.decode(root, graph.stylesheet);
-		};
-	</script>
+                    } else if (name == 'CMSCOPE') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'CMSCOPE');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], ['CONTROL'], [], []);
+                    } else if (name == 'CONST_m') {
+                        var details = new BasicBlock(name); // This isn't even the right function!
+						var encoder = new mxCodec();
+						var result = encoder.encode(details);
+						result.setAttribute('label',"1");
+						
+						v1 = graph.insertVertex(parent, null,result, x, y, 80, 80,'CONST_m');
+						createPorts(graph, v1, [], [], ['EXPLICIT'], []);
+                    } else if (name == 'CONVERT') {
+                        v1 = graph.insertVertex(parent, null, 'Convert to', x, y, 80, 80, 'CONVERT');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'CSCOPXY') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'CSCOPXY');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], ['CONTROL'], [], []);
+                    } else if (name == 'DEMUX') {
+                        v1 = graph.insertVertex(parent, null, '', x, y, 80, 80, 'DEMUX');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT', 'EXPLICIT'], []);
+                    } else if (name == 'IN_f') {
+                        v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80, 'IN_f');
+                        createPorts(graph, v1, [], [], ['EXPLICIT'], []);
+                    } else if (name == 'LOGICAL_OP') {
+                        v1 = graph.insertVertex(parent, null, 'AND', x, y, 80, 80, 'LOGICAL_OP');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'MUX') {
+                        v1 = graph.insertVertex(parent, null, '', x, y, 80, 80, 'MUX');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'NRMSOM_f') {
+                        v1 = graph.insertVertex(parent, null, '', x, y, 80, 80, 'NRMSOM_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'OUT_f') {
+                        v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80, 'OUT_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], [], []);
+                    } else if (name == 'RELATIONALOP') {
+                        v1 = graph.insertVertex(parent, null, '<FONT SIZE="6"><</FONT>', x, y, 80, 80, 'RELATIONALOP');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SWITCH2_m') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'SWITCH2_m');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    }
+
+                    // CONTINUOUS
+                    else if (name == 'CLINDUMMY_f') {
+                        v1 = graph.insertVertex(parent, null, 'DUMMY<BR>CLSS', x, y, 80, 80, 'CLINDUMMY_f');
+                        createPorts(graph, v1, [], [], [], []);
+                    } else if (name == 'CLR') {
+                        v1 = graph.insertVertex(parent, null, '1<BR><HR>1 + s', x, y, 80, 80, 'CLR');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'CLSS') {
+                        v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD ALIGN="RIGHT">xd</TD><TD>=</TD><TD>Ax+Bu</TD></TR><TR><TD ALIGN="RIGHT">y</TD><TD>=</TD><TD>Cx+Du</TD></TR></TABLE>', x, y, 130, 80, 'CLSS');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'DERIV') {
+                        v1 = graph.insertVertex(parent, null, 'du / dt', x, y, 80, 80, 'DERIV');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'INTEGRAL_f') {
+                        v1 = graph.insertVertex(parent, null, '1/s', x, y, 80, 80, 'INTEGRAL_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'INTEGRAL_m') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'INTEGRAL_m');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'PID') {
+                        v1 = graph.insertVertex(parent, null, 'PID', x, y, 80, 80, 'PID');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'TCLSS') {
+                        v1 = graph.insertVertex(parent, null, 'Jump<BR>(A,B,C,D)', x, y, 80, 80, 'TCLSS');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'TIME_DELAY') {
+                        v1 = graph.insertVertex(parent, null, 'Continuous<BR>fix delay', x, y, 80, 80, 'TIME_DELAY');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'VARIABLE_DELAY') {
+                        v1 = graph.insertVertex(parent, null, 'Variable<BR>delay', x, y, 80, 80, 'VARIABLE_DELAY');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'PDE') {
+                        v1 = graph.insertVertex(parent, null, 'PDE', x, y, 80, 80, 'PDE');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT', 'EXPLICIT', 'EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT', 'EXPLICIT'], []);
+                    }
+
+                    // DISCONTINUOUS
+                    else if (name == 'BACKLASH') {
+                        v1 = graph.insertVertex(parent, null, 'Backlash', x, y, 80, 80, 'BACKLASH');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'DEADBAND') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'DEADBAND');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'DELAYV_f') {
+                        v1 = graph.insertVertex(parent, null, 'Variable<BR>delay', x, y, 80, 80, 'DELAYV_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], ['CONTROL'], ['EXPLICIT'], ['COMMAND', 'COMMAND']);
+                    } else if (name == 'HYSTHERESIS') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'HYSTHERESIS');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'RATELIMITER') {
+                        v1 = graph.insertVertex(parent, null, 'Rate limiter', x, y, 80, 80, 'RATELIMITER');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'QUANT_f') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'QUANT_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SATURATION') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'SATURATION');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    }
+
+                    // DISCRETE
+                    else if (name == 'AUTOMAT') {
+                        v1 = graph.insertVertex(parent, null, 'Automaton<BR>nM=2, nX=1', x, y, 80, 80, 'AUTOMAT');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT', 'EXPLICIT'], ['COMMAND']);
+                    } else if (name == 'DELAY_f') {
+                        v1 = graph.insertVertex(parent, null, 'Delay', x, y, 80, 80, 'DELAYV_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'DLR') {
+                        v1 = graph.insertVertex(parent, null, '1<BR><HR>1 + z', x, y, 80, 80, 'DLR');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'DLRADAPT_f') {
+                        v1 = graph.insertVertex(parent, null, 'N(z,p)<BR><HR>D(z,p)', x, y, 80, 80, 'DLRADAPT_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'DLSS') {
+                        v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD ALIGN="RIGHT">x</TD><TD ALIGN="CENTER">+=</TD><TD>Ax+Bu</TD></TR><TR><TD ALIGN="RIGHT">y</TD><TD ALIGN="CENTER">=</TD><TD>Cx+Du</TD></TR></TABLE>', x, y, 80, 80, 'DLSS');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'DOLLAR_f') {
+                        v1 = graph.insertVertex(parent, null, '1/z', x, y, 80, 80, 'DOLLAR_f');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'DOLLAR') {
+                        v1 = graph.insertVertex(parent, null, '1/z', x, y, 80, 80, 'DOLLAR');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'DOLLAR_m') {
+                        v1 = graph.insertVertex(parent, null, '1/z', x, y, 80, 80, 'DOLLAR_m');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'SAMPHOLD_m') {
+                        v1 = graph.insertVertex(parent, null, 'S / H', x, y, 80, 80, 'SAMPHOLD_m');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'REGISTER') {
+                        v1 = graph.insertVertex(parent, null, 'Shift<BR>register', x, y, 80, 80, 'REGISTER');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], ['EXPLICIT'], []);
+                    }
+
+                    // EVENTS
+                    else if (name == 'CLOCK_c') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'CLOCK_c');
+                        createPorts(graph, v1, [], [], [], ['COMMAND']);
+                    } else if (name == 'SampleCLK') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'SampleCLK');
+                        createPorts(graph, v1, [], [], [], ['COMMAND']);
+                    } else if (name == 'VirtualCLK0') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'VirtualCLK0');
+                        createPorts(graph, v1, [], ['CONTROL'], [], []);
+                    }
+                    // ANDBLK to come here
+                    else if (name == 'ANDLOG_f') {
+                        v1 = graph.insertVertex(parent, null, 'LOGICAL<BR>AND', x, y, 80, 80, 'ANDLOG_f');
+                        createPorts(graph, v1, [], ['CONTROL', 'CONTROL'], ['EXPLICIT'], []);
+                    } else if (name == 'CEVENTSCOPE') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'CEVENTSCOPE');
+                        createPorts(graph, v1, [], ['CONTROL'], [], []);
+                    } else if (name == 'CLKFROM') {
+                        v1 = graph.insertVertex(parent, null, 'A', x, y, 80, 80, 'CLKFROM');
+                        createPorts(graph, v1, [], [], [], ['COMMAND']);
+                    } else if (name == 'CLKGOTO') {
+                        v1 = graph.insertVertex(parent, null, 'A', x, y, 80, 80, 'CLKGOTO');
+                        createPorts(graph, v1, [], ['CONTROL'], [], []);
+                    } else if (name == 'CLKGotoTagVisibility') {
+                        v1 = graph.insertVertex(parent, null, '{A}', x, y, 80, 80, 'CLKGotoTagVisibility');
+                        createPorts(graph, v1, [], [], [], []);
+                    } else if (name == 'CLKOUTV_f') {
+                        v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80, 'CLKOUTV_f');
+                        createPorts(graph, v1, [], ['CONTROL'], [], []);
+                    } else if (name == 'CLKSOMV_f') {
+                        v1 = graph.insertVertex(parent, null, '+', x, y, 80, 80, 'CLKSOMV_f');
+                        createPorts(graph, v1, [], ['CONTROL', 'CONTROL', 'CONTROL'], [], ['COMMAND']);
+                    } else if (name == 'EDGE_TRIGGER') {
+                        v1 = graph.insertVertex(parent, null, 'Edge<BR>trigger', x, y, 80, 80, 'EDGE_TRIGGER');
+                        createPorts(graph, v1, ['EXPLICIT'], [], [], ['COMMAND']);
+                    } else if (name == 'ENDBLK') {
+                        v1 = graph.insertVertex(parent, null, 'END', x, y, 80, 80, 'ENDBLK');
+                        createPorts(graph, v1, [], [], [], []);
+                    } else if (name == 'END_c') {
+                        v1 = graph.insertVertex(parent, null, 'END', x, y, 80, 80, 'END_c');
+                        createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND']);
+                    } else if (name == 'ESELECT_f') {
+                        v1 = graph.insertVertex(parent, null, 'Event select', x, y, 80, 80, 'ESELECT_f');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], [], ['COMMAND', 'COMMAND']);
+                    } else if (name == 'EVTDLY_c') {
+                        v1 = graph.insertVertex(parent, null, 'Delay: 0.1', x, y, 80, 80, 'EVTDLY_c');
+                        createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND']);
+                    } else if (name == 'EVTGEN_f') {
+                        v1 = graph.insertVertex(parent, null, 'Event at<BR>time 0', x, y, 80, 80, 'EVTGEN_f');
+                        createPorts(graph, v1, [], [], [], ['COMMAND']);
+                    } else if (name == 'EVTVARDLY') {
+                        v1 = graph.insertVertex(parent, null, 'Event<BR>delay', x, y, 80, 80, 'EVTVARDLY');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], [], ['COMMAND']);
+                    } else if (name == 'Extract_Activation') {
+                        v1 = graph.insertVertex(parent, null, 'Extract<BR>activation', x, y, 80, 80, 'Extract_Activation');
+                        createPorts(graph, v1, ['EXPLICIT'], [], [], ['COMMAND']);
+                    } else if (name == 'HALT_f') {
+                        v1 = graph.insertVertex(parent, null, 'HALT', x, y, 80, 80, 'HALT_f');
+                        createPorts(graph, v1, [], ['CONTROL'], [], []);
+                    } else if (name == 'IFTHEL_f') {
+                        v1 = graph.insertVertex(parent, null, 'if in>0<BR>then else', x, y, 80, 80, 'IFTHEL_f');
+                        createPorts(graph, v1, ['EXPLICIT'], ['CONTROL'], [], ['COMMAND', 'COMMAND']);
+                    } else if (name == 'M_freq') {
+                        v1 = graph.insertVertex(parent, null, 'Multiple<BR>frequency', x, y, 80, 80, 'M_freq');
+                        createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND', 'COMMAND', 'COMMAND']);
+                    } else if (name == 'MCLOCK_f') {
+                        v1 = graph.insertVertex(parent, null, '2freq clock<BR>f/n f', x, y, 80, 80, 'MCLOCK_f');
+                        createPorts(graph, v1, [], [], [], ['COMMAND', 'COMMAND']);
+                    } else if (name == 'MFCLCK_f') {
+                        v1 = graph.insertVertex(parent, null, 'M. freq<BR>clock', x, y, 80, 80, 'MFCLCK_f');
+                        createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND', 'COMMAND']);
+                    } else if (name == 'freq_div') {
+                        v1 = graph.insertVertex(parent, null, 'Frequency<BR>division', x, y, 80, 80, 'freq_div');
+                        createPorts(graph, v1, [], ['CONTROL'], [], ['COMMAND']);
+                    }
+                    // LOOKUP TABLES
+                    else if (name == 'INTRP2BLK_f') {
+                        v1 = graph.insertVertex(parent, null, 'Interp 2', x, y, 80, 80, 'INTRP2BLK_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'INTRPLBLK_f') {
+                        v1 = graph.insertVertex(parent, null, 'Interp', x, y, 80, 80, 'INTRPLBLK_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'LOOKUP_f') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'LOOKUP_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    }
+                    // MATHEMATICAL OPERATIONS
+                    else if (name == 'ABS_VALUE') {
+                        v1 = graph.insertVertex(parent, null, 'ABS', x, y, 80, 80, 'ABS_VALUE');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'BIGSOM_f') {
+                        v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, 'BIGSOM_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'COSBLK_f') {
+                        v1 = graph.insertVertex(parent, null, 'COS', x, y, 80, 80, 'COSBLK_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'EXPBLK_m') {
+                        v1 = graph.insertVertex(parent, null, 'a^u', x, y, 80, 80, 'EXPBLK_m');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'GAINBLK_f') {
+                        v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80, 'GAINBLK_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'GAINBLK') {
+                        v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80, 'GAINBLK');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'GAIN_f') {
+                        v1 = graph.insertVertex(parent, null, '1', x, y, 80, 80, 'GAIN_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'INVBLK') {
+                        v1 = graph.insertVertex(parent, null, '1/u', x, y, 80, 80, 'INVBLK');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'LOGBLK_f') {
+                        v1 = graph.insertVertex(parent, null, 'LOG', x, y, 80, 80, 'LOGBLK_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'MATMAGPHI') {
+                        v1 = graph.insertVertex(parent, null, 'Mag & Phi', x, y, 80, 80, 'MATMAGPHI');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT', 'EXPLICIT'], []);
+                    } else if (name == 'MATZREIM') {
+                        v1 = graph.insertVertex(parent, null, 'Re & Im', x, y, 80, 80, 'MATZREIM');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT', 'EXPLICIT'], []);
+                    } else if (name == 'MAXMIN') {
+                        v1 = graph.insertVertex(parent, null, 'MAX', x, y, 80, 80, 'MAXMIN');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'MAX_f') {
+                        v1 = graph.insertVertex(parent, null, 'MAX', x, y, 80, 80, 'MAX_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'MIN_f') {
+                        v1 = graph.insertVertex(parent, null, 'MIN', x, y, 80, 80, 'MIN_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'POWBLK_f') {
+                        v1 = graph.insertVertex(parent, null, 'u^a', x, y, 80, 80, 'POWBLK_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'PRODUCT') {
+                        v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD>*</TD><TD ROWSPAN="2"><FONT SIZE="6">∏</FONT><TD></TR><TR><TD>÷</TD><TD/></TR></TABLE>', x, y, 80, 80, 'PRODUCT');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'PROD_f') {
+                        v1 = graph.insertVertex(parent, null, 'X', x, y, 80, 80, 'PROD_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SIGNUM') {
+                        v1 = graph.insertVertex(parent, null, 'SIGN', x, y, 80, 80, 'SIGNUM');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SINBLK_f') {
+                        v1 = graph.insertVertex(parent, null, 'SIN', x, y, 80, 80, 'SINBLK_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SQRT') {
+                        v1 = graph.insertVertex(parent, null, 'SQRT', x, y, 80, 80, 'SQRT');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SUMMATION') {
+                        v1 = graph.insertVertex(parent, null, '<TABLE><TR><TD>+</TD> <TD ROWSPAN="2"><FONT SIZE="6">∑</FONT><TD></TR><TR><TD>-</TD> <TD/></TR></TABLE>', x, y, 80, 80, 'SUMMATION');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SUM_f') {
+                        v1 = graph.insertVertex(parent, null, '+', x, y, 80, 80, 'SUM_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'SOM_f') {
+                        v1 = graph.insertVertex(parent, null, '+', x, y, 80, 80, 'SOM_f');
+                        createPorts(graph, v1, ['EXPLICIT', 'EXPLICIT', 'EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'TANBLK_f') {
+                        v1 = graph.insertVertex(parent, null, 'TAN', x, y, 80, 80, 'TANBLK_f');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    } else if (name == 'TrigFun') {
+                        v1 = graph.insertVertex(parent, null, 'Trig function', x, y, 80, 80, 'TrigFun');
+                        createPorts(graph, v1, ['EXPLICIT'], [], ['EXPLICIT'], []);
+                    }
+                    // MATRIX
+                    else if (name == 'OpAmp') {
+                        v1 = graph.insertVertex(parent, null, '<table><tr><td>+</td><td></td></tr><tr><td></td><td>OP</td></tr><tr><td>-</td><td></td></tr></table>', x, y, 80, 80, 'OpAmp');
+                        createPorts(graph, v1, ['IMPLICIT', 'IMPLICIT'], [], ['IMPLICIT'], []);
+                    } else if (name == 'TEXT_f') {
+                        v1 = graph.insertVertex(parent, null, '', x, y, 80, 80, 'TEXT_f');
+                        createPorts(graph, v1, [], [], [], []);
+                    }
+
+                    v1.setConnectable(false);
+
+                } finally {
+                    model.endUpdate();
+                }
+
+                graph.setSelectionCell(v1);
+            }
+
+            var para = document.createElement('p');
+            var blockFigure = document.createElement('figure');
+            var img = document.createElement('img');
+            img.setAttribute('src', image);
+            var caption = document.createElement('figcaption');
+            var blockName = document.createTextNode(name);
+            caption.appendChild(blockName);
+            blockFigure.appendChild(img);
+            blockFigure.appendChild(caption);
+            para.appendChild(blockFigure);
+            sidebar.appendChild(para);
+
+            var dragElt = document.createElement('div');
+            dragElt.style.border = 'dashed black 1px';
+            dragElt.style.width = '80px';
+            dragElt.style.height = '80px';
+
+            // Creates the image which is used as the drag icon (preview)
+            var ds = mxUtils.makeDraggable(img, graph, funct, dragElt, 0, 0, true, true);
+            ds.setGuidesEnabled(true);
+        };
+
+        // Create ports
+        function createPorts(graph, block, left, top, right, bottom) {
+            createInputPorts(graph, block, left, top);
+            createOutputPorts(graph, block, right, bottom);
+        }
+
+        function createInputPorts(graph, block, leftArray, topArray) {
+            var topNumber = topArray.length;
+            var leftNumber = leftArray.length;
+            if (leftNumber != 0) {
+                for (var i = 1; i <= leftNumber; i++) {
+                    var x = 0;
+                    var y = (i / (leftNumber + 1)).toFixed(4);
+                    var portType = leftArray[i - 1];
+                    createInputPort(graph, block, x, y, portType, 'left');
+                }
+            }
+            if (topNumber != 0) {
+                for (var i = 1; i <= topNumber; i++) {
+                    var x = (i / (topNumber + 1)).toFixed(4);
+                    var y = 0;
+                    var portType = topArray[i - 1];
+                    createInputPort(graph, block, x, y, portType, 'top');
+                }
+            }
+        };
+
+        function createOutputPorts(graph, block, rightArray, bottomArray) {
+            var bottomNumber = bottomArray.length;
+            var rightNumber = rightArray.length;
+            if (rightNumber != 0) {
+                for (var i = 1; i <= rightNumber; i++) {
+                    var x = 1;
+                    var y = (i / (rightNumber + 1)).toFixed(4);
+                    var portType = rightArray[i - 1];
+                    createOutputPort(graph, block, x, y, portType, 'right');
+                }
+            }
+            if (bottomNumber != 0) {
+                for (var i = 1; i <= bottomNumber; i++) {
+                    var x = (i / (bottomNumber + 1)).toFixed(4);
+                    var y = 1;
+                    var portType = bottomArray[i - 1];
+                    createOutputPort(graph, block, x, y, portType, 'bottom');
+                }
+            }
+        };
+
+        function createInputPort(graph, block, x, y, portType, position) {
+            var port = null;
+            if (portType == 'COMMAND') {
+                port = graph.insertVertex(block, null, 'CommandPort', x, y, 10, 10, 'CommandPort', true);
+            } else if (portType == 'CONTROL') {
+                port = graph.insertVertex(block, null, 'ControlPort', x, y, 10, 10, 'ControlPort', true);
+            } else if (portType == 'IMPLICIT') {
+                port = graph.insertVertex(block, null, 'ImplicitInputPort', x, y, 10, 10, 'ImplicitInputPort', true);
+            } else if (portType == 'EXPLICIT') {
+                port = graph.insertVertex(block, null, 'ExplicitInputPort', x, y, 10, 10, 'ExplicitInputPort', true);
+            }
+            if (port != null) {
+                if (position == 'top') {
+                    port.geometry.offset = new mxPoint(-6, -10);
+                } else if (position == 'left') {
+                    port.geometry.offset = new mxPoint(-10, -6);
+                }
+            }
+        };
+
+        function createOutputPort(graph, block, x, y, portType, position) {
+            var port = null;
+            if (portType == 'COMMAND') {
+                port = graph.insertVertex(block, null, 'CommandPort', x, y, 10, 10, 'CommandPort', true);
+            } else if (portType == 'CONTROL') {
+                port = graph.insertVertex(block, null, 'ControlPort', x, y, 10, 10, 'ControlPort', true);
+            } else if (portType == 'IMPLICIT') {
+                port = graph.insertVertex(block, null, 'ImplicitOutputPort', x, y, 10, 10, 'ImplicitOutputPort', true);
+            } else if (portType == 'EXPLICIT') {
+                port = graph.insertVertex(block, null, 'ExplicitOutputPort', x, y, 10, 10, 'ExplicitOutputPort', true);
+            }
+            if (port != null) {
+                if (position == 'bottom') {
+                    port.geometry.offset = new mxPoint(-6, 0);
+                }
+                if (position == 'right') {
+                    port.geometry.offset = new mxPoint(0, -6);
+                }
+            }
+        };
+
+        function configureStylesheet(graph) {
+            var req = mxUtils.load('styles/Xcos-style.xml');
+            var root = req.getDocumentElement();
+            var dec = new mxCodec(root.ownerDocument);
+            dec.decode(root, graph.stylesheet);
+            var style = graph.getStylesheet().getDefaultEdgeStyle();
+            style['edgeStyle'] = 'wireEdgeStyle';
+        };
+    </script>
+    <!--
+		Updates connection points before the routing is called.
+-->
+    <script type="text/javascript">
+        // Computes the position of edge to edge connection points.
+        mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source, constraint) {
+            var pt = null;
+
+            if (constraint != null) {
+                pt = this.graph.getConnectionPoint(terminal, constraint);
+            }
+
+            if (source) {
+                edge.sourceSegment = null;
+            } else {
+                edge.targetSegment = null;
+            }
+
+            if (pt == null) {
+                var s = this.scale;
+                var tr = this.translate;
+                var orig = edge.origin;
+                var geo = this.graph.getCellGeometry(edge.cell);
+                pt = geo.getTerminalPoint(source);
+
+                // Computes edge-to-edge connection point
+                if (pt != null) {
+                    pt = new mxPoint(s * (tr.x + pt.x + orig.x),
+                        s * (tr.y + pt.y + orig.y));
+
+                    // Finds nearest segment on edge and computes intersection
+                    if (terminal != null && terminal.absolutePoints != null) {
+                        var seg = mxUtils.findNearestSegment(terminal, pt.x, pt.y);
+
+                        // Finds orientation of the segment
+                        var p0 = terminal.absolutePoints[seg];
+                        var pe = terminal.absolutePoints[seg + 1];
+                        var horizontal = (p0.x - pe.x == 0);
+
+                        // Stores the segment in the edge state
+                        var key = (source) ? 'sourceConstraint' : 'targetConstraint';
+                        var value = (horizontal) ? 'horizontal' : 'vertical';
+                        edge.style[key] = value;
+
+                        // Keeps the coordinate within the segment bounds
+                        if (horizontal) {
+                            pt.x = p0.x;
+                            pt.y = Math.min(pt.y, Math.max(p0.y, pe.y));
+                            pt.y = Math.max(pt.y, Math.min(p0.y, pe.y));
+                        } else {
+                            pt.y = p0.y;
+                            pt.x = Math.min(pt.x, Math.max(p0.x, pe.x));
+                            pt.x = Math.max(pt.x, Math.min(p0.x, pe.x));
+                        }
+                    }
+                }
+                // Computes constraint connection points on vertices and ports
+                else if (terminal != null && terminal.cell.geometry.relative) {
+                    pt = new mxPoint(this.getRoutingCenterX(terminal),
+                        this.getRoutingCenterY(terminal));
+                }
+            }
+
+            edge.setAbsoluteTerminalPoint(pt, source);
+        };
+    </script>
+
+    <!--
+	Overrides methods to preview and create new edges.
+-->
+    <script type="text/javascript">
+        // Sets source terminal point for edge-to-edge connections.
+        mxConnectionHandler.prototype.createEdgeState = function(me) {
+            var edge = this.graph.createEdge();
+
+            if (this.sourceConstraint != null && this.previous != null) {
+                edge.style = mxConstants.STYLE_EXIT_X + '=' + this.sourceConstraint.point.x + ';' +
+                    mxConstants.STYLE_EXIT_Y + '=' + this.sourceConstraint.point.y + ';';
+            } else if (this.graph.model.isEdge(me.getCell())) {
+                var scale = this.graph.view.scale;
+                var tr = this.graph.view.translate;
+                var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
+                    this.graph.snap(me.getGraphY() / scale) - tr.y);
+                edge.geometry.setTerminalPoint(pt, true);
+            }
+
+            return this.graph.view.createState(edge);
+        };
+
+        // Uses right mouse button to create edges on background (see also: lines 67 ff)
+        mxConnectionHandler.prototype.isStopEvent = function(me) {
+            return me.getState() != null || mxEvent.isRightMouseButton(me.getEvent());
+        };
+
+        // Updates target terminal point for edge-to-edge connections.
+        mxConnectionHandlerUpdateCurrentState = mxConnectionHandler.prototype.updateCurrentState;
+        mxConnectionHandler.prototype.updateCurrentState = function(me) {
+            mxConnectionHandlerUpdateCurrentState.apply(this, arguments);
+
+            if (this.edgeState != null) {
+                this.edgeState.cell.geometry.setTerminalPoint(null, false);
+
+                if (this.shape != null && this.currentState != null &&
+                    this.currentState.view.graph.model.isEdge(this.currentState.cell)) {
+                    var scale = this.graph.view.scale;
+                    var tr = this.graph.view.translate;
+                    var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
+                        this.graph.snap(me.getGraphY() / scale) - tr.y);
+                    this.edgeState.cell.geometry.setTerminalPoint(pt, false);
+                }
+            }
+        };
+
+        // Updates the terminal and control points in the cloned preview.
+        mxEdgeSegmentHandler.prototype.clonePreviewState = function(point, terminal) {
+            var clone = mxEdgeHandler.prototype.clonePreviewState.apply(this, arguments);
+            clone.cell = clone.cell.clone();
+
+            if (this.isSource || this.isTarget) {
+                clone.cell.geometry = clone.cell.geometry.clone();
+
+                // Sets the terminal point of an edge if we're moving one of the endpoints
+                if (this.graph.getModel().isEdge(clone.cell)) {
+                    clone.cell.geometry.setTerminalPoint(point, this.isSource);
+                } else {
+                    clone.cell.geometry.setTerminalPoint(null, this.isSource);
+                }
+            }
+
+            return clone;
+        };
+
+        var mxEdgeHandlerConnect = mxEdgeHandler.prototype.connect;
+        mxEdgeHandler.prototype.connect = function(edge, terminal, isSource, isClone, me) {
+            var result = null;
+            var model = this.graph.getModel();
+            var parent = model.getParent(edge);
+
+            model.beginUpdate();
+            try {
+                result = mxEdgeHandlerConnect.apply(this, arguments);
+                var geo = model.getGeometry(result);
+
+                if (geo != null) {
+                    geo = geo.clone();
+                    var pt = null;
+
+                    if (model.isEdge(terminal)) {
+                        pt = this.abspoints[(this.isSource) ? 0 : this.abspoints.length - 1];
+                        pt.x = pt.x / this.graph.view.scale - this.graph.view.translate.x;
+                        pt.y = pt.y / this.graph.view.scale - this.graph.view.translate.y;
+
+                        var pstate = this.graph.getView().getState(
+                            this.graph.getModel().getParent(edge));
+
+                        if (pstate != null) {
+                            pt.x -= pstate.origin.x;
+                            pt.y -= pstate.origin.y;
+                        }
+
+                        pt.x -= this.graph.panDx / this.graph.view.scale;
+                        pt.y -= this.graph.panDy / this.graph.view.scale;
+                    }
+
+                    geo.setTerminalPoint(pt, isSource);
+                    model.setGeometry(edge, geo);
+                }
+            } finally {
+                model.endUpdate();
+            }
+
+            return result;
+        };
+    </script>
+    <!--
+	Adds in-place highlighting for complete cell area (no hotspot).
+-->
+    <script type="text/javascript">
+        mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker;
+        mxConnectionHandler.prototype.createMarker = function() {
+            var marker = mxConnectionHandlerCreateMarker.apply(this, arguments);
+
+            // Uses complete area of cell for new connections (no hotspot)
+            marker.intersects = function(state, evt) {
+                return true;
+            };
+
+            return marker;
+        };
+
+        mxEdgeHandlerCreateMarker = mxEdgeHandler.prototype.createMarker;
+        mxEdgeHandler.prototype.createMarker = function() {
+            var marker = mxEdgeHandlerCreateMarker.apply(this, arguments);
+
+            // Adds in-place highlighting when reconnecting existing edges
+            marker.highlight.highlight = this.graph.connectionHandler.marker.highlight.highlight;
+
+            return marker;
+        }
+    </script>
+    <!--
+	Imlements a custom resistor shape. Direction currently ignored here.
+-->
+    <script type="text/javascript">
+        mxEdgeStyle.WireConnector = function(state, source, target, hints, result) {
+            // Creates array of all way- and terminalpoints
+            var pts = state.absolutePoints;
+            var horizontal = true;
+            var hint = null;
+
+            // Gets the initial connection from the source terminal or edge
+            if (source != null && state.view.graph.model.isEdge(source.cell)) {
+                horizontal = state.style['sourceConstraint'] == 'horizontal';
+            } else if (source != null) {
+                horizontal = source.style['portConstraint'] != 'vertical';
+
+                // Checks the direction of the shape and rotates
+                var direction = source.style[mxConstants.STYLE_DIRECTION];
+
+                if (direction == 'north' || direction == 'south') {
+                    horizontal = !horizontal;
+                }
+            }
+
+            // Adds the first point
+            var pt = pts[0];
+
+            if (pt == null && source != null) {
+                pt = new mxPoint(state.view.getRoutingCenterX(source), state.view.getRoutingCenterY(source));
+            } else if (pt != null) {
+                pt = pt.clone();
+            }
+
+            var first = pt;
+
+            // Adds the waypoints
+            if (hints != null && hints.length > 0) {
+                for (var i = 0; i < hints.length; i++) {
+                    horizontal = !horizontal;
+                    hint = state.view.transformControlPoint(state, hints[i]);
+
+                    if (horizontal) {
+                        if (pt.y != hint.y) {
+                            pt.y = hint.y;
+                            result.push(pt.clone());
+                        }
+                    } else if (pt.x != hint.x) {
+                        pt.x = hint.x;
+                        result.push(pt.clone());
+                    }
+                }
+            } else {
+                hint = pt;
+            }
+
+            // Adds the last point
+            pt = pts[pts.length - 1];
+
+            if (pt == null && target != null) {
+                pt = new mxPoint(state.view.getRoutingCenterX(target), state.view.getRoutingCenterY(target));
+            }
+
+            if (horizontal) {
+                if (pt.y != hint.y && first.x != pt.x) {
+                    result.push(new mxPoint(pt.x, hint.y));
+                }
+            } else if (pt.x != hint.x && first.y != pt.y) {
+                result.push(new mxPoint(hint.x, pt.y));
+            }
+        };
+
+        mxStyleRegistry.putValue('wireEdgeStyle', mxEdgeStyle.WireConnector);
+
+        // This connector needs an mxEdgeSegmentHandler
+        mxGraphCreateHandler = mxGraph.prototype.createHandler;
+        mxGraph.prototype.createHandler = function(state) {
+            var result = null;
+
+            if (state != null) {
+                if (this.model.isEdge(state.cell)) {
+                    var style = this.view.getEdgeStyle(state);
+
+                    if (style == mxEdgeStyle.WireConnector) {
+                        return new mxEdgeSegmentHandler(state);
+                    }
+                }
+            }
+
+            return mxGraphCreateHandler.apply(this, arguments);
+        };
+    </script>
+
 </head>
 
 <!-- Page passes the container for the graph to the program -->
+
 <body onload="main(document.getElementById('graphContainer'),
 			document.getElementById('outlineContainer'),
 		 	document.getElementById('toolbarContainer'),
 			document.getElementById('sidebarContainer'),
 			document.getElementById('statusContainer'));" style="margin:0px;">
-	
-	<!-- Creates a container for the splash screen -->
-	<div id="splash"
-		style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:white;z-index:1;">
-		<center id="splash" style="padding-top:230px;">
-			<img src="images/loading.gif">
-		</center>
-	</div>
-	
-	<!-- Creates a container for the sidebar -->
-	<div id="toolbarContainer"
-		style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('images/toolbar_bg.gif');">
-	</div>
-
-	<!-- Creates a container for the toolboox -->
-	<div id="sidebarContainer" class="ui-accordion ui-widget ui-helper-reset"
-		style="position:absolute;overflow:scroll;top:36px;left:0px;bottom:36px;max-width:266px;width:270px;padding-top:10px;padding-left:4px;">
-	</div>
-
-	<!-- Creates a container for the graph -->
-	<div id="graphContainer"
-		style="position:absolute;overflow:hidden;top:36px;left:270px;bottom:36px;right:0px;background-image:url('images/grid.gif');cursor:default;">
-	</div>
-
-	<!-- Creates a container for the outline -->
-	<div id="outlineContainer"
-		style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
-	</div>
-		
-	<!-- Creates a container for the sidebar -->
-	<div id="statusContainer"
-		style="text-align:right;position:absolute;overflow:hidden;bottom:0px;left:0px;max-height:24px;height:36px;right:0px;color:white;padding:6px;background-image:url('images/toolbar_bg.gif');">
-		<div style="font-size:10pt;float:left;">
-			<a href="http://fossee.in/" target="_tab">FOSSEE</a>
-		</div>
-	</div>
-	
-	<!-- Secret -->
-	<p class="accordion-expand-holder" style="display:none">
-    	<a id='toggleBlocks' class="accordion-expand-all">Expand All</a>
-	</p>
-	
+
+    <!-- Creates a container for the splash screen -->
+    <div id="splash" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:white;z-index:1;">
+        <center id="splash" style="padding-top:230px;">
+            <img src="images/loading.gif">
+        </center>
+    </div>
+
+    <!-- Creates a container for the sidebar -->
+    <div id="toolbarContainer" style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('images/toolbar_bg.gif');">
+    </div>
+
+    <!-- Creates a container for the toolboox -->
+    <div id="sidebarContainer" class="ui-accordion ui-widget ui-helper-reset" style="position:absolute;overflow:scroll;top:36px;left:0px;bottom:36px;max-width:266px;width:270px;padding-top:10px;padding-left:4px;">
+    </div>
+
+    <!-- Creates a container for the graph -->
+    <div id="graphContainer" style="position:absolute;overflow:hidden;top:36px;left:270px;bottom:36px;right:0px;background-image:url('images/grid.gif');cursor:default;">
+    </div>
+
+    <!-- Creates a container for the outline -->
+    <div id="outlineContainer" style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
+    </div>
+
+    <!-- Creates a container for the sidebar -->
+    <div id="statusContainer" style="text-align:right;position:absolute;overflow:hidden;bottom:0px;left:0px;max-height:24px;height:36px;right:0px;color:white;padding:6px;background-image:url('images/toolbar_bg.gif');">
+        <div style="font-size:10pt;float:left;">
+            <a href="http://fossee.in/" target="_tab">FOSSEE</a>
+        </div>
+    </div>
+
+    <!-- Secret -->
+    <p class="accordion-expand-holder" style="display:none">
+        <a id='toggleBlocks' class="accordion-expand-all">Expand All</a>
+    </p>
+
 </body>
-  <!-- It's good if this part happens after the entire page has loaded-->
-  <script type="text/javascript">
-		// Preload all images
-		var dir = ["blocks","images"];
-		var fileextension = ".";
-		var blockImages = [];
-		$.each(dir, function (index, value) {
-			$.ajax({ // http://stackoverflow.com/a/18480589
-			    url: value,
-			    success: function (data) {
-			        $(data).find("a:contains(" + fileextension + ")").each(function () { 
-			            var filename = this.href.replace(window.location.host, "");
-			            filename = filename.replace("https://", value);
-			            filename = filename.replace("http://", value);
-			            blockImages.push(filename);
-			        });
-			        // Prevent multi-threading and have function within call!
-			        function preload(sources) {
-			        	var images = [];
-					  	for (var i = 0, length = sources.length; i < length; ++i) {
-					    	images[i] = new Image();
-					    	images[i].src = sources[i];
-					  	}
-					}
-					preload(blockImages);
-			    }
-			});
-		});
-		//Find out more here: http://stackoverflow.com/questions/12843418/jquery-ui-accordion-expand-collapse-all
-        $(window).load(function(){
-			var headers = $('#sidebarContainer .accordion-header');
-			var contentAreas = $('#sidebarContainer .ui-accordion-content ').hide();
-			var expandLink = $('.accordion-expand-all');
-
-			// add the accordion functionality
-			headers.click(function() {
-				var panel = $(this).next();
-				var isOpen = panel.is(':visible');
-			 
-				// open or close as necessary
-				panel[isOpen? 'slideUp': 'slideDown']()
-					// trigger the correct custom event
-					.trigger(isOpen? 'hide': 'show');
-
-				// stop the link from causing a pagescroll
-				return false;
-			});
-
-			// hook up the expand/collapse all
-			expandLink.click(function(){
-				var isAllOpen = $(this).data('isAllOpen');
-				
-				contentAreas[isAllOpen? 'hide': 'show']()
-					.trigger(isAllOpen? 'hide': 'show');
-			});
-
-			// when panels open or close, check to see if they're all open
-			contentAreas.on({
-				// whenever we open a panel, check to see if they're all open
-				// if all open, swap the button to collapser
-				show: function(){
-					var isAllOpen = !contentAreas.is(':hidden');   
-					if(isAllOpen){
-						expandLink.text('Collapse All')
-							.data('isAllOpen', true);
-					}
-				},
-				// whenever we close a panel, check to see if they're all open
-				// if not all open, swap the button to expander
-				hide: function(){
-					var isAllOpen = !contentAreas.is(':hidden');
-					if(!isAllOpen){
-						expandLink.text('Expand All')
-						.data('isAllOpen', false);
-					} 
-				}
-			});
-		});
-  </script>	
-</html>
\ No newline at end of file
+<!-- It's good if this part happens after the entire page has loaded-->
+<script type="text/javascript">
+    // Preload all images
+    var dir = ["blocks", "images"];
+    var fileextension = ".";
+    var blockImages = [];
+    $.each(dir, function(index, value) {
+        $.ajax({ // http://stackoverflow.com/a/18480589
+            url: value,
+            success: function(data) {
+                $(data).find("a:contains(" + fileextension + ")").each(function() {
+                    var filename = this.href.replace(window.location.host, "");
+                    filename = filename.replace("https://", value);
+                    filename = filename.replace("http://", value);
+                    blockImages.push(filename);
+                });
+                // Prevent multi-threading and have function within call!
+                function preload(sources) {
+                    var images = [];
+                    for (var i = 0, length = sources.length; i < length; ++i) {
+                        images[i] = new Image();
+                        images[i].src = sources[i];
+                    }
+                }
+                preload(blockImages);
+            }
+        });
+    });
+    //Find out more here: http://stackoverflow.com/questions/12843418/jquery-ui-accordion-expand-collapse-all
+    $(window).load(function() {
+        var headers = $('#sidebarContainer .accordion-header');
+        var contentAreas = $('#sidebarContainer .ui-accordion-content ').hide();
+        var expandLink = $('.accordion-expand-all');
+
+        // add the accordion functionality
+        headers.click(function() {
+            var panel = $(this).next();
+            var isOpen = panel.is(':visible');
+
+            // open or close as necessary
+            panel[isOpen ? 'slideUp' : 'slideDown']()
+                // trigger the correct custom event
+                .trigger(isOpen ? 'hide' : 'show');
+
+            // stop the link from causing a pagescroll
+            return false;
+        });
+
+        // hook up the expand/collapse all
+        expandLink.click(function() {
+            var isAllOpen = $(this).data('isAllOpen');
+
+            contentAreas[isAllOpen ? 'hide' : 'show']()
+                .trigger(isAllOpen ? 'hide' : 'show');
+        });
+
+        // when panels open or close, check to see if they're all open
+        contentAreas.on({
+            // whenever we open a panel, check to see if they're all open
+            // if all open, swap the button to collapser
+            show: function() {
+                var isAllOpen = !contentAreas.is(':hidden');
+                if (isAllOpen) {
+                    expandLink.text('Collapse All')
+                        .data('isAllOpen', true);
+                }
+            },
+            // whenever we close a panel, check to see if they're all open
+            // if not all open, swap the button to expander
+            hide: function() {
+                var isAllOpen = !contentAreas.is(':hidden');
+                if (!isAllOpen) {
+                    expandLink.text('Expand All')
+                        .data('isAllOpen', false);
+                }
+            }
+        });
+    });
+</script>
+
+</html>