mxConstants.VERTEX_SELECTION_COLOR = '#F5832F'; //'red';
mxConstants.VERTEX_SELECTION_STROKEWIDTH = 1;
mxConstants.VERTEX_SELECTION_DASHED = false;
mxResources.extension = '.properties';
mxResources.resourcesEncoded = true;
window.org_eclipse_osbp_utils_vaadin_bpmn_BpmnRenderer = function() {
	// Makes the shadow brighter
	mxConstants.SHADOWCOLOR = '#C0C0C0';
	bpmnStartStyle = 'bpmnStartStyle';
	bpmnEndStyle = 'bpmnEndStyle';
	bpmnProcessStyle = 'bpmnProcessStyle';
	bpmnConditionStyle = 'bpmnConditionStyle';
	bpmnCrossoverStyle = 'bpmnCrossoverStyle';
	bpmnSwimlaneStyle = 'bpmnSwimlaneStyle';
	bpmnCallActivityStyle = 'bpmnCallActivityStyle'; 

	bpmnConnector = this;
	var margin = {
		top : 10,
		right : 10,
		bottom : 10,
		left : 10
	}, 
	graphWidth = "100%", 
	graphHeight = "100%";
	outlineWidth = "160px";
	outlineHeight = "120px";

	bpmnCreationCode = ""; 
	selectedCell = "";
	graph = null;
	model = null;
	outline = null;
	outlineNode = null;
	intervalID = 0;
	cellIsHighlighted = false;

	this.onStateChange = function() {
		setCreationCode(this.getState().bpmnCreationCode);
		setSelectedCell(this.getState().selectedCell);
	}
	
	var element = this.getElement();
	var root = d3.select(element);
	
	var bpmnChartDiv = root
			.append("div")
			.attr("id", "BPMN_div")
		    .style("z-index", "1")
			.style("overflow", "hidden")
			.style("border", "gray solid 1px")
			.style("cursor", "default")
			.style("width", graphWidth)
			.style("height", graphHeight);
//			.style("margin-left",margin.left + "px")
//			.style("margin-top", margin.top + "px")
//			.style("margin-right", margin.right + "px")
//			.style("margin-bottom", margin.bottom + "px");
	bpmnChartDiv.append("div").attr("id","outlineContainer")
			.attr("class", "os-bpmn-component-div")
			.style("z-index", "2")
			.style("position", "absolute")
			.style("overflow", "hidden")
			.style("border-style", "solid")
			.style("border-color","lightgray")
			.style("width", outlineWidth)
			.style("height", outlineHeight)
			.style("left",margin.right + "px")
			.style("bottom", margin.bottom + "px");

	// Checks if 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 {
		outlineNode = bpmnChartDiv.select("#outlineContainer").node();
		var containerDiv = bpmnChartDiv
			.append('div')
			.style('position','absolute')
			.style('overflow', 'hidden')
			.style("background","transparent").node();
			mxEvent.disableContextMenu(containerDiv);

		if (mxClient.IS_QUIRKS) {
			bpmnChartDiv.style('overflow', 'hidden');
			new mxDivResizer(containerDiv);
			new mxDivResizer(outlineNode);
		}
		// Creates the graph inside the given container
		graph = bpmnCreateGraph(containerDiv);

		// Set some stylesheet options for the visual appearance of vertices
		bpmnCreateStyle(graph);

		// Creates the outline (navigator, overview) for moving
		// around the graph in the top, right corner of the window.
		outline = new mxOutline(graph, outlineNode);

		bpmnAddFoldingSwimlanesBehaviour(graph);

		model = graph.getModel();
		setSwimlanesLayout(graph, model);
		
		graph.setCellsSelectable(false);
		bpmnConnector.addResizeListener(bpmnConnector.getElement(), function() {
			var size = bpmnConnector.getElement().getSize();
			graph.ccFit(size.x, size.y);
		});
	};
}

