docs: function(editorUi)
  {
  	var graph = editorUi.editor.graph;
  	var row, td;
  
  	var table = document.createElement('table');
  	table.style.width = '100%';
  	table.style.height = '100%';
  	var tbody = document.createElement('tbody');
  	
  	row = document.createElement('tr');
  	
  	td = document.createElement('td');
  	td.style.verticalAlign = 'top';
  	td.style.fontSize = '10pt';
  	mxUtils.write(td, mxResources.get('paperSize') + ':');
  	
  	row.appendChild(td);
  	
  	td = document.createElement('td');
  	td.style.verticalAlign = 'top';
  	td.style.fontSize = '10pt';
  	
  	var accessor = PageSetupDialog.addPageFormatPanel(td, 'pagesetupdialog', graph.pageFormat);
  
  	row.appendChild(td);
  	tbody.appendChild(row);
  	
  	row = document.createElement('tr');
  	
  	td = document.createElement('td');
  	mxUtils.write(td, mxResources.get('background') + ':');
  	
  	row.appendChild(td);
  	
  	td = document.createElement('td');
  	td.style.whiteSpace = 'nowrap';
  	
  	var backgroundInput = document.createElement('input');
  	backgroundInput.setAttribute('type', 'text');
  	var backgroundButton = document.createElement('button');
  	
  	backgroundButton.style.width = '18px';
  	backgroundButton.style.height = '18px';
  	backgroundButton.style.marginRight = '20px';
  	backgroundButton.style.backgroundPosition = 'center center';
  	backgroundButton.style.backgroundRepeat = 'no-repeat';
  	
  	var newBackgroundColor = graph.background;
  	
  	function updateBackgroundColor()
  	{
  		if (newBackgroundColor == null || newBackgroundColor == mxConstants.NONE)
  		{
  			backgroundButton.style.backgroundColor = '';
  			backgroundButton.style.backgroundImage = 'url(\'' + Dialog.prototype.noColorImage + '\')';
  		}
  		else
  		{
  			backgroundButton.style.backgroundColor = newBackgroundColor;
  			backgroundButton.style.backgroundImage = '';
  		}
  	};
  	
  	updateBackgroundColor();
  
  	mxEvent.addListener(backgroundButton, 'click', function(evt)
  	{
  		editorUi.pickColor(newBackgroundColor || 'none', function(color)
  		{
  			newBackgroundColor = color;
  			updateBackgroundColor();
  		});
  		mxEvent.consume(evt);
  	});
  	
  	td.appendChild(backgroundButton);
  	
  	mxUtils.write(td, mxResources.get('gridSize') + ':');
  	
  	var gridSizeInput = document.createElement('input');
  	gridSizeInput.setAttribute('type', 'number');
  	gridSizeInput.setAttribute('min', '0');
  	gridSizeInput.style.width = '40px';
  	gridSizeInput.style.marginLeft = '6px';
  	
  	gridSizeInput.value = graph.getGridSize();
  	td.appendChild(gridSizeInput);
  	
  	mxEvent.addListener(gridSizeInput, 'change', function()
  	{
  		var value = parseInt(gridSizeInput.value);
  		gridSizeInput.value = Math.max(1, (isNaN(value)) ? graph.getGridSize() : value);
  	});
  	
  	row.appendChild(td);
  	tbody.appendChild(row);
  	
  	row = document.createElement('tr');
  	td = document.createElement('td');
  	
  	mxUtils.write(td, mxResources.get('image') + ':');
  	
  	row.appendChild(td);
  	td = document.createElement('td');
  	
  	var changeImageLink = document.createElement('a');
  	changeImageLink.style.textDecoration = 'underline';
  	changeImageLink.style.cursor = 'pointer';
  	changeImageLink.style.color = '#a0a0a0';
  	
  	var newBackgroundImage = graph.backgroundImage;
  	
  	function updateBackgroundImage()
  	{
  		if (newBackgroundImage == null)
  		{
  			changeImageLink.removeAttribute('title');
  			changeImageLink.style.fontSize = '';
  			changeImageLink.innerHTML = mxResources.get('change') + '...';
  		}
  		else
  		{
  			changeImageLink.setAttribute('title', newBackgroundImage.src);
  			changeImageLink.style.fontSize = '11px';
  			changeImageLink.innerHTML = newBackgroundImage.src.substring(0, 42) + '...';
  		}
  	};
  	
  	mxEvent.addListener(changeImageLink, 'click', function(evt)
  	{
  		editorUi.showBackgroundImageDialog(function(image)
  		{
  			newBackgroundImage = image;
  			updateBackgroundImage();
  		});
  		
  		mxEvent.consume(evt);
  	});
  	
  	updateBackgroundImage();
  
  	td.appendChild(changeImageLink);
  	
  	row.appendChild(td);
  	tbody.appendChild(row);
  	
  	row = document.createElement('tr');
  	td = document.createElement('td');
  	td.colSpan = 2;
  	td.style.paddingTop = '16px';
  	td.setAttribute('align', 'right');
  
  	var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
  	{
  		editorUi.hideDialog();
  	});
  	cancelBtn.className = 'geBtn';
  	
  	if (editorUi.editor.cancelFirst)
  	{
  		td.appendChild(cancelBtn);
  	}
  	
  	var applyBtn = mxUtils.button(mxResources.get('apply'), function()
  	{
  		editorUi.hideDialog();
  		
  		if (graph.gridSize !== gridSizeInput.value)
  		{
  			graph.setGridSize(parseInt(gridSizeInput.value));
  		}
  
  		var change = new ChangePageSetup(editorUi, newBackgroundColor,
  			newBackgroundImage, accessor.get());
  		change.ignoreColor = graph.background == newBackgroundColor;
  		
  		var oldSrc = (graph.backgroundImage != null) ? graph.backgroundImage.src : null;
  		var newSrc = (newBackgroundImage != null) ? newBackgroundImage.src : null;
  		
  		change.ignoreImage = oldSrc === newSrc;
  
  		if (graph.pageFormat.width != change.previousFormat.width ||
  			graph.pageFormat.height != change.previousFormat.height ||
  			!change.ignoreColor || !change.ignoreImage)
  		{
  			graph.model.execute(change);
  		}
  	});
  	applyBtn.className = 'geBtn gePrimaryBtn';
  	td.appendChild(applyBtn);
  
  	if (!editorUi.editor.cancelFirst)
  	{
  		td.appendChild(cancelBtn);
  	}
  	
  	row.appendChild(td);
  	tbody.appendChild(row);
  	
  	table.appendChild(tbody);
  	this.container = table;
  }