function Editor(ctx) {
	
//////////////////////////////////////////////////////////////////////////////////////////////////////
//  
//   E I N S T E L L U N G E N
//
/////////////////////////////////////////////////////////////////////////////////////////////////////

	this.top_offset = 68;    // der Abstand der Knoten vom oberen Rand der Zeichenflaeche
	this.left_offset = 100;  // der Abstand der Knoten vom linken Rand der Zeichenflaeche
	this.node_radius = 20;  // der Radius eines Knotens
	this.distance = 80;       // der Knotenabstand
	this.canvas_width= 240; // Breite der Zeichenflaeche
	this.canvas_height= 1010; // Breite der Zeichenflaeche
		
	this.getNodeColor = function() {
		// die Farbe aller Knoten
		return "#999999";
	}
	
	this.getActiveNodeColor = function() {
		// die Farbe der tatsaechlich verwendeten Knoten
		return "#000000";
	}
	
	this.getEdgeColor = function() {
		// die Farbe der Kanten
		return "#000000";
	}
	
	this.getArrowHeadColor = function() {
		// die Farbe der Pfeilspitzen
		return "#BB2F24";
	}
	
	
	this.getControl2FractionX = function() {
		return 1.2;
	}

	this.getControl2FractionY = function() {
		return 1.8;
	}

	this.getControl1FractionX = function() {
		return 0.6;
	}

	this.getControl1FractionY = function() {
		return -0.2;
	}
	
	this.getControl1FractionXDirect = function() {
		return 1.1;	

	}
	
	this.getControl1FractionYDirect = function() {
		return 0;	
	}

	this.getControl2FractionXDirect = function() {
		return 0.6;	

	}
	
	this.getControl2FractionYDirect = function() {
		return 0.2;	
	}
	
	this.getArrowHeadAjust = function() {
		return 2.7;		
	}
	

/////////////////////////////////////////////////////////////////////////////////////////////////////

	this.getCanvasHeight = function() {
		return this.canvas_height;
	}
	
	this.getCanvasWidth = function() {
		return this.canvas_width;
	}
	
	this.num_nodes = 12;   // die Anzahl aller Knoten
	// ACHTUNG: Diese Zahl muss zu der Zahl der Formularfelder im HTML Dokument passen
	// Ausserdem muss die Zahl der Nummer Bilder fuer die Knoten dazu passen !!!!

	// blendet den HTML Text fuer die statische Version aus
	// und den Text fuer die dynamische Version ein
	document.getElementById("interactive").style.display="block";
	// document.getElementById("static").style.display="none";
	// besser ueber innerHTML Inhalt des static BEreichs loeschen, wegen CSS No / JavaScript yes Version
	document.getElementById("static").innerHTML=" ";
	
	// blendet die Images der knoten fuer die statische Version aus
	// und die Canvas Zeichenflaeche fuer die dynamische Version ein
	document.getElementById("canvas").style.display="block";
	// document.getElementById("images").style.display="none";
	// besser ueber innerHTML Inhalt des image BEreichs loeschen, wegen CSS No / JavaScript yes Version
	document.getElementById("images").innerHTML=" ";
		
	// die Formularfelder
	this.forms = Array();
	for(var i=0; i<this.num_nodes;i++)
		this.forms[i] = new FormField(this, i);
	
	this.getNodeCnt = function() {
		// ermittelt die Nummer n = node_cnt des Knoten mit hoechster Nummer 
		// zu dem eine Kante hinzeigt, oder dessen Eingabefeld gefuellt ist. 
		// die Knoten 0..n sind dann die aktiven Knoten und werden schwarz 
		// statt grau gezeichnet...
 		var max=0;
		//betrachtet die Spalte Nachfolger
  		for (var i = 0; i < this.num_nodes; i++) {
			try {
				var values = this.forms[i].getInput();
			} catch (e) {
				return 0;
			}
			if (values.length>0) {
				if(i+1 > max)
					max=i+1;
				for (var j = 0; j < values.length; j++) {
					if (values[j]+1>=max)
						max = values[j]+1;
				}
			}
  		}
		// betrachtet die anderen Spalten
  		for (var i = 0; i < this.num_nodes; i++) {
			if (this.forms[i].nameNotEmpty()) 
				if(i+1>max) max=i+1;
			if (this.forms[i].toNotEmpty()) 
				if(i+1>max) max=i+1;
			if (this.forms[i].fromNotEmpty()) 
				if(i+1>max) max=i+1;
		}
 		return max;
 	}
	
	this.getInput = function(num) {
		// gibt die Eingabe von Formularfeld num zurueck
		return this.forms[num].getInput();
	}
	
	this.update = function() {
		// bestimme Zahl der aktiven Knoten
		var num_active = this.getNodeCnt();
		// loesche canvas
		ctx.clearRect(0,0,this.canvas_width,this.canvas_height);
		// zeichne aktive Knoten
		for (var i = 0; i <num_active;i++) 
			this.graph.drawNode(i, this.getActiveNodeColor(),true);
		// zeichne inaktive Knoten
		for (var i = num_active; i <this.num_nodes;i++)
			this.graph.drawNode(i, this.getNodeColor(),false);	
		// initialisiere Kanten
		this.graph.initEdges();
		// zeichne Kanten
		this.graph.layoutEdges();
		// zeichne aktive Formularfelder
		for (var i = 0; i <num_active;i++) 
			this.forms[i].drawActive();
		// zeichne inaktive Formularfelder
		for (var i = num_active; i <this.num_nodes;i++)
			this.forms[i].drawInActive();
	}
	
	// erzeugt Graph
	this.graph = new Graph(this,
				   ctx,     
	                           this.num_nodes,  
			           this.top_offset,  
			           this.left_offset,         
				   this.node_radius,         
			           this.distance); 

}