function bpmnCreateGraph(container) {
	graph = new mxGraph(container);
	graph.graphHandler.setRemoveCellsFromParent(false);
	// makes the graph not editable
	graph.setCellsResizable(false);
	graph.setCellsEditable(false);
	graph.setConnectableEdges(false);
	graph.setEdgeLabelsMovable(false);
	graph.setDisconnectOnMove(false);
	graph.setAllowDanglingEdges(false);
	graph.setCellsDisconnectable(false);
	graph.setCellsBendable(false);
	// Enables automatic sizing for vertices after editing and
	// panning by using the left mouse button.
	graph.setAutoSizeCells(true);
	graph.setHtmlLabels(true);
	graph.setPanning(true);
	graph.centerZoom = true;
	graph.minFitScale = 0.5;
	graph.panningHandler.useLeftButtonForPanning = true;

	// Displays a popupmenu when the user clicks
	// on a cell (using the left mouse button) but
	// do not select the cell when the popup menu
	// is displayed
	graph.panningHandler.popupMenuHandler = false;

	// Disables tooltips on touch devices
	graph.setTooltips(!mxClient.IS_TOUCH);

	// Installs a popupmenu handler using local function (see below).
	graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
		return bpmnCreatePopupMenu(graph, menu, cell, evt);
	};

	// Fix for wrong preferred size
	var oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
	graph.getPreferredSizeForCell = function(cell) {
		var result = oldGetPreferredSizeForCell.apply(this, arguments);

		if (result != null) {
			result.width = Math.max(120, result.width - 40);
		}

		return result;
	};

	// Sets the maximum text scale to 1
	graph.cellRenderer.getTextScale = function(state) {
		return Math.min(1, state.view.scale);
	};

	// Dynamically adds text to the label as we zoom in
	// (without affecting the preferred size for new cells)
	graph.cellRenderer.getLabelValue = function(state) {
		var cellValue = state.cell.value;
		var result;
		if (mxUtils.isNode(cellValue)) {
			result = cellValue.getAttribute(cellLabelConst, '');
			// result = '<div style="width: 150px;
			// white-space:normal;">'+result+'</div>'

		} else {
			result = cellValue;
		}

		return result;
	};

	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);
	};

	// handles mouse click events
	graph.addListener(mxEvent.CLICK, function(sender, evt) {
		var e = evt.getProperty('event'); // mouse event
		// If left mouse click
		if (e.button == 0) {
			var cell = evt.getProperty('cell'); // cell may be null
			if (cell != null && cell.value != null) {
				if (cell.id.startsWith("StartEvent")) {
					bpmnConnector.onStartClick();
					evt.consume();
				} else if(cell.getId() == selectedCell) {
					bpmnConnector.onSelectedClick();
					evt.consume();
				}
			}
		};
	});
	
	return graph;
};

