JS Forms Library B

Encapulates and extends many HTML forms elements.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/409/1286/JS%20Forms%20Library%20B.js

// ==UserScript==
// @name           JS Forms Library B
// @namespace      formstemp
// @description    Encapulates and extends many HTML forms elements.
// @require https://greasyfork.org/scripts/407-wm-common-library/code/WM%20Common%20Library.user.js?version=1284
 // @require https://greasyfork.org/scripts/408-wm-debug-console/code/WM%20Debug%20Console.user.js?version=1285
// @license        http://creativecommons.org/licenses/by-nc-nd/3.0/us/
// @include        file:///C:/Users/Charlie/Desktop/*
// @version        0.0.0.12
// @copyright      Charlie Ewing except where noted
// ==/UserScript==

//this script requires some functions in the WM Common Library
//this script needs access to a pre-defined JSON object

(function() {
	var sandbox=this;
		
	//element helper functions
	sandbox.elementOuterWidth=function(e){
		return parseInt(e.offsetWidth||0);
	};
	sandbox.elementOuterHeight=function(e){
		return parseInt(e.offsetHeight||0);
	};
	sandbox.elementInnerWidth=function(e){
		var curWidth = e.style.width;
		e.style.width="0";
		var difference = elementOuterWidth(e);
		e.style.width=curWidth;
		return elementOuterWidth(e)-difference;
	};	
	sandbox.elementInnerHeight=function(e){
		var curHeight = e.style.height;
		e.style.height="0";
		var difference = elementOuterHeight(e);
		e.style.height=curHeight;
		return elementOuterHeight(e)-difference;
	};		

	//forms library B
	sandbox.jsForms = {
	
		colorData:{
			webSafe:[],
			system:["ActiveBorder","ActiveCaption","ActiveCaptionText","AppWorkspace","ButtonFace","ButtonHighlight","ButtonShadow","Control","ControlDark","ControlDarkDark","ControlLight","ControlLightLight","ControlText","Desktop","GradientActiveCaption","GradientInactiveCaption","GrayText","Highlight","HighlightText","HotTrack","InactiveBorder","InactiveCaption","InactiveCaptionText","Info","InfoText","Menu","MenuBar","MenuHighlight","MenuText","ScrollBar","Transparent","Window","WindowFrame","WindowText"],
			colorWords:["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenrod","DarkGray","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","DarkOrange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DodgerBlue","Firebrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","Goldenrod","Gray","Green","GreenYellow","Honeydew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenrodYellow","LightGray","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquamarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenrod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"],
			custom:[
				{name:"Attribute",value:"rgba(255, 0, 0, 0.75)"},
				{name:"BlueWindow",value:"rgba(156, 246, 255, 0.75)"},
				{name:"Bookmark",value:"rgba(191, 210, 249, 0.75)"},
				{name:"BookmarkText",value:"rgba(128, 128, 128, 0.75)"},
				{name:"Breakpoint",value:"rgba(150, 58, 70, 0.75)"},
				{name:"BreakpointText",value:"rgba(255, 219, 163, 0.75)"},
				{name:"BrownText",value:"rgba(88, 60, 31, 0.75)"},
				{name:"Buy",value:"rgba(83, 196, 251, 0.75)"},
				{name:"Caret",value:"rgba(128, 0, 255, 0.75)"},
				{name:"CDATA",value:"rgba(255, 128, 0, 0.75)"},
				{name:"Close",value:"rgba(195, 70, 58, 0.75)"},
				{name:"Comment",value:"rgba(0, 100, 0, 0.75)"},
				{name:"CurrentLine",value:"rgba(232, 232, 232, 0.75)"},
				{name:"Experimental",value:"rgba(156, 244, 156, 0.75)"},
				{name:"GoTo",value:"rgba(102, 204, 51, 0.75)"},
				{name:"GreenWindow",value:"rgba(207, 255, 180, 0.75)"},
				{name:"Hint",value:"rgba(174, 129, 235, 0.75)"},
				{name:"ID",value:"rgba(0, 128, 255, 0.75)"},
				{name:"InactiveSelected",value:"rgba(191, 205, 219, 0.75)"},
				{name:"InactiveSelectedText",value:"rgba(67, 78, 84, 0.75)"},
				{name:"ItemDone",value:"#91FF91"}, 
				{name:"ItemFailed",value:"#FF7171"}, 
				{name:"ItemProcessing",value:"#FFFF7D"}, 
				{name:"Keyword",value:"rgba(0, 0, 255, 0.75)"},
				{name:"LineNumber",value:"rgba(43, 145, 175, 0.75)"},
				{name:"Number",value:"rgba(255, 0, 0, 0.75)"},
				{name:"PRE",value:"rgba(246, 246, 242, 0.75)"},
				{name:"QuoteText",value:"rgba(85, 85, 85, 0.75)"},
				{name:"Regex",value:"rgba(128, 0, 255, 0.75)"},
				{name:"SelectedText",value:"rgba(192, 192, 192, 0.75)"},
				{name:"SmartHightlighting",value:"rgba(0, 255, 0, 0.75)"},
				{name:"String",value:"rgba(163, 21, 21, 0.75)"},
				{name:"Tag",value:"rgba(0, 0, 255, 0.75)"},
				{name:"TanWindow",value:"rgba(255, 233, 180, 0.75)"},
				{name:"TrackChange",value:"rgba(108, 226, 108, 0.75)"},
				{name:"Unsaved",value:"rgba(255, 238, 98, 0.75)"},
				{name:"Value",value:"rgba(0, 0, 0, 0.75)"}
				
			]
		},
	
		globalStyle:function(){
			//control element styles
			return ".jsfButton {"+
				//"display: block;"+
				"width: 17px;"+
				"border: 1px solid buttonshadow;"+
				"border-radius: 15%;"+
				"padding: 0px;"+
				"line-height: 0;"+
				"font-size: 16px;"+
				"box-shadow: 0 5px 10px buttonhighlight inset, 0 3px 10px buttonhighlight inset,0 -5px 10px buttonshadow inset, 1px 1px 0 buttonhighlight inset, -1px -1px 0 buttonhighlight inset;"+
				"vertical-align: middle;"+
				"background-color: buttonface;"+
				"position:relative;"+
				"}\n"+
			".jsfButton:hover {"+
				"border: 1px solid highlight;"+
				"box-shadow: 0 5px 10px buttonhighlight inset, 0 3px 10px buttonhighlight inset,0 -3px 10px highlight inset, 1px 1px 0 buttonhighlight inset, -1px -1px 0 buttonhighlight inset;"+
				"}\n"+
			".jsfButton>span {position:absolute;}\n"+
			
			//tab styles
			".jsfTabControl>.tabs {display:block;}\n"+
			".jsfTabControl>.pages {overflow:auto; display:block; padding:3px; border-radius: 0 5px 5px 5px; border: 1px solid; z-index:1; position:relative; top:-1px; background-color:buttonface; padding:5px;}\n"+
			".jsfTabControl>.pages>div {display:block; height:100%;}\n"+
			".jsfTab {z-index:0; top:2px; background-color:buttonshadow; display:inline-block;border:1px solid; border-bottom:none; border-radius:5px 5px 0 0; padding: 4px 8px; position:relative;}\n"+
			".jsfTab.selected {z-index:999; top:0; background-color:buttonface;}\n"+
			".jsfTab>img {vertical-align:middle; width:16px; height:16px; padding-right:4px; display:inline-block;}\n"+
			".jsfTab>div {vertical-align:middle; display:inline-block;}\n"+
			
				//left side tabs variant
				".jsfTabControl.alignLeft>.tabs {display:inline-block; vertical-align:top;}\n"+
				".jsfTabControl.alignLeft>.pages {display:inline-block; vertical-align:top; left:-1px; top:0;}\n"+
				".jsfTabControl.alignLeft>.tabs>.jsfTab {border-radius:5px 0 0 5px; border:1px solid; border-right:none; display:block; left:2px; top:0;}\n"+
				".jsfTabControl.alignLeft>.tabs>.jsfTab.selected {left:0;}\n"+
				".jsfTabControl.alignLeft>.tabs>.jsfTab>img {}\n"+
				".jsfTabControl.alignLeft>.tabs>.jsfTab>div {}\n"+
		
				//right side tabs variant
				".jsfTabControl.alignRight>.tabs {display:inline-block; vertical-align:top;}\n"+
				".jsfTabControl.alignRight>.pages {display:inline-block; vertical-align:top; right:-1px; top:0; border-radius:5px 0 5px 5px;}\n"+
				".jsfTabControl.alignRight>.tabs>.jsfTab {border-radius:0 5px 5px 0; border:1px solid; border-left:none; display:block; right:2px; top:0;}\n"+
				".jsfTabControl.alignRight>.tabs>.jsfTab.selected {right:0;}\n"+
				".jsfTabControl.alignRight>.tabs>.jsfTab>img {}\n"+
				".jsfTabControl.alignRight>.tabs>.jsfTab>div {}\n"+

				//bottom tabs variant
				".jsfTabControl.alignBottom>.tabs {}\n"+
				".jsfTabControl.alignBottom>.pages {border-radius:5px 5px 5px 0; top:1px;}\n"+
				".jsfTabControl.alignBottom>.tabs>.jsfTab {border:1px solid; border-top:none; border-radius:0 0 5px 5px; top:-2px;}\n"+
				".jsfTabControl.alignBottom>.tabs>.jsfTab.selected {top:0;}\n"+
				".jsfTabControl.alignBottom>.tabs>.jsfTab>img {}\n"+
				".jsfTabControl.alignBottom>.tabs>.jsfTab>div {}\n"+

				//coolbar top variant
				".jsfTabControl.coolBar>.tabs {background-color:window;}\n"+
				".jsfTabControl.coolBar>.pages {top:0; border-radius:0; border:none; border-top:solid 1px windowframe; box-shadow:inset 0 1px buttonhighlight; padding: 15px 11px;}\n"+
				".jsfTabControl.coolBar>.tabs>.jsfTab {margin-left:2px; top:0px; background-color:transparent; border-radius:0; border:none; text-align:center;}\n"+
				".jsfTabControl.coolBar>.tabs>.jsfTab:first-child {margin-left:11px;}\n"+
				".jsfTabControl.coolBar>.tabs>.jsfTab.selected {background-color:activecaption;}\n"+
				".jsfTabControl.coolBar.hotTrack>.tabs>.jsfTab.selected:hover {background-color:activecaption;}\n"+
				".jsfTabControl.coolBar>.tabs>.jsfTab>img {width:32px; height:32px; padding-right:0px;}\n"+
				".jsfTabControl.coolBar>.tabs>.jsfTab>div {display:block; padding-top:5px;}\n"+

				//coolbar left variant
				".jsfTabControl.coolBar.alignLeft>.tabs {}\n"+
				".jsfTabControl.coolBar.alignLeft>.pages {left:0; border:none; border-left:solid 1px windowframe; box-shadow:inset 1px 0 buttonhighlight;}\n"+
				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab {left:0px; margin-left:0px; margin-top:2px;}\n"+
				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab:first-child {margin-left:0px; margin-top:11px;}\n"+
				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab.selected {}\n"+
				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab>img {}\n"+
				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab>div {}\n"+

				//coolbar right variant
				".jsfTabControl.coolBar.alignRight>.tabs {}\n"+
				".jsfTabControl.coolBar.alignRight>.pages {left:0; border:none; border-right:solid 1px windowframe; box-shadow:inset -1px 0 buttonhighlight;}\n"+
				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab {left:0px; margin-left:0px; margin-top:2px;}\n"+
				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab:first-child {margin-left:0px; margin-top:11px;}\n"+
				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab.selected {}\n"+
				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab>img {}\n"+
				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab>div {}\n"+

				//coolbar bottom variant
				".jsfTabControl.coolBar.alignBottom>.tabs {}\n"+
				".jsfTabControl.coolBar.alignBottom>.pages {border:none; border-bottom:solid 1px windowframe; box-shadow:inset 0 -1px buttonhighlight;}\n"+
				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab {}\n"+
				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab:first-child {}\n"+
				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab.selected {}\n"+
				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab>img {}\n"+
				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab>div {}\n"+
				
				//hottracking variant
				".hotTrack>.tabs>.jsfTab:hover {background-color:inactivecaption;}\n"+
				".hotTrack>.tabs>.jsfTab.selected:hover {background-color:buttonface;}\n"+
				
			//draw styles
			".jsfblock {display:block !important;}\n"+
			".jsftableRow {display:table-row !important;}\n"+
			".jsftableCell {display:table-cell !important;}\n"+
			".jsfinlineBlock {display:inline-block !important;}\n"+
			".jsfinline {display:inline !important;}\n"+
			".jsftable {display:table !important;}\n"+		
			".jsfhidden {display:none !important;}\n"+
			
			".jsfBlock {display:block !important;}\n"+
			".jsfTableRow {display:table-row !important;}\n"+
			".jsfTableCell {display:table-cell !important;}\n"+
			".jsfInlineBlock {display:inline-block !important;}\n"+
			".jsfInline {display:inline !important;}\n"+
			".jsfTable {display:table !important;}\n"+		
			".jsfHidden {display:none !important;}\n"+
			
		
			//form docking
			".jsfDockTop {position:absolute !important; top:0px !important;}\n"+
			".jsfDockBottom {position:absolute !important; bottom:0px !important;}\n"+
			".jsfDockRight {position:absolute !important; right:0px !important;}\n"+
			".jsfDockLeft {position:absolute !important; left:0px !important;}\n"+

			""//leave here
		},
	
		//basic constructor
		createElement:function(type,params){try{
			if (type=="createElement") {
				log("jsForms.createElement: Whoa! That would create an infinite loop.");
				return null;
			} else if (exists(jsForms[type])) {
				return new jsForms[type](params);
			}
		}catch(e){log("jsForms.createElement: "+e);}},		
	
		//basic parts for every element
		basicElement:function(params){try{
			var self=this;
			params=params||{};
			
			//defaults
			this._enabled=true;
			this.parent=null; //container element
			this.tag=null;
			this.causesValidation=true;
			
			//events
			this.onCreated=null;
			
			//set the accessibility of the element			
			this.__defineGetter__("enabled", function(){
				return this._enabled;
			});		   
			this.__defineSetter__("enabled", function(v){
				this._enabled = cBool(v);
				if (this.node) this.node.enabled=this.enabled;
			});
			
			//enable/disable commands
			this.enable=function(){this.enabled=true;};
			this.disable=function(){this.enabled=false;};

			//init
			for (var p in params) this[p]=params[p];
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.basicElement.init: "+e);}},
	
		//basic parts for visual elements
		visualElement:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basics
			self=extend(self,new jsForms.basicElement() );
			
			//defaults
			this._backColor="";
			this._foreColor="";
			this._font="";//"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif
			this._cursor="";
			this._visible=true;
			this._position={top:"",left:"",right:"",bottom:""};
			this._size={height:"",width:""};
			this._maximumSize={height:"",width:""};
			this._minimumSize={height:"",width:""};
			this._margin={top:"",left:"",right:"",bottom:""};
			this._padding={top:"",left:"",right:"",bottom:""};
			this._node=null;
			this.backgroundNode=null;
			this.borderNode=null;
			//_backgroundImage: url
			//_backgroundImageLayout: "", time, stretch, center, zoom
			this._borderStyle="None"; //[None, FixedSingle, Fixed3D]
			this._drawStyle="inline-block";
			this._borderCSS="1px solid #646464";
			this._borderRadius={topLeft:"",topRight:"",bottomRight:"",bottomLeft:""};
			this._toolTipText="";
			this._dock="none";
			
			//events
			this.onClick=null;
			this.onFocus=null;
			this.onBlur=null;
			
			//add css className
			this.addClassName=function(s){try{
				if (!isArray(s)) s=[s];
				var css=this.node.className;
				for (var w=0,len=s.length;(w<len);w++) {
					var word=s[w];
					this.node.className=css.addWord("jsf"+word);
				}
			}catch(e){log("jsForms.visualElement.addClassName: "+e);}};

			//remove css className
			this.removeClassName=function(s){try{
				if (!isArray(s)) s=[s];
				var css=this.node.className;
				for (var w=0,len=s.length;(w<len);w++) {
					var word=s[w];
					this.node.className=css.removeWord("jsf"+word);
				}
			}catch(e){log("jsForms.visualElement.addClassName: "+e);}};
			
			//autoFit parent element
			this.__defineGetter__("dock", function(){
				return this._dock;
			});
			this.__defineSetter__("dock", function(v){try{
				this._dock = (v=v.toString());
				
				//clear classes
				this.removeClassName(["dockTop","dockBottom","dockFill","dockRight","dockLeft"]);
				
				//calculate display, height, width and position
				var d, w, h, p=this.node.parentNode||null;
				switch(v) {
					case "none":
						//use given heights and widths
						d=this._drawStyle;
						w=this.size.width||"";
						h=this.size.height||"";						
						break;
					case "fill":
						//fully dock with parent object
						if (!p) return;
						d="block";
						w="";
						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
						break;
					case "fillAndShare":
						//dock with parent object
						//using any space left by other children
						//this assumes all siblings are blocks
						if (!p) return;
						d="block";
						w="";
						//detect maximum possible height
						h=
							//parent inner height
							elementInnerHeight(p)
							//minus the outer requirements for this element
							-(this.outerHeight-this.innerHeight);
						//detect sibling elements' heights
						var sibH=0;
						for (var s in p.childNodes){
							sib=p.childNodes[s];
							if (sib!=this.node) {
								sibH+=elementOuterHeight(sib);
							}
						}
						h=(h-sibH)+"px";
						break;
					case "top":
						//dock to the top of the parent
						d="block";
						w="";
						h=this.size.height||"";
						this.addClassName("dockTop");
						break;
					case "bottom":
						//dock to the bottom of the parent
						d="block";
						w="";
						h=this.size.height||"";
						this.addClassName("dockBottom");
						break;
					case "right":
						//dock to the right of the parent
						d=this._drawStyle;
						w=this.size.width||"";
						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
						this.addClassName("dockRight");
						break;
					case "left":
						//dock to the right of the parent
						d=this._drawStyle;
						w=this.size.width||"";
						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
						this.addClassName("dockLeft");
						break;
				}
				
				//apply non-class changes
				this.node.style.display=d;
				this.node.style.width=w;
				this.node.style.height=h;
			}catch(e){log("jsForms.visualElement.autoFit: "+e);}});

			//set css background color
			this.__defineGetter__("backColor", function(){
				return this._backColor;
			});
			this.__defineSetter__("backColor", function(v){try{
				this._backColor = (v.toString());
				if (this.backgroundNode) this.backgroundNode.style.backgroundColor=this.backColor;
			}catch(e){log("jsForms.visualElement.backColor: "+e);}});
			
			//set draw style (display)
			this.__defineGetter__("drawStyle", function(){
				return this._drawStyle;
			});
			this.__defineSetter__("drawStyle", function(v){try{
				this._drawStyle = (v.toString());
				this.dock=this._dock;
			}catch(e){log("jsForms.visualElement.drawStyle: "+e);}});

			//set tooltiptext/title
			this.__defineGetter__("toolTipText", function(){
				return this._toolTipText;
			});
			this.__defineSetter__("toolTipText", function(v){try{
				this._toolTipText = (v.toString());
				if (this.node) this.node.title=this._toolTipText;
			}catch(e){log("jsForms.visualElement.toolTipText: "+e);}});

			//set css foreground color
			this.__defineGetter__("foreColor", function(){
				return this._foreColor;
			});		   
			this.__defineSetter__("foreColor", function(v){try{
				this._foreColor = (v.toString());
				if (this.node) this.node.style.color=this.foreColor;
			}catch(e){log("jsForms.visualElement.foreColor: "+e);}});
			
			//set the font used in both the box and the list
			this.__defineGetter__("font", function(){
				return this._font;
			});			   
			this.__defineSetter__("font", function(v){try{
				this._font = (v.toString());
				if (this.node) this.node.style.fontFamily=this.font;
			}catch(e){log("jsForms.visualElement.font: "+e);}});

			//set the node element css class
			this.__defineGetter__("className", function(){
				return this.node.className;
			});			   
			this.__defineSetter__("className", function(v){try{
				if (this.node) this.node.className=v;
			}catch(e){log("jsForms.visualElement.className: "+e);}});

			//set the cursor used in the element
			this.__defineGetter__("cursor", function(){
				return this._cursor;
			});
			this.__defineSetter__("cursor", function(v){try{
				this._cursor = (v.toString());
				if (this.node) this.node.style.cursor=this.cursor;
			}catch(e){log("jsForms.visualElement.cursor: "+e);}});

			//set if the dropdown is visible
			this.__defineGetter__("visible", function(){
				return this._visible;
			});			   
			this.__defineSetter__("visible", function(v){try{
				this._visible = cBool(v);
				//log(this._visible);
				if (this._visible) this.removeClassName("hidden"); 
				else this.addClassName("hidden");
			}catch(e){log("jsForms.visualElement.visible: "+e);}});

			//set the location based on the upper left of the container box
			//values are copied from the passed object so that a reference to the
			//passed object does not remain
			this.__defineGetter__("position", function(){
				return this._position;
			});			   
			this.__defineSetter__("position", function(v){try{
				if (isObject(v)) {
					this._position.top=v.top||"";
					this._position.left=v.left||"";
					this._position.right=v.right||"";
					this._position.bottom=v.bottom||"";
				} else {
					//value was not an object
					log("jsForms.visualElement.position.set: input was not an object");
					this._position={top:"",left:"",right:"",bottom:""}
				}
				if (this.node) {
					this.node.style.top=this.position.top;
					this.node.style.left=this.position.left;
					this.node.style.right=this.position.right;
					this.node.style.bottom=this.position.bottom;
				}
			}catch(e){log("jsForms.visualElement.position: "+e);}});

			//set the height and width of the box
			this.__defineGetter__("size", function(){
				return this._size;
			});			   
			this.__defineSetter__("size", function(v){try{
				if (isObject(v)) {
					this._size.height=v.height||"";
					this._size.width=v.width||"";
				} else {
					//value was not an object
					log("jsForms.visualElement.size.set: input was not an object");
					this._size={height:"",width:""}
				}
				//now use the dock function to finish sizing
				this.dock = this._dock;
			}catch(e){log("jsForms.visualElement.size: "+e);}});

			//set the max height and width of the box
			this.__defineGetter__("maximumSize", function(){
				return this._maximumSize;
			});			   
			this.__defineSetter__("maximumSize", function(v){try{
				if (isObject(v)) {
					this._maximumSize.height=v.height||"";
					this._maximumSize.width=v.width||"";
				} else {
					//value was not an object
					log("jsForms.visualElement.maximumSize.set: input was not an object");
					this._maximumSize={height:"",width:""}
				}
				if (this.node) {
					this.node.style.maxHeight=this.maximumSize.height;
					this.node.style.maxWidth=this.maximumSize.width;
				}
			}catch(e){log("jsForms.visualElement.maximumSize: "+e);}});

			//set the min height and width of the box
			this.__defineGetter__("minimumSize", function(){
				return this._minimumSize;
			});			   
			this.__defineSetter__("minimumSize", function(v){try{
				if (isObject(v)) {
					this._minimumSize.height=v.height||"";
					this._minimumSize.width=v.width||"";
				} else {
					//value was not an object
					log("jsForms.visualElement.minimumSize.set: input was not an object");
					this._minimumSize={height:"",width:""}
				}
				if (this.node) {
					this.node.style.minHeight=this.minimumSize.height;
					this.node.style.minWidth=this.minimumSize.width;
				}
			}catch(e){log("jsForms.visualElement.minimumSize: "+e);}});

			//set the margins of the object {top, left, right, bottom}
			this.__defineGetter__("margin", function(){
				return this._margin;
			});			   
			this.__defineSetter__("margin", function(v){try{
				if (isObject(v)) {
					this._margin.top=v.top||"";
					this._margin.left=v.left||"";
					this._margin.right=v.right||"";
					this._margin.bottom=v.bottom||"";
				} else {
					//value was not an object
					log("jsForms.visualElement.margin.set: input was not an object");
					this._margin={top:"",left:"",right:"",bottom:""}
				}
				if (this.node) {
					this.node.style.margin=
						this.margin.top+" "+
						this.margin.right+" "+
						this.margin.bottom+" "+
						this.margin.left;
				}
			}catch(e){log("jsForms.visualElement.margin: "+e);}});

			//set the padding of the object {top, left, right, bottom}
			this.__defineGetter__("padding", function(){
				return this._padding;
			});			   
			this.__defineSetter__("padding", function(v){try{
				if (isObject(v)) {
					this._padding.top=v.top||"";
					this._padding.left=v.left||"";
					this._padding.right=v.right||"";
					this._padding.bottom=v.bottom||"";
				} else {
					//value was not an object
					log("jsForms.visualElement.padding.set: input was not an object");
					this._padding={top:"",left:"",right:"",bottom:""}
				}
				if (this.node) {
					this.node.style.paddingTop=this.padding.top;
					this.node.style.paddingLeft=this.padding.left;
					this.node.style.paddingRight=this.padding.right;
					this.node.style.paddingBottom=this.padding.bottom;
				}
			}catch(e){log("jsForms.visualElement.padding: "+e);}});

			//set the border radius of the object 
			this.__defineGetter__("borderRadius", function(){
				return this._borderRadius;
			});			   
			this.__defineSetter__("borderRadius", function(v){try{
				if (isObject(v)) {
					this._borderRadius.topLeft=v.topLeft||"";
					this._borderRadius.bottomLeft=v.bottomLeft||"";
					this._borderRadius.topRight=v.topRight||"";
					this._borderRadius.bottomRight=v.bottomRight||"";
				} else {
					//value was not an object
					log("jsForms.visualElement.borderRadius.set: input was not an object");
					this._borderRadius={topLeft:"",bottomLeft:"",topRight:"",bottomRight:""}
				}
				if (this.borderNode) {
					this.borderNode.style.borderTopLeftRadius=this.borderRadius.topLeft;
					this.borderNode.style.borderTopRightRadius=this.borderRadius.topRight;
					this.borderNode.style.borderBottomLeftRadius=this.borderRadius.bottomLeft;
					this.borderNode.style.borderBottomRightRadius=this.borderRadius.bottomRight;
				}
			}catch(e){log("jsForms.visualElement.borderRadius: "+e);}});

			//set the border style of the element
			this.__defineGetter__("borderStyle", function(){
				return this._borderStyle;
			});
			this.__defineSetter__("borderStyle", function(v){try{
				this._borderStyle = (v.toString());
				if (this.borderNode){
					this.borderNode.style.border=(
						(this._borderStyle=="Fixed3D")?"2px inset buttonface":
						(this._borderStyle=="FixedSingle")?this._borderCSS:
						"none"
					);
				}
			}catch(e){log("jsForms.visualElement.borderStyle: "+e);}});

			//set default border css for borderStyle FixedSingle
			this.__defineGetter__("borderCSS", function(){
				return this._borderCSS;
			});			   
			this.__defineSetter__("borderCSS", function(v){try{
				this._borderCSS = (v.toString());
				this.borderStyle = this._borderStyle;
			}catch(e){log("jsForms.visualElement.borderCSS: "+e);}});

			//return the dom node
			this.__defineGetter__("node", function(){
				return this._node;
			});	

			//calculate inner and outer actual sizes
			this.__defineGetter__("outerWidth", function(){
				return elementOuterWidth(this._node);
			});	

			this.__defineGetter__("innerWidth", function(){
				return elementInnerWidth(this._node);
			});	

			this.__defineGetter__("outerHeight", function(){
				return elementOuterHeight(this._node);
			});	

			this.__defineGetter__("innerHeight", function(){
				return elementInnerHeight(this._node);
			});				

			//show/hide the visual element
			this.show=function(){
				this.visible=true;
			};
			this.hide=function(){
				this.visible=false;
			};

			//draw the housing
			this._node=createElement("div",{
				style:(
					"display:"+this._drawStyle+";"+
					"vertical-align:middle;"+
					""//leave here
				)
			});
			
			//set nodes for bordering and background
			this.borderNode=this._node;
			this.backgroundNode=this._node;
			
			//init
			for (var p in params) this[p]=params[p];
			//confirm(JSON.stringify(this));

			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.visualElement.init: "+e);}},
	
		//icon specific parts
		icon:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.visualElement() );

			//defaults
			this._src=null;
			this._defaultImage=null;
			this._altImage=null;
			this.imageNode=null;
			this.node.style.overflow="hidden";
			this._selectedImage="_src";
						
			//set the image
			this.__defineGetter__("src", function(){
				return this._src;
			});
			this.__defineSetter__("_src", function(v){try{
				this._src = (v.toString());
				if (this._selectedImage=="_src") this.redraw();
			}catch(e){log("jsForms.icon.src: "+e);}});
			
			//set the default image
			this.__defineGetter__("defaultImage", function(){
				return this._defaultImage;
			});
			this.__defineSetter__("defaultImage", function(v){try{
				this._defaultImage = (v.toString());
				if (this._selectedImage=="_defaultImage") this.redraw();
			}catch(e){log("jsForms.icon.defaultImage: "+e);}});

			//set the alt image
			this.__defineGetter__("altImage", function(){
				return this._altImage;
			});
			this.__defineSetter__("altImage", function(v){try{
				this._altImage = (v.toString());
				if (this._selectedImage=="_altImage") this.redraw();
			}catch(e){log("jsForms.icon.altImage: "+e);}});
			
			//show different images
			this.showPrimary=function(){
				this._selectedImage="_src";
				this.redraw();
			};
			this.showDefault=function(){
				this._selectedImage="_defaultImage";
				this.redraw();
			};
			this.showAlt=function(){
				this._selectedImage="_altImage";
				this.redraw();
			};
			
			//redraw
			this.redraw=function(){try{
				if (this.imageNode) {
					this.imageNode.src=(this[this._selectedImage]||this._defaultImage);
				}
			}catch(e){log("jsForms.icon.src: "+e);}};
			
			//draw it
			if (this.node){
				this.node.appendChild(
					this.imageNode=createElement("img",{
						style:(
							"width:inherit;"+
							"height:inherit;"+
							""//leave here
						),
					})
				);
			}			

			//init
			for (var p in params) {try{
				//separate event functions
				if (p.startsWith("on")) {
					//apply event functions to intended objects
					if (["onCreated"].inArray(p)) {
						this[p]=params[p];
					} else this.imageNode[p.toLowerCase()]=params[p];
				} else this[p]=params[p];
			}catch(e){log("jsForms.icon.init (params): "+e);}};
			//confirm(JSON.stringify(this));

			/*/preload images
			new Image().src = this._altImage;
			new Image().src = this._defaultImage;
			new Image().src = this._src;
			*/

			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.icon.init: "+e);}},
	
		//textbox specific parts
		textBox:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.visualElement() );

			//defaults
			this._text="";
			this._emptyText="";
			this._maxLength=32767;
			this.textNode=null;
			this.borderNode=null;
			this.backgroundNode=null;
			this._borderStyle="FixedSingle";
			//this._drawStyle="block";
			
			//events
			this.onChange=null;

			//set the text shown in the box
			this.__defineGetter__("text", function(){
				return this._text;
			});
			this.__defineSetter__("text", function(v){try{
				this._text = (v.toString());
				if (this.textNode) this.textNode.value=v;
				if (this.causesValidation && this.onChange) {var caller=this; doAction(function(){caller.onChange(caller);})};
			}catch(e){log("jsForms.textBox.text: "+e);}});

			//text to display when text=""
			this.__defineGetter__("emptyText", function(){
				return this._emptyText;
			});
			this.__defineSetter__("emptyText", function(v){try{
				this._emptyText = (v.toString());
				if (this.node) this.node.title=this.emptyText;
			}catch(e){log("jsForms.textBox.emptyText: "+e);}});

			//set the max number of characters that can be entered in the box
			this.__defineGetter__("maxLength", function(){
				return this._maxLength;
			});
			this.__defineSetter__("maxLength", function(v){try{
				this._maxLength = parseInt(v);
				if (this.node) this.node.maxLength=this.maxLength;
			}catch(e){log("jsForms.textBox.maxLength: "+e);}});

			//get the default value as text
			this.__defineGetter__("value", function(){
				return this._text;
			});
						
			//draw it
			this._node.appendChild(
				this.textNode=createElement("input",{
					maxLength:this._maxLength, 
					value:this._text, 
					title:this._emptyText, 
					enabled:this._enabled, 
					style:(
						"display:"+this._drawStyle+";"+
						"width:inherit;"+
						"height:inherit;"+
						"minWidth:inherit;"+
						"minHeight:inherit;"+
						"maxWidth:inherit;"+
						"maxHeight:inherit;"+
						"margin-top:inherit;"+
						"margin-left:inherit;"+
						"margin-right:inherit;"+
						"margin-bottom:inherit;"+
						"top:inherit;"+
						"left:inherit;"+
						"right:inherit;"+
						"bottom:inherit;"+
						"cursor:inherit;"+
						//"font-family:inherit;"+
						//"background-color:"+this._backColor+";"+
						"color:inherit;"+
						/*"border:"+(
							(this.borderStyle=="Fixed3D")?"":
							(this.borderStyle=="FixedSingle")?this.borderCSS:
							"none"
						)+";"+
						"border-top-left-radius:"+this.borderRadius.topLeft+";"+
						"border-top-right-radius:"+this.borderRadius.bottomLeft+";"+
						"border-bottom-left-radius:"+this.borderRadius.topRight+";"+
						"border-bottom-right-radius:"+this.borderRadius.bottomRight+";"+
						*/


						""//leave here					
					),
					onclick:self.onClick,
					ondblclick:self.onDoubleClick,
					onmousedown:self.onMouseDown,
					onmouseup:self.onMouseUp,
					onmousemove:self.onMouseMove,
					onmouseover:self.onMouseOver,
					onmouseout:self.onMouseOut,
					onkeydown:self.onKeyDown,
					onkeypress:self.onKeyPress,
					onkeyup:self.onKeyPress,
					onblur:self.onBlur,
					onfocus:self.onFocus,
					onselect:self.onSelect,
					onchange:function(){
						self.text=this.value;
					},
				})
			);
			
			//set nodes for bordering and background
			this.borderNode=this.textNode;
			this.backgroundNode=this.textNode;
			
			//init
			for (var p in params) this[p]=params[p];
			//confirm(JSON.stringify(this));

			//return it
			if (this.causesValidation && this.onCreated) doAction(function(){this.onCreated(this);});
			return this;
		}catch(e){log("jsForms.textBox.init: "+e);}},

		//numeric up/down specific parts
		spinBox:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.textBox() );

			//defaults
			//this._hexadecimal=false;
			//this._thousandsSeparator=false;
			this._upDownAlign="right";
			//this._decimalPlaces=0;
			this._increment=1;
			this._maximum=100;
			this._minimum=0;
			this._rollOver=false; //start at the other end if past boundary
			
			//set the max value
			this.__defineGetter__("maximum", function(){
				return this._maximum;
			});
			this.__defineSetter__("maximum", function(v){try{
				this._maximum = parseInt(v);
			}catch(e){log("jsForms.spinBox.maximum: "+e);}});

			//set the min value
			this.__defineGetter__("minimum", function(){
				return this._minimum;
			});
			this.__defineSetter__("minimum", function(v){try{
				this._minimum = parseInt(v);
			}catch(e){log("jsForms.spinBox.minimum: "+e);}});

			//set the increment value
			this.__defineGetter__("increment", function(){
				return this._increment;
			});
			this.__defineSetter__("increment", function(v){try{
				this._increment = parseInt(v);
			}catch(e){log("jsForms.spinBox.increment: "+e);}});

			//set the rollOver flag
			this.__defineGetter__("rollOver", function(){
				return this._rollOver;
			});
			this.__defineSetter__("rollOver", function(v){try{
				this._rollOver = cBool(v);
			}catch(e){log("jsForms.spinBox.rollOver: "+e);}});

			//up and down functions
			this.up=function(){
				this.change(this._increment);
			};
			this.down=function(){
				this.change(-(this._increment));
			};
			this.change=function(n){
				var v=parseInt(this.text),hasChanged=false;
				v=v+n;
				//validate boundaries
				if ((v<=this._maximum)&&(v>=this._minimum)){
					hasChanged=true;
				} else {
					if (this._rollOver) {
						//perform rollover
						if (v>this._maximum) v=this._minimum;
						else v=this._maximum;
						hasChanged=true;
					}
				}
				if (hasChanged){
					//format output
					//v=v.toString();
					//v=v.format("#,##0");
					//print it
					this.text=v;
				}
			};			
			
			//append buttons to the textbox portion
			this.node.style.position="relative";
			this.textNode.style.textAlign=(this._upDownAlign=="left")?"right":"left";
			this.textNode.style.verticalAlign="middle";
			this.node.appendChild(
				this.buttonNode=createElement("div",{
					style:(
						"vertical-align: middle;"+
						"position: relative;"+
						"display: inline-block;"+
						""//leave here
					),
				},[
					this.incrementNode=createElement("button",{
						className:"jsfButton jsfblock",
						title:"Up",
						onclick:function(){
							self.up();
						},
					},[
						createElement("span",{
							textContent:"\u25B4",
						})
					]),
					this.decrementNode=createElement("button",{
						className:"jsfButton jsfblock",
						title:"Down",
						onclick:function(){
							self.down();
						},
					},[
						createElement("span",{
							textContent:"\u25BE",
						})
					])
				])
			);
			
			//init
			for (var p in params) this[p]=params[p];

			//resize its buttons
			this.fixSizes=function(){
				var self=this;
				var btn=this.incrementNode;
				var h=elementOuterHeight(this.textNode);
				var i=elementOuterHeight(btn)-elementInnerHeight(btn);
				if (!isNaN(h) && !isNaN(i) && h>0){
					//resize buttons
					btn.style.height=(h/2)-i+"px";
					self.decrementNode.style.height=
						btn.style.height;
					//move child text to center
					var span=btn.childNodes[0];
					span.style.left=
						Math.floor((
							elementInnerWidth(btn)-elementOuterWidth(span))/2
						)+"px";
					span.style.bottom=
						Math.floor((
							elementInnerHeight(btn)-elementOuterHeight(span))/2
						)+"px";
						
					var span=self.decrementNode.childNodes[0];
					span.style.left=
						Math.floor(
							(elementInnerWidth(self.decrementNode)-elementOuterWidth(span))/2
						)+"px";
					span.style.bottom=
						Math.floor(
							(elementInnerHeight(self.decrementNode)-elementOuterHeight(span))/2
						)+"px";
				} else {
					setTimeout(function(){self.fixSizes();},100);
				}
			};
			this.fixSizes();

			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;			
		}catch(e){log("jsForms.spinBox.init: "+e);}},	

		//checkbox specific parts
		checkBox:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.visualElement() );

			//defaults
			this._checked=false;
			this._text=""; 
			this._value="";
			//_threeState: see checkedState
			//_checkedState: [unchecked, checked, indeterminate]
			this._autoCheck=true; //check on label click
			this.checkNode=null;
			this.labelNode=null;
			this._highlightSelected=false;

			//this._image="";
			//this._textCheckRelation="After"; //[Above, Below, Before, After]
			//this._textImageRelation="After"; //[Above, Below, Before, After]
			
			//events
			this.onChecked=null;
			this.onUnchecked=null;
			
			//set visible text of the checkbox
			this.__defineGetter__("text", function(){
				return this._text;
			});
			this.__defineSetter__("text", function(v){try{
				this._text = (v.toString());
				if (this.labelNode) this.labelNode.textContent=this._text;
			}catch(e){log("jsForms.checkBox.text: "+e);}});

			//set underlying value of the checkbox
			this.__defineGetter__("value", function(){
				return this._value;
			});
			this.__defineSetter__("value", function(v){try{
				this._value =  v;
				if (this.checkNode) this.checkNode.value=this._value;
			}catch(e){log("jsForms.checkBox.value: "+e);}});

			this.doAutoCheck=function(){try{
				click(self.checkNode);
				if (self.onLabelClick) self.onLabelClick();
			}catch(e){log("jsForms.checkBox.doAutoCheck: "+e);}};
			
			//set autocheck on label click
			this.__defineGetter__("autoCheck", function(){
				return this._autoCheck;
			});
			this.__defineSetter__("autoCheck", function(v){try{
				this._autoCheck = cBool(v);
				this.labelNode.onclick=(!this._autoCheck)?this.onLabelClick:this.doAutoCheck;
			}catch(e){log("jsForms.checkBox.autoCheck: "+e);}});

			//set highlight on checked
			this.__defineGetter__("highlightSelected", function(){
				return this._highlightSelected;
			});
			this.__defineSetter__("highlightSelected", function(v){try{
				this._highlightSelected = cBool(v);
				if (this.node) {
					this.node.style.backgroundColor=(this._highlightSelected)?((this._checked)?"highlight":this.backColor):this.backColor;
					this.node.style.color=(this._highlightSelected)?((this._checked)?"highlighttext":this.foreColor):this.foreColor;
				}
			}catch(e){log("jsForms.checkBox.highlightSelected: "+e);}});

			//set checked state
			this.__defineGetter__("checked", function(){
				return this._checked;
			});
			this.__defineSetter__("checked", function(v){try{
				this._checked = cBool(v);
				if (this.checkNode) this.checkNode.checked=this._checked;
				if (this.node) {
					this.node.style.backgroundColor=(this._highlightSelected)?((this._checked)?"highlight":this.backColor):this.backColor;
					this.node.style.color=(this._highlightSelected)?((this._checked)?"highlighttext":this.foreColor):this.foreColor;
				}
				if (this.causesValidation){
					var caller=this;
					if (this.onChecked && this._checked) doAction(function(){caller.onChecked(caller);});
					if (this.onUnchecked && !this._checked) doAction(function(){caller.onChecked(caller);});
					if (this.onChange) doAction(function(){caller.onChange(caller);});
						/*confirm("-onchange");
						window.setTimeout(function(){
							confirm("-onchange delay");
							caller.onChange(caller);
						},1000);*/
					//}
				}
			}catch(e){log("jsForms.checkBox.checked: "+e);}});
			
			//register the initial params
			for (var p in params) this[p]=params[p];
			
			//draw it
			this.node.appendChild(
				this.checkNode=createElement("input",{
					type: "checkbox",
					value: this._value,
					checked: this._checked,
					style:(
						"margin-right: 4px;"+
						"vertical-align: middle;"+
						
						"" //leave here
					),
					onclick:self.onClick,
					ondblclick:self.onDoubleClick,
					onmousedown:self.onMouseDown,
					onmouseup:self.onMouseUp,
					onmousemove:self.onMouseMove,
					onmouseover:self.onMouseOver,
					onmouseout:self.onMouseOut,
					onkeydown:self.onKeyDown,
					onkeypress:self.onKeyPress,
					onkeyup:self.onKeyPress,
					onblur:self.onBlur,
					onfocus:self.onFocus,
					onchange:function(){
						self.checked=this.checked;
					},
				})
			);			
			
			this.node.appendChild(
				this.labelNode=createElement("label",{
					textContent:this._text,
					style:(
						"margin-right: 4px;"+
						"vertical-align: middle;"+
						"font-weight: normal;"+
						"color: inherit;"+
						
						"" //leave here
					),
					onclick:(this._autoCheck)?self.doAutoCheck:self.onLabelClick,
					ondblclick:self.onLabelDoubleClick,
					onmousedown:self.onMouseDown,
					onmouseup:self.onMouseUp,
					onmousemove:self.onMouseMove,
					onmouseover:self.onMouseOver,
					onmouseout:self.onMouseOut,
					onkeydown:self.onKeyDown,
					onkeypress:self.onKeyPress,
					onkeyup:self.onKeyPress,
					onblur:self.onBlur,
					onfocus:self.onFocus,
				})
			);
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.checkBox.init: "+e);}},
		
		//toolBox for containing tool icons
		toolBox:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.listBox({items:params.items}) );
			delete params.items;

			//defaults
			this.node.style.position="absolute";
			this.drawStyle="block";
			//this.node.style.overflow=""; //make it expand as needed
			this.position={top:"0px",right:"0px"};
			
			//init
			for (var p in params) this[p]=params[p];
			//confirm(JSON.stringify(this));

			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;			
		}catch(e){log("jsForms.toolBox.init: "+e);}},		
		
		//listbox specific parts
		listBox:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self, new jsForms.visualElement() );

			//defaults
			this._maxItems=32767;
			this._maxSelectedItems=32767;
			this._sorted=false;
			this._sortBy=["text"];
			this._sortOrder="asc";
			this.listNode=this.node;
			this._items=[];
			this._firstItemSelectsAll=false;
			this._explicitClose=false;
			this._valueMember="value";
			this._highlightSelected=false;
			this.node.style.overflow="scroll";
			this._allowMoveChildren=false;
			
			//events
			this.onItemSelected=null;
			this.onItemChecked=null;
			this.onItemUnselected=null;
			this.onItemUnchecked=null;
			this.onMaxItemsSelected=null;
			
			//set the max number of items to show in the list
			this.__defineGetter__("maxItems", function(){
				return this._maxItems;
			});
			this.__defineSetter__("maxItems", function(v){try{
				this._maxItems = parseInt(v);
			}catch(e){log("jsForms.listBox.maxItems: "+e);}});

			//set the max number of items that can be selected
			this.__defineGetter__("maxSelectedItems", function(){
				return this._maxSelectedItems;
			});
			this.__defineSetter__("maxSelectedItems", function(v){try{
				this._maxSelectedItems = parseInt(v);
			}catch(e){log("jsForms.listBox.maxSelectedItems: "+e);}});

			//set if the list is to be sorted
			this.__defineGetter__("sorted", function(){
				return this._sorted;
			});
			this.__defineSetter__("sorted", function(v){try{
				this._sorted = cBool(v);
				if (this._sorted) this.sort();
			}catch(e){log("jsForms.listBox.sorted: "+e);}});
			
			//set if the list children can be moved around
			this.__defineGetter__("allowMoveChildren", function(){
				return this._allowMoveChildren;
			});
			this.__defineSetter__("allowMoveChilden", function(v){try{
				this._allowMoveChildren = cBool(v);
				//add||remove tools for each child
				for (var i=0,child;(child=this.items[i]);i++){
					if (this._allowMoveChildren) {
						//add item to toolbox
					} else {
						//remove item from toolbox
					}
				}				
			}catch(e){log("jsForms.listBox.allowMoveChildren: "+e);}});

			//set highlight if selected
			this.__defineGetter__("highlightSelected", function(){
				return this._highlightSelected;
			});
			this.__defineSetter__("highlightSelected", function(v){try{
				this._highlightSelected = cBool(v);
				for (var i=0,child;(child=this.items[i]);i++){
					child.highlightSelected=this._highlightSelected;
				}
			}catch(e){log("jsForms.listBox.highlightSelected: "+e);}});

			//set the parameters by which the list is to be sorted
			this.__defineGetter__("sortBy", function(){
				return this._sortBy;
			});
			this.__defineSetter__("sortBy", function(v){try{
				if (isArray(v) || isString(v)) {
					this._sortBy = v;
					if (this._sorted) this.sort();
				} else {
					log("jsForms.listBox.sortBy: Expected array or string, found "+typeof v);
				}
			}catch(e){log("jsForms.listBox.sortBy: "+e);}});
			
			//set the direction by which the sorting is done
			this.__defineGetter__("sortOrder", function(){
				return this._sortOrder;
			});
			this.__defineSetter__("sortOrder", function(v){try{
				this._sortOrder = v.toString();
				if (this._sorted) this.sort();
			}catch(e){log("jsForms.listBox.sortOrder: "+e);}});

			//get the items list of the list
			this.__defineGetter__("items", function(){
				return this._items;
			});
			this.__defineSetter__("items", function(v){try{
				this._items = v;
			}catch(e){log("jsForms.listBox.items: "+e);}});
			
			//alias for items list
			this.__defineGetter__("options", function(){
				return this._items;
			});

			//set the parameter of the sub item that is to be used as a value
			this.__defineGetter__("valueMember", function(){
				return this._valueMember;
			});
			this.__defineSetter__("valueMember", function(v){try{
				this._valueMember = (v.toString());
			}catch(e){log("jsForms.listBox.valueMember: "+e);}});

			//an object to display at the end of the
			//...list that can be clicked to close a dropdown
			this.__defineGetter__("explicitClose", function(){
				return this._explicitClose;
			});
			this.__defineSetter__("explicitClose", function(v){try{
				this._explicitClose = cBool(v);
			}catch(e){log("jsForms.listBox.explicitClose: "+e);}});
			
			//set if the special selectAll option appears
			this.__defineGetter__("firstItemSelectsAll", function(){
				return this._firstItemSelectsAll;
			});
			this.__defineSetter__("firstItemSelectsAll", function(v){try{
				this._firstItemSelectsAll = cBool(v);
			}catch(e){log("jsForms.listBox.firstItemSelectsAll: "+e);}});

			//get the default value as text
			this.__defineGetter__("value", function(){try{
				var ret=[];
				var sel=this.selectedItems;
				for (var i=0,child;(child=sel[i]);i++){
					ret.push(child[this._valueMember]);
				}
				return ret;
			}catch(e){log("jsForms.listBox.value: "+e);}});
			
			//get an array of selected options/checkboxes
			this.__defineGetter__("selectedItems", function(){try{
				var ret=[];
				for (var i=0,child;(child=this.items[i]);i++){
					if (exists(child.selected)) {
						//check for option types that are selected
						if (child.selected) ret.push(child);
					} else if (exists(child.checked)) {
						//check for checkbox types that are checked
						if (child.checked) ret.push(child);
					}
				}
				return ret;
			}catch(e){log("jsForms.listBox.selectedItems: "+e);}});

			//sort the list and redraw
			//p accepts {direction:string, by:array:string}
			//sorting is done using by[len-1] to by[0] so that
			//...sorting by ["lastName","firstName"] results in
			//...items being sorted by lastName first in the output
			this.sort=function(p){try{
				var params=p||{};
				params.by=params.by||this._sortBy||["text"];
				if (!isArray(params.by)) params.by=[].push(params.by);
				params.direction=params.direction||this._sortOrder||"asc";
				//var arrList=methodsToArray(this._items);
				var arrList=this._items;
				var dir=params.direction.toLowerCase();
				//for each passed sort by entry, sort the list
				for (var i=this.params.by.length,by;(by=this.params.by[i]);i--){
					arrList.sort(function(a,b){
						if (["ascending","asc"].inArray(dir)) return a[by]>=b[by];
						if (["descending","desc"].inArray(dir)) return a[by]<=b[by];
						return true;
					});
				};
				//this._items=arrayToMethods(arrList);
				this._items=arrList;
				this.redraw();
			}catch(e){log("jsForms.listBox.sort: "+e);}};
			
			//redraw the list of items
			this.redraw=function(){try{
				//clear all items
				for (var n in this.node){
					remove(n);
				}
				//append selectall button if needed
				if (this._firstItemSelectsAll) {
					this.node.appendChild(this._selectAllNode);
				}
				//redraw in current order
				for (var i=0,child;(child=this.items[i]);i++){
					this.node.appendChild(child.node||child);
				}
				//append explicitclose button if needed
				if (this._explicitClose){
					this.node.appendChild(this._explicitCloseNode);
				}
			}catch(e){log("jsForms.listBox.redraw: "+e);}};
			
			//generic close function, to be replaced by parent objects
			this.close=function(){
				this.visible=false;
			};
			//collapse the list down to a single element
			this.collapse=function(){try{
				this.node.style.height=this.items[0].node.offsetHeight;
				this.node.style.overflowX="hidden";
				this.node.style.overflowY="hidden";
			}catch(e){log("jsForms.listBox.collapse: "+e);}};
			//expand the list to the specified size
			this.expand=function(){try{
				this.node.style.height=this.size.height;
				this.node.style.overflowX="hidden";
				this.node.style.overflowY="scroll";
			}catch(e){log("jsForms.listBox.expand: "+e);}};

			//update visual details, such as border
			this.borderStyle="FixedSingle";

			//register the initial params
			for (var p in params) {try{
				this[p]=params[p];
			}catch(e){log("jsForms.listBox.init(params "+p+"): "+e);}};
									
			//modify children
			for (var i=0,child;(child=this.items[i]);i++){try{
				//append onchange value to every list item
				child.onChange=function(){
					if (self.causesValidation && self.onChange) {
						doAction(function(){self.onChange(self);});
					}
				};
				//change the drawstyle of each listitem
				(child.node||child).style.display="block";
				//set the highlightSelected attribute
				child.highlightSelected=this._highlightSelected;
			}catch(e){log("jsForms.listBox.init(modify children): "+e);}};
						
			//create the maybe-needed explicit close button
			this._explicitCloseNode=createElement("button",{
				textContent:"Close",
				style:(
					"float:right;"+
					""//leave here
				),
				onclick:function(){
					if (self.close) doAction(function(){self.close();});
				},
			});
			
			//create the maybe-needed select all node
			var o=new jsForms.checkBox({
				text:"Select All",
				onChange:function(){
					for (var i=0,child;(child=self._items[i]);i++){
						if (exists(child.selected)) child.selected=this.checked;
						if (exists(child.checked)) child.checked=this.checked;
					}
				},
			});
			this._selectAllNode=o.node;
			o.labelNode.style.fontWeight="bold";
			
			//draw it
			this.node.style.overflowX="hidden";
			this.node.style.overflowY="scroll";
			this.redraw();
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.listBox.init: "+e);}},

		//combobox, dropdown, select-multi
		comboBox:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.textBox() );
			
			//defaults
			this._dropDownStyle="dropDown";
			this._dropDownZIndex="999";
			this.node.style.position="relative";
			this.textNode.style.verticalAlign="middle";
			this.textNode.disabled=true; //prevent typing in the box
			
			//sub items
			try{
				this._dropDown=new jsForms.listBox({
					parent:this,
					items:params.items,
					onChange:function(){
						self.text=this.value;
						//confirm(this.value);
					},
					firstItemSelectsAll:params.firstItemSelectsAll,
					explicitClose:params.explicitClose,
					backColor:params.backColor||"window",
					//size:{width:"100%"},
					highlightSelected:params.highlightSelected,
					size:params.dropDownSize,
					drawStyle:"block",
				});
				//close the dropdown by default
				if (this._dropDownStyle!="simple") this._dropDown.hide();
				
				this._dropDown.node.style.zIndex=this._dropDownZIndex;
				this._dropDown.node.style.position="absolute";
				
				//set the text based on what was passed as selected
				this.text=this._dropDown.value;
			}catch(e){log("jsForms.comboBox.init(create list): "+e);};
			
			//scrap items we don't want appended to this object
			delete params.items;
			delete params.explicitClose;
			delete params.firstItemSelectsAll;
			delete params.highlightSelected;
			delete params.dropDownSize;

			//get the dropdown sub object
			this.__defineGetter__("dropDown", function(){
				return this._dropDown;
			});

			//set the dropdown visual style
			//simple: no dropdown, elements shown directly below all the time
			//dropdown: dropdown, elements in hidden list, allow typing in top box
			//dropdownList: same as dropdown minus typing in top box
			this.__defineGetter__("dropDownStyle", function(){
				return this._dropDownStyle;
			});
			this.__defineSetter__("dropDownStyle", function(v){try{
				this._dropDownStyle = (v.toString());
				this._dropDown.visible=((this._dropDownStyle=="simple")?true:false);
			}catch(e){log("jsForms.comboBox.dropDownStyle: "+e);}});

			//set the z-index of the dropdown portion when open
			this.__defineGetter__("dropDownZIndex", function(){
				return this._dropDownZIndex;
			});
			this.__defineSetter__("dropDownZIndex", function(v){try{
				this._dropDownZIndex = parseInt(v);
				this._dropDown.node.style.zIndex=this._dropDownZIndex;
			}catch(e){log("jsForms.comboBox.dropDownZIndex: "+e);}});
			
			//redefine value: get the dropdown value array
			this.__defineGetter__("value", function(){
				return this._dropDown.value;
			});
			
			//show/hide dropdown
			this.showDropDown=function(){
				this._dropDown.show();
				this.buttonTextNode.textContent="\u25B4";
			};
			this.hideDropDown=function(){
				this._dropDown.hide();
				this.buttonTextNode.textContent="\u25BE";
			};
			this.toggleDropDown=function(){
				var dd=this._dropDown;
				if (dd.visible) this.hideDropDown(); else this.showDropDown();
			};
			
			//register the initial params
			for (var p in params) this[p]=params[p];
			
			//append a button to the textbox portion
			this.node.appendChild(
				this.buttonNode=createElement("button",{					
					className:"jsfButton jsfinlineBlock",
					onclick:function(){
						self.toggleDropDown();
					},
				},[
					this.buttonTextNode=createElement("span",{
						textContent:"\u25BE",
					})
				])
			);
			
			//append the dropdown list
			this.node.appendChild(this._dropDown.node);
			
			//resize its parts
			this.fixSizes=function(){
				var self=this;
				//resize dropdown button
				var btn=this.buttonNode;
				var h=elementOuterHeight(this.textNode);
				var i=elementOuterHeight(btn)-elementInnerHeight(btn);
				if (!isNaN(h) && !isNaN(i) && h>0){
					btn.style.height=(h-i)+"px";
					var span=btn.childNodes[0];
					span.style.left=
						Math.floor((
							elementInnerWidth(btn)-elementOuterWidth(span))/2
						)+"px";
					span.style.bottom=
						Math.floor((
							elementInnerHeight(btn)-elementOuterHeight(span))/2
						)+"px";
					
				} else {
					setTimeout(function(){self.fixSizes();},100);
				}

				//resize dropdown
				this._dropDown.node.style.width=
					this.innerWidth-
					(this._dropDown.outerWidth-this._dropDown.innerWidth)+
					"px";
				
			};
			this.fixSizes();

			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.comboBox.init: "+e);}},

		//css color picker
		colorPicker:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.textBox() );
			
			//defaults
			this._dropDownStyle="dropDown";
			this._dropDownZIndex="999";
					
			//functions			
			var spanClick=function(){
				self.text=this.getAttribute("data-ft");
				self.hideDropDowns();
				self.colorBox.style.backgroundColor=self.text;				
			};
			
			var makeSpans=function(data,e){
				var ret=[];
				if (isArrayAndNotEmpty(data)) for (var i=0,d;(d=data[i]);i++){
					var value=(typeof d == "object")?d.value:d;
					var name=(typeof d == "object")?d.name:d;
			
					ret.push(createElement("span",{
						onclick:spanClick,
						style:(
							//"color: white !important;"+
							//"text-shadow: 0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black;"+
							//"font-weight:bold;"+
							"display:block;"+
							""//leave here
						),
						"data-ft":value,
					},[
						createElement("div",{
							style:(
								"background-color:"+value+" !important;"+
								"margin:0px 6px 0px 3px;"+
								"border:1px solid black;"+
								"width:20px; height:10px;"+
								"vertical-align:baseline;"+
								"display:inline-block;"+
								""//leave here
							),
						}),
						createElement("text",name)
					]));
				}
				return ret;
			};
					
			//sub items
			var shareStyle=(
				"background-color:"+(params.backColor||"window")+";"+
				"height:"+params.dropDownSize.height+";"+
				"z-index:"+this._dropDownZIndex+";"+
				"position:absolute;"+
				"display:none;"+
				"overflow-x:hidden;"+
				"overflow-y:auto;"+
				""//leave here
			);
			try{
				this._webSafe=createElement("div",{
						style:shareStyle,
					},
					makeSpans(jsForms.colorData.webSafe)
				);
			}catch(e){log("jsForms.colorPicker.init(webSafe): "+e);};
			try{
				this._colorWords=createElement("div",{
						style:shareStyle,
					},
					makeSpans(jsForms.colorData.colorWords)
				);
			}catch(e){log("jsForms.colorPicker.init(colorWords): "+e);};
			try{
				this._system=createElement("div",{
						style:shareStyle,
					},
					makeSpans(jsForms.colorData.system)
				);
			}catch(e){log("jsForms.colorPicker.init(system): "+e);};
			try{
				this._custom=createElement("div",{
						style:shareStyle,
					},
					makeSpans(jsForms.colorData.custom)
				);
			}catch(e){log("jsForms.colorPicker.init(custom): "+e);};
			delete params.dropDownSize;
			
			//set the z-index of the dropdown portion when open
			this.__defineGetter__("dropDownZIndex", function(){
				return this._dropDownZIndex;
			});
			this.__defineSetter__("dropDownZIndex", function(v){try{
				this._dropDownZIndex = parseInt(v);
				this._webSafe.style.zIndex=this._dropDownZIndex;
				this._system.style.zIndex=this._dropDownZIndex;
				this._colorNames.style.zIndex=this._dropDownZIndex;
				this._custom.style.zIndex=this._dropDownZIndex;
			}catch(e){log("jsForms.colorPicker.dropDownZIndex: "+e);}});
			
			//redefine value: get the dropdown value array
			this.__defineGetter__("value", function(){
				return this.textNode.value;
			});

			//resize the dropdown to fit our control
			this.resizeDropDown=function(e){
				var w=this.innerWidth-
					( elementOuterWidth(this[e])-elementInnerWidth(this[e]) )+
					"px";
				//confirm(w);
				this[e].style.width=w;
			};
			
			//show/hide dropdown
			this.showDropDown=function(e){
				this.hideDropDowns();
				this.resizeDropDown(e);
				this[e].style.display="block"
			};
			this.hideDropDowns=function(){
				this._webSafe.style.display="none";
				this._system.style.display="none";
				this._colorWords.style.display="none";
				this._custom.style.display="none";
			};
			this.toggleDropDown=function(e){
				var hidden=(this[e].style.display=="none");
				if (hidden) this.showDropDown(e); else this.hideDropDowns();
			};
			
			//init
			for (var p in params) this[p]=params[p];

			//append a button to the textbox portion
			this.node.style.position="relative";
			this.node.appendChild(
				createElement("button",{					
					style:(
						"position: relative;"+
						"font-size: 18px;"+
						"padding: 0px;"+
						"line-height: 0px;"+
						"border: 1px solid buttonshadow;"+
						"height:16px; width:17px;"+
						"background-color: buttonface;"+
						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
						"vertical-align:middle;"+
						""//leave here
					),
					onclick:function(){
						self.toggleDropDown("_webSafe");
					},
				},[
					createElement("span",{
						textContent:"\u25BE",
						style:(
							"position: relative;"+
							"left:-3px;"+
							""//leave here
						)
					})
				])
			);
			this.node.appendChild(
				createElement("button",{					
					style:(
						"position: relative;"+
						"font-size: 18px;"+
						"padding: 0px;"+
						"line-height: 0px;"+
						"border: 1px solid buttonshadow;"+
						"height:16px; width:17px;"+
						"background-color: buttonface;"+
						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
						"vertical-align:middle;"+
						""//leave here
					),
					onclick:function(){
						self.toggleDropDown("_colorWords");
					},
				},[
					createElement("span",{
						textContent:"\u25BE",
						style:(
							"position: relative;"+
							"left:-3px;"+
							""//leave here
						)
					})
				])
			);
			this.node.appendChild(
				createElement("button",{					
					style:(
						"position: relative;"+
						"font-size: 18px;"+
						"padding: 0px;"+
						"line-height: 0px;"+
						"border: 1px solid buttonshadow;"+
						"height:16px; width:17px;"+
						"background-color: buttonface;"+
						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
						"vertical-align:middle;"+
						""//leave here
					),
					onclick:function(){
						self.toggleDropDown("_system");
					},
				},[
					createElement("span",{
						textContent:"\u25BE",
						style:(
							"position: relative;"+
							"left:-3px;"+
							""//leave here
						)
					})
				])
			);
			this.node.appendChild(
				createElement("button",{					
					style:(
						"position: relative;"+
						"font-size: 18px;"+
						"padding: 0px;"+
						"line-height: 0px;"+
						"border: 1px solid buttonshadow;"+
						"height:16px; width:17px;"+
						"background-color: buttonface;"+
						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
						"vertical-align:middle;"+
						""//leave here
					),
					onclick:function(){
						self.toggleDropDown("_custom");
					},
				},[
					createElement("span",{
						textContent:"\u25BE",
						style:(
							"position: relative;"+
							"left:-3px;"+
							""//leave here
						)
					})
				])
			);	
			
			//append the dropdown list
			this.node.appendChild(this._webSafe);			
			this.node.appendChild(this._colorWords);			
			this.node.appendChild(this._system);			
			this.node.appendChild(this._custom);			
			
			//append the colorbox before the textbox
			this.colorBox=createElement("div",{
				style:(
					"background-color:"+this.text+";"+
					"margin:0px 6px 0px 3px;"+
					"border:1px solid black;"+
					"width:20px; height:10px;"+
					"vertical-align:middle;"+
					"display:inline-block;"+
					""//leave here
				),
			});
			this.node.insertBefore(this.colorBox,this.textNode);
			this.textNode.style.verticalAlign="middle";
			var oldOnChange=this.textNode.onchange||null;
			this.textNode.onchange=function(){				
				self.text=this.value;
				self.colorBox.style.backgroundColor=this.value;
			};
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.colorPicker.init: "+e);}},		
		
		//tabcontrol inner control
		tabPage:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.visualElement() );

			//make sure we know our parent
			this.parent=params.parent||null;
			delete params.parent;

			//defaults
			this._text="";
			this._image="";
			//this._autoScroll=true;
			this._showImage=true;
			this.buttonNode=null;
			this.imageNode=null;
			this.textNode=null;
			this.pageNode=null;
			this._drawStyle="block";
			
			//set the text shown in the tab button
			this.__defineGetter__("text", function(){
				return this._text;
			});
			this.__defineSetter__("text", function(v){try{
				this._text = (v.toString());
				if (this.textNode) this.textNode.textContent=this._text;
			}catch(e){log("jsForms.tabPage.text: "+e);}});

			//return if the parent knows we are selected
			this.__defineGetter__("selected", function(){
				return (this.parent._selectedTab===this);
			});

			//set the image shown in the tab button
			this.__defineGetter__("image", function(){
				return this._image;
			});
			this.__defineSetter__("image", function(v){try{
				this._image = ((v||"").toString());
				if (this.imageNode) {
					this.imageNode.src=this._image;
					this.imageNode.className=
						this.imageNode.className[((this._showImage && (this._image||this._imageClass))?"remove":"add")+"Word"]("jsfHidden");
				}
			}catch(e){log("jsForms.tabPage.image: "+e);}});

			//image className
			this.__defineGetter__("imageClass", function(){
				return this._imageClass;
			});
			this.__defineSetter__("imageClass", function(v){try{
				var oldClass=this._imageClass;
				this._imageClass = ((v||"").toString());
				if (this.imageNode) {
					this.imageNode.className=
						this.imageNode.className.removeWord(oldClass).addWord(this._imageClass);
				}
			}catch(e){log("jsForms.tabPage.imageClass: "+e);}});

			//show/hide the tab button image
			this.__defineGetter__("showImage", function(){
				return this._showImage;
			});
			this.__defineSetter__("showImage", function(v){try{
				this._showImage = cBool(v);
				if (this.imageNode) {
					this.imageNode.className=
						this.imageNode.className[((this._showImage && (this._image||this._imageClass))?"remove":"add")+"Word"]("jsfHidden");
				}
			}catch(e){log("jsForms.tabPage.showImage: "+e);}});

			//select tab
			this.select=function(){
				this.parent.selectTab(this);
			}
			
			//init
			var selected=params.selected||false;
			delete params.selected;
			var content=params.content||null;
			delete params.content;
			for (var p in params) this[p]=params[p];

			//draw it
			if (this.parent) {
				//add button to parent node
				this.parent.tabsNode.appendChild(
					this.buttonNode=createElement("div",{
						className:"jsfTab",
						style:(
							""//leave here
						),
						onclick:function(){self.select();},
					},[
						this.imageNode=createElement("img",{
							className:this._imageClass+((this._showImage && (this._image||this._imageClass))?"":" jsfHidden"),
							style:(
								""//leave here
							),
							src:this._image||"",
						}),
						this.textNode=createElement("div",{
							textContent:this._text.upperWords(),
							style:(
								""//leave here
							),
						}),
					])
				);
				
				//add page to parent node
				if (content) {
					if (!isArray(content)) content=[content];
					for (var i=0,contentNode;(contentNode=content[i]);i++){
						this.node.appendChild(contentNode);
					}
				}
				this.parent.pagesNode.appendChild(this.node);
				this.pageNode=this.node;
									
				//make selected if needed
				this.hide();
				this.dock=this._dock;
				if (selected) this.select();
			}
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.tabPage.init: "+e);}},

		//tabcontrol uppermost control
		tabControl:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.visualElement() );
			
			//defaults
			this._alignment="top"; //[top, left, right, bottom]
			//this._appearance="normal"; //[normal,buttons,flat buttons]
			this._hotTrack=true; //mouseover glow on buttons
			this._multiLine=false; //allow multiple lines of tabs
			//this._sizeMode="normal"; //[normal,fixed,filltoright]
			this._shareSinglePage=false; //all tabs use the same pageNode
			this.tabs=[];
			this.tabsNode=null;
			this.pagesNode=null;
			this._selectedTab=null;
			this.node.className=this.node.className.addWord("jsfTabControl hotTrack");
			this.sharedPageNode=null; //container for shared tabPage
			this.preventAutoSelectTab=false;

			//subStyle
			this.__defineGetter__("subStyle", function(){
				return this._subStyle;
			});
			this.__defineSetter__("subStyle", function(v){try{
				this.node.className=this.node.className.removeWord(this._subStyle);
				this._subStyle = (v.toString());
				this.node.className=this.node.className.addWord(this._subStyle);
			}catch(e){log("jsForms.tabControl.subStyle: "+e);}});

			//tabs alignment
			this.__defineGetter__("alignment", function(){
				return this._alignment;
			});
			this.__defineSetter__("alignment", function(v){try{
				this._alignment = (v.toString().toLowerCase().upperWords());
				//remove all alignment css words
				this.node.className=this.node.className.removeWord(["alignTop","alignLeft","alignBottom","alignRight"]);
				this.node.className=this.node.className.addWord("align"+this._alignment);
				this.redraw();
			}catch(e){log("jsForms.tabControl.alignment: "+e);}});

			//tab bar hot tracking
			this.__defineGetter__("hotTrack", function(){
				return this._hotTrack;
			});
			this.__defineSetter__("hotTrack", function(v){try{
				this._hotTrack = cBool(v);
				this.node.className=this.node.className[((this._hotTrack)?"add":"remove")+"Word"]("hotTrack");
			}catch(e){log("jsForms.tabControl.hotTrack: "+e);}});

			//use a single tabPage for all tabs
			this.__defineGetter__("shareSinglePage", function(){
				return this._shareSinglePage;
			});
			this.__defineSetter__("shareSinglePage", function(v){try{
				this._shareSinglePage = cBool(v);
			}catch(e){log("jsForms.tabControl.shareSinglePage: "+e);}});

			//select tab by index or by passed object
			this.selectTab=function(v){try{
				var lastSelected=this._selectedTab;
				switch(typeof v){
					case "object":
						this._selectedTab=v;
						break;
					case "number":
						this._selectedTab=this.tabs[v];
						break;
				}
				//move the selected tab forward, unselected backward
				if (lastSelected) {
					if (!this._shareSinglePage) lastSelected.hide();
					with (lastSelected.buttonNode) {
						className=className.removeWord("selected");
					}
				}
				if (!this._shareSinglePage) this._selectedTab.show();
				with (this._selectedTab.buttonNode) {
					className=className.addWord("selected");
				}
				
				//do onSelect event
				if (this._selectedTab.onSelect) {
					this._selectedTab.onSelect(this._selectedTab);
				}
			}catch(e){log("jsForms.tabControl.selectTab: "+e);}};
			
			//capture the sizes we need for this tabcontrol
			//and redraw its borders
			this.redraw=function(){try{
				//reset self first
				this.dock=this._dock;
			
				//pages fit this minus the tabs bar
				this.pagesNode.style.height=
					(this._alignment=="Top" || this._alignment=="Bottom")?(
						this.innerHeight
						- elementOuterHeight(this.tabsNode)
						- (
							elementOuterHeight(this.pagesNode)
							- elementInnerHeight(this.pagesNode)
						) + "px"
					):(
						this.innerHeight
						-(
							elementOuterHeight(this.pagesNode)
							- elementInnerHeight(this.pagesNode)							
						) + "px"
					);
				this.pagesNode.style.width=
					(this._alignment=="Left" || this._alignment=="Right")?(
						this.innerWidth
						- elementOuterWidth(this.tabsNode)
						- (
							elementOuterWidth(this.pagesNode)
							- elementInnerWidth(this.pagesNode)
						) + "px"
					):("");//automatic
					
				//order the tabs in relation to the pages based on alignment
				if (this._alignment=="Bottom" || this._alignment=="Right"){
					this.node.insertBefore(this.pagesNode,this.tabsNode);
				} else {
					this.node.insertBefore(this.tabsNode,this.pagesNode);
				}
			}catch(e){log("jsForms.tabControl.redraw: "+e);}};
			
			//addTab using tab construction params
			this.addTab=function(params){try{
				params.parent=this;
				var tab;
				this.tabs.push(tab=new jsForms.tabPage(params));
				return tab;
			}catch(e){log("jsForms.tabControl.addTab: "+e);}};

			//removeTab using tab object reference
			this.removeTab=function(tab){try{
				this.tabs.removeByValue(tab);
				remove(tab.node);
			}catch(e){log("jsForms.tabControl.removeTab: "+e);}};
						
			//create tab button container
			this.node.appendChild(
				this.tabsNode=createElement("div",{
					className:"tabs",
					style:(
						((!this._multiLine)?"overflow: hidden;":"")+
						//(!this._multiLine)?"height:24px;":""+
						//"width:"+(parseInt(this.size.width)-5)+"px;"+
						""//leave here
					),
				})
			);
			
			//append tab page container
			this.node.appendChild(
				this.pagesNode=createElement("div",{
					className:"pages",
					style:(
						((this._autoFit)?"display:block;":"")+
						//(!this._multiLine && this.size.height)?"height:"+(parseInt(this.size.height)-32)+"px;":""+
						""//leave here
					),
				})
			);
			
			//append a shared tabPage if required
			this._shareSinglePage=params.shareSinglePage||false;
			if (this._shareSinglePage){
				var content=params.sharedContent;
				delete params.sharedContent;
				if (content) {
					if (!isArray(content)) content=[content];
				}
				this.pagesNode.appendChild(
					this.sharedPageNode=createElement("div",{},content)
				);
			}
			
			//init the tabs
			if (isArrayAndNotEmpty(params.tabs)) {
				for (var i=0,tab;(tab=params.tabs[i]);i++) {
					this.addTab(tab);
				}
				//select an initial tab if none already selected
				var autoTab=!(params.preventAutoSelectTab||false);
				if (autoTab && !this._selectedTab) this.selectTab(0);
			}
			delete params.tabs;
			
			//init the rest
			for (var p in params) this[p]=params[p];
			
			//draw
			this.alignment=this._alignment; //and it redraws here
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.tabControl.init: "+e);}},
		
		//coolBar version of tabcontrol
		coolBar:function(params){try{
			var self=this;
			params=params||{};
			params.hotTrack=true;
			params.subStyle="coolBar";
			
			//attach basic elements
			//this is basically the exact same thing as a tabcontrol
			self=extend(self,new jsForms.tabControl(params) );
						
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.coolBar.init: "+e);}},

		//treeview inner controls
		treeNode:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self,new jsForms.visualElement() );

			//defaults
			this._text="";
			this._checked=false;
			this._image="";
			this._selected=false;
			this.TreeView=null;
			
			//fullPath
			//getNodeCount //full count of child tree nodes
			//level //depth in the tree
			//remove
			//isEditing
			//toggle (expanded/collapsed)

			//edit label
			this.beginEdit=function(){
			};
			this.endEdit=function(){
			};
			
			//expand/collapse (with children)
			this.expand=function(ignoreChildren){
			};
			this.collapse=function(ignoreChildren){
			};
			
			//copy
			this.clone=function(){
			};
			
			//open parent nodes and scroll into view
			this.ensureVisible=function(){
			};
			
			//init
			for (var p in params) this[p]=params[p];
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.treeNode.init: "+e);}},

		//treeview uppermost control
		treeView:function(params){try{
			var self=this;
			params=params||{};
			
			//attach basic elements
			self=extend(self, new jsForms.visualElement() );

			//defaults
			this._checkBoxes=false; //show checkboxes at nodes
			this._fullRowSelect=false; //highlight the entire child
			this._hotTracking=true;
			this._indent="28px";
			this._labelEdit=false; //allow edit of labels on node
			this._nodes=[];
			this._pathSeparator="\\";
			this._scrollable=true;
			this._showLines=false; //show node lines
			this._showPlusMinus=true;
			this._showRootLines=true;
			this._sortBy="value";
			this._sortOrder="asc";
			
			//get the dropdown sub object
			this.__defineGetter__("hasChildren", function(){
				return (this._nodes.length>0);
			});
						
			//add remove nodes
			this.addRoot=function(node){
				//draw it
				
				//add it
				this._nodes.push(node);
			};
			
			//expand/collapse nodes
			this.collapseAll=function(){
				for (var i=0,child;(child=this._nodes[i]);i++) child.collapseAll();
			};
			this.expandAll=function(){
				for (var i=0,child;(child=this._nodes[i]);i++) child.expandAll();
			};
			
			//sort nodes
			this.sort=function(){
			};
			
			//init
			for (var p in params) this[p]=params[p];
			
			//return it
			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
			return self;
		}catch(e){log("jsForms.treeView.init: "+e);}},

		
	};
	
	/*to do list
		dropDown: simplified comboBox with only one item selectable
		checkedListBox: uses listBox and assumes checks based on bound data or simple input		
		checkedDropDown: uses comboBox and assumes checks
		bindToData function
		checkbox: check-image-text ordering/layout
		checkbox: check hidden
	*/
	
	//JSON-ready testing page
	if (window.location.href.match(/^(http:\/\/www\.facebook\.com\/test)/) ||
		window.location.href.match(/^(file:\/\/\/C:\/Users\/Charlie\/Desktop)/) ) {
	
		var textBox = new jsForms.textBox({
			text:"hello world",
			backColor:"window",
			foreColor:"windowtext",
			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
			//borderStyle:"Fixed3D",
			borderRadius:{topLeft:"5px", bottomRight:"5px"},
			onChange:function(o){
				confirm(o.text);
			},
		});
		document.documentElement.appendChild(textBox.node,document.documentElement.childNodes[0]);
		
		var spinBox = new jsForms.spinBox({
			text:"3",
			backColor:"window",
			foreColor:"windowtext",
			minimum:0,
			maximum:10,
			rollOver:true,
			increment:1,
		});
		document.documentElement.appendChild(spinBox.node,document.documentElement.childNodes[0]);

		var checkBox = new jsForms.checkBox({
			text:"hello world",
			value:"1",
			checked:true,
			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
			onChange:function(o){
				confirm(o.checked);
			},
		});
		document.documentElement.appendChild(checkBox.node,document.documentElement.childNodes[0]);
		
		var listBox = new jsForms.listBox({
			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
			onChange:function(o){
				//confirm(o.value);
			},
			items:[
				new jsForms.checkBox({text:"hello world"}),
				new jsForms.checkBox({text:"hello moon"}),
				new jsForms.checkBox({text:"goodnight moon"}),
			],
			borderStyle:"Fixed3D",
			firstItemSelectsAll:true,
			explicitClose:true,
		});
		document.documentElement.appendChild(listBox.node,document.documentElement.childNodes[0]);
		
		var postParts = {
			//derived from post.testData
			//this stuff is created in the main.which call
			//so if that is not called yet, each will be undefined
			"title":"The title of a post contains the bold text, usually including the poster's name, at the top of the post.",
			"msg":"The msg of a post is the part the poster added as a comment.",
			"caption":"The caption of a post is one of two lines just below the title.",
			"desc":"The desc of a post is one of two lines just below the title.",
			"link":"The link of a post is just the ORIGINAL link text, not the url.",
			"url":"The url of a post is the address to which the post redirects the user when clicked.",
			"img":"The img of a post is the url of the icon that displays with the post.",
			"fromName":"The fromName is the name of the poster.",
			"fromID":"The fromID is the ID of the poster.",
			"targetName":"The targetName is a list of targets the poster intended the post to display to.",
			"targetID":"The targetID is a list of targets' IDs that the poster intended the post to display to.",
			"canvas":"The canvas of a post is location of the game code.",
			"likeName":"The likeName is a list of names of users who liked this post.",
			"likeID":"The likeID is a list of IDs of users who liked the post.",
			"comments":"The comments is a list of all comments made to the post, excluding the initial msg.",
			"commentorName":"The commentorName is a list of names of all commentors.",
			"commentorID":"The commentorID is a list of IDs of all commentors.",
			"body":"The body of a post is a compilation of the title, caption, and desc.",
			"either":"The either of a post is the compilation of the link and body.",
			"html":"The html of a post is the compilation of ALL visible FB attributes.",
			
			//right from the post object
			"which":"The which of a post is its identified codename. The codename starts with an appID and ends with something the sidekick developer uses to key the bonus type.",
			"idText":"The identified link text of a post.",
			"date":"The date of a post is its creation time on FB. This time is read as a unix date.", //read as unix time
			"status":"The status of a post is the return code created by the sidekick.",
			"priority":"The priority of a post is set by the prioritizer.",
			"appID":"The appID of the game for which this post belongs.",
			"appName":"The appName of the game for which this post belongs, as reported by the FB database.",
			"isStale":"Reports if a post is older than the user-set older limit.",
			"isScam":"Reports if a post is suspected of being a scam. Usually if the canvas and appName do not match.",
			"isCollect":"Reports if the post is set to be collected.",
			"isExcluded":"Reports if the post has been set as excluded.",
			"isFailed":"Reports if the post is set as having already failed.",
			"isAccepted":"Reports if the post is set as having already been successfully collected.",
			"isPaused":"Reports if the post's bonus type or app has been paused by the prioritizer. Paused objects to not process for collection.",
			"isPinned":"Reports if the post is marked as being pinned.",
			"isLiked":"Reports if the post has been identified as already being liked by the current user.",
			"isMyPost":"Reports if the post belongs to the current user.",
			"isUndefined":"Reports if the post does not match any id given by the sidekick.",
			"isWishlist":"Reports if the post is deemed a whichlist request.",
			"isTimeout":"Reports if the post has been marked as a timed out collection try.",
			"isW2W":"Reports if the post is a Wall-To-Wall post, meaning that it was posted to a specific user's wall.",
			"isForMe":"Reports if the W2W post targets the current user."
		};
		var search=["body"];

		var comboBox = new jsForms.comboBox({
			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
			onChange:function(o){
				GM_log("combo changed");
			},
			items:(function(){
				var ret=[];
				for (var i in postParts){
					ret.push(new jsForms.checkBox({
						text:i,
						value:i,
						toolTipText:postParts[i],
						checked:(search.inArray(i)),
						size:{width:"200%"},
					}));
				}
				return ret;
			})(),
			borderStyle:"Fixed3D",
			borderRadius:{topLeft:"1px", bottomRight:"1px",topRight:"1px",bottomLeft:"1px"},
			explicitClose:true,
			highlightSelected:true,
			dropDownSize:{height:"200px"},
			sorted:true,
		});
		document.documentElement.appendChild(comboBox.node,document.documentElement.childNodes[0]);

		//just a divider
		document.documentElement.appendChild(createElement("div"));
		var myConsole={};
		var tabControl = new jsForms.tabControl({
			//font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
			tabs:[
				{
					text:"Tabs",
					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/selLast.png",
					//selected:true,
					content:createElement("div",{},[
						createElement("label",{textContent:"Alignment: "}),
						createElement("select",{
							onchange:function(){
								tabControl.alignment=this.value;
							},
						},optionsFromArray([
							"Top","Right","Bottom","Left"
						])),
						createElement("br"),
						createElement("label",{textContent:"hotTrack: "}),
						createElement("select",{
							onchange:function(){
								tabControl.hotTrack=this.value;
							},
						},optionsFromArray([
							"false","true"
						])),
						createElement("br"),
						createElement("label",{textContent:"subStyle: "}),
						createElement("select",{
							onchange:function(){
								tabControl.subStyle=this.value;
							},
						},optionsFromArray([
							"normal","coolBar"
						])),
					])
				},
				{
					text:"red phone",
					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/red%20phone%20128.png",
				},
				{
					text:"firefox",
					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/firefox_icon.png",
				},
			],
			dock:"fill",
		});
		
		(myConsole.phoneTab=tabControl.tabs[1]).node.appendChild(
			new jsForms.textBox().node
		);
		(myConsole.ffTab=tabControl.tabs[2]).node.textContent="FireFox is the best!";
		
		document.documentElement.appendChild(
			createElement("div",{
				style:(
					"height:500px;"+
					""//leave here
				),
			},[
				tabControl.node
			])
		);
		tabControl.redraw();

		var colorPicker = new jsForms.colorPicker({
			borderStyle:"none",
			dropDownSize:{height:"200px"},
			sorted:true,
			text:"",
		});
		document.documentElement.appendChild(colorPicker.node,document.documentElement.childNodes[0]);
		

	};
	
	//add own css
	try{addGlobalStyle(jsForms.globalStyle(),"jsForms");}catch(e){log("jsForms.addGlobalStyle: "+e);};
	
})();