USAGE
=====
- Create a file holding the style definitions (styles.json)
- Create a file holding the menu and form definitions (forms.json)
	This file also holds the default data for text fields, but NOT list boxes
- Create a JS file that will invoke the application
	- Define and populate arrays for selection lists
	- Create a function for each postProcess referenced in the form definition file
	- Load the application
		xxx = vs.window({ definitions:'data/forms.json', stylesheet:'data/styles.json', data: serverStatus });
- Start the data server
	node ~/Drive/Software/UI/Admin/server.js &
- Run the application from the browser
	http://localhost/admin.svg



OUTSTANDING ISSUES
==================
	- vs.supportedChars: DNW
	- Add graphs
	- Add tree control
	- Add grid control

vs.button
	- Allow buttons to be defined in forms.json

vs.form.createForm
	- Hard coded frame values: moveable, titleBarVisible, statusBarVisible, closeButton, minimiseButton, maximiseButton, linkButton
	- Hard coded button values: id, buttonName, buttonType, cornerType and buttonSymbolId

vs.frame
	- createFrame: currentFrame doesn't cater for multiple open forms
	- minimizePosition: This needs to be more sophisticated
	- dragTo: First move throws frame to bottom right, OK after this
	- linkItems: This needs testing
	- linkItems: userDesktop.Grids ?
	- setStatusText: Needs testing

vs.grid
	- Status bar is hidden by the grid and bottom slider
	- Include showStatus somewhere
	- Replace vs.data with proper data structure
	- Add uiGrid.rowSelected which opens a form for the selected row
	- Add uiGrid.sortGrid
	- Add uiGrid.updateGrid which responds to callbacks from button presses from a form generated by a grid
	- Expand handleEvent with uiGrid.handleEvent

vs.selectionList
	- Select default from default value in formdefs

vs.textArea
	- Add tooltips
	- Check all types of string validation

vs.textBox
	- Scrolling DNW
	- If validation is done in-line, is that.changed needed?
	- Enter does not set that.changed so does not save data in loseFocus
	- Enter should move to next field

vs.window
	- vs.window.addSymbols: These default defs should be loaded from a JSON file
	- vs.window.formDefinitions: Lists must be set up, if not, issue warning
	- vs.window.formDefinitions: Validate form defs on loading - all mandatory fields must be present and lists accessible
	- vs.window.gridDefinitions: Validate grid defs on loading - all mandatory fields must be present and lists accessible
	- vs.window.styles: Validate style defs on loading - all styles used in vs.js must be present



SUPPORTED EVENTS
================
	- button
		rectangle
			click: trigger postProcess
	- frame
		title bar
			click: minimise the form
			mousedown: move the form
		title bar buttons
			click: close, maximise, minimise, link
		minimised icon
			click: maximise the form
	- grid
		???????????????????????????????????????????????????????????
	- menu
		menu rect/text
			mouseover: show option list
			mouseout: hide option list
		option rect/text
			click: open form
			mouseover: show option list
			mouseout: hide option list
	- selectionList
		selection rect
			click: show/hide option list
		icon:
			click: show/hide option list
		options in list:
			click: select option
			mouseover: Highlight the option
			mouseout: Un-highlight the option
		scroll bar top/bottom icons
			mousedown: scroll up/down 1 option
		scroll bar slider
			mousedown: move relative to list of options
	- slider
		???????????????????????????????????????????????????????????
	- text area
		text
			mouseover: show tool tip
			mouseout: hide tool tip
	- text box
		???????????????????????????????????????????????????????????



RUNTIME LOGIC
=============
admin.js initialise()
	vs.window(application,definitions,stylesheet) - Initialise all functions
	vs.window.buildApplication() - Build the application

vs.window.buildApplication()
	whichBrowser();
	vs.window.setWindowSize()
	vs.style = vs.loadStyles();
	vs.window.addFrame();
	vs.window.addSymbols();
	defs = new Ajax(vs.appname);
	elements = defs.synchJSON(vs.definitions);
	menuarray = vs.window.menuDefinitions(elements);
	vs.menu({menudefs: menuarray});
	vs.formdefs = vs.window.formDefinitions(elements);