function bpmnCreateStyle(graph) {
	// Changes the default vertex style in-place
	var style = mxUtils.clone(graph.getStylesheet().getDefaultVertexStyle());
	style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
	style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
	style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#F2F3F4'; //'white';
	style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';	
	style[mxConstants.STYLE_FONTSIZE] = 14;
	style[mxConstants.STYLE_GLASS] = '1';
	style[mxConstants.STYLE_STARTSIZE] = 22;
	style[mxConstants.STYLE_HORIZONTAL] = false;
	//delete style[mxConstants.STYLE_FILLCOLOR];
	style[mxConstants.STYLE_STROKECOLOR] = '#9FA0A5'; //d-grau
	style[mxConstants.STYLE_FILLCOLOR] = '#F2F3F4'; //grau
	style[mxConstants.STYLE_FONTCOLOR] = '#464646'; //d-d-grau	
	graph.getStylesheet().putCellStyle(bpmnSwimlaneStyle, style);
	// Sets all cells not movable
	// Decision to put this style here is to allow that the above style (for
	// lanes and pools) are movable
	style[mxConstants.STYLE_MOVABLE] = 0;
	
	//task
	style = mxUtils.clone(style);
	style[mxConstants.STYLE_SHAPE] = 'label'; //mxConstants.SHAPE_RECTANGLE;
	style[mxConstants.STYLE_FONTSIZE] = 14;
	style[mxConstants.STYLE_WHITE_SPACE] = 'wrap';
	//style[mxConstants.STYLE_ROUNDED] = true;
	style[mxConstants.STYLE_HORIZONTAL] = true;
	style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
	delete style[mxConstants.STYLE_STARTSIZE];
	//style[mxConstants.STYLE_GRADIENTCOLOR] = '#ffffff';
	style[mxConstants.STYLE_FILLCOLOR] = '#F2F3F4'; //#7d85df';
	style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none';
	graph.getStylesheet().putCellStyle(bpmnProcessStyle, style);
	
	//call activity
	style = mxUtils.clone(style);
	style[mxConstants.STYLE_SHAPE] = 'label'; //mxConstants.SHAPE_RECTANGLE;
	style[mxConstants.STYLE_FONTSIZE] = 14;
	style[mxConstants.STYLE_WHITE_SPACE] = 'wrap';
	style[mxConstants.STYLE_ROUNDED] = true;
	style[mxConstants.STYLE_STROKEWIDTH] = 3;
	style[mxConstants.STYLE_STROKECOLOR] = '#000000';
	style[mxConstants.STYLE_HORIZONTAL] = true;
	style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
	delete style[mxConstants.STYLE_STARTSIZE];
	style[mxConstants.STYLE_FILLCOLOR] = '#F2F3F4'; //#7d85df';
	style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none';
	graph.getStylesheet().putCellStyle(bpmnCallActivityStyle, style);
	
	//start
	style = mxUtils.clone(style);
	delete style[mxConstants.STYLE_WHITE_SPACE];
	style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
	style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
	style[mxConstants.STYLE_SPACING_TOP] = 50;
	style[mxConstants.STYLE_FONTSIZE] = 12;
	style[mxConstants.STYLE_FONTSTYLE] = 1;
	style[mxConstants.STYLE_FILLCOLOR] = '#D9FFC9';
	graph.getStylesheet().putCellStyle(bpmnStartStyle, style);
	
	//gateway
	style = mxUtils.clone(style);
	style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;
	style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
	style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top';
	style[mxConstants.STYLE_SPACING_TOP] = 56;
	style[mxConstants.STYLE_SPACING_RIGHT] = 64;
	style[mxConstants.STYLE_FILLCOLOR] = '#FFF8D8';
	style[mxConstants.STYLE_FONTCOLOR] = '#868686';
	// delete style[mxConstants.STYLE_FILLCOLOR];
	graph.getStylesheet().putCellStyle(bpmnConditionStyle, style);
	
	//end
	style = mxUtils.clone(style);
	style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE;
	style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
	style[mxConstants.STYLE_SPACING_TOP] = 36;
	style[mxConstants.STYLE_FONTSIZE] = 12;
	style[mxConstants.STYLE_FONTSTYLE] = 1;
	delete style[mxConstants.STYLE_SPACING_RIGHT];
	style[mxConstants.STYLE_FILLCOLOR] = '#FFC9C9';
	graph.getStylesheet().putCellStyle(bpmnEndStyle, style);
	
	style = graph.getStylesheet().getDefaultEdgeStyle();
	style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
	style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK;
	style[mxConstants.STYLE_ROUNDED] = true;
	style[mxConstants.STYLE_FONTCOLOR] = '#868686';
	style[mxConstants.STYLE_STROKECOLOR] = '#9FA0A5';
	
	style = mxUtils.clone(style);
	style[mxConstants.STYLE_DASHED] = true;
	style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN;
	style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL;
	graph.getStylesheet().putCellStyle(bpmnCrossoverStyle, style);

	// Installs double click on middle control point and
	// changes style of edges between empty and this value
	graph.alternateEdgeStyle = 'elbow=vertical';
	
	return style;
};

function bpmnCreatePool(graph, parent, id, value, x, y, width, height) {
	var pool = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnSwimlaneStyle);
	pool.setConnectable(false);
	return pool;
};

function bpmnCreateLane(graph, parent, id, value, x, y, width, height) {
	var lane = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnSwimlaneStyle);
	lane.setConnectable(false);
	return lane;
};

function bpmnCreateStart(graph, parent, id, value, x, y, width, height) {
	var start = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnStartStyle);
	start.setConnectable(false);

	intervalID = setInterval(function() {
		model.beginUpdate();
		var cells = [start];
		if(cellIsHighlighted) {
			graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#50FF50', cells);
			cellIsHighlighted = false;
		} else {
			graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#D9FFC9', cells);
			cellIsHighlighted = true;
		}
		graph.view.invalidate(start);
		model.endUpdate();
	}, 1000);
	
	return start;
};

