text: /**
   * Copyright (c) 2006-2017, JGraph Ltd
   * Copyright (c) 2006-2017, Gaudenz Alder
   */
  (function()
  {
  	/**
  	 * Version
  	 */
  	EditorUi.VERSION = '@DRAWIO-VERSION@';
  	
  	/**
  	 * Overrides compact UI setting.
  	 */
  	EditorUi.compactUi = uiTheme != 'atlas';
  
  	/**
  	 * Overrides default grid color for dark mode
  	 */
  	if (Editor.isDarkMode())
  	{
  		mxGraphView.prototype.gridColor = mxGraphView.prototype.defaultDarkGridColor;
  	}
  	
  	/**
  	 * Switch to disable logging for mode and search terms.
  	 */
  	EditorUi.enableLogging = urlParams['stealth'] != '1' && urlParams['lockdown'] != '1' &&
  		(/.*\.draw\.io$/.test(window.location.hostname) ||
  		/.*\.diagrams\.net$/.test(window.location.hostname)) &&
  		window.location.hostname != 'support.draw.io';
  	
  	/**
  	 * Protocol and hostname to use for embedded files. Default is https://www.draw.io
  	 */
  	EditorUi.drawHost = window.DRAWIO_BASE_URL;
  	
  	/**
  	 * Protocol and hostname to use for embedded files. Default is https://www.draw.io
  	 */
  	EditorUi.lightboxHost = window.DRAWIO_LIGHTBOX_URL;
  	
  	/**
  	 * Switch to disable logging for mode and search terms.
  	 */
  	EditorUi.lastErrorMessage = null;
  
  	/**
  	 * Switch to disable logging for mode and search terms.
  	 */
  	EditorUi.ignoredAnonymizedChars = '\n\t`~!@#$%^&*()_+{}|:"<>?-=[]\;\'.\/,\n\t';
  
  	/**
  	 * Specifies the URL for the templates index file.
  	 */
  	EditorUi.templateFile = TEMPLATE_PATH + '/index.xml';
  
  	/**
  	 * Specifies the URL for the diffsync cache.
  	 */
  	EditorUi.cacheUrl = (urlParams['dev'] == '1') ? '/cache' : window.REALTIME_URL;
  
  	if (EditorUi.cacheUrl == null && typeof DrawioFile !== 'undefined')
  	{
  		DrawioFile.SYNC = 'none'; //Disable real-time sync
  	}
  	
  	/**
  	 * Cache timeout is 10 seconds.
  	 */
  	Editor.cacheTimeout = 10000;
  
  	/**
  	 * Switch to enable PlantUML in the insert from text dialog.
  	 * NOTE: This must also be enabled on the server-side.
  	 */
  	EditorUi.enablePlantUml = EditorUi.enableLogging;
  
  	/**
  	 * https://github.com/electron/electron/issues/2288
  	 */
  	EditorUi.isElectronApp = window != null && window.process != null &&
  		window.process.versions != null && window.process.versions['electron'] != null;
  	
  	/**
  	 * Shortcut for capability check.
  	 */
  	EditorUi.nativeFileSupport = !mxClient.IS_OP && !EditorUi.isElectronApp &&
  		'showSaveFilePicker' in window && 'showOpenFilePicker' in window;
  
  	/**
  	 * Specifies if drafts should be saved in IndexedDB.
  	 */
  	EditorUi.enableDrafts = !mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp &&
  		isLocalStorage && urlParams['drafts'] != '0';
  	
  	/**
  	 * Link for scratchpad help.
  	 */
  	EditorUi.scratchpadHelpLink = 'https://www.diagrams.net/doc/faq/scratchpad';
  
  	/**
  	 * Default Mermaid config without using foreign objects in flowcharts.
  	 */
  	EditorUi.defaultMermaidConfig = {
  		theme:'neutral',
  		arrowMarkerAbsolute:false,
  	    flowchart:
  	    {
  	    	htmlLabels:false
  	    },
  	    sequence:
  	    {
  	    	diagramMarginX:50,
  	    	diagramMarginY:10,
  	    	actorMargin:50,
  	    	width:150,
  	    	height:65,
  	    	boxMargin:10,
  	    	boxTextMargin:5,
  	    	noteMargin:10,
  	    	messageMargin:35,
  	    	mirrorActors:true,
  	    	bottomMarginAdj:1,
  	    	useMaxWidth:true,
  	    	rightAngles:false,
  	    	showSequenceNumbers:false
  	    },
  	    gantt:{
  	    	titleTopMargin:25,
  	    	barHeight:20,
  	    	barGap:4,
  	    	topPadding:50,
  	    	leftPadding:75,
  	    	gridLineStartPadding:35,
  	    	fontSize:11,
  	    	fontFamily:'"Open-Sans", "sans-serif"',
  	    	numberSectionStyles:4,
  	    	axisFormat:'%Y-%m-%d'
  	    }
  	};
  
  	/**
  	 * Updates action states depending on the selection.
  	 */
  	EditorUi.logError = function(message, url, linenumber, colno, err, severity, quiet)
  	{
  		severity = ((severity != null) ? severity : (message.indexOf('NetworkError') >= 0 ||
  			message.indexOf('SecurityError') >= 0 || message.indexOf('NS_ERROR_FAILURE') >= 0 ||
  			message.indexOf('out of memory') >= 0) ? 'CONFIG' : 'SEVERE');
  		
  		if (EditorUi.enableLogging && urlParams['dev'] != '1')
  		{
  			try
  			{
  				if (message == EditorUi.lastErrorMessage || (message != null && url != null &&
  					((message.indexOf('Script error') != -1) || (message.indexOf('extension') != -1))))
  				{
  					// TODO log external domain script failure "Script error." is
  					// reported when the error occurs in a script that is hosted
  					// on a domain other than the domain of the current page
  				}
  				// DocumentClosedError seems to be an FF bug an can be ignored for now
  				else if (message != null && message.indexOf('DocumentClosedError') < 0)
  				{
  					EditorUi.lastErrorMessage = message;
  					var logDomain = window.DRAWIO_LOG_URL != null ? window.DRAWIO_LOG_URL : '';
  					err = (err != null) ? err : new Error(message);
  
  					var img = new Image();
  					img.src = logDomain + '/log?severity=' + severity + '&v=' + encodeURIComponent(EditorUi.VERSION) +
  		    			'&msg=clientError:' + encodeURIComponent(message) + ':url:' + encodeURIComponent(window.location.href) +
  		    			':lnum:' + encodeURIComponent(linenumber) + ((colno != null) ? ':colno:' + encodeURIComponent(colno) : '') +
  		    			((err != null && err.stack != null) ? '&stack=' + encodeURIComponent(err.stack) : '');
  				}
  			}
  			catch (e)
  			{
  				// do nothing
  			}
  		}
  
  		try
  		{
  			if (!quiet && window.console != null)
  			{
  				console.error(severity, message, url, linenumber, colno, err);
  			}
  		}
  		catch (e)
  		{
  			// ignore
  		}
  	};
  	
  	/**
  	 * Updates action states depending on the selection.
  	 */
  	EditorUi.logEvent = function(data)
  	{
  		if (urlParams['dev'] == '1')
  		{
  			EditorUi.debug('logEvent', data);
  		}
  		else if (EditorUi.enableLogging)
  		{
  			try
  			{
  				var logDomain = window.DRAWIO_LOG_URL != null ? window.DRAWIO_LOG_URL : '';
  				var img = new Image();
  				img.src = logDomain + '/images/1x1.png?' +
  						'v=' + encodeURIComponent(EditorUi.VERSION) +
  						((data != null) ? '&data=' + encodeURIComponent(JSON.stringify(data)) : '');
  	    	}
  			catch (e)
  			{
  	    			// ignore
  			}
  		}
  	};
  
  	/**
  	 * Sending error reports.
  	 */
  	EditorUi.sendReport = function(data, maxLength)
  	{
  		if (urlParams['dev'] == '1')
  		{
  			EditorUi.debug('sendReport', data);
  		}
  		else if (EditorUi.enableLogging)
  		{
  			try
  			{
  				maxLength = (maxLength != null) ? maxLength : 50000;
  
  				if (data.length > maxLength)
  				{
  					data = data.substring(0, maxLength) + '\n...[SHORTENED]'
  				}
  				
  				mxUtils.post('/email', 'version=' + encodeURIComponent(EditorUi.VERSION) +
  					'&url=' + encodeURIComponent(window.location.href) +
  					'&data=' + encodeURIComponent(data));
  			}
  			catch (e)
  			{
  				// ignore
  			}
  		}
  	};
  
  	/**
  	 * Adds the listener for automatically saving the diagram for local changes.
  	 */
  	EditorUi.debug = function()
  	{
  		try
  		{
  			if (window.console != null && urlParams['test'] == '1')
  			{
  				var args = [new Date().toISOString()];
  				
  				for (var i = 0; i < arguments.length; i++)
  			    {
  					if (arguments[i] != null)
  					{
  						args.push(arguments[i]);
  					}
  			    }
  			    
  				console.log.apply(console, args);
  			}
  		}
  		catch (e)
  		{
  			// ignore
  		}
  	};
  
  	/**
  	 * Static method for pasing PNG files.
  	 */
  	EditorUi.parsePng = function(f, fn, error)
  	{
  		var pos = 0;
  		
  		function fread(d, count)
  		{
  			var start = pos;
  			pos += count;
  			
  			return d.substring(start, pos);
  		};
  		
  		// Reads unsigned long 32 bit big endian
  		function _freadint(d)
  		{
  			var bytes = fread(d, 4);
  			
  			return bytes.charCodeAt(3) + (bytes.charCodeAt(2) << 8) +
  				(bytes.charCodeAt(1) << 16) + (bytes.charCodeAt(0) << 24);
  		};
  		
  		// Checks signature
  		if (fread(f,8) != String.fromCharCode(137) + 'PNG' + String.fromCharCode(13, 10, 26, 10))
  		{
  			if (error != null)
  			{
  				error();
  			}
  			
  			return;
  		}
  		
  		// Reads header chunk
  		fread(f,4);
  		
  		if (fread(f,4) != 'IHDR')
  		{
  			if (error != null)
  			{
  				error();
  			}
  			
  			return;
  		}
  		
  		fread(f, 17);
  		
  		do
  		{
  			var n = _freadint(f);
  			var type = fread(f,4);
  			
  			if (fn != null)
  			{
  				if (fn(pos - 8, type, n))
  				{
  					break;
  				}
  			}
  			
  			value = fread(f,n);
  			fread(f,4);
  			
  			if (type == 'IEND')
  			{
  				break;
  			}
  		}
  		while (n);
  	};
  	
  	/**
  	 * Removes any values, styles and geometries from the given XML node.
  	 */
  	EditorUi.removeChildNodes = function(node)
  	{
  		while (node.firstChild != null)
  		{
  			node.removeChild(node.firstChild);
  		}
  	};
  	
  	/**
  	 * Contains the default XML for an empty diagram.
  	 */
  	EditorUi.prototype.emptyDiagramXml = '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel>';
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.emptyLibraryXml = '<mxlibrary>[]</mxlibrary>';
  
  	/**
  	 * Sets the delay for autosave in milliseconds. Default is 2000.
  	 */
  	EditorUi.prototype.mode = null;
  
  	/**
  	 * General timeout is 25 seconds.
  	 * LATER: Move to Editor
  	 */
  	EditorUi.prototype.timeout = Editor.prototype.timeout;
  
  	/**
  	 * Allows for two buttons in the sidebar footer.
  	 */
  	EditorUi.prototype.sidebarFooterHeight = 38;
  
  	/**
  	 * Specifies the default custom shape style.
  	 */
  	EditorUi.prototype.defaultCustomShapeStyle = 'shape=stencil(tZRtTsQgEEBPw1+DJR7AoN6DbWftpAgE0Ortd/jYRGq72R+YNE2YgTePloEJGWblgA18ZuKFDcMj5/Sm8boZq+BgjCX4pTyqk6ZlKROitwusOMXKQDODx5iy4pXxZ5qTHiFHawxB0JrQZH7lCabQ0Fr+XWC1/E8zcsT/gAi+Subo2/3Mh6d/oJb5nU1b5tW7r2knautaa3T+U32o7f7vZwpJkaNDLORJjcu7t59m2jXxqX9un+tt022acsfmoKaQZ+vhhswZtS6Ne/ThQGt0IV0N3Yyv6P3CeT9/tHO0XFI5cAE=);whiteSpace=wrap;html=1;';
  
  	/**
  	 * Defines the maximum size for images.
  	 */
  	EditorUi.prototype.maxBackgroundSize = 1600;
  
  	/**
  	 * Defines the maximum size for images.
  	 */
  	EditorUi.prototype.maxImageSize = 520;
  	
  	/**
  	 * Defines the maximum width for pasted text.
  	 * Use 0 to disable check.
  	 */
  	EditorUi.prototype.maxTextWidth = 520;
  
  	/**
  	 * Images above 100K should be resampled.
  	 */
  	EditorUi.prototype.resampleThreshold = 100000;
  
  	/**
  	 * Maximum allowed size for images is 1 MB.
  	 */
  	EditorUi.prototype.maxImageBytes = 1000000;
  
  	/**
  	 * Maximum size for background images is 2.5 MB.
  	 */
  	EditorUi.prototype.maxBackgroundBytes = 2500000;
  
  	/**
  	 * Maximum size for text files in labels is 0.5 MB.
  	 */
  	EditorUi.prototype.maxTextBytes = 500000;
  
  	/**
  	 * Holds the current file.
  	 */
  	EditorUi.prototype.currentFile = null;
  
  	/**
  	 * Specifies if PDF export should be done via print dialog. Default is
  	 * false which uses the PhantomJS backend to create the PDF.
  	 */
  	EditorUi.prototype.printPdfExport = false;
  	
  	/**
  	 * Specifies if PDF export with pages is enabled.
  	 */
  	EditorUi.prototype.pdfPageExport = true;
  
  	/**
  	 * Restores app defaults for UI
  	 */
  	EditorUi.prototype.formatEnabled = urlParams['format'] != '0';
  
  	/**
  	 * Whether template action should be shown in insert menu.
  	 */
  	EditorUi.prototype.insertTemplateEnabled = true;
  	
  	/**
  	 * Restores app defaults for UI
  	 */
  	EditorUi.prototype.closableScratchpad = true;
  
  	/**
  	 * Capability check for canvas export
  	 */
  	(function()
  	{
  		EditorUi.prototype.useCanvasForExport = false;
  		EditorUi.prototype.jpgSupported = false;
  		
  		// Checks if canvas is supported
  		try
  		{
  			var cnv = document.createElement('canvas');
  			EditorUi.prototype.canvasSupported = !!(cnv.getContext && cnv.getContext('2d'));
  		}
  		catch (e)
  		{
  			// ignore
  		}
  		
  		try
  		{
  			var canvas = document.createElement('canvas');
  			var img = new Image();
  			
  			// LATER: Capability check should not be async
  			img.onload = function()
  			{
  				try
  				{
  			   		var ctx = canvas.getContext('2d');
  			   		ctx.drawImage(img, 0, 0);
  
  			   		// Works in Chrome, Firefox, Edge, Safari and Opera
  					var result = canvas.toDataURL('image/png');
  					EditorUi.prototype.useCanvasForExport = result != null && result.length > 6;
  				}
  				catch (e)
  				{
  					// ignore
  				}
  			};
  
  			// Checks if SVG with foreignObject can be exported
  			var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1px" height="1px" version="1.1"><foreignObject pointer-events="all" width="1" height="1"><div xmlns="http://www.w3.org/1999/xhtml"></div></foreignObject></svg>';
  			img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
  		}
  		catch (e)
  		{
  			// ignore
  		}
  		
  		// Checks for client-side JPG support
  		try
  		{
  		    var canvas = document.createElement('canvas');
  		    canvas.width = canvas.height = 1;
  		    var uri = canvas.toDataURL('image/jpeg');
  		    
  		    EditorUi.prototype.jpgSupported = (uri.match('image/jpeg') !== null);
  		}
  		catch (e)
  		{
  			// ignore
  		}
  	})();
  
  	/**
  	 * Hook for subclassers.
  	 */
  	EditorUi.prototype.openLink = function(url, target, allowOpener)
  	{
  		// LATER: Replace this with direct calls to graph
  		return this.editor.graph.openLink(url, target, allowOpener);
  	};
  
  	/**
  	 * Hook for subclassers.
  	 */
  	EditorUi.prototype.showSplash = function(force) { };
  
  	/**
  	 * Abstraction for local storage access.
  	 */
  	EditorUi.prototype.getLocalData = function(key, fn)
  	{
  		fn(localStorage.getItem(key));
  	};
  	
  	/**
  	 * Abstraction for local storage access.
  	 */
  	EditorUi.prototype.setLocalData = function(key, data, fn)
  	{
  		localStorage.setItem(key, data);
  		
  		if (fn != null)
  		{
  			fn();
  		}
  	};
  	
  	/**
  	 * Abstraction for local storage access.
  	 */
  	EditorUi.prototype.removeLocalData = function(key, fn)
  	{
  		localStorage.removeItem(key)
  		fn();
  	};
  
  	EditorUi.prototype.setMathEnabled = function(value)
  	{
  		this.editor.graph.mathEnabled = value;
  		this.editor.updateGraphComponents();
  		this.editor.graph.refresh();
  		
  		this.fireEvent(new mxEventObject('mathEnabledChanged'));
  	};
  
  	EditorUi.prototype.isMathEnabled = function(value)
  	{
  		return this.editor.graph.mathEnabled;
  	};
  
  	/**
  	 * Returns true if offline app, which isn't a defined thing
  	 */
  	EditorUi.prototype.isOfflineApp = function()
  	{
  		return urlParams['offline'] == '1';
  	};
  
  	/**
  	 * Returns true if no external comms allowed or possible
  	 */
  	EditorUi.prototype.isOffline = function(ignoreStealth)
  	{
  		return this.isOfflineApp() || !navigator.onLine || (!ignoreStealth && (urlParams['stealth'] == '1' || urlParams['lockdown'] == '1'));
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.createSpinner = function(x, y, size)
  	{
  		var autoPosition = (x == null || y == null);
  		size = (size != null) ? size : 24;
  
  		var spinner = new Spinner({
  			lines: 12, // The number of lines to draw
  			length: size, // The length of each line
  			width: Math.round(size / 3), // The line thickness
  			radius: Math.round(size / 2), // The radius of the inner circle
  			rotate: 0, // The rotation offset
  			color: (Editor.isDarkMode()) ? '#c0c0c0' : '#000', // #rgb or #rrggbb
  			speed: 1.5, // Rounds per second
  			trail: 60, // Afterglow percentage
  			shadow: false, // Whether to render a shadow
  			hwaccel: false, // Whether to use hardware acceleration
  			zIndex: 2e9 // The z-index (defaults to 2000000000)
  		});
  
  		// Extends spin method to include an optional label
  		var oldSpin = spinner.spin;
  		
  		spinner.spin = function(container, label)
  		{
  			var result = false;
  			
  			if (!this.active)
  			{
  				oldSpin.call(this, container);
  				this.active = true;
  				
  				if (label != null)
  				{
  					if (autoPosition)
  					{
  						y = Math.max(document.body.clientHeight || 0, document.documentElement.clientHeight || 0) / 2;
  						x = document.body.clientWidth / 2 - 2;
  					}
  
  					var status = document.createElement('div');
  					status.style.position = 'absolute';
  					status.style.whiteSpace = 'nowrap';
  					status.style.background = '#4B4243';
  					status.style.color = 'white';
  					status.style.fontFamily = 'Helvetica, Arial';
  					status.style.fontSize = '9pt';
  					status.style.padding = '6px';
  					status.style.paddingLeft = '10px';
  					status.style.paddingRight = '10px';
  					status.style.zIndex = 2e9;
  					status.style.left = Math.max(0, x) + 'px';
  					status.style.top = Math.max(0, y + 70) + 'px';
  					
  					mxUtils.setPrefixedStyle(status.style, 'borderRadius', '6px');
  					mxUtils.setPrefixedStyle(status.style, 'transform', 'translate(-50%,-50%)');
  
  					if (!Editor.isDarkMode())
  					{
  						mxUtils.setPrefixedStyle(status.style, 'boxShadow', '2px 2px 3px 0px #ddd');
  					}
  					
  					if (label.substring(label.length - 3, label.length) != '...' &&
  						label.charAt(label.length - 1) != '!')
  					{
  						label = label + '...';
  					}
  					
  					status.innerHTML = label;
  					container.appendChild(status);
  					spinner.status = status;
  				}
  				
  				// Pause returns a function to resume the spinner
  				this.pause = mxUtils.bind(this, function()
  				{
  					var fn = function() { };
  					
  					if (this.active)
  					{
  						fn = mxUtils.bind(this, function()
  						{
  							this.spin(container, label);
  						});
  					}
  					
  					this.stop();
  					
  					return fn;
  				});
  				
  				result = true;
  			}
  				
  			return result;
  		};
  		
  		// Extends stop method to remove the optional label
  		var oldStop = spinner.stop;
  		
  		spinner.stop = function()
  		{
  			oldStop.call(this);
  			this.active = false;
  			
  			if (spinner.status != null && spinner.status.parentNode != null)
  			{
  				spinner.status.parentNode.removeChild(spinner.status);
  			}
  
  			spinner.status = null;
  		};
  		
  		spinner.pause = function()
  		{
  			return function() {};
  		};
  		
  		return spinner;
  	};
  
  	/**
  	 * Returns true if the given string contains a compatible graph model.
  	 */
  	EditorUi.prototype.isCompatibleString = function(data)
  	{
  		try
  		{
  			var doc = mxUtils.parseXml(data);
  			var node = this.editor.extractGraphModel(doc.documentElement, true);
  			
  			return node != null && node.getElementsByTagName('parsererror').length == 0;
  		}
  		catch (e)
  		{
  			// ignore
  		}
  		
  		return false;
  	};
  
  	/**
  	 * Returns true if the given binary data is a Visio file.
  	 */
  	EditorUi.prototype.isVisioData = function(data)
  	{
  		return data.length > 8 && ((data.charCodeAt(0) == 0xD0 && data.charCodeAt(1) == 0xCF &&
  			data.charCodeAt(2) == 0x11 && data.charCodeAt(3) == 0xE0 && data.charCodeAt(4) == 0xA1 && data.charCodeAt(5) == 0xB1 &&
  			data.charCodeAt(6) == 0x1A && data.charCodeAt(7) == 0xE1) || (data.charCodeAt(0) == 0x50 && data.charCodeAt(1) == 0x4B &&
  			data.charCodeAt(2) == 0x03 && data.charCodeAt(3) == 0x04) || (data.charCodeAt(0) == 0x50 && data.charCodeAt(1) == 0x4B &&
  			data.charCodeAt(2) == 0x03 && data.charCodeAt(3) == 0x06));
  	};
  
  	/**
  	 * Returns true if the given binary data is a Visio file that requires remote conversion.
  	 * This code returns true for vss, vsd and vdx files.
  	 */
  	EditorUi.prototype.isRemoteVisioData = function(data)
  	{
  		return data.length > 8 && ((data.charCodeAt(0) == 0xD0 && data.charCodeAt(1) == 0xCF &&
  			data.charCodeAt(2) == 0x11 && data.charCodeAt(3) == 0xE0 && data.charCodeAt(4) == 0xA1 && data.charCodeAt(5) == 0xB1 &&
  			data.charCodeAt(6) == 0x1A && data.charCodeAt(7) == 0xE1) || (data.charCodeAt(0) == 0x3C && data.charCodeAt(1) == 0x3F &&
  			data.charCodeAt(2) == 0x78 && data.charCodeAt(3) == 0x6D && data.charCodeAt(3) == 0x6C));
  	};
  	
  	/**
  	 * Returns true if the given binary data is a PNG file.
  	 */
  	EditorUi.prototype.isPngData = function(data)
  	{
  		return data.length > 8 && data.charCodeAt(0) == 137 && data.charCodeAt(1) == 80 &&
  			data.charCodeAt(2) == 78 && data.charCodeAt(3) == 71 && data.charCodeAt(4) == 13 &&
  			data.charCodeAt(5) == 10 && data.charCodeAt(6) == 26 && data.charCodeAt(7) == 10;
  	};
  
  	/**
  	 * Adds keyboard shortcuts for page handling.
  	 */
      var editorUiCreateKeyHandler = EditorUi.prototype.createKeyHandler;
      EditorUi.prototype.createKeyHandler = function(editor)
      {
      	var keyHandler = editorUiCreateKeyHandler.apply(this, arguments);
      	
      	if (!this.editor.chromeless || this.editor.editable)
  		{
  	    	var keyHandlerGetFunction = keyHandler.getFunction;
  	    	var graph = this.editor.graph;
  	    	var ui = this;
  	    	
  	    	keyHandler.getFunction = function(evt)
  	    	{
  	    		if (graph.isSelectionEmpty() && ui.pages != null && ui.pages.length > 0)
  	    		{
  	    			var idx = ui.getSelectedPageIndex();
  
  	    			if (mxEvent.isShiftDown(evt))
  	    			{
  		    			if (evt.keyCode == 37)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx > 0)
  			    				{
  		    						ui.movePage(idx, idx - 1);
  		    					}
  		    				};
  		    			}
  		    			else if (evt.keyCode == 38)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx > 0)
  			    				{
  		    						ui.movePage(idx, 0);
  		    					}
  		    				};
  		    			}
  		    			else if (evt.keyCode == 39)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx < ui.pages.length - 1)
  			    				{
  		    						ui.movePage(idx, idx + 1);
  		    					}
  		    				};
  		    			}
  		    			else if (evt.keyCode == 40)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx < ui.pages.length - 1)
  			    				{
  		    						ui.movePage(idx, ui.pages.length - 1);
  		    					}
  		    				};
  		    			}
  	    			}
  	    			else if (mxEvent.isControlDown(evt) || (mxClient.IS_MAC && mxEvent.isMetaDown(evt)))
  					{
  	    				if (evt.keyCode == 37)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx > 0)
  			    				{
  		    						ui.selectNextPage(false);
  		    					}
  		    				};
  		    			}
  		    			else if (evt.keyCode == 38)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx > 0)
  			    				{
  			    					ui.selectPage(ui.pages[0]);
  		    					}
  		    				};
  		    			}
  		    			else if (evt.keyCode == 39)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx < ui.pages.length - 1)
  			    				{
  			    					ui.selectNextPage(true);
  		    					}
  		    				};
  		    			}
  		    			else if (evt.keyCode == 40)
  		    			{
  	    					return function()
  	    					{
  			    				if (idx < ui.pages.length - 1)
  			    				{
  			    					ui.selectPage(ui.pages[ui.pages.length - 1]);
  		    					}
  		    				};
  		    			}
  				
  					}
  	    		}
  	    		
  	    		return keyHandlerGetFunction.apply(this, arguments);
  	    	};
  		}
      	
      	return keyHandler;
      };
  
  	/**
  	 * Extracts the mxfile from the given HTML data from a data transfer event.
  	 */
  	var editorUiExtractGraphModelFromHtml = EditorUi.prototype.extractGraphModelFromHtml;
  	EditorUi.prototype.extractGraphModelFromHtml = function(data)
  	{
  		var result = editorUiExtractGraphModelFromHtml.apply(this, arguments);
  		
  		if (result == null)
  		{
  			try
  			{
  		    	var idx = data.indexOf('&lt;mxfile ');
  		    	
  		    	if (idx >= 0)
  		    	{
  		    		var idx2 = data.lastIndexOf('&lt;/mxfile&gt;');
  		    		
  		    		if (idx2 > idx)
  		    		{
  		    			result = data.substring(idx, idx2 + 15).replace(/&gt;/g, '>').
  		    				replace(/&lt;/g, '<').replace(/\\&quot;/g, '"').replace(/\n/g, '');
  		    		}
  		    	}
  		    	else
  		    	{
  		    		// Gets compressed data from mxgraph element in HTML document
  					var doc = mxUtils.parseXml(data);
  					var node = this.editor.extractGraphModel(doc.documentElement, this.pages != null ||
  						this.diagramContainer.style.visibility == 'hidden');
  					result = (node != null) ? mxUtils.getXml(node) : '';
  		    	}
  			}
  			catch (e)
  			{
  				// ignore
  			}
  		}
  		
  		return result;
  	};
  		
  	/**
  	 * Workaround for malformed xhtml meta element bug 07.08.16. The trailing slash was missing causing
  	 * reopen to fail trying to parse. Used in replaceFileData, setFileData and importFile.
  	 */
  	EditorUi.prototype.validateFileData = function(data)
  	{
  		if (data != null && data.length > 0)
  		{
  			var index = data.indexOf('<meta charset="utf-8">');
  			
  			if (index >= 0)
  			{
  				var replaceString = '<meta charset="utf-8"/>';
  				var replaceStrLen = replaceString.length;
  				data = data.slice(0, index) + replaceString + data.slice(index + replaceStrLen - 1, data.length);
  			}
  			
  			data = Graph.zapGremlins(data);
  		}
  		
  		return data;
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.replaceFileData = function(data)
  	{
  		data = this.validateFileData(data);
  		var node = (data != null && data.length > 0) ? mxUtils.parseXml(data).documentElement : null;
  
  		// Some nodes must be extracted here to find the mxfile node
  		// LATER: Remove duplicate call to extractGraphModel in overridden setGraphXml
  		var tmp = (node != null) ? this.editor.extractGraphModel(node, true) : null;
  		
  		if (tmp != null)
  		{
  			node = tmp;
  		}
  
  		if (node != null)
  		{
  			var graph = this.editor.graph;
  			
  			graph.model.beginUpdate();
  			try
  			{
  				var oldPages = (this.pages != null) ? this.pages.slice() : null;
  				var nodes = node.getElementsByTagName('diagram');
  
  				if (urlParams['pages'] != '0' || nodes.length > 1 ||
  					(nodes.length == 1 && nodes[0].hasAttribute('name')))
  				{
  					this.fileNode = node;
  					this.pages = (this.pages != null) ? this.pages : [];
  					
  					// Wraps page nodes
  					for (var i = nodes.length - 1; i >= 0; i--)
  					{
  						var page = this.updatePageRoot(new DiagramPage(nodes[i]));
  						
  						// Checks for invalid page names
  						if (page.getName() == null)
  						{
  							page.setName(mxResources.get('pageWithNumber', [i + 1]));
  						}
  
  						graph.model.execute(new ChangePage(this, page, (i == 0) ? page : null, 0));
  					}
  				}
  				else
  				{
  					// Creates tabbed file structure if enforced by URL
  					if (urlParams['pages'] != '0' && this.fileNode == null)
  					{
  						this.fileNode = node.ownerDocument.createElement('mxfile');
  						this.currentPage = new DiagramPage(node.ownerDocument.createElement('diagram'));
  						this.currentPage.setName(mxResources.get('pageWithNumber', [1]));
  						graph.model.execute(new ChangePage(this, this.currentPage, this.currentPage, 0));
  					}
  					
  					// Avoids scroll offset when switching page
  					this.editor.setGraphXml(node);
  					
  					// Avoids duplicate parsing of the XML stored in the node
  					if (this.currentPage != null)
  					{
  						this.currentPage.root = this.editor.graph.model.root;
  					}
  				}
  				
  				if (oldPages != null)
  				{
  					for (var i = 0; i < oldPages.length; i++)
  					{
  						graph.model.execute(new ChangePage(this, oldPages[i], null));
  					}
  				}
  			}
  			finally
  			{
  				graph.model.endUpdate();
  			}
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.createFileData = function(node, graph, file, url, forceXml, forceSvg, forceHtml,
  		embeddedCallback, ignoreSelection, compact, uncompressed)
  	{
  		graph = (graph != null) ? graph : this.editor.graph;
  		forceXml = (forceXml != null) ? forceXml : false;
  		ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
  		
  		var editLink = null;
  		var redirect = null;
  		
  		if (file == null || file.getMode() == App.MODE_DEVICE || file.getMode() == App.MODE_BROWSER)
  		{
  			editLink = '_blank';
  		}
  		else
  		{
  			editLink = url;
  			redirect = editLink;
  		}
  
  		if (node == null)
  		{
  			return '';
  		}
  		else
  		{
  			var fileNode = node;
  	
  			// Ignores case for possible HTML or XML nodes
  			if (fileNode.nodeName.toLowerCase() != 'mxfile')
  			{
  				if (uncompressed)
  				{
  					var diagramNode = node.ownerDocument.createElement('diagram');
  					diagramNode.setAttribute('id', Editor.guid());
  					diagramNode.appendChild(node);
  					
  					fileNode = node.ownerDocument.createElement('mxfile');
  					fileNode.appendChild(diagramNode);
  				}
  				else
  				{
  					// Removes control chars in input for correct roundtrip check
  					var text = Graph.zapGremlins(mxUtils.getXml(node));
  					var data = Graph.compress(text);
  					
  					// Fallback to plain XML for invalid compression
  					// TODO: Remove this fallback with active pages
  					if (Graph.decompress(data) != text)
  					{
  						return text;
  					}
  					else
  					{
  						var diagramNode = node.ownerDocument.createElement('diagram');
  						diagramNode.setAttribute('id', Editor.guid());
  						mxUtils.setTextContent(diagramNode, data);
  						
  						fileNode = node.ownerDocument.createElement('mxfile');
  						fileNode.appendChild(diagramNode);
  					}
  				}
  			}
  			
  			if (!compact)
  			{
  				// Removes old metadata
  				fileNode.removeAttribute('userAgent');
  				fileNode.removeAttribute('version');
  				fileNode.removeAttribute('editor');
  				fileNode.removeAttribute('pages');
  				fileNode.removeAttribute('type');
  				
  				if (mxClient.IS_CHROMEAPP)
  				{
  					fileNode.setAttribute('host', 'Chrome');
  				}
  				else if (EditorUi.isElectronApp)
  				{
  					fileNode.setAttribute('host', 'Electron');
  				}
  				else
  				{
  					fileNode.setAttribute('host', window.location.hostname);
  				}
  				
  				// Adds new metadata
  				fileNode.setAttribute('modified', new Date().toISOString());
  				fileNode.setAttribute('agent', navigator.appVersion);
  				fileNode.setAttribute('version', EditorUi.VERSION);
  				fileNode.setAttribute('etag', Editor.guid());
  				
  				var md = (file != null) ? file.getMode() : this.mode;
  				
  				if (md != null)
  				{
  					fileNode.setAttribute('type', md);
  				}
  				
  				if (fileNode.getElementsByTagName('diagram').length > 1 && this.pages != null)
  				{
  					fileNode.setAttribute('pages', this.pages.length);
  				}
  			}
  			else
  			{
  				fileNode = fileNode.cloneNode(true);
  				fileNode.removeAttribute('modified');
  				fileNode.removeAttribute('host');
  				fileNode.removeAttribute('agent');
  				fileNode.removeAttribute('etag');
  				fileNode.removeAttribute('userAgent');
  				fileNode.removeAttribute('version');
  				fileNode.removeAttribute('editor');
  				fileNode.removeAttribute('type');
  			}
  
  			var xml = (uncompressed) ? mxUtils.getPrettyXml(fileNode) : mxUtils.getXml(fileNode);
  			
  			// Writes the file as an embedded HTML file
  			if (!forceSvg && !forceXml && (forceHtml || (file != null && /(\.html)$/i.test(file.getTitle()))))
  			{
  				xml = this.getHtml2(mxUtils.getXml(fileNode), graph, (file != null) ? file.getTitle() : null, editLink, redirect);
  			}
  			// Maps the XML data to the content attribute in the SVG node 
  			else if (forceSvg || (!forceXml && file != null && /(\.svg)$/i.test(file.getTitle())))
  			{
  				if (file != null && (file.getMode() == App.MODE_DEVICE || file.getMode() == App.MODE_BROWSER))
  				{
  					url = null;
  				}
  				
  				xml = this.getEmbeddedSvg(xml, graph, url, null, embeddedCallback, ignoreSelection, redirect);
  			}
  			
  			return xml;
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.getXmlFileData = function(ignoreSelection, currentPage, uncompressed)
  	{
  		ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
  		currentPage = (currentPage != null) ? currentPage : false;
  		uncompressed = (uncompressed != null) ? uncompressed : !Editor.compressXml;
  		
  		// Generats graph model XML node for single page export
  		var node = this.editor.getGraphXml(ignoreSelection);
  		
  		if (ignoreSelection && this.fileNode != null && this.currentPage != null)
  		{
  			// Updates current page XML if selection is ignored
  			EditorUi.removeChildNodes(this.currentPage.node);
  			mxUtils.setTextContent(this.currentPage.node, Graph.compressNode(node));
  
  			// Creates a clone of the file node for processing
  			node = this.fileNode.cloneNode(false);
  
  			// Appends the node of the page and applies compression
  			function appendPage(pageNode)
  			{
  				var models = pageNode.getElementsByTagName('mxGraphModel');
  				var modelNode = (models.length > 0) ? models[0] : null;
  				var clone = pageNode;
  				
  				if (modelNode == null && uncompressed)
  				{
  					var text = mxUtils.trim(mxUtils.getTextContent(pageNode));
  					clone = pageNode.cloneNode(false);
  					
  					if (text.length > 0)
  					{
  						var tmp = Graph.decompress(text);
  						
  						if (tmp != null && tmp.length > 0)
  						{
  							clone.appendChild(mxUtils.parseXml(tmp).documentElement);
  						}
  					}
  				}
  				else if (modelNode != null && !uncompressed)
  				{
  					clone = pageNode.cloneNode(false);
  					mxUtils.setTextContent(clone, Graph.compressNode(modelNode));
  				}
  				else
  				{
  					clone = pageNode.cloneNode(true);
  				}
  				
  				node.appendChild(clone);
  			};
  
  			if (currentPage)
  			{
  				appendPage(this.currentPage.node);
  			}
  			else
  			{
  				// Restores order of pages
  				for (var i = 0; i < this.pages.length; i++)
  				{
  					if (this.currentPage != this.pages[i])
  					{
  						if (this.pages[i].needsUpdate)
  						{
  							var enc = new mxCodec(mxUtils.createXmlDocument());
  							var temp = enc.encode(new mxGraphModel(this.pages[i].root));
  							this.editor.graph.saveViewState(this.pages[i].viewState, temp);
  							EditorUi.removeChildNodes(this.pages[i].node);
  							mxUtils.setTextContent(this.pages[i].node, Graph.compressNode(temp));
  
  							// Marks the page as up-to-date
  							delete this.pages[i].needsUpdate;
  						}
  					}
  					
  					appendPage(this.pages[i].node);
  				}
  			}
  		}
  		
  		return node;
  	};
  	
  	/**
  	 * Removes any values, styles and geometries from the given XML node.
  	 */
  	EditorUi.prototype.anonymizeString = function(text, zeros)
  	{
  		var result = [];
  		
  		for (var i = 0; i < text.length; i++)
  		{
  			var c = text.charAt(i);
  			
  			if (EditorUi.ignoredAnonymizedChars.indexOf(c) >= 0)
  			{
  				result.push(c);
  			}
  			else if (!isNaN(parseInt(c)))
  			{
  				result.push((zeros) ? '0' : Math.round(Math.random() * 9));
  			}
  			else if (c.toLowerCase() != c)
  			{
  				result.push(String.fromCharCode(65 + Math.round(Math.random() * 25)));
  			}
  			else if (c.toUpperCase() != c)
  			{
  				result.push(String.fromCharCode(97 + Math.round(Math.random() * 25)));
  			}
  			else if (/\s/.test(c))
  			{
  				/* any whitespace */
  				result.push(' ');
  			}
  			else
  			{
  				result.push('?');
  			}
  		}
  		
  		return result.join('');
  	};
  	
  	/**
  	 * Removes any values, styles and geometries from the given XML node.
  	 */
  	EditorUi.prototype.anonymizePatch = function(patch)
  	{
  		if (patch[EditorUi.DIFF_INSERT] != null)
  		{
  			for (var i = 0; i < patch[EditorUi.DIFF_INSERT].length; i++)
  			{
  				try
  				{
  					var data = patch[EditorUi.DIFF_INSERT][i].data;
  					var doc = mxUtils.parseXml(data);
  					var clone = doc.documentElement.cloneNode(false);
  					
  					if (clone.getAttribute('name') != null)
  					{
  						clone.setAttribute('name', this.anonymizeString(clone.getAttribute('name')));
  					}
  					
  					patch[EditorUi.DIFF_INSERT][i].data = mxUtils.getXml(clone);
  				}
  				catch (e)
  				{
  					patch[EditorUi.DIFF_INSERT][i].data = e.message;
  				}
  			}
  		}
  		
  		if (patch[EditorUi.DIFF_UPDATE] != null)
  		{
  			for (var pageId in patch[EditorUi.DIFF_UPDATE])
  			{
  				var diff = patch[EditorUi.DIFF_UPDATE][pageId];
  				
  				if (diff.name != null)
  				{
  					diff.name = this.anonymizeString(diff.name);
  				}
  				
  				if (diff.cells != null)
  				{
  					var anonymizeCellDiffs = mxUtils.bind(this, function(key)
  					{
  						var cellDiffs = diff.cells[key];
  						
  						if (cellDiffs != null)
  						{
  							for (var cellId in cellDiffs)
  							{
  								if (cellDiffs[cellId].value != null)
  								{
  									cellDiffs[cellId].value = '[' +
  										cellDiffs[cellId].value.length + ']';
  								}
  
  								if (cellDiffs[cellId].xmlValue != null)
  								{
  									cellDiffs[cellId].xmlValue = '[' +
  										cellDiffs[cellId].xmlValue.length + ']';
  								}
  								
  								if (cellDiffs[cellId].style != null)
  								{
  									cellDiffs[cellId].style = '[' +
  										cellDiffs[cellId].style.length + ']';
  								}
  								
  								if (Object.keys(cellDiffs[cellId]).length == 0)
  								{
  									delete cellDiffs[cellId];
  								}
  							}
  							
  							if (Object.keys(cellDiffs).length == 0)
  							{
  								delete diff.cells[key];
  							}
  						}
  					});
  					
  					anonymizeCellDiffs(EditorUi.DIFF_INSERT);
  					anonymizeCellDiffs(EditorUi.DIFF_UPDATE);
  					
  					if (Object.keys(diff.cells).length == 0)
  					{
  						delete diff.cells;
  					}
  				}
  	
  				if (Object.keys(diff).length == 0)
  				{
  					delete patch[EditorUi.DIFF_UPDATE][pageId];
  				}
  			}
  			
  			if (Object.keys(patch[EditorUi.DIFF_UPDATE]).length == 0)
  			{
  				delete patch[EditorUi.DIFF_UPDATE];
  			}
  		}
  			
  		return patch;
  	};
  
  	/**
  	 * Removes any values, styles and geometries from the given XML node.
  	 */
  	EditorUi.prototype.anonymizeAttributes = function(node, zeros)
  	{
  		if (node.attributes != null)
  		{
  			for (var i = 0; i < node.attributes.length; i++)
  			{
  				if (node.attributes[i].name != 'as')
  				{
  					node.setAttribute(node.attributes[i].name,
  						this.anonymizeString(node.attributes[i].value, zeros));
  				}
  			}
  		}
  		
  		if (node.childNodes != null)
  		{
  			for (var i = 0; i < node.childNodes.length; i++)
  			{
  				this.anonymizeAttributes(node.childNodes[i], zeros);
  			}
  		}
  	};
  	
  	/**
  	 * Removes any values, styles and geometries from the given XML node.
  	 */
  	EditorUi.prototype.anonymizeNode = function(node, zeros)
  	{
  		var nodes = node.getElementsByTagName('mxCell');
  		
  		for (var i = 0; i < nodes.length; i++)
  		{
  			if (nodes[i].getAttribute('value') != null)
  			{
  				nodes[i].setAttribute('value', '[' + nodes[i].getAttribute('value').length + ']');
  			}
  
  			if (nodes[i].getAttribute('xmlValue') != null)
  			{
  				nodes[i].setAttribute('xmlValue', '[' + nodes[i].getAttribute('xmlValue').length + ']');
  			}
  			
  			if (nodes[i].getAttribute('style') != null)
  			{
  				nodes[i].setAttribute('style', '[' + nodes[i].getAttribute('style').length + ']');
  			}
  			
  			if (nodes[i].parentNode != null && nodes[i].parentNode.nodeName != 'root' &&
  				nodes[i].parentNode.parentNode != null)
  			{
  				nodes[i].setAttribute('id', nodes[i].parentNode.getAttribute('id'));
  				nodes[i].parentNode.parentNode.replaceChild(nodes[i], nodes[i].parentNode);
  			}
  		}
  		
  		return node;
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.synchronizeCurrentFile = function(forceReload)
  	{
  		var currentFile = this.getCurrentFile();
  		
  		if (currentFile != null)
  		{
  			if (currentFile.savingFile)
  			{
  				this.handleError({message: mxResources.get('busy')});
  			}
  			else if (!forceReload && currentFile.invalidChecksum)
  			{
  				currentFile.handleFileError(null, true);
  			}
  			else if (this.spinner.spin(document.body, mxResources.get('updatingDocument')))
  			{
  				currentFile.clearAutosave();
  				this.editor.setStatus('');
  				
  				if (forceReload)
  				{
  					currentFile.reloadFile(mxUtils.bind(this, function()
  					{
  						currentFile.handleFileSuccess(DrawioFile.SYNC == 'manual');
  					}), mxUtils.bind(this, function(err)
  					{
  						currentFile.handleFileError(err, true);
  					}));
  				}
  				else
  				{
  					currentFile.synchronizeFile(mxUtils.bind(this, function()
  					{
  						currentFile.handleFileSuccess(DrawioFile.SYNC == 'manual');
  					}), mxUtils.bind(this, function(err)
  					{
  						currentFile.handleFileError(err, true);
  					}));
  				}
  			}
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.getFileData = function(forceXml, forceSvg, forceHtml, embeddedCallback, ignoreSelection,
  		currentPage, node, compact, file, uncompressed)
  	{
  		ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
  		currentPage = (currentPage != null) ? currentPage : false;
  		var graph = this.editor.graph;
  		
  		// Forces compression of embedded XML
  		if (forceSvg || (!forceXml && file != null && /(\.svg)$/i.test(file.getTitle())))
  		{
  			uncompressed = false;
  			var darkTheme = graph.themes != null && graph.defaultThemeName == 'darkTheme';
  			
  			// Exports SVG for first page while other page is visible by creating a graph
  			// LATER: Add caching for the graph or SVG while not on first page
  			// Dark mode requires a refresh that would destroy all handlers
  			// LATER: Use dark theme here to bypass refresh
  			if (darkTheme || (this.pages != null && this.currentPage != this.pages[0]))
  			{
  				var graphGetGlobalVariable = graph.getGlobalVariable;
  				graph = this.createTemporaryGraph(graph.getStylesheet());
  				var page = this.pages[0];
  		
  				graph.getGlobalVariable = function(name)
  				{
  					if (name == 'page')
  					{
  						return page.getName();
  					}
  					else if (name == 'pagenumber')
  					{
  						return 1;
  					}
  					
  					return graphGetGlobalVariable.apply(this, arguments);
  				};
  		
  				document.body.appendChild(graph.container);
  				graph.model.setRoot(page.root);
  			}
  		}
  		
  		node = (node != null) ? node : this.getXmlFileData(ignoreSelection, currentPage, uncompressed);
  		file = (file != null) ? file : this.getCurrentFile();
  
  		var result = this.createFileData(node, graph, file, window.location.href,
  			forceXml, forceSvg, forceHtml, embeddedCallback, ignoreSelection, compact,
  			uncompressed);
  		
  		// Removes temporary graph from DOM
  		if (graph != this.editor.graph)
  		{
  			graph.container.parentNode.removeChild(graph.container);
  		}
  		
  		return result;
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.getHtml = function(node, graph, title, editLink, redirect, ignoreSelection)
  	{
  		ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
  		var bg = null;
  		var js = EditorUi.drawHost + '/js/embed-static.min.js';
  	
  		// LATER: Merge common code with EmbedDialog
  		if (graph != null)
  		{
  			var bounds = (ignoreSelection) ? graph.getGraphBounds() : graph.getBoundingBox(graph.getSelectionCells());
  			var scale = graph.view.scale;
  			var x0 = Math.floor(bounds.x / scale - graph.view.translate.x);
  			var y0 = Math.floor(bounds.y / scale - graph.view.translate.y);
  			bg = graph.background;
  	
  			// Embed script only used if no redirect
  			if (redirect == null)
  			{
  				var s = this.getBasenames().join(';');
  	
  				if (s.length > 0)
  				{
  					js = EditorUi.drawHost + '/embed.js?s=' + s;
  				}
  			}
  			
  			// Adds embed attributes
  			node.setAttribute('x0', x0);
  			node.setAttribute('y0', y0);
  		}
  		
  		if (node != null)
  		{
  			node.setAttribute('pan', '1');
  			node.setAttribute('zoom', '1');
  			node.setAttribute('resize', '0');
  			node.setAttribute('fit', '0');
  			node.setAttribute('border', '20');
  			
  			// Hidden attributes
  			node.setAttribute('links', '1');
  			
  			if (editLink != null)
  			{
  				node.setAttribute('edit', editLink);
  			}
  		}
  		
  		// Makes XHTML compatible
  		if (redirect != null)
  		{
  			redirect = redirect.replace(/&/g, '&amp;');
  		}
  	
  		// Removes control chars in input for correct roundtrip check
  		var text = (node != null) ? Graph.zapGremlins(mxUtils.getXml(node)) : '';
  		
  		// Double compression for mxfile not fixed since it may cause imcompatibilites with
  		// embed clients that rely on this format. HTML files and export use getHtml2.
  		var data = Graph.compress(text);
  		
  		// Fallback to URI encoded XML for invalid compression
  		if (Graph.decompress(data) != text)
  		{
  			data = encodeURIComponent(text);
  		}
  		
  		var style = 'position:relative;overflow:auto;width:100%;';
  	
  		return ((redirect == null) ? '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->\n' : '') +
  			'<!DOCTYPE html>\n<html' + ((redirect != null) ? ' xmlns="http://www.w3.org/1999/xhtml">' : '>') +
  			'\n<head>\n' + ((redirect == null) ? ((title != null) ? '<title>' + mxUtils.htmlEntities(title) +
  				'</title>\n' : '') : '<title>diagrams.net</title>\n') +
  			((redirect != null) ? '<meta http-equiv="refresh" content="0;URL=\'' + redirect + '\'"/>\n' : '') +
  			'</head>\n<body' +
  			(((redirect == null && bg != null && bg != mxConstants.NONE) ? ' style="background-color:' + bg + ';">' : '>')) +
  			'\n<div class="mxgraph" style="' + style + '">\n' +
  			'<div style="width:1px;height:1px;overflow:hidden;">' + data + '</div>\n</div>\n' +
  			((redirect == null) ? '<script type="text/javascript" src="' + js + '"></script>' :
  			'<a style="position:absolute;top:50%;left:50%;margin-top:-128px;margin-left:-64px;" ' +
  			'href="' + redirect + '" target="_blank"><img border="0" ' +
  			'src="' + EditorUi.drawHost + '/images/drawlogo128.png"/></a>') +
  			'\n</body>\n</html>\n';
  	};
  	
  	/**
  	 * Same as above but using the new embed code.
  	 */
  	EditorUi.prototype.getHtml2 = function(xml, graph, title, editLink, redirect)
  	{
  		var js = window.DRAWIO_VIEWER_URL || EditorUi.drawHost + '/js/viewer-static.min.js';
  	
  		// Makes XHTML compatible
  		if (redirect != null)
  		{
  			redirect = redirect.replace(/&/g, '&amp;');
  		}
  		
  		var data = {highlight: '#0000ff', nav: this.editor.graph.foldingEnabled, resize: true,
  			xml: Graph.zapGremlins(xml), toolbar: 'pages zoom layers lightbox'};
  		
  		if (this.pages != null && this.currentPage != null)
  		{
  			data.page = mxUtils.indexOf(this.pages, this.currentPage);
  		}
  	
  		var style = 'max-width:100%;border:1px solid transparent;';
  	
  		return ((redirect == null) ? '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->\n' : '') +
  			'<!DOCTYPE html>\n<html' + ((redirect != null) ? ' xmlns="http://www.w3.org/1999/xhtml">' : '>') +
  			'\n<head>\n' + ((redirect == null) ? ((title != null) ? '<title>' + mxUtils.htmlEntities(title) +
  				'</title>\n' : '') : '<title>diagrams.net</title>\n') +
  			((redirect != null) ? '<meta http-equiv="refresh" content="0;URL=\'' + redirect + '\'"/>\n' : '') +
  			'<meta charset="utf-8"/>\n</head>\n<body>' +
  			'\n<div class="mxgraph" style="' + style + '" data-mxgraph="' + mxUtils.htmlEntities(JSON.stringify(data)) + '"></div>\n' +
  			((redirect == null) ? '<script type="text/javascript" src="' + js + '"></script>' :
  			'<a style="position:absolute;top:50%;left:50%;margin-top:-128px;margin-left:-64px;" ' +
  			'href="' + redirect + '" target="_blank"><img border="0" ' +
  			'src="' + EditorUi.drawHost + '/images/drawlogo128.png"/></a>') +
  			'\n</body>\n</html>\n';
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.setFileData = function(data)
  	{
  		data = this.validateFileData(data);
  		this.currentPage = null;
  		this.fileNode = null;
  		this.pages = null;
  
  		var node = (data != null && data.length > 0) ? mxUtils.parseXml(data).documentElement : null;
  		
  		// Checks for parser errors
  		var cause = Editor.extractParserError(node, mxResources.get('invalidOrMissingFile'));
  		
  		if (cause)
  		{
  			throw new Error(mxResources.get('notADiagramFile') + ' (' + cause + ')');
  		}
  		else
  		{
  			// Some nodes must be extracted here to find the mxfile node
  			// LATER: Remove duplicate call to extractGraphModel in overridden setGraphXml
  			var tmp = (node != null) ? this.editor.extractGraphModel(node, true) : null;
  			
  			if (tmp != null)
  			{
  				node = tmp;
  			}
  
  			if (node != null && node.nodeName == 'mxfile')
  			{
  				var nodes = node.getElementsByTagName('diagram');
  	
  				if (urlParams['pages'] != '0' || nodes.length > 1 ||
  					(nodes.length == 1 && nodes[0].hasAttribute('name')))
  				{
  					var selectedPage = null;
  					this.fileNode = node;
  					this.pages = [];
  					
  					// Wraps page nodes
  					for (var i = 0; i < nodes.length; i++)
  					{
  						// Adds page ID based on page order to match
  						// remote IDs given if IDs are missing here
  						if (nodes[i].getAttribute('id') == null)
  						{
  							nodes[i].setAttribute('id', i);
  						}
  						
  						var page = new DiagramPage(nodes[i]);
  						
  						// Checks for invalid page names
  						if (page.getName() == null)
  						{
  							page.setName(mxResources.get('pageWithNumber', [i + 1]));
  						}
  						
  						this.pages.push(page);
  						
  						if (urlParams['page-id'] != null && page.getId() == urlParams['page-id'])
  						{
  							selectedPage = page;
  						}
  					}
  					
  					this.currentPage = (selectedPage != null) ? selectedPage :
  						this.pages[Math.max(0, Math.min(this.pages.length - 1, urlParams['page'] || 0))];
  					node = this.currentPage.node;
  				}
  			}
  			
  			// Creates tabbed file structure if enforced by URL
  			if (urlParams['pages'] != '0' && this.fileNode == null && node != null)
  			{
  				this.fileNode = node.ownerDocument.createElement('mxfile');
  				this.currentPage = new DiagramPage(node.ownerDocument.createElement('diagram'));
  				this.currentPage.setName(mxResources.get('pageWithNumber', [1]));
  		 	 	this.pages = [this.currentPage];
  			}
  			
  			// Avoids scroll offset when switching page
  			this.editor.setGraphXml(node);
  			
  			// Avoids duplicate parsing of the XML stored in the node
  			if (this.currentPage != null)
  			{
  				this.currentPage.root = this.editor.graph.model.root;
  			}
  			
  			if (urlParams['layer-ids'] != null)
  			{
  				try
  				{
  					var layerIds = urlParams['layer-ids'].split(' ');
  					var layerIdsMap = {};
  					
  					for (var i = 0; i < layerIds.length; i++)
  					{
  						layerIdsMap[layerIds[i]] = true;
  					}
  					
  					var model = this.editor.graph.getModel();
  					var children = model.getChildren(model.root);
  					
  					// handle layers visibility
  					for (var i = 0; i < children.length; i++)
  					{
  						var child = children[i];
  						model.setVisible(child, layerIdsMap[child.id] || false);
  					}
  				}
  				catch(e){} //ignore
  			}
  		}
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.getBaseFilename = function(ignorePageName)
  	{
  		var file = this.getCurrentFile();
  		var basename = (file != null && file.getTitle() != null) ? file.getTitle() : this.defaultFilename;
  		
  		if (/(\.xml)$/i.test(basename) || /(\.html)$/i.test(basename) ||
  			/(\.svg)$/i.test(basename) || /(\.png)$/i.test(basename) ||
  			/(\.drawio)$/i.test(basename))
  		{
  			basename = basename.substring(0, basename.lastIndexOf('.'));
  		}
  
  		if (!ignorePageName && this.pages != null && this.pages.length > 1 &&
  			this.currentPage != null && this.currentPage.node.getAttribute('name') != null &&
  			this.currentPage.getName().length > 0)
  		{
  			basename = basename + '-' + this.currentPage.getName();
  		}
  		
  		return basename;
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.downloadFile = function(format, uncompressed, addShadow, ignoreSelection, currentPage,
  		pageVisible, transparent, scale, border, grid, includeXml)
  	{
  		try
  		{
  			ignoreSelection = (ignoreSelection != null) ? ignoreSelection : this.editor.graph.isSelectionEmpty();
  			var basename = this.getBaseFilename(!currentPage);
  			var filename = basename + '.' + format;
  			
  			if (format == 'xml')
  			{
  		    	var data = '<?xml version="1.0" encoding="UTF-8"?>\n' +
  		    		this.getFileData(true, null, null, null, ignoreSelection, currentPage,
  		    			null, null, null, uncompressed);
  		    	
  		    	this.saveData(filename, format, data, 'text/xml');
  			}
  		    else if (format == 'html')
  		    {
  		    	var data = this.getHtml2(this.getFileData(true), this.editor.graph, basename);
  		    	this.saveData(filename, format, data, 'text/html');
  		    }
  		    else if ((format == 'svg' || format == 'xmlsvg') && this.spinner.spin(document.body, mxResources.get('export')))
  		    {
  		    	var svg = null;
  		    	
  		    	var saveSvg = mxUtils.bind(this, function(data)
  		    	{
  		    		if (data.length <= MAX_REQUEST_SIZE)
  		    		{
  		    	    	this.saveData(filename, 'svg', data, 'image/svg+xml');
  		    		}
  		    		else
  		    		{
  		    			this.handleError({message: mxResources.get('drawingTooLarge')}, mxResources.get('error'), mxUtils.bind(this, function()
  		    			{
  		    				mxUtils.popup(svg);
  		    			}));
  		    		}
  		    	});
  		    	
  		    	if (format == 'svg')
  		    	{
  		        	var bg = this.editor.graph.background;
  		        	
  		        	if (transparent || bg == mxConstants.NONE)
  		        	{
  		        		bg = null;
  		        	}
  		
  		        	// Sets or disables alternate text for foreignObjects. Disabling is needed
  		        	// because PhantomJS seems to ignore switch statements and paint all text.
  		        	var svgRoot = this.editor.graph.getSvg(bg, null, null, null, null, ignoreSelection);
  					
  					if (addShadow)
  					{
  						this.editor.graph.addSvgShadow(svgRoot);
  					}
  					
  					// Embeds the images in the SVG output (async)
  					this.editor.convertImages(svgRoot, mxUtils.bind(this, mxUtils.bind(this, function(svgRoot2)
  					{
  						this.spinner.stop();
  						
  						saveSvg('<?xml version="1.0" encoding="UTF-8"?>\n' +
  							'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
  							mxUtils.getXml(svgRoot2));
  					})));
  		    	}
  		    	else
  		    	{
  		    		filename = basename + '.svg';
  		    		
  		    		svg = this.getFileData(false, true, null, mxUtils.bind(this, function(svg)
  		    		{
  		    			this.spinner.stop();
  		        		saveSvg(svg);
  		    		}), ignoreSelection);
  		    	}
  		    }
  			else
  			{
  				if (format == 'xmlpng')
  				{
  					filename = basename + '.png';
  				}
  				else if (format == 'jpeg')
  				{
  					filename = basename + '.jpg';
  				}
  				
  				this.saveRequest(filename, format, mxUtils.bind(this, function(newTitle, base64)
  				{
  					try
  					{
  						var prev = this.editor.graph.pageVisible;
  						
  						if (pageVisible != null)
  						{
  							this.editor.graph.pageVisible = pageVisible;
  						}
  						
  						var req = this.createDownloadRequest(newTitle, format, ignoreSelection, base64,
  							transparent, currentPage, scale, border, grid, includeXml);
  						this.editor.graph.pageVisible = prev;
  						
  						return req;
  					}
  					catch (e)
  					{
  						this.handleError(e);
  					}
  				}));
  			}
  		}
  		catch (e)
  		{
  			this.handleError(e);
  		}
  	};
  		
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.createDownloadRequest = function(filename, format, ignoreSelection, base64, transparent,
  		currentPage, scale, border, grid, includeXml)
  	{
  		var graph = this.editor.graph;
  		var bounds = graph.getGraphBounds();
  		
  		// Exports only current page for images that does not contain file data, but for
  		// the other formats with XML included or pdf with all pages, we need to send the complete data and use
  		// the from/to URL parameters to specify the page to be exported.
  		var data = this.getFileData(true, null, null, null, ignoreSelection, currentPage == false? false : format != 'xmlpng');
  		var range = '';
  		var allPages = '';
  		
  		if (bounds.width * bounds.height > MAX_AREA || data.length > MAX_REQUEST_SIZE)
  		{
  			throw {message: mxResources.get('drawingTooLarge')};
  		}
  		
  		var embed = (includeXml) ? '1' : '0';
         	
  		if (format == 'pdf' && currentPage == false)
  		{
  			allPages = '&allPages=1';
  		}
  		
         	if (format == 'xmlpng')
         	{
         		embed = '1';
         		format = 'png';
         		
         		// Finds the current page number
         		if (this.pages != null && this.currentPage != null)
         		{
         			for (var i = 0; i < this.pages.length; i++)
         			{
         				if (this.pages[i] == this.currentPage)
         				{
         					range = '&from=' + i;
         					break;
         				}
         			}
         		}
         	}
         	
  		var bg = graph.background;
  		
  		if ((format == 'png' || format == 'pdf') && transparent)
  		{
  			bg = mxConstants.NONE;
  		}
  		else if (!transparent && (bg == null || bg == mxConstants.NONE))
  		{
  			bg = '#ffffff';
  		}
  		
  		var extras = {globalVars: graph.getExportVariables()};
  		
  		if (grid)
  		{
  			extras.grid = {
  				size: graph.gridSize,
  				steps: graph.view.gridSteps,
  				color: graph.view.gridColor
  			};
  		}
  		
  		if (Graph.translateDiagram)
  		{
  			extras.diagramLanguage = Graph.diagramLanguage;
  		}
  		
  		return new mxXmlRequest(EXPORT_URL, 'format=' + format + range + allPages +
  			'&bg=' + ((bg != null) ? bg : mxConstants.NONE) +
  			'&base64=' + base64 + '&embedXml=' + embed + '&xml=' +
  			encodeURIComponent(data) + ((filename != null) ?
  			'&filename=' + encodeURIComponent(filename) : '') +
  			'&extras=' + encodeURIComponent(JSON.stringify(extras)) +
  			(scale != null? '&scale=' + scale : '') +
  			(border != null? '&border=' + border : ''));
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.setMode = function(mode, remember)
  	{
  		this.mode = mode;
  	};
  
  	/**
  	 * Loads the given file descriptor. The descriptor may define the following properties:
  	 * 
  	 * - url: The url to load the data from (proxy is used if CORS is not enabled)
  	 * - data: The data to be inserted. If both, data and url are defined, then the data
  	 * is preprendended to the data returned from the given URL.
  	 * - format: Currently, only 'csv' is supported as an optional value. Default is XML.
  	 * - update: Optional URL to fetch updates from (POST request with the page XML).
  	 * - interval: Optional interval for fetching updates. Default is 60000 (60 seconds).
  	 */
  	EditorUi.prototype.loadDescriptor = function(desc, success, error)
  	{
  		var hash = window.location.hash;
  		
  		var loadData = mxUtils.bind(this, function(data)
  		{
  			var realData = (desc.data != null) ? desc.data : '';
  			
  			if (data != null && data.length > 0)
  			{
  				if (realData.length > 0)
  				{
  					realData += '\n';
  				}
  				
  				realData += data;
  			}
  
  			var xml = (desc.format != 'csv' && realData.length > 0) ? realData : this.emptyDiagramXml;
  			var tempFile = new LocalFile(this, xml, (urlParams['title'] != null) ?
  					decodeURIComponent(urlParams['title']) : this.defaultFilename, true);
  			tempFile.getHash = function()
  			{
  				return hash;
  			};
  			this.fileLoaded(tempFile);
  			
  			if (desc.format == 'csv')
  			{
  				this.importCsv(realData, mxUtils.bind(this, function(cells)
  				{
  					this.editor.undoManager.clear();
  					this.editor.setModified(false);
  					this.editor.setStatus('');
  				}));
  			}
          	
  			// Installs updates
  			if (desc.update != null)
  			{
  				var interval = (desc.interval != null) ? parseInt(desc.interval) : 60000;
  				var currentThread = null;
  				
  				var doUpdate = mxUtils.bind(this, function()
  				{
  					var page = this.currentPage;
  					
  					mxUtils.post(desc.update, 'xml=' + encodeURIComponent(
  						mxUtils.getXml(this.editor.getGraphXml())),
  						mxUtils.bind(this, function(req)
  					{
  						if (page === this.currentPage)
  						{
  							if (req.getStatus() >= 200 && req.getStatus() <= 300)
  							{
  								var doc = this.updateDiagram(req.getText());
  								schedule();
  							}
  							else
  							{
  								this.handleError({message: mxResources.get('error') + ' ' + req.getStatus()});
  							}
  						}
  					}), mxUtils.bind(this, function(err)
  					{
  						this.handleError(err);
  					}));
  				});
  				
  				var schedule = mxUtils.bind(this, function()
  				{
  					window.clearTimeout(currentThread);
  					currentThread = window.setTimeout(doUpdate, interval);
  				});
  				
  				this.editor.addListener('pageSelected', mxUtils.bind(this, function()
  				{
  					schedule();
  					doUpdate();
  				}));
  				
  				schedule();
  				doUpdate();
  			}
  			
      		if (success != null)
      		{
      			success();
      		}
  		});
  		
  		if (desc.url != null && desc.url.length > 0)
  		{
  			// Cannot use proxy here as it will block unknown text content
              // LATER: Remove cache-control header
              this.editor.loadUrl(desc.url, mxUtils.bind(this, function(data)
              {
              	loadData(data);
              }), mxUtils.bind(this, function(err)
              {
              	if (error != null)
              	{
              		error(err)
              	}
              }));
  		}
  		else
  		{
  			loadData('');
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.updateDiagram = function(xml)
  	{
  		var doc = null;
  		var ui = this;
  		
  		function createOverlay(desc)
  		{
  			var overlay = new mxCellOverlay(desc.image || graph.warningImage,
  				desc.tooltip, desc.align, desc.valign, desc.offset);
  
  			// Installs a handler for clicks on the overlay
  			overlay.addListener(mxEvent.CLICK, function(sender, evt)
  			{
  				ui.alert(desc.tooltip);
  			});
  			
  			return overlay;
  		};
  		
  		if (xml != null && xml.length > 0)
  		{
  			doc = mxUtils.parseXml(xml);
  			var node = (doc != null) ? doc.documentElement : null;
  			
  			if (node != null && node.nodeName == 'updates')
  			{
  				var graph = this.editor.graph;
  				var model = graph.getModel();
  				model.beginUpdate();
  				var fit = null;
  
  				try
  				{
  					node = node.firstChild;
  					
  					while (node != null)
  					{
  						if (node.nodeName == 'update')
  						{
  							// Resolves the cell ID
  							var cell = model.getCell(node.getAttribute('id'));
  							
  							if (cell != null)
  							{
  								// Changes the value
  								try
  								{
  									var value = node.getAttribute('value');
  									
  									if (value != null)
  									{
  										var valueNode = mxUtils.parseXml(value).documentElement;
  
  										if (valueNode != null)
  										{
  											if (valueNode.getAttribute('replace-value') == '1')
  											{
  												model.setValue(cell, valueNode);
  											}
  											else
  											{
  												var attrs = valueNode.attributes;
  												
  												for (var j = 0; j < attrs.length; j++)
  												{
  													graph.setAttributeForCell(cell, attrs[j].nodeName,
  														(attrs[j].nodeValue.length > 0) ? attrs[j].nodeValue : null);
  												}
  											}
  										}
  									}
  								}
  								catch (e)
  								{
  									if (window.console != null)
  									{
  										console.log('Error in value for ' + cell.id + ': ' + e);
  									}
  								}
  								
  								// Changes the style
  								try
  								{
  									var style = node.getAttribute('style');
  									
  									if (style != null)
  									{
  										graph.model.setStyle(cell, style);
  									}
  								}
  								catch (e)
  								{
  									if (window.console != null)
  									{
  										console.log('Error in style for ' + cell.id + ': ' + e);
  									}
  								}
  								
  								// Adds or removes an overlay icon
  								try
  								{
  									var icon = node.getAttribute('icon');
  									
  									if (icon != null)
  									{
  										var desc = (icon.length > 0) ? JSON.parse(icon) : null;
  										
  										if (desc == null || !desc.append)
  										{
  											graph.removeCellOverlays(cell);
  										}
  										
  										if (desc != null)
  										{
  											graph.addCellOverlay(cell, createOverlay(desc));
  										}
  									}
  								}
  								catch (e)
  								{
  									if (window.console != null)
  									{
  										console.log('Error in icon for ' + cell.id + ': ' + e);
  									}
  								}
  								
  								// Replaces the geometry
  								try
  								{
  									var geo = node.getAttribute('geometry');
  									
  									if (geo != null)
  									{
  										geo = JSON.parse(geo);
  										var curr = graph.getCellGeometry(cell);
  										
  										if (curr != null)
  										{
  											curr = curr.clone();
  											
  											// Partially overwrites geometry
  											for (key in geo)
  											{
  												var val = parseFloat(geo[key]);
  												
  												if (key == 'dx')
  												{
  													curr.x += val; 
  												}
  												else if (key == 'dy')
  												{
  													curr.y += val;
  												}
  												else if (key == 'dw')
  												{
  													curr.width += val;
  												}
  												else if (key == 'dh')
  												{
  													curr.height += val;
  												}
  												else
  												{
  													curr[key] = parseFloat(geo[key]);
  												}
  											}
  											
  											graph.model.setGeometry(cell, curr);
  										}
  									}
  								}
  								catch (e)
  								{
  									if (window.console != null)
  									{
  										console.log('Error in icon for ' + cell.id + ': ' + e);
  									}
  								}
  							} // if cell != null
  						} // if node.nodeName == 'update
  						else if (node.nodeName == 'model')
  						{
  							// Finds first child element
  							var dataNode = node.firstChild;
  							
  							while (dataNode != null && dataNode.nodeType != mxConstants.NODETYPE_ELEMENT)
  							{
  								dataNode = dataNode.nextSibling;
  							}
  							
  							if (dataNode != null)
  							{
  								var dec = new mxCodec(node.firstChild);
  								dec.decode(dataNode, model);
  							}
  						}
  						else if (node.nodeName == 'view')
  						{
  							if (node.hasAttribute('scale'))
  							{
  								graph.view.scale = parseFloat(node.getAttribute('scale'));
  							}
  							
  							if (node.hasAttribute('dx') || node.hasAttribute('dy'))
  							{
  								graph.view.translate = new mxPoint(parseFloat(node.getAttribute('dx') || 0),
  									parseFloat(node.getAttribute('dy') || 0));
  							}
  						}
  						else if (node.nodeName == 'fit')
  						{
  							if (node.hasAttribute('max-scale'))
  							{
  								fit = parseFloat(node.getAttribute('max-scale'));
  							}
  							else
  							{
  								fit = 1;
  							}
  						}
  						
  						node = node.nextSibling;
  					} // end of while
  				}
  				finally
  				{
  					model.endUpdate();
  				}
  				
  				if (fit != null && this.chromelessResize)
  				{
  					this.chromelessResize(true, fit);
  				}
  			}
  		}
  		
  		return doc;
  	};
  	
  	/**
  	 * Constructs a filename for a copy of the given file.
  	 */
  	EditorUi.prototype.getCopyFilename = function(file, timestamp)
  	{
  		var title = (file != null && file.getTitle() != null) ?
  			file.getTitle() : this.defaultFilename;
  		
  		// Handles extension
  		var extension = '';
  		var dot = title.lastIndexOf('.');
  		
  		if (dot >= 0)
  		{
  			extension = title.substring(dot);
  			title = title.substring(0, dot);
  		}
  		
  		if (timestamp)
  		{
  			function getFormattedTime()
  			{
  			    var today = new Date();
  			    var y = today.getFullYear();
  			    // JavaScript months are 0-based.
  			    var m = today.getMonth() + 1;
  			    var d = today.getDate();
  			    var h = today.getHours();
  			    var mi = today.getMinutes();
  			    var s = today.getSeconds();
  			    
  			    return y + "-" + m + "-" + d + "-" + h + "-" + mi + "-" + s;
  			}
  			
  			var ts = new Date();
  			title += ' ' + getFormattedTime();
  		}
  		
  		title = mxResources.get('copyOf', [title]) + extension;
  		
  		return title;
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.fileLoaded = function(file, noDialogs)
  	{
  		var oldFile = this.getCurrentFile();
  		this.fileLoadedError = null;
  		this.fileEditable = null;
  		this.setCurrentFile(null);
  		var result = false;
  		this.hideDialog();
  		
  		if (oldFile != null)
  		{
  			EditorUi.debug('File.closed', [oldFile]);
  			oldFile.removeListener(this.descriptorChangedListener);
  			oldFile.close();
  		}
  		
  		this.editor.graph.model.clear();
  		this.editor.undoManager.clear();
  	
  		var noFile = mxUtils.bind(this, function()
  		{
  			this.setGraphEnabled(false);
  			this.setCurrentFile(null);
  			
  			// Keeps initial title if no file existed before
  			if (oldFile != null)
  			{
  				this.updateDocumentTitle();
  			}
  			
  			// File might have been loaded halfway
  			this.editor.graph.model.clear();
  			this.editor.undoManager.clear();
  			this.setBackgroundImage(null);
  					
  			// Avoids empty hash with no value
  			if (!noDialogs && window.location.hash != null && window.location.hash.length > 0)
  			{
  				window.location.hash = '';
  			}
  			
  			if (this.fname != null)
  			{
  				this.fnameWrapper.style.display = 'none';
  				this.fname.innerHTML = '';
  				this.fname.setAttribute('title', mxResources.get('rename'));
  			}
  
  			this.editor.setStatus('');
  			this.updateUi();
  			
  			if (!noDialogs)
  			{
  				this.showSplash();
  			}
  		});
  	
  		if (file != null)
  		{
  			try
  			{
  				// Workaround for delayed scroll repaint with min UI in Safari
  				if (mxClient.IS_SF && uiTheme == 'min')
  				{
  					this.diagramContainer.style.visibility = '';
  				}
  				
  				// Order is significant, current file needed for correct
  				// file format for initial save after starting realtime
  				this.openingFile = true;
  				this.setCurrentFile(file);
  				file.addListener('descriptorChanged', this.descriptorChangedListener);
  				file.addListener('contentChanged', this.descriptorChangedListener);
  				file.open();
  				delete this.openingFile;
  				
  				// DescriptorChanged updates the enabled state of the graph
  				this.setGraphEnabled(true);
  				this.setMode(file.getMode());
  				this.editor.graph.model.prefix = Editor.guid() + '-';
  				this.editor.undoManager.clear();
  				this.descriptorChanged();
  				this.updateUi();
  				
  				// Realtime files have a valid status message
  				if (!file.isEditable())
  				{
  					this.editor.setStatus('<span class="geStatusAlert" style="margin-left:8px;">' +
  						mxUtils.htmlEntities(mxResources.get('readOnly')) + '</span>');
  				}
  				// Handles modified state after error of loading new file
  				else if (file.isModified())
  				{
  					file.addUnsavedStatus();
  					
  					// Restores unsaved data
  					if (file.backupPatch != null)
  					{
  						file.patch([file.backupPatch]);
  					}
  				}
  				else
  				{
  					this.editor.setStatus('');
  				}
  	
  				if (!this.editor.isChromelessView() || this.editor.editable)
  				{
  					this.editor.graph.selectUnlockedLayer();
  					this.showLayersDialog();
  					this.restoreLibraries();
  					
  					// Workaround for no initial focus in FF
  					if (window.self !== window.top)
  					{
  						window.focus();
  					}
  				}
  				else if (this.editor.graph.isLightboxView())
  				{
  					this.lightboxFit();
  				}
  	
  				if (this.chromelessResize)
  				{
  					this.chromelessResize();
  				}
  				
  				this.editor.fireEvent(new mxEventObject('fileLoaded'));
  				result = true;
  
  				if (!this.isOffline() && file.getMode() != null)
  				{
  					EditorUi.logEvent({category: file.getMode().toUpperCase() + '-OPEN-FILE-' + file.getHash(),
  						action: 'size_' + file.getSize(),
  						label: 'autosave_' + ((this.editor.autosave) ? 'on' : 'off')});
  				}
  				
  				EditorUi.debug('File.opened', [file]);
  				
  				if (this.editor.editable && this.mode == file.getMode() &&
  					file.getMode() != App.MODE_DEVICE && file.getMode() != null)
  				{
  					try
  					{
  						this.addRecent({id: file.getHash(), title: file.getTitle(), mode: file.getMode()});
  					}
  					catch (e)
  					{
  						// ignore
  					}
  				}
  				
  				try
  				{
  					mxSettings.setOpenCounter(mxSettings.getOpenCounter() + 1);
  					mxSettings.save();
  				}
  				catch (e)
  				{
  					// ignore
  				}
  			}
  			catch (e)
  			{
  				this.fileLoadedError = e;
  				
  				if (EditorUi.enableLogging && !this.isOffline())
  				{
  		        	try
  		        	{
  		        		EditorUi.logEvent({category: 'ERROR-LOAD-FILE-' +
  		        			((file != null) ? file.getHash() : 'none'),
  		        			action: 'message_' + e.message,
  		        			label: 'stack_' + e.stack});
  		        	}
  		        	catch (e)
  		        	{
  		        		// ignore
  		        	}
  				}
  				
  				// Asynchronous handling of errors
  				var fn = mxUtils.bind(this, function()
  				{
  					// Removes URL parameter and reloads the page
  					if (urlParams['url'] != null && this.spinner.spin(document.body, mxResources.get('reconnecting')))
  					{
  						window.location.search = this.getSearch(['url']);
  					}
  					else if (oldFile != null)
  					{
  						this.fileLoaded(oldFile);
  					}
  					else
  					{
  						noFile();
  					}
  				});
  				
  				if (!noDialogs)
  				{
  					this.handleError(e, mxResources.get('errorLoadingFile'), fn, true, null, null, true);
  				}
  				else
  				{
  					fn();
  				}
  			}
  		}
  		else
  		{
  			noFile();
  		}
  		
  		return result;
  	};
  
  	/**
  	 * Creates a hash value for the current file.
  	 */
  	EditorUi.prototype.getHashValueForPages = function(pages, details)
  	{
  		// TODO: Avoid encoding to XML to make it faster
  		var hash = 0;
  		var model = new mxGraphModel();
  		var codec = new mxCodec();
  
  		if (details != null)
  		{
  			details.byteCount = 0;
  			details.attrCount = 0;
  			details.eltCount = 0;
  			details.nodeCount = 0;
  		}
  		
  		for (var i = 0; i < pages.length; i++)
  		{
  			this.updatePageRoot(pages[i]);
  			var diagram = pages[i].node.cloneNode(false);
  			
  			// FIXME: Check why names can be null in newer files
  			// ignore in hash and do not diff null names for now
  			diagram.removeAttribute('name');
  			
  			// Model is only a holder for the root
  			model.root = pages[i].root;
  			var xmlNode = codec.encode(model);
  			this.editor.graph.saveViewState(pages[i].viewState, xmlNode, true);
  			
  			// Local defaults may be different in files so ignore
  			xmlNode.removeAttribute('pageWidth');
  			xmlNode.removeAttribute('pageHeight');
  			
  			diagram.appendChild(xmlNode);
  			
  			if (details != null)
  			{
  				details.eltCount += diagram.getElementsByTagName('*').length;
  				details.nodeCount += diagram.getElementsByTagName('mxCell').length;
  			}
  			
  			hash = ((hash << 5) - hash + this.hashValue(diagram, function(obj, key, value, isXml)
  			{
  				// Ignores JS machine rounding errors in known numeric attributes
  				// eg. 412.33333333333326 (Webkit/FF) == 412.33333333333325 (Edge/IE11)
  				if (isXml && (obj.nodeName == 'mxGeometry' || obj.nodeName == 'mxPoint') &&
  					(key == 'x' || key == 'y' || key == 'width' || key == 'height'))
  				{
  					return Math.round(value);
  				}
  				// Workaround for previous in patch written to mxCell in 10.0.23
  				else if (isXml && obj.nodeName == 'mxCell' && key == 'previous')
  				{
  					return null;
  				}
  				else
  				{
  					return value;
  				}
  			}, details)) << 0;
  		}
  		
  		return hash;
  	};
  	
  	/**
  	 * Creates a hash value for the given object. Replacer returns the value of the
  	 * property or attribute for the given object or XML node.
  	 */
  	EditorUi.prototype.hashValue = function(obj, replacer, details)
  	{
  		var hash = 0;
  		
  		// Checks for XML nodes
  		if (obj != null && typeof obj === 'object' && typeof obj.nodeType === 'number' &&
  			typeof obj.nodeName === 'string' && typeof obj.getAttribute === 'function')
  		{
  			if (obj.nodeName != null)
  			{
  				hash = hash ^ this.hashValue(obj.nodeName, replacer, details);
  			}
  			
  			if (obj.attributes != null)
  			{
  				if (details != null)
  				{
  					details.attrCount += obj.attributes.length;
  				}
  				
  				for (var i = 0; i < obj.attributes.length; i++)
  				{
  					var key = obj.attributes[i].name;
  					var value = (replacer != null) ? replacer(obj, key, obj.attributes[i].value, true) : obj.attributes[i].value;
  	
  					if (value != null)
  					{
  						hash = hash ^ (this.hashValue(key, replacer, details) +
  							this.hashValue(value, replacer, details));
  					}
  				}
  			}
  			
  			if (obj.childNodes != null)
  			{
  				for (var i = 0; i < obj.childNodes.length; i++)
  				{
  					hash = ((hash << 5) - hash + this.hashValue(
  						obj.childNodes[i], replacer, details)) << 0;
  				}
  			}
  		}
  		else if (obj != null && typeof obj !== 'function')
  		{
  			var str = String(obj);
  			var temp = 0;
  
  			if (details != null)
  			{
  				details.byteCount += str.length;
  			}
  			
  			for (var i = 0; i < str.length; i++)
  			{
  		    	temp = ((temp << 5) - temp + str.charCodeAt(i)) << 0;
  			}
  		    
  			hash = hash ^ temp;
  		}
  		
  	    return hash;
  	};
  
  	/**
  	 * Adds empty implementation
  	 */
  	EditorUi.prototype.descriptorChanged = function()
  	{
  		// empty
  	};
  
  	/**
  	 * Hook for subclassers.
  	 */
  	EditorUi.prototype.restoreLibraries = function() { };
  
  	/**
  	 * Hook for subclassers.
  	 */
  	EditorUi.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload, fn) { };
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.isScratchpadEnabled = function()
  	{
  		return isLocalStorage || mxClient.IS_CHROMEAPP;
  	};
  
  	/**
  	 * Shows or hides the scratchpad library.
  	 */
  	EditorUi.prototype.toggleScratchpad = function()
  	{
  		if (this.isScratchpadEnabled())
  		{
  			if (this.scratchpad == null)
  			{
  				StorageFile.getFileContent(this, '.scratchpad', mxUtils.bind(this, function(xml)
  				{
  					if (xml == null)
  					{
  						xml = this.emptyLibraryXml;
  					}
  					
  					this.loadLibrary(new StorageLibrary(this, xml, '.scratchpad'));
  				}));
  			}
  			else
  			{
  				this.closeLibrary(this.scratchpad);
  			}
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.createLibraryDataFromImages = function(images)
  	{
  		var doc = mxUtils.createXmlDocument();
  		var library = doc.createElement('mxlibrary');
  		mxUtils.setTextContent(library, JSON.stringify(images));
  		doc.appendChild(library);
  		
  		return mxUtils.getXml(doc);
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.closeLibrary = function(file)
  	{
  		if (file != null)
  		{
  			this.removeLibrarySidebar(file.getHash());
  			
  			if (file.constructor != LocalLibrary)
  			{
  				mxSettings.removeCustomLibrary(file.getHash());
  			}
  			
  			if (file.title == '.scratchpad')
  			{
  				this.scratchpad = null;
  			}
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.removeLibrarySidebar = function(id)
  	{
  		var elts = this.sidebar.palettes[id];
  		
  		if (elts != null)
  		{
  			for (var i = 0; i < elts.length; i++)
  			{
  				elts[i].parentNode.removeChild(elts[i]);
  			}
  			
  			delete this.sidebar.palettes[id];
  		}
  	};
  	
  	/**
  	 * Changes the position of the library in the sidebar 
  	 */
  	EditorUi.prototype.repositionLibrary = function(nextChild) 
  	{
  	    var c = this.sidebar.container;
  	    
  	    if (nextChild == null)
  	    {
  	    	var elts = this.sidebar.palettes['L.scratchpad'];
  	    	
  	    	if (elts == null)
  	    	{
  	    		elts = this.sidebar.palettes['search'];
  	    	}
  	    	
  	    	if (elts != null)
  	    	{
  	    		nextChild = elts[elts.length - 1].nextSibling;
  	    	}
  	    }
  	    
  		nextChild = (nextChild != null) ? nextChild : c.firstChild.nextSibling.nextSibling;
  		
  		var content = c.lastChild;
  		var title = content.previousSibling;
  		
  	    c.insertBefore(content, nextChild);
  	    c.insertBefore(title, content);
  	}
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.loadLibrary = function(file, expand)
  	{
  		var doc = mxUtils.parseXml(file.getData());
  		
  		if (doc.documentElement.nodeName == 'mxlibrary')
  		{
  			var images = JSON.parse(mxUtils.getTextContent(doc.documentElement));
  			this.libraryLoaded(file, images, doc.documentElement.getAttribute('title'), expand);
  		}
  		else
  		{
  			throw {message: mxResources.get('notALibraryFile')};
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.getLibraryStorageHint = function(file)
  	{
  		return '';
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.libraryLoaded = function(file, images, optionalTitle, expand)
  	{
  		if (this.sidebar == null)
  		{
  			return;
  		}
  		
  		if (file.constructor != LocalLibrary)
  		{
  			mxSettings.addCustomLibrary(file.getHash());
  		}
  	
  		if (file.title == '.scratchpad')
  		{
  			this.scratchpad = file;
  		}
  		
  		var elts = this.sidebar.palettes[file.getHash()];
  		var nextSibling = (elts != null) ? elts[elts.length - 1].nextSibling : null;
  	
  		// Removes existing sidebar entry for this library
  		this.removeLibrarySidebar(file.getHash());
  		var dropTarget = null;
  		
  		var addImages = mxUtils.bind(this, function(imgs, content)
  		{
  			if (imgs.length == 0 && file.isEditable())
  			{
  				if (dropTarget == null)
  				{
  					dropTarget = document.createElement('div');
  					dropTarget.className = 'geDropTarget';
  					mxUtils.write(dropTarget, mxResources.get('dragElementsHere'));
  				}
  				
  				content.appendChild(dropTarget);
  			}
  			else
  			{
  				this.addLibraryEntries(imgs, content);
  			}
  		});
  
  		// Adds entries to search index
  		// KNOWN: Existing entries are not replaced after edit of custom library
  		if (this.sidebar != null && images != null)
  		{
  			this.sidebar.addEntries(images);
  		}
  		
  		// Adds new sidebar entry for this library
  		var tmp = (optionalTitle != null && optionalTitle.length > 0) ? optionalTitle : file.getTitle();
  		var contentDiv = this.sidebar.addPalette(file.getHash(), tmp,
  			(expand != null) ? expand : true, mxUtils.bind(this, function(content)
  		{
  			addImages(images, content);
  	    }));
  	
  		this.repositionLibrary(nextSibling);
  		
  		// Adds tooltip for backend
  		var title = contentDiv.parentNode.previousSibling;
  	    var tip = title.getAttribute('title');
  	    
  	    if (tip != null && tip.length > 0 && file.title != '.scratchpad')
  	    {
  	    	title.setAttribute('title', this.getLibraryStorageHint(file) + '\n' + tip);
  	    }
  	    
  	    var buttons = document.createElement('div');
  	    buttons.style.position = 'absolute';
  	    buttons.style.right = '0px';
  	    buttons.style.top = '0px';
  	    buttons.style.padding = '8px'	    
  	    buttons.style.backgroundColor = 'inherit';
  	    
  	    title.style.position = 'relative';
  	    
  	    var btnWidth = 18;
  		var btn = document.createElement('img');
  		btn.setAttribute('src', Dialog.prototype.closeImage);
  		btn.setAttribute('title', mxResources.get('close'));
  		btn.setAttribute('valign', 'absmiddle');
  		btn.setAttribute('border', '0');
  		btn.style.cursor = 'pointer';
  		btn.style.margin = '0 3px';
  		
  		var saveBtn = null;
  		
  	    if (file.title != '.scratchpad' || this.closableScratchpad)
  	    {
  			buttons.appendChild(btn);
  			
  			mxEvent.addListener(btn, 'click', mxUtils.bind(this, function(evt)
  			{
  				// Workaround for close after any button click in IE8
  				if (!mxEvent.isConsumed(evt))
  				{
  					var fn = mxUtils.bind(this, function()
  					{
  						this.closeLibrary(file);
  					});
  					
  					if (saveBtn != null)
  					{
  						this.confirm(mxResources.get('allChangesLost'), null, fn,
  							mxResources.get('cancel'), mxResources.get('discardChanges'));
  					}
  					else
  					{
  						fn();
  					}
  			
  					mxEvent.consume(evt);
  				}
  			}));
  	    }
  		
  		if (file.isEditable())
  		{
  			var graph = this.editor.graph;
  			var spinBtn = null;
  			
  			var editLibrary = mxUtils.bind(this, function(evt)
  			{
  				this.showLibraryDialog(file.getTitle(), contentDiv, images, file, file.getMode());
  				mxEvent.consume(evt);
  			});
  			
  			var saveLibrary = mxUtils.bind(this, function(evt)
  			{
  				file.setModified(true);
  				
  				if (file.isAutosave())
  				{
  					if (spinBtn != null && spinBtn.parentNode != null)
  					{
  						spinBtn.parentNode.removeChild(spinBtn);
  					}
  					
  					spinBtn = btn.cloneNode(false);
  					spinBtn.setAttribute('src', Editor.spinImage);
  					spinBtn.setAttribute('title', mxResources.get('saving'));
  					spinBtn.style.cursor = 'default';
  					spinBtn.style.marginRight = '2px';
  					spinBtn.style.marginTop = '-2px';
  					buttons.insertBefore(spinBtn, buttons.firstChild);
  					title.style.paddingRight = (buttons.childNodes.length * btnWidth) + 'px';
  					
  					this.saveLibrary(file.getTitle(), images, file, file.getMode(), true, true, function()
  					{
  						if (spinBtn != null && spinBtn.parentNode != null)
  						{
  							spinBtn.parentNode.removeChild(spinBtn);
  							title.style.paddingRight = (buttons.childNodes.length * btnWidth) + 'px';
  						}
  					});
  				}
  				else if (saveBtn == null)
  				{
  					saveBtn = btn.cloneNode(false);
  					saveBtn.setAttribute('src', IMAGE_PATH + '/download.png');
  					saveBtn.setAttribute('title', mxResources.get('save'));
  					buttons.insertBefore(saveBtn, buttons.firstChild);
  					
  					mxEvent.addListener(saveBtn, 'click', mxUtils.bind(this, function(evt)
  					{
  						this.saveLibrary(file.getTitle(), images, file, file.getMode(),
  							file.constructor == LocalLibrary, true, function()
  							{
  								if (saveBtn != null && !file.isModified())
  								{
  									title.style.paddingRight = (buttons.childNodes.length * btnWidth) + 'px';
  									saveBtn.parentNode.removeChild(saveBtn);
  									saveBtn = null;
  								}
  							});
  						
  						mxEvent.consume(evt);
  					}));
  					
  					title.style.paddingRight = (buttons.childNodes.length * btnWidth) + 'px';
  				}
  			});
  			
  			var addCells = mxUtils.bind(this, function(cells, bounds, evt, title)
  			{
  				cells = graph.cloneCells(mxUtils.sortCells(graph.model.getTopmostCells(cells)));
  	
  				// Translates cells to origin
  				for (var i = 0; i < cells.length; i++)
  				{
  					var geo = graph.getCellGeometry(cells[i]);
  					
  					if (geo != null)
  					{
  						geo.translate(-bounds.x, -bounds.y);
  					}
  				}
  	
  				contentDiv.appendChild(this.sidebar.createVertexTemplateFromCells(
  					cells, bounds.width, bounds.height, title || '', true, false, false));
  	
  				var xml = Graph.compress(mxUtils.getXml(this.editor.graph.encodeCells(cells)));
  				var entry = {xml: xml, w: bounds.width, h: bounds.height};
  				
  				if (title != null)
  				{
  					entry.title = title;
  				}
  				
  				images.push(entry);
  				saveLibrary(evt);
  				
  				if (dropTarget != null && dropTarget.parentNode != null && images.length > 0)
  				{
  					dropTarget.parentNode.removeChild(dropTarget);
  					dropTarget = null;
  				}
  			});
  		
  			var addSelection = mxUtils.bind(this, function(evt)
  			{
  				if (!graph.isSelectionEmpty())
  				{
  					var cells = graph.getSelectionCells();
  					var bounds = graph.view.getBounds(cells);
  					
  					var s = graph.view.scale;
  					
  					bounds.x /= s;
  					bounds.y /= s;
  					bounds.width /= s;
  					bounds.height /= s;
  					
  					bounds.x -= graph.view.translate.x;
  					bounds.y -= graph.view.translate.y;
  					
  					addCells(cells, bounds);
  				}
  				else if (graph.getRubberband().isActive())
  				{
  					graph.getRubberband().execute(evt);
  					graph.getRubberband().reset();
  				}
  				else
  				{
  					this.showError(mxResources.get('error'), mxResources.get('nothingIsSelected'), mxResources.get('ok'));
  				}
  				
  				mxEvent.consume(evt);
  			});
  			
  			// Adds drop handler from graph
  			mxEvent.addGestureListeners(contentDiv, function(){}, mxUtils.bind(this, function(evt)
  			{
  				if (graph.isMouseDown && graph.panningManager != null && graph.graphHandler.first != null)
  				{
  					graph.graphHandler.suspend();
  					
  					if (graph.graphHandler.hint != null)
  					{
  						graph.graphHandler.hint.style.visibility = 'hidden';	
  					}
  					
  					contentDiv.style.backgroundColor = '#f1f3f4';
  					contentDiv.style.cursor = 'copy';
  					graph.panningManager.stop();
  					graph.autoScroll = false;
  					
  					mxEvent.consume(evt);
  				}
  			}), mxUtils.bind(this, function(evt)
  			{
  				if (graph.isMouseDown && graph.panningManager != null && graph.graphHandler != null)
  				{
  					contentDiv.style.backgroundColor = '';
  					contentDiv.style.cursor = 'default';
  					this.sidebar.showTooltips = true;
  					graph.panningManager.stop();
  					
  					graph.graphHandler.reset();
  					graph.isMouseDown = false;
  					graph.autoScroll = true;
  					
  					addSelection(evt);
  					mxEvent.consume(evt);
  				}
  			}));
  			
  			// Handles mouse leaving the library and restoring move
  			mxEvent.addListener(contentDiv, 'mouseleave', mxUtils.bind(this, function(evt)
  			{
  				if (graph.isMouseDown && graph.graphHandler.first != null)
  				{
  					graph.graphHandler.resume();
  
  					if (graph.graphHandler.hint != null)
  					{
  						graph.graphHandler.hint.style.visibility = 'visible';	
  					}
  					
  					contentDiv.style.backgroundColor = '';
  					contentDiv.style.cursor = '';
  					graph.autoScroll = true;
  				}
  			}));
  			
  			// Adds drop handler from filesystem
  			if (Graph.fileSupport)
  			{
  				mxEvent.addListener(contentDiv, 'dragover', mxUtils.bind(this, function(evt)
  				{
  					contentDiv.style.backgroundColor = '#f1f3f4';
  					evt.dataTransfer.dropEffect = 'copy';
  					contentDiv.style.cursor = 'copy';
  					this.sidebar.hideTooltip();
  					evt.stopPropagation();
  					evt.preventDefault();
  				}));
  				
  				mxEvent.addListener(contentDiv, 'drop', mxUtils.bind(this, function(evt)
  				{
  					contentDiv.style.cursor = '';
  					contentDiv.style.backgroundColor = '';
  					
  				    if (evt.dataTransfer.files.length > 0)
  				    {	
  				    	this.importFiles(evt.dataTransfer.files, 0, 0, this.maxImageSize, mxUtils.bind(this, function(data, mimeType, x, y, w, h, img, doneFn, file)
  				    	{
  							if (data != null && mimeType.substring(0, 6) == 'image/')
  							{
  								var style = 'shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;aspect=fixed;image=' +
  									this.convertDataUri(data);
  								var cells = [new mxCell('', new mxGeometry(0, 0, w, h), style)];
  								cells[0].vertex = true;
  	
  								addCells(cells, new mxRectangle(0, 0, w, h), evt, (mxEvent.isAltDown(evt)) ? null : img.substring(0, img.lastIndexOf('.')).replace(/_/g, ' '));
  
  								if (dropTarget != null && dropTarget.parentNode != null && images.length > 0)
  								{
  									dropTarget.parentNode.removeChild(dropTarget);
  									dropTarget = null;
  								}
  							}
  							else
  							{
  								var done = false;
  								
  								var doImport = mxUtils.bind(this, function(theData, theMimeType)
  								{
  									if (theData != null && theMimeType == 'application/pdf')
  									{
  										var xml = Editor.extractGraphModelFromPdf(theData);
  					
  										if (xml != null && xml.length > 0)
  										{
  											theMimeType = 'text/xml';
  											theData = xml;
  										}
  									}
  									
  									if (theData != null) //Try to parse the file as xml (can be a library or mxfile). Otherwise, an error will be shown
  									{
  										var doc = mxUtils.parseXml(theData);
  										
  										if (doc.documentElement.nodeName == 'mxlibrary')
  										{
  											try
  											{
  												var temp = JSON.parse(mxUtils.getTextContent(doc.documentElement));
  												addImages(temp, contentDiv);
  												images = images.concat(temp);
  												saveLibrary(evt);
  												this.spinner.stop();
  												done = true;
  											}
  											catch (e)
  											{
  												// ignore
  											}
  										}
  										else if (doc.documentElement.nodeName == 'mxfile')
  										{
  											try
  											{
  												var pages = doc.documentElement.getElementsByTagName('diagram');
  												
  												for (var i = 0; i < pages.length; i++)
  												{
  													var cells = this.stringToCells(Editor.getDiagramNodeXml(pages[i]));
  													var size = this.editor.graph.getBoundingBoxFromGeometry(cells);
  													addCells(cells, new mxRectangle(0, 0, size.width, size.height), evt);
  												}
  												
  												done = true;
  											}
  											catch (e)
  											{
  												if (window.console != null)
  												{
  													console.log('error in drop handler:', e);
  												}
  											}
  										}
  									}
  									
  									if (!done)
  									{
  										this.spinner.stop();
  										this.handleError({message: mxResources.get('errorLoadingFile')})
  									}
  
  									if (dropTarget != null && dropTarget.parentNode != null && images.length > 0)
  									{
  										dropTarget.parentNode.removeChild(dropTarget);
  										dropTarget = null;
  									}
  								});
  								
  								if (file != null && img != null && ((/(\.v(dx|sdx?))($|\?)/i.test(img)) || /(\.vs(x|sx?))($|\?)/i.test(img)))
  								{
  									this.importVisio(file, function(xml)
  									{
  										doImport(xml, 'text/xml');
  									}, null, img);
  								}
  								else if (!this.isOffline() && new XMLHttpRequest().upload && this.isRemoteFileFormat(data, img) && file != null)
  								{
  									this.parseFile(file, mxUtils.bind(this, function(xhr)
  									{
  										if (xhr.readyState == 4)
  										{
  											this.spinner.stop();
  											
  											if (xhr.status >= 200 && xhr.status <= 299)
  											{
  												doImport(xhr.responseText, 'text/xml');
  											}
  											else
  											{
  												this.handleError({message: mxResources.get((xhr.status == 413) ?
  				            						'drawingTooLarge' : 'invalidOrMissingFile')},
  				            						mxResources.get('errorLoadingFile'));
  											}
  										}
  									}));
  								}
  								else
  								{
  									doImport(data, mimeType);
  								}
  							}
  				    	}));
  					}
  				    
  				    evt.stopPropagation();
  				    evt.preventDefault();
  				}));
  	
  				mxEvent.addListener(contentDiv, 'dragleave', function(evt)
  				{
  					contentDiv.style.cursor = '';
  					contentDiv.style.backgroundColor = '';
  					evt.stopPropagation();
  					evt.preventDefault();
  				});
  			}
  	
  			btn = btn.cloneNode(false);
  			btn.setAttribute('src', Editor.editImage);
  			btn.setAttribute('title', mxResources.get('edit'));
  			buttons.insertBefore(btn, buttons.firstChild);
  			
  			mxEvent.addListener(btn, 'click', editLibrary);
  			mxEvent.addListener(contentDiv, 'dblclick', function(evt)
  			{
  				if (mxEvent.getSource(evt) == contentDiv)
  				{
  					editLibrary(evt);
  				}
  			});
  			
  			var btn2 = btn.cloneNode(false);
  			btn2.setAttribute('src', Editor.plusImage);
  			btn2.setAttribute('title', mxResources.get('add'));
  			buttons.insertBefore(btn2, buttons.firstChild);
  			mxEvent.addListener(btn2, 'click', addSelection);
  			
  			if (!this.isOffline() && file.title == '.scratchpad' && EditorUi.scratchpadHelpLink != null)
  			{
  				var link = document.createElement('span');
  				link.setAttribute('title', mxResources.get('help'));
  				link.style.cssText = 'color:#a3a3a3;text-decoration:none;margin-right:2px;';
  				mxUtils.write(link, '?');
  				
  				mxEvent.addGestureListeners(link, mxUtils.bind(this, function(evt)
  				{
  					this.openLink(EditorUi.scratchpadHelpLink);
  					mxEvent.consume(evt);
  				}));
  				
  				buttons.insertBefore(link, buttons.firstChild);
  			}
  		}
  		
  		title.appendChild(buttons);
  		title.style.paddingRight = (buttons.childNodes.length * btnWidth) + 'px';
  	};
  
  	/**
  	 * Adds the library entries to the given DOM node.
  	 */
  	EditorUi.prototype.addLibraryEntries = function(imgs, content)
  	{
  		for (var i = 0; i < imgs.length; i++)
  		{
  			var img = imgs[i];
  			var data = img.data;
  
  			if (data != null)
  			{
  				data = this.convertDataUri(data);
  				var s = 'shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;';
  				
  				if (img.aspect == 'fixed')
  				{
  					s += 'aspect=fixed;'
  				}
  				
  				content.appendChild(this.sidebar.createVertexTemplate(s + 'image=' +
  					data, img.w, img.h, '', img.title || '', false, false, true));
  			}
  			else if (img.xml != null)
  			{
  				var cells = this.stringToCells(Graph.decompress(img.xml));
  				
  				if (cells.length > 0)
  				{
  					content.appendChild(this.sidebar.createVertexTemplateFromCells(
  						cells, img.w, img.h, img.title || '', true, false, true));
  				}
  			}
  		}
  	};
  
  	/**
  	 * Extracts the resource for the current language from the given multi language
  	 * resource object of the form {es: "...", de: "...", main: "..."} where the keys
  	 * are country codes and main defines the fallback if no resource for the current
  	 * country code exists.
  	 */
  	EditorUi.prototype.getResource = function(obj)
  	{
  		return (obj != null) ? (obj[mxLanguage] || obj.main) : null;
  	};
  	
  	/**
  	 * EditorUi Overrides
  	 */
  	EditorUi.prototype.footerHeight = 0;
  	
  	if (urlParams['savesidebar'] == '1')
  	{
  		Sidebar.prototype.thumbWidth = 64;
  		Sidebar.prototype.thumbHeight = 64;
  	}
  
  	/**
  	 * Programmatic settings for theme.
  	 */
      EditorUi.initTheme = function()
      {
      	if (uiTheme == 'atlas')
      	{
      		mxClient.link('stylesheet', STYLE_PATH + '/atlas.css');
  
      		if (typeof Toolbar !== 'undefined')
      		{
      			Toolbar.prototype.unselectedBackground = 'linear-gradient(rgb(255, 255, 255) 0px, rgb(242, 242, 242) 100%)';
      			Toolbar.prototype.selectedBackground = 'rgb(242, 242, 242)';
      		}
      		
      		Editor.prototype.initialTopSpacing = 3;
      		EditorUi.prototype.menubarHeight = 41;
      		EditorUi.prototype.toolbarHeight = 38;
      	}
      	else if (Editor.isDarkMode())
      	{
      		mxClient.link('stylesheet', STYLE_PATH + '/dark.css');
  
  			Dialog.backdropColor = '#2a2a2a';
  			Format.inactiveTabBackgroundColor = 'black';
  	    	Graph.prototype.defaultThemeName = 'darkTheme';
  			Graph.prototype.defaultPageBackgroundColor = '#2a2a2a';
  			Graph.prototype.defaultPageBorderColor = '#505759';
  			BaseFormatPanel.prototype.buttonBackgroundColor = '#2a2a2a';
  			mxGraphHandler.prototype.previewColor = '#cccccc';
  			StyleFormatPanel.prototype.defaultStrokeColor = '#cccccc';
  			mxConstants.DROP_TARGET_COLOR = '#00ff00';
      	}
  
  		Editor.sketchFontFamily = 'Architects Daughter';
  		Editor.sketchFontSource = 'https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter';
  
  		// Implements the sketch-min UI
  		if (urlParams['sketch'] == '1')
  		{
  			Graph.prototype.defaultVertexStyle = {'pointerEvents': '0', 'hachureGap': '4'};
  			Graph.prototype.defaultEdgeStyle = {'edgeStyle': 'none', 'rounded': '0', 'curved': '1',
  				'jettySize': 'auto', 'orthogonalLoop': '1', 'endArrow': 'open', 'startSize': '14', 'endSize': '14',
  				'sourcePerimeterSpacing': '8', 'targetPerimeterSpacing': '8'};
  				
  			if (urlParams['rough'] != '0')
  			{
  				Graph.prototype.defaultVertexStyle['fontFamily'] = Editor.sketchFontFamily;
  				Graph.prototype.defaultVertexStyle['fontSource'] = Editor.sketchFontSource;
  				Graph.prototype.defaultVertexStyle['fontSize'] = '20';
  				Graph.prototype.defaultVertexStyle['sketch'] = '1';
  				Graph.prototype.defaultEdgeStyle['fontFamily'] = Editor.sketchFontFamily;
  				Graph.prototype.defaultEdgeStyle['fontSource'] = Editor.sketchFontSource;
  				Graph.prototype.defaultEdgeStyle['fontSize'] = '20';
  				Graph.prototype.defaultEdgeStyle['sketch'] = '1';
  				
  				Menus.prototype.defaultFonts = [{'fontFamily': Editor.sketchFontFamily,
  					'fontUrl': decodeURIComponent(Editor.sketchFontSource)},
  					{'fontFamily': 'Rock Salt', 'fontUrl': 'https://fonts.googleapis.com/css?family=Rock+Salt'},
  					{'fontFamily': 'Permanent Marker', 'fontUrl': 'https://fonts.googleapis.com/css?family=Permanent+Marker'}].
  					concat(Menus.prototype.defaultFonts);
  			}
  			
  			Editor.configurationKey = '.sketch-configuration';
  			Editor.settingsKey = '.sketch-config';
  			Graph.prototype.defaultGridEnabled = false;
  			Graph.prototype.defaultPageVisible = false;
  			Graph.prototype.defaultEdgeLength = 120;
  			Editor.fitWindowBorders = new mxRectangle(60, 30, 30, 30);
  		}
      };
      
      EditorUi.initTheme();
  
  	/**
  	 * Overrides image dialog to add image search and Google+.
  	 */
      EditorUi.prototype.showImageDialog = function(title, value, fn, ignoreExisting, convertDataUri)
  	{
  		// KNOWN: IE+FF don't return keyboard focus after image dialog (calling focus doesn't help)
  	    var dlg = new ImageDialog(this, title, value, fn, ignoreExisting, convertDataUri);
  		this.showDialog(dlg.container, (Graph.fileSupport) ? 480 : 360, (Graph.fileSupport) ? 200 : 90, true, true);
  		dlg.init();
  	};
  
  	/**
  	 * Hides the current menu.
  	 */
  	EditorUi.prototype.showBackgroundImageDialog = function(apply, img)
  	{
  		apply = (apply != null) ? apply : mxUtils.bind(this, function(image, failed)
  		{
  			if (!failed)
  			{
  				var change = new ChangePageSetup(this, null, image);
  				change.ignoreColor = true;
  				
  				this.editor.graph.model.execute(change);
  			}
  		});
  		var dlg = new BackgroundImageDialog(this, apply, img);
  		this.showDialog(dlg.container, 360, 200, true, true);
  		dlg.init();
  	};
  
  	/**
  	 * Hides the current menu.
  	 */
  	EditorUi.prototype.showLibraryDialog = function(name, sidebar, images, file, mode)
  	{
  		var dlg = new LibraryDialog(this, name, sidebar, images, file, mode);
  		
  		this.showDialog(dlg.container, 640, 440, true, false, mxUtils.bind(this, function(cancel)
  		{
  			if (cancel && this.getCurrentFile() == null && urlParams['embed'] != '1')
  			{
  				this.showSplash();
  			}
  		}));
  		
  		dlg.init();
  	};
  
  	/**
  	 * Overridden to update after view state changes.
  	 */
  	var editorUiCreateFormat = EditorUi.prototype.createFormat;
  	
  	EditorUi.prototype.createFormat = function(container)
  	{
  		var format = editorUiCreateFormat.apply(this, arguments);
  		
  		this.editor.graph.addListener('viewStateChanged', mxUtils.bind(this, function(evt)
  		{
  			if (this.editor.graph.isSelectionEmpty())
  			{
  				format.refresh();
  			}
  		}));
  		
  		return format;
  	};
  	
  	/**
  	 * Hook for sidebar footer container.
  	 */
  	EditorUi.prototype.createSidebarFooterContainer = function()
  	{
  		var div =  this.createDiv('geSidebarContainer geSidebarFooter');
  		div.style.position = 'absolute';
  		div.style.overflow = 'hidden';
  		
  		var elt2 = document.createElement('a');
  		elt2.className = 'geTitle';
  		elt2.style.color = '#DF6C0C';
  		elt2.style.fontWeight = 'bold';
  		elt2.style.height = '100%';
  		elt2.style.paddingTop = '9px';
  		elt2.innerHTML = '<span style="font-size:18px;margin-right:5px;">+</span>';
  
  		mxUtils.write(elt2, mxResources.get('moreShapes') + '...');
  
  		// Prevents focus
  		mxEvent.addListener(elt2, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
  			mxUtils.bind(this, function(evt)
  		{
  			evt.preventDefault();
  		}));
  		
  		mxEvent.addListener(elt2, 'click', mxUtils.bind(this, function(evt)
  		{
  			this.actions.get('shapes').funct();
  			mxEvent.consume(evt);
  		}));
  		
  		div.appendChild(elt2);
  		
  		return div;
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.handleError = function(resp, title, fn, invokeFnOnClose, notFoundMessage, fileHash, disableLogging)
  	{
  		var resume = (this.spinner != null && this.spinner.pause != null) ? this.spinner.pause() : function() {};
  		var e = (resp != null && resp.error != null) ? resp.error : resp;
  
  		// Logs errors and writes stack to console
  		if (resp != null && resp.stack != null && resp.message != null)
  		{
  			try
  			{
  				if (!disableLogging)
  				{
  					EditorUi.logError('Caught: ' +
  						(resp.message == '' && resp.name != null) ? resp.name : resp.message,
  						resp.filename, resp.lineNumber, resp.columnNumber, resp, 'INFO');
  				}
  				else
  				{
  					if (window.console != null)
  					{
  						console.error('EditorUi.handleError:', resp);
  					}
  				}
  			}
  			catch (e)
  			{
  				// ignore
  			}
  		}
  	
  		if (e != null || title != null)
  		{
  			var msg = mxUtils.htmlEntities(mxResources.get('unknownError'));
  			var btn = mxResources.get('ok');
  			var retry = null;
  			title = (title != null) ? title : mxResources.get('error');
  			
  			if (e != null)
  			{
  				if (e.retry != null)
  				{
  					btn = mxResources.get('cancel');
  					retry = function()
  					{
  						resume();
  						e.retry();
  					};
  				}
  				
  				if (e.code == 404 || e.status == 404 || e.code == 403)
  				{
  					if (e.code == 403)
  					{
  						if (e.message != null)
  						{
  							msg = mxUtils.htmlEntities(e.message);
  						}
  						else
  						{
  							msg = mxUtils.htmlEntities(mxResources.get('accessDenied'));
  						}
  					}
  					else
  					{
  						msg = (notFoundMessage != null) ? notFoundMessage :
  							mxUtils.htmlEntities(mxResources.get('fileNotFoundOrDenied') +
  							((this.drive != null && this.drive.user != null) ? ' (' + this.drive.user.displayName +
  							', ' + this.drive.user.email+ ')' : ''));
  					}
  					
  					var id = (notFoundMessage != null) ? null : ((fileHash != null) ? fileHash : window.location.hash);
  					
  					// #U handles case where we tried to fallback to Google File and
  					// hash property still shows the public URL we tried to load
  					if (id != null && (id.substring(0, 2) == '#G' ||
  						id.substring(0, 45) == '#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D') &&
  						((resp != null && resp.error != null && ((resp.error.errors != null &&
  						resp.error.errors.length > 0 && resp.error.errors[0].reason == 'fileAccess') ||
  						(resp.error.data != null && resp.error.data.length > 0 &&
  						resp.error.data[0].reason == 'fileAccess'))) ||
  						e.code == 404 || e.status == 404))
  					{
  						id = (id.substring(0, 2) == '#U') ? id.substring(45, id.lastIndexOf('%26ex')) : id.substring(2);
  						
  						// Special case where the button must have a different label and function
  						this.showError(title, msg, mxResources.get('openInNewWindow'), mxUtils.bind(this, function()
  						{
  							this.editor.graph.openLink('https://drive.google.com/open?id=' + id);
  							this.handleError(resp, title, fn, invokeFnOnClose, notFoundMessage)
  						}), retry, mxResources.get('changeUser'), mxUtils.bind(this, function()
  						{
  							var driveUsers = this.drive.getUsersList();
  							
  							var div = document.createElement('div');
  							
  							var title = document.createElement('span');
  							title.style.marginTop = '6px';
  							mxUtils.write(title, mxResources.get('changeUser') + ': ');
  							
  							div.appendChild(title);
  							
  							var usersSelect = document.createElement('select');
  							usersSelect.style.width = '200px';
  							
  							//TODO This code is similar to Dialogs.js change user part in SplashDialog
  							function fillUsersSelect()
  							{
  								usersSelect.innerHTML = '';
  								
  								for (var i = 0; i < driveUsers.length; i++)
  								{
  									var option = document.createElement('option');
  									mxUtils.write(option, driveUsers[i].displayName);
  									option.value = i;
  									usersSelect.appendChild(option);
  									//More info (email) about the user in a disabled option
  									option = document.createElement('option');
  									option.innerHTML = '&nbsp;&nbsp;&nbsp;';
  									mxUtils.write(option, '<' + driveUsers[i].email + '>');
  									option.setAttribute('disabled', 'disabled');
  									usersSelect.appendChild(option);
  								}
  								
  								//Add account option
  								var option = document.createElement('option');
  								mxUtils.write(option, mxResources.get('addAccount'));
  								option.value = driveUsers.length;
  								usersSelect.appendChild(option);
  							}
  							
  							fillUsersSelect();
  							
  							mxEvent.addListener(usersSelect, 'change', mxUtils.bind(this, function()
  							{
  								var userIndex = usersSelect.value;
  								var existingAccount = driveUsers.length != userIndex;
  								
  								if (existingAccount)
  								{
  									this.drive.setUser(driveUsers[userIndex]);
  								}
  								
  								this.drive.authorize(existingAccount, mxUtils.bind(this, function()
  								{
  									if (!existingAccount) 
  									{
  										driveUsers = this.drive.getUsersList();
  										fillUsersSelect();
  									}
  								}), mxUtils.bind(this, function(resp)
  								{
  									this.handleError(resp);
  								}), true);
  							}));
  							
  							div.appendChild(usersSelect);
  							
  							var dlg = new CustomDialog(this, div, mxUtils.bind(this, function()
  							{
  								this.loadFile(window.location.hash.substr(1), true);
  							}));
  							this.showDialog(dlg.container, 300, 75, true, true);
  						}), mxResources.get('cancel'), mxUtils.bind(this, function()
  						{
  							this.hideDialog();
  							
  							if (fn != null)
  							{
  								fn();
  							}
  						}), 480, 150);
  
  						return;
  					}
  				}
  				
  				if (e.message != null)
  				{
  					if (e.message == '' && e.name != null)
  					{
  						msg = mxUtils.htmlEntities(e.name);
  					}
  					else
  					{
  						msg = mxUtils.htmlEntities(e.message);
  					}
  				}
  				else if (e.response != null && e.response.error != null)
  				{
  					msg = mxUtils.htmlEntities(e.response.error);
  				}
  				else if (typeof window.App !== 'undefined')
  				{
  					if (e.code == App.ERROR_TIMEOUT)
  					{
  						msg = mxUtils.htmlEntities(mxResources.get('timeout'));
  					}
  					else if (e.code == App.ERROR_BUSY)
  					{
  						msg = mxUtils.htmlEntities(mxResources.get('busy'));
  					}
  					else if (typeof e === 'string' && e.length > 0)
  					{
  						msg = mxUtils.htmlEntities(e);
  					}
  				}
  			}
  			
  			var btn3 = null;
  			var fn3 = null;
  			
  			if (e != null && e.helpLink != null)
  			{
  				btn3 = mxResources.get('help');
  				
  				fn3 = mxUtils.bind(this, function()
  				{
  					return this.editor.graph.openLink(e.helpLink);
  				});
  			}
  	
  			this.showError(title, msg, btn, fn, retry, null, null, btn3, fn3,
  				null, null, null, (invokeFnOnClose) ? fn : null);
  		}
  		else if (fn != null)
  		{
  			fn();
  		}
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.alert = function(msg, fn, optionalWidth)
  	{
  		var dlg = new ErrorDialog(this, null, msg, mxResources.get('ok'), fn);
  		this.showDialog(dlg.container, optionalWidth || 340, 100, true, false);
  		dlg.init();
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.confirm = function(msg, okFn, cancelFn, okLabel, cancelLabel, closable)
  	{
  		var resume = (this.spinner != null && this.spinner.pause != null) ? this.spinner.pause() : function() {};
  		var height = Math.min(200, Math.ceil(msg.length / 50) * 28);
  		
  		var dlg = new ConfirmDialog(this, msg, function()
  		{
  			resume();
  			
  			if (okFn != null)
  			{
  				okFn();
  			}
  		}, function()
  		{
  			resume();
  			
  			if (cancelFn != null)
  			{
  				cancelFn();
  			}
  		}, okLabel, cancelLabel, null, null, null, null, height);
  		
  		this.showDialog(dlg.container, 340, 46 + height, true, closable);
  		dlg.init();
  	};
  	
  	/**
  	 * Creates a popup banner.
  	 */
  	EditorUi.prototype.showBanner = function(id, text, onclick, doNotShowAgainOnClose)
  	{
  		var result = false;
  		
  		if (!this.bannerShowing && !this['hideBanner' + id] &&
  			(!isLocalStorage || mxSettings.settings == null ||
  			mxSettings.settings['close' + id] == null))
  		{
  			var banner = document.createElement('div');
  			banner.style.cssText = 'position:absolute;bottom:10px;left:50%;max-width:90%;padding:18px 34px 12px 20px;' +
  				'font-size:16px;font-weight:bold;white-space:nowrap;cursor:pointer;z-index:' + mxPopupMenu.prototype.zIndex + ';';
  			mxUtils.setPrefixedStyle(banner.style, 'box-shadow', '1px 1px 2px 0px #ddd');
  			mxUtils.setPrefixedStyle(banner.style, 'transform', 'translate(-50%,120%)');
  			mxUtils.setPrefixedStyle(banner.style, 'transition', 'all 1s ease');
  			banner.className = 'geBtn gePrimaryBtn';
  			
  			var logo = document.createElement('img');
  			logo.setAttribute('src', IMAGE_PATH + '/logo.png');
  			logo.setAttribute('border', '0');
  			logo.setAttribute('align', 'absmiddle');
  			logo.style.cssText = 'margin-top:-4px;margin-left:8px;margin-right:12px;width:26px;height:26px;';
  			banner.appendChild(logo);
  	
  			var img = document.createElement('img');
  			img.setAttribute('src', Dialog.prototype.closeImage);
  			img.setAttribute('title', mxResources.get((doNotShowAgainOnClose) ? 'doNotShowAgain' : 'close'));
  			img.setAttribute('border', '0');
  			img.style.cssText = 'position:absolute;right:10px;top:12px;filter:invert(1);padding:6px;margin:-6px;cursor:default;';
  			banner.appendChild(img);
  			
  			mxUtils.write(banner, text);
  			document.body.appendChild(banner);
  			this.bannerShowing = true;
  			
  			var div = document.createElement('div');
  			div.style.cssText = 'font-size:11px;text-align:center;font-weight:normal;';
  			var chk = document.createElement('input');
  			chk.setAttribute('type', 'checkbox');
  			chk.setAttribute('id', 'geDoNotShowAgainCheckbox');
  			chk.style.marginRight = '6px';
  			
  			if (!doNotShowAgainOnClose)
  			{
  				div.appendChild(chk);
  				
  				var label = document.createElement('label');
  				label.setAttribute('for', 'geDoNotShowAgainCheckbox');
  				mxUtils.write(label, mxResources.get('doNotShowAgain'));
  				div.appendChild(label);
  				banner.style.paddingBottom = '30px';
  				banner.appendChild(div);
  			}
  			
  			var onclose = mxUtils.bind(this, function()
  			{
  				if (banner.parentNode != null)
  				{
  					banner.parentNode.removeChild(banner);
  					this.bannerShowing = false;
  					
  					if (chk.checked || doNotShowAgainOnClose)
  					{
  						this['hideBanner' + id] = true;
  	
  						if (isLocalStorage && mxSettings.settings != null)
  						{
  							mxSettings.settings['close' + id] = Date.now();
  							mxSettings.save();
  						}
  					}
  				}
  			});
  			
  			mxEvent.addListener(img, 'click', mxUtils.bind(this, function(e)
  			{
  				mxEvent.consume(e);
  				onclose();
  			}));
  			
  			var hide = mxUtils.bind(this, function()
  			{
  				mxUtils.setPrefixedStyle(banner.style, 'transform', 'translate(-50%,120%)');
  				
  				window.setTimeout(mxUtils.bind(this, function()
  				{
  					onclose();
  				}), 1000);
  			});
  			
  			mxEvent.addListener(banner, 'click', mxUtils.bind(this, function(e)
  			{
  				var source = mxEvent.getSource(e);
  				
  				if (source != chk && source != label)
  				{
  					if (onclick != null)
  					{
  						onclick();
  					}
  					
  					onclose();
  					mxEvent.consume(e);
  				}
  				else
  				{
  					hide();
  				}
  			}));
  			
  			window.setTimeout(mxUtils.bind(this, function()
  			{
  				mxUtils.setPrefixedStyle(banner.style, 'transform', 'translate(-50%,0%)');
  			}), 500);
  			
  			window.setTimeout(hide, 30000);
  			result = true;
  		}
  		
  		return result;
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.setCurrentFile = function(file)
  	{
  		if (file != null)
  		{
  			file.opened = new Date();
  		}
  		
  		this.currentFile = file;
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.getCurrentFile = function()
  	{
  		return this.currentFile;
  	};
  	
  	/**
  	 * Handling for canvas export.
  	 */
  	EditorUi.prototype.isExportToCanvas = function()
  	{
  		return this.editor.isExportToCanvas();
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.createImageDataUri = function(canvas, xml, format, dpi)
  	{
  		var data = canvas.toDataURL('image/' + format);
  		
  		// Checks for valid output
  		if (data != null && data.length > 6)
  		{
  			if (xml != null)
  			{
  				data = Editor.writeGraphModelToPng(data, 'tEXt', 'mxfile', encodeURIComponent(xml));
  			}
  			
  			if (dpi > 0)
  			{
  				data = Editor.writeGraphModelToPng(data, 'pHYs', 'dpi', dpi);
  			}
  		}
  		else
  		{
  			throw {message: mxResources.get('unknownError')};
  		}
  		
  		return data;
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.saveCanvas = function(canvas, xml, format, ignorePageName, dpi)
  	{
  		var ext = ((format == 'jpeg') ? 'jpg' : format);
  		var filename = this.getBaseFilename(ignorePageName) + '.' + ext;
     	    var data = this.createImageDataUri(canvas, xml, format, dpi);
     	    this.saveData(filename, ext, data.substring(data.lastIndexOf(',') + 1), 'image/' + format, true);
  	};
  	
  	/**
  	 * Returns true if files should be saved using <saveLocalFile>.
  	 */
  	EditorUi.prototype.isLocalFileSave = function()
  	{
  		return ((urlParams['save'] != 'remote' && (mxClient.IS_IE ||
  			(typeof window.Blob !== 'undefined' && typeof window.URL !== 'undefined')) &&
  			document.documentMode != 9 && document.documentMode != 8 &&
  			document.documentMode != 7) ||
  			this.isOfflineApp() || mxClient.IS_IOS);
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.showTextDialog = function(title, text)
  	{
      	var dlg = new TextareaDialog(this, title, text, null, null, mxResources.get('close'));
      	dlg.textarea.style.width = '600px';
      	dlg.textarea.style.height = '380px';
  		this.showDialog(dlg.container, 620, 460, true, true, null, null, null, null, true);
  		dlg.init();
  		document.execCommand('selectall', false, null);
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.doSaveLocalFile = function(data, filename, mimeType, base64Encoded, format, defaultExtension)
  	{
  		// Appends .drawio extension for XML files with no extension
  		// to avoid the browser to automatically append .xml instead
  		if (mimeType == 'text/xml' &&
  			!/(\.drawio)$/i.test(filename) &&
  			!/(\.xml)$/i.test(filename) &&
  			!/(\.svg)$/i.test(filename) &&
  			!/(\.html)$/i.test(filename))
  		{
  			defaultExtension = (defaultExtension != null) ? defaultExtension : 'drawio';
  			filename = filename + '.' + defaultExtension;
  		}
  		
  		// Newer versions of IE
  		if (window.Blob && navigator.msSaveOrOpenBlob)
  		{
  			var blob = (base64Encoded) ?
  					this.base64ToBlob(data, mimeType) :
  					new Blob([data], {type: mimeType})
  			navigator.msSaveOrOpenBlob(blob, filename);
  		}
  		// Older versions of IE (binary not supported)
  		else if (mxClient.IS_IE)
  		{
  			var win = window.open('about:blank', '_blank');
  			
  			if (win == null)
  			{
  				mxUtils.popup(data, true);
  			}
  			else
  			{
  				win.document.write(data);
  				win.document.close();
  				win.document.execCommand('SaveAs', true, filename);
  				win.close();
  			}
  		}
  		else if (mxClient.IS_IOS && this.isOffline())
  		{
  			// Workaround for "WebKitBlobResource error 1" in mobile Safari
  			if (!navigator.standalone && mimeType != null && mimeType.substring(0, 6) == 'image/')
  			{
  				this.openInNewWindow(data, mimeType, base64Encoded);
  			}
  			else
  			{
  				this.showTextDialog(filename + ':', data);
  			}
  		}
  		else
  		{
  			var a = document.createElement('a');
  			
  			// Workaround for mxXmlRequest.simulate no longer working in PaleMoon
  			// if this is used (ie PNG export broken after XML export in PaleMoon)
  			// and for "WebKitBlobResource error 1" for all browsers on iOS.
  			var useDownload = (navigator.userAgent == null ||
  				navigator.userAgent.indexOf("PaleMoon/") < 0) &&
  				typeof a.download !== 'undefined';
  			
  			// Workaround for Chromium 65 cross-domain anchor download issue
  			if (mxClient.IS_GC && navigator.userAgent != null)
  			{
  				var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
  				var vers = raw ? parseInt(raw[2], 10) : false;
  				useDownload = vers == 65 ? false : useDownload;
  			}
  			
  			if (useDownload || this.isOffline())
  			{
  				a.href = URL.createObjectURL((base64Encoded) ?
  					this.base64ToBlob(data, mimeType) :
  					new Blob([data], {type: mimeType}));
  				
  				if (useDownload)
  				{
  					a.download = filename;
  				}
  				else
  				{
  					// Workaround for same window in Safari
  					a.setAttribute('target', '_blank');
  				}
  
  				document.body.appendChild(a);
  				
  				try
  				{
  					window.setTimeout(function()
  					{
  						URL.revokeObjectURL(a.href);
  					}, 20000);
  
  					a.click();
  					a.parentNode.removeChild(a);
  				}
  				catch (e)
  				{
  					// ignore
  				}
  			}
  			else
  			{
  				var req = this.createEchoRequest(data, filename, mimeType, base64Encoded, format);
  				
  				req.simulate(document, '_blank');
  			}
  		}
  	};
  		
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.createEchoRequest = function(data, filename, mimeType, base64Encoded, format, base64Response)
  	{
  		var param = (typeof(pako) === 'undefined' || true) ? 'xml=' + encodeURIComponent(data) :
  			'data=' + encodeURIComponent(Graph.compress(data));
  		
  		return new mxXmlRequest(SAVE_URL, param +
  			((mimeType != null) ? '&mime=' + mimeType : '') +
  			((format != null) ? '&format=' + format : '') +
  			((base64Response != null) ? '&base64=' + base64Response : '') +
  			((filename != null) ? '&filename=' + encodeURIComponent(filename) : '') +
  			((base64Encoded) ? '&binary=1' : ''));
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.base64ToBlob = function(base64Data, contentType)
  	{
  	    contentType = contentType || '';
  	    var sliceSize = 1024;
  	    var byteCharacters = atob(base64Data);
  	    var bytesLength = byteCharacters.length;
  	    var slicesCount = Math.ceil(bytesLength / sliceSize);
  	    var byteArrays = new Array(slicesCount);
  	
  	    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex)
  	    {
  	        var begin = sliceIndex * sliceSize;
  	        var end = Math.min(begin + sliceSize, bytesLength);
  	
  	        var bytes = new Array(end - begin);
  	        
  	        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset)
  	        {
  	            bytes[i] = byteCharacters[offset].charCodeAt(0);
  	        }
  	        
  	        byteArrays[sliceIndex] = new Uint8Array(bytes);
  	    }
  	
  	    return new Blob(byteArrays, {type: contentType});
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.saveLocalFile = function(data, filename, mimeType, base64Encoded, format, allowBrowser, allowTab, defaultExtension)
  	{
  		allowBrowser = (allowBrowser != null) ? allowBrowser : false;
  		allowTab = (allowTab != null) ? allowTab : (format != 'vsdx') && (!mxClient.IS_IOS || !navigator.standalone);
  		var count = this.getServiceCount(allowBrowser);
  		
  		if (isLocalStorage)
  		{
  			count++;
  		}
  		
  		var rowLimit = (count <= 4) ? 2 : (count > 6 ? 4 : 3);
  		
  		var dlg = new CreateDialog(this, filename, mxUtils.bind(this, function(newTitle, mode)
  		{
  			try
  			{
  				// Opens a new window
  				if (mode == '_blank')
  				{
  					if (mimeType != null && mimeType.substring(0, 6) == 'image/')
  					{
  						this.openInNewWindow(data, mimeType, base64Encoded);
  					}
  					else if (mimeType != null && mimeType.substring(0, 9) == 'text/html')
  					{
  						var dlg = new EmbedDialog(this, data);
  						this.showDialog(dlg.container, 440, 240, true, true);
  						dlg.init();
  					}
  					else
  					{
  						var win = window.open('about:blank');
  						
  						if (win == null)
  						{
  							mxUtils.popup(data, true);
  						}
  						else
  						{
  							win.document.write('<pre>' + mxUtils.htmlEntities(data, false) + '</pre>');
  							win.document.close();
  						}
  					}
  				}
  				else if (mode == App.MODE_DEVICE || mode == 'download')
  				{
  					this.doSaveLocalFile(data, newTitle, mimeType, base64Encoded, null, defaultExtension);
  				} 
  				else if (newTitle != null && newTitle.length > 0)
  				{
  					this.pickFolder(mode, mxUtils.bind(this, function(folderId)
  					{
  						try
  						{
  							this.exportFile(data, newTitle, mimeType, base64Encoded, mode, folderId);
  						}
  						catch (e)
  						{
  							this.handleError(e);
  						}
  					}));
  				}
  			}
  			catch (e)
  			{
  				this.handleError(e);
  			}
  		}), mxUtils.bind(this, function()
  		{
  			this.hideDialog();
  		}), mxResources.get('saveAs'), mxResources.get('download'), false, allowBrowser, allowTab,
  			null, count > 1, rowLimit, data, mimeType, base64Encoded);
  		var height = (this.isServices(count)) ? ((count > rowLimit) ? 390 : 270) : 160;
  		this.showDialog(dlg.container, 400, height, true, true);
  		dlg.init();
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.openInNewWindow = function(data, mimeType, base64Encoded)
  	{
  		var win = window.open('about:blank');
  		
  		if (win == null || win.document == null)
  		{
  			mxUtils.popup(data, true);
  		}
  		else
  		{
  			if (mimeType == 'image/svg+xml' && !mxClient.IS_SVG)
  			{
  				// KNOWN: Output is scaled in Chrome on macOS
  				win.document.write('<html><pre>' + mxUtils.htmlEntities(data, false) + '</pre></html>');
  				win.document.close();
  			}
  			else
  			{
  				if (mimeType == 'image/svg+xml')
  				{
  					win.document.write('<html>'+ data + '</html>');
  				}
  				else
  				{
  					var temp = (base64Encoded) ? data : btoa(unescape(encodeURIComponent(data)));
  				
  					win.document.write('<html><img style="max-width:100%;" src="data:' +
  						mimeType  + ';base64,' + temp + '"/></html>');
  				}
  				
  				win.document.close();
  			}
  		}
  	};
  	
  	var editoUiAddChromelessToolbarItems = EditorUi.prototype.addChromelessToolbarItems;
  
  	/**
  	 * Creates a temporary graph instance for rendering off-screen content.
  	 */
  	EditorUi.prototype.addChromelessToolbarItems = function(addButton)
  	{
  		if (this.isExportToCanvas())
  		{
  			this.exportDialog = null;
  			
  			var exportButton = addButton(mxUtils.bind(this, function(evt)
  			{
  				var clickHandler = mxUtils.bind(this, function()
  				{
  					mxEvent.removeListener(this.editor.graph.container, 'click', clickHandler);
  					
  					if (this.exportDialog != null)
  					{
  						this.exportDialog.parentNode.removeChild(this.exportDialog);
  						this.exportDialog = null;
  					}
  				});
  				
  				if (this.exportDialog != null)
  				{
  					clickHandler.apply(this);
  				}
  				else
  				{
  					this.exportDialog = document.createElement('div');
  					var r = exportButton.getBoundingClientRect();
  					
  					mxUtils.setPrefixedStyle(this.exportDialog.style, 'borderRadius', '5px');
  					this.exportDialog.style.position = 'fixed';
  					this.exportDialog.style.textAlign = 'center';
  					this.exportDialog.style.fontFamily = 'Helvetica,Arial';
  					this.exportDialog.style.backgroundColor = '#000000';
  					this.exportDialog.style.width = '50px';
  					this.exportDialog.style.height = '50px';
  					this.exportDialog.style.padding = '4px 2px 4px 2px';
  					this.exportDialog.style.color = '#ffffff';
  					mxUtils.setOpacity(this.exportDialog, 70);
  					this.exportDialog.style.left = r.left + 'px';
  					this.exportDialog.style.bottom = parseInt(this.chromelessToolbar.style.bottom) +
  						this.chromelessToolbar.offsetHeight + 4 + 'px';
  					
  					// Puts the dialog on top of the container z-index
  					var style = mxUtils.getCurrentStyle(this.editor.graph.container);
  					this.exportDialog.style.zIndex = style.zIndex;
  					
  					var spinner = new Spinner({
  						lines: 8, // The number of lines to draw
  						length: 6, // The length of each line
  						width: 5, // The line thickness
  						radius: 6, // The radius of the inner circle
  						rotate: 0, // The rotation offset
  						color: '#fff', // #rgb or #rrggbb
  						speed: 1.5, // Rounds per second
  						trail: 60, // Afterglow percentage
  						shadow: false, // Whether to render a shadow
  						hwaccel: false, // Whether to use hardware acceleration
  						top: '28px',
  						zIndex: 2e9 // The z-index (defaults to 2000000000)
  					});
  					spinner.spin(this.exportDialog);
  					
  				   	this.editor.exportToCanvas(mxUtils.bind(this, function(canvas)
  				   	{
  				   		spinner.stop();
  				   		
  						this.exportDialog.style.width = 'auto';
  						this.exportDialog.style.height = 'auto';
  						this.exportDialog.style.padding = '10px';
  				   		
  			   	   	    var data = this.createImageDataUri(canvas, null, 'png');
  			   	   	    var img = document.createElement('img');
  			   	   	    
  			   	   	    img.style.maxWidth = '140px';
  			   	   	    img.style.maxHeight = '140px';
  			   	   	    img.style.cursor = 'pointer';
  			   	   	    img.style.backgroundColor = 'white';
  			   	   	    
  			   	   	    img.setAttribute('title', mxResources.get('openInNewWindow'));
  			   	   	    img.setAttribute('border', '0');
  			   	   	    img.setAttribute('src', data);
  			   	   	    
  			   	   	    this.exportDialog.appendChild(img);
  
  						mxEvent.addListener(img, 'click', mxUtils.bind(this, function()
  						{
  							this.openInNewWindow(data.substring(data.indexOf(',') + 1), 'image/png', true);
  							clickHandler.apply(this, arguments);
  						}));
  				   	}), null, this.thumbImageCache, null, mxUtils.bind(this, function(e)
  				   	{
  				   		this.spinner.stop();
  				   		this.handleError(e);
  				   	}), null, null, null, null, null, null, null, Editor.defaultBorder);
  					
  					mxEvent.addListener(this.editor.graph.container, 'click', clickHandler);
  				   	document.body.appendChild(this.exportDialog);
  				}
  				
  				mxEvent.consume(evt);
  			}), Editor.cameraLargeImage, mxResources.get('export'));
  		}
  
  		editoUiAddChromelessToolbarItems.apply(this, arguments);
  	};
  
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.saveData = function(filename, format, data, mime, base64Encoded)
  	{
  		if (this.isLocalFileSave())
  		{
  			this.saveLocalFile(data, filename, mime, base64Encoded, format);
  		}
  		else
  		{
  			this.saveRequest(filename, format, mxUtils.bind(this, function(newTitle, base64)
  			{
  				return this.createEchoRequest(data, newTitle, mime, base64Encoded, format, base64);
  			}), data, base64Encoded, mime);
  		}
  	};
  	
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * Last 3 argument are optional and must only be used if the data can be stored as is on the client
  	 * side without requiring a server roundtrip.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.saveRequest = function(filename, format, fn, data, base64Encoded, mimeType, allowTab)
  	{
  		allowTab = (allowTab != null) ? allowTab : !mxClient.IS_IOS || !navigator.standalone;
  		var count = this.getServiceCount(false);
  		
  		if (isLocalStorage)
  		{
  			count++;
  		}
  		
  		var rowLimit = (count <= 4) ? 2 : (count > 6 ? 4 : 3);
  		
  		var dlg = new CreateDialog(this, filename, mxUtils.bind(this, function(newTitle, mode)
  		{
  			if (mode == '_blank' || newTitle != null && newTitle.length > 0)
  			{
  				var base64 = (mode == App.MODE_DEVICE || mode == 'download' || mode == null || mode == '_blank') ? '0' : '1';
  				var xhr = fn((mode == '_blank') ? null : newTitle, base64);
  				
  				if (xhr != null)
  				{
  					if (mode == App.MODE_DEVICE || mode == 'download' || mode == '_blank')
  					{
  						xhr.simulate(document, '_blank');
  					}
  					else
  					{
  						this.pickFolder(mode, mxUtils.bind(this, function(folderId)
  						{
  							mimeType = (mimeType != null) ? mimeType : ((format == 'pdf') ?
  								'application/pdf' : 'image/' + format);
  							
  							// Workaround for no roundtrip required if data is available on client-side
  							// TODO: Refactor the saveData/saveRequest call chain for local data
  							if (data != null)
  							{
  								try
  								{
  									this.exportFile(data, newTitle, mimeType, true, mode, folderId);
  								}
  								catch (e)
  								{
  									this.handleError(e);
  								}
  							}
  							else if (this.spinner.spin(document.body, mxResources.get('saving')))
  							{
  								// LATER: Catch possible mixed content error
  								// see http://stackoverflow.com/questions/30646417/catching-mixed-content-error
  								xhr.send(mxUtils.bind(this, function()
  								{
  									this.spinner.stop();
  									
  									if (xhr.getStatus() >= 200 && xhr.getStatus() <= 299)
  									{
  										try
  										{
  											this.exportFile(xhr.getText(), newTitle, mimeType, true, mode, folderId);
  										}
  										catch (e)
  										{
  											this.handleError(e);
  										}
  									}
  									else
  									{
  										this.handleError({message: mxResources.get('errorSavingFile')});
  									}
  								}), function(resp)
  								{
  									this.spinner.stop();
  									this.handleError(resp);
  								});
  							}
  						}));
  					}
  				}
  			}
  		}), mxUtils.bind(this, function()
  		{
  			this.hideDialog();
  		}), mxResources.get('saveAs'), mxResources.get('download'), false, false, allowTab,
  			null, count > 1, rowLimit, data, mimeType, base64Encoded);
  		
  		var height = (this.isServices(count)) ? ((count > 4) ? 390 : 270) : 160;
  		this.showDialog(dlg.container, 380, height, true, true);
  		dlg.init();
  	};
  
  	/**
  	 * Returns whether or not any services should be shown in dialogs
  	 */
  	EditorUi.prototype.isServices = function(count)
  	{
  		var noServices = 1; //(mxClient.IS_IOS) ? 0 : 1;
  		return count != noServices;
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.getEditBlankXml = function()
  	{
  		return this.getFileData(true);
  	};
  		
  	/**
  	 * Hook for subclassers.
  	 */
  	EditorUi.prototype.exportFile = function(data, filename, mimeType, base64Encoded, mode, folderId)
  	{
  		// do nothing
  	};
  	
  	/**
  	 * Hook for subclassers.
  	 */
  	EditorUi.prototype.pickFolder = function(mode, fn, enabled)
  	{
  		fn(null);
  	};
  
  	/**
  	 *
  	 */
  	EditorUi.prototype.exportSvg = function(scale, transparentBackground, ignoreSelection, addShadow,
  		editable, embedImages, border, noCrop, currentPage, linkTarget, keepTheme, exportType)
  	{
  		if (this.spinner.spin(document.body, mxResources.get('export')))
  		{
  			try
  			{
  				var selectionEmpty = this.editor.graph.isSelectionEmpty();
  				ignoreSelection = (ignoreSelection != null) ? ignoreSelection : selectionEmpty;
  				var bg = (transparentBackground) ? null : this.editor.graph.background;
  				
  				if (bg == mxConstants.NONE)
  				{
  					bg = null;
  				}
  				
  				// Handles special case where background is null but transparent is false
  				if (bg == null && transparentBackground == false)
  				{
  					bg = (keepTheme) ? this.editor.graph.defaultPageBackgroundColor : '#ffffff';
  				}
  				
  				// Sets or disables alternate text for foreignObjects. Disabling is needed
  				// because PhantomJS seems to ignore switch statements and paint all text.
  				var svgRoot = this.editor.graph.getSvg(bg, scale, border, noCrop,
  					null, ignoreSelection, null, null, (linkTarget == 'blank') ? '_blank' :
  					((linkTarget == 'self') ? '_top' : null), null, true, keepTheme,
  					exportType);
  				
  				if (addShadow)
  				{
  					this.editor.graph.addSvgShadow(svgRoot);
  				}
  				
  				var filename = this.getBaseFilename() + '.svg';
  	
  				var doSave = mxUtils.bind(this, function(svgRoot)
  				{
  					this.spinner.stop();
  					
  					if (editable)
  					{
  						svgRoot.setAttribute('content', this.getFileData(true, null, null, null, ignoreSelection,
  							currentPage, null, null, null, false));
  					}
  					
  					var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' +
  						'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
  						mxUtils.getXml(svgRoot);
  				
  		    		if (this.isLocalFileSave() || svg.length <= MAX_REQUEST_SIZE)
  		    		{
  		    			this.saveData(filename, 'svg', svg, 'image/svg+xml');
  		    		}
  		    		else
  		    		{
  		    			this.handleError({message: mxResources.get('drawingTooLarge')}, mxResources.get('error'), mxUtils.bind(this, function()
  		    			{
  		    				mxUtils.popup(svg);
  		    			}));
  		    		}
  				});
  
  				// Adds CSS
  				this.editor.addFontCss(svgRoot);
  				
  				if (this.editor.graph.mathEnabled)
  				{
  					this.editor.addMathCss(svgRoot);
  				}
  				
  				if (embedImages)
  				{
  					// Caches images
  					if (this.thumbImageCache == null)
  					{
  						this.thumbImageCache = new Object();
  					}
  					
  					this.editor.convertImages(svgRoot, doSave, this.thumbImageCache);
  				}
  				else
  				{
  					doSave(svgRoot);
  				}
  			}
  			catch (e)
  			{
  				this.handleError(e);
  			}
  		}
  	};
  	
  	EditorUi.prototype.addRadiobox = function(div, radioGroupName, label, checked, disabled, disableNewline, visible)
  	{
  		return this.addCheckbox(div, label, checked, disabled, disableNewline, visible, true, radioGroupName);
  	}
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.addCheckbox = function(div, label, checked, disabled, disableNewline, visible, asRadio, radioGroupName)
  	{
  		visible = (visible != null) ? visible : true;
  		
  		var cb = document.createElement('input');
  		cb.style.marginRight = '8px';
  		cb.style.marginTop = '16px';
  		cb.setAttribute('type', asRadio? 'radio' : 'checkbox');
  		var id = 'geCheckbox-' + Editor.guid();
  		cb.id = id;
  		
  		if (radioGroupName != null)
  		{
  			cb.setAttribute('name', radioGroupName);
  		}
  		
  		if (checked)
  		{
  			cb.setAttribute('checked', 'checked');
  			cb.defaultChecked = true;
  		}
  		
  		if (disabled)
  		{
  			cb.setAttribute('disabled', 'disabled');
  		}
  		
  		if (visible)
  		{
  			div.appendChild(cb);
  			
  			var lbl = document.createElement('label');
  			mxUtils.write(lbl, label);
  			lbl.setAttribute('for', id);
  			div.appendChild(lbl);
  
  			if (!disableNewline)
  			{
  				mxUtils.br(div);
  			}
  		}
  		
  		return cb;
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.addEditButton = function(div, lightbox)
  	{
  		var edit = this.addCheckbox(div, mxResources.get('edit') + ':', true, null, true);
  		edit.style.marginLeft = '24px';
  		
  		var file = this.getCurrentFile();
  		var editUrl = '';
  		
  		if (file != null && file.getMode() != App.MODE_DEVICE && file.getMode() != App.MODE_BROWSER)
  		{
  			editUrl = window.location.href;
  		}
  		
  		var editSelect = document.createElement('select');
  		editSelect.style.width = '120px';
  		editSelect.style.marginLeft = '8px';
  		editSelect.style.marginRight = '10px';
  		editSelect.className = 'geBtn';
  
  		var blankOption = document.createElement('option');
  		blankOption.setAttribute('value', 'blank');
  		mxUtils.write(blankOption, mxResources.get('makeCopy'));
  		editSelect.appendChild(blankOption);
  
  		var customOption = document.createElement('option');
  		customOption.setAttribute('value', 'custom');
  		mxUtils.write(customOption, mxResources.get('custom') + '...');
  		editSelect.appendChild(customOption);
  		
  		div.appendChild(editSelect);
  		
  		mxEvent.addListener(editSelect, 'change', mxUtils.bind(this, function()
  		{
  			if (editSelect.value == 'custom')
  			{
  				var dlg2 = new FilenameDialog(this, editUrl, mxResources.get('ok'), function(value)
  				{
  					if (value != null)
  					{
  						editUrl = value;
  					}
  					else
  					{
  						editSelect.value = 'blank';
  					}
  				}, mxResources.get('url'), null, null, null, null, function()
  				{
  					editSelect.value = 'blank';
  				});
  				this.showDialog(dlg2.container, 300, 80, true, false);
  				dlg2.init();
  			}
  		}));
  		
  		mxEvent.addListener(edit, 'change', mxUtils.bind(this, function()
  		{
  			if (edit.checked && (lightbox == null || lightbox.checked))
  			{
  				editSelect.removeAttribute('disabled');
  			}
  			else
  			{
  				editSelect.setAttribute('disabled', 'disabled');
  			}
  		}));
  
  		mxUtils.br(div);
  		
  		return {
  			getLink: function()
  			{
  				return (edit.checked) ? ((editSelect.value === 'blank') ? '_blank' : editUrl) : null;
  			},
  			getEditInput: function()
  			{
  				return edit;
  			},
  			getEditSelect: function()
  			{
  				return editSelect;
  			}
  		};
  	}
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.addLinkSection = function(div, showFrameOption)
  	{
  		mxUtils.write(div, mxResources.get('links') + ':');
  
  		var linkSelect = document.createElement('select');
  		linkSelect.style.width = '100px';
  		linkSelect.style.marginLeft = '8px';
  		linkSelect.style.marginRight = '10px';
  		linkSelect.className = 'geBtn';
  
  		var autoOption = document.createElement('option');
  		autoOption.setAttribute('value', 'auto');
  		mxUtils.write(autoOption, mxResources.get('automatic'));
  		linkSelect.appendChild(autoOption);
  
  		var blankOption = document.createElement('option');
  		blankOption.setAttribute('value', 'blank');
  		mxUtils.write(blankOption, mxResources.get('openInNewWindow'));
  		linkSelect.appendChild(blankOption);
  
  		var selfOption = document.createElement('option');
  		selfOption.setAttribute('value', 'self');
  		mxUtils.write(selfOption, mxResources.get('openInThisWindow'));
  		linkSelect.appendChild(selfOption);
  
  		if (showFrameOption)
  		{
  			var frameOption = document.createElement('option');
  			frameOption.setAttribute('value', 'frame');
  			mxUtils.write(frameOption, mxResources.get('openInThisWindow') +
  				' (' + mxResources.get('iframe') + ')');
  			linkSelect.appendChild(frameOption);
  		}
  		
  		div.appendChild(linkSelect);
  		
  		mxUtils.write(div, mxResources.get('borderColor') + ':');
  		var linkColor = '#0000ff';
  		var linkButton = null;
  		
  		function updateLinkColor()
  		{
  			linkButton.innerHTML = '<div style="width:100%;height:100%;box-sizing:border-box;' +
  				((linkColor != null && linkColor != mxConstants.NONE) ?
  				'border:1px solid black;background-color:' + linkColor :
  				'background-position:center center;background-repeat:no-repeat;' +
  				'background-image:url(\'' + Dialog.prototype.closeImage + '\')') + ';"></div>';
  		};
  		
  		linkButton = mxUtils.button('', mxUtils.bind(this, function(evt)
  		{
  			this.pickColor(linkColor || 'none', function(color)
  			{
  				linkColor = color;
  				updateLinkColor();
  			});
  			
  			mxEvent.consume(evt);
  		}));
  
  		updateLinkColor();
  		linkButton.style.padding = (mxClient.IS_FF) ? '4px 2px 4px 2px' : '4px';
  		linkButton.style.marginLeft = '4px';
  		linkButton.style.height = '22px';
  		linkButton.style.width = '22px';
  		linkButton.style.position = 'relative';
  		linkButton.style.top = (mxClient.IS_IE || mxClient.IS_IE11 || mxClient.IS_EDGE) ? '6px' : '1px';
  		linkButton.className = 'geColorBtn';
  		div.appendChild(linkButton);
  		mxUtils.br(div);
  		
  		return {
  			getColor: function()
  			{
  				return linkColor;
  			},
  			getTarget: function()
  			{
  				return linkSelect.value;
  			},
  			focus: function()
  			{
  				linkSelect.focus();
  			}
  		};
  	}
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.createUrlParameters = function(linkTarget, linkColor, allPages, lightbox, editLink, layers, params)
  	{
  		params = (params != null) ? params : [];
  		
  		if (lightbox)
  		{
  			if (EditorUi.lightboxHost != 'https://viewer.diagrams.net' || urlParams['dev'] == '1')
  			{
  				params.push('lightbox=1');
  			}
  
  			if (linkTarget != 'auto')
  			{
  				params.push('target=' + linkTarget);
  			}
  			
  			if (linkColor != null && linkColor != mxConstants.NONE)
  			{
  				params.push('highlight=' + ((linkColor.charAt(0) == '#') ?
  					linkColor.substring(1) : linkColor));
  			}
  			
  			if (editLink != null && editLink.length > 0)
  			{
  				params.push('edit=' + encodeURIComponent(editLink));
  			}
  			
  			if (layers)
  			{
  				params.push('layers=1');
  			}
  			
  			if (this.editor.graph.foldingEnabled)
  			{
  				params.push('nav=1');
  			}
  		}
  		
  		if (allPages && this.currentPage != null && this.pages != null &&
  			this.currentPage != this.pages[0])
  		{
  			params.push('page-id=' + this.currentPage.getId());
  		}
  		
  		return params;
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.createLink = function(linkTarget, linkColor, allPages, lightbox, editLink, layers, url, ignoreFile, params, useOpenParameter)
  	{
  		params = this.createUrlParameters(linkTarget, linkColor, allPages, lightbox, editLink, layers, params);
  		var file = this.getCurrentFile();
  		var addTitle = true;
  		var data = '';
  		
  		if (url != null)
  		{
  			data = '#U' + encodeURIComponent(url);
  		}
  		else
  		{
  			var file = this.getCurrentFile();
  
  			// Fallback to non-public URL for Drive files	
  			if (!ignoreFile && file != null && file.constructor == window.DriveFile)
  			{
  				data = '#' + file.getHash();
  				addTitle = false;
  			}
  			else
  			{
  				data = '#R' + encodeURIComponent((allPages) ?
  					this.getFileData(true, null, null, null, null, null, null, true, null, false) :
  					Graph.compress(mxUtils.getXml(this.editor.getGraphXml())))
  			}
  		}
  
  		if (addTitle && file != null && file.getTitle() != null && file.getTitle() != this.defaultFilename)
  		{
  			params.push('title=' + encodeURIComponent(file.getTitle()));
  		}
  
  		if (useOpenParameter && data.length > 1)
  		{
  			params.push('open=' + data.substring(1));
  			data = '';
  		}
  		
  		return ((lightbox && urlParams['dev'] != '1') ? EditorUi.lightboxHost :
  			(((mxClient.IS_CHROMEAPP || EditorUi.isElectronApp ||
  			!(/.*\.draw\.io$/.test(window.location.hostname))) ?
  			EditorUi.drawHost : 'https://' + window.location.host))) + '/' +
  			((params.length > 0) ? '?' + params.join('&') : '') + data;
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.createHtml = function(publicUrl, zoomEnabled, initialZoom, linkTarget,
  		linkColor, fit, allPages, layers, lightbox, editLink, fn)
  	{
  		var s = this.getBasenames();
  		var data = {};
  		
  		if (linkColor != '' && linkColor != mxConstants.NONE)
  		{
  			data.highlight = linkColor;
  		}
  		
  		if (linkTarget !== 'auto')
  		{
  			data.target = linkTarget;
  		}
  		
  		if (!lightbox)
  		{
  			data.lightbox = false;
  		}
  		
  		data.nav = this.editor.graph.foldingEnabled;
  		var zoom = parseInt(initialZoom);
  		
  		if (!isNaN(zoom) && zoom != 100)
  		{
  			data.zoom = zoom / 100;
  		}
  		
  		var tb = [];
  		
  		if (allPages)
  		{
  			tb.push('pages');
  			data.resize = true;
  			
  			if (this.pages != null && this.currentPage != null)
  			{
  				data.page = mxUtils.indexOf(this.pages, this.currentPage);
  			}
  		}
  		
  		if (zoomEnabled)
  		{
  			tb.push('zoom');
  			data.resize = true;
  		}
  		
  		if (layers)
  		{
  			tb.push('layers');
  		}
  		
  		if (tb.length > 0)
  		{
  			if (lightbox)
  			{
  				tb.push('lightbox');
  			}
  			
  			data.toolbar = tb.join(' ');
  		}
  
  		if (editLink != null && editLink.length > 0)
  		{
  			data.edit = editLink;
  		}
  		
  		if (publicUrl != null)
  		{
  			data.url = publicUrl;
  		}
  		else
  		{
  			data.xml = this.getFileData(true, null, null, null, null, !allPages);
  		}
  	
  		var value = '<div class="mxgraph" style="' +
  			((fit) ? 'max-width:100%;' : '') +
  			((tb != '') ? 'border:1px solid transparent;' : '') +
  			'" data-mxgraph="' + mxUtils.htmlEntities(JSON.stringify(data)) + '"></div>';
  		
  		var fetchParam = (publicUrl != null) ? '&fetch=' + encodeURIComponent(publicUrl) : '';
  		var s2 = (fetchParam.length > 0) ? (((urlParams['dev'] == '1') ?
  			'https://test.draw.io/embed2.js?dev=1' : EditorUi.lightboxHost + '/embed2.js?')) + fetchParam :
  			(((urlParams['dev'] == '1') ? 'https://test.draw.io/js/viewer-static.min.js' :
  			window.VIEWER_URL ? window.VIEWER_URL : EditorUi.lightboxHost + '/js/viewer-static.min.js'));
  		var src = '<script type="text/javascript" src="' + s2 + '"></script>';
  		
  		fn(value, src);
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.showHtmlDialog = function(btnLabel, helpLink, publicUrl, fn)
  	{
  		var div = document.createElement('div');
  		div.style.whiteSpace = 'nowrap';
  		var graph = this.editor.graph;
  		
  		var hd = document.createElement('h3');
  		mxUtils.write(hd, mxResources.get('html'));
  		hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:12px';
  		div.appendChild(hd);
  
  		var radioSection = document.createElement('div');
  		radioSection.style.cssText = 'border-bottom:1px solid lightGray;padding-bottom:8px;margin-bottom:12px;';
  
  		var publicUrlRadio = document.createElement('input');
  		publicUrlRadio.style.cssText = 'margin-right:8px;margin-top:8px;margin-bottom:8px;';
  		publicUrlRadio.setAttribute('value', 'url');
  		publicUrlRadio.setAttribute('type', 'radio');
  		publicUrlRadio.setAttribute('name', 'type-embedhtmldialog');
  
  		var copyRadio = publicUrlRadio.cloneNode(true);
  		copyRadio.setAttribute('value', 'copy');
  		radioSection.appendChild(copyRadio);
  		
  		var span = document.createElement('span');
  		mxUtils.write(span, mxResources.get('includeCopyOfMyDiagram'));
  		radioSection.appendChild(span);
  		
  		mxUtils.br(radioSection);
  		radioSection.appendChild(publicUrlRadio);
  
  		var span = document.createElement('span');
  		mxUtils.write(span, mxResources.get('publicDiagramUrl'));
  		radioSection.appendChild(span);
  
  		var file = this.getCurrentFile();
  		
  		if (publicUrl == null && file != null && file.constructor == window.DriveFile)
  		{
  			var testLink = document.createElement('a');
  			testLink.style.paddingLeft = '12px';
  			testLink.style.color = 'gray';
  			testLink.style.cursor = 'pointer';
  			mxUtils.write(testLink, mxResources.get('share'));
  			radioSection.appendChild(testLink);
  			
  			mxEvent.addListener(testLink, 'click', mxUtils.bind(this, function()
  			{
  				this.hideDialog();
  				this.drive.showPermissions(file.getId());
  			}));
  		}
  
  		copyRadio.setAttribute('checked', 'checked');
  		
  		if (publicUrl == null)
  		{
  			publicUrlRadio.setAttribute('disabled', 'disabled');
  		}
  
  		div.appendChild(radioSection);
  
  		var linkSection = this.addLinkSection(div);
  		var zoom = this.addCheckbox(div, mxResources.get('zoom'), true, null, true);
  		mxUtils.write(div, ':');
  		
  		var zoomInput = document.createElement('input');
  		zoomInput.setAttribute('type', 'text');
  		zoomInput.style.marginRight = '16px';
  		zoomInput.style.width = '60px';
  		zoomInput.style.marginLeft = '4px';
  		zoomInput.style.marginRight = '12px';
  		zoomInput.value = '100%';
  		
  		div.appendChild(zoomInput);
  
  		var fit = this.addCheckbox(div, mxResources.get('fit'), true);
  		var hasPages = this.pages != null && this.pages.length > 1;
  		var allPages = allPages = this.addCheckbox(div, mxResources.get('allPages'), hasPages, !hasPages);
  		var layers = this.addCheckbox(div, mxResources.get('layers'), true);
  		var lightbox = this.addCheckbox(div, mxResources.get('lightbox'), true);
  		
  		var editSection = this.addEditButton(div, lightbox);
  		var edit = editSection.getEditInput();
  		edit.style.marginBottom = '16px';
  		
  		mxEvent.addListener(lightbox, 'change', function()
  		{
  			if (lightbox.checked)
  			{
  				edit.removeAttribute('disabled');
  			}
  			else
  			{
  				edit.setAttribute('disabled', 'disabled');
  			}
  			
  			if (edit.checked && lightbox.checked)
  			{
  				editSection.getEditSelect().removeAttribute('disabled');
  			}
  			else
  			{
  				editSection.getEditSelect().setAttribute('disabled', 'disabled');
  			}
  		});
  		
  		var dlg = new CustomDialog(this, div, mxUtils.bind(this, function()
  		{
  			fn((publicUrlRadio.checked) ? publicUrl : null, zoom.checked, zoomInput.value, linkSection.getTarget(),
  				linkSection.getColor(), fit.checked, allPages.checked, layers.checked, lightbox.checked,
  				editSection.getLink());
  		}), null, btnLabel, helpLink);
  		this.showDialog(dlg.container, 340, 384, true, true);
  		copyRadio.focus();
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.showPublishLinkDialog = function(title, hideShare, width, height, fn, showFrameOption)
  	{
  		var div = document.createElement('div');
  		div.style.whiteSpace = 'nowrap';
  		var graph = this.editor.graph;
  		
  		var hd = document.createElement('h3');
  		mxUtils.write(hd, title || mxResources.get('link'));
  		hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:12px';
  		div.appendChild(hd);
  		
  		var file = this.getCurrentFile();
  		var helpLink = 'https://www.diagrams.net/doc/faq/publish-diagram-as-link';
  		var dy = 0;
  		
  		if (file != null && file.constructor == window.DriveFile && !hideShare)
  		{
  			dy = 80;
  			helpLink = 'https://www.diagrams.net/doc/faq/google-drive-publicly-publish-diagram';
  			var hintSection = document.createElement('div');
  			hintSection.style.cssText = 'border-bottom:1px solid lightGray;padding-bottom:14px;padding-top:6px;margin-bottom:14px;text-align:center;';
  			
  			var text = document.createElement('div');
  			text.style.whiteSpace = 'normal';
  			mxUtils.write(text, mxResources.get('linkAccountRequired'));
  			hintSection.appendChild(text);
  			
  			var shareBtn = mxUtils.button(mxResources.get('share'), mxUtils.bind(this, function()
  			{
  				this.drive.showPermissions(file.getId());
  			}));
  			shareBtn.style.marginTop = '12px';
  			shareBtn.className = 'geBtn';
  			hintSection.appendChild(shareBtn);
  			div.appendChild(hintSection);
  			
  			var testLink = document.createElement('a');
  			testLink.style.paddingLeft = '12px';
  			testLink.style.color = 'gray';
  			testLink.style.fontSize = '11px';
  			testLink.style.cursor = 'pointer';
  			mxUtils.write(testLink, mxResources.get('check'));
  			hintSection.appendChild(testLink);
  			
  			mxEvent.addListener(testLink, 'click', mxUtils.bind(this, function()
  			{
  				if (this.spinner.spin(document.body, mxResources.get('loading')))
  				{
  					this.getPublicUrl(this.getCurrentFile(), mxUtils.bind(this, function(url)
  					{
  						this.spinner.stop();
  						
  						var dlg = new ErrorDialog(this, null, mxResources.get((url != null) ?
  							'diagramIsPublic' : 'diagramIsNotPublic'), mxResources.get('ok'));
  						this.showDialog(dlg.container, 300, 80, true, false);
  						dlg.init();
  					}));
  				}
  			}));
  		}
  		
  		var widthInput = null;
  		var heightInput = null;
  		
  		if (width != null || height != null)
  		{
  			dy += 30;
  			mxUtils.write(div, mxResources.get('width') + ':');
  
  			widthInput = document.createElement('input');
  			widthInput.setAttribute('type', 'text');
  			widthInput.style.marginRight = '16px';
  			widthInput.style.width = '50px';
  			widthInput.style.marginLeft = '6px';
  			widthInput.style.marginRight = '16px';
  			widthInput.style.marginBottom = '10px';
  			widthInput.value = '100%';
  			
  			div.appendChild(widthInput);
  
  			mxUtils.write(div, mxResources.get('height') + ':');
  			
  			heightInput = document.createElement('input');
  			heightInput.setAttribute('type', 'text');
  			heightInput.style.width = '50px';
  			heightInput.style.marginLeft = '6px';
  			heightInput.style.marginBottom = '10px';
  			heightInput.value = height + 'px';
  			
  			div.appendChild(heightInput);
  			mxUtils.br(div);
  		}
  		
  		var linkSection = this.addLinkSection(div, showFrameOption);
  		var hasPages = this.pages != null && this.pages.length > 1;
  		var allPages = null;
  		
  		if (file == null || file.constructor != window.DriveFile || hideShare)
  		{
  			allPages = this.addCheckbox(div, mxResources.get('allPages'), hasPages, !hasPages);
  		}
  		
  		var lightbox = this.addCheckbox(div, mxResources.get('lightbox'), true, null, null, !showFrameOption);
  		var editSection = this.addEditButton(div, lightbox);
  		var edit = editSection.getEditInput();
  
  		// Cannot disable lightbox in iframes
  		if (showFrameOption)
  		{
  			edit.style.marginLeft = lightbox.style.marginLeft;
  			lightbox.style.display = 'none';
  			dy -= 30;
  		}
  		
  		var layers = this.addCheckbox(div, mxResources.get('layers'), true);
  		layers.style.marginLeft = edit.style.marginLeft;
  		layers.style.marginBottom = '16px';
  		layers.style.marginTop = '8px';
  		
  		mxEvent.addListener(lightbox, 'change', function()
  		{
  			if (lightbox.checked)
  			{
  				layers.removeAttribute('disabled');
  				edit.removeAttribute('disabled');
  			}
  			else
  			{
  				layers.setAttribute('disabled', 'disabled');
  				edit.setAttribute('disabled', 'disabled');
  			}
  			
  			if (edit.checked && lightbox.checked)
  			{
  				editSection.getEditSelect().removeAttribute('disabled');
  			}
  			else
  			{
  				editSection.getEditSelect().setAttribute('disabled', 'disabled');
  			}
  		});
  		
  		var dlg = new CustomDialog(this, div, mxUtils.bind(this, function()
  		{
  			fn(linkSection.getTarget(), linkSection.getColor(),
  				(allPages == null) ? true : allPages.checked,
  				lightbox.checked, editSection.getLink(),
  				layers.checked, (widthInput != null) ? widthInput.value : null,
  				(heightInput != null) ? heightInput.value : null);
  		}), null, mxResources.get('create'), helpLink);
  		this.showDialog(dlg.container, 340, 254 + dy, true, true);
  		
  		if (widthInput != null)
  		{
  			widthInput.focus();
  			
  			if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
  			{
  				widthInput.select();
  			}
  			else
  			{
  				document.execCommand('selectAll', false, null);
  			}
  		}
  		else
  		{
  			linkSection.focus();
  		}
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.showRemoteExportDialog = function(btnLabel, helpLink, callback, hideInclude, showZoomBorder)
  	{
  		var div = document.createElement('div');
  		div.style.whiteSpace = 'nowrap';
  		
  		var hd = document.createElement('h3');
  		mxUtils.write(hd, mxResources.get('image'));
  		hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:' + (showZoomBorder? '10' : '4') +'px';
  		div.appendChild(hd);
  
  		if (showZoomBorder)
  		{
  			mxUtils.write(div, mxResources.get('zoom') + ':');
  			var zoomInput = document.createElement('input');
  			zoomInput.setAttribute('type', 'text');
  			zoomInput.style.marginRight = '16px';
  			zoomInput.style.width = '60px';
  			zoomInput.style.marginLeft = '4px';
  			zoomInput.style.marginRight = '12px';
  			zoomInput.value = this.lastExportZoom || '100%';
  			div.appendChild(zoomInput);
  			
  			mxUtils.write(div, mxResources.get('borderWidth') + ':');
  			var borderInput = document.createElement('input');
  			borderInput.setAttribute('type', 'text');
  			borderInput.style.marginRight = '16px';
  			borderInput.style.width = '60px';
  			borderInput.style.marginLeft = '4px';
  			borderInput.value = this.lastExportBorder || '0';
  			div.appendChild(borderInput);
  			mxUtils.br(div);
  		}
  		
  		var selection = this.addCheckbox(div, mxResources.get('selectionOnly'), false,
  			this.editor.graph.isSelectionEmpty());
  		var include = (hideInclude) ? null : this.addCheckbox(div, mxResources.get('includeCopyOfMyDiagram'), true);
  		
  		var graph = this.editor.graph;
  		var transparent = (hideInclude) ? null : this.addCheckbox(div, mxResources.get('transparentBackground'),
  				graph.background == mxConstants.NONE || graph.background == null);
  
  		if (transparent != null)
  		{
  			transparent.style.marginBottom = '16px';
  		}
  		
  		var dlg = new CustomDialog(this, div, mxUtils.bind(this, function()
  		{
  			var scale = parseInt(zoomInput.value) / 100 || 1;
  			var border = parseInt(borderInput.value) || 0;
  			
  			callback(!selection.checked, (include != null) ? include.checked : false,
  				(transparent != null) ? transparent.checked : false, scale, border);
  		}), null, btnLabel, helpLink);
  		this.showDialog(dlg.container, 300, (showZoomBorder? 25 : 0) + (hideInclude ? 125 : 210), true, true);
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.showExportDialog = function(title, embedOption, btnLabel, helpLink, callback,
  		cropOption, defaultInclude, format, exportOption)
  	{
  		defaultInclude = (defaultInclude != null) ? defaultInclude : true;
  		
  		var div = document.createElement('div');
  		div.style.whiteSpace = 'nowrap';
  		var graph = this.editor.graph;
  		var height = (format == 'jpeg') ? 196 : 300;
  		
  		var hd = document.createElement('h3');
  		mxUtils.write(hd, title);
  		hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:10px';
  		div.appendChild(hd);
  
  		mxUtils.write(div, mxResources.get('zoom') + ':');
  		var zoomInput = document.createElement('input');
  		zoomInput.setAttribute('type', 'text');
  		zoomInput.style.marginRight = '16px';
  		zoomInput.style.width = '60px';
  		zoomInput.style.marginLeft = '4px';
  		zoomInput.style.marginRight = '12px';
  		zoomInput.value = this.lastExportZoom || '100%';
  		div.appendChild(zoomInput);
  		
  		mxUtils.write(div, mxResources.get('borderWidth') + ':');
  		var borderInput = document.createElement('input');
  		borderInput.setAttribute('type', 'text');
  		borderInput.style.marginRight = '16px';
  		borderInput.style.width = '60px';
  		borderInput.style.marginLeft = '4px';
  		borderInput.value = this.lastExportBorder || '0';
  		div.appendChild(borderInput);
  		mxUtils.br(div);
  
  		var selection = this.addCheckbox(div, mxResources.get('selectionOnly'),
  			false, graph.isSelectionEmpty());
  
  		var cb6 = document.createElement('input');
  		cb6.style.marginTop = '16px';
  		cb6.style.marginRight = '8px';
  		cb6.style.marginLeft = '24px';
  		cb6.setAttribute('disabled', 'disabled');
  		cb6.setAttribute('type', 'checkbox');
  
  		var exportSelect = document.createElement('select');
  		exportSelect.style.marginTop = '16px';
  		exportSelect.style.marginLeft = '8px';
  
  		var sizes = ['selectionOnly', 'diagram', 'page'];
  			
  		for (var i = 0; i < sizes.length; i++)
  		{
  			if (!graph.isSelectionEmpty() || sizes[i] != 'selectionOnly')
  			{
  				var opt = document.createElement('option');
  				mxUtils.write(opt, mxResources.get(sizes[i]));
  				opt.setAttribute('value', sizes[i]);
  				exportSelect.appendChild(opt);
  			}
  		}
  
  		if (exportOption)
  		{
  			mxUtils.write(div, mxResources.get('size') + ':');
  			div.appendChild(exportSelect);
  			mxUtils.br(div);
  			height += 26;
  
  			mxEvent.addListener(exportSelect, 'change', function()
  			{
  				if (exportSelect.value == 'selectionOnly')
  				{
  					selection.checked = true;
  				}
  			});
  		}
  		else if (cropOption)
  		{
  			div.appendChild(cb6);
  			mxUtils.write(div, mxResources.get('crop'));
  			mxUtils.br(div);
  			
  			height += 26;
  			
  			mxEvent.addListener(selection, 'change', function()
  			{
  				if (selection.checked)
  				{
  					cb6.removeAttribute('disabled');
  				}
  				else
  				{
  					cb6.setAttribute('disabled', 'disabled');
  				}
  			});
  		}
  
  		if (graph.isSelectionEmpty())
  		{
  			if (exportOption)
  			{
  				selection.style.display = 'none';
  				selection.nextSibling.style.display = 'none';
  				selection.nextSibling.nextSibling.style.display = 'none';
  				height -= 26;
  			}
  		}
  		else
  		{
  			exportSelect.value = 'diagram';
  			cb6.setAttribute('checked', 'checked');
  			cb6.defaultChecked = true;
  
  			mxEvent.addListener(selection, 'change', function()
  			{
  				if (selection.checked)
  				{
  					exportSelect.value = 'selectionOnly';
  				}
  				else
  				{
  					exportSelect.value = 'diagram';
  				}
  			});
  		}
  				
  		var defaultTransparent = false; /*graph.background == mxConstants.NONE || graph.background == null*/; 
  		var transparent = this.addCheckbox(div, mxResources.get('transparentBackground'),
  			defaultTransparent, null, null, format != 'jpeg');
  		var keepTheme = null;
  		
  		if (Editor.isDarkMode())
  		{
  			keepTheme = this.addCheckbox(div, mxResources.get('dark'), true); 
  			height += 26;
  		}
  		
  		var shadow = this.addCheckbox(div, mxResources.get('shadow'), graph.shadowVisible);
  		
  		var cb5 = document.createElement('input');
  		cb5.style.marginTop = '16px';
  		cb5.style.marginRight = '8px';
  		cb5.setAttribute('type', 'checkbox');
  		
  		if (this.isOffline() || !this.canvasSupported)
  		{
  			cb5.setAttribute('disabled', 'disabled');
  		}
  		
  		if (embedOption)
  		{
  			div.appendChild(cb5);
  			mxUtils.write(div, mxResources.get('embedImages'));
  			mxUtils.br(div);
  			
  			height += 26;
  		}
  		
  		var grid = null;
  		
  		if (format == 'png' || format == 'jpeg')
  		{
  			grid = this.addCheckbox(div, mxResources.get('grid'), false, this.isOffline() || !this.canvasSupported, false, true); 
  			height += 26;
  		}
  		
  		var include = this.addCheckbox(div, mxResources.get('includeCopyOfMyDiagram'), defaultInclude, null, null, format != 'jpeg');
  		include.style.marginBottom = '16px';
  		
  		var linkSelect = document.createElement('select');
  		linkSelect.style.maxWidth = '260px';
  		linkSelect.style.marginLeft = '8px';
  		linkSelect.style.marginRight = '10px';
  		linkSelect.className = 'geBtn';
  
  		var autoOption = document.createElement('option');
  		autoOption.setAttribute('value', 'auto');
  		mxUtils.write(autoOption, mxResources.get('automatic'));
  		linkSelect.appendChild(autoOption);
  
  		var blankOption = document.createElement('option');
  		blankOption.setAttribute('value', 'blank');
  		mxUtils.write(blankOption, mxResources.get('openInNewWindow'));
  		linkSelect.appendChild(blankOption);
  
  		var selfOption = document.createElement('option');
  		selfOption.setAttribute('value', 'self');
  		mxUtils.write(selfOption, mxResources.get('openInThisWindow'));
  		linkSelect.appendChild(selfOption);
  
  		if (format == 'svg')
  		{
  			mxUtils.write(div, mxResources.get('links') + ':');
  			div.appendChild(linkSelect);
  			mxUtils.br(div);
  			mxUtils.br(div);
  			height += 26;
  		}
  
  		var dlg = new CustomDialog(this, div, mxUtils.bind(this, function()
  		{
  			this.lastExportBorder = borderInput.value;
  			this.lastExportZoom = zoomInput.value;
  			
  			callback(zoomInput.value, transparent.checked, !selection.checked, shadow.checked,
  				include.checked, cb5.checked, borderInput.value, cb6.checked, false,
  				linkSelect.value, (grid != null) ? grid.checked : null, (keepTheme != null) ?
  				keepTheme.checked : null, exportSelect.value);
  		}), null, btnLabel, helpLink);
  		this.showDialog(dlg.container, 340, height, true, true, null, null, null, null, true);
  		zoomInput.focus();
  		
  		if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
  		{
  			zoomInput.select();
  		}
  		else
  		{
  			document.execCommand('selectAll', false, null);
  		}
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.showEmbedImageDialog = function(fn, title, imageLabel, shadowEnabled, helpLink)
  	{
  		var div = document.createElement('div');
  		div.style.whiteSpace = 'nowrap';
  		var graph = this.editor.graph;
  		
  		if (title != null)
  		{
  			var hd = document.createElement('h3');
  			mxUtils.write(hd, title);
  			hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:4px';
  			div.appendChild(hd);
  		}
  		
  		var fit = this.addCheckbox(div, mxResources.get('fit'), true);
  		var shadow = this.addCheckbox(div, mxResources.get('shadow'),
  			graph.shadowVisible && shadowEnabled, !shadowEnabled);
  		var image = this.addCheckbox(div, imageLabel);
  		var lightbox = this.addCheckbox(div, mxResources.get('lightbox'), true);
  		var editSection = this.addEditButton(div, lightbox);
  		var edit = editSection.getEditInput();
  		
  		var hasLayers = graph.model.getChildCount(graph.model.getRoot()) > 1;
  		var layers = this.addCheckbox(div, mxResources.get('layers'), hasLayers, !hasLayers);
  		layers.style.marginLeft = edit.style.marginLeft;
  		layers.style.marginBottom = '12px';
  		layers.style.marginTop = '8px';
  		
  		mxEvent.addListener(lightbox, 'change', function()
  		{
  			if (lightbox.checked)
  			{
  				if (hasLayers)
  				{
  					layers.removeAttribute('disabled');
  				}
  				
  				edit.removeAttribute('disabled');
  			}
  			else
  			{
  				layers.setAttribute('disabled', 'disabled');
  				edit.setAttribute('disabled', 'disabled');
  			}
  			
  			if (edit.checked && lightbox.checked)
  			{
  				editSection.getEditSelect().removeAttribute('disabled');
  			}
  			else
  			{
  				editSection.getEditSelect().setAttribute('disabled', 'disabled');
  			}
  		});
  		
  		var dlg = new CustomDialog(this, div, mxUtils.bind(this, function()
  		{
  			fn(fit.checked, shadow.checked, image.checked, lightbox.checked,
  				editSection.getLink(), layers.checked);
  		}), null, mxResources.get('embed'), helpLink);
  		this.showDialog(dlg.container, 280, 280, true, true);
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.createEmbedImage = function(fit, shadow, retina, lightbox, edit, layers, fn, err)
  	{
  		var bounds = this.editor.graph.getGraphBounds();
  		var page = this.getSelectedPageIndex();
  		
  		function doUpdate(dataUri)
  		{
     			var onclick = ' ';
     			var css = '';
     			
     			// Adds double click handling
  			if (lightbox)
  			{
  				// KNOWN: Message passing does not seem to work in IE11
  				onclick = " onclick=\"(function(img){if(img.wnd!=null&&!img.wnd.closed){img.wnd.focus();}else{var r=function(evt){if(evt.data=='ready'&&evt.source==img.wnd){img.wnd.postMessage(decodeURIComponent(" +
  					"img.getAttribute('src')),'*');window.removeEventListener('message',r);}};window.addEventListener('message',r);img.wnd=window.open('" + EditorUi.lightboxHost + "/?client=1" +
  					((page != null) ? ("&page=" + page) : "") +
  					((edit) ? "&edit=_blank" : "") +
  					((layers) ? '&layers=1' : '') + "');}})(this);\"";
  				css += 'cursor:pointer;';
  			}
     			
  			if (fit)
  			{
  				css += 'max-width:100%;';
  			}
  			
  			var atts = '';
  			
  			if (retina)
  			{
  				atts = ' width="' + Math.round(bounds.width) + '" height="' + Math.round(bounds.height) + '"';
  			}
  			
  			fn('<img src="' + dataUri + '"' + atts + ((css != '') ? ' style="' + css + '"' : '') + onclick + '/>');
  		};
  		
  		if (this.isExportToCanvas())
  		{
  			this.editor.exportToCanvas(mxUtils.bind(this, function(canvas)
  		   	{
  	   			var xml = (lightbox) ? this.getFileData(true) : null;
  	   			var data = this.createImageDataUri(canvas, xml, 'png');
  	   			doUpdate(data);
  		   	}), null, null, null, mxUtils.bind(this, function(e)
  		   	{
  		   		err({message: mxResources.get('unknownError')});
  		   	}), null, true, (retina) ? 2 : 1, null, shadow, null, null, Editor.defaultBorder);
  		}
  		else
  		{
  			var data = this.getFileData(true);
  			
  			if (bounds.width * bounds.height <= MAX_AREA && data.length <= MAX_REQUEST_SIZE)
  			{
  				var size = '';
  				
  				if (retina)
  				{
  					size = '&w=' + Math.round(2 * bounds.width) +
  						'&h=' + Math.round(2 * bounds.height);
  				}
  				
  				var embed = (lightbox) ? '1' : '0';
  				var req = new mxXmlRequest(EXPORT_URL, 'format=png' +
  					'&base64=1&embedXml=' + embed + size + '&xml=' +
  					encodeURIComponent(data));
  				
  				// LATER: Updates on each change, add a delay
  				req.send(mxUtils.bind(this, function()
  				{
  					if (req.getStatus() >= 200 && req.getStatus() <= 299)
  					{
  						// Fixes possible "incorrect function" for select() on
  						// DOM node which is no longer in document with IE11
  						doUpdate('data:image/png;base64,' + req.getText());
  					}
  					else
  					{
  						err({message: mxResources.get('unknownError')});
  					}
  				}));
  			}
  			else
  			{
  				err({message: mxResources.get('drawingTooLarge')});
  			}
  		}
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.createEmbedSvg = function(fit, shadow, image, lightbox, edit, layers, fn)
  	{
  		var svgRoot = this.editor.graph.getSvg(null, null, null, null, null,
  				null, null, null, null, null, !image);
  		
  		// Keeps hashtag links on same page
  		var links = svgRoot.getElementsByTagName('a');
  		
  		if (links != null)
  		{
  			for (var i = 0; i < links.length; i++)
  			{
  				var href = links[i].getAttribute('href');
  				
  				if (href != null && href.charAt(0) == '#' &&
  					links[i].getAttribute('target') == '_blank')
  				{
  					links[i].removeAttribute('target');
  				}
  			}
  		}
  		
  		if (lightbox)
  		{
  			svgRoot.setAttribute('content', this.getFileData(true));
  		}
  		
  		// Adds shadow filter
  		if (shadow)
  		{
  			this.editor.graph.addSvgShadow(svgRoot);
  		}
  		
  		// SVG inside image tag
  		if (image)
  		{
     			var onclick = ' ';
     			var css = '';
  
     			// Adds double click handling
  			if (lightbox)
  			{
  				// KNOWN: Message passing does not seem to work in IE11
  				onclick = "onclick=\"(function(img){if(img.wnd!=null&&!img.wnd.closed){img.wnd.focus();}else{var r=function(evt){if(evt.data=='ready'&&evt.source==img.wnd){img.wnd.postMessage(decodeURIComponent(" +
  					"img.getAttribute('src')),'*');window.removeEventListener('message',r);}};window.addEventListener('message',r);img.wnd=window.open('" + EditorUi.lightboxHost + "/?client=1" +
  					((edit) ? "&edit=_blank" : "") + ((layers) ? '&layers=1' : '') + "');}})(this);\"";
  				css += 'cursor:pointer;';
  			}
     			
  			if (fit)
  			{
  				css += 'max-width:100%;';
  			}
     			
     			// Images inside IMG don't seem to work so embed them all
  			this.editor.convertImages(svgRoot, mxUtils.bind(this, function(svgRoot)
  			{
  				fn('<img src="' + Editor.createSvgDataUri(mxUtils.getXml(svgRoot)) + '"' +
  					((css != '') ? ' style="' + css + '"' : '') + onclick + '/>');
  			}));
  		}
  		else
  		{
  			var css = '';
  			
  			// Adds double click handling
  			if (lightbox)
  			{
  				var page = this.getSelectedPageIndex();
  				
  				// KNOWN: Message passing does not seem to work in IE11
  				var js = "(function(svg){var src=window.event.target||window.event.srcElement;" +
  					// Ignores link events
  					"while (src!=null&&src.nodeName.toLowerCase()!='a'){src=src.parentNode;}if(src==null)" +
  					// Focus existing lightbox
  					"{if(svg.wnd!=null&&!svg.wnd.closed){svg.wnd.focus();}else{var r=function(evt){" +
  					// Message handling
  					"if(evt.data=='ready'&&evt.source==svg.wnd){svg.wnd.postMessage(decodeURIComponent(" +
  					"svg.getAttribute('content')),'*');window.removeEventListener('message',r);}};" +
  					"window.addEventListener('message',r);" +
  					// Opens lightbox window
  					"svg.wnd=window.open('" + EditorUi.lightboxHost + "/?client=1" +
  					((page != null) ? ("&page=" + page) : "") +
  					((edit) ? "&edit=_blank" : "") + ((layers) ? '&layers=1' : '') + "');}}})(this);";
  				svgRoot.setAttribute('onclick', js);
  				css += 'cursor:pointer;';
  			}
  			
  			// Adds responsive size
  			if (fit)
  			{
  				var w = parseInt(svgRoot.getAttribute('width'));
  				var h = parseInt(svgRoot.getAttribute('height'));
  				svgRoot.setAttribute('viewBox', '-0.5 -0.5 ' + w + ' ' + h);
  				css += 'max-width:100%;max-height:' + h + 'px;';
  				svgRoot.removeAttribute('height');
  			}
  			
  			if (css != '')
  			{
  				svgRoot.setAttribute('style', css);
  			}
  			
  			// Adds CSS
  			this.editor.addFontCss(svgRoot);
  			
  			if (this.editor.graph.mathEnabled)
  			{
  				this.editor.addMathCss(svgRoot);
  			}
  			
  			fn(mxUtils.getXml(svgRoot));
  		}
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.timeSince = function(date)
  	{
  	    var seconds = Math.floor((new Date() - date) / 1000);
  	    var interval = Math.floor(seconds / 31536000);
  
  	    if (interval > 1)
  	    {
  	        return interval + ' ' + mxResources.get('years');
  	    }
  	    
  	    interval = Math.floor(seconds / 2592000);
  	    
  	    if (interval > 1)
  	    {
  	        return interval + ' ' + mxResources.get('months');
  	    }
  	    
  	    interval = Math.floor(seconds / 86400);
  	    
  	    if (interval > 1)
  	    {
  	        return interval + ' ' + mxResources.get('days');
  	    }
  	    
  	    interval = Math.floor(seconds / 3600);
  	    
  	    if (interval > 1)
  	    {
  	        return interval + ' ' + mxResources.get('hours');
  	    }
  	    
  	    interval = Math.floor(seconds / 60);
  	    
  	    if (interval > 1)
  	    {
  	        return interval + ' ' + mxResources.get('minutes');
  	    }
  	    
  	    if (interval == 1)
  	    {
  	        return interval + ' ' + mxResources.get('minute');
  	    }
  	    
  	    return null;
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.decodeNodeIntoGraph = function(node, graph)
  	{
  		if (node != null)
  		{
  			var diagramNode = null;
  			
  			if (node.nodeName == 'diagram')
  			{
  				diagramNode = node;
  			}
  			else if (node.nodeName == 'mxfile')
  			{
  				var diagrams = node.getElementsByTagName('diagram');
  
  				if (diagrams.length > 0)
  				{
  					diagramNode = diagrams[0];
  					var graphGetGlobalVariable = graph.getGlobalVariable;
  					
  					graph.getGlobalVariable = function(name)
  					{
  						if (name == 'page')
  						{
  							return diagramNode.getAttribute('name') || mxResources.get('pageWithNumber', [1])
  						}
  						else if (name == 'pagenumber')
  						{
  							return 1;
  						}
  						
  						return graphGetGlobalVariable.apply(this, arguments);
  					};
  				}
  			}
  			
  			if (diagramNode != null)
  			{
  				node = Editor.parseDiagramNode(diagramNode);
  			}
  		}
  		
  		// Hack to decode XML into temp graph via editor
  		var prev = this.editor.graph;
  		
  		try
  		{
  			this.editor.graph = graph;
  			this.editor.setGraphXml(node);	
  		}
  		catch (e)
  		{
  			// ignore
  		}
  		finally
  		{
  			this.editor.graph = prev;
  		}
  		
  		return node;
  	};
  	
  		
  	/**
  	 * 
  	 */
  	EditorUi.prototype.getPngFileProperties = function(node)
  	{
  		var scale = 1;
  		var border = 0;
  		
  		if (node != null)
  		{
  			if (node.hasAttribute('scale'))
  			{
  				var temp = parseFloat(node.getAttribute('scale'));
  				
  				if (!isNaN(temp) && temp > 0)
  				{
  					scale = temp;
  				}
  			}
  			
  			if (node.hasAttribute('border'))
  			{
  				var temp = parseInt(node.getAttribute('border'));
  				
  				if (!isNaN(temp) && temp > 0)
  				{
  					border = temp;
  				}
  			}
  		}
  		
  		return {scale: scale, border: border};
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.getEmbeddedPng = function(success, error, optionalData, scale, border)
  	{
  		try
  		{
  			var graph = this.editor.graph;
  			var darkTheme = graph.themes != null && graph.defaultThemeName == 'darkTheme';
  			var diagramData = null;
  			
  			// Exports PNG for given optional data
  			if (optionalData != null && optionalData.length > 0)
  			{
  				graph = this.createTemporaryGraph(this.editor.graph.getStylesheet());
  				document.body.appendChild(graph.container);
  				this.decodeNodeIntoGraph(this.editor.extractGraphModel(
  					mxUtils.parseXml(optionalData).documentElement, true), graph);
  				diagramData = optionalData;
  			}
  			// Exports PNG for first page while other page is showing
  			else if (darkTheme || (this.pages != null && this.currentPage != this.pages[0]))
  			{
  				graph = this.createTemporaryGraph(graph.getStylesheet());
  				var graphGetGlobalVariable = graph.getGlobalVariable;
  				var page = this.pages[0];
  		
  				graph.getGlobalVariable = function(name)
  				{
  					if (name == 'page')
  					{
  						return page.getName();
  					}
  					else if (name == 'pagenumber')
  					{
  						return 1;
  					}
  					
  					return graphGetGlobalVariable.apply(this, arguments);
  				};
  		
  				document.body.appendChild(graph.container);
  				graph.model.setRoot(page.root);
  			}
  			
  		   	this.editor.exportToCanvas(mxUtils.bind(this, function(canvas)
  		   	{
  		   		try
  		   		{
  		   			if (diagramData == null)
  		   			{
  		   				diagramData = this.getFileData(true, null, null, null, null,
  		   						null, null, null, null, false);
  		   			}
  		   			
  		   	   	    var data = canvas.toDataURL('image/png');
  		   	   	    data = Editor.writeGraphModelToPng(data,
  		   	   	    	'tEXt', 'mxfile', encodeURIComponent(diagramData));
  	   	   	   		success(data.substring(data.lastIndexOf(',') + 1));
  	
  					// Removes temporary graph from DOM
  	   	   	   		if (graph != this.editor.graph)
  					{
  						graph.container.parentNode.removeChild(graph.container);
  					}
  		   		}
  		   		catch (e)
  		   		{
  		   			if (error != null)
  		   			{
  		   				error(e);
  		   			}
  		   		}
  		   	}), null, null, null, mxUtils.bind(this, function(e)
  		   	{
  		   		if (error != null)
  	   			{
  	   				error(e);
  	   			}
  		   	}), null, null, scale, null, graph.shadowVisible, null, graph, border);
  		}
  		catch (e)
  		{
  			if (error != null)
  			{
  				error(e);
  			}
  		}
  	}
  
  	/**
  	 * Returns the SVG of the diagram with embedded XML. If a callback function is
  	 * used, the images are converted to data URIs.
  	 */
  	EditorUi.prototype.getEmbeddedSvg = function(xml, graph, url, noHeader, callback, ignoreSelection,
  		redirect, embedImages, background, scale, border, shadow, keepTheme)
  	{
  		embedImages = (embedImages != null) ? embedImages : true;
  		var bg = (background != null) ? background : graph.background;
  		
  		if (bg == mxConstants.NONE)
  		{
  			bg = null;
  		}
  
  		// Sets or disables alternate text for foreignObjects. Disabling is needed
  		// because PhantomJS seems to ignore switch statements and paint all text.
  		var svgRoot = graph.getSvg(bg, scale, border, null, null, ignoreSelection,
  			null, null, null, graph.shadowVisible || shadow, null, keepTheme);
  		
  		if (graph.shadowVisible || shadow)
  		{
  			graph.addSvgShadow(svgRoot);
  		}
  
  		if (xml != null)
  		{
  			svgRoot.setAttribute('content', xml);
  		}
  		
  		if (url != null)
  		{
  			svgRoot.setAttribute('resource', url);
  		}
  		
  		// LATER: Click on SVG content to start editing
  //		if (redirect != null)
  //		{
  //			// TODO: Ignore anchor tag source for click event
  //			svgRoot.setAttribute('style', 'cursor:pointer;');
  //			svgRoot.setAttribute('onclick', 'window.location.href=\'' + redirect + '\';'); 
  //		}
  
  		if (callback != null)
  		{
  			this.embedFonts(svgRoot, mxUtils.bind(this, function(svgRoot)
  			{
  				if (embedImages)
  				{
  					this.editor.convertImages(svgRoot, mxUtils.bind(this, function(svgRoot)
  					{
  						callback(((!noHeader) ? '<?xml version="1.0" encoding="UTF-8"?>\n' +
  							'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' : '') +
  							mxUtils.getXml(svgRoot));
  					}));
  				}
  				else
  				{
  					callback(((!noHeader) ? '<?xml version="1.0" encoding="UTF-8"?>\n' +
  						'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' : '') +
  						mxUtils.getXml(svgRoot));
  				}
  			}));
  		}
  		else
  		{
  			return ((!noHeader) ? '<?xml version="1.0" encoding="UTF-8"?>\n' +
  				'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' : '') +
  				mxUtils.getXml(svgRoot);
  		}
  	};
  	
  	/**
  	 * Embeds font CSS as data URIs into the given svgRoot.
  	 */
  	EditorUi.prototype.embedFonts = function(svgRoot, callback)
  	{
  		this.editor.loadFonts(mxUtils.bind(this, function()
  		{
  			try
  			{
  				if (this.editor.resolvedFontCss != null)
  				{
  					this.editor.addFontCss(svgRoot, this.editor.resolvedFontCss);
  				}
  				
  				this.editor.embedExtFonts(mxUtils.bind(this, function(extFontsEmbeddedCss)
  				{
  					try
  					{
  						if (extFontsEmbeddedCss != null)
  						{
  							this.editor.addFontCss(svgRoot, extFontsEmbeddedCss);
  						}
  						
  						callback(svgRoot);
  					}
  					catch (e)
  					{
  						callback(svgRoot);
  					}
  				}));
  			}
  			catch (e)
  			{
  				callback(svgRoot);
  			}
  		}));
  	};
  	
  	/**
  	 *
  	 */
  	EditorUi.prototype.exportImage = function(scale, transparentBackground, ignoreSelection, addShadow,
  		editable, border, noCrop, currentPage, format, grid, dpi, keepTheme, exportType)
  	{
  		format = (format != null) ? format : 'png';
  		
  		if (this.spinner.spin(document.body, mxResources.get('exporting')))
  		{
  			var selectionEmpty = this.editor.graph.isSelectionEmpty();
  			ignoreSelection = (ignoreSelection != null) ? ignoreSelection : selectionEmpty;
  			
  			// Caches images
  			if (this.thumbImageCache == null)
  			{
  				this.thumbImageCache = new Object();
  			}
  			
  			try
  			{
  			   	this.editor.exportToCanvas(mxUtils.bind(this, function(canvas)
  			   	{
  			   		this.spinner.stop();
  			   		
  			   		try
  			   		{
  			   			this.saveCanvas(canvas, (editable) ? this.getFileData(true, null,
  			   				null, null, ignoreSelection, currentPage) : null,
  			   				format, (this.pages == null || this.pages.length == 0), dpi);
  			   		}
  			   		catch (e)
  			   		{
  			   			this.handleError(e);
  			   		}
  			   	}), null, this.thumbImageCache, null, mxUtils.bind(this, function(e)
  			   	{
  			   		this.spinner.stop();
  			   		this.handleError(e);
  				}), null, ignoreSelection, scale || 1, transparentBackground, addShadow,
  					null, null, border, noCrop, grid, keepTheme, exportType);
  			}
  			catch (e)
  			{
  				this.spinner.stop();
  				this.handleError(e);
  			}
  		}
  	};
  
  	/**
  	/**
  	 * Returns true if the given URL is known to have CORS headers.
  	 */
  	EditorUi.prototype.isCorsEnabledForUrl = function(url)
  	{
  		return this.editor.isCorsEnabledForUrl(url);
  	};
  
  	/**
  	 * Handling drag and drop and import.
  	 */
  
  	/**
  	 * Imports the given XML into the existing diagram.
  	 */
  	EditorUi.prototype.importXml = function(xml, dx, dy, crop, noErrorHandling, addNewPage, applyDefaultStyles)
  	{
  		dx = (dx != null) ? dx : 0;
  		dy = (dy != null) ? dy : 0;
  		var cells = []
  		
  		try
  		{
  			var graph = this.editor.graph;
  	
  			if (xml != null && xml.length > 0)
  			{
  				// Adds pages
  				graph.model.beginUpdate();
  				try
  				{
  					var doc = mxUtils.parseXml(xml);
  					var mapping = {};
  					
  					// Checks for mxfile with multiple pages
  					var node = this.editor.extractGraphModel(doc.documentElement, this.pages != null);
  
  					if (node != null && node.nodeName == 'mxfile' && this.pages != null)
  					{
  						var diagrams = node.getElementsByTagName('diagram');
  
  						if (diagrams.length == 1 && !addNewPage)
  						{
  							node = Editor.parseDiagramNode(diagrams[0]);
  							
  							if (this.currentPage != null)
  							{
  								mapping[diagrams[0].getAttribute('id')] = this.currentPage.getId();
  								
  								// Renames page if diagram has one blank page with default name
  								if (this.pages != null && this.pages.length == 1 &&
  									this.isDiagramEmpty() && this.currentPage.getName() ==
  									mxResources.get('pageWithNumber', [1]))
  								{
  									var name = diagrams[0].getAttribute('name');
  									
  									if (name != null && name != '')
  									{
  										this.editor.graph.model.execute(new RenamePage(
  											this, this.currentPage, name));
  									}
  								}
  							}
  						}
  						else if (diagrams.length > 0)
  						{
  							var pages = [];
  							var i0 = 0;
  							
  							// Adds first page to current page if current page is only page and empty
  							if (this.pages != null && this.pages.length == 1 && this.isDiagramEmpty())
  							{
  								mapping[diagrams[0].getAttribute('id')] = this.pages[0].getId();
  								node = Editor.parseDiagramNode(diagrams[0]);
  								crop = false;
  								i0 = 1;
  							}
  
  							for (var i = i0; i < diagrams.length; i++)
  							{
  								// Imported pages must obtain a new ID and
  								// all links to pages must be updated below
  								var oldId = diagrams[i].getAttribute('id')
  								diagrams[i].removeAttribute('id');
  								
  								var page = this.updatePageRoot(new DiagramPage(diagrams[i]));
  								mapping[oldId] = diagrams[i].getAttribute('id');
  								var index = this.pages.length;
  								
  								// Checks for invalid page names
  								if (page.getName() == null)
  								{
  									page.setName(mxResources.get('pageWithNumber', [index + 1]));
  								}
  								
  								graph.model.execute(new ChangePage(this, page, page, index, true));
  								pages.push(page);
  							}
  							
  							this.updatePageLinks(mapping, pages);
  						}
  					}
  					
  					if (node != null && node.nodeName === 'mxGraphModel')
  					{
  						cells = graph.importGraphModel(node, dx, dy, crop);
  						
  						if (cells != null)
  						{
  							for (var i = 0; i < cells.length; i++)
  							{
  								this.updatePageLinksForCell(mapping, cells[i]);
  							}
  						}
  					}
  					
  					if (applyDefaultStyles)
  					{
  						this.insertHandler(cells, null, null,
  							Graph.prototype.defaultVertexStyle,
  							Graph.prototype.defaultEdgeStyle,
  							true, true);
  					}
  				}
  				finally
  				{
  					graph.model.endUpdate();
  				}
  			}
  		}
  		catch (e)
  		{
  			if (!noErrorHandling)
  			{
  				this.handleError(e);
  			}
  			else
  			{
  				throw e;
  			}
  		}
  		
  		return cells;
  	};
  	
  	/**
  	 * Updates links to pages in shapes and labels.
  	 */
  	EditorUi.prototype.updatePageLinks = function(mapping, pages)
  	{
  		for (var i = 0; i < pages.length; i++)
  		{
  			this.updatePageLinksForCell(mapping, pages[i].root);
  		}
  	};
  	
  	/**
  	 * Updates links to pages in shapes and labels.
  	 */
  	EditorUi.prototype.updatePageLinksForCell = function(mapping, cell)
  	{
  		var temp = document.createElement('div');
  		var graph = this.editor.graph;
  		var href = graph.getLinkForCell(cell);
  
  		if (href != null)
  		{
  			graph.setLinkForCell(cell, this.updatePageLink(mapping, href));
  		}
  		
  		if (graph.isHtmlLabel(cell))
  		{
  			temp.innerHTML = graph.sanitizeHtml(graph.getLabel(cell));
  			var links = temp.getElementsByTagName('a');
  			var changed = false;
  			
  			for (var i = 0; i < links.length; i++)
  			{
  				href = links[i].getAttribute('href');
  				
  				if (href != null)
  				{
  					links[i].setAttribute('href', this.updatePageLink(mapping, href));
  					changed = true;
  				}
  			}
  			
  			if (changed)
  			{
  				graph.labelChanged(cell, temp.innerHTML);
  			}
  		}
  		
  		for (var i = 0; i < graph.model.getChildCount(cell); i++)
  		{
  			this.updatePageLinksForCell(mapping, graph.model.getChildAt(cell, i));
  		}
  	};
  
  	/**
  	 * Updates links to pages in shapes and labels.
  	 */
  	EditorUi.prototype.updatePageLink = function(mapping, href)
  	{
  		if (href.substring(0, 13) == 'data:page/id,')
  		{
  			var newId = mapping[href.substring(href.indexOf(',') + 1)];
  			href = (newId != null) ? 'data:page/id,' + newId : null;
  		}
  		else if (href.substring(0, 17) == 'data:action/json,')
  		{
  			try
  			{
  				var link = JSON.parse(href.substring(17));
  
  				if (link.actions != null)
  				{
  					for (var i = 0; i < link.actions.length; i++)
  					{
  						var action = link.actions[i];
  						
  						if (action.open != null && action.open.substring(0, 13) == 'data:page/id,')
  						{
  							var oldId = action.open.substring(action.open.indexOf(',') + 1);
  							var newId = mapping[oldId];
  							
  							if (newId != null)
  							{
  								action.open = 'data:page/id,' + newId;
  							}
  							else if (this.getPageById(oldId) == null)
  							{
  								delete action.open;
  							}
  						}
  					}
  					
  					href = 'data:action/json,' + JSON.stringify(link);
  				}
  			}
  			catch (e)
  			{
  				// Ignore
  			}
  		}
  		
  		return href;
  	};
  	
  	/**
  	 * Returns true for VSD, VDX and VSS, VSX files.
  	 */
  	EditorUi.prototype.isRemoteVisioFormat = function(filename)
  	{
  		return /(\.v(sd|dx))($|\?)/i.test(filename) || /(\.vs(s|x))($|\?)/i.test(filename);
  	};
  	
  	/**
  	 * Imports the given Visio file
  	 */
  	EditorUi.prototype.importVisio = function(file, done, onerror, filename)
  	{
  		//A reduced version of this code is used in conf/jira plugins, review that code whenever this function is changed
  		filename = (filename != null) ? filename : file.name; 
  
  		onerror = (onerror != null) ? onerror : mxUtils.bind(this, function(e)
  		{
  			this.handleError(e);
  		});
  		
  		var delayed = mxUtils.bind(this, function()
  		{
  			this.loadingExtensions = false;
  			
  			if (this.doImportVisio)
  			{
  				var remote = this.isRemoteVisioFormat(filename);
  				
  				try
  				{
  					var ext = 'UNKNOWN-VISIO';
  					var dot = filename.lastIndexOf('.');
  					
  					if (dot >= 0 && dot < filename.length)
  					{
  						ext = filename.substring(dot + 1).toUpperCase();
  					}
  					else
  					{
  						var slash = filename.lastIndexOf('/');
  						
  						if (slash >= 0 && slash < filename.length)
  						{
  							filename = filename.substring(slash + 1);
  						}
  					}
  					
  					EditorUi.logEvent({category: ext + '-MS-IMPORT-FILE',
  						action: 'filename_' + filename,
  						label: (remote) ? 'remote' : 'local'});
  				}
  				catch (e)
  				{
  					// ignore
  				}
  				
  				if (remote) 
  				{
  					if (VSD_CONVERT_URL != null && !this.isOffline())
  					{
  						var formData = new FormData();
  						formData.append('file1', file, filename);
  	
  						var xhr = new XMLHttpRequest();
  						xhr.open('POST', VSD_CONVERT_URL + (/(\.vss|\.vsx)$/.test(filename)? '?stencil=1' : ''));
  						xhr.responseType = 'blob';
  						this.addRemoteServiceSecurityCheck(xhr);
  						
  						xhr.onreadystatechange = mxUtils.bind(this, function()
  						{
  							if (xhr.readyState == 4)
  							{	
  								if (xhr.status >= 200 && xhr.status <= 299)
  								{
  									try
  									{
  										var resp = xhr.response;
  
  										if (resp.type == 'text/xml')
  										{
  											var reader = new FileReader();
  											
  											reader.onload = mxUtils.bind(this, function(e)
  											{
  												try
  												{
  													done(e.target.result);
  												}
  												catch (e)
  												{
  													onerror({message: mxResources.get('errorLoadingFile')});
  												}
  											});
  					
  											reader.readAsText(resp);
  										}
  										else
  										{
  											this.doImportVisio(resp, done, onerror, filename);
  										}
  									}
  									catch (e)
  									{
  										onerror(e);
  									}
  								}
  								else
  								{
  									try
  									{
  										if (xhr.responseType == '' || xhr.responseType == 'text')
  										{
  											onerror({message: xhr.responseText});
  										}
  										else
  										{
  											var reader = new FileReader();
  											reader.onload = function() 
  											{
  												onerror({message: JSON.parse(reader.result).Message});
  											}
  											reader.readAsText(xhr.response);
  										}
  									}
  									catch(e)
  									{
  										onerror({});
  									}
  								}
  							}
  						});
  						
  						xhr.send(formData);
  					}
  					else
  					{
  						onerror({message: this.getServiceName() == 'conf'? mxResources.get('vsdNoConfig') : mxResources.get('serviceUnavailableOrBlocked')});
  					}
  				}
  				else
  				{
  					try
  					{
  						this.doImportVisio(file, done, onerror, filename);
  					}
  					catch (e)
  					{
  						onerror(e);
  					}
  				}
  			}
  			else
  			{
  				this.spinner.stop();
  				this.handleError({message: mxResources.get('serviceUnavailableOrBlocked')});
  			}
  		});
  		
  		if (!this.doImportVisio && !this.loadingExtensions && !this.isOffline(true))
  		{
  			this.loadingExtensions = true;
  			mxscript('js/extensions.min.js', delayed);
  		}
  		else
  		{
  			delayed();
  		}
  	};
  
  	/**
  	 * Imports the given GraphML (yEd) file
  	 */
  	EditorUi.prototype.importGraphML = function(xmlData, done, onerror)
  	{
  		onerror = (onerror != null) ? onerror : mxUtils.bind(this, function(e)
  		{
  			this.handleError(e);
  		});
  		
  		var delayed = mxUtils.bind(this, function()
  		{
  			this.loadingExtensions = false;
  			
  			if (this.doImportGraphML)
  			{
  				
  				try
  				{
  					this.doImportGraphML(xmlData, done, onerror);
  				}
  				catch (e)
  				{
  					onerror(e);
  				}
  			}
  			else
  			{
  				this.spinner.stop();
  				this.handleError({message: mxResources.get('serviceUnavailableOrBlocked')});
  			}
  		});
  		
  		if (!this.doImportGraphML && !this.loadingExtensions && !this.isOffline(true))
  		{
  			this.loadingExtensions = true;
  			mxscript('js/extensions.min.js', delayed);
  		}
  		else
  		{
  			delayed();
  		}
  	};	
  	
  	/**
  	 * Export the diagram to VSDX
  	 */
  	EditorUi.prototype.exportVisio = function(currentPage)
  	{
  		var delayed = mxUtils.bind(this, function()
  		{
  			this.loadingExtensions = false;
  			
  			if (typeof VsdxExport  !== 'undefined')
  			{
  				try
  				{
  					var expSuccess = new VsdxExport(this).exportCurrentDiagrams(currentPage);
  					
  					if (!expSuccess)
  					{
  						this.handleError({message: mxResources.get('unknownError')});
  					}
  				}
  				catch (e)
  				{
  					this.handleError(e);
  				}
  			}
  			else
  			{
  				this.spinner.stop();
  				this.handleError({message: mxResources.get('serviceUnavailableOrBlocked')});
  			}
  		});
  		
  		if (typeof VsdxExport === 'undefined' && !this.loadingExtensions && !this.isOffline(true))
  		{
  			this.loadingExtensions = true;
  			mxscript('js/extensions.min.js', delayed);
  		}
  		else
  		{
  			delayed();
  		}
  	};
  	
  	/**
  	 * Imports the given Lucidchart data.
  	 */
  	EditorUi.prototype.convertLucidChart = function(data, success, error)
  	{
  		var delayed = mxUtils.bind(this, function()
  		{
  			this.loadingExtensions = false;
  			
  			// Checks for signature method
  			if (typeof window.LucidImporter !== 'undefined')
  			{
  				try
  				{
  					EditorUi.logEvent({category: 'LUCIDCHART-IMPORT-FILE',
  						action: 'size_' + data.length});
  					EditorUi.debug('convertLucidChart', data);
  				}
  				catch (e)
  				{
  					// ignore
  				}
  				
  				try
  				{
  					success(LucidImporter.importState(JSON.parse(data)));
  				}
  				catch (e)
  				{
  					if (window.console != null)
  					{
  						console.error(e);
  					}
  					
  					error(e);
  				}
  			}
  			else
  			{
  				error({message: mxResources.get('serviceUnavailableOrBlocked')});
  			}
  		});
  		
  		if (typeof window.LucidImporter === 'undefined' &&
  			!this.loadingExtensions && !this.isOffline(true))
  		{
  			this.loadingExtensions = true;
  			
  			if (urlParams['dev'] == '1')
  			{
  				//Lucid org chart requires orgChart layout, in production, it is part of the extemsions.min.js
  				mxscript('js/diagramly/Extensions.js', function()
  				{
  					mxscript('js/orgchart/bridge.min.js', function()
  					{
  						mxscript('js/orgchart/bridge.collections.min.js', function()
  						{
  							mxscript('js/orgchart/OrgChart.Layout.min.js', function()
  							{
  								mxscript('js/orgchart/mxOrgChartLayout.js', delayed);											
  							});		
  						});	
  					});
  				});
  			}
  			else
  			{
  				mxscript('js/extensions.min.js', delayed);
  			}
  		}
  		else
  		{
  			// Async needed for selection
  			window.setTimeout(delayed, 0);
  		}
  	};
  
  	/**
  	 * Generates a Mermaid image.
  	 */
  	EditorUi.prototype.generateMermaidImage = function(data, config, success, error)
  	{
  		var ui = this;
  		
  		var delayed = function()
  		{
  			try
  			{
  				this.loadingMermaid = false;
  				
  				config = (config != null) ? config : EditorUi.defaultMermaidConfig;
  				config.securityLevel = 'strict';
  				config.startOnLoad = false;
  				
  				mermaid.mermaidAPI.initialize(config);
  	    		
  				mermaid.mermaidAPI.render('geMermaidOutput-' + new Date().getTime(), data, function(svg)
  				{
  					try
  					{
  						// Workaround for namespace errors in SVG output for IE
  						if (mxClient.IS_IE || mxClient.IS_IE11)
  						{
  							svg = svg.replace(/ xmlns:\S*="http:\/\/www.w3.org\/XML\/1998\/namespace"/g, '').
  								replace(/ (NS xml|\S*):space="preserve"/g, ' xml:space="preserve"');
  						}
  						
  						var doc = mxUtils.parseXml(svg);
  						var svgs = doc.getElementsByTagName('svg');
  
  						if (svgs.length > 0)
  						{
  							var w = parseFloat(svgs[0].getAttribute('width'));
  							var h = parseFloat(svgs[0].getAttribute('height'));
  							
  							if (isNaN(w) || isNaN(h))
  							{
  								try
  								{
  									var viewBox = svgs[0].getAttribute('viewBox').split(/\s+/);
  									w = parseFloat(viewBox[2]);
  									h = parseFloat(viewBox[3]);
  								}
  								catch(e)
  								{
  									//Any size such that it shows up
  									w = w || 100;
  									h = h || 100;									
  								}
  							}
  							
  							success(ui.convertDataUri(Editor.createSvgDataUri(svg)), w, h);
  						}
  						else
  						{
  							error({message: mxResources.get('invalidInput')});
  						}
  					}
  					catch (e)
  					{
  						error(e);
  					}
  				});
  			}
  			catch (e)
  			{
  				error(e);
  			}
  		};
  
  		if (typeof mermaid === 'undefined' && !this.loadingMermaid && !this.isOffline(true))
  		{
  			this.loadingMermaid = true;
  			
  			if (urlParams['dev'] == '1')
  			{
  				mxscript('js/mermaid/mermaid.min.js', delayed);
  			}
  			else
  			{
  				mxscript('js/extensions.min.js', delayed);
  			}
  		}
  		else
  		{
  			delayed();
  		}
  	};
  	
  	/**
  	 * Generates a plant UML image. Possible types are svg, png and txt.
  	 */
  	EditorUi.prototype.generatePlantUmlImage = function(data, type, success, error)
  	{	
  		function encode64(data)
  		{
  			r = "";
  			
  			for (i = 0; i < data.length; i += 3)
  			{
  				if (i + 2 == data.length)
  				{
  					r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), 0);
  				}
  				else if (i + 1 == data.length)
  				{
  					r += append3bytes(data.charCodeAt(i), 0, 0);
  				}
  				else
  				{
  					r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1),
  						data.charCodeAt(i + 2));
  				}
  			}
  			
  			return r;
  		}
  
  		function append3bytes(b1, b2, b3)
  		{
  			c1 = b1 >> 2;
  			c2 = ((b1 & 0x3) << 4) | (b2 >> 4);
  			c3 = ((b2 & 0xF) << 2) | (b3 >> 6);
  			c4 = b3 & 0x3F;
  			r = "";
  			r += encode6bit(c1 & 0x3F);
  			r += encode6bit(c2 & 0x3F);
  			r += encode6bit(c3 & 0x3F);
  			r += encode6bit(c4 & 0x3F);
  			
  			return r;
  		}
  
  		function encode6bit(b)
  		{
  			if (b < 10)
  			{
  				return String.fromCharCode(48 + b);
  			}
  			
  			b -= 10;
  			
  			if (b < 26)
  			{
  				return String.fromCharCode(65 + b);
  			}
  			
  			b -= 26;
  			
  			if (b < 26)
  			{
  				return String.fromCharCode(97 + b);
  			}
  			
  			b -= 26;
  			
  			if (b == 0)
  			{
  				return '-';
  			}
  			
  			if (b == 1)
  			{
  				return '_';
  			}
  			
  			return '?';
  		}
  
  		// TODO: Remove unescape, use btoa for compatibility with graph.compress
  		function compress(s)
  		{
  			return encode64(Graph.arrayBufferToString(pako.deflateRaw(s)));
  		};
  
  		var plantUmlServerUrl = (type == 'txt') ? PLANT_URL + '/txt/' :
  			((type == 'png') ? PLANT_URL + '/png/' : PLANT_URL + '/svg/');
  		
  		var xhr = new XMLHttpRequest();
  		xhr.open('GET', plantUmlServerUrl + compress(data), true);
  
  		if (type != 'txt')
  		{
  			xhr.responseType = 'blob';
  		}
  
  		xhr.onload = function(e)
  		{
  			if (this.status >= 200 && this.status < 300)
  			{
  				if (type == 'txt')
  				{
  					success(this.response);
  				}
  				else
  				{
  					var reader = new FileReader();
  					reader.readAsDataURL(this.response);
  
  					reader.onloadend = function(e)
  					{
  						var img = new Image();
  
  						img.onload = function()
  						{
  							try
  							{
  								var w = img.width;
  								var h = img.height;
  	
  								// Workaround for 0 image size in IE11
  								if (w == 0 && h == 0)
  								{
  									var data = reader.result;
  									var comma = data.indexOf(',');
  									var svgText = decodeURIComponent(escape(atob(data.substring(comma + 1))));
  									var root = mxUtils.parseXml(svgText);
  									var svgs = root.getElementsByTagName('svg');
  	
  									if (svgs.length > 0)
  									{
  										w = parseFloat(svgs[0].getAttribute('width'));
  										h = parseFloat(svgs[0].getAttribute('height'));
  									}
  								}
  								
  								success(reader.result, w, h);
  							}
  							catch (e)
  							{
  								error(e);
  							}
  						};
  
  						img.src = reader.result;
  					};
  
  					reader.onerror = function(e)
  					{
  						error(e);
  					};
  				}
  			}
  			else
  			{
  				error(e);
  			}
  		};
  
  		xhr.onerror = function(e)
  		{
  			error(e);
  		};
  
  		xhr.send();
  	};
  
  	/**
  	 * Inserts the given text as a preformatted HTML text.
  	 */
  	EditorUi.prototype.insertAsPreText = function(text, x, y)
  	{
  		var graph = this.editor.graph;
  		var cell = null;
  		
  		graph.getModel().beginUpdate();
  		try
  		{
  			cell = graph.insertVertex(null, null, '<pre>' + text + '</pre>',
  				x, y, 1, 1, 'text;html=1;align=left;verticalAlign=top;');
  			graph.updateCellSize(cell, true);
  		}
  		finally
  		{
  			graph.getModel().endUpdate();
  		}
  
  		return cell;
  	};
  
  	/**
  	 * Imports the given XML into the existing diagram.
  	 * TODO: Make this function asynchronous
  	 */
  	EditorUi.prototype.insertTextAt = function(text, dx, dy, html, asImage, crop, resizeImages, addNewPage)
  	{
  		crop = (crop != null) ? crop : true;
  		resizeImages = (resizeImages != null) ? resizeImages : true;
  		
  		// Handles special case for Gliffy data which requires async server-side for parsing
  		if (text != null)
  		{
  			if (Graph.fileSupport && !this.isOffline() && new XMLHttpRequest().upload && this.isRemoteFileFormat(text))
  			{
  				// Fixes possible parsing problems with ASCII 160 (non-breaking space)
  				this.parseFile(new Blob([text.replace(/\s+/g,' ')], {type: 'application/octet-stream'}), mxUtils.bind(this, function(xhr)
  				{
  					if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status <= 299)
  					{
  						this.editor.graph.setSelectionCells(this.insertTextAt(
  							xhr.responseText, dx, dy, true));
  					}
  				}));
  				
  				// Returns empty cells array as it is aysynchronous
  				return [];
  			}
  			// Handles special case of data URI which requires async loading for finding size
  			else if (text.substring(0, 5) == 'data:' || (!this.isOffline() &&
  				(asImage || (/\.(gif|jpg|jpeg|tiff|png|svg)$/i).test(text))))
  			{
  				var graph = this.editor.graph;
  				
  				// Checks for embedded XML in PDF
  				if (text.substring(0, 28) == 'data:application/pdf;base64,')
  	    		{
  					var xml = Editor.extractGraphModelFromPdf(text);
  					
  					if (xml != null && xml.length > 0)
  					{
  						return this.importXml(xml, dx, dy, crop, true, addNewPage);
  					}
  	    		}
  				
  				// Checks for embedded XML in PNG
  				if (text.substring(0, 22) == 'data:image/png;base64,')
  				{
  					var xml = this.extractGraphModelFromPng(text);
  					
  					if (xml != null && xml.length > 0)
  					{
  						return this.importXml(xml, dx, dy, crop, true, addNewPage);
  					}
  				}
  				
  				// Tries to extract embedded XML from SVG data URI
  				if (text.substring(0, 19) == 'data:image/svg+xml;')
  				{
  					try
  					{
  						var xml = null;
  						
  						if (text.substring(0, 26) == 'data:image/svg+xml;base64,')
  						{
  							xml = text.substring(text.indexOf(',') + 1);
  							xml = (window.atob && !mxClient.IS_SF) ? atob(xml) : Base64.decode(xml, true);
  						}
  						else
  						{
  							xml = decodeURIComponent(text.substring(text.indexOf(',') + 1));
  						}
  						
  						var result = this.importXml(xml, dx, dy, crop, true, addNewPage); 
  	
  						if (result.length > 0)
  						{
  							return result;
  						}
  					}
  					catch (e)
  					{
  						// Ignore
  					}
  				}
  				
  				this.loadImage(text, mxUtils.bind(this, function(img)
  				{
  					if (text.substring(0, 5) == 'data:')
  					{
  						this.resizeImage(img, text, mxUtils.bind(this, function(data2, w2, h2)
  	    				{
  							graph.setSelectionCell(graph.insertVertex(null, null, '', graph.snap(dx), graph.snap(dy),
  									w2, h2, 'shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;' +
  									'verticalAlign=top;aspect=fixed;imageAspect=0;image=' + this.convertDataUri(data2) + ';'));
  	    				}), resizeImages, this.maxImageSize);
  					}
  					else
  					{
  						var s = Math.min(1, Math.min(this.maxImageSize / img.width, this.maxImageSize / img.height));
  						var w = Math.round(img.width * s);
  						var h = Math.round(img.height * s);
  						
  						graph.setSelectionCell(graph.insertVertex(null, null, '', graph.snap(dx), graph.snap(dy),
  								w, h, 'shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;' +
  								'verticalAlign=top;aspect=fixed;imageAspect=0;image=' + text + ';'));
  					}
  				}), mxUtils.bind(this, function()
  				{
  					var cell = null;
  					
  					// Inserts invalid data URIs as text
  			    	graph.getModel().beginUpdate();
  			    	try
  			    	{
  						cell = graph.insertVertex(graph.getDefaultParent(), null, text,
  								graph.snap(dx), graph.snap(dy), 1, 1, 'text;' + ((html) ? 'html=1;' : ''));
  						graph.updateCellSize(cell);
  						graph.fireEvent(new mxEventObject('textInserted', 'cells', [cell]));
  			    	}
  			    	finally
  			    	{
  			    		graph.getModel().endUpdate();
  			    	}
  	
  					graph.setSelectionCell(cell);
  				}));
  				
  				return [];
  			}
  			else
  			{
  				text = Graph.zapGremlins(mxUtils.trim(text));
  			
  				if (this.isCompatibleString(text))
  				{
  					return this.importXml(text, dx, dy, crop, null, addNewPage);
  				}
  				else if (text.length > 0)
  				{
  					if (this.isLucidChartData(text))
  					{
  						this.convertLucidChart(text, mxUtils.bind(this, function(xml)
  						{
  							this.editor.graph.setSelectionCells(
  								this.importXml(xml, dx, dy, crop,
  								null, addNewPage));
  						}), mxUtils.bind(this, function(e)
  						{
  							this.handleError(e);
  						}));
  					}
  					else
  					{
  						var graph = this.editor.graph;
  						var cell = null;
  						
  				    	graph.getModel().beginUpdate();
  				    	try
  				    	{
  				    		// Fires cellsInserted to apply the current style to the inserted text.
  				    		// This requires the value to be empty when the event is fired.
  				    		cell = graph.insertVertex(graph.getDefaultParent(), null, '',
  								graph.snap(dx), graph.snap(dy), 1, 1, 'text;whiteSpace=wrap;' + ((html) ? 'html=1;' : ''));
  				    		graph.fireEvent(new mxEventObject('textInserted', 'cells', [cell]));
  						
  				    		// Single tag is converted
  				    		if (text.charAt(0) == '<' && text.indexOf('>') == text.length - 1)
  				    		{
  				    			text = mxUtils.htmlEntities(text);
  				    		}
  
  				    		//TODO Refuse unsupported file types early as at this stage a lot of processing has beed done and time is wasted. 
  				    		//		For example, 5 MB PDF files is processed and then only 0.5 MB of meaningless text is added!
  				    		//Limit labels to maxTextBytes
  				    		if (text.length > this.maxTextBytes)
  			    			{
  				    			text = text.substring(0, this.maxTextBytes) + '...';
  			    			}
  				    		
  							// Apply value and updates the cell size to fit the text block
  							cell.value = text;
  							graph.updateCellSize(cell);
  							
  							// Adds wrapping for large text blocks
  							if (this.maxTextWidth > 0 && cell.geometry.width > this.maxTextWidth)
  							{
  								var size = graph.getPreferredSizeForCell(cell, this.maxTextWidth);
  								cell.geometry.width = size.width;
  								cell.geometry.height = size.height;
  							}
  							
  							// See https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
  							if (Graph.isLink(cell.value))
  							{
  								graph.setLinkForCell(cell, cell.value);
  							}
  							
  							// Adds spacing
  							cell.geometry.width += graph.gridSize;
  							cell.geometry.height += graph.gridSize;
  				    	}
  				    	finally
  				    	{
  				    		graph.getModel().endUpdate();
  				    	}
  						
  						return [cell];
  					}
  				}
  			}
  		}
  		
  		return [];
  	};
  
  	/**
  	 * Formats the given file size.
  	 */
  	EditorUi.prototype.formatFileSize = function(size)
  	{
  	    var units = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
  		var i = -1;
  		
  	    do
  	    {
  	    	size = size / 1024;
  	        i++;
  	    } while (size > 1024);
  
  	    return Math.max(size, 0.1).toFixed(1) + units[i];
  	};
  
  	/**
  	 * Imports the given XML into the existing diagram.
  	 */
  	EditorUi.prototype.convertDataUri = function(uri)
  	{
  		// Handles special case of data URI which needs to be rewritten
  		// to be used in a cell style to remove the semicolon
  		if (uri.substring(0, 5) == 'data:')
  		{
  			var semi = uri.indexOf(';');
  			
  			if (semi > 0)
  			{
  				uri = uri.substring(0, semi) + uri.substring(uri.indexOf(',', semi + 1));
  			}
  		}
  		
  		return uri;
  	};
  	
  	/**
  	 * Returns true for Gliffy data.
  	 */
  	EditorUi.prototype.isRemoteFileFormat = function(data, filename)
  	{
  		return /(\"contentType\":\s*\"application\/gliffy\+json\")/.test(data);
  	};
  	
  	/**
  	 * Returns true for Gliffy
  	 */
  	EditorUi.prototype.isLucidChartData = function(data)
  	{
  		return data != null && (data.substring(0, 26) ==
  			'{"state":"{\\"Properties\\":' ||
  			data.substring(0, 14) == '{"Properties":');
  	};
  
  	/**
  	 * Imports a local file from the device or local storage.
  	 */
  	EditorUi.prototype.importLocalFile = function(device, noSplash)
  	{
  		if (device && Graph.fileSupport)
  		{
  			if (this.importFileInputElt == null) 
  			{
  				var input = document.createElement('input');
  				input.setAttribute('type', 'file');
  				
  				mxEvent.addListener(input, 'change', mxUtils.bind(this, function()
  				{
  					if (input.files != null)
  					{
  						// Using null for position will disable crop of input file
  						this.importFiles(input.files, null, null, this.maxImageSize);
  						
  			    		// Resets input to force change event for same file (type reset required for IE)
  						input.type = '';
  						input.type = 'file';
  			    		input.value = '';
  					}
  				}));
  				
  				input.style.display = 'none';
  				document.body.appendChild(input);
  				this.importFileInputElt = input;
  			}
  			
  			this.importFileInputElt.click();
  		}
  		else
  		{
  			window.openNew = false;
  			window.openKey = 'import';
  							
  			window.listBrowserFiles = mxUtils.bind(this, function(success, error) 
  			{
  				StorageFile.listFiles(this, 'F', success, error);
  			});
  			
  			window.openBrowserFile = mxUtils.bind(this, function(title, success, error)
  			{
  				StorageFile.getFileContent(this, title, success, error);
  			});
  			
  			window.deleteBrowserFile = mxUtils.bind(this, function(title, success, error)
  			{
  				StorageFile.deleteFile(this, title, success, error);
  			});
  
  			if (!noSplash)
  			{
  				var prevValue = Editor.useLocalStorage;
  				Editor.useLocalStorage = !device;
  			}
  
  			// Closes dialog after open
  			window.openFile = new OpenFile(mxUtils.bind(this, function(cancel)
  			{
  				this.hideDialog(cancel);
  			}));
  			
  			window.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
  			{
  				if (filename != null && Graph.fileSupport && /(\.v(dx|sdx?))($|\?)/i.test(filename))
  				{
  					// "Not a UTF 8 file" when opening VSDX in IE so this is never called
  					var file = new Blob([xml], {type: 'application/octet-stream'})
  					
  					this.importVisio(file, mxUtils.bind(this, function(xml)
  					{
  						this.importXml(xml, 0, 0, true);
  					}), null, filename);
  				}
  				else
  				{				
  					this.editor.graph.setSelectionCells(this.importXml(xml, 0, 0, true));
  				}
  			}));
  
  			// Removes openFile if dialog is closed
  			this.showDialog(new OpenDialog(this).container,  (Editor.useLocalStorage) ? 640 : 360,
  				(Editor.useLocalStorage) ? 480 : 220, true, true, function()
  			{
  				window.openFile = null;
  			});
  			
  			// Extends dialog close to show splash screen
  			if (!noSplash)
  			{
  				var dlg = this.dialog;
  				var dlgClose = dlg.close;
  				
  				this.dialog.close = mxUtils.bind(this, function(cancel)
  				{
  					Editor.useLocalStorage = prevValue;
  					dlgClose.apply(dlg, arguments);
  					
  					if (cancel && this.getCurrentFile() == null && urlParams['embed'] != '1')
  					{
  						this.showSplash();
  					}
  				});
  			}
  		}
  	};
  
  	/**
  	 * Imports the given zip file.
  	 */
  	EditorUi.prototype.importZipFile = function(file, success, onerror)
  	{
  		var ui = this;
  		
  		var delayed = mxUtils.bind(this, function()
  		{
  			this.loadingExtensions = false;
  			
  			if (typeof JSZip  !== 'undefined')
  			{
  				JSZip.loadAsync(file)                                   
  		        .then(function(zip) 
  		        {
  		        	if (Object.keys(zip.files).length == 0)
  		        	{
  		        		onerror();
  		        	}
  		        	else
  		        	{
  		        		var gliffyLatestVer = {version: 0};
  		        		var drawioFound = false;
  		        		
  		                zip.forEach(function (relativePath, zipEntry) 
  		                {
  		                	var name = zipEntry.name.toLowerCase();
  							
  		                    if (name == 'diagram/diagram.xml') //draw.io zip format has the latest diagram version at diagram/diagram.xml
  		                    {
  		                    	drawioFound = true;
  		                    	
  			                    zipEntry.async("string").then(function(str){
  			                    	if (str.indexOf('<mxfile ') == 0)
  			                    	{
  			                    		success(str);
  			                    	}
  			                    	else
  		                    		{
  			                    		onerror();
  		                    		}
  			                    });
  		                    }
  		                    else if (name.indexOf('versions/') == 0) //Gliffy zip format has the versions inside versions folder
  		                   	{
  		                    	var version = parseInt(name.substr(9)); //9 is the length of versions/
  		                    	
  		                    	if (version > gliffyLatestVer.version)
  		                    	{
  		                    		gliffyLatestVer = {version: version, zipEntry: zipEntry}
  		                    	}
  		                   	}
  		                });
  		                
  		                if (gliffyLatestVer.version > 0)
  		            	{
  		                	gliffyLatestVer.zipEntry.async("string").then(function(data)
  		                	{
  		                		if (!ui.isOffline() && new XMLHttpRequest().upload && ui.isRemoteFileFormat(data, file.name))
  		                		{
  		                			ui.parseFile(new Blob([data], {type: 'application/octet-stream'}), mxUtils.bind(this, function(xhr)
  		                			{
  		                				if (xhr.readyState == 4)
  		                				{
  		                					if (xhr.status >= 200 && xhr.status <= 299)
  		                					{
  		                						success(xhr.responseText);
  		                					}
  		                					else
  		                					{
  		                						onerror();
  		                					}
  		                				}
  		                			}), file.name);
  		                		}
  		                		else
  		            			{
  		                			onerror();
  		            			}
  		                	});
  		            	}
  		                else if (!drawioFound)
  		            	{
  		                	onerror();
  		            	}
  		        	}
  		        }, function (e) {
  		    		onerror(e);
  		        }); 
  			}
  			else
  			{
  				onerror();
  			}
  		});
  		
  		if (typeof JSZip === 'undefined' && !this.loadingExtensions && !this.isOffline(true))
  		{
  			this.loadingExtensions = true;
  			mxscript('js/extensions.min.js', delayed);
  		}
  		else
  		{
  			delayed();
  		}
  	};
  	
  	/**
  	 * Imports the given XML into the existing diagram.
  	 */
  	EditorUi.prototype.importFile = function(data, mimeType, dx, dy, w, h, filename,
  		done, file, crop, ignoreEmbeddedXml, evt)
  	{
  		crop = (crop != null) ? crop : true;
  		var async = false;
  		var cells = null;
  
  		var handleResult = mxUtils.bind(this, function(xml)
  		{
  			var importedCells = null;
  			
  			if (xml != null && xml.substring(0, 10) == '<mxlibrary')
  			{
  				this.loadLibrary(new LocalLibrary(this, xml, filename));
  			}
  			else
  			{
  				importedCells = this.importXml(xml, dx, dy, crop, null,
  					(evt != null) ? mxEvent.isControlDown(evt) : null);
  			}
  			
  			if (done != null)
  			{
  				done(importedCells);
  			}
  		});
  		
  		if (mimeType.substring(0, 5) == 'image')
  		{
  			var containsModel = false;
  
  			if (mimeType.substring(0, 9) == 'image/png')
  			{
  				var xml = (ignoreEmbeddedXml) ? null : this.extractGraphModelFromPng(data);
  				
  				if (xml != null && xml.length > 0)
  				{
  					cells = this.importXml(xml, dx, dy, crop, null, (evt != null) ?
  						mxEvent.isControlDown(evt) : null);
  					containsModel = true;
  				}
  			}
  			
  			if (!containsModel)
  			{
  				var graph = this.editor.graph;
  				
  				// Strips encoding bit (eg. ;base64,) for cell style
  				var semi = data.indexOf(';');
  	
  				if (semi > 0)
  				{
  					data = data.substring(0, semi) + data.substring(data.indexOf(',', semi + 1));
  				}
  				
  				if (crop && graph.isGridEnabled())
  				{
  					dx = graph.snap(dx);
  					dy = graph.snap(dy);
  				}
  
  				cells = [graph.insertVertex(null, null, '', dx, dy, w, h,
  					'shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;' +
  					'verticalAlign=top;aspect=fixed;imageAspect=0;image=' + data + ';')];
  			}
  		}
  		else if (/(\.*<graphml )/.test(data)) 
          {
  			async = true;
  
  			this.importGraphML(data, handleResult);
          }
  		else if (file != null && filename != null && ((/(\.v(dx|sdx?))($|\?)/i.test(filename)) || /(\.vs(x|sx?))($|\?)/i.test(filename)))
  		{
  			//  LATER: done and async are a hack before making this asynchronous
  			async = true;
  
  			this.importVisio(file, handleResult);
  		}
  		else if (!this.isOffline() && new XMLHttpRequest().upload && this.isRemoteFileFormat(data, filename))
  		{
  			//  LATER: done and async are a hack before making this asynchronous
  			async = true;
  
  			// Returns empty cells array as it is aysynchronous
  			this.parseFile((file != null) ? file : new Blob([data], {type: 'application/octet-stream'}), mxUtils.bind(this, function(xhr)
  			{
  				if (xhr.readyState == 4)
  				{
  					if (xhr.status >= 200 && xhr.status <= 299)
  					{
  						handleResult(xhr.responseText);
  					}
  					else if (done != null)
  					{
  						done(null);
  					}
  				}
  			}), filename);
  		}
  		else if (data.indexOf('PK') == 0 && file != null)
  		{
  			async = true;
  			
  			this.importZipFile(file, handleResult, mxUtils.bind(this, function()
  			{
  				//If importing as a zip file failed, just insert as text
  				cells = this.insertTextAt(this.validateFileData(data), dx, dy, true, null, crop);
  				done(cells);
  			}));
  		}
  		else if (!/(\.v(sd|dx))($|\?)/i.test(filename) && !/(\.vs(s|x))($|\?)/i.test(filename))
  		{
  			cells = this.insertTextAt(this.validateFileData(data), dx, dy, true,
  				null, crop, null, (evt != null) ? mxEvent.isControlDown(evt) : null);
  		}
  		
  		if (!async && done != null)
  		{
  			done(cells);
  		}
  		
  		return cells;
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.importFiles = function(files, x, y, maxSize, fn, resultFn, filterFn, barrierFn,
  		resizeDialog, maxBytes, resampleThreshold, ignoreEmbeddedXml, evt)
  	{
  		maxSize = (maxSize != null) ? maxSize : this.maxImageSize;
  		maxBytes = (maxBytes != null) ? maxBytes : this.maxImageBytes;
  		
  		var crop = x != null && y != null;
  		var resizeImages = true;
  		x = (x != null) ? x : 0;
  		y = (y != null) ? y : 0;
  		
  		// Checks if large images are imported
  		var largeImages = false;
  		
  		if (!mxClient.IS_CHROMEAPP && files != null)
  		{
  			var thresh = resampleThreshold || this.resampleThreshold;
  			
  			for (var i = 0; i < files.length; i++)
  			{
  				if (files[i].type.substring(0, 6) == 'image/' && files[i].size > thresh)
  				{
  					largeImages = true;
  					
  					break;
  				}
  			}
  		}
  
  		var doImportFiles = mxUtils.bind(this, function()
  		{
  			var graph = this.editor.graph;
  			var gs = graph.gridSize;
  	
  			fn = (fn != null) ? fn : mxUtils.bind(this, function(data, mimeType, x, y, w, h, filename, done, file)
  			{
  				try
  				{
  					if (data != null && data.substring(0, 10) == '<mxlibrary')
  					{
  						this.spinner.stop();
  						this.loadLibrary(new LocalLibrary(this, data, filename));
  		    			
  		    			return null;
  					}
  					else
  					{
  						return this.importFile(data, mimeType, x, y, w, h, filename,
  							done, file, crop, ignoreEmbeddedXml, evt);
  					}
  				}
  				catch (e)
  				{
  					this.handleError(e);
  					
  					return null;
  				}
  			});
  			
  			resultFn = (resultFn != null) ? resultFn : mxUtils.bind(this, function(cells)
  			{
  				graph.setSelectionCells(cells);
  			});
  			
  			if (this.spinner.spin(document.body, mxResources.get('loading')))
  			{
  				var count = files.length;
  				var remain = count;
  				var queue = [];
  				
  				// Barrier waits for all files to be loaded asynchronously
  				var barrier = mxUtils.bind(this, function(index, fnc)
  				{
  					queue[index] = fnc;
  					
  					if (--remain == 0)
  					{
  						this.spinner.stop();
  						
  						if (barrierFn != null)
  						{
  							barrierFn(queue);
  						}
  						else
  						{
  							var cells = [];
  							
  							graph.getModel().beginUpdate();
  							try
  							{
  						    	for (var j = 0; j < queue.length; j++)
  						    	{
  						    		var tmp = queue[j]();
  						    		
  						    		if (tmp != null)
  						    		{
  						    			cells = cells.concat(tmp);
  						    		}
  						    	}
  							}
  							finally
  							{
  								graph.getModel().endUpdate();
  							}
  						}
  						
  						resultFn(cells);
  					}
  				});
  				
  				for (var i = 0; i < count; i++)
  				{
  					(mxUtils.bind(this, function(index)
  					{
  						var file = files[index];
  						
  						if (file != null)
  						{
  							var reader = new FileReader();
  							
  							reader.onload = mxUtils.bind(this, function(e)
  							{
  								if (filterFn == null || filterFn(file))
  								{
  									if (file.type.substring(0, 6) == 'image/')
  						    		{
  						    			if (file.type.substring(0, 9) == 'image/svg')
  						    			{
  						    				// Checks if SVG contains content attribute
  					    					var data = Graph.clipSvgDataUri(e.target.result);
  					    					var comma = data.indexOf(',');
  					    					var svgText = decodeURIComponent(escape(atob(data.substring(comma + 1))));
  					    					var root = mxUtils.parseXml(svgText);
  				    						var svgs = root.getElementsByTagName('svg');
  				    						
  				    						if (svgs.length > 0)
  					    					{
  				    							var svgRoot = svgs[0];
  						    					var cont = (ignoreEmbeddedXml) ? null : svgRoot.getAttribute('content');
  		
  						    					if (cont != null && cont.charAt(0) != '<' && cont.charAt(0) != '%')
  						    					{
  						    						cont = unescape((window.atob) ? atob(cont) : Base64.decode(cont, true));
  						    					}
  						    					
  						    					if (cont != null && cont.charAt(0) == '%')
  						    					{
  						    						cont = decodeURIComponent(cont);
  						    					}
  		
  						    					if (cont != null && (cont.substring(0, 8) === '<mxfile ' ||
  						    						cont.substring(0, 14) === '<mxGraphModel '))
  						    					{
  						    						barrier(index, mxUtils.bind(this, function()
  								    				{
  								    					return fn(cont, 'text/xml', x + index * gs, y + index * gs, 0, 0, file.name);	
  								    				}));
  						    					}
  						    					else
  						    					{
  								    				// SVG needs special handling to add viewbox if missing and
  								    				// find initial size from SVG attributes (only for IE11)
  								    				barrier(index, mxUtils.bind(this, function()
  								    				{
  							    						try
  							    						{
  									    					var prefix = data.substring(0, comma + 1);
  									    					
  									    					// Parses SVG and find width and height
  									    					if (root != null)
  									    					{
  									    						var svgs = root.getElementsByTagName('svg');
  									    						
  									    						if (svgs.length > 0)
  										    					{
  									    							var svgRoot = svgs[0];
  										    						var w = svgRoot.getAttribute('width');
  										    						var h = svgRoot.getAttribute('height');
  										    						
  										    						if (w != null && w.charAt(w.length - 1) != '%')
  									    							{
  									    								w = parseFloat(w);
  									    							}
  									    							else
  									    							{
  									    								w = NaN;
  									    							}
  										    						
  										    						if (h != null && h.charAt(h.length - 1) != '%')
  									    							{
  									    								h = parseFloat(h);
  									    							}
  									    							else
  									    							{
  									    								h = NaN;
  									    							}
  										    						
  										    						// Check if viewBox attribute already exists
  										    						var vb = svgRoot.getAttribute('viewBox');
  										    						
  										    						if (vb == null || vb.length == 0)
  										    						{
  										    							svgRoot.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
  										    						}
  										    						// Uses width and height from viewbox for
  										    						// missing width and height attributes
  										    						else if (isNaN(w) || isNaN(h))
  										    						{
  										    							var tokens = vb.split(' ');
  										    							
  										    							if (tokens.length > 3)
  										    							{
  										    								w = parseFloat(tokens[2]);
  										    								h = parseFloat(tokens[3]);
  										    							}
  										    						}
  	
  										    						data = Editor.createSvgDataUri(mxUtils.getXml(svgRoot));
  										    						var s = Math.min(1, Math.min(maxSize / Math.max(1, w)), maxSize / Math.max(1, h));
  										    						var cells = fn(data, file.type, x + index * gs, y + index * gs, Math.max(
  										    							1, Math.round(w * s)), Math.max(1, Math.round(h * s)), file.name);
  										    						
  										    						// Hack to fix width and height asynchronously
  										    						if (isNaN(w) || isNaN(h))
  										    						{
  										    							var img = new Image();
  										    							
  										    							img.onload = mxUtils.bind(this, function()
  										    							{
  										    								w = Math.max(1, img.width);
  										    								h = Math.max(1, img.height);
  										    								
  										    								cells[0].geometry.width = w;
  										    								cells[0].geometry.height = h;
  										    								
  										    								svgRoot.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
  										    								data = Editor.createSvgDataUri(mxUtils.getXml(svgRoot));
  										    								
  										    								var semi = data.indexOf(';');
  										    								
  										    								if (semi > 0)
  										    								{
  										    									data = data.substring(0, semi) + data.substring(data.indexOf(',', semi + 1));
  										    								}
  										    								
  										    								graph.setCellStyles('image', data, [cells[0]]);
  										    							});
  										    							
  										    							img.src = Editor.createSvgDataUri(mxUtils.getXml(svgRoot));
  										    						}
  										    						
  										    						return cells;
  										    					}
  									    					}
  							    						}
  							    						catch (e)
  							    						{
  							    							// ignores any SVG parsing errors
  							    						}
  								    					
  								    					return null;
  								    				}));
  						    					}
  					    					}
  				    						else
  				    						{
  					    						barrier(index, mxUtils.bind(this, function()
  							    				{
  							    					return null;
  							    				}));
  				    						}
  						    			}
  						    			else
  						    			{
  						    				// Checks if PNG+XML is available to bypass code below
  						    				var containsModel = false;
  						    				
  						    				if (file.type == 'image/png')
  						    				{
  						    					var xml = (ignoreEmbeddedXml) ? null : this.extractGraphModelFromPng(e.target.result);
  						    					
  						    					if (xml != null && xml.length > 0)
  						    					{
  						    						var img = new Image();
  						    						img.src = e.target.result;
  						    						
  								    				barrier(index, mxUtils.bind(this, function()
  								    				{
  								    					return fn(xml, 'text/xml', x + index * gs, y + index * gs,
  								    						img.width, img.height, file.name);	
  								    				}));
  						    						
  						    						containsModel = true;
  						    					}
  						    				}
  						    				
  							    			// Additional asynchronous step for finding image size
  						    				if (!containsModel)
  						    				{
  						    					// Cannot load local files in Chrome App
  						    					if (mxClient.IS_CHROMEAPP)
  						    					{
  						    						this.spinner.stop();
  						    						this.showError(mxResources.get('error'), mxResources.get('dragAndDropNotSupported'),
  						    							mxResources.get('cancel'), mxUtils.bind(this, function()
  					    								{
  					    									// Hides the dialog
  					    								}), null, mxResources.get('ok'), mxUtils.bind(this, function()
  					    								{
  						    								// Redirects to import function
  					    									this.actions.get('import').funct();
  					    								})
  					    							);
  						    					}
  						    					else
  						    					{
  									    			this.loadImage(e.target.result, mxUtils.bind(this, function(img)
  									    			{
  									    				this.resizeImage(img, e.target.result, mxUtils.bind(this, function(data2, w2, h2)
  									    				{
  										    				barrier(index, mxUtils.bind(this, function()
  												    		{
  										    					// Refuses to insert images above a certain size as they kill the app
  										    					if (data2 != null && data2.length < maxBytes)
  										    					{
  											    					var s = (!resizeImages || !this.isResampleImageSize(file.size, resampleThreshold)) ? 1 : Math.min(1, Math.min(maxSize / w2, maxSize / h2));
  												    				
  											    					return fn(data2, file.type, x + index * gs, y + index * gs, Math.round(w2 * s), Math.round(h2 * s), file.name);
  										    					}
  										    					else
  										    					{
  										    						this.handleError({message: mxResources.get('imageTooBig')});
  										    						
  										    						return null;
  										    					}
  												    		}));
  									    				}), resizeImages, maxSize, resampleThreshold, file.size);
  									    			}), mxUtils.bind(this, function()
  									    			{
  									    				this.handleError({message: mxResources.get('invalidOrMissingFile')});
  									    			}));
  						    					}
  						    				}
  						    			}
  						    		}
  						    		else
  						    		{
  						    			var data = e.target.result;
  						    			
  										fn(data, file.type, x + index * gs, y + index * gs, 240, 160, file.name, function(cells)
  										{
  											barrier(index, function()
  				    	    				{
  				    		    				return cells;
  				    	    				});
  										}, file);
  						    		}
  								}
  							});
  							
  							// Handles special cases
  							if (/(\.v(dx|sdx?))($|\?)/i.test(file.name) || /(\.vs(x|sx?))($|\?)/i.test(file.name))
  							{
  								fn(null, file.type, x + index * gs, y + index * gs, 240, 160, file.name, function(cells)
  								{
  									barrier(index, function()
  		    	    				{
  		    		    				return cells;
  		    	    				});
  								}, file);
  							}
  							else if (file.type.substring(0, 5) == 'image' || file.type == 'application/pdf')
  							{
  								reader.readAsDataURL(file);
  							}
  							else
  							{
  								reader.readAsText(file);
  							}
  						}
  					}))(i);
  				}
  			}
  		});
  		
  		if (largeImages)
  		{
  			// Workaround for lost files array in async code
  			var tmp = [];
  			
  			for (var i = 0; i < files.length; i++)
  			{
  				tmp.push(files[i]);
  			}
  			
  			files = tmp;
  			
  			this.confirmImageResize(function(doResize)
  			{
  				resizeImages = doResize;
  				doImportFiles();
  			}, resizeDialog);
  		}
  		else
  		{
  			doImportFiles();
  		}
  	};
  
  	/**
  	 * Parses the file using XHR2 via the server. File can be a blob or file object.
  	 * Filename is an optional parameter for blobs (that do not have a filename).
  	 */
  	EditorUi.prototype.confirmImageResize = function(fn, force)
  	{
  		force = (force != null) ? force : false;
  		var resume = (this.spinner != null && this.spinner.pause != null) ? this.spinner.pause() : function() {};
  		var resizeImages = (isLocalStorage || mxClient.IS_CHROMEAPP) ? mxSettings.getResizeImages() : null;
  		
  		var wrapper = function(remember, resize)
  		{
  			if (remember || force)
  			{
  				mxSettings.setResizeImages((remember) ? resize : null);
  				mxSettings.save();
  			}
  			
  			resume();
  			fn(resize);
  		};
  
  		if (resizeImages != null && !force)
  		{
  			wrapper(false, resizeImages);
  		}
  		else
  		{
  			this.showDialog(new ConfirmDialog(this, mxResources.get('resizeLargeImages'),
  			function(remember)
  			{
  				wrapper(remember, true);
  			},
  			function(remember)
  			{
  				wrapper(remember, false);
  			}, mxResources.get('resize'), mxResources.get('actualSize'),
  			'<img style="margin-top:8px;" src="' + Editor.loResImage + '"/>',
  			'<img style="margin-top:8px;" src="' + Editor.hiResImage + '"/>',
  			isLocalStorage || mxClient.IS_CHROMEAPP).container, 340,
  			(isLocalStorage || mxClient.IS_CHROMEAPP) ? 220 : 200, true, true);
  		}
  	};
  	
  	/**
  	 * Parses the file using XHR2 via the server. File can be a blob or file object.
  	 * Filename is an optional parameter for blobs (that do not have a filename).
  	 */
  	EditorUi.prototype.parseFile = function(file, fn, filename)
  	{
  		filename = (filename != null) ? filename : file.name;
  		
  		var formData = new FormData();
  		formData.append('format', 'xml');
  		formData.append('upfile', file, filename);
  
  		var xhr = new XMLHttpRequest();
  		xhr.open('POST', OPEN_URL);
  		
  		xhr.onreadystatechange = function()
  		{
  			fn(xhr);
  		};
  		
  		xhr.send(formData);
  		
  		try
  		{
  			EditorUi.logEvent({category: 'GLIFFY-IMPORT-FILE',
  				action: 'size_' + file.size});
  		}
  		catch (e)
  		{
  			// ignore
  		}
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.isResampleImageSize = function(size, thresh)
  	{
  		thresh = (thresh != null) ? thresh : this.resampleThreshold;
  
  		return size > thresh;
  	};
  	
  	/**
  	 * Resizes the given image if <maxImageBytes> is not null.
  	 */
  	EditorUi.prototype.resizeImage = function(img, data, fn, enabled, maxSize, thresh, fileSize)
  	{
  		maxSize = (maxSize != null) ? maxSize : this.maxImageSize;
  		var w = Math.max(1, img.width);
  		var h = Math.max(1, img.height);
  		
  		if (enabled && this.isResampleImageSize((fileSize != null) ? fileSize : data.length, thresh))
  		{
  			try
  			{
  				var factor = Math.max(w / maxSize, h / maxSize);
  				
  				if (factor > 1)
  				{
  					var w2 = Math.round(w / factor);
  					var h2 = Math.round(h / factor);
  					
  					var canvas = document.createElement('canvas');
  				    canvas.width = w2;
  				    canvas.height = h2;
  	
  				    var ctx = canvas.getContext('2d');
  				    ctx.drawImage(img, 0, 0, w2, h2);
  				    
  				    var tmp = canvas.toDataURL();
  
  				    // Uses new image if smaller
  				    if (tmp.length < data.length)
  				    {			    
  				    	// Checks if the image is empty by comparing
  				    	// with an empty image of the same size
  				    	var canvas2 = document.createElement('canvas');
  						canvas2.width = w2;
  					    canvas2.height = h2;
  					    var tmp2 = canvas2.toDataURL();
  					    
  					    if (tmp !== tmp2)
  					    {	
  					    	data = tmp;
  					    	w = w2;
  					    	h = h2;
  					    }
  				    }
  				}
  			}
  			catch (e)
  			{
  				// ignores image scaling errors
  			}
  		}
  
  		fn(data, w, h);
  	};
  	
  	/**
  	 * Extracts the XML from the compressed or non-compressed text chunk.
  	 */
  	EditorUi.prototype.extractGraphModelFromPng = function(data)
  	{
  		return Editor.extractGraphModelFromPng(data);
  	};
  
  	/**
  	 * Loads the image from the given URI.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.loadImage = function(uri, onload, onerror)
  	{
  		try
  		{
  			var img = new Image();
  			
  			img.onload = function()
  			{
  				img.width = (img.width > 0) ? img.width : 120;
  				img.height = (img.height > 0) ? img.height : 120;
  				
  				onload(img);
  			};
  			
  			if (onerror != null)
  			{
  				img.onerror = onerror;
  			};
  			
  			img.src = uri;
  		}
  		catch (e)
  		{
  			if (onerror != null)
  			{
  				onerror(e);
  			}
  			else
  			{
  				throw e;
  			}
  		}
  	};
  
  	// Initializes the user interface
  	var editorUiInit = EditorUi.prototype.init;
  	EditorUi.prototype.init = function()
  	{
  		mxStencilRegistry.allowEval = mxStencilRegistry.allowEval && !this.isOfflineApp();
  		
  		// Must be set before UI is created in superclass
  		if (typeof window.mxSettings !== 'undefined')
  		{
  			this.formatWidth = mxSettings.getFormatWidth();
  		}
  		
  		var ui = this;
  		var graph = this.editor.graph;
  		
  		if (Editor.isDarkMode())
  		{
  			graph.view.defaultGridColor = mxGraphView.prototype.defaultDarkGridColor;
  		}
  		
  		// Starts editing PlantUML data
  		graph.cellEditor.editPlantUmlData = function(cell, trigger, data)
  		{
  			var obj = JSON.parse(data);
  			
  	    	var dlg = new TextareaDialog(ui, mxResources.get('plantUml') + ':',
  	    		obj.data, function(text)
  			{
  	    		if (text != null)
  				{
  	    			if (ui.spinner.spin(document.body, mxResources.get('inserting')))
  	    			{
  	    				ui.generatePlantUmlImage(text, obj.format, function(data, w, h)
  	    				{
  	    					ui.spinner.stop();
  
  	    					graph.getModel().beginUpdate();
  	    					try
  	    					{
  	    						if (obj.format == 'txt')
  		    					{
  		    						graph.labelChanged(cell, '<pre>' + data + '</pre>');
  		    						graph.updateCellSize(cell, true);
  		    					}
  	    						else
  	    						{
  	    							graph.setCellStyles('image', ui.convertDataUri(data), [cell]);
  	    							var geo = graph.model.getGeometry(cell);
  	    							
  	    							if (geo != null)
  	    							{
  	    								geo = geo.clone();
  	    								geo.width = w;
  	    								geo.height = h;
  	    								graph.cellsResized([cell], [geo], false);
  	    							}
  	    						}
  	    						
  	    						graph.setAttributeForCell(cell, 'plantUmlData',
  		    						JSON.stringify({data: text, format: obj.format}));
  	    					}
  	    					finally
  	    					{
  	    						graph.getModel().endUpdate();
  	    					}
  	    				}, function(e)
  	    				{
  	    					ui.handleError(e);
  	    				});
  	    			}
  				}
  			}, null, null, 400, 220);
  			ui.showDialog(dlg.container, 420, 300, true, true);
  			dlg.init();
  		};
  		
  		// Starts editing Mermaid data
  		graph.cellEditor.editMermaidData = function(cell, trigger, data)
  		{
  			var obj = JSON.parse(data);
  			
  	    	var dlg = new TextareaDialog(ui, mxResources.get('mermaid') + ':',
  	    		obj.data, function(text)
  			{
  	    		if (text != null)
  				{
  	    			if (ui.spinner.spin(document.body, mxResources.get('inserting')))
  	    			{
  	    				ui.generateMermaidImage(text, obj.config, function(data, w, h)
  	    				{
  	    					ui.spinner.stop();
  
  	    					graph.getModel().beginUpdate();
  	    					try
  	    					{
  	    						graph.setCellStyles('image', data, [cell]);
      							var geo = graph.model.getGeometry(cell);
      							
      							if (geo != null)
      							{
      								geo = geo.clone();
      								geo.width = Math.max(geo.width, w);
      								geo.height = Math.max(geo.height, h);
      								graph.cellsResized([cell], [geo], false);
      							}
  	    						
  	    						graph.setAttributeForCell(cell, 'mermaidData',
  		    						JSON.stringify({data: text, config:
  		    						obj.config}, null, 2));
  	    					}
  	    					finally
  	    					{
  	    						graph.getModel().endUpdate();
  	    					}
  	    				}, function(e)
  	    				{
  	    					ui.handleError(e);
  	    				});
  	    			}
  				}
  			}, null, null, 400, 220);
  			ui.showDialog(dlg.container, 420, 300, true, true);
  			dlg.init();
  		};
  		
  		// Overrides function to add editing for Plant UML.
  		var cellEditorStartEditing = graph.cellEditor.startEditing;
  		graph.cellEditor.startEditing = function(cell, trigger)
  		{
  			try
  			{
  				var data = this.graph.getAttributeForCell(cell, 'plantUmlData');
  				
  				if (data != null)
  				{
  					this.editPlantUmlData(cell, trigger, data);
  				}
  				else
  				{
  					data = this.graph.getAttributeForCell(cell, 'mermaidData');
  				
  					if (data != null)
  					{
  						this.editMermaidData(cell, trigger, data);
  					}
  					else
  					{
  						var style = graph.getCellStyle(cell);
  						
  						if (mxUtils.getValue(style, 'metaEdit', '0') == '1')
  						{
  							ui.showDataDialog(cell);
  						}
  						else
  						{
  							cellEditorStartEditing.apply(this, arguments);
  						}
  					}
  				}
  			}
  			catch (e)
  			{
  				ui.handleError(e);
  			}
  		};
  
  		// Redirects custom link title via UI for page links
  		graph.getLinkTitle = function(href)
  		{
  			return ui.getLinkTitle(href);
  		};
  		
  		// Redirects custom link via UI for page link handling
  		graph.customLinkClicked = function(link)
  		{
  			var done = false;
  			
  			try
  			{
  				ui.handleCustomLink(link);
  				done = true;
  			}
  			catch (e)
  			{
  				ui.handleError(e);
  			}
  			
  			return done;
  		};
  
  		// Extends clear default style to clear persisted settings
  		var clearDefaultStyle = this.clearDefaultStyle;
  		
  		this.clearDefaultStyle = function()
  		{
  			clearDefaultStyle.apply(this, arguments);
  		};
  		
  		// Sets help link for placeholders
  		if (!this.isOffline() && typeof window.EditDataDialog !== 'undefined')
  		{
  			EditDataDialog.placeholderHelpLink = 'https://www.diagrams.net/doc/faq/predefined-placeholders';
  		}
  		
  		if (/viewer\.diagrams\.net$/.test(window.location.hostname) ||
  			/embed\.diagrams\.net$/.test(window.location.hostname))
  		{
  			this.editor.editBlankUrl = 'https://app.diagrams.net/';
  		}
  		
  		// Passes dev mode to new window
  		var editorGetEditBlankUrl = ui.editor.getEditBlankUrl;
  		
  		this.editor.getEditBlankUrl = function(params)
  		{
  			params = (params != null) ? params : '';
  
  			if (urlParams['dev'] == '1')
  			{
  				params += ((params.length > 0) ? '&' : '?') + 'dev=1';
  			}
  			
  			return editorGetEditBlankUrl.apply(this, arguments);
  		};
  
  		// For chromeless mode and lightbox mode in viewer
  		// Must be overridden before supercall to be applied
  		// in case of chromeless initialization
  		var graphAddClickHandler = graph.addClickHandler;
  
  		graph.addClickHandler = function(highlight, beforeClick, onClick)
  		{
  			var tmp = beforeClick;
  
  			beforeClick = function(evt, href)
  			{
  				if (href == null)
  				{
  					var source = mxEvent.getSource(evt);
  				
  					if (source.nodeName.toLowerCase() == 'a')
  					{
  						href = source.getAttribute('href');
  					}
  				}
  
  				if (href != null && graph.isCustomLink(href) &&
  					(mxEvent.isTouchEvent(evt) ||
  					!mxEvent.isPopupTrigger(evt)) &&
  					graph.customLinkClicked(href))
  				{
  					mxEvent.consume(evt);
  				}
  				
  				if (tmp != null)
  				{
  					tmp(evt, href);
  				}
  			};
  			
  			// For some reason, local argument override is not enough in this case...
  			graphAddClickHandler.call(this, highlight, beforeClick, onClick);
  		};
  
  		editorUiInit.apply(this, arguments);
  		
  		if (mxClient.IS_SVG)
  		{
  			// LATER: Add shadow for labels in graph.container (eg. math, NO_FO), scaling
  			this.editor.graph.addSvgShadow(graph.view.canvas.ownerSVGElement, null, true);
  		}
  
  		if (this.menus != null)
  		{
  			var menusAddPopupMenuEditItems = Menus.prototype.addPopupMenuEditItems;
  			
  			// Inserts copyAsImage into popup menu
  			this.menus.addPopupMenuEditItems = function(menu, cell, evt)
  			{
  				if (ui.editor.graph.isSelectionEmpty())
  				{
  					menusAddPopupMenuEditItems.apply(this, arguments);
  				}
  				else
  				{
  					ui.menus.addMenuItems(menu, ['delete', '-', 'cut', 'copy',
  						'copyAsImage', '-', 'duplicate'], null, evt);
  				}
  			};
  		}
  
  		// Overrides print dialog size
  		ui.actions.get('print').funct = function()
  		{
  			ui.showDialog(new PrintDialog(ui).container, 360,
  				(ui.pages != null && ui.pages.length > 1) ?
  				450 : 370, true, true);
  		};
  
  		// Specifies the default filename
  		this.defaultFilename = mxResources.get('untitledDiagram');
  
  		// Adds export for %page%, %pagenumber% and %pagecount% placeholders
  		var graphGetExportVariables = graph.getExportVariables;
  		
  		graph.getExportVariables = function()
  		{
  			var vars = graphGetExportVariables.apply(this, arguments);
  			var file = ui.getCurrentFile();
  			
  			if (file != null)
  			{
  				vars['filename'] = file.getTitle();
  			}
  			
  			vars['pagecount'] = (ui.pages != null) ? ui.pages.length : 1;
  			vars['page'] = (ui.currentPage != null) ? ui.currentPage.getName() : '';
  			vars['pagenumber'] = (ui.pages != null && ui.currentPage != null) ?
  				mxUtils.indexOf(ui.pages, ui.currentPage) + 1 : 1;
  			
  			return vars;
  		};
  
  		// Adds %page%, %pagenumber% and %pagecount% placeholders
  		var graphGetGlobalVariable = graph.getGlobalVariable;
  		
  		graph.getGlobalVariable = function(name)
  		{
  			var file = ui.getCurrentFile();
  			
  			if (name == 'filename' && file != null)
  			{
  				return file.getTitle();
  			}
  			else if (name == 'page' && ui.currentPage != null)
  			{
  				return ui.currentPage.getName();
  			}
  			else if (name == 'pagenumber')
  			{
  				if (ui.currentPage != null && ui.pages != null)
  				{
  					return mxUtils.indexOf(ui.pages, ui.currentPage) + 1;
  				}
  				else
  				{
  					return 1;
  				}
  			}
  			else if (name == 'pagecount')
  			{
  				return (ui.pages != null) ? ui.pages.length : 1;
  			}
  			
  			return graphGetGlobalVariable.apply(this, arguments);
  		};
  
  		var graphLabelLinkClicked = graph.labelLinkClicked;
  		
  		graph.labelLinkClicked = function(state, elt, evt)
  		{
  			var href = elt.getAttribute('href');
  			
  			if (href != null && graph.isCustomLink(href) &&
  				(mxEvent.isTouchEvent(evt) ||
  				!mxEvent.isPopupTrigger(evt)))
  			{
  				// Active links are moved to the hint
  				if (!graph.isEnabled() || (state != null && graph.isCellLocked(state.cell)))
  				{
  					graph.customLinkClicked(href);
  					
  					// Resets rubberband after click on locked cell
  					graph.getRubberband().reset();
  				}
  				
  				mxEvent.consume(evt);
  			}
  			else
  			{
  				graphLabelLinkClicked.apply(this, arguments);
  			}
  		};
  
  		// Overrides editor filename
  		this.editor.getOrCreateFilename = function()
  		{
  			var filename = ui.defaultFilename;
  			var file = ui.getCurrentFile();
  			
  			if (file != null)
  			{
  				filename = (file.getTitle() != null) ? file.getTitle() : filename;
  			}
  			
  			return filename;
  		};
  
  		// Disables print action for standalone apps on iOS
  		// because there is no way to close the new window
  		// LATER: Use iframe for print, disable preview
  		var printAction = this.actions.get('print');
  		printAction.setEnabled(!mxClient.IS_IOS || !navigator.standalone);
  		printAction.visible = printAction.isEnabled();
  		
  		// Installs additional keyboard shortcuts for editor
  		if (!this.editor.chromeless || this.editor.editable)
  		{
  			// Defines additional hotkeys
  			this.keyHandler.bindAction(70, true, 'findReplace'); // Ctrl+F
  			this.keyHandler.bindAction(67, true, 'copyStyle', true); // Ctrl+Shift+C
  			this.keyHandler.bindAction(86, true, 'pasteStyle', true); // Ctrl+Shift+V
  			this.keyHandler.bindAction(77, true, 'editGeometry', true); // Ctrl+Shift+M
  			this.keyHandler.bindAction(88, true, 'insertText', true); // Ctrl+Shift+X
  			this.keyHandler.bindAction(75, true, 'insertRectangle'); // Ctrl+K
  			this.keyHandler.bindAction(75, true, 'insertEllipse', true); // Ctrl+Shift+K
  			this.altShiftActions[83] = 'synchronize'; // Alt+Shift+S
  
  		    this.installImagePasteHandler();
  		    this.installNativeClipboardHandler();
  		};
  
  		// Creates the spinner
  		this.spinner = this.createSpinner(null, null, 24);
  		
  		// Installs drag and drop handler for rich text editor
  		if (Graph.fileSupport)
  		{
  			graph.addListener(mxEvent.EDITING_STARTED, mxUtils.bind(this, function(evt)
  			{
  				// Setup the dnd listeners
  				var textElt = graph.cellEditor.text2;
  				var dropElt = null;
  				
  				if (textElt != null)
  				{
  					mxEvent.addListener(textElt, 'dragleave', function(evt)
  					{
  						if (dropElt != null)
  					    {
  					    	dropElt.parentNode.removeChild(dropElt);
  					    	dropElt = null;
  					    }
  					    
  						evt.stopPropagation();
  						evt.preventDefault();
  					});
  					
  					mxEvent.addListener(textElt, 'dragover', mxUtils.bind(this, function(evt)
  					{
  						// IE 10 does not implement pointer-events so it can't have a drop highlight
  						if (dropElt == null && (!mxClient.IS_IE || document.documentMode > 10))
  						{
  							dropElt = this.highlightElement(textElt);
  						}
  						
  						evt.stopPropagation();
  						evt.preventDefault();
  					}));
  					
  					mxEvent.addListener(textElt, 'drop', mxUtils.bind(this, function(evt)
  					{
  					    if (dropElt != null)
  					    {
  					    	dropElt.parentNode.removeChild(dropElt);
  					    	dropElt = null;
  					    }
  
  					    if (evt.dataTransfer.files.length > 0)
  					    {
  					    	this.importFiles(evt.dataTransfer.files, 0, 0, this.maxImageSize, function(data, mimeType, x, y, w, h)
  					    	{
  					    		// Inserts image into current text box
  					    		graph.insertImage(data, w, h);
  					    	}, function()
  					    	{
  					    		// No post processing
  					    	}, function(file)
  					    	{
  					    		// Handles only images
  					    		return file.type.substring(0, 6) == 'image/';
  					    	}, function(queue)
  					    	{
  					    		// Invokes elements of queue in order
  					    		for (var i = 0; i < queue.length; i++)
  					    		{
  					    			queue[i]();
  					    		}
  					    	}, mxEvent.isControlDown(evt));
  			    		}
  					    else if (mxUtils.indexOf(evt.dataTransfer.types, 'text/uri-list') >= 0)
  					    {
  					    	var uri = evt.dataTransfer.getData('text/uri-list');
  					    	
  					    	if ((/\.(gif|jpg|jpeg|tiff|png|svg)$/i).test(uri))
  							{
  				    			this.loadImage(decodeURIComponent(uri), mxUtils.bind(this, function(img)
  				    			{
  				    				var w = Math.max(1, img.width);
  			    					var h = Math.max(1, img.height);
  			    					var maxSize = this.maxImageSize;
  
  				    				var s = Math.min(1, Math.min(maxSize / Math.max(1, w)), maxSize / Math.max(1, h));
  				    				graph.insertImage(decodeURIComponent(uri), w * s, h * s);
  				    			}));
  							}
  							else
  							{
  								document.execCommand('insertHTML', false, evt.dataTransfer.getData('text/plain'));
  							}
  					    }
  					    else
  					    {
  					    	if (mxUtils.indexOf(evt.dataTransfer.types, 'text/html') >= 0)
  						    {
  					    		document.execCommand('insertHTML', false, evt.dataTransfer.getData('text/html'));
  						    }
  						    else if (mxUtils.indexOf(evt.dataTransfer.types, 'text/plain') >= 0)
  						    {
  						    	document.execCommand('insertHTML', false, evt.dataTransfer.getData('text/plain'));
  						    }
  					    }
  	
  					    evt.stopPropagation();
  					    evt.preventDefault();
  					}));
  				}
  			}));
  		}
  		
  		// Adding mxRuler to editor
  		if (typeof window.mxSettings !== 'undefined')
  		{
  			var view = this.editor.graph.view;
  			view.setUnit(mxSettings.getUnit());
  			
  			view.addListener('unitChanged', function(sender, evt)
  			{
  				mxSettings.setUnit(evt.getProperty('unit'));
  				mxSettings.save();		
  			});
  
  			var showRuler = this.canvasSupported && document.documentMode != 9 &&
  				(urlParams['ruler'] == '1' || mxSettings.isRulerOn()) &&
  				(!this.editor.isChromelessView() || this.editor.editable);
  			
  			this.ruler = (showRuler) ? new mxDualRuler(this, view.unit) : null;
  			this.refresh();
  		}
  		
  		// Adds an element to edit the style in the footer in test mode
  		if (urlParams['styledev'] == '1')
  		{
  			var footer = document.getElementById('geFooter');
  
  			if (footer != null)
  			{
  				this.styleInput = document.createElement('input');
  				this.styleInput.setAttribute('type', 'text');
  				this.styleInput.style.position = 'absolute';
  				this.styleInput.style.top = '14px';
  				this.styleInput.style.left = '2px';
  				// Workaround for ignore right CSS property in FF
  				this.styleInput.style.width = '98%';
  				this.styleInput.style.visibility = 'hidden';
  				this.styleInput.style.opacity = '0.9';
  
  				mxEvent.addListener(this.styleInput, 'change', mxUtils.bind(this, function()
  				{
  					this.editor.graph.getModel().setStyle(this.editor.graph.getSelectionCell(), this.styleInput.value);
  				}));
  
  				footer.appendChild(this.styleInput);
  
  				this.editor.graph.getSelectionModel().addListener(mxEvent.CHANGE, mxUtils.bind(this, function(sender, evt)
  				{
  					if (this.editor.graph.getSelectionCount() > 0)
  					{
  						var cell = this.editor.graph.getSelectionCell();
  						var style = this.editor.graph.getModel().getStyle(cell);
  
  						this.styleInput.value = style || '';
  						this.styleInput.style.visibility = 'visible';
  					}
  					else
  					{
  						this.styleInput.style.visibility = 'hidden';
  					}
  				}));
  			}
  
  			var isSelectionAllowed = this.isSelectionAllowed;
  			this.isSelectionAllowed = function(evt)
  			{
  				if (mxEvent.getSource(evt) == this.styleInput)
  				{
  					return true;
  				}
  
  				return isSelectionAllowed.apply(this, arguments);
  			};
  		}
  
  		// Removes info text in page
  		var info = document.getElementById('geInfo');
  
  		if (info != null)
  		{
  			info.parentNode.removeChild(info);
  		}
  
  		// Installs drag and drop handler for files
  		// Enables dropping files
  		if (Graph.fileSupport && (!this.editor.chromeless || this.editor.editable))
  		{
  			// Setup the dnd listeners
  			var dropElt = null;
  
  			mxEvent.addListener(graph.container, 'dragleave', function(evt)
  			{
  				if (graph.isEnabled())
  				{
  					if (dropElt != null)
  				    {
  				    	dropElt.parentNode.removeChild(dropElt);
  				    	dropElt = null;
  				    }
  				    
  					evt.stopPropagation();
  					evt.preventDefault();
  				}
  			});
  			
  			mxEvent.addListener(graph.container, 'dragover', mxUtils.bind(this, function(evt)
  			{
  				// IE 10 does not implement pointer-events so it can't have a drop highlight
  				if (dropElt == null && (!mxClient.IS_IE || document.documentMode > 10))
  				{
  					dropElt = this.highlightElement(graph.container);
  				}
  				
  				if (this.sidebar != null)
  				{
  					this.sidebar.hideTooltip();
  				}
  
  				evt.stopPropagation();
  				evt.preventDefault();
  			}));
  			
  			mxEvent.addListener(graph.container, 'drop', mxUtils.bind(this, function(evt)
  			{
  			    if (dropElt != null)
  			    {
  			    	dropElt.parentNode.removeChild(dropElt);
  			    	dropElt = null;
  			    }
  			    
  				if (graph.isEnabled())
  				{
  				    var pt = mxUtils.convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
  					var tr = graph.view.translate;
  					var scale = graph.view.scale;
  					var x = pt.x / scale - tr.x;
  					var y = pt.y / scale - tr.y;
  					
  				    if (evt.dataTransfer.files.length > 0)
  				    {
  				    	if (mxEvent.isShiftDown(evt))
  				    	{
  				    		this.openFiles(evt.dataTransfer.files, true);
  				    	}
  				    	else
  				    	{
  							if (mxEvent.isAltDown(evt))
  							{
  								x = null;
  								y = null;
  							}
  							
  							this.importFiles(evt.dataTransfer.files, x, y, this.maxImageSize, null, null, null,
  								null, mxEvent.isControlDown(evt), null, null, mxEvent.isShiftDown(evt), evt);
  				    	}
  		    		}
  				    else
  				    {
  						if (mxEvent.isAltDown(evt))
  						{
  							x = 0;
  							y = 0;
  						}
  						
  				    	var uri = (mxUtils.indexOf(evt.dataTransfer.types, 'text/uri-list') >= 0) ?
  				    		evt.dataTransfer.getData('text/uri-list') : null;
  				    	var data = this.extractGraphModelFromEvent(evt, this.pages != null);
  				    	
  				    	if (data != null)
  				    	{
  				    		graph.setSelectionCells(this.importXml(data, x, y, true));
  				    	}
  				    	else if (mxUtils.indexOf(evt.dataTransfer.types, 'text/html') >= 0)
  					    {
  				    		var html = evt.dataTransfer.getData('text/html');
  				    		var div = document.createElement('div');
  				    		div.innerHTML = graph.sanitizeHtml(html);
  				    		
  				    		// The default is based on the extension
  				    		var asImage = null;
  				    		
  				    		// Extracts single image
  				    		var imgs = div.getElementsByTagName('img');
  
  				    		if (imgs != null && imgs.length == 1)
  				    		{
  				    			html = imgs[0].getAttribute('src');
  				    			
  				    			if (html == null)
  				    			{
  				    				html = imgs[0].getAttribute('srcset');
  				    			}
  				    			
  				    			// Handles special case where the src attribute has no valid extension
  				    			// in which case the text would be inserted as text with a link
  				    			if (!(/\.(gif|jpg|jpeg|tiff|png|svg)$/i).test(html))
  				    			{
  				    				asImage = true;
  				    			}
  				    		}
  				    		else
  				    		{
  				    			// Extracts single link
  				    			var a = div.getElementsByTagName('a');
  
  				    			if (a != null && a.length == 1)
  				    			{
  				    				html = a[0].getAttribute('href');
  				    			}
  					    		else
  					    		{
  					    			// Extracts preformatted text
  					    			var pre = div.getElementsByTagName('pre');
  					    			
  					    			if (pre != null && pre.length == 1)
  					    			{
  					    				html = mxUtils.getTextContent(pre[0]);
  					    			}
  					    		}
  				    		}
  				    		
  				    		var resizeImages = true;
  				    		
  				    		var doInsert = mxUtils.bind(this, function()
  				    		{
  				    			graph.setSelectionCells(this.insertTextAt(html, x, y, true,
  				    				asImage, null, resizeImages, mxEvent.isControlDown(evt)));
  				    		});
  				    		
  				    		if (asImage && html != null && html.length > this.resampleThreshold)
  				    		{
  				    			this.confirmImageResize(function(doResize)
  		    					{
  		    						resizeImages = doResize;
  		    						doInsert();
  		    					}, mxEvent.isControlDown(evt));
  				    		}
  				    		else
  			    			{
  				    			doInsert();
  			    			}
  					    }
  				    	else if (uri != null && (/\.(gif|jpg|jpeg|tiff|png|svg)$/i).test(uri))
  						{
  			    			this.loadImage(decodeURIComponent(uri), mxUtils.bind(this, function(img)
  			    			{
  			    				var w = Math.max(1, img.width);
  		    					var h = Math.max(1, img.height);
  		    					var maxSize = this.maxImageSize;
  
  			    				var s = Math.min(1, Math.min(maxSize / Math.max(1, w)), maxSize / Math.max(1, h));
  
  			    				graph.setSelectionCell(graph.insertVertex(null, null, '', x, y, w * s, h * s,
  			    					'shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;' +
  			    					'verticalAlign=top;aspect=fixed;imageAspect=0;image=' + uri + ';'));
  			    			}), mxUtils.bind(this, function(img)
  			    			{
  			    				graph.setSelectionCells(this.insertTextAt(uri, x, y, true));
  			    			}));
  						}
  					    else if (mxUtils.indexOf(evt.dataTransfer.types, 'text/plain') >= 0)
  					    {
  					    	graph.setSelectionCells(this.insertTextAt(evt.dataTransfer.getData('text/plain'), x, y, true));
  					    }
  					}
  				}
  
  			    evt.stopPropagation();
  			    evt.preventDefault();
  			}), false);
  		}
  
  		graph.enableFlowAnimation = true;
  		this.initPages();
  
  		// Embedded mode
  		if (urlParams['embed'] == '1')
  		{
  			this.initializeEmbedMode();
  		}
  		
  		this.installSettings();
  	};
  	
  	/**
  	 * Installs handler for pasting image from clipboard.
  	 */
  	EditorUi.prototype.installImagePasteHandler = function()
  	{
  		if (!mxClient.IS_IE)
  		{
  			var graph = this.editor.graph;
  			
  			graph.container.addEventListener('paste', mxUtils.bind(this, function(evt)
  			{
  				if (!mxEvent.isConsumed(evt))
  				{
  					try
  					{
  						var data = (evt.clipboardData || evt.originalEvent.clipboardData);
  						var containsText = false;
  						
  						// Workaround for asynchronous paste event processing in textInput
  						// is to ignore this event if it contains text/html/rtf (see below).
  						// NOTE: Image is not pasted into textInput so can't listen there.
  						for (var i = 0; i < data.types.length; i++)
  						{	
  							if (data.types[i].substring(0, 5) === 'text/')
  							{
  								containsText = true;
  								break;
  							}
  						}
  						
  						if (!containsText)
  						{
  							var items = data.items;
  							
  							for (index in items)
  							{
  								var item = items[index];
  								
  								if (item.kind === 'file')
  								{
  									if (graph.isEditing())
  									{
  								    	this.importFiles([item.getAsFile()], 0, 0, this.maxImageSize, function(data, mimeType, x, y, w, h)
  								    	{
  								    		// Inserts image into current text box
  								    		graph.insertImage(data, w, h);
  								    	}, function()
  								    	{
  								    		// No post processing
  								    	}, function(file)
  								    	{
  								    		// Handles only images
  								    		return file.type.substring(0, 6) == 'image/';
  								    	}, function(queue)
  								    	{
  								    		// Invokes elements of queue in order
  								    		for (var i = 0; i < queue.length; i++)
  								    		{
  								    			queue[i]();
  								    		}
  								    	});
  									}
  									else
  									{
  										var pt = this.editor.graph.getInsertPoint();
  										this.importFiles([item.getAsFile()], pt.x, pt.y, this.maxImageSize);
  										mxEvent.consume(evt);
  									}
  									
  									break;
  								}
  							}
  						}
  					}
  					catch (e)
  					{
  						// ignore
  					}
  				}
  			}), false);
  		}
  	};
  	
  	/**
  	 * Installs the native clipboard support.
  	 */
  	EditorUi.prototype.installNativeClipboardHandler = function()
  	{
  		var graph = this.editor.graph;
  
  		// Focused but invisible textarea during control or meta key events
  		// LATER: Disable text rendering to avoid delay while keeping focus
  		var textInput = document.createElement('div');
  		textInput.setAttribute('autocomplete', 'off');
  		textInput.setAttribute('autocorrect', 'off');
  		textInput.setAttribute('autocapitalize', 'off');
  		textInput.setAttribute('spellcheck', 'false');
  		textInput.style.textRendering = 'optimizeSpeed';
  		textInput.style.fontFamily = 'monospace';
  		textInput.style.wordBreak = 'break-all';
  		textInput.style.background = 'transparent';
  		textInput.style.color = 'transparent';
  		textInput.style.position = 'absolute';
  		textInput.style.whiteSpace = 'nowrap';
  		textInput.style.overflow = 'hidden';
  		textInput.style.display = 'block';
  		textInput.style.fontSize = '1';
  		textInput.style.zIndex = '-1';
  		textInput.style.resize = 'none';
  		textInput.style.outline = 'none';
  		textInput.style.width = '1px';
  		textInput.style.height = '1px';
  		mxUtils.setOpacity(textInput, 0);
  		textInput.contentEditable = true;
  		textInput.innerHTML = '&nbsp;';
  
  		var restoreFocus = false;
  		
  		// Disables built-in cut, copy and paste shortcuts
  		this.keyHandler.bindControlKey(88, null);
  		this.keyHandler.bindControlKey(67, null);
  		this.keyHandler.bindControlKey(86, null);
  
  		// Shows a textare when control/cmd is pressed to handle native clipboard actions
  		mxEvent.addListener(document, 'keydown', mxUtils.bind(this, function(evt)
  		{
  			// No dialog visible
  			var source = mxEvent.getSource(evt);
  			
  			if (graph.container != null && graph.isEnabled() && !graph.isMouseDown && !graph.isEditing() &&
  				this.dialog == null && source.nodeName != 'INPUT' && source.nodeName != 'TEXTAREA')
  			{
  				if (evt.keyCode == 224 /* FF */ || (!mxClient.IS_MAC && evt.keyCode == 17 /* Control */) ||
  					(mxClient.IS_MAC && (evt.keyCode == 91 || evt.keyCode == 93) /* Left/Right Meta */))
  				{
  					// Cannot use parentNode for check in IE
  					if (!restoreFocus)
  					{
  						// Avoid autoscroll but allow handling of all pass-through ctrl shortcuts
  						textInput.style.left = (graph.container.scrollLeft + 10) + 'px';
  						textInput.style.top = (graph.container.scrollTop + 10) + 'px';
  						
  						graph.container.appendChild(textInput);
  						restoreFocus = true;
  						
  						textInput.focus();
  						document.execCommand('selectAll', false, null);
  					}
  				}
  			}
  		}));
  
  		// Clears input and restores focus and selection
  		function clearInput()
  		{
  			window.setTimeout(function()
  			{
  				textInput.innerHTML = '&nbsp;';
  				textInput.focus();
  				document.execCommand('selectAll', false, null);
  			}, 0);
  		};
  		
  		mxEvent.addListener(document, 'keyup', mxUtils.bind(this, function(evt)
  		{
  			// Workaround for asynchronous event read invalid in IE quirks mode
  			var keyCode = evt.keyCode;
  			
  			// Asynchronous workaround for scroll to origin after paste if the
  			// Ctrl-key is not pressed for long enough in FF on Windows
  			window.setTimeout(mxUtils.bind(this, function()
  			{
  				if (restoreFocus && (keyCode == 224 /* FF */ || keyCode == 17 /* Control */ ||
  					keyCode == 91 /* MetaLeft */ || keyCode == 93 /* MetaRight */))
  				{
  					restoreFocus = false;
  					
  					if (!graph.isEditing() && this.dialog == null && graph.container != null)
  					{
  						graph.container.focus();
  					}
  					
  					textInput.parentNode.removeChild(textInput);
  					
  					// Workaround for lost cursor in focused element
  					if (this.dialog == null)
  					{
  						mxUtils.clearSelection();
  					}
  				}
  			}), 0);
  		}));
  		
  		mxEvent.addListener(textInput, 'copy', mxUtils.bind(this, function(evt)
  		{
  			if (graph.isEnabled())
  			{
  				try
  				{
  					mxClipboard.copy(graph);
  					this.copyCells(textInput);
  					clearInput();
  				}
  				catch (e)
  				{
  					this.handleError(e);
  				}
  			}
  		}));
  		
  		mxEvent.addListener(textInput, 'cut', mxUtils.bind(this, function(evt)
  		{
  			if (graph.isEnabled())
  			{
  				try
  				{
  					mxClipboard.copy(graph);
  					this.copyCells(textInput, true);
  					clearInput();
  				}
  				catch (e)
  				{
  					this.handleError(e);
  				}
  			}
  		}));
  		
  		mxEvent.addListener(textInput, 'paste', mxUtils.bind(this, function(evt)
  		{
  			if (graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent()))
  			{
  				textInput.innerHTML = '&nbsp;';
  				textInput.focus();
  				
  				if (evt.clipboardData != null)
  				{
  					this.pasteCells(evt, textInput, true, true);
  				}
  
  				if (!mxEvent.isConsumed(evt))
  				{
  					window.setTimeout(mxUtils.bind(this, function()
  					{
  						this.pasteCells(evt, textInput, false, true);
  					}), 0);
  				}
  			}
  		}), true);
  		
  		// Needed for IE11
  		var isSelectionAllowed2 = this.isSelectionAllowed;
  		this.isSelectionAllowed = function(evt)
  		{
  			if (mxEvent.getSource(evt) == textInput)
  			{
  				return true;
  			}
  
  			return isSelectionAllowed2.apply(this, arguments);
  		};
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.getLinkTitle = function(href)
  	{
  		var title = Graph.prototype.getLinkTitle.apply(this, arguments);
  
  		if (href.substring(0, 13) == 'data:page/id,')
  		{
  			var comma = href.indexOf(',');
  	
  			if (comma > 0)
  			{
  				var page = this.getPageById(href.substring(comma + 1));
  	
  				if (page != null)
  				{
  					title = page.getName();
  				}
  				else
  				{
  					title = mxResources.get('pageNotFound');
  				}
  			}
  		}
  		else if (href.substring(0, 5) == 'data:')
  		{
  			title = mxResources.get('action');
  		}
  		
  		return title;
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.handleCustomLink = function(href)
  	{
  		if (href.substring(0, 13) == 'data:page/id,')
  		{
  			var comma = href.indexOf(',');
  			var page = this.getPageById(href.substring(comma + 1));
  			
  			if (page)
  			{
  				this.selectPage(page)
  			}
  			else
  			{
  				// Needs fallback for missing resource in case of viewer lightbox
  				throw new Error(mxResources.get('pageNotFound') || 'Page not found');
  			}
  		}
  		else
  		{
  			this.editor.graph.handleCustomLink(href);
  		}
  	};
  	
  	/**
  	 * 
  	 */
  	EditorUi.prototype.isSettingsEnabled = function()
  	{
  		return typeof window.mxSettings !== 'undefined' && (isLocalStorage || mxClient.IS_CHROMEAPP);
  	};
  
  	/**
  	 * Creates the format panel and adds overrides.
  	 */
  	EditorUi.prototype.installSettings = function()
  	{
  		if (this.isSettingsEnabled())
  		{
  			// Gets recent colors from settings
  			ColorDialog.recentColors = mxSettings.getRecentColors();
  
  			// Avoids overridden values for changes in
  			// multiple windows and updates shared values 
  			if (isLocalStorage)
  			{
  				try
  				{
  					window.addEventListener('storage', mxUtils.bind(this, function(evt)
  					{
  						if (evt.key == mxSettings.key)
  						{
  							mxSettings.load();
  							
  							// Updates values
  							ColorDialog.recentColors = mxSettings.getRecentColors();
  							this.menus.customFonts = mxSettings.getCustomFonts();
  						}
  					}), false);
  				}
  				catch (e)
  				{
  					// ignore
  				}
  			}
  
  			// Updates UI to reflect current edge style
  			this.fireEvent(new mxEventObject('styleChanged', 'keys', [], 'values', [], 'cells', []));
  			
  			/**
  			 * Persists custom fonts.
  			 */
  			this.menus.customFonts = mxSettings.getCustomFonts();
  			
  			this.addListener('customFontsChanged', mxUtils.bind(this, function(sender, evt)
  			{
  				if (urlParams['ext-fonts'] != '1')
  				{
  					mxSettings.setCustomFonts(this.menus.customFonts);
  				}
  				else
  				{
  					var customFonts = evt.getProperty('customFonts');
  					this.menus.customFonts = customFonts;
  					mxSettings.setCustomFonts(customFonts);
  				}
  				
  				mxSettings.save();
  			}));
  			
  			/**
  			 * Persists copy on connect switch.
  			 */
  			this.editor.graph.connectionHandler.setCreateTarget(mxSettings.isCreateTarget());
  			this.fireEvent(new mxEventObject('copyConnectChanged'));
  			
  			this.addListener('copyConnectChanged', mxUtils.bind(this, function(sender, evt)
  			{
  				mxSettings.setCreateTarget(this.editor.graph.connectionHandler.isCreateTarget());
  				mxSettings.save();
  			}));
  			
  			/**
  			 * Persists default page format.
  			 */
  			this.editor.graph.pageFormat = mxSettings.getPageFormat();
  			
  			this.addListener('pageFormatChanged', mxUtils.bind(this, function(sender, evt)
  			{
  				mxSettings.setPageFormat(this.editor.graph.pageFormat);
  				mxSettings.save();
  			}));
  			
  			/**
  			 * Persists default grid color.
  			 */
  			this.editor.graph.view.gridColor = mxSettings.getGridColor(Editor.isDarkMode());
  			
  			this.addListener('gridColorChanged', mxUtils.bind(this, function(sender, evt)
  			{
  				mxSettings.setGridColor(this.editor.graph.view.gridColor, Editor.isDarkMode());
  				mxSettings.save();
  			}));
  
  			/**
  			 * Persists autosave switch in Chrome app.
  			 */
  			if (mxClient.IS_CHROMEAPP || EditorUi.isElectronApp)
  			{
  				this.editor.addListener('autosaveChanged', mxUtils.bind(this, function(sender, evt)
  				{
  					mxSettings.setAutosave(this.editor.autosave);
  					mxSettings.save();
  				}));
  				
  				this.editor.autosave = mxSettings.getAutosave();
  			}
  			
  			if (this.sidebar != null)
  			{
  				if (urlParams['search-shapes'] != null && this.sidebar.searchShapes != null)
  				{
  					this.sidebar.searchShapes(decodeURIComponent(urlParams['search-shapes']));
  					this.sidebar.showEntries('search');
  				}
  				else
  				{
  					this.sidebar.showPalette('search', mxSettings.settings.search);
  					
  					/**
  					 * Shows scratchpad if never shown.
  					 */
  					if ((!this.editor.chromeless || this.editor.editable) && (mxSettings.settings.isNew ||
  						parseInt(mxSettings.settings.version || 0) <= 8))
  					{
  						this.toggleScratchpad();
  						mxSettings.save();
  					}
  				}
  			}
  
  			// Saves app defaults for UI
  			this.addListener('formatWidthChanged', function()
  			{
  				mxSettings.setFormatWidth(this.formatWidth);
  				mxSettings.save();
  			});
  		}
  	};
  		
  	/**
  	 * Copies the given cells and XML to the clipboard as an embedded image.
  	 */
  	EditorUi.prototype.copyImage = function(cells, xml, scale)
  	{
  		try
  		{
  			if (navigator.clipboard != null && this.spinner.spin(document.body, mxResources.get('exporting')))
  			{
  				this.editor.exportToCanvas(mxUtils.bind(this, function(canvas, svgRoot)
  				{
  					try
  					{
  						this.spinner.stop();
  						
  						// KNOWN: SVG and delayed content currently not supported
  						var dataUrl = this.createImageDataUri(canvas, xml, 'png');
  						var w = parseInt(svgRoot.getAttribute('width'));
  						var h = parseInt(svgRoot.getAttribute('height'));
  						this.writeImageToClipboard(dataUrl, w, h, mxUtils.bind(this, function(e)
  						{
  							this.handleError(e);
  						}));
  					}
  					catch (e)
  					{
  						this.handleError(e);
  					}
  				}), null, null, null, mxUtils.bind(this, function(e)
  				{
  					this.spinner.stop();
  					this.handleError(e);
  				}), null, null, (scale != null) ? scale : 4,
  					this.editor.graph.background == null ||
  					this.editor.graph.background == mxConstants.NONE,
  					null, null, null, 10, null, null, true, null,
  					(cells.length > 0) ? cells : null);
  			}
  		}
  		catch (e)
  		{
  			this.handleError(e);
  		}
  	};
  	
  	/**
  	 * Copies the given cells and XML to the clipboard as an embedded image.
  	 */
  	EditorUi.prototype.writeImageToClipboard = function(dataUrl, w, h, error)
  	{
  		var blob = this.base64ToBlob(dataUrl.substring(dataUrl.indexOf(',') + 1), 'image/png');
  		var html = '<img src="' + dataUrl + '" width="' + w + '" height="' + h + '">';
  		var cbi = new ClipboardItem({'image/png': blob,
  			'text/html': new Blob([html], {type: 'text/html'})});
  		navigator.clipboard.write([cbi])['catch'](error);
  	};
  
  	/**
  	 * Creates the format panel and adds overrides.
  	 */
  	EditorUi.prototype.copyCells = function(elt, removeCells)
  	{
  		var graph = this.editor.graph;
  		
  		if (!graph.isSelectionEmpty())
  		{
  			// Fixes cross-platform clipboard UTF8 issues by encoding as URI
  			var cells = mxUtils.sortCells(graph.model.getTopmostCells(graph.getSelectionCells()));
  			var xml = mxUtils.getXml(graph.encodeCells(cells));
  			mxUtils.setTextContent(elt, encodeURIComponent(xml));
  
  			if (removeCells)
  			{
  				graph.removeCells(cells, false);
  				graph.lastPasteXml = null;
  			}
  			else
  			{
  				graph.lastPasteXml = xml;
  				graph.pasteCounter = 0;
  			}
  
  			elt.focus();
  			document.execCommand('selectAll', false, null);
  		}
  		else
  		{
  			// Disables copy on focused element
  			elt.innerHTML = '';
  		}
  	};
  
  	/**
  	 * Creates the format panel and adds overrides.
  	 */
  	EditorUi.prototype.copyXml = function()
  	{
  		var cells = null;
  		
  		if (Editor.enableNativeCipboard)
  		{
  			var graph = this.editor.graph;
  			
  			if (!graph.isSelectionEmpty())
  			{
  				cells = mxUtils.sortCells(graph.getExportableCells(
  					graph.model.getTopmostCells(graph.getSelectionCells())));
  				var xml = mxUtils.getXml(graph.encodeCells(cells));
  				navigator.clipboard.writeText(xml);
  			}
  		}
  		
  		return cells;
  	};
  	
  	/**
  	 * Creates the format panel and adds overrides.
  	 */
  	EditorUi.prototype.pasteXml = function(xml, pasteAsLabel, compat, evt)
  	{
  		var graph = this.editor.graph;
  		var cells = null;
  		
  		if (graph.lastPasteXml == xml)
  		{
  			graph.pasteCounter++;
  		}
  		else
  		{
  			graph.lastPasteXml = xml;
  			graph.pasteCounter = 0;
  		}
  	
  		var dx = graph.pasteCounter * graph.gridSize;
  							
  		if (compat || this.isCompatibleString(xml))
  		{
  			cells = this.importXml(xml, dx, dx);
  			graph.setSelectionCells(cells);
  		}
  		else if (pasteAsLabel && graph.getSelectionCount() == 1)
  		{
  			var cell = graph.getStartEditingCell(graph.getSelectionCell(), evt);
  			
  			if ((/\.(gif|jpg|jpeg|tiff|png|svg)$/i).test(xml) &&
  				graph.getCurrentCellStyle(cell)[mxConstants.STYLE_SHAPE] == 'image')
  			{
  				graph.setCellStyles(mxConstants.STYLE_IMAGE, xml, [cell]);
  			}
  			else
  			{
  				graph.model.beginUpdate();
          		try
          		{
  					graph.labelChanged(cell, xml);
  		
  					if (Graph.isLink(xml))
  					{
  						graph.setLinkForCell(cell, xml);
  					}
  				}
          		finally
          		{
          			graph.model.endUpdate();
          		}
  			}
  			
  			graph.setSelectionCell(cell);
  		}
  		else
  		{
  			var pt = graph.getInsertPoint();
  			
  			if (graph.isMouseInsertPoint())
  			{
  				dx = 0;
  				
  				// No offset for insert at mouse position
  				if (graph.lastPasteXml == xml && graph.pasteCounter > 0)
  				{
  					graph.pasteCounter--;
  				}
  			}
  			
  			cells = this.insertTextAt(xml, pt.x + dx, pt.y + dx, true);
  			graph.setSelectionCells(cells);
  		}
  		
  		if (!graph.isSelectionEmpty())
  		{
  			graph.scrollCellToVisible(graph.getSelectionCell());
  		
  			if (this.hoverIcons != null)
  			{
  				this.hoverIcons.update(graph.view.getState(graph.getSelectionCell()));
  			}
  		}
  		
  		return cells;
  	};
  	
  	/**
  	 * Creates the format panel and adds overrides.
  	 */
  	EditorUi.prototype.pasteCells = function(evt, realElt, useEvent, pasteAsLabel)
  	{
  		if (!mxEvent.isConsumed(evt))
  		{
  			var elt = realElt;
  			var asHtml = false;
  			
  			if (useEvent && evt.clipboardData != null && evt.clipboardData.getData)
  			{
  				// Workaround for paste from IE11 where the page is copied
  				// as HTML while the data is only available via text/plain
  				var plain = evt.clipboardData.getData('text/plain');
  				var override = false;
  				
  				if (plain != null && plain.length > 0 && plain.substring(0, 18) == '%3CmxGraphModel%3E')
  				{
  					var tmp = decodeURIComponent(plain);
  							
  					if (this.isCompatibleString(tmp))
  					{
  						override = true;
  						plain = tmp;
  					}
  				}
  			
  				var data = (!override) ? evt.clipboardData.getData('text/html') : null;
  				
  				if (data != null && data.length > 0)
  				{
  					elt = this.parseHtmlData(data);
  					asHtml = elt.getAttribute('data-type') != 'text/plain';
  				}
  				else if (plain != null && plain.length > 0)
  				{
  					elt = document.createElement('div');
  					mxUtils.setTextContent(elt, data);
  				}
  			}
  			
  			var spans = elt.getElementsByTagName('span');
  		
  			if (spans != null && spans.length > 0 && spans[0].getAttribute('data-lucid-type') ===
  				'application/vnd.lucid.chart.objects')
  			{
  				var content = spans[0].getAttribute('data-lucid-content');
  				
  				if (content != null && content.length > 0)
  				{
  					this.convertLucidChart(content, mxUtils.bind(this, function(xml)
  					{
  						var graph = this.editor.graph;
  						
  						if (graph.lastPasteXml == xml)
  						{
  							graph.pasteCounter++;
  						}
  						else
  						{
  							graph.lastPasteXml = xml;
  							graph.pasteCounter = 0;
  						}
  						
  						var dx = graph.pasteCounter * graph.gridSize;
  						graph.setSelectionCells(this.importXml(xml, dx, dx));
  						graph.scrollCellToVisible(graph.getSelectionCell());
  					}), mxUtils.bind(this, function(e)
  					{
  						this.handleError(e);
  					}));
  			
  					mxEvent.consume(evt);
  				}
  			}
  			else
  			{
  				// KNOWN: Paste from IE11 to other browsers on Windows
  				// seems to paste the contents of index.html
  				var xml = (asHtml) ? elt.innerHTML :
  					mxUtils.trim((elt.innerText == null) ?
  					mxUtils.getTextContent(elt) : elt.innerText);
  				var compat = false;
  
  				// Workaround for junk after XML in VM
  				try
  				{
  					var idx = xml.lastIndexOf('%3E');
  					
  					if (idx >= 0 && idx < xml.length - 3)
  					{
  						xml = xml.substring(0, idx + 3);
  					}
  				}
  				catch (e)
  				{
  					// ignore
  				}
  				
  				// Checks for embedded XML content
  				try
  				{
  					var spans = elt.getElementsByTagName('span');
  					var tmp = (spans != null && spans.length > 0) ? 
  						mxUtils.trim(decodeURIComponent(spans[0].textContent)) :
  						decodeURIComponent(xml);
  							
  					if (this.isCompatibleString(tmp))
  					{
  						compat = true;
  						xml = tmp;
  					}
  				}
  				catch (e)
  				{
  					// ignore
  				}
  
  				try
  				{
  					if (xml != null && xml.length > 0)
  					{
  						this.pasteXml(xml, pasteAsLabel, compat, evt);
  
  						try
  						{
  							mxEvent.consume(evt);
  						}
  						catch (e)
  						{
  							// ignore event no longer exists in async handler in IE8-
  						}
  					}
  					else if (!useEvent)
  					{
  						var graph = this.editor.graph;
  					
  						graph.lastPasteXml = null;
  						graph.pasteCounter = 0;
  					}
  				}
  				catch (e)
  				{
  					this.handleError(e);
  				}
  			}
  		}
  		
  		realElt.innerHTML = '&nbsp;';
  	};
  
  	/**
  	 * Adds a file drop handler for opening local files.
  	 */
  	EditorUi.prototype.addFileDropHandler = function(elts)
  	{
  		// Installs drag and drop handler for files
  		if (Graph.fileSupport)
  		{
  			var dropElt = null;
  			
  			for (var i = 0; i < elts.length; i++)
  			{
  				// Setup the dnd listeners
  				mxEvent.addListener(elts[i], 'dragleave', function(evt)
  				{
  					if (dropElt != null)
  				    {
  				    	dropElt.parentNode.removeChild(dropElt);
  				    	dropElt = null;
  				    }
  					
  					evt.stopPropagation();
  					evt.preventDefault();
  				});
  		
  				mxEvent.addListener(elts[i], 'dragover', mxUtils.bind(this, function(evt)
  				{
  					if (this.editor.graph.isEnabled() || urlParams['embed'] != '1')
  					{
  						// IE 10 does not implement pointer-events so it can't have a drop highlight
  						if (dropElt == null && (!mxClient.IS_IE || (document.documentMode > 10 && document.documentMode < 12)))
  						{
  							dropElt = this.highlightElement();
  						}
  					}
  
  					evt.stopPropagation();
  					evt.preventDefault();
  				}));
  				
  				mxEvent.addListener(elts[i], 'drop', mxUtils.bind(this, function(evt)
  				{
  					if (dropElt != null)
  				    {
  					    dropElt.parentNode.removeChild(dropElt);
  					    dropElt = null;
  				    }
  					
  					if (this.editor.graph.isEnabled() || urlParams['embed'] != '1')
  					{
  						if (evt.dataTransfer.files.length > 0)
  						{
  							this.hideDialog();
  							
  							// Never open files in embed mode
  							if (urlParams['embed'] == '1')
  							{
  								this.importFiles(evt.dataTransfer.files, 0, 0, this.maxImageSize, null, null,
  									null, null, !mxEvent.isControlDown(evt) && !mxEvent.isShiftDown(evt));
  							}
  							else
  							{
  								this.openFiles(evt.dataTransfer.files, true);
  							}
  						}
  						else
  						{
  							// Handles open special files via text drag and drop
  							var data = this.extractGraphModelFromEvent(evt);
  							
  							// Tries additional and async parsing of text content such as HTML, Gliffy data
  							if (data == null)
  							{
  								var provider = (evt.dataTransfer != null) ? evt.dataTransfer : evt.clipboardData;
  							
  								if (provider != null)
  								{
  									if (document.documentMode == 10 || document.documentMode == 11)
  									{
  										data = provider.getData('Text');
  									}
  									else
  									{
  								    	var data = null;
  								    	
  								    	if (mxUtils.indexOf(provider.types, 'text/uri-list') >= 0)
  								    	{
  								    		data = evt.dataTransfer.getData('text/uri-list');
  								    	}
  								    	else
  								    	{
  								    		data = (mxUtils.indexOf(provider.types, 'text/html') >= 0) ? provider.getData('text/html') : null;
  								    	}
  										
  										if (data != null && data.length > 0)
  										{
  											var div = document.createElement('div');
  								    		div.innerHTML = this.editor.graph.sanitizeHtml(data);
  		
  								    		// Extracts single image
  								    		var imgs = div.getElementsByTagName('img');
  								    		
  								    		if (imgs.length > 0)
  								    		{
  								    			data = imgs[0].getAttribute('src');
  								    		}
  										}
  										else if (mxUtils.indexOf(provider.types, 'text/plain') >= 0)
  										{
  											data = provider.getData('text/plain');
  										}
  									}
  									
  									if (data != null)
  									{
  										// Checks for embedded XML in PNG
  										if (data.substring(0, 22) == 'data:image/png;base64,')
  										{
  											var xml = this.extractGraphModelFromPng(data);
  											
  											if (xml != null && xml.length > 0)
  											{
  												this.openLocalFile(xml, null, true);
  											}
  										}
  										else if (!this.isOffline() && this.isRemoteFileFormat(data))
  										{
  								    		new mxXmlRequest(OPEN_URL, 'format=xml&data=' + encodeURIComponent(data)).send(mxUtils.bind(this, function(req)
  											{
  								    			if (req.getStatus() >= 200 && req.getStatus() <= 299)
  								    			{
  								    				this.openLocalFile(req.getText(), null, true);
  								    			}
  											}));
  										}
  										else if (/^https?:\/\//.test(data))
  										{
  											if (this.getCurrentFile() == null)
  											{
  												window.location.hash = '#U' + encodeURIComponent(data);
  											}
  											else
  											{
  												window.openWindow(((mxClient.IS_CHROMEAPP) ?
  													(EditorUi.drawHost + '/') : 'https://' + location.host + '/') +
  													window.location.search + '#U' + encodeURIComponent(data));
  											}
  										}
  									}
  								}
  							}
  							else
  							{
  								this.openLocalFile(data, null, true);
  							}
  						}
  					}
  
  					evt.stopPropagation();
  					evt.preventDefault();
  				}));
  			}
  		}
  	};
  	
  	/**
  	 * Highlights the given element
  	 */
  	EditorUi.prototype.highlightElement = function(elt)
  	{
  		var x = 0;
  		var y = 0;
  		var w = 0;
  		var h = 0;
  		
  		if (elt == null)
  		{
  			var b = document.body;
  			var d = document.documentElement;
  		
  			w = (b.clientWidth || d.clientWidth) - 3;
  			h = Math.max(b.clientHeight || 0, d.clientHeight) - 3;
  		}
  		else
  		{
  			x = elt.offsetTop;
  			y = elt.offsetLeft;
  			w = elt.clientWidth;
  			h = elt.clientHeight;
  		}
  		
  		var hl = document.createElement('div');
  		hl.style.zIndex = mxPopupMenu.prototype.zIndex + 2;
  		hl.style.border = '3px dotted rgb(254, 137, 12)';
  		hl.style.pointerEvents = 'none';
  		hl.style.position = 'absolute';
  		hl.style.top = x + 'px';
  		hl.style.left = y + 'px';
  		hl.style.width = Math.max(0, w - 3) + 'px';
  		hl.style.height = Math.max(0, h - 3) + 'px';
  		
  		if (elt != null && elt.parentNode == this.editor.graph.container)
  		{
  			this.editor.graph.container.appendChild(hl);
  		}
  		else
  		{
  			document.body.appendChild(hl);
  		}
  		
  		return hl;
  	};
  	
  	/**
  	 * Highlights the given element
  	 */
  	EditorUi.prototype.stringToCells = function(xml)
  	{
  		var doc = mxUtils.parseXml(xml);
  		var node = this.editor.extractGraphModel(doc.documentElement);
  		var cells = [];
  		
  		if (node != null)
  		{
  			var codec = new mxCodec(node.ownerDocument);
  			var model = new mxGraphModel();
  			codec.decode(node, model);
  			
  			var parent = model.getChildAt(model.getRoot(), 0);
  			
  			for (var j = 0; j < model.getChildCount(parent); j++)
  			{
  				cells.push(model.getChildAt(parent, j));
  			}
  		}
  		
  		return cells;
  	};
  		
  	/**
  	 * Opens the given files in the editor.
  	 */
  	EditorUi.prototype.openFileHandle = function(data, name, file, temp, fileHandle)
  	{
  		if (name != null && name.length > 0)
  		{
  			if (!this.useCanvasForExport && /(\.png)$/i.test(name))
  			{
  				name = name.substring(0, name.length - 4) + '.drawio';
  			}
  			else if (/(\.pdf)$/i.test(name))
  			{
  				name = name.substring(0, name.length - 4) + '.drawio';
  			}
  			
  			var handleResult = mxUtils.bind(this, function(xml)
  			{
  				var dot = name.lastIndexOf('.');
  				
  				if (dot >= 0)
  				{
  					name = name.substring(0, name.lastIndexOf('.')) + '.drawio';
  				}
  				else
  				{
  					name = name + '.drawio';
  				}
  				
  				if (xml.substring(0, 10) == '<mxlibrary')
  				{
  					// Creates new temporary file if library is dropped in splash screen
  					if (this.getCurrentFile() == null && urlParams['embed'] != '1')
  					{
  						this.openLocalFile(this.emptyDiagramXml, this.defaultFilename, temp);
  					}
  				
      				try
  	    			{
      					this.loadLibrary(new LocalLibrary(this, xml, name));
  	    			}
      				catch (e)
  	    			{
  	    				this.handleError(e, mxResources.get('errorLoadingFile'));
  	    			}
  				}
  				else
  				{
  					this.openLocalFile(xml, name, temp);
  				}
  			});
  			
  			if  (/(\.v(dx|sdx?))($|\?)/i.test(name) || /(\.vs(x|sx?))($|\?)/i.test(name))
  			{
  				this.importVisio(file, mxUtils.bind(this, function(xml)
  				{
  					this.spinner.stop();
  					handleResult(xml);
  				}));
  			}
  			else if (/(\.*<graphml )/.test(data)) 
  			{
  				this.importGraphML(data, mxUtils.bind(this, function(xml)
  				{
  					this.spinner.stop();
  					handleResult(xml);
  				}));
  			}
  			else if (Graph.fileSupport && !this.isOffline() && new XMLHttpRequest().upload &&
  				this.isRemoteFileFormat(data, name))
  			{
  				this.parseFile(file, mxUtils.bind(this, function(xhr)
  				{
  					if (xhr.readyState == 4)
  					{
  						this.spinner.stop();
  						
  						if (xhr.status >= 200 && xhr.status <= 299)
  						{
  							handleResult(xhr.responseText);
  						}
  						else
  						{
  							this.handleError({message: mxResources.get((xhr.status == 413) ?
          						'drawingTooLarge' : 'invalidOrMissingFile')},
          						mxResources.get('errorLoadingFile'));
  						}
  					}
  				}));
  			}
  			else if (this.isLucidChartData(data))
  			{
  				if (/(\.json)$/i.test(name))
  				{
  					name = name.substring(0, name.length - 5) + '.drawio';
  				}
  
  				// LATER: Add import step that produces cells and use callback
  				this.convertLucidChart(data, mxUtils.bind(this, function(xml)
  				{
  					this.spinner.stop();
  					this.openLocalFile(xml, name, temp);
  				}), mxUtils.bind(this, function(e)
  				{
  					this.spinner.stop();
  					this.handleError(e);
  				}));
  			}
  			else if (data.substring(0, 10) == '<mxlibrary')
  			{
  				this.spinner.stop();
  				
  				// Creates new temporary file if library is dropped in splash screen
  				if (this.getCurrentFile() == null && urlParams['embed'] != '1')
  				{
  					this.openLocalFile(this.emptyDiagramXml, this.defaultFilename, temp);
  				}
  				
  				try
      			{
      				this.loadLibrary(new LocalLibrary(this, data, file.name));
      			}
      			catch (e)
      			{
      				this.handleError(e, mxResources.get('errorLoadingFile'));
      			}
  			}
  			else if (data.indexOf('PK') == 0)
  			{
  				this.importZipFile(file, mxUtils.bind(this, function(xml)
  				{
  					this.spinner.stop();
  					handleResult(xml);
  				}), mxUtils.bind(this, function()
  				{
  					this.spinner.stop();
  					this.openLocalFile(data, name, temp);
  				}));
  			}
  			else
  			{
  				if (file.type.substring(0, 9) == 'image/png')
  				{
  					data = this.extractGraphModelFromPng(data);
  				}
  				else if (file.type == 'application/pdf')
  	    		{
  					var xml = Editor.extractGraphModelFromPdf(data);
  					
  					if (xml != null)
  					{
  						fileHandle = null;
  						temp = true;
  						data = xml;
  					}
  	    		}
  				
  				this.spinner.stop();
  				this.openLocalFile(data, name, temp, fileHandle, (fileHandle != null) ? file : null);
  			}
  		}
  	};
  	
  	/**
  	 * Opens the given files in the editor.
  	 */
  	EditorUi.prototype.openFiles = function(files, temp)
  	{
  		if (this.spinner.spin(document.body, mxResources.get('loading')))
  		{
  			for (var i = 0; i < files.length; i++)
  			{
  				(mxUtils.bind(this, function(file)
  				{
  					var reader = new FileReader();
  				
  					reader.onload = mxUtils.bind(this, function(e)
  					{
  						try
  						{
  							this.openFileHandle(e.target.result, file.name, file, temp);
  						}
  						catch (e)
  						{
  							this.handleError(e);
  						}
  					});
  					
  					reader.onerror = mxUtils.bind(this, function(e)
  					{
  						this.spinner.stop();
  						this.handleError(e);
  						window.openFile = null;
  					});
  					
  					if ((file.type.substring(0, 5) === 'image' ||
  						file.type === 'application/pdf') &&
  						file.type.substring(0, 9) !== 'image/svg')
  					{
  						reader.readAsDataURL(file);
  					}
  					else
  					{
  						reader.readAsText(file);
  					}
  				}))(files[i]);
  			}
  		}
  	};
  
  	/**
  	 * Shows the layers dialog if the graph has more than one layer.
  	 */
  	EditorUi.prototype.openLocalFile = function(data, name, temp, fileHandle, desc)
  	{
  		var currentFile = this.getCurrentFile();
  		
  		var fn = mxUtils.bind(this, function()
  		{
  			window.openFile = null;
  			
  			if (name == null && this.getCurrentFile() != null && this.isDiagramEmpty())
  			{
  				var doc = mxUtils.parseXml(data);
  				
  				if (doc != null)
  				{
  					this.editor.setGraphXml(doc.documentElement);
  					this.editor.graph.selectAll();
  				}
  			}
  			else
  			{
  				this.fileLoaded(new LocalFile(this, data, name ||
  					this.defaultFilename, temp, fileHandle, desc));
  			}
  		});
  
  		if (data != null && data.length > 0)
  		{
  			if (currentFile == null || (!currentFile.isModified() &&
  				(mxClient.IS_CHROMEAPP || EditorUi.isElectronApp || fileHandle != null)))
  			{
  				fn();
  			}
  			else if ((mxClient.IS_CHROMEAPP || EditorUi.isElectronApp || fileHandle != null) &&
  				currentFile != null && currentFile.isModified())
  			{
  				this.confirm(mxResources.get('allChangesLost'), null, fn,
  					mxResources.get('cancel'), mxResources.get('discardChanges'));
  			}
  			else
  			{
  				window.openFile = new OpenFile(function()
  				{
  					window.openFile = null;
  				});
  				
  				window.openFile.setData(data, name);
  				window.openWindow(this.getUrl(), null, mxUtils.bind(this, function()
  				{
  					if (currentFile != null && currentFile.isModified())
  					{
  						this.confirm(mxResources.get('allChangesLost'), null, fn,
  							mxResources.get('cancel'), mxResources.get('discardChanges'));
  					}
  					else
  					{
  						fn();
  					}
  				}));
  			}
  		}
  		else
  		{
  			throw new Error(mxResources.get('notADiagramFile'));
  		}
  	};
  	
  	/**
  	 * Returns a list of all shapes used in the current file.
  	 */
  	EditorUi.prototype.getBasenames = function()
  	{
  		var basenames = {};
  
  		if (this.pages != null)
  		{
  			for (var i = 0; i < this.pages.length; i++)
  			{
  				this.updatePageRoot(this.pages[i]);
  				this.addBasenamesForCell(this.pages[i].root, basenames);
  			}
  		}
  		else
  		{
  			this.addBasenamesForCell(this.editor.graph.model.getRoot(), basenames);
  		}
  		
  		var result = [];
  		
  		for (var key in basenames)
  		{
  			result.push(key);
  		}
  		
  		return result;
  	};
  		
  	/**
  	 * Returns a list of all shapes used in the current file.
  	 */
  	EditorUi.prototype.addBasenamesForCell = function(cell, basenames)
  	{
  		function addName(name)
  		{
  			if (name != null)
  			{
  				// LATER: Check if this case exists
  				var dot = name.lastIndexOf('.');
  				
  				if (dot > 0)
  				{
  					name = name.substring(dot + 1, name.length);
  				}
  				
  				if (basenames[name] == null)
  				{
  					basenames[name] = true;
  				}
  			}
  		};
  		
  		var graph = this.editor.graph;
  		var style = graph.getCellStyle(cell);
  		var shape = style[mxConstants.STYLE_SHAPE];
  		addName(mxStencilRegistry.getBasenameForStencil(shape));
  		
  		// Adds package names for markers in edges
  		if (graph.model.isEdge(cell))
  		{
  			addName(mxMarker.getPackageForType(style[mxConstants.STYLE_STARTARROW]));
  			addName(mxMarker.getPackageForType(style[mxConstants.STYLE_ENDARROW]));
  		}
  
  		var childCount = graph.model.getChildCount(cell);
  		
  		for (var i = 0; i < childCount; i++)
  		{
  			this.addBasenamesForCell(graph.model.getChildAt(cell, i), basenames);
  		}
  	};
  	
  	/**
  	 * Shows the layers dialog if the graph has more than one layer.
  	 */
  	EditorUi.prototype.setGraphEnabled = function(enabled)
  	{
  		this.diagramContainer.style.visibility = (enabled) ? '' : 'hidden';
  		this.formatContainer.style.visibility = (enabled) ? '' : 'hidden';
  		this.sidebarFooterContainer.style.display = (enabled) ? '' : 'none';
  		this.sidebarContainer.style.display = (enabled) ? '' : 'none';
  		this.hsplit.style.display = (enabled) ? '' : 'none';
  		this.editor.graph.setEnabled(enabled);
  		
  		if (this.ruler != null)
  		{
  			this.ruler.hRuler.container.style.visibility = (enabled) ? '' : 'hidden';
  			this.ruler.vRuler.container.style.visibility = (enabled) ? '' : 'hidden';
  		}
  		
  		if (this.tabContainer != null)
  		{
  			this.tabContainer.style.visibility = (enabled) ? '' : 'hidden';	
  		}
  		
  		if (!enabled)
  		{
              if (this.actions.outlineWindow != null)
              {
              	this.actions.outlineWindow.window.setVisible(false);
              }
  
              if (this.actions.layersWindow != null)
              {
              	this.actions.layersWindow.window.setVisible(false);
              }
  
              if (this.menus.tagsWindow != null)
              {
              	this.menus.tagsWindow.window.setVisible(false);
              }
  
              if (this.menus.findWindow != null)
              {
              	this.menus.findWindow.window.setVisible(false);
              }
  
              if (this.menus.findReplaceWindow != null)
              {
              	this.menus.findReplaceWindow.window.setVisible(false);
              }
  		}
  	};
  	
  	/**
  	 * Shows the layers dialog if the graph has more than one layer.
  	 */
  	EditorUi.prototype.initializeEmbedMode = function()
  	{
  		this.setGraphEnabled(false);
  		var parent = window.opener || window.parent;
  
  		if (parent != window)
  		{
  			if (urlParams['spin'] != '1' || this.spinner.spin(document.body, mxResources.get('loading')))
  			{
  				this.installMessageHandler(mxUtils.bind(this, function(xml, evt, modified)
  				{
  					this.spinner.stop();
  					this.addEmbedButtons();
  					this.setGraphEnabled(true);
  					
  					if (xml == null || xml.length == 0)
  					{
  						xml = this.emptyDiagramXml;
  					}
  					
  					// Creates temporary file for diff sync in embed mode
  					this.setCurrentFile(new EmbedFile(this, xml, {}));
  					this.mode = App.MODE_EMBED;
  					this.setFileData(xml);
  					
  					if (!this.editor.isChromelessView())
  					{
  						this.showLayersDialog();
  					}
  					else if (this.editor.graph.isLightboxView())
  					{
  						this.lightboxFit();
  					}
  					
  					if (this.chromelessResize)
  					{
  						this.chromelessResize();
  					}
  	
  					this.editor.undoManager.clear();
  					this.editor.modified = (modified != null) ? modified : false;
  					this.updateUi();
  					
  					// Workaround for no initial focus in FF
  					// (does not work in Conf Cloud with FF)
  					if (window.self !== window.top)
  					{
  						window.focus();
  					}
  					
  					if (this.format != null)
  					{
  						this.format.refresh();
  					}
  				}));
  			}
  		}
  	};
  	
  	/**
  	 * Shows the layers dialog if the graph has more than one layer.
  	 */
  	EditorUi.prototype.showLayersDialog = function()
  	{
  		if (this.editor.graph.getModel().getChildCount(this.editor.graph.getModel().getRoot()) > 1)
  		{
  			if (this.actions.layersWindow == null)
  			{
  				this.actions.get('layers').funct();
  			}
  			else
  			{
  				this.actions.layersWindow.window.setVisible(true);
  			}
  		}
  	};
  
  	/**
  	 * Tries to find a public URL for the given file.
  	 */
  	EditorUi.prototype.getPublicUrl = function(file, fn)
  	{
  		if (file != null)
  		{
  			file.getPublicUrl(fn);
  		}
  		else
  		{
  			fn(null);
  		}
  	};
  
  	/**
  	 * Adds the buttons for embedded mode.
  	 */
  	EditorUi.prototype.createLoadMessage = function(eventName)
  	{
  		var graph = this.editor.graph;
  		
  		return {event: eventName, pageVisible: graph.pageVisible, translate: graph.view.translate,
  			bounds: graph.getGraphBounds(), currentPage: this.getSelectedPageIndex(),
  			scale: graph.view.scale, page: graph.view.getBackgroundPageBounds()};
  	};
  	
  	/**
  	 * Adds the buttons for embedded mode.
  	 */
  	EditorUi.prototype.installMessageHandler = function(fn)
  	{
  		var changeListener = null;
  		var ignoreChange = false;
  		var autosave = false;
  		var lastData = null;
  		
  		var updateStatus = mxUtils.bind(this, function(sender, eventObject)
  		{
  			if (!this.editor.modified || urlParams['modified'] == '0')
  			{
  				this.editor.setStatus('');
  			}
  			else if (urlParams['modified'] != null)
  			{
  				this.editor.setStatus(mxUtils.htmlEntities(mxResources.get(urlParams['modified'])));
  			}
  		});
  		
  		this.editor.graph.model.addListener(mxEvent.CHANGE, updateStatus);
  		
  		// Receives XML message from opener and puts it into the graph
  		mxEvent.addListener(window, 'message', mxUtils.bind(this, function(evt)
  		{
  			var validSource = window.opener || window.parent;
  			
  			if (evt.source != validSource)
  			{
  				return;
  			}
  			
  			var data = evt.data;
  			
  			var extractDiagramXml = mxUtils.bind(this, function(data)
  			{
  				if (data != null && typeof data.charAt === 'function' && data.charAt(0) != '<')
  				{
  					try
  					{
  						if (data.substring(0, 22) == 'data:image/png;base64,')
  						{
  							data = this.extractGraphModelFromPng(data);
  						}
  						else if (data.substring(0, 26) == 'data:image/svg+xml;base64,')
  						{
  							data = atob(data.substring(26));
  						}
  						else if (data.substring(0, 24) == 'data:image/svg+xml;utf8,')
  						{
  							data = data.substring(24);
  						}
  						
  						if (data != null)
  						{
  							if (data.charAt(0) == '%')
  							{
  								data = decodeURIComponent(data);
  							}
  							else if (data.charAt(0) != '<')
  							{
  								data = Graph.decompress(data);
  							}
  						}
  					}
  					catch (e)
  					{
  						// ignore compression errors and use empty data
  					}
  				}
  				
  				return data;
  			});
  
  			if (urlParams['proto'] == 'json')
  			{
  				try
  				{
  					data = JSON.parse(data);
  				}
  				catch (e)
  				{
  					data = null;
  				}
  				
  				try
  				{
  					if (data == null)
  					{
  						// Ignore
  						return;
  					}
  					else if (data.action == 'dialog')
  					{
  						this.showError((data.titleKey != null) ? mxResources.get(data.titleKey) : data.title,
  							(data.messageKey != null) ? mxResources.get(data.messageKey) : data.message,
  							(data.buttonKey != null) ? mxResources.get(data.buttonKey) : data.button);
  						
  						if (data.modified != null)
  						{
  							this.editor.modified = data.modified;
  						}
  						
  						return;
  					}
  					else if (data.action == 'layout')
  					{
  						this.executeLayoutList(data.layouts)
  
  						return;
  					}
  					else if (data.action == 'prompt')
  					{
  						this.spinner.stop();
  						
  						var dlg = new FilenameDialog(this, data.defaultValue || '',
  							(data.okKey != null) ? mxResources.get(data.okKey) : data.ok, function(value)
  						{
  							if (value != null)
  							{
  								parent.postMessage(JSON.stringify({event: 'prompt', value: value, message: data}), '*');
  							}
  							else
  							{
  								parent.postMessage(JSON.stringify({event: 'prompt-cancel', message: data}), '*');
  							}
  						}, (data.titleKey != null) ? mxResources.get(data.titleKey) : data.title);
  						this.showDialog(dlg.container, 300, 80, true, false);
  						dlg.init();
  						
  						return;
  					}
  					else if (data.action == 'draft')
  					{
  						var tmp = extractDiagramXml(data.xml);
  						this.spinner.stop();
  						
  						var dlg = new DraftDialog(this, mxResources.get('draftFound',
  								[data.name || this.defaultFilename]),
  							tmp, mxUtils.bind(this, function()
  						{
  							this.hideDialog();
  							parent.postMessage(JSON.stringify({event: 'draft',
  								result: 'edit', message: data}), '*');
  						}), mxUtils.bind(this, function()
  						{
  							this.hideDialog();
  							parent.postMessage(JSON.stringify({event: 'draft',
  								result: 'discard', message: data}), '*');
  						}), (data.editKey) ? mxResources.get(data.editKey) : null,
  							(data.discardKey) ? mxResources.get(data.discardKey) : null,
  							(data.ignore) ? mxUtils.bind(this, function()
  							{
  								this.hideDialog();
  								parent.postMessage(JSON.stringify({event: 'draft',
  									result: 'ignore', message: data}), '*');
  							}) : null);
  						this.showDialog(dlg.container, 640, 480, true, false, mxUtils.bind(this, function(cancel)
  						{
  							if (cancel)
  							{
  								this.actions.get('exit').funct();
  							}
  						}));
  						
  						try
  						{
  							dlg.init();
  						}
  						catch (e)
  						{
  							parent.postMessage(JSON.stringify({event: 'draft',
  								error: e.toString(), message: data}), '*');
  						}
  						
  						return;
  					}
  					else if (data.action == 'template')
  					{
  						this.spinner.stop();
  						
  						var enableRecentDocs = data.enableRecent == 1;
  						var enableSearchDocs = data.enableSearch == 1;
  						var enableCustomTemp = data.enableCustomTemp == 1;
  						
  						var dlg = new NewDialog(this, false, data.templatesOnly? false : data.callback != null,
  							mxUtils.bind(this, function(xml, name, url, libs)
  						{
  							xml = xml || this.emptyDiagramXml;
  							
  							// LATER: Add autosave option in template message
  							if (data.callback != null)
  							{
  								parent.postMessage(JSON.stringify({event: 'template', xml: xml,
  									blank: xml == this.emptyDiagramXml, name: name,
  									tempUrl: url, libs: libs, builtIn: true,
  									message: data}), '*');
  							}
  							else
  							{
  								fn(xml, evt, xml != this.emptyDiagramXml);
  								
  								// Workaround for status updated before modified applied
  								if (!this.editor.modified)
  								{
  									this.editor.setStatus('');
  								}
  							}
  						}), null, null, null, null, null, null, null, 
  						enableRecentDocs? mxUtils.bind(this, function(recentReadyCallback) 
  						{
  							this.remoteInvoke('getRecentDiagrams', null, null, recentReadyCallback, function()
  							{
  								recentReadyCallback(null, 'Network Error!');
  							});
  						}) : null, 
  						enableSearchDocs?  mxUtils.bind(this, function(searchStr, searchReadyCallback) 
  						{
  							this.remoteInvoke('searchDiagrams', [searchStr], null, searchReadyCallback, function()
  							{
  								searchReadyCallback(null, 'Network Error!');
  							});
  						}) : null, 
  						mxUtils.bind(this, function(url, info, name) 
  						{
  							//If binary files are possible, we can get the file content using remote invokation, imported it, and send final mxFile back
  							parent.postMessage(JSON.stringify({event: 'template', docUrl: url, info: info,
  								name: name}), '*');
  						}), null, null,
  						enableCustomTemp? mxUtils.bind(this, function(customTempCallback) 
  						{
  							this.remoteInvoke('getCustomTemplates', null, null, customTempCallback, function()
  							{
  								customTempCallback({}, 0); //ignore error by sending empty templates
  							});
  						}) : null);
  	
  						this.showDialog(dlg.container, 620, 440, true, false, mxUtils.bind(this, function(cancel)
  						{
  							if (cancel)
  							{
  								this.actions.get('exit').funct();
  							}
  						}));
  						dlg.init();
  						
  						return;
  					}
  					else if (data.action == 'textContent')
  					{
  						//TODO Remove this message and use remote invokation instead
  						var allPagesTxt = this.getDiagramTextContent();
  						parent.postMessage(JSON.stringify({event: 'textContent',
  							data: allPagesTxt, message: data}), '*');
  						return;
  					}
  					else if (data.action == 'status')
  					{
  						if (data.messageKey != null)
  						{
  							this.editor.setStatus(mxUtils.htmlEntities(mxResources.get(data.messageKey)));
  						}
  						else if (data.message != null)
  						{
  							this.editor.setStatus(mxUtils.htmlEntities(data.message));
  						}
  						
  						if (data.modified != null)
  						{
  							this.editor.modified = data.modified;
  						}
  						
  						return;
  					}
  					else if (data.action == 'spinner')
  					{
  						var msg = (data.messageKey != null) ? mxResources.get(data.messageKey) : data.message;
  						
  						if (data.show != null && !data.show)
  						{
  							this.spinner.stop();
  						}
  						else
  						{
  							this.spinner.spin(document.body, msg)
  						}
  	
  						return;
  					}
  					else if (data.action == 'export')
  					{
  						if (data.format == 'png' || data.format == 'xmlpng')
  						{
  							if ((data.spin == null && data.spinKey == null) || this.spinner.spin(document.body,
  								(data.spinKey != null) ? mxResources.get(data.spinKey) : data.spin))
  							{
  								var xml = (data.xml != null) ? data.xml : this.getFileData(true);
  								this.editor.graph.setEnabled(false);
  								var graph = this.editor.graph;
  								
  								var postDataBack = mxUtils.bind(this, function(uri)
  								{
  									this.editor.graph.setEnabled(true);
  									this.spinner.stop();
  									
  									var msg = this.createLoadMessage('export');
  									msg.format = data.format;
  									msg.message = data;
  									msg.data = uri;
  									msg.xml = xml;
  									parent.postMessage(JSON.stringify(msg), '*');
  								});
  								
  								var processUri = mxUtils.bind(this, function(uri)
  								{
  									if (uri == null)
  									{
  										uri = Editor.blankImage;
  									}
  									
  							   	    if (data.format == 'xmlpng')
  							   	    {
  							   	    	uri = Editor.writeGraphModelToPng(uri, 'tEXt', 'mxfile',
  							   	    		encodeURIComponent(xml));
  							   	    }
  							   	    	
  									// Removes temporary graph from DOM
  							   	    if (graph != this.editor.graph)
  									{
  										graph.container.parentNode.removeChild(graph.container);
  									}
  					   	   	    	
  							   	    postDataBack(uri);
  								});
  						
  								var pageId = data.pageId || (this.pages != null? ((data.currentPage) ?
  									this.currentPage.getId() : this.pages[0].getId()) : null);
  								
  								if (this.isExportToCanvas())
  								{
  									// Uses optional XML from incoming message
  									if (data.xml != null && data.xml.length > 0)
  									{
  										ignoreChange = true;
  										this.setFileData(xml);
  										ignoreChange = false;
  									}
  
  									// Exports PNG for first/specific page while other page is visible by creating a graph
  									// LATER: Add caching for the graph or SVG while not on first page
  									if (this.pages != null && this.currentPage.getId() != pageId)
  									{
  										var graphGetGlobalVariable = graph.getGlobalVariable;
  										graph = this.createTemporaryGraph(graph.getStylesheet());
  										var page;
  										
  										for (var i = 0; i < this.pages.length; i++)
  										{
  											if (this.pages[i].getId() == pageId)
  											{
  												page = this.updatePageRoot(this.pages[i]);
  												break;
  											}
  										}
  										
  										//If pageId info is incorrect
  										if (page == null)
  										{
  											page = this.currentPage; 
  										}
  								
  										graph.getGlobalVariable = function(name)
  										{
  											if (name == 'page')
  											{
  												return page.getName();
  											}
  											else if (name == 'pagenumber')
  											{
  												return 1;
  											}
  											
  											return graphGetGlobalVariable.apply(this, arguments);
  										};
  								
  										document.body.appendChild(graph.container);
  										graph.model.setRoot(page.root);
  									}
  	
  									// Set visible layers based on message setting
  									if (data.layerIds != null)
  									{
  										var graphModel = graph.model;
  										var layers = graphModel.getChildCells(graphModel.getRoot());
  										var layerIdsMap = {};
  										
  										for (var i = 0; i < data.layerIds.length; i++)
  										{
  											layerIdsMap[data.layerIds[i]] = true;
  										}
  	
  										for (var i = 0; i < layers.length; i++)
  										{
  											graphModel.setVisible(layers[i], layerIdsMap[layers[i].id] || false);
  										}
  									}
  
  									this.editor.exportToCanvas(mxUtils.bind(this, function(canvas)
  								   	{
  										processUri(canvas.toDataURL('image/png'));
  								   	}), data.width, null, data.background, mxUtils.bind(this, function()
  									{
  								   		processUri(null);
  									}), null, null, data.scale, data.transparent, data.shadow, null,
  										graph, data.border, null, data.grid, data.keepTheme);
  								}
  								else
  								{
  									// Data from server is base64 encoded to avoid binary XHR
  									// Double encoding for XML arg is needed for UTF8 encoding
  							       	var req = new mxXmlRequest(EXPORT_URL, 'format=png&embedXml=' +
  							       		((data.format == 'xmlpng') ? '1' : '0') + 
  							       		(pageId != null? '&pageId=' + pageId : '') +
  							       		(data.layerIds != null && data.layerIds.length > 0? '&extras=' + encodeURIComponent(JSON.stringify({layerIds: data.layerIds})) : '') +
  							       		(data.scale != null? '&scale=' + data.scale : '') +'&base64=1&xml=' +
  							       		encodeURIComponent(xml));
  	
  									req.send(mxUtils.bind(this, function(req)
  									{
  										// Temp graph was never created at this point so we can
  										// skip processUri since it already contains the XML
  										if (req.getStatus() >= 200 && req.getStatus() <= 299)
  										{
  											postDataBack('data:image/png;base64,' + req.getText());
  										}
  										else
  										{
  											processUri(null);
  										}
  									}), mxUtils.bind(this, function()
  									{
  										processUri(null);
  									}));
  								}
  							}
  						}
  						else
  						{
  							// SVG is generated from graph so parse optional XML
  							if (data.xml != null && data.xml.length > 0)
  							{
  								ignoreChange = true;
  								this.setFileData(data.xml);
  								ignoreChange = false;
  							}
  							
  							var msg = this.createLoadMessage('export');
  							
  							// Attaches incoming message
  							msg.message = data;
  							
  							// Forces new HTML format if pages exists
  							if (data.format == 'html2' || (data.format == 'html' && (urlParams['pages'] != '0' ||
  								(this.pages != null && this.pages.length > 1))))
  							{
  								var node = this.getXmlFileData();
  								msg.xml = mxUtils.getXml(node);
  								msg.data = this.getFileData(null, null, true, null, null, null, node);
  								msg.format = data.format;
  							}
  							else if (data.format == 'html')
  							{
  								var xml = this.editor.getGraphXml();
  								msg.data = this.getHtml(xml, this.editor.graph);
  								msg.xml = mxUtils.getXml(xml);
  								msg.format = data.format;
  							}
  							else
  							{
  								// Creates a preview with no alt text for unsupported browsers
  					        	mxSvgCanvas2D.prototype.foAltText = null;
  					        	
  					        	var bg = (data.background != null) ? data.background : this.editor.graph.background;
  					        	
  					        	if (bg == mxConstants.NONE)
  					        	{
  					        		bg = null;
  					        	}
  	
  								msg.xml = this.getFileData(true, null, null, null, null,
  									null, null, null, null, false);
  								msg.format = 'svg';
  								
  								var postResult = mxUtils.bind(this, function(svg)
  								{
  									this.editor.graph.setEnabled(true);
  									this.spinner.stop();
  								
  									msg.data = Editor.createSvgDataUri(svg);
  									parent.postMessage(JSON.stringify(msg), '*');
  								});
  								
  								if (data.format == 'xmlsvg')
  								{
  									if ((data.spin == null && data.spinKey == null) || this.spinner.spin(document.body,
  										(data.spinKey != null) ? mxResources.get(data.spinKey) : data.spin))
  									{
  										this.getEmbeddedSvg(msg.xml, this.editor.graph, null, true, postResult, null, null,
  											data.embedImages, bg, data.scale, data.border, data.shadow, data.keepTheme);
  									}
  								}
  								else
  					        	{
  									if ((data.spin == null && data.spinKey == null) || this.spinner.spin(document.body,
  										(data.spinKey != null) ? mxResources.get(data.spinKey) : data.spin))
  									{
  										this.editor.graph.setEnabled(false);
  										var svgRoot = this.editor.graph.getSvg(bg, data.scale, data.border, null, null,
  											null, null, null, null, this.editor.graph.shadowVisible || data.shadow,
  											null, data.keepTheme);
  										
  										if (this.editor.graph.shadowVisible || data.shadow)
  										{
  											this.editor.graph.addSvgShadow(svgRoot);
  										}
  
  					        			this.embedFonts(svgRoot, mxUtils.bind(this, function(svgRoot)
  										{
  					        				if (data.embedImages || data.embedImages == null)
  					        				{
  												this.editor.convertImages(svgRoot, mxUtils.bind(this, function(svgRoot)
  							        			{
  													postResult(mxUtils.getXml(svgRoot));
  							        			}));
  					        				}
  					        				else
  					        				{
  					        					postResult(mxUtils.getXml(svgRoot));
  					        				}
  										}));
  									}
  					        	}
  								
  								return;
  							}
  	
  							parent.postMessage(JSON.stringify(msg), '*');
  						}
  						
  						return;
  					}
  					else if (data.action == 'load')
  					{
  						autosave = data.autosave == 1;
  						this.hideDialog();
  						
  						if (data.modified != null && urlParams['modified'] == null)
  						{
  							urlParams['modified'] = data.modified;
  						}
  						
  						if (data.saveAndExit != null && urlParams['saveAndExit'] == null)
  						{
  							urlParams['saveAndExit'] = data.saveAndExit;
  						}
  						
  						if (data.noSaveBtn != null && urlParams['noSaveBtn'] == null)
  						{
  							urlParams['noSaveBtn'] = data.noSaveBtn;
  						}
  						
  						if (data.noExitBtn != null && urlParams['noExitBtn'] == null)
  						{
  							urlParams['noExitBtn'] = data.noExitBtn;
  						}
  						
  						if (data.title != null && this.buttonContainer != null)
  						{
  							var tmp = document.createElement('span');
  							mxUtils.write(tmp, data.title);
  							
  							if (uiTheme == 'atlas')
  							{
  								this.buttonContainer.style.paddingRight = '12px';
  								this.buttonContainer.style.paddingTop = '6px';
  								this.buttonContainer.style.right = urlParams['noLangIcon'] == '1'? '0' : '25px';
  							}
  							else if (uiTheme != 'min')
  							{
  								this.buttonContainer.style.paddingRight = '38px';
  								this.buttonContainer.style.paddingTop = '6px';
  							}
  	
  							if (this.embedFilenameSpan != null)
  							{
  								this.embedFilenameSpan.parentNode.removeChild(this.embedFilenameSpan);
  							}
  	
  							this.buttonContainer.appendChild(tmp);
  							this.embedFilenameSpan = tmp;
  						}
  						
  						try
  						{
  							if (data.libs)
  							{
  								this.sidebar.showEntries(data.libs);
  							}
  						}
  						catch(e){}
  
  						if (data.xmlpng != null)
  						{
  							data = this.extractGraphModelFromPng(data.xmlpng);
  						}
  						else if (data.descriptor != null)
  						{
  							data = data.descriptor;
  						}
  						else
  						{
  							data = data.xml;
  						}						
  					}
  					else if (data.action == 'merge')
  					{
  						var file = this.getCurrentFile();
  						
  						if (file != null)
  						{
  							var tmp = extractDiagramXml(data.xml);
  
  							if (tmp != null && tmp != '')
  							{
  								file.mergeFile(new LocalFile(this, tmp), function()
  								{
  									parent.postMessage(JSON.stringify({event: 'merge', message: data}), '*');
  								}, function(err)
  								{
  									parent.postMessage(JSON.stringify({event: 'merge', message: data, error: err}), '*');
  								});
  							}
  						}
  						
  						return;
  					}
  					else if (data.action == 'remoteInvokeReady') 
  					{
  						this.handleRemoteInvokeReady(parent);
  						return;
  					}
  					else if (data.action == 'remoteInvoke') 
  					{
  						this.handleRemoteInvoke(data, evt.origin);
  						return;
  					}
  					else if (data.action == 'remoteInvokeResponse')
  					{
  						this.handleRemoteInvokeResponse(data);
  						return;
  					}
  					else
  					{
  						// Unknown message must stop execution
  						parent.postMessage(JSON.stringify({error: 'unknownMessage', data: JSON.stringify(data)}), '*');
  						
  						return;
  					}
  				}
  				catch (e)
  				{
  					// TODO: Block handling of more messages when in error state
  					this.handleError(e);
  				}
  			}
  						
  			var getData = mxUtils.bind(this, function()
  			{
  				return (urlParams['pages'] != '0' || (this.pages != null && this.pages.length > 1)) ?
  					this.getFileData(true): mxUtils.getXml(this.editor.getGraphXml());
  			});
  			
  			var doLoad = mxUtils.bind(this, function(data, evt)
  			{
  				ignoreChange = true;
  				try
  				{
  					fn(data, evt);
  				}
  				catch (e)
  				{
  					this.handleError(e);
  				}
  				ignoreChange = false;
  				
  				if (urlParams['modified'] != null)
  				{
  					this.editor.setStatus('');
  				}
  
  				lastData = getData();
  
  				if (autosave && changeListener == null)
  				{
  					changeListener = mxUtils.bind(this, function(sender, eventObject)
  					{
  						var data = getData();
  						
  						if (data != lastData && !ignoreChange)
  						{
  							var msg = this.createLoadMessage('autosave');
  							msg.xml = data;
  							var parent = window.opener || window.parent;
  							parent.postMessage(JSON.stringify(msg), '*');
  						}
  						
  						lastData = data;
  					});
  					
  					this.editor.graph.model.addListener(mxEvent.CHANGE, changeListener);
  
  					// Some options trigger autosave
  					this.editor.graph.addListener('gridSizeChanged', changeListener);
  					this.editor.graph.addListener('shadowVisibleChanged', changeListener);
  					this.addListener('pageFormatChanged', changeListener);
  					this.addListener('pageScaleChanged', changeListener);
  					this.addListener('backgroundColorChanged', changeListener);
  					this.addListener('backgroundImageChanged', changeListener);
  					this.addListener('foldingEnabledChanged', changeListener);
  					this.addListener('mathEnabledChanged', changeListener);
  					this.addListener('gridEnabledChanged', changeListener);
  					this.addListener('guidesEnabledChanged', changeListener);
  					this.addListener('pageViewChanged', changeListener);
  				}
  				
  				// Sends the bounds of the graph to the host after parsing
  				if (urlParams['returnbounds'] == '1' || urlParams['proto'] == 'json')
  				{
  					var resp = this.createLoadMessage('load');
  					
  					// Attaches XML to response
  					resp.xml = data;
  					
  					parent.postMessage(JSON.stringify(resp), '*');
  				}
  			});
  			
  			if (data != null && typeof data.substring === 'function' && data.substring(0, 34) == 'data:application/vnd.visio;base64,')
  			{
  				// Checks VND binary magic number in base64
  				var filename = (data.substring(34, 45) == '0M8R4KGxGuE') ? 'raw.vsd' : 'raw.vsdx';
  				
  				this.importVisio(this.base64ToBlob(data.substring(data.indexOf(',') + 1)), function(xml)
  				{
  					doLoad(xml, evt);
  				}, mxUtils.bind(this, function(e)
  				{
  					this.handleError(e);
  				}), filename);
  			}
  			else if (data != null && typeof data.substring === 'function' && !this.isOffline() && new XMLHttpRequest().upload && this.isRemoteFileFormat(data, ''))
  			{
  				// Asynchronous parsing via server
  				this.parseFile(new Blob([data], {type: 'application/octet-stream'}), mxUtils.bind(this, function(xhr)
  				{
  					if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status <= 299 &&
  						xhr.responseText.substring(0, 13) == '<mxGraphModel')
  					{
  						doLoad(xhr.responseText, evt);
  					}
  				}), '');
  			}
  			else if (data != null && typeof data.substring === 'function' && this.isLucidChartData(data))
  			{
  				this.convertLucidChart(data, mxUtils.bind(this, function(xml)
  				{
  					doLoad(xml);
  				}), mxUtils.bind(this, function(e)
  				{
  					this.handleError(e);
  				}));
  			}
  			else if (data != null && typeof data === 'object' && data.format != null && (data.data != null || data.url != null))
  			{
  				this.loadDescriptor(data, mxUtils.bind(this, function(e)
  				{
  					doLoad(getData(), evt);
  				}), mxUtils.bind(this, function(e)
  				{
  					this.handleError(e, mxResources.get('errorLoadingFile'));
  				}));
  			}
  			else
  			{
  				data = extractDiagramXml(data);
  				doLoad(data, evt);
  			}
  		}));
  		
  		// Requests data from the sender. This is a workaround for not allowing
  		// the opener to listen for the onload event if not in the same origin.
  		var parent = window.opener || window.parent;
  		var msg = (urlParams['proto'] == 'json') ? JSON.stringify({event: 'init'}) : (urlParams['ready'] || 'ready');
  		parent.postMessage(msg, '*');
  		
  		// Adds JSON event for opening links
  		if (urlParams['proto'] == 'json')
  		{
  			var graphOpenLink = this.editor.graph.openLink;
  			
  			this.editor.graph.openLink = function(href, target, allowOpener)
  			{
  				graphOpenLink.apply(this, arguments);
  				
  				parent.postMessage(JSON.stringify({event: 'openLink', href: href, target: target, allowOpener: allowOpener}), '*');
  			};
  		}
  	};
  	
  	/**
  	 * Adds the buttons for embedded mode.
  	 */
  	EditorUi.prototype.addEmbedButtons = function()
  	{
  		if (this.menubar != null)
  		{
  			var div = document.createElement('div');
  			div.style.display = 'inline-block';
  			div.style.position = 'absolute';
  			div.style.paddingTop = (uiTheme == 'atlas') ? '2px' : '0px';
  			div.style.paddingLeft = '8px';
  			div.style.paddingBottom = '2px';
  
  			var button = document.createElement('button');
  			button.className = 'geBigButton';
  			var lastBtn = button;
  			
  			if (urlParams['noSaveBtn'] == '1')
  			{
  				if (urlParams['saveAndExit'] != '0')
  				{
  					var saveAndExitTitle = urlParams['publishClose'] == '1' ? mxResources.get('publish') : mxResources.get('saveAndExit');
  					mxUtils.write(button, saveAndExitTitle);
  					button.setAttribute('title', saveAndExitTitle);
  					
  					mxEvent.addListener(button, 'click', mxUtils.bind(this, function()
  					{
  						this.actions.get('saveAndExit').funct();
  					}));
  					
  					div.appendChild(button);
  				}
  			}
  			else
  			{
  				mxUtils.write(button, mxResources.get('save'));
  				button.setAttribute('title', mxResources.get('save') + ' (' + Editor.ctrlKey + '+S)');
  				
  				mxEvent.addListener(button, 'click', mxUtils.bind(this, function()
  				{
  					this.actions.get('save').funct();
  				}));
  				
  				div.appendChild(button);
  				
  				if (urlParams['saveAndExit'] == '1')
  				{
  					button = document.createElement('a');
  					mxUtils.write(button, mxResources.get('saveAndExit'));
  					button.setAttribute('title', mxResources.get('saveAndExit'));
  					button.className = 'geBigButton geBigStandardButton';
  					button.style.marginLeft = '6px';
  					
  					mxEvent.addListener(button, 'click', mxUtils.bind(this, function()
  					{
  						this.actions.get('saveAndExit').funct();
  					}));
  					
  					div.appendChild(button);
  					lastBtn = button;
  				}
  			}
  
  			if (urlParams['noExitBtn'] != '1')
  			{
  				button = document.createElement('a');
  				var exitTitle = urlParams['publishClose'] == '1' ? mxResources.get('close') : mxResources.get('exit');
  				mxUtils.write(button, exitTitle);
  				button.setAttribute('title', exitTitle);
  				button.className = 'geBigButton geBigStandardButton';
  				button.style.marginLeft = '6px';
  				
  				mxEvent.addListener(button, 'click', mxUtils.bind(this, function()
  				{
  					this.actions.get('exit').funct();
  				}));
  				
  				div.appendChild(button);
  				lastBtn = button;
  			}
  			
  			lastBtn.style.marginRight = '20px';
  			
  			this.toolbar.container.appendChild(div);
  			this.toolbar.staticElements.push(div);
  			div.style.right = (uiTheme != 'atlas') ? '52px' : '42px';
  		}
  	};
  
  	/**
  	 * 
  	 */
  	EditorUi.prototype.showImportCsvDialog = function()
  	{
  		if (this.importCsvDialog == null)
  		{
  			this.importCsvDialog = new TextareaDialog(this, mxResources.get('csv') + ':',
      			Editor.defaultCsvValue, mxUtils.bind(this, function(newValue)
  			{
      			this.importCsv(newValue);
  			}), null, null, 620, 430, null, true, true, mxResources.get('import'),
  				!this.isOffline() ? 'https://drawio-app.com/import-from-csv-to-drawio/' : null);
  		}
  		
  		this.showDialog(this.importCsvDialog.container, 640, 520, true, true, null, null, null, null, true);
  		this.importCsvDialog.init();
  	};
  
  
  	/**
  	 * Runs the layout from the given JavaScript array which is of the form [{layout: name, config: obj}, ...]
  	 * where name is the layout constructor name and config contains the properties of the layout instance.
  	 */
  	EditorUi.prototype.executeLayoutList = function(layoutList, done)
  	{
  		var graph = this.editor.graph;
  		var cells = graph.getSelectionCells();
  
  		for (var i = 0; i < layoutList.length; i++)
  		{
  			var layout = new window[layoutList[i].layout](graph);
  			
  			if (layoutList[i].config != null)
  			{
  				for (var key in layoutList[i].config)
  				{
  					layout[key] = layoutList[i].config[key];
  				}
  			}
  			
  			this.executeLayout(function()
  			{
  				layout.execute(graph.getDefaultParent(), cells.length == 0 ? null : cells);
  			}, i == layoutList.length - 1, done);
  		}
  	};
  	
  	/**
  	 *
  	 */
  	EditorUi.prototype.importCsv = function(text, done)
  	{
  		try
  		{
      		var lines = text.split('\n');
      		var allCells = [];
      		var cells = [];
      		var dups = {};
      		
      		if (lines.length > 0)
      		{
          		// Internal lookup table
          		var lookups = {};
          		
          		// Default values
          		var vars = null;
          		var style = null;
          		var styles = null;
          		var stylename = null;
          		var labelname = null;
          		var labels = null;
          		var parentstyle = null;
          		var identity = null;
          		var parent = null;
          		var namespace = '';
          		var width = 'auto';
          		var height = 'auto';
          		var left = null;
          		var top = null;
          		var edgespacing = 40;
          		var nodespacing = 40;
          		var levelspacing = 100;
          		var padding = 0;
          		
          		var graph = this.editor.graph;
  				var view = graph.view;
  				var bds = graph.getGraphBounds();
  
  				// Delayed after optional layout
      			var afterInsert = function()
      			{
      				if (done != null)
      				{
      					done(select);
      				}
      				else
      				{
      					graph.setSelectionCells(select);
      					graph.scrollCellToVisible(graph.getSelectionCell());
      				}
      			};
      				
      			// Computes unscaled, untranslated graph bounds
      			var pt = graph.getFreeInsertPoint();
  				var x0 = pt.x;
  				var y0 = pt.y;
  				var y = y0;
  
      			// Default label value depends on column names
          		var label = null;
          		
      			// Default layout to run.
          		var layout = 'auto';
          		
          		// Name of the attribute that contains the parent reference
          		var parent = null;
          		
          		// Name of the attribute that contains the references for creating edges
          		var edges = [];
  
          		// Name of the column for hyperlinks
          		var link = null;
          		
          		// String array of names to remove from metadata
          		var ignore = null;
          		
          		// Read processing instructions first
          		var index = 0;
          		
          		while (index < lines.length && lines[index].charAt(0) == '#')
          		{
          			var text = lines[index];
          			index++;
          			
          			while (index < lines.length && text.charAt(text.length - 1) == '\\' &&
          				lines[index].charAt(0) == '#')
          			{
          				text = text.substring(0, text.length - 1) + mxUtils.trim(lines[index].substring(1));
          				index++;
          			}
          			
          			if (text.charAt(1) != '#')
          			{
  	    				// Processing instruction
  	    				var idx = text.indexOf(':');
  	    				
  	    				if (idx > 0)
  	    				{
  		    				var key = mxUtils.trim(text.substring(1, idx));
  		    				var value = mxUtils.trim(text.substring(idx + 1));
  	
  		    				if (key == 'label')
  		    				{
  		    					label = graph.sanitizeHtml(value);
  		    				}
  		    				else if (key == 'labelname' && value.length > 0 && value != '-')
  		    				{
  		    					labelname = value;
  		    				}
  		    				else if (key == 'labels' && value.length > 0 && value != '-')
  		    				{
  		    					labels = JSON.parse(value);
  		    				}
  		    				else if (key == 'style')
  		    				{
  		    					style = value;
  		    				}
  		    				else if (key == 'parentstyle')
  		    				{
  		    					parentstyle = value;
  		    				}
  		    				else if (key == 'stylename' && value.length > 0 && value != '-')
  		    				{
  		    					stylename = value;
  		    				}
  		    				else if (key == 'styles' && value.length > 0 && value != '-')
  		    				{
  		    					styles = JSON.parse(value);
  		    				}
  		    				else if (key == 'vars' && value.length > 0 && value != '-')
  		    				{
  		    					vars = JSON.parse(value);
  		    				}
  		    				else if (key == 'identity' && value.length > 0 && value != '-')
  		    				{
  		    					identity = value;
  		    				}
  		    				else if (key == 'parent' && value.length > 0 && value != '-')
  		    				{
  		    					parent = value;
  		    				}
  		    				else if (key == 'namespace' && value.length > 0 && value != '-')
  		    				{
  		    					namespace = value;
  		    				}
  		    				else if (key == 'width')
  		    				{
  		    					width = value;
  		    				}
  		    				else if (key == 'height')
  		    				{
  		    					height = value;
  		    				}
  		    				else if (key == 'left' && value.length > 0)
  		    				{
  		    					left = value;
  		    				}
  		    				else if (key == 'top' && value.length > 0)
  		    				{
  		    					top = value;
  		    				}
  		    				else if (key == 'ignore')
  		    				{
  		    					ignore = value.split(',');
  		    				}
  		    				else if (key == 'connect')
  		    				{
  		    					edges.push(JSON.parse(value));
  		    				}
  		    				else if (key == 'link')
  		    				{
  		    					link = value;
  		    				}
  		    				else if (key == 'padding')
  		    				{
  		    					padding = parseFloat(value);
  		    				}
  		    				else if (key == 'edgespacing')
  		    				{
  		    					edgespacing = parseFloat(value);
  		    				}
  		    				else if (key == 'nodespacing')
  		    				{
  		    					nodespacing = parseFloat(value);
  		    				}
  		    				else if (key == 'levelspacing')
  		    				{
  		    					levelspacing = parseFloat(value);
  		    				}
  		    				else if (key == 'layout')
  		    				{
  		    					layout = value;
  		    				}
  	    				}
          			}
          		}
          		
          		if (lines[index] == null)
          		{
          			throw new Error(mxResources.get('invalidOrMissingFile'));
          		}
          		
      			// Converts identity and parent to index and validates XML attribute names
      			var keys = this.editor.csvToArray(lines[index]);
          		var identityIndex = null;
      			var parentIndex = null;
      			var attribs = [];
      			
  				for (var i = 0; i < keys.length; i++)
  	    		{
  					if (identity == keys[i])
  					{
  						identityIndex = i;
  					}
  					
  					if (parent == keys[i])
  					{
  						parentIndex = i;
  					}
  					
  					attribs.push(mxUtils.trim(keys[i]).replace(/[^a-z0-9]+/ig, '_').
  						replace(/^\d+/, '').replace(/_+$/, ''));
  	    		}
  				
      			if (label == null)
      			{
      				label = '%' + attribs[0] + '%';
      			}
      			
      			if (edges != null)
  				{
  					for (var e = 0; e < edges.length; e++)
  					{
  						if (lookups[edges[e].to] == null)
  						{
  							lookups[edges[e].to] = {};
  						}
  					}
  				}
      			
      			// Parse and validate input
      			var arrays = [];
      			
      			for (var i = index + 1; i < lines.length; i++)
  	    		{
  	    			var values = this.editor.csvToArray(lines[i]);
  	    			
  	    			if (values == null)
  	    			{
  	    				var short = (lines[i].length > 40) ? lines[i].substring(0, 40) + '...' : lines[i];
  	    				
  	    				throw new Error(short + ' (' + i + '):\n' + mxResources.get('containsValidationErrors'));
  	    			}
  	    			else if (values.length > 0)
  		    		{
  	    				arrays.push(values);
  	    			}
  	    		}
      			
          		graph.model.beginUpdate();
          		try
          		{
  	    			for (var i = 0; i < arrays.length; i++)
  		    		{
      	    			var values = arrays[i];
      					var cell = null;
      					var id = (identityIndex != null) ? namespace + values[identityIndex] : null;
      					
      					if (id != null)
      					{
      						cell = graph.model.getCell(id);
      					}
      					
      					var exists = cell != null;
      					var newCell = new mxCell(label, new mxGeometry(x0, y,
  		    				0, 0), style || 'whiteSpace=wrap;html=1;');
      					newCell.vertex = true;
      					newCell.id = id;
  						
  						for (var j = 0; j < values.length; j++)
  				    	{
  							graph.setAttributeForCell(newCell, attribs[j], values[j]);
  				    	}
  						
  						if (labelname != null && labels != null)
  						{
  							var tempLabel = labels[newCell.getAttribute(labelname)];
  							
  							if (tempLabel != null)
  							{
  								graph.labelChanged(newCell, tempLabel);
  							}
  						}
  
  						if (stylename != null && styles != null)
  						{
  							var tempStyle = styles[newCell.getAttribute(stylename)];
  							
  							if (tempStyle != null)
  							{
  								newCell.style = tempStyle;
  							}
  						}
  
  						graph.setAttributeForCell(newCell, 'placeholders', '1');
  						newCell.style = graph.replacePlaceholders(newCell, newCell.style, vars);
  
  						if (exists)
  						{
  							graph.model.setGeometry(cell, newCell.geometry);
  							graph.model.setStyle(cell, newCell.style);
  							
  							if (mxUtils.indexOf(cells, cell) < 0)
  							{
  								cells.push(cell);
  							}
  						}
  						
  						cell = newCell;
      					
  						if (!exists)
  						{
  	    					for (var e = 0; e < edges.length; e++)
  	    					{
  	    						lookups[edges[e].to][cell.getAttribute(edges[e].to)] = cell;
  	    					}
  						}
  						
  						if (link != null && link != 'link')
  						{
  							graph.setLinkForCell(cell, cell.getAttribute(link));
  							
  							// Removes attribute
  							graph.setAttributeForCell(cell, link, null);
  						}
  						
  						// Sets the size
  						graph.fireEvent(new mxEventObject('cellsInserted', 'cells', [cell]));
  						var size = this.editor.graph.getPreferredSizeForCell(cell);
  						
  						if (cell.vertex)
  						{
  							if (left != null && cell.getAttribute(left) != null)
  							{
  								cell.geometry.x = x0 + parseFloat(cell.getAttribute(left));
  							}
  
  							if (top != null && cell.getAttribute(top) != null)
  							{
  								cell.geometry.y = y0 + parseFloat(cell.getAttribute(top));
  							}
  							
  							if (width.charAt(0) == '@' && cell.getAttribute(width.substring(1)) != null)
  							{
  								cell.geometry.width = parseFloat(cell.getAttribute(width.substring(1)));
  							}
  							else
  							{
  								cell.geometry.width = (width == 'auto') ? size.width + padding : parseFloat(width);
  							}
  
  							if (height.charAt(0) == '@' && cell.getAttribute(height.substring(1)) != null)
  							{
  								cell.geometry.height = parseFloat(cell.getAttribute(height.substring(1)));
  							}
  							else
  							{
  								cell.geometry.height = (height == 'auto') ? size.height + padding : parseFloat(height);
  							}
  							
  							y += cell.geometry.height + nodespacing;
  						}
  						
  						if (!exists)
  						{
  	    					var parent = (parentIndex != null) ? graph.model.getCell(
  	    						namespace + values[parentIndex]) : null;
  							allCells.push(cell);
  	    					
  	    					if (parent != null)
  	    					{
  	    						parent.style = graph.replacePlaceholders(parent, parentstyle, vars);
  	    						graph.addCell(cell, parent);
  	    					}
  	    					else
  	    					{
  	    						cells.push(graph.addCell(cell));
  	    					}
  						}
  						else
  						{
  							if (dups[id] == null)
  							{
  								dups[id] = [];
  							}
  							
  							dups[id].push(cell);
  						}
  	    			}
  
  					var roots = cells.slice();
  					var select = cells.slice();
  	
  					for (var e = 0; e < edges.length; e++)
  					{
  						var edge = edges[e];
  	
  						for (var i = 0; i < allCells.length; i++)
  	    				{
  							var cell = allCells[i];
  							
  							var insertEdge = mxUtils.bind(this, function(realCell, dataCell, edge)
  							{
  								var tmp = dataCell.getAttribute(edge.from);
  		    					
  		    					if (tmp != null)
  		    					{
  		    						// Removes attribute
  			    					graph.setAttributeForCell(dataCell, edge.from, null);
  			    					
  			    					if (tmp != '')
  			    					{
  			    						var refs = tmp.split(',');
  			    						
  				    					for (var j = 0; j < refs.length; j++)
  				        				{
  				    						var ref = lookups[edge.to][refs[j]];
  				    						
  				    						if (ref != null)
  				    						{
  				    							var label = edge.label;
  				    							
  				    							if (edge.fromlabel != null)
  				    							{
  				    								label = (dataCell.getAttribute(edge.fromlabel) || '') + (label || '');
  				    							}
  				    							
  				    							if (edge.sourcelabel != null)
  				    							{
  				    								label = graph.replacePlaceholders(dataCell,
  														edge.sourcelabel, vars) + (label || '');
  				    							}
  							
  				    							if (edge.tolabel != null)
  				    							{
  				    								label = (label || '') + (ref.getAttribute(edge.tolabel) || '');
  				    							}
  				    											    							
  				    							if (edge.targetlabel != null)
  				    							{
  				    								label = (label || '') + graph.replacePlaceholders(
  														ref, edge.targetlabel, vars);
  				    							}
  							
  				    							var placeholders = ((edge.placeholders == 'target') ==
  				    								!edge.invert) ? ref : realCell;
  				    							var style = (edge.style != null) ?
  				    								graph.replacePlaceholders(placeholders, edge.style, vars) :
  				    								graph.createCurrentEdgeStyle();
  
  				    							var edgeCell = graph.insertEdge(null, null, label || '', (edge.invert) ?
  				    								ref : realCell, (edge.invert) ? realCell : ref, style);
  				    							
  				    							// Adds additional edge labels
  				    							if (edge.labels != null)
  				    							{
  				    								for (var k = 0; k < edge.labels.length; k++)
  				    								{
  				    									var def = edge.labels[k];
  				    									var elx = (def.x != null) ? def.x : 0;
  				    									var ely = (def.y != null) ? def.y : 0;
  				    									var st = 'resizable=0;html=1;';
  				    									var el = new mxCell(def.label || k,
  				    										new mxGeometry(elx,  ely, 0, 0), st);
  				    									el.vertex = true;
  				    									el.connectable = false;
  				    									el.geometry.relative = true;
  									
  														if (def.placeholders != null)
  														{
  															el.value = graph.replacePlaceholders(
  																((def.placeholders == 'target') ==
  							    								!edge.invert) ? ref : realCell,
  															el.value, vars)
  														}
  				    									
  				    									if (def.dx != null || def.dy != null)
  				    									{
  				    										el.geometry.offset = new mxPoint(
  				    											(def.dx != null) ? def.dx : 0,
  				    											(def.dy != null) ? def.dy : 0);
  				    									}
  									
  				    									edgeCell.insert(el);
  				    								}
  				    							}
  				    							
  				    							select.push(edgeCell);
  				    							mxUtils.remove((edge.invert) ? realCell : ref, roots);
  				    						}
  				        				}
  			    					}
  		    					}
  							});
  							
  							insertEdge(cell, cell, edge);
  
      						// Checks more entries
      						if (dups[cell.id] != null)
      						{
      							for (var j = 0; j < dups[cell.id].length; j++)
      		    				{
      								insertEdge(cell, dups[cell.id][j], edge);
      		    				}
      						}
  						}
  					}
  						
  					// Removes ignored attributes after processing above
  					if (ignore != null)
  					{
  						for (var i = 0; i < allCells.length; i++)
  						{
  							var cell = allCells[i];
  							
  							for (var j = 0; j < ignore.length; j++)
  					    	{
  								graph.setAttributeForCell(cell, mxUtils.trim(ignore[j]), null);
  					    	}
  						}
  					}
  					
  					if (cells.length > 0)
  					{
  						var edgeLayout = new mxParallelEdgeLayout(graph);
  						edgeLayout.spacing = edgespacing;
  						edgeLayout.checkOverlap = true;
  				
  						var postProcess = function()
  						{
  							if (edgeLayout.spacing > 0)
  							{
  								edgeLayout.execute(graph.getDefaultParent());
  							}
  							
  			    			// Aligns cells to grid and/or rounds positions
  							for (var i = 0; i < cells.length; i++)
  		    				{
  								var geo = graph.getCellGeometry(cells[i]);
  								geo.x = Math.round(graph.snap(geo.x));
  								geo.y = Math.round(graph.snap(geo.y));
  								
  								if (width == 'auto')
  								{
  									geo.width = Math.round(graph.snap(geo.width));	
  								}
  								
  								if (height == 'auto')
  								{
  									geo.height = Math.round(graph.snap(geo.height));	
  								}
  		    				}
  						};
  						
  						if (layout.charAt(0) == '[')
  						{
  			    			// Required for layouts to work with new cells
  							var temp = afterInsert;
  			    			graph.view.validate();
  							this.executeLayoutList(JSON.parse(layout), function()
  							{
  								postProcess();
  								temp();
  							});
  							afterInsert = null;
  						}
  						else if (layout == 'circle')
  						{
  							var circleLayout = new mxCircleLayout(graph);
  							circleLayout.disableEdgeStyle = false;
  		    				circleLayout.resetEdges = false;
  		    				
  		    				var circleLayoutIsVertexIgnored = circleLayout.isVertexIgnored;
  		    				
  			    			// Ignore other cells
  		    				circleLayout.isVertexIgnored = function(vertex)
  		    				{
  		    					return circleLayoutIsVertexIgnored.apply(this, arguments) ||
  		    						mxUtils.indexOf(cells, vertex) < 0;
  		    				};
  						
  				    		this.executeLayout(function()
  				    		{
  				    			circleLayout.execute(graph.getDefaultParent());
  				    			postProcess();
  				    		}, true, afterInsert);
  						
  				    		afterInsert = null;
  						}
  						else if (layout == 'horizontaltree' || layout == 'verticaltree' ||
  								(layout == 'auto' && select.length == 2 * cells.length - 1 && roots.length == 1))
  		    			{
  			    			// Required for layouts to work with new cells
  			    			graph.view.validate();
  			    			
  		    				var treeLayout = new mxCompactTreeLayout(graph, layout == 'horizontaltree');
  		    				treeLayout.levelDistance = nodespacing;
  		    				treeLayout.edgeRouting = false;
  		    				treeLayout.resetEdges = false;
  		    				
  		    				this.executeLayout(function()
  		    	    		{
  		    					treeLayout.execute(graph.getDefaultParent(), (roots.length > 0) ? roots[0] : null);
  		    	    		}, true, afterInsert);
  		    				
  		    				afterInsert = null;
  		    			}
  		    			else if (layout == 'horizontalflow' || layout == 'verticalflow' ||
  		    					(layout == 'auto' && roots.length == 1))
  		    			{
  			    			// Required for layouts to work with new cells
  			    			graph.view.validate();
  			    			
  			    			var flowLayout = new mxHierarchicalLayout(graph,
  			    				(layout == 'horizontalflow') ? mxConstants.DIRECTION_WEST : mxConstants.DIRECTION_NORTH);
  			    			flowLayout.intraCellSpacing = nodespacing;
  			    			flowLayout.parallelEdgeSpacing = edgespacing;
  			    			flowLayout.interRankCellSpacing = levelspacing;
  			    			flowLayout.disableEdgeStyle = false;
  			    			
  			        		this.executeLayout(function()
  			        		{
  			        			flowLayout.execute(graph.getDefaultParent(), select);
  			        			
  			        			// Workaround for flow layout moving cells to origin
  			        			graph.moveCells(select, x0, y0);
  			        		}, true, afterInsert);
  				    			
  			    			afterInsert = null;
  			    		}
  		    			else if (layout == 'organic' || (layout == 'auto' &&
  		    					select.length > cells.length))
  		    			{
  			    			// Required for layouts to work with new cells
  			    			graph.view.validate();
  			    			
  		    				var organicLayout = new mxFastOrganicLayout(graph);
  		    				organicLayout.forceConstant = nodespacing * 3;
  		    				organicLayout.disableEdgeStyle = false;
  		    				organicLayout.resetEdges = false;
  		
  		    				var organicLayoutIsVertexIgnored = organicLayout.isVertexIgnored;
  		
  			    				// Ignore other cells
  		    				organicLayout.isVertexIgnored = function(vertex)
  		    				{
  		    					return organicLayoutIsVertexIgnored.apply(this, arguments) ||
  		    						mxUtils.indexOf(cells, vertex) < 0;
  		    				};
  		
  		    	    		this.executeLayout(function()
  		    	    		{
  		    	    			organicLayout.execute(graph.getDefaultParent());
  				    			postProcess();
  		    	    		}, true, afterInsert);
  		    	    		
  		    	    		afterInsert = null;
  		    			}
  					}
  	    			
  	    			this.hideDialog();
          		}
          		finally
          		{
          			graph.model.endUpdate();
          		}
  				
          		if (afterInsert != null)
          		{
          			afterInsert();
          		}
      		}
  		}
  		catch (e)
  		{
  			this.handleError(e);
  		}
  	};
  
  	/**
  	 * Translates this point by the given vector.
  	 * 
  	 * @param {number} dx X-coordinate of the translation.
  	 * @param {number} dy Y-coordinate of the translation.
  	 */
  	EditorUi.prototype.getSearch = function(exclude)
  	{
  		var result = '';
  		
  		if (urlParams['offline'] != '1' && urlParams['demo'] != '1' && exclude != null && window.location.search.length > 0)
  		{
  			var amp = '?';
  			
  			for (var key in urlParams)
  			{
  				if (mxUtils.indexOf(exclude, key) < 0 && urlParams[key] != null)
  				{
  					result += amp + key + '=' + urlParams[key];
  					amp = '&';
  				}
  			}
  		}
  		else
  		{
  			result = window.location.search;
  		}
  		
  		return result;
  	};
  
  	/**
  	 * Returns the URL for a copy of this editor with no state.
  	 */
  	EditorUi.prototype.getUrl = function(pathname)
  	{
  		var href = (pathname != null) ? pathname : window.location.pathname;
  		var parms = (href.indexOf('?') > 0) ? 1 : 0;
  
  		if (urlParams['offline'] == '1')
  		{
  			href += window.location.search;
  		}
  		else
  		{
  			var ignored = ['tmp', 'libs', 'clibs', 'state', 'fileId', 'code', 'share', 'notitle',
  			               'data', 'url', 'embed', 'client', 'create', 'title', 'splash'];
  			
  			// Removes template URL parameter for new blank diagram
  			for (var key in urlParams)
  			{
  				if (mxUtils.indexOf(ignored, key) < 0)
  				{
  					if (parms == 0)
  					{
  						href += '?';
  					}
  					else
  					{
  						href += '&';
  					}
  					
  					if (urlParams[key] != null)
  					{
  						href += key + '=' + urlParams[key];
  						parms++;
  					}
  				}
  			}
  		}
  
  		return href;
  	};
  
  	/**
  	 * Overrides link dialog.
  	 */
  	EditorUi.prototype.showLinkDialog = function(value, btnLabel, fn, showNewWindowOption, linkTarget)
  	{
  		var dlg = new LinkDialog(this, value, btnLabel, fn, true, showNewWindowOption, linkTarget);
  		this.showDialog(dlg.container, 560, 130, true, true);
  		dlg.init();
  	};
  
  	/**
  	 * Overrides createOutline
  	 */
  	var editorUiCreateOutline = EditorUi.prototype.createOutline;
  
  	EditorUi.prototype.createOutline = function(wnd)
  	{
  		var outline = editorUiCreateOutline.apply(this, arguments);
  		var graph = this.editor.graph;
  
  		var outlineGetSourceGraphBounds = outline.getSourceGraphBounds;
  		outline.getSourceGraphBounds = function()
  		{
  			if (mxUtils.hasScrollbars(graph.container) && graph.pageVisible && this.source.minimumGraphSize != null)
  			{
  				var pb = this.source.getPagePadding();
  				var s = this.source.view.scale;
  				
  				var result = new mxRectangle(0, 0, Math.ceil(this.source.minimumGraphSize.width - 2 * pb.x / s),
  						Math.ceil(this.source.minimumGraphSize.height - 2 * pb.y / s));
  				
  				return result;
  			}
  			
  			return outlineGetSourceGraphBounds.apply(this, arguments);
  		};
  		
  		var outlineGetSourceContainerSize = outline.getSourceContainerSize;
  		outline.getSourceContainerSize = function()
  		{
  			if (mxUtils.hasScrollbars(graph.container) && this.source.minimumGraphSize != null)
  			{
  				var pad = this.source.getPagePadding();
  				var s = this.source.view.scale;
  				
  				return new mxRectangle(0, 0, Math.ceil(this.source.minimumGraphSize.width * s - 2 * pad.x),
  						Math.ceil(this.source.minimumGraphSize.height * s - 2 * pad.y));
  			}
  
  			return outlineGetSourceContainerSize.apply(this, arguments);
  		};
  
  		outline.getOutlineOffset = function(scale)
  		{
  			if (mxUtils.hasScrollbars(graph.container) && this.source.minimumGraphSize != null)
  			{
  				var pb = this.source.getPagePadding();
  
  				var dx = Math.max(0, (outline.outline.container.clientWidth / scale - (this.source.minimumGraphSize.width - 2 * pb.x)) / 2);
  				var dy = Math.max(0, (outline.outline.container.clientHeight / scale - (this.source.minimumGraphSize.height - 2 * pb.y)) / 2);
  
  				// Why is vertical offset negative relative to dy
  				return new mxPoint(Math.round(dx - pb.x), Math.round(dy - pb.y - 5 / scale));
  			}
  			
  			return new mxPoint(8 / scale, 8 / scale);
  		};
  		
  		var outlineInit = outline.init;
  		outline.init = function()
  		{
  			outlineInit.apply(this, arguments);
  			
  			// Problem: Need to override a function in the view but the view is created
  			// with the graph so a refresh of the page is needed to see this change.
  			outline.outline.view.getBackgroundPageBounds = function()
  			{
  				var layout = graph.getPageLayout();
  				var page = graph.getPageSize();
  				
  				return new mxRectangle(this.scale * (this.translate.x + layout.x * page.width),
  						this.scale * (this.translate.y + layout.y * page.height),
  						this.scale * layout.width * page.width,
  						this.scale * layout.height * page.height);
  			};
  			
  			outline.outline.view.validateBackgroundPage();
  		};
  		
  		this.editor.addListener('pageSelected', function(sender, evt)
  		{
  			var change = evt.getProperty('change');
  			
  			var graph = outline.source;
  			var g = outline.outline;
  			
  			g.pageScale = graph.pageScale;
  			g.pageFormat = graph.pageFormat;
  			g.background = graph.background;
  			g.pageVisible = graph.pageVisible;
  			g.background = graph.background;
  			
  			var current = mxUtils.getCurrentStyle(graph.container);
  			g.container.style.backgroundColor = current.backgroundColor;
  			
  			if (graph.view.backgroundPageShape != null && g.view.backgroundPageShape != null)
  			{
  				g.view.backgroundPageShape.fill = graph.view.backgroundPageShape.fill;
  			}
  
  			outline.outline.view.clear(change.previousPage.root, true);
  			outline.outline.view.validate();
  		});
  
  		return outline;
  	};
  	
  	/**
  	 * Returns the number of storage options enabled
  	 */
  	EditorUi.prototype.getServiceCount = function(allowBrowser)
  	{
  		var serviceCount = 1;
  		
  		if (this.drive != null || typeof window.DriveClient === 'function')
  		{
  			serviceCount++
  		}
  		
  		if	(this.dropbox != null || typeof window.DropboxClient === 'function')
  		{
  			serviceCount++
  		}
  
  		if (this.oneDrive != null || typeof window.OneDriveClient === 'function')
  		{
  			serviceCount++
  		}
  		
  		if (this.gitHub != null)
  		{
  			serviceCount++
  		}
  		
  		if (this.gitLab != null)
  		{
  			serviceCount++
  		}
  		
  		if (allowBrowser && isLocalStorage && urlParams['browser'] == '1')
  		{
  			serviceCount++
  		}
  		
  		return serviceCount;
  	}
  
  	/**
  	 * Updates action and menu states depending on the file.
  	 */
  	EditorUi.prototype.updateUi = function()
  	{
  		this.updateButtonContainer();
  		this.updateActionStates();
  		
  		// Action states that only need update for new files
  		var file = this.getCurrentFile();
  		var active = file != null || (urlParams['embed'] == '1' &&
  			this.editor.graph.isEnabled());
  		this.menus.get('viewPanels').setEnabled(active);
  		this.menus.get('viewZoom').setEnabled(active);
  		
  		var restricted = (urlParams['embed'] != '1' ||
  			!this.editor.graph.isEnabled()) &&
  			(file == null || file.isRestricted());
  		this.actions.get('makeCopy').setEnabled(!restricted);
  		this.actions.get('print').setEnabled(!restricted);
  		this.menus.get('exportAs').setEnabled(!restricted);
  		this.menus.get('embed').setEnabled(!restricted);
  		
  		// Disables libraries and extras menu in embed mode
  		// while waiting for file data
  		var libsEnabled = urlParams['embed'] != '1' ||
  				this.editor.graph.isEnabled();
  		this.menus.get('extras').setEnabled(libsEnabled);
  		
  		if (Editor.enableCustomLibraries)
  		{
  			this.menus.get('openLibraryFrom').setEnabled(libsEnabled);
  			this.menus.get('newLibrary').setEnabled(libsEnabled);
  		}
  		
  		// Disables actions in the toolbar
  		var editable = (urlParams['embed'] == '1' &&
  			this.editor.graph.isEnabled()) ||
  			(file != null && file.isEditable());
  		this.actions.get('image').setEnabled(active);
  		this.actions.get('zoomIn').setEnabled(active);
  		this.actions.get('zoomOut').setEnabled(active);
  		this.actions.get('resetView').setEnabled(active);
  		
  		// Updates undo history states
  		this.actions.get('undo').setEnabled(this.canUndo() && editable);
  		this.actions.get('redo').setEnabled(this.canRedo() && editable);
  	
  		// Disables menus
  		this.menus.get('edit').setEnabled(active);
  		this.menus.get('view').setEnabled(active);
  		this.menus.get('importFrom').setEnabled(editable);
  		this.menus.get('arrange').setEnabled(editable);
  		
  		// Disables connection drop downs in toolbar
  		if (this.toolbar != null)
  		{
  			if (this.toolbar.edgeShapeMenu != null)
  			{
  				this.toolbar.edgeShapeMenu.setEnabled(editable);
  			}
  			
  			if (this.toolbar.edgeStyleMenu != null)
  			{
  				this.toolbar.edgeStyleMenu.setEnabled(editable);
  			}
  		}
  
  		this.updateUserElement();
  	};
  	
  	/**
  	 * Hook for subclassers
  	 */
  	EditorUi.prototype.updateButtonContainer = function()
  	{
  		// do nothing
  	};
  		
  	/**
  	 * Hook for subclassers
  	 */
  	EditorUi.prototype.updateUserElement = function()
  	{
  		// do nothing
  	};
  	
  	/**
  	 * Hook for subclassers
  	 */
  	EditorUi.prototype.scheduleSanityCheck = function()
  	{
  		// do nothing
  	};
  	
  	/**
  	 * Hook for subclassers
  	 */
  	EditorUi.prototype.stopSanityCheck = function()
  	{
  		// do nothing
  	};
  
  	/**
  	 * Returns true if a diagram is cative and editable.
  	 */
  	EditorUi.prototype.isDiagramActive = function()
  	{
  		var file = this.getCurrentFile();
  		
  		return (file != null && file.isEditable()) || 
  			(urlParams['embed'] == '1' && this.editor.graph.isEnabled());
  	};
  	
  	/**
  	 * Updates action states depending on the selection.
  	 */
  	var editorUiUpdateActionStates = EditorUi.prototype.updateActionStates;
  	EditorUi.prototype.updateActionStates = function()
  	{
  		editorUiUpdateActionStates.apply(this, arguments);
  
  		var graph = this.editor.graph;
  		var active = this.isDiagramActive();
  		var file = this.getCurrentFile();
  		var enabled = file != null || urlParams['embed'] == '1';
  		this.actions.get('pageSetup').setEnabled(active);
  		this.actions.get('autosave').setEnabled(file != null && file.isEditable() && file.isAutosaveOptional());
  		this.actions.get('guides').setEnabled(active);
  		this.actions.get('editData').setEnabled(active);
  		this.actions.get('shadowVisible').setEnabled(active);
  		this.actions.get('connectionArrows').setEnabled(active);
  		this.actions.get('connectionPoints').setEnabled(active);
  		this.actions.get('copyStyle').setEnabled(active && !graph.isSelectionEmpty());
  		this.actions.get('pasteStyle').setEnabled(active && !graph.isSelectionEmpty());
  		this.actions.get('editGeometry').setEnabled(graph.getModel().isVertex(graph.getSelectionCell()));
  		this.actions.get('createShape').setEnabled(active);
  		this.actions.get('createRevision').setEnabled(active);
  		this.actions.get('moveToFolder').setEnabled(file != null);
  		this.actions.get('makeCopy').setEnabled(file != null && !file.isRestricted());
  		this.actions.get('editDiagram').setEnabled(active && (file == null || !file.isRestricted()));
  		this.actions.get('publishLink').setEnabled(file != null && !file.isRestricted());
  		this.actions.get('tags').setEnabled(this.diagramContainer.style.visibility != 'hidden');
  		this.actions.get('layers').setEnabled(this.diagramContainer.style.visibility != 'hidden');
  		this.actions.get('outline').setEnabled(this.diagramContainer.style.visibility != 'hidden');
  		this.actions.get('rename').setEnabled((file != null && file.isRenamable()) || urlParams['embed'] == '1');
  		this.actions.get('close').setEnabled(file != null);
  		this.menus.get('publish').setEnabled(file != null && !file.isRestricted());
  		
  		var findReplace = this.actions.get('findReplace');
  		findReplace.setEnabled(this.diagramContainer.style.visibility != 'hidden');
  		findReplace.label = mxResources.get('find') + ((graph.isEnabled()) ?
  			'/' + mxResources.get('replace') : '') + '...';
  		
  		var state = graph.view.getState(graph.getSelectionCell());
  		this.actions.get('editShape').setEnabled(active && state != null && state.shape != null && state.shape.stencil != null);
  	};
  
  	/**
  	 * Overridden to remove export dialog in chromeless lightbox.
  	 */
  	var editoUiDestroy = EditorUi.prototype.destroy;
  
  	EditorUi.prototype.destroy = function()
  	{
  		if (this.exportDialog != null)
  		{
  			this.exportDialog.parentNode.removeChild(this.exportDialog);
  			this.exportDialog = null;
  		}
  		
  		editoUiDestroy.apply(this, arguments);
  	};
  				
  	/**
  	 * Overrides export dialog for using ui functions for save and setting global switches.
  	 */
  	if (window.ExportDialog != null)
  	{
  		ExportDialog.showXmlOption = false;
  		ExportDialog.showGifOption = false;
  		
  		ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi, grid)
  		{
  			var graph = editorUi.editor.graph;
  			
  			if (format == 'xml')
  			{
  				editorUi.hideDialog();
  				editorUi.saveData(name, 'xml', mxUtils.getXml(editorUi.editor.getGraphXml()), 'text/xml');
  			}
  		    else if (format == 'svg')
  			{
  		    	editorUi.hideDialog();
  				editorUi.saveData(name, 'svg', mxUtils.getXml(graph.getSvg(bg, s, b)), 'image/svg+xml');
  			}
  		    else
  		    {
  		    	var data = editorUi.getFileData(true, null, null, null, null, true);
  		    	var bounds = graph.getGraphBounds();
  				var w = Math.floor(bounds.width * s / graph.view.scale);
  				var h = Math.floor(bounds.height * s / graph.view.scale);
  				
  				if (data.length <= MAX_REQUEST_SIZE && w * h < MAX_AREA)
  				{
  					editorUi.hideDialog();
  					
  					if ((format == 'png' || format == 'jpg' || format == 'jpeg') && editorUi.isExportToCanvas())
  					{
  						if (format == 'png')
  						{
  							editorUi.exportImage(s, bg == null || bg == 'none', true,
  						   		false, false, b, true, false, null, grid, dpi);
  						}
  						else 
  						{
  							editorUi.exportImage(s, false, true,
  								false, false, b, true, false, 'jpeg', grid);
  						}
  					}
  					else 
  					{
  						var extras = {globalVars: graph.getExportVariables()};
  						
  						if (grid)
  						{
  							extras.grid = {
  								size: graph.gridSize,
  								steps: graph.view.gridSteps,
  								color: graph.view.gridColor
  							};
  						}
  						
  						editorUi.saveRequest(name, format,
  							function(newTitle, base64)
  							{
  								return new mxXmlRequest(EXPORT_URL, 'format=' + format + '&base64=' + (base64 || '0') +
  									((newTitle != null) ? '&filename=' + encodeURIComponent(newTitle) : '') +
  									'&extras=' + encodeURIComponent(JSON.stringify(extras)) +
  									(dpi > 0? '&dpi=' + dpi : '') +
  									'&bg=' + ((bg != null) ? bg : 'none') + '&w=' + w + '&h=' + h +
  									'&border=' + b + '&xml=' + encodeURIComponent(data));
  							});
  					}
  				}
  				else
  				{
  					mxUtils.alert(mxResources.get('drawingTooLarge'));
  				}
  			}
  		};
  	}
  
  	EditorUi.prototype.getDiagramTextContent = function()
  	{
  		this.editor.graph.setEnabled(false);
  		var graph = this.editor.graph;
  			
  		var allPagesTxt = '';
  		
  		if (this.pages != null)
  		{
  			for (var i = 0; i < this.pages.length; i++)
  			{
  				var pageGraph = graph;
  				
  				if (this.currentPage != this.pages[i])
  				{
  					pageGraph = this.createTemporaryGraph(graph.getStylesheet());
  					this.updatePageRoot(this.pages[i]);
  					pageGraph.model.setRoot(this.pages[i].root);								
  				}
  				allPagesTxt += this.pages[i].getName() + ' ' + pageGraph.getIndexableText() + ' ';
  			}
  		}
  		else
  		{
  			allPagesTxt = graph.getIndexableText();
  		}
  		
  		this.editor.graph.setEnabled(true);
  		return allPagesTxt;
  	};
  	
  	EditorUi.prototype.showRemotelyStoredLibrary = function(title)
  	{
  		var selectedLibs = {};
  		var div = document.createElement('div');
  		div.style.whiteSpace = 'nowrap';
  		var graph = this.editor.graph;
  		
  		var hd = document.createElement('h3');
  		mxUtils.write(hd, mxUtils.htmlEntities(title));
  		hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:12px';
  		div.appendChild(hd);
  
  		var libsSection = document.createElement('div');
  		libsSection.style.cssText = 'border:1px solid lightGray;overflow: auto;height:300px';
  
  		libsSection.innerHTML = '<div style="text-align:center;padding:8px;"><img src="' + IMAGE_PATH + '/spin.gif"></div>';
  		
  		var loadedLibs = {};
  		
  		try
  		{
  			var custLibs = mxSettings.getCustomLibraries();
  			
  			for (var j = 0; j < custLibs.length; j++)
  			{
  				var l = custLibs[j];
  				
  				if (l.substring(0, 1) == 'R')
  				{
  					var libDesc = JSON.parse(decodeURIComponent(l.substring(1)));
  					loadedLibs[libDesc[0]] = {
  						id: libDesc[0], 
                 			title: libDesc[1], 
                 			downloadUrl: libDesc[2]
  					};
  				}
  			}
  		}
  		catch(e){}
  
  		this.remoteInvoke('getCustomLibraries', null, null, function(libsList)
  		{
  			libsSection.innerHTML = '';
  			
  			if (libsList.length == 0)
  			{
  				libsSection.innerHTML = '<div style="text-align:center;padding-top:20px;color:gray;">' +
  					mxUtils.htmlEntities(mxResources.get('noLibraries')) + '</div>';
  			}
  			else
  			{
  				for (var i = 0; i < libsList.length; i++)
  				{
  					var lib = libsList[i];
  					
  					if (loadedLibs[lib.id])
  					{
  						selectedLibs[lib.id] = lib;
  					}
  					
  					var libCheck = this.addCheckbox(libsSection, lib.title, loadedLibs[lib.id]); 
  	
  					(function(lib2, check)
  					{
  						mxEvent.addListener(check, 'change', function()
  						{
  							if (this.checked)
  							{
  								selectedLibs[lib2.id] = lib2;
  							}
  							else
  							{
  								delete selectedLibs[lib2.id];
  							}
  						});
  					})(lib, libCheck)
  				}
  			}
  		}, mxUtils.bind(this, function(e)
  		{
  			libsSection.innerHTML = '';
  			var status = document.createElement('div');
  			status.style.padding = '8px';
  			status.style.textAlign = 'center';
  			mxUtils.write(status, mxResources.get('error') + ': ');
  			mxUtils.write(status, (e != null && e.message != null) ?
  				e.message : mxResources.get('unknownError'));
  			libsSection.appendChild(status);
  		}));
  
  		div.appendChild(libsSection);
  		
  		var dlg = new CustomDialog(this, div, mxUtils.bind(this, function()
  		{
  			this.spinner.spin(document.body, mxResources.get('loading'));
  			var pendingLibs = 0;
  			
  			for (var id in selectedLibs)
  			{
  				if (loadedLibs[id] != null) continue; //already loaded!
  				
  				pendingLibs++;
  				
  				(mxUtils.bind(this, function(lib)
  				{
  					this.remoteInvoke('getFileContent', [lib.downloadUrl], null, mxUtils.bind(this, function(libContent)
  					{
  						pendingLibs--;
  						
  						if (pendingLibs == 0) this.spinner.stop();
  						
  						try
  						{
  							this.loadLibrary(new RemoteLibrary(this, libContent, lib));
  						}
  						catch (e)
  						{
  							this.handleError(e, mxResources.get('errorLoadingFile'));
  						}
  					}), mxUtils.bind(this, function()
  					{
  						pendingLibs--;
  						
  						if (pendingLibs == 0) this.spinner.stop();
  						
  						this.handleError(null, mxResources.get('errorLoadingFile'));
  					}));
  				}))(selectedLibs[id]);
  			}
  			
  			for (var id in loadedLibs)
  			{
  				if (!selectedLibs[id]) //Removed
  				{
  					this.closeLibrary(new RemoteLibrary(this, null, loadedLibs[id])); //create a dummy library such that we can call closeLibrary
  				}
  			}
  			
  			if (pendingLibs == 0) this.spinner.stop();
  		}), null, null, 'https://www.diagrams.net/doc/faq/custom-libraries-confluence-cloud');
  		this.showDialog(dlg.container, 340, 375, true, true, null, null, null, null, true);
  	};
  	
  	//Remote invokation, currently limited to functions in EditorUi (and its sub objects) for security reasons
  	//White-listed functions and some info about it
  	EditorUi.prototype.remoteInvokableFns = {
  		getDiagramTextContent: {isAsync: false},
  		getLocalStorageFile: {isAsync: false, allowedDomains: ['app.diagrams.net']},
  		getLocalStorageFileNames: {isAsync: false, allowedDomains: ['app.diagrams.net']},
  		setMigratedFlag: {isAsync: false, allowedDomains: ['app.diagrams.net']}
  	};
  	
  	EditorUi.prototype.remoteInvokeCallbacks = [];
  	EditorUi.prototype.remoteInvokeQueue = [];
  
  	EditorUi.prototype.handleRemoteInvokeReady = function(remoteWin)
  	{
  		this.remoteWin = remoteWin;
  		
  		for (var i = 0; i < this.remoteInvokeQueue.length; i++)
  		{
  			remoteWin.postMessage(this.remoteInvokeQueue[i], '*');
  		}
  		
  		this.remoteInvokeQueue = [];
  	};
  	
  	EditorUi.prototype.handleRemoteInvokeResponse = function(msg)
  	{
  		var msgMarkers = msg.msgMarkers;
  		var callback = this.remoteInvokeCallbacks[msgMarkers.callbackId];
  		
  		if (callback == null)
  		{
  			throw new Error('No callback for ' + ((msgMarkers != null) ? msgMarkers.callbackId : 'null'));
  		}
  		else if (msg.error)
  		{
  			if (callback.error) callback.error(msg.error.errResp);
  		}
  		else if (callback.callback)
  		{
  			callback.callback.apply(this, msg.resp);
  		}
  			
  		this.remoteInvokeCallbacks[msgMarkers.callbackId] = null; //set it to null only to keep the index
  	};
  
  	EditorUi.prototype.remoteInvoke = function(remoteFn, remoteFnArgs, msgMarkers, callback, error)
  	{
  		var acceptResponse = true;
  		
  		var timeoutThread = window.setTimeout(mxUtils.bind(this, function()
  		{
  			acceptResponse = false;
  			error({code: App.ERROR_TIMEOUT, message: mxResources.get('timeout')});
  		}), this.timeout);
  
  		var wrapper = mxUtils.bind(this, function()
  		{
  	    	window.clearTimeout(timeoutThread);
  			
  			if (acceptResponse)
  			{
  				callback.apply(this, arguments);
  			}
  		});
  		
  		var errWrapper = mxUtils.bind(this, function()
  		{
  	    	window.clearTimeout(timeoutThread);
  			
  			if (acceptResponse)
  			{
  				error.apply(this, arguments);
  			}
  		});
  		
  		msgMarkers = msgMarkers || {};
  		msgMarkers.callbackId = this.remoteInvokeCallbacks.length;
  		this.remoteInvokeCallbacks.push({callback: wrapper, error: errWrapper});
  		var msg = JSON.stringify({event: 'remoteInvoke', funtionName: remoteFn, functionArgs: remoteFnArgs, msgMarkers: msgMarkers});
  		
  		if (this.remoteWin != null) //remote invoke is ready
  		{
  			this.remoteWin.postMessage(msg, '*');
  		}
  		else
  		{
  			this.remoteInvokeQueue.push(msg);
  		}
  	};
  
  	EditorUi.prototype.handleRemoteInvoke = function(msg, origin)
  	{
  		var sendResponse = mxUtils.bind(this, function(resp, error)
  		{
  			var respMsg = {event: 'remoteInvokeResponse', msgMarkers: msg.msgMarkers};
  			
  			if (error != null)
  			{
  				respMsg.error = {errResp: error};
  			}
  			else if (resp != null) 
  			{
  				respMsg.resp = resp;
  			}
  			
  			this.remoteWin.postMessage(JSON.stringify(respMsg), '*');
  		});
  		
  		try
  		{
  			//Remote invoke are allowed to call functions in AC
  			var funtionName = msg.funtionName;
  			var functionInfo = this.remoteInvokableFns[funtionName];
  			
  			if (functionInfo != null && typeof this[funtionName] === 'function')
  			{
  				if (functionInfo.allowedDomains)
  				{
  					var allowed = false;
  					
  					for (var i = 0; i < functionInfo.allowedDomains.length; i++)
  					{
  						if (origin == 'https://' + functionInfo.allowedDomains[i])
  						{
  							allowed = true;
  							break;
  						}
  					}
  					
  					if (!allowed)
  					{
  						sendResponse(null, 'Invalid Call: ' + funtionName + ' is not allowed.');
  						return;
  					}
  				}
  				
  				var functionArgs = msg.functionArgs;
  				
  				//Confirm functionArgs are not null and is array, otherwise, discard it
  				if (!Array.isArray(functionArgs))
  				{
  					functionArgs = [];
  				}
  				
  				//for functions with callbacks (async) we assume last two arguments are success, error
  				if (functionInfo.isAsync)
  				{
  					//success
  					functionArgs.push(function() 
  					{
  						sendResponse(Array.prototype.slice.apply(arguments));
  					});
  					
  					//error
  					functionArgs.push(function(err) 
  					{
  						sendResponse(null, err || 'Unkown Error');
  					});
  					
  					this[funtionName].apply(this, functionArgs);
  				}
  				else
  				{
  					var resp = this[funtionName].apply(this, functionArgs);
  					
  					sendResponse([resp]);
  				}
  			}
  			else
  			{
  				sendResponse(null, 'Invalid Call: ' + funtionName + ' is not found.');
  			}
  		}
  		catch(e)
  		{
  			sendResponse(null, 'Invalid Call: An error occured, ' + e.message);
  		}
  	};
  	
  	/**
  	 * Opens the application keystore.
  	 */
  	EditorUi.prototype.openDatabase = function(success, error)
  	{
  		if (this.database == null)
  		{
  			var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;
  			
  			if (indexedDB != null)
  			{
  				try
  				{
  					var req = indexedDB.open('database', 2);
  					
  					req.onupgradeneeded = function(e)
  					{
  						try
  						{
  							var db = req.result;
  							
  							if (e.oldVersion < 1)
  							{
  							    // Version 1 is the first version of the database.
  								db.createObjectStore('objects', {keyPath: 'key'});
  							}
  							
  							if (e.oldVersion < 2)
  							{
  								// Version 2 introduces browser file storage.
  								db.createObjectStore('files', {keyPath: 'title'});
  								db.createObjectStore('filesInfo', {keyPath: 'title'});
  								EditorUi.migrateStorageFiles = isLocalStorage;
  							}
  						}
  						catch (e)
  						{
  							if (error != null)
  							{
  								error(e);
  							}
  						}
  					}
  					
  					req.onsuccess = mxUtils.bind(this, function(e)
  					{
  						var db = req.result;
  						this.database = db;
  						
  						if (EditorUi.migrateStorageFiles)
  						{
  							StorageFile.migrate(db);
  							EditorUi.migrateStorageFiles = false;
  						}
  
  						if (location.host == 'app.diagrams.net' && !this.drawioMigrationStarted)
  						{
  							this.drawioMigrationStarted = true;
  							
  							this.getDatabaseItem('.drawioMigrated3', mxUtils.bind(this, function(value)
  							{
  								if (value && urlParams['forceMigration'] != '1') //Already migrated
  								{
  									return;
  								}
  								
  								var drawioFrame = document.createElement('iframe');
  								drawioFrame.style.display = 'none';
  								drawioFrame.setAttribute('src', 'https://www.draw.io?embed=1&proto=json&forceMigration=' + urlParams['forceMigration']);
  						    	document.body.appendChild(drawioFrame);
  						    	var collectNames = true, allDone = false;
  						    	var fileNames, index = 0;
  						    	
  						    	var markAsMigrated = mxUtils.bind(this, function()
  								{
  						    		allDone = true;
  									this.setDatabaseItem('.drawioMigrated3', true);
  									drawioFrame.contentWindow.postMessage(JSON.stringify({action: 'remoteInvoke', funtionName: 'setMigratedFlag'}), '*');
  								});
  								
  								var next = mxUtils.bind(this, function()
  								{
  									index++;
  									fetchOneFile();
  								});
  								
  								var fetchOneFile = mxUtils.bind(this, function()
  								{
  									try
  									{
  										if (index >= fileNames.length)
  										{
  											markAsMigrated();
  											return;
  										}
  										
  										var fileTitle = fileNames[index];
  										
  										StorageFile.getFileContent(this, fileTitle, mxUtils.bind(this, function(data)
  										{
  											if (data == null || (fileTitle == '.scratchpad' && data == this.emptyLibraryXml)) //Don't overwrite
  											{
  												drawioFrame.contentWindow.postMessage(JSON.stringify({action: 'remoteInvoke', funtionName: 'getLocalStorageFile', functionArgs: [fileTitle]}), '*');
  											}
  											else
  											{
  												next();
  											}
  										}), next);  //Ignore errors
  									}
  									catch(e)
  									{
  										//Log error
  										console.log(e);
  									}
  								});
  								
  								var importOneFile = mxUtils.bind(this, function(file)
  								{
  									try
  									{
  										this.setDatabaseItem(null, [{
  											title: file.title,
  											size: file.data.length,
  											lastModified: Date.now(),
  											type: file.isLib? 'L' : 'F'
  										}, {
  											title: file.title,
  											data: file.data
  										}], next, next /* Ignore errors */, ['filesInfo', 'files']);
  									}
  									catch(e)
  									{
  										//Log error
  										console.log(e);
  									}
  								});
  										
  						    	var messageListener = mxUtils.bind(this, function(evt)
  								{
  									try
  									{
  										//Only accept messages from migration iframe
  										if (evt.source != drawioFrame.contentWindow)
  										{
  											return;
  										}
  										
  										var drawMsg = {};
  										
  										try
  										{
  											drawMsg = JSON.parse(evt.data);
  										}
  										catch(e){} //Ignore
  									
  										if (drawMsg.event == 'init')
  										{
  											drawioFrame.contentWindow.postMessage(JSON.stringify({action: 'remoteInvokeReady'}), '*');
  											drawioFrame.contentWindow.postMessage(JSON.stringify({action: 'remoteInvoke', funtionName: 'getLocalStorageFileNames'}), '*');
  										}
  										else if (drawMsg.event == 'remoteInvokeResponse' && !allDone)
  										{
  											if (collectNames)
  											{
  												if (drawMsg.resp != null && drawMsg.resp.length > 0 && drawMsg.resp[0] != null)
  												{
  													fileNames = drawMsg.resp[0];
  													collectNames = false;
  													fetchOneFile();
  												}
  												else
  												{
  													//Nothing in draw.io localStorage
  													markAsMigrated();
  												}
  											}
  											else
  											{
  												//Add the file, then move to the next
  												if (drawMsg.resp != null && drawMsg.resp.length > 0 && drawMsg.resp[0] != null)
  												{
  													importOneFile(drawMsg.resp[0]);
  												}
  												else
  												{
  													next();
  												}
  											}
  										}
  									}
  									catch(e)
  									{
  										console.log(e);
  									}
  								});
  	
  								window.addEventListener('message', messageListener);
  							})); //Ignore errors
  						}
  							
  						success(db);
  						
  						db.onversionchange = function() 
  						{
  							//TODO Handle DB revision update while code is running
  							//		Save open file and request a page reload before closing the DB
  						    db.close();
  						};
  					});
  					
  					req.onerror = error;
  					
  					req.onblocked = function() 
  					{
  						//TODO Use this when a new version is introduced
  						// there's another open connection to same database
  						// and it wasn't closed after db.onversionchange triggered for them
  					};
  				}
  				catch (e)
  				{
  					if (error != null)
  					{
  						error(e);
  					}
  				}
  			}
  			else if (error != null)
  			{
  				error();
  			}
  		}
  		else
  		{
  			success(this.database);
  		}
  	};
  	
  	/**
  	 * Add/Update item(s) in the database. It supports multiple stores transactions by sending an array of data, storeName 
  	 * (key is optional, can be an array also if multiple stores are needed)
  	 */
  	EditorUi.prototype.setDatabaseItem = function(key, data, success, error, storeName)
  	{
  		this.openDatabase(mxUtils.bind(this, function(db)
  		{
  			try
  			{
  				storeName = storeName || 'objects';
  				
  				if (!Array.isArray(storeName))
  				{
  					storeName = [storeName];
  					key = [key];
  					data = [data];
  				}
  				
  				var trx = db.transaction(storeName, 'readwrite');
  				trx.oncomplete = success;
  				trx.onerror = error;
  		        
  				for (var i = 0; i < storeName.length; i++)
  				{
  					trx.objectStore(storeName[i]).put(key != null && key[i] != null? {key: key[i], data: data[i]} : data[i]);
  				}
  			}
  			catch (e)
  			{
  				if (error != null)
  				{
  					error(e);
  				}
  			}
  		}), error);
  	};
  
  	/**
  	 * Removes the item for the given key from the database.
  	 */
  	EditorUi.prototype.removeDatabaseItem = function(key, success, error, storeName)
  	{
  		this.openDatabase(mxUtils.bind(this, function(db)
  		{
  			storeName = storeName || 'objects';
  			
  			if (!Array.isArray(storeName))
  			{
  				storeName = [storeName];
  				key = [key];
  			}
  			
  			var trx = db.transaction(storeName, 'readwrite');
  			trx.oncomplete = success;
  			trx.onerror = error;
  			
  			for (var i = 0; i < storeName.length; i++)
  			{
  				trx.objectStore(storeName[i]).delete(key[i]);
  			}
  		}), error);
  	};
  	
  	/**
  	 * Returns one item from the database.
  	 */
  	EditorUi.prototype.getDatabaseItem = function(key, success, error, storeName)
  	{
  		this.openDatabase(mxUtils.bind(this, function(db)
  		{
  			try
  			{
  				storeName = storeName || 'objects';
  				var trx = db.transaction([storeName], 'readonly');
  				var req = trx.objectStore(storeName).get(key);
  				
  				req.onsuccess = function()
  				{
  					success(req.result);
  				};
  				
  		        req.onerror = error;
  			}
  	        catch (e)
  			{
  				if (error != null)
  				{
  					error(e);
  				}
  			}
  		}), error);
  	};
  	
  	/**
  	 * Returns all items from the database.
  	 */
  	EditorUi.prototype.getDatabaseItems = function(success, error, storeName)
  	{
  		this.openDatabase(mxUtils.bind(this, function(db)
  		{
  			try
  			{
  				storeName = storeName || 'objects';
  				var trx = db.transaction([storeName], 'readonly');
  				var req = trx.objectStore(storeName).openCursor(
  					IDBKeyRange.lowerBound(0));
  				var items = [];
  				
  				req.onsuccess = function(e)
  				{
  					if (e.target.result == null)
  					{
  						success(items);
  					}
  					else
  					{
  						items.push(e.target.result.value);
  						e.target.result.continue();
  					}
  		        };
  		        
  		        req.onerror = error;
  			}
  			catch (e)
  			{
  				if (error != null)
  				{
  					error(e);
  				}
  			}
  		}), error);
  	};
  	
  	/**
  	 * Returns all item keys from the database.
  	 */
  	EditorUi.prototype.getDatabaseItemKeys = function(success, error, storeName)
  	{
  		this.openDatabase(mxUtils.bind(this, function(db)
  		{
  			try
  			{
  				storeName = storeName || 'objects';
  				var trx = db.transaction([storeName], 'readonly');
  				var req = trx.objectStore(storeName).getAllKeys();
  				
  				req.onsuccess = function()
  				{
  					success(req.result);
  		        };
  		        
  		        req.onerror = error;
  			}
  			catch (e)
  			{
  				if (error != null)
  				{
  					error(e);
  				}
  			}
  		}), error);
  	};
  	/**
  	 * Comments: We need these functions as wrapper of File functions in order to facilitate
  	 * overriding them if comments are needed without having a file (e.g. Confluence Plugin)
  	 */
  	
  	/**
  	 * Are comments supported
  	 */
  	EditorUi.prototype.commentsSupported = function()
  	{
  		var file = this.getCurrentFile();
  		
  		return file != null? file.commentsSupported() : false;
  	};
  
  	/**
  	 * Show refresh button?
  	 */
  	EditorUi.prototype.commentsRefreshNeeded = function()
  	{
  		var file = this.getCurrentFile();
  		
  		return file != null? file.commentsRefreshNeeded() : true;
  	};
  	
  	/**
  	 * Show save button?
  	 */
  	EditorUi.prototype.commentsSaveNeeded = function()
  	{
  		var file = this.getCurrentFile();
  
  		return file != null? file.commentsSaveNeeded() : false;
  	};
  	
  	/**
  	 * Get comments
  	 */
  	EditorUi.prototype.getComments = function(success, error)
  	{
  		var file = this.getCurrentFile();
  		
  		if (file != null)
  		{
  			file.getComments(success, error);
  		}
  		else 
  		{
  			success([]); //placeholder
  		}
  	};
  
  	/**
  	 * Add a comment
  	 */
  	EditorUi.prototype.addComment = function(comment, success, error)
  	{
  		var file = this.getCurrentFile();
  		
  		if (file != null)
  		{
  			file.addComment(comment, success, error);
  		}
  		else 
  		{
  			success(Date.now()); //placeholder
  		}
  	};
  
  	/**
  	 * Can add a reply to a reply
  	 */
  	EditorUi.prototype.canReplyToReplies = function()
  	{
  		var file = this.getCurrentFile();
  			
  		return file != null? file.canReplyToReplies() : true;
  	};
  
  	/**
  	 * Can add comments (The permission to comment)
  	 */
  	EditorUi.prototype.canComment = function()
  	{
  		var file = this.getCurrentFile();
  		
  		return file != null? file.canComment() : true;
  	};
  
  	/**
  	 * Get a new comment object
  	 */
  	EditorUi.prototype.newComment = function(content, user)
  	{
  		var file = this.getCurrentFile();
  		
  		if (file != null)
  		{
  			return file.newComment(content, user)
  		}
  		else 
  		{
  			return new DrawioComment(this, null, content, Date.now(), Date.now(), false, user);
  		}
  	};
  	
  	//==================================================== End of comments =================================================================
  	
  	/**
  	 * Does revisions history available
  	 */
  	EditorUi.prototype.isRevisionHistorySupported = function()
  	{
  		var file = this.getCurrentFile();
  		
  		return file != null && file.isRevisionHistorySupported();
  	};
  
  	/**
  	 * Get revisions of current file
  	 */
  	EditorUi.prototype.getRevisions = function(success, error)
  	{
  		var file = this.getCurrentFile();
  		
  		if (file != null && file.getRevisions)
  		{
  			file.getRevisions(success, error);
  		}
  		else
  		{
  			error({message: mxResources.get('unknownError')});
  		}
  	};
  	
  	/**
  	 * Is revisions history enabled
  	 */
  	EditorUi.prototype.isRevisionHistoryEnabled = function()
  	{
  		var file = this.getCurrentFile();
  		
  		return file != null &&
  				((file.constructor == DriveFile && file.isEditable()) ||
  				file.constructor == DropboxFile);
  	};
  	
  	//===========Adding methods to find the service running draw.io and allowing calling draw.io remote services
  	EditorUi.prototype.getServiceName = function()
  	{
  		return 'draw.io';
  	};
  	
  	EditorUi.prototype.addRemoteServiceSecurityCheck = function(xhr)
  	{
  		//Using a standard header with specific sequence
  		xhr.setRequestHeader('Content-Language', 'da, mi, en, de-DE');
  	};
  	
  	//===========To Be Removed Soon==========
  	EditorUi.prototype.loadUrl = function(url, success, error, forceBinary, retry, dataUriPrefix, noBinary, headers)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: loadUrl');
  		return this.editor.loadUrl(url, success, error, forceBinary, retry, dataUriPrefix, noBinary, headers);	
  	};
  	
  	EditorUi.prototype.loadFonts = function(then)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: loadFonts');
  		return this.editor.loadFonts(then);	
  	};
  	
  	EditorUi.prototype.createSvgDataUri = function(svg)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: createSvgDataUri');
  		return Editor.createSvgDataUri(svg);	
  	};
  	
      EditorUi.prototype.embedCssFonts = function(fontCss, then)
      {
  		EditorUi.logEvent('SHOULD NOT BE CALLED: embedCssFonts');
  		return this.editor.embedCssFonts(fontCss, then);	
  	};
  	
      EditorUi.prototype.embedExtFonts = function(callback)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: embedExtFonts');
  		return this.editor.embedExtFonts(callback);	
  	};
  	
  	EditorUi.prototype.exportToCanvas = function(callback, width, imageCache, background, error, limitHeight,
  			ignoreSelection, scale, transparentBackground, addShadow, converter, graph, border, noCrop, grid, keepTheme)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: exportToCanvas');
  		return this.editor.exportToCanvas(callback, width, imageCache, background, error, limitHeight,
  			ignoreSelection, scale, transparentBackground, addShadow, converter, graph, border,
  			noCrop, grid, keepTheme);	
  	};
  	
  	EditorUi.prototype.createImageUrlConverter = function()
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: createImageUrlConverter');
  		return this.editor.createImageUrlConverter();	
  	};
  	
  	EditorUi.prototype.convertImages = function(svgRoot, callback, imageCache, converter)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: convertImages');
  		return this.editor.convertImages(svgRoot, callback, imageCache, converter);	
  	};
  	
  	EditorUi.prototype.convertImageToDataUri = function(url, callback)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: convertImageToDataUri');
  		return this.editor.convertImageToDataUri(url, callback);	
  	};
  	
  	EditorUi.prototype.base64Encode = function(str)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: base64Encode');
  		return Editor.base64Encode(str);	
  	};
  	
  	EditorUi.prototype.updateCRC = function(crc, data, off, len)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: updateCRC');
  		return Editor.updateCRC(crc, data, off, len);	
  	};
  	
  	EditorUi.prototype.crc32 = function(str)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: crc32');
  		return Editor.crc32(str);	
  	};
  	
  	EditorUi.prototype.writeGraphModelToPng = function(data, type, key, value, error)
  	{
  		EditorUi.logEvent('SHOULD NOT BE CALLED: writeGraphModelToPng');
  		return Editor.writeGraphModelToPng(data, type, key, value, error);
  	};
  	
  	//=======End of To Be Removed Soon==========
  	
  	EditorUi.prototype.getLocalStorageFileNames = function()
  	{
  		if (localStorage.getItem('.localStorageMigrated') == '1' && urlParams['forceMigration'] != '1')
  		{
  			return null;
  		}
  		
  		var files = [];
  		
  		for (var i = 0; i < localStorage.length; i++)
  		{
  			var key = localStorage.key(i);
  			var value = localStorage.getItem(key);
  			
  			if (key.length > 0 && (key == '.scratchpad' || key.charAt(0) != '.') && value.length > 0)
  			{
  				var isFile = (value.substring(0, 8) === '<mxfile ' ||
  							value.substring(0, 5) === '<?xml' || value.substring(0, 12) === '<!--[if IE]>');
  				var isLib = (value.substring(0, 11) === '<mxlibrary>');
  
  				if (isFile || isLib)
  				{
  					files.push(key);
  				}	
  			}
  		}
  		
  		return files;
  	};
  	
  	EditorUi.prototype.getLocalStorageFile = function(key)
  	{
  		if (localStorage.getItem('.localStorageMigrated') == '1' && urlParams['forceMigration'] != '1')
  		{
  			return null;
  		}
  		
  		var value = localStorage.getItem(key);
  		return {title: key, data: value, isLib: value.substring(0, 11) === '<mxlibrary>'};
  	};
  	
  	EditorUi.prototype.setMigratedFlag = function()
  	{
  		localStorage.setItem('.localStorageMigrated', '1');	
  	};
  })();
  
  /**
   * Comments Window, It is used by both editor and viewer. So, it is here in a common place
   */
  var CommentsWindow = function(editorUi, x, y, w, h, saveCallback)
  {
  	var readOnly = !editorUi.canComment();
  	var canReplyToReplies = editorUi.canReplyToReplies();
  	var curEdited = null;
  		
  	var div = document.createElement('div');
  	div.className = 'geCommentsWin';
  	div.style.background = (Dialog.backdropColor == 'white') ? 'whiteSmoke' : Dialog.backdropColor;
  
  	var tbarHeight = (!EditorUi.compactUi) ? '30px' : '26px';
  	
  	var listDiv = document.createElement('div');
  	listDiv.className = 'geCommentsList';
  	listDiv.style.backgroundColor = (Dialog.backdropColor == 'white') ? 'whiteSmoke' : Dialog.backdropColor;
  	listDiv.style.bottom = (parseInt(tbarHeight) + 7) + 'px';
  	div.appendChild(listDiv);
  	
  	var noComments = document.createElement('span');
  	noComments.style.cssText = 'display:none;padding-top:10px;text-align:center;';
  	mxUtils.write(noComments, mxResources.get('noCommentsFound'));
  	
  	var selectionComment = null;
  	
  	var ldiv = document.createElement('div');
  	
  	ldiv.className = 'geToolbarContainer geCommentsToolbar';
  	ldiv.style.height = tbarHeight;
  	ldiv.style.padding = (!EditorUi.compactUi) ? '1px' : '4px 0px 3px 0px';
  	ldiv.style.backgroundColor = (Dialog.backdropColor == 'white') ? 'whiteSmoke' : Dialog.backdropColor;
  	
  	var link = document.createElement('a');
  	link.className = 'geButton';
  	
  	function updateNoComments()
  	{
  		var divs = listDiv.getElementsByTagName('div');
  		var visibleCount = 0;
  		
  		for (var i = 0; i < divs.length; i++)
  		{
  			if (divs[i].style.display != 'none' && divs[i].parentNode == listDiv)
  			{
  				visibleCount++;
  			}
  		}
  		
  		noComments.style.display = (visibleCount == 0) ? 'block' : 'none';
  	};
  	
  	function editComment(comment, cdiv, saveCallback, deleteOnCancel)
  	{
  		curEdited = {div: cdiv, comment: comment, saveCallback: saveCallback, deleteOnCancel: deleteOnCancel};
  		
  		var commentTxt = cdiv.querySelector('.geCommentTxt');
  		var actionsDiv = cdiv.querySelector('.geCommentActionsList');
  		
  		var textArea = document.createElement('textarea');
  		textArea.className = 'geCommentEditTxtArea';
  		textArea.style.minHeight = commentTxt.offsetHeight + 'px';
  		textArea.value = comment.content;
  		cdiv.insertBefore(textArea, commentTxt);
  		
  		var btnDiv = document.createElement('div');
  		btnDiv.className = 'geCommentEditBtns';
  		
  		function reset()
  		{
  			cdiv.removeChild(textArea);
  			cdiv.removeChild(btnDiv);
  			actionsDiv.style.display = 'block';
  			commentTxt.style.display = 'block';	
  		};
  		
  		var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
  		{
  			if (deleteOnCancel)
  			{
  				cdiv.parentNode.removeChild(cdiv);
  				updateNoComments();
  			}
  			else
  			{
  				reset();
  			}
  			
  			curEdited = null;
  		});
  		
  		cancelBtn.className = 'geCommentEditBtn';
  		btnDiv.appendChild(cancelBtn);
  		
  		var saveBtn = mxUtils.button(mxResources.get('save'), function()
  		{
  			commentTxt.innerHTML = '';
  			comment.content = textArea.value;
  			mxUtils.write(commentTxt, comment.content);
  			reset();
  			saveCallback(comment);
  			curEdited = null;
  		});
  		
  		// Updates modified state and handles placeholder text
  		mxEvent.addListener(textArea, 'keydown', mxUtils.bind(this, function(evt)
  		{
  			if (!mxEvent.isConsumed(evt))
  			{
  				if ((mxEvent.isControlDown(evt) || (mxClient.IS_MAC &&
  					mxEvent.isMetaDown(evt))) && evt.keyCode == 13 /* Ctrl+Enter */)
  				{
  					saveBtn.click();
  					mxEvent.consume(evt);
  				}
  				else if (evt.keyCode == 27 /* Escape */)
  				{
  					cancelBtn.click();
  					mxEvent.consume(evt);
  				}
  			}
  		}));
  		
  		// Focused to include in viewport before focusin textbox
  		saveBtn.focus();
  		saveBtn.className = 'geCommentEditBtn gePrimaryBtn';
  		btnDiv.appendChild(saveBtn);
  
  		cdiv.insertBefore(btnDiv, commentTxt);
  		actionsDiv.style.display = 'none';
  		commentTxt.style.display = 'none';
  		textArea.focus();
  	};
  	
  	function writeCommentDate(comment, dateDiv)
  	{
  		dateDiv.innerHTML = '';
  		var ts = new Date(comment.modifiedDate);
  		var str = editorUi.timeSince(ts);
  		
  		if (str == null)
  		{
  			str = mxResources.get('lessThanAMinute');
  		}
  		
  		mxUtils.write(dateDiv, mxResources.get('timeAgo', [str], '{1} ago'));
  		dateDiv.setAttribute('title', ts.toLocaleDateString() + ' ' +
  				ts.toLocaleTimeString());
  	};
  	
  	function showBusy(commentDiv)
  	{
  		var busyImg = document.createElement('img');
  		busyImg.className = 'geCommentBusyImg';
  		busyImg.src= IMAGE_PATH + '/spin.gif';
  		commentDiv.appendChild(busyImg);
  		commentDiv.busyImg = busyImg;
  	};
  	
  	function showError(commentDiv)
  	{
  		commentDiv.style.border = '1px solid red';
  		commentDiv.removeChild(commentDiv.busyImg);
  	};
  	
  	function showDone(commentDiv)
  	{
  		commentDiv.style.border = '';
  		commentDiv.removeChild(commentDiv.busyImg);
  	};
  
  	function addComment(comment, parentArr, parent, level, showResolved)
  	{
  		//Skip resolved comments if showResolved is not set
  		if (!showResolved && comment.isResolved)
  		{
  			return;
  		}
  
  		noComments.style.display = 'none';
  		
  		var cdiv = document.createElement('div');
  		cdiv.className = 'geCommentContainer';
  		cdiv.setAttribute('data-commentId', comment.id);
  		cdiv.style.marginLeft = (level * 20 + 5) + 'px';
  
  		if (comment.isResolved && !Editor.isDarkMode())
  		{
  			cdiv.style.backgroundColor = 'ghostWhite';
  		}
  		
  		var headerDiv = document.createElement('div');
  		headerDiv.className = 'geCommentHeader';
  		
  		var userImg = document.createElement('img');
  		userImg.className = 'geCommentUserImg';
  		userImg.src = comment.user.pictureUrl || Editor.userImage;
  		headerDiv.appendChild(userImg);
  		
  		var headerTxt = document.createElement('div');
  		headerTxt.className = 'geCommentHeaderTxt';
  		headerDiv.appendChild(headerTxt);
  		
  		var usernameDiv = document.createElement('div');
  		usernameDiv.className = 'geCommentUsername';
  		mxUtils.write(usernameDiv, comment.user.displayName || '');
  		headerTxt.appendChild(usernameDiv);
  		
  		var dateDiv = document.createElement('div');
  		dateDiv.className = 'geCommentDate';
  		dateDiv.setAttribute('data-commentId', comment.id);
  		writeCommentDate(comment, dateDiv);
  		headerTxt.appendChild(dateDiv);
  		cdiv.appendChild(headerDiv);
  		
  		var commentTxtDiv = document.createElement('div');
  		commentTxtDiv.className = 'geCommentTxt';
  		mxUtils.write(commentTxtDiv, comment.content || '');
  		cdiv.appendChild(commentTxtDiv);
  		
  		if (comment.isLocked)
  		{
  			cdiv.style.opacity = '0.5';
  		}
  		
  		var actionsDiv = document.createElement('div');
  		actionsDiv.className = 'geCommentActions';
  		var actionsList = document.createElement('ul');
  		actionsList.className = 'geCommentActionsList';
  		actionsDiv.appendChild(actionsList);
  		
  		function addAction(name, evtHandler, hide)
  		{
  			var action = document.createElement('li');
  			action.className = 'geCommentAction';
  			var actionLnk = document.createElement('a');
  			actionLnk.className = 'geCommentActionLnk';
  			mxUtils.write(actionLnk, name);
  			action.appendChild(actionLnk);
  			
  			mxEvent.addListener(actionLnk, 'click', function(evt)
  			{
  				evtHandler(evt, comment);
  				evt.preventDefault();
  				mxEvent.consume(evt);
  			});
  			
  			actionsList.appendChild(action);
  			
  			if (hide) action.style.display = 'none';
  		};
  		
  		function collectReplies()
  		{
  			var replies = [];
  			var pdiv = cdiv;
  			
  			function collectReplies(comment) 
  			{
  				replies.push(pdiv);
  				
  				if (comment.replies != null)
  				{
  					for (var i = 0; i < comment.replies.length; i++) 
  					{
  						pdiv = pdiv.nextSibling;
  						collectReplies(comment.replies[i]); 
  					}
  				}	
  			}
  			
  			collectReplies(comment);
  			
  			return {pdiv: pdiv, replies: replies};
  		};
  		
  		function addReply(initContent, editIt, saveCallback, doResolve, doReopen)
  		{
  			var pdiv = collectReplies().pdiv;
  			
  			var newReply = editorUi.newComment(initContent, editorUi.getCurrentUser());
  			newReply.pCommentId = comment.id;
  			
  			if (comment.replies == null) comment.replies = [];
  			
  			var replyComment = addComment(newReply, comment.replies, pdiv, level + 1);
  
  			function doAddReply()
  			{
  				showBusy(replyComment);
  				
  				comment.addReply(newReply, function(id)
  				{
  					newReply.id = id;
  					comment.replies.push(newReply);
  					showDone(replyComment);
  					
  					if (saveCallback) saveCallback();
  					
  				}, function(err)
  				{
  					doEdit();
  					showError(replyComment);
  					editorUi.handleError(err, null, null, null,
  						mxUtils.htmlEntities(mxResources.get('objectNotFound')));
  				}, doResolve, doReopen);				
  			};
  			
  			function doEdit()
  			{
  				editComment(newReply, replyComment, function(newReply)
  				{
  					doAddReply();
  				}, true);
  			};
  
  			if (editIt)
  			{
  				doEdit();
  			}
  			else
  			{
  				doAddReply();
  			}
  		};
  		
  		if (!readOnly && !comment.isLocked && (level == 0 || canReplyToReplies))
  		{
  			addAction(mxResources.get('reply'), function()
  			{
  				addReply('', true);
  			}, comment.isResolved);
  		}
  		
  		var user = editorUi.getCurrentUser();
  		
  		if (user != null && user.id == comment.user.id && !readOnly && !comment.isLocked)
  		{
  			addAction(mxResources.get('edit'), function()
  			{
  				function doEditComment()
  				{
  					editComment(comment, cdiv, function()
  					{
  						showBusy(cdiv);
  						
  						comment.editComment(comment.content, function()
  						{
  							showDone(cdiv);
  						}, function(err)
  						{
  							showError(cdiv);
  							doEditComment();
  							editorUi.handleError(err, null, null, null,
  								mxUtils.htmlEntities(mxResources.get('objectNotFound')));
  						});
  					});
  				};
  				
  				doEditComment();
  			}, comment.isResolved);
  			
  			addAction(mxResources.get('delete'), function()
  			{
  				editorUi.confirm(mxResources.get('areYouSure'), function()
  				{
  					showBusy(cdiv);
  					
  					comment.deleteComment(function(markedOnly)
  					{
  						if (markedOnly === true)
  						{
  							var commentTxt = cdiv.querySelector('.geCommentTxt');
  							commentTxt.innerHTML = '';
  							mxUtils.write(commentTxt, mxResources.get('msgDeleted'));
  							
  							var actions = cdiv.querySelectorAll('.geCommentAction');
  							
  							for (var i = 0; i < actions.length; i++)
  							{
  								actions[i].parentNode.removeChild(actions[i]);
  							}
  							
  							showDone(cdiv);
  							cdiv.style.opacity = '0.5';
  						}
  						else
  						{
  							var replies = collectReplies(comment).replies;
  							
  							for (var i = 0; i < replies.length; i++)
  							{
  								listDiv.removeChild(replies[i]);
  							}
  							
  							for (var i = 0; i < parentArr.length; i++)
  							{
  								if (parentArr[i] == comment) 
  								{
  									parentArr.splice(i, 1);
  									break;
  								}
  							}
  							
  							noComments.style.display = (listDiv.getElementsByTagName('div').length == 0) ? 'block' : 'none';
  						}
  					}, function(err)
  					{
  						showError(cdiv);
  						editorUi.handleError(err, null, null, null,
  							mxUtils.htmlEntities(mxResources.get('objectNotFound')));
  					});
  				});
  			}, comment.isResolved);
  		}
  		
  		if (!readOnly && !comment.isLocked && level == 0) //Resolve is a top-level action only
  		{
  			function toggleResolve(evt)
  			{
  				function doToggle()
  				{
  					var resolveActionLnk = evt.target;
  					resolveActionLnk.innerHTML = '';
  
  					comment.isResolved = !comment.isResolved;
  					mxUtils.write(resolveActionLnk, comment.isResolved? mxResources.get('reopen') : mxResources.get('resolve'));
  					var actionsDisplay = comment.isResolved? 'none' : '';
  					var replies = collectReplies(comment).replies;
  					var color = (Editor.isDarkMode()) ? 'transparent' : (comment.isResolved? 'ghostWhite' : 'white');
  					
  					for (var i = 0; i < replies.length; i++)
  					{
  						replies[i].style.backgroundColor = color;
  						
  						var forOpenActions = replies[i].querySelectorAll('.geCommentAction');
  						
  						for (var j = 0; j < forOpenActions.length; j ++) 
  						{
  							if (forOpenActions[j] == resolveActionLnk.parentNode) continue;
  							
  							forOpenActions[j].style.display = actionsDisplay;
  						}
  
  						if (!resolvedChecked)
  						{
  							replies[i].style.display = 'none';
  						}
  					}
  					
  					updateNoComments();
  				};
  				
  				if (comment.isResolved)
  				{
  					addReply(mxResources.get('reOpened') + ': ', true, doToggle, false, true);
  				}
  				else
  				{
  					addReply(mxResources.get('markedAsResolved'), false, doToggle, true);
  				}
  			};
  			
  			addAction(comment.isResolved? mxResources.get('reopen') : mxResources.get('resolve'), toggleResolve);
  		}
  		
  		cdiv.appendChild(actionsDiv);
  		
  		if (parent != null) 
  		{
  			listDiv.insertBefore(cdiv, parent.nextSibling);
  		}
  		else
  		{
  			listDiv.appendChild(cdiv);
  		}
  		
  		for (var i = 0; comment.replies != null && i < comment.replies.length; i++)
  		{
  			var reply = comment.replies[i];
  			reply.isResolved = comment.isResolved; //copy isResolved to child comments (replies)
  			addComment(reply, comment.replies, null, level + 1, showResolved);
  		}
  		
  		if (curEdited != null)
  		{
  			if (curEdited.comment.id == comment.id)
  			{
  				var origContent = comment.content;
  				comment.content = curEdited.comment.content;
  				editComment(comment, cdiv, curEdited.saveCallback, curEdited.deleteOnCancel);
  				comment.content = origContent;
  			}
  			else if (curEdited.comment.id == null && curEdited.comment.pCommentId == comment.id)
  			{
  				listDiv.appendChild(curEdited.div);
  				editComment(curEdited.comment, curEdited.div, curEdited.saveCallback, curEdited.deleteOnCancel);
  			}
  		}
  
  		return cdiv;
  	};
  
  	if (!readOnly)
  	{
  		var addLink = link.cloneNode();
  		addLink.innerHTML = '<div class="geSprite geSprite-plus" style="display:inline-block;"></div>';
  		addLink.setAttribute('title', mxResources.get('create') + '...');
  		
  		mxEvent.addListener(addLink, 'click', function(evt)
  		{
  			var newComment = editorUi.newComment('', editorUi.getCurrentUser());
  			var newCommentDiv = addComment(newComment, comments, null, 0);
  			
  			function doAddComment()
  			{
  				editComment(newComment, newCommentDiv, function(newComment)
  				{
  					showBusy(newCommentDiv);
  					
  					editorUi.addComment(newComment, function(id)
  					{
  						newComment.id = id;
  						comments.push(newComment);
  						showDone(newCommentDiv);
  					}, function(err)
  					{
  						showError(newCommentDiv);
  						doAddComment();
  						editorUi.handleError(err, null, null, null,
  							mxUtils.htmlEntities(mxResources.get('objectNotFound')));
  					});
  				}, true);
  			}
  			
  			doAddComment();
  			evt.preventDefault();
  			mxEvent.consume(evt);
  		});
  		
  		ldiv.appendChild(addLink);
  	}
  
  	var resolvedLink = link.cloneNode();
  	resolvedLink.innerHTML = '<img src="' + IMAGE_PATH + '/check.png" style="width: 16px; padding: 2px;">';
  	resolvedLink.setAttribute('title', mxResources.get('showResolved'));
  	var resolvedChecked = false;
  	
  	if (Editor.isDarkMode())
  	{
  		resolvedLink.style.filter = 'invert(100%)';
  	}
  	
  	mxEvent.addListener(resolvedLink, 'click', function(evt)
  	{
  		resolvedChecked = !resolvedChecked;
  		
  		this.className = resolvedChecked? 'geButton geCheckedBtn' : 'geButton';
  		refresh();
  		
  		evt.preventDefault();
  		mxEvent.consume(evt);
  	});
  	
  	ldiv.appendChild(resolvedLink);
  	
  	if (editorUi.commentsRefreshNeeded())
  	{
  		var refreshLink = link.cloneNode();
  		refreshLink.innerHTML = '<img src="' + IMAGE_PATH + '/update16.png" style="width: 16px; padding: 2px;">';
  		refreshLink.setAttribute('title', mxResources.get('refresh'));
  	
  		if (Editor.isDarkMode())
  		{
  			refreshLink.style.filter = 'invert(100%)';
  		}
  		
  		mxEvent.addListener(refreshLink, 'click', function(evt)
  		{
  			refresh();
  			
  			evt.preventDefault();
  			mxEvent.consume(evt);
  		});
  		
  		ldiv.appendChild(refreshLink);
  	}
  	
  	if (editorUi.commentsSaveNeeded())
  	{
  		var saveLink = link.cloneNode();
  		saveLink.innerHTML = '<img src="' + IMAGE_PATH + '/save.png" style="width: 20px; padding: 2px;">';
  		saveLink.setAttribute('title', mxResources.get('save'));
  	
  		if (Editor.isDarkMode())
  		{
  			saveLink.style.filter = 'invert(100%)';
  		}
  		
  		mxEvent.addListener(saveLink, 'click', function(evt)
  		{
  			saveCallback();
  			
  			evt.preventDefault();
  			mxEvent.consume(evt);
  		});
  		
  		ldiv.appendChild(saveLink);
  	}
  
  	div.appendChild(ldiv);	
  
  	var comments = [];
  
  	var refresh = mxUtils.bind(this, function()
  	{
  		this.hasError = false;
  		
  		if (curEdited != null)
  		{
  			try
  			{
  				curEdited.div = curEdited.div.cloneNode(true);
  				var commentEditTxt = curEdited.div.querySelector('.geCommentEditTxtArea');
  				var commentEditBtns = curEdited.div.querySelector('.geCommentEditBtns');
  				
  				curEdited.comment.content = commentEditTxt.value;
  				commentEditTxt.parentNode.removeChild(commentEditTxt);
  				commentEditBtns.parentNode.removeChild(commentEditBtns);
  			}
  			catch (e)
  			{
  				editorUi.handleError(e);
  			}
  		}
  		
  		listDiv.innerHTML = '<div style="padding-top:10px;text-align:center;"><img src="' + IMAGE_PATH + '/spin.gif" valign="middle"> ' +
  			mxUtils.htmlEntities(mxResources.get('loading')) + '...</div>';
  		
  		canReplyToReplies = editorUi.canReplyToReplies();
  		
  		if (editorUi.commentsSupported())
  		{
  			editorUi.getComments(function(list)
  			{
  				function sortReplies(replies)
  				{
  					if (replies != null)
  					{
  						//Sort replies old to new
  						replies.sort(function(r1, r2)
  						{
  							return new Date(r1.modifiedDate) - new Date(r2.modifiedDate);
  						});
  						
  						for (var i = 0; i < replies.length; i++)
  						{
  							sortReplies(replies[i].replies);
  						}						
  					}
  				};
  				
  				//Sort comments old to new
  				list.sort(function(c1, c2)
  				{
  					return new Date(c1.modifiedDate) - new Date(c2.modifiedDate);
  				});
  
  				listDiv.innerHTML = '';
  				listDiv.appendChild(noComments);
  				noComments.style.display = 'block';
  				comments = list;
  				
  				for (var i = 0; i < comments.length; i++)
  				{
  					sortReplies(comments[i].replies);
  					addComment(comments[i], comments, null, 0, resolvedChecked);
  				}
  				
  				//New comment case
  				if (curEdited != null && curEdited.comment.id == null && curEdited.comment.pCommentId == null)
  				{
  					listDiv.appendChild(curEdited.div);
  					editComment(curEdited.comment, curEdited.div, curEdited.saveCallback, curEdited.deleteOnCancel);
  				}
  				
  			}, mxUtils.bind(this, function(err)
  			{
  				listDiv.innerHTML = mxUtils.htmlEntities(mxResources.get('error') + (err && err.message? ': ' + err.message : ''));
  				this.hasError = true;
  			}));
  		}
  		else
  		{
  			//TODO if comments are not supported, close the dialog
  			listDiv.innerHTML = mxUtils.htmlEntities(mxResources.get('error'));
  		}
  	});
  
  	refresh();
  	
  	this.refreshComments = refresh;
  
  	//Refresh the modified date of each comment if the window is visible
  	var refreshCommentsTime = mxUtils.bind(this, function()
  	{
  		if (!this.window.isVisible()) return; //only update if it is visible
  		
  		var modDateDivs = listDiv.querySelectorAll('.geCommentDate');
  		var modDateDivsMap = {};
  		
  		for (var i = 0; i < modDateDivs.length; i++)
  		{
  			var div = modDateDivs[i];
  			modDateDivsMap[div.getAttribute('data-commentId')] = div;
  		}
  		
  		function processComment(comment) 
  		{
  			var div = modDateDivsMap[comment.id];
  			
  			if (div == null) return; //resolved comments
  			
  			writeCommentDate(comment, div);
  			
  			for (var i = 0; comment.replies != null && i < comment.replies.length; i++)
  			{
  				processComment(comment.replies[i]);
  			}
  		};
  		
  		for (var i = 0; i < comments.length; i++)
  		{
  			processComment(comments[i]);
  		}
  	});
  
  	//Periodically refresh time every one minute
  	setInterval(refreshCommentsTime, 60000);
  	this.refreshCommentsTime = refreshCommentsTime;
  	
  	this.window = new mxWindow(mxResources.get('comments'), div, x, y, w, h, true, true);
  	this.window.minimumSize = new mxRectangle(0, 0, 300, 200);
  	this.window.destroyOnClose = false;
  	this.window.setMaximizable(false);
  	this.window.setResizable(true);
  	this.window.setClosable(true);
  	this.window.setVisible(true);
  	
  	this.window.addListener(mxEvent.SHOW, mxUtils.bind(this, function()
  	{
  		this.window.fit();
  	}));
  	
  	this.window.setLocation = function(x, y)
  	{
  		var iw = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
  		var ih = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
  		
  		x = Math.max(0, Math.min(x, iw - this.table.clientWidth));
  		y = Math.max(0, Math.min(y, ih - this.table.clientHeight - 48));
  
  		if (this.getX() != x || this.getY() != y)
  		{
  			mxWindow.prototype.setLocation.apply(this, arguments);
  		}
  	};
  	
  	var resizeListener = mxUtils.bind(this, function()
  	{
  		var x = this.window.getX();
  		var y = this.window.getY();
  		
  		this.window.setLocation(x, y);
  	});
  	
  	mxEvent.addListener(window, 'resize', resizeListener);
  
  	this.destroy = function()
  	{
  		mxEvent.removeListener(window, 'resize', resizeListener);
  		this.window.destroy();
  	}
  };
  
  /**
   * 
   */
  var ConfirmDialog = function(editorUi, message, okFn, cancelFn, okLabel, cancelLabel,
  		okImg, cancelImg, showRememberOption, imgSrc, maxHeight)
  {
  	var div = document.createElement('div');
  	div.style.textAlign = 'center';
  	maxHeight = (maxHeight != null) ? maxHeight : 44;
  	
  	var p2 = document.createElement('div');
  	p2.style.padding = '6px';
  	p2.style.overflow = 'auto';
  	p2.style.maxHeight = maxHeight + 'px';
  	p2.style.lineHeight = '1.2em';
  	
  	mxUtils.write(p2, message);
  	div.appendChild(p2);
  	
  	if (imgSrc != null)
  	{
  		var p3 = document.createElement('div');
  		p3.style.padding = '6px 0 6px 0';
  		var img = document.createElement('img');
  		img.setAttribute('src', imgSrc);
  		p3.appendChild(img);
  		div.appendChild(p3);
  	}
  	
  	var btns = document.createElement('div');
  	btns.style.textAlign = 'center';
  	btns.style.whiteSpace = 'nowrap';
  
  	var cb = document.createElement('input');
  	cb.setAttribute('type', 'checkbox');
  
  	var cancelBtn = mxUtils.button(cancelLabel || mxResources.get('cancel'), function()
  	{
  		editorUi.hideDialog();
  		
  		if (cancelFn != null)
  		{
  			cancelFn(cb.checked);
  		}
  	});
  	cancelBtn.className = 'geBtn';
  	
  	if (cancelImg != null)
  	{
  		cancelBtn.innerHTML = cancelImg + '<br>' + cancelBtn.innerHTML;
  		cancelBtn.style.paddingBottom = '8px';
  		cancelBtn.style.paddingTop = '8px';
  		cancelBtn.style.height = 'auto';
  		cancelBtn.style.width = '40%';
  	}
  	
  	if (editorUi.editor.cancelFirst)
  	{
  		btns.appendChild(cancelBtn);
  	}
  	
  	var okBtn = mxUtils.button(okLabel || mxResources.get('ok'), function()
  	{
  		editorUi.hideDialog();
  		
  		if (okFn != null)
  		{
  			okFn(cb.checked);
  		}
  	});
  	btns.appendChild(okBtn);
  	
  	if (okImg != null)
  	{
  		okBtn.innerHTML = okImg + '<br>' + okBtn.innerHTML + '<br>';
  		okBtn.style.paddingBottom = '8px';
  		okBtn.style.paddingTop = '8px';
  		okBtn.style.height = 'auto';
  		okBtn.className = 'geBtn';
  		okBtn.style.width = '40%';
  	}
  	else
  	{
  		okBtn.className = 'geBtn gePrimaryBtn';
  	}
  	
  	if (!editorUi.editor.cancelFirst)
  	{
  		btns.appendChild(cancelBtn);
  	}
  
  	div.appendChild(btns);
  	
  	if (showRememberOption)
  	{
  		btns.style.marginTop = '10px';
  		var p2 = document.createElement('p');
  		p2.style.marginTop = '20px';
  		p2.style.marginBottom = '0px';
  		p2.appendChild(cb);
  		var span = document.createElement('span');
  		mxUtils.write(span, ' ' + mxResources.get('rememberThisSetting'));
  		p2.appendChild(span);
  		div.appendChild(p2);
  		
  		mxEvent.addListener(span, 'click', function(evt)
  		{
  			cb.checked = !cb.checked;
  			mxEvent.consume(evt);
  		});
  	}
  	else
  	{
  		btns.style.marginTop = '12px';
  	}
  
  	this.init = function()
  	{
  		okBtn.focus();
  	};
  	
  	this.container = div;
  };
  