Menu option onclick method - Load the referenced form
	vs.form({formdefs: formobj});
		whichBrowser();
		that.createForm(that.id);
			vs.container(args)
			vs.selectionList(args)
				vs.textArea(args);
			vs.textBox(args)
				vs.textArea(args);
??			uiButton



DOCUMENT STRUCTURE
==================

document.documentElement
	defs
		symbol id=titlebar.close
			...
		symbol id=titlebar.maximize
			...
		symbol id=titlebar.minimize
			...
		symbol id=titlebar.link
			...
	g id=uiWindow																						vs.windowNode
		rect id=window																					Background rectangle
		rect id=statusRect																				Status icon
		text id=statusText																				Status text
		g id=menubar
			g id={e.menu}.menu
				rect																					Menu rectangle
				text																					Menu text
				g id={e.menu}.list
					g id={e.menu}.{e.options.id}.{e.options.type}
						rect																			Option rectangle
						text																			Option text
					...
			...
		g id={e.options.id}																				Frame for form
			g id=titleBar
				rect id=titlebar.rect.{e.options.id}													Title bar
				text																					Title text
				use id=titlebar.{button name}.{e.options.id}											Button on title bar (1/button)
			g id=statusBar
				rect																					Status bar
				text																					Status text
			g id=textArea																				Field label
				rect																					Text area background
				text id={e.options.field.id}.label.N													Text area text (may be over several lines)
			g id=textBox																				Text box
				rect																					Text box
				svg																						Viewbox for scrolling text
					g
						text id={e.options.field.id}.text												Text box text
						line																			Cursor bar
??			rect
			g id={e.options.id}.{OK|Cancel}																Action button
				rect																					Upper left shadow
				rect																					Lower right shadow
				rect																					Background
				text																					Button text
??				rect
			g id={e.options.field.id}.list																Selection list
				rect id={e.options.field.id}.field														Selection boundary
				text																					Selected option
				rect id={e.options.field.id}.pulldown													Dropdown rectangle
				path id={e.options.field.id}.triangle													Dropdown icon
			g id={e.options.field.id}.dropdown															Dropdown list of selection list
??				rect
				rect id={e.options.field.id}.dropdown.rect.N											Dropdown option N background
				text id={e.options.field.id}.dropdown.text.N											Dropdown option N text
				rect id={e.options.field.id}.scrollbar.rect												Dropdown scrollbar background
				rect id={e.options.field.id}.scroll.upper.rect											Dropdown upper scroll rectangle
				rect id={e.options.field.id}.scroll.lower.rect											Dropdown lower scroll rectangle
				rect id={e.options.field.id}.scroll.slider												Dropdown scrollbar slider

		g id={e.options.id}.icon																		Hidden minimize icon
			rect																						Background to icon
			text																						Icon text

		g id={e.options.id}																				Frame for grid
			g id=titleBar
				rect id={e.options.id}.titlebar.rect													Title bar
				text																					Title text
				use id={e.options.id}.titlebar.{type}													Button on title bar (1/button)
			g id=statusBar
				rect																					Status bar
				text																					Status text
??				rect
				g id=grid																				Grid control
					svg id={e.options.id}.title															Viewbox for scrolling grid
						g
							rect id=title.{e.options.field.id}											Column heading cell background
							text																		Column heading cell text
					svg id={e.options.id}.data																Viewbox for scrolling grid
						g
							g id={e.options.id}.row.N													Container for row N of data
								rect id={e.options.id}.cell.N.{e.options.field.id}						Data cell background for row N
								text																	Data cell text for row N
					rect																				Outline for column headings
					rect																				Outline for data grid
					g																					Horizontal scroll bar
						rect																			Background
						line																			Slider line
						rect																			Slider bar
					g																					Vertical scroll bar
						rect																			Background
						line																			Slider line
						rect																			Slider bar