function bpmnCreateMessageStart(graph, parent, id, value, x, y, width, height) {
	var start = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnStartStyle);
	start.setConnectable(false);
	bpmnAddMessageStartOverlay(graph, start);
	return start;
};

function bpmnCreateEnd(graph, parent, id, value, x, y, width, height) {
	var end = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnEndStyle);
	end.setConnectable(false);
	return end;
};

function bpmnCreateErrorEnd(graph, parent, id, value, x, y, width, height) {
	var end = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnEndStyle);
	end.setConnectable(false);
	bpmnAddErrorEndOverlay(graph, end);
	return end;
};

function bpmnCreateTask(graph, parent, id, value, x, y, width, height) {
	var task = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnProcessStyle);
	task.setConnectable(false);
	return task;
};

function bpmnCreateCallActivity(graph, parent, id, value, x, y, width, height) {
	var callActivity = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnCallActivityStyle);
	callActivity.setConnectable(false);
	return callActivity;
};

function bpmnCreateUserTask(graph, parent, id, value, x, y, width, height) {
	var userTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height);
	bpmnAddUserTaskOverlay(graph, userTask);
	return userTask;
};

function bpmnCreateScriptTask(graph, parent, id, value, x, y, width, height) {
	var scriptTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height);
	bpmnAddScriptTaskOverlay(graph, scriptTask);
	return scriptTask;
};

function bpmnCreateServiceTask(graph, parent, id, value, x, y, width, height) {
	var serviceTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height);
	bpmnAddServiceTaskOverlay(graph, serviceTask);
	return serviceTask;
};

function bpmnCreateReceiveTask(graph, parent, id, value, x, y, width, height) {
	var receiveTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height);
	bpmnAddReceiveTaskOverlay(graph, receiveTask);
	return receiveTask;
};

function bpmnCreateSendTask(graph, parent, id, value, x, y, width, height) {
	var sendTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height);
	bpmnAddSendTaskOverlay(graph, sendTask);
	return sendTask;
};

function bpmnCreateCondition(graph, parent, id, value, x, y, width, height) {
	var condition = graph.insertVertex(parent, id, value, x, y, width, height,
			bpmnConditionStyle);
	condition.setConnectable(false);
	return condition;
};

function bpmnCreateParallelCondition(graph, parent, id, value, x, y, width, height) {
	var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width,
			height);
	bpmnAddParallelConditionOverlay(graph, condition);
	return condition;
};

function bpmnCreateInclusiveCondition(graph, parent, id, value, x, y, width, height) {
	var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width,
			height);
	bpmnAddInclusiveConditionOverlay(graph, condition);
	return condition;
};

function bpmnCreateExclusiveCondition(graph, parent, id, value, x, y, width, height) {
	var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width,
			height);
	bpmnAddExclusiveConditionOverlay(graph, condition);
	return condition;
};

function bpmnCreateComplexCondition(graph, parent, id, value, x, y, width, height) {
	var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width,
			height);
	bpmnAddMergeConditionOverlay(graph, condition);
	return condition;
};

function insertEdgeCrossOver(graph, parent, id, value, source, target) {
	return graph.insertEdge(parent, id, value, source, target,
			bpmnCrossoverStyle);
};

function insertEdgeFromMiddle(graph, parent, id, value, source, target) {
	var edge = graph.insertEdge(parent, id, value, source, target);
	edge.setStyle('verticalAlign=top');
	edge.geometry.points = [ new mxPoint(source.geometry.x
			+ source.geometry.width / 2, target.geometry.y
			+ target.geometry.height / 2) ];
	return edge;
};

function insertEdgeToMiddle(graph, parent, id, value, source, target) {
	var edge = graph.insertEdge(parent, id, value, source, target);
	edge.setStyle('verticalAlign=top');
	edge.geometry.points = [ new mxPoint(target.geometry.x
			+ target.geometry.width / 2, source.geometry.y
			+ source.geometry.height / 2) ];
	return edge;
};

