

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

	this.top_offset = 90;    // der Abstand der Knoten vom oberen Rand der Zeichenflaeche
	this.left_offset = 150;  // 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= 340; // Breite der Zeichenflaeche
	this.canvas_height= 1010; // Breite der Zeichenflaeche

	this.control2X = 1;
	this.control2Y = 1;
	this.control1X = 1;
	this.control1Y = 1;
	this.control1Xdirect = 1;
	this.control1Ydirect = 1;
	this.control2Xdirect = 1;
	this.control2Ydirect = 1;
	this.arrowHeadAdjust = 1;
		
	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 this.control2X;
	}

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

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

	this.getControl1FractionY = function() {
		return this.control1Y;
	}
	
	this.getControl1FractionXDirect = function() {
		return this.control1Xdirect;	

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

	this.getControl2FractionXDirect = function() {
		return this.control2Xdirect;	

	}
	
	this.getControl2FractionYDirect = function() {
		return this.control2Ydirect;	
	}
	
	this.getArrowHeadAjust = function() {
		return this.arrowHeadAdjust;		
	}
	
/////////////////////////////////////////////////////////////////////////////////////////////////////


	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 !!!!


	// die Formularfelder
	this.forms = Array();
	for(var i=0; i<this.num_nodes;i++)
		this.forms[i] = new FormField(this, i);
	
	
	this.getInput = function(num) {
		// gibt die Eingabe von Formularfeld num zurueck
		return this.forms[num].getInput();
	}
	
	this.update = function() {
			
		var x = document.getElementById("DISTANCE").value;
		this.graph.distance=parseInt(x);
		document.getElementById("DISTANCE_DISPLAY").innerHTML=x;

		x = document.getElementById("RADIUS").value;
		this.graph.node_radius=parseInt(x);
		document.getElementById("RADIUS_DISPLAY").innerHTML=x;

		x = document.getElementById("CONTROL2X").value;
		this.control2X=parseInt(x)/10;
		document.getElementById("CONTROL2X_DISPLAY").innerHTML=x/10;

		x = document.getElementById("CONTROL2Y").value;
		this.control2Y=parseInt(x)/10;
		document.getElementById("CONTROL2Y_DISPLAY").innerHTML=x/10;

		x = document.getElementById("CONTROL1X").value;
		this.control1X=parseInt(x)/10;
		document.getElementById("CONTROL1X_DISPLAY").innerHTML=x/10;

		x = document.getElementById("CONTROL1Y").value;
		this.control1Y=parseInt(x)/10;
		document.getElementById("CONTROL1Y_DISPLAY").innerHTML=x/10;

		x = document.getElementById("CONTROL1XDIRECT").value;
		this.control1Xdirect=parseInt(x)/10;
		document.getElementById("CONTROL1XDIRECT_DISPLAY").innerHTML=x/10;

		x = document.getElementById("CONTROL1YDIRECT").value;
		this.control1Ydirect=parseInt(x)/10;
		document.getElementById("CONTROL1YDIRECT_DISPLAY").innerHTML=x/10;

		x = document.getElementById("CONTROL2XDIRECT").value;
		this.control2Xdirect=parseInt(x)/10;
		document.getElementById("CONTROL2XDIRECT_DISPLAY").innerHTML=x/10;

		x = document.getElementById("CONTROL2YDIRECT").value;
		this.control2Ydirect=parseInt(x)/10;
		document.getElementById("CONTROL2YDIRECT_DISPLAY").innerHTML=x/10;

		x = document.getElementById("ARROWHEAD").value;
		this.arrowHeadAdjust = parseInt(x)/10;
		document.getElementById("ARROWHEAD_DISPLAY").innerHTML=x/10;
		// loesche Zeichenflaeche
		ctx.clearRect(0,0,this.canvas_width,this.canvas_height);
		// zeichne Gitter
		//this.graph.drawGrid();
		// zeichne Kontrollinien
		//this.graph.display_control_lines = true;
		// zeichne  Knoten
		for (var i = 0; i <this.num_nodes;i++) 
			this.graph.drawNode(i, "#000000",true);
			
		if(document.getElementById("LAYOUT").checked) {
			// initialisiere Kantenmatrix
			this.graph.initEdges();
			// ordne und zeichne Kanten
			this.graph.layoutEdges();
		} else {
			this.graph.drawEdges();
		}
	}
	
	// erzeugt Graph
	this.graph = new Graph(this,
				   ctx,     
	                           this.num_nodes,  
			           this.top_offset,  
			           this.left_offset,         
				   this.node_radius,         
			           this.distance); 

}