function insertEdge(graph, parent, id, value, source, target, style) {
	if (style == null) {
		var x_left = target.geometry.x + target.geometry.width
				- source.geometry.x;
		var x_right = target.geometry.x - source.geometry.x
				- source.geometry.width;
		var y_top = target.geometry.y + target.geometry.height
				- source.geometry.y;
		var y_bottom = target.geometry.y - source.geometry.y
				- source.geometry.height;
		if (isToMiddleEdge(source, x_left, x_right, y_top, y_bottom)) {
			return insertEdgeToMiddle(graph, parent, id, value, source, target);
		} else if (isFromMiddleEdge(source, x_left, x_right, y_top, y_bottom)) {
			return insertEdgeFromMiddle(graph, parent, id, value, source,
					target);
		}
	}
	return graph.insertEdge(parent, id, value, source, target, style);
};

function bpmnAddMessageStartOverlay(graph, cell) {
	bpmnAddCenteredHalfSizeOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().envelopeBase64Image);
};

function bpmnAddParallelConditionOverlay(graph, cell) {
	bpmnAddCenteredHalfSizeOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().parallelConditionBase64Image);
};

function bpmnAddErrorEndOverlay(graph, cell) {
	bpmnAddCenteredHalfSizeOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().errorBase64Image);
};

function bpmnAddUserTaskOverlay(graph, cell) {
	bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().userTaskBase64Image);
};

function bpmnAddScriptTaskOverlay(graph, cell) {
	bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().scriptTaskBase64Image);
};

function bpmnAddServiceTaskOverlay(graph, cell) {
	bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().serviceTaskBase64Image);
};

function bpmnAddReceiveTaskOverlay(graph, cell) {
	bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().envelopeBase64Image);
};

function bpmnAddSendTaskOverlay(graph, cell) {
	bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().filledEnvelope16Base64Image);
};

function bpmnAddTinyLeftTopCornerOverlay(graph, cell, imagePath) {
	var overlay = new mxCellOverlay(new mxImage(imagePath, 16, 16), null);
	overlay.align = mxConstants.ALIGN_LEFT;
	overlay.verticalAlign = mxConstants.ALIGN_TOP;
	overlay.cursor = 'hand';
	overlay.offset = new mxPoint(10, 10);
	graph.addCellOverlay(cell, overlay);
};

function bpmnAddInclusiveConditionOverlay(graph, cell) {
	bpmnAddCenteredOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().inclusiveConditionBase64Image);
};

function bpmnAddExclusiveConditionOverlay(graph, cell) {
	bpmnAddCenteredOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().exclusiveConditionBase64Image);
};

function bpmnAddComplexConditionOverlay(graph, cell) {
	bpmnAddCenteredOverlay(graph, cell, 'data:image/jpg;base64,'
			+ bpmnConnector.getState().complexConditionBase64Image);
};

function bpmnAddCenteredOverlay(graph, cell, imagePath) {
	var imageWidth = cell.geometry.width;
	var imageHeight = cell.geometry.height;
	var overlay = new mxCellOverlay(new mxImage(imagePath, imageWidth,
			imageHeight), null);
	overlay.align = mxConstants.ALIGN_CENTER;
	overlay.verticalAlign = mxConstants.ALIGN_MIDDLE;
	overlay.cursor = 'hand';
	graph.addCellOverlay(cell, overlay);
};

function bpmnAddCenteredHalfSizeOverlay(graph, cell, imagePath) {
	var imageWidth = cell.geometry.width / 2;
	var imageHeight = cell.geometry.height / 2;
	var overlay = new mxCellOverlay(new mxImage(imagePath, imageWidth,
			imageHeight), null);
	overlay.align = mxConstants.ALIGN_CENTER;
	overlay.verticalAlign = mxConstants.ALIGN_MIDDLE;
	overlay.cursor = 'hand';
	graph.addCellOverlay(cell, overlay);
};

function bpmnAddFoldingSwimlanesBehaviour(graph) {
	// Adds automatic layout and various switches if the
	// graph is enabled
	if (graph.isEnabled()) {

		// Changes swimlane orientation while collapsed
		graph.model.getStyle = function(cell) {
			var style = mxGraphModel.prototype.getStyle.apply(this, arguments);

			if (graph.isCellCollapsed(cell)) {
				if (style != null) {
					style += ';';
				} else {
					style = '';
				}

				style += 'horizontal=1;align=left;spacingLeft=14;';
			}

			return style;
		};

		// Keeps widths on collapse/expand
		var foldingHandler = function(sender, evt) {
			var cells = evt.getProperty('cells');

			for (var i = 0; i < cells.length; i++) {
				var geo = graph.model.getGeometry(cells[i]);

				if (geo.alternateBounds != null) {
					geo.width = geo.alternateBounds.width;
				}
			}
		};

		graph.addListener(mxEvent.FOLD_CELLS, foldingHandler);
	}
};

function isFromMiddleEdge(source, x_left, x_right, y_top, y_bottom) {
	if (bpmnConditionStyle == source.getStyle()) {
		// target above source or target below source and target left from
		// source or target right from source
		if ((y_top < 0 || y_bottom > 0) && (x_left < 0 || x_right > 0)) {
			return true;
		} else {
			return false;
		}
	}
}

function isToMiddleEdge(source, x_left, x_right, y_top, y_bottom) {
	if (bpmnProcessStyle == source.getStyle() || bpmnCallActivityStyle == source.getStyle()) {
		// target above source or target below source and target left from
		// source or target right from source
		if ((y_top < 0 || y_bottom > 0) && (x_left < 0 || x_right > 0)) {
			return true;
		} else {
			return false;
		}
	}
}

function setSwimlanesLayout(graph, model) {
	// Applies size changes to siblings and parents
	new mxSwimlaneManager(graph);

	// Creates a stack depending on the orientation of the swimlane
	var layout = new mxStackLayout(graph, false);

	// Makes sure all children fit into the parent swimlane
	layout.resizeParent = true;

	// Applies the size to children if parent size changes
	layout.fill = true;

	// Only update the size of swimlanes
	layout.isVertexIgnored = function(vertex) {
		return !graph.isSwimlane(vertex);
	};

	if (graph.isEnabled()) {
		// Adds new method for identifying a pool
		graph.isPool = function(cell) {
			var model = this.getModel();
			var parent = model.getParent(cell);

			return parent != null && model.getParent(parent) == model.getRoot();
		};
	}

	// Keeps the lanes and pools stacked
	var layoutMgr = new mxLayoutManager(graph);

	layoutMgr.getLayout = function(cell) {
		if (!model.isEdge(cell)
				&& graph.getModel().getChildCount(cell) > 0
				&& (model.getParent(cell) == model.getRoot() || graph
						.isPool(cell))) {
			layout.fill = graph.isPool(cell);

			return layout;
		}

		return null;
	};
}

function setSelectedCell(selCellId) {
	if(selCellId != null) {
		var vertices = graph.getChildVertices(graph.getDefaultParent())
		for (var i = 0; i < vertices.length; i++) {
			var cellId = vertices[i].getId(); 
			if (selCellId == cellId) {
				var cells = [vertices[i]];
				// stop blinking start shape
				if(intervalID != 0) {
					clearInterval(intervalID);
					intervalID = 0;
				}
				// start blinking selected
				intervalID = setInterval(function() {
					model.beginUpdate();
					if(cellIsHighlighted) {
						graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#FF0000', cells);
						cellIsHighlighted = false;
					} else {
						graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#F2F3F4', cells);
						cellIsHighlighted = true;
					}
					graph.view.invalidate(vertices[i]);
					model.endUpdate();
				}, 1000);
				break;
			}
		}
		selectedCell = selCellId;
	}
}

function setCreationCode(code) {
	if(code != null && code != bpmnCreationCode ) {
		bpmnCreationCode = code;
		bpmnCreateBPMNModel();
	}
}

function bpmnCreateBPMNModel() {
	// Gets the default parent for inserting new cells. This
	// is normally the first child of the root (ie. layer 0).

	if(intervalID != 0) {
		clearInterval(intervalID);
		intervalID = 0;
	}
	//Required for the eval content
	var parent = graph.getDefaultParent();
	graph.removeCells(graph.getChildVertices(parent))
	// Adds cells to the model in a single step
	model.beginUpdate();
	try {
		eval(bpmnCreationCode);
	} finally {
		// Updates the display
		model.endUpdate();
	}
	graph.fit();
};