☰

Greasy Fork is available in English.

JS Forms Library B

Encapulates and extends many HTML forms elements.

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greatest.deepsurf.us/scripts/409/1286/JS%20Forms%20Library%20B.js 

  1. // ==UserScript==
  2. // @name           JS Forms Library B
  3. // @namespace      formstemp
  4. // @description    Encapulates and extends many HTML forms elements.
  5. // @require https://greatest.deepsurf.us/scripts/407-wm-common-library/code/WM%20Common%20Library.user.js?version=1284
  6.  // @require https://greatest.deepsurf.us/scripts/408-wm-debug-console/code/WM%20Debug%20Console.user.js?version=1285
  7. // @license        http://creativecommons.org/licenses/by-nc-nd/3.0/us/
  8. // @include        file:///C:/Users/Charlie/Desktop/*
  9. // @version        0.0.0.12
  10. // @copyright      Charlie Ewing except where noted
  11. // ==/UserScript==
  12.  
  13. //this script requires some functions in the WM Common Library
  14. //this script needs access to a pre-defined JSON object
  15.  
  16. (function() {
  17. 	var sandbox=this;
  18. 		
  19. 	//element helper functions
  20. 	sandbox.elementOuterWidth=function(e){
  21. 		return parseInt(e.offsetWidth||0);
  22. 	};
  23. 	sandbox.elementOuterHeight=function(e){
  24. 		return parseInt(e.offsetHeight||0);
  25. 	};
  26. 	sandbox.elementInnerWidth=function(e){
  27. 		var curWidth = e.style.width;
  28. 		e.style.width="0";
  29. 		var difference = elementOuterWidth(e);
  30. 		e.style.width=curWidth;
  31. 		return elementOuterWidth(e)-difference;
  32. 	};	
  33. 	sandbox.elementInnerHeight=function(e){
  34. 		var curHeight = e.style.height;
  35. 		e.style.height="0";
  36. 		var difference = elementOuterHeight(e);
  37. 		e.style.height=curHeight;
  38. 		return elementOuterHeight(e)-difference;
  39. 	};		
  40.  
  41. 	//forms library B
  42. 	sandbox.jsForms = {
  43. 	
  44. 		colorData:{
  45. 			webSafe:[],
  46. 			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"],
  47. 			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"],
  48. 			custom:[
  49. 				{name:"Attribute",value:"rgba(255, 0, 0, 0.75)"},
  50. 				{name:"BlueWindow",value:"rgba(156, 246, 255, 0.75)"},
  51. 				{name:"Bookmark",value:"rgba(191, 210, 249, 0.75)"},
  52. 				{name:"BookmarkText",value:"rgba(128, 128, 128, 0.75)"},
  53. 				{name:"Breakpoint",value:"rgba(150, 58, 70, 0.75)"},
  54. 				{name:"BreakpointText",value:"rgba(255, 219, 163, 0.75)"},
  55. 				{name:"BrownText",value:"rgba(88, 60, 31, 0.75)"},
  56. 				{name:"Buy",value:"rgba(83, 196, 251, 0.75)"},
  57. 				{name:"Caret",value:"rgba(128, 0, 255, 0.75)"},
  58. 				{name:"CDATA",value:"rgba(255, 128, 0, 0.75)"},
  59. 				{name:"Close",value:"rgba(195, 70, 58, 0.75)"},
  60. 				{name:"Comment",value:"rgba(0, 100, 0, 0.75)"},
  61. 				{name:"CurrentLine",value:"rgba(232, 232, 232, 0.75)"},
  62. 				{name:"Experimental",value:"rgba(156, 244, 156, 0.75)"},
  63. 				{name:"GoTo",value:"rgba(102, 204, 51, 0.75)"},
  64. 				{name:"GreenWindow",value:"rgba(207, 255, 180, 0.75)"},
  65. 				{name:"Hint",value:"rgba(174, 129, 235, 0.75)"},
  66. 				{name:"ID",value:"rgba(0, 128, 255, 0.75)"},
  67. 				{name:"InactiveSelected",value:"rgba(191, 205, 219, 0.75)"},
  68. 				{name:"InactiveSelectedText",value:"rgba(67, 78, 84, 0.75)"},
  69. 				{name:"ItemDone",value:"#91FF91"}, 
  70. 				{name:"ItemFailed",value:"#FF7171"}, 
  71. 				{name:"ItemProcessing",value:"#FFFF7D"}, 
  72. 				{name:"Keyword",value:"rgba(0, 0, 255, 0.75)"},
  73. 				{name:"LineNumber",value:"rgba(43, 145, 175, 0.75)"},
  74. 				{name:"Number",value:"rgba(255, 0, 0, 0.75)"},
  75. 				{name:"PRE",value:"rgba(246, 246, 242, 0.75)"},
  76. 				{name:"QuoteText",value:"rgba(85, 85, 85, 0.75)"},
  77. 				{name:"Regex",value:"rgba(128, 0, 255, 0.75)"},
  78. 				{name:"SelectedText",value:"rgba(192, 192, 192, 0.75)"},
  79. 				{name:"SmartHightlighting",value:"rgba(0, 255, 0, 0.75)"},
  80. 				{name:"String",value:"rgba(163, 21, 21, 0.75)"},
  81. 				{name:"Tag",value:"rgba(0, 0, 255, 0.75)"},
  82. 				{name:"TanWindow",value:"rgba(255, 233, 180, 0.75)"},
  83. 				{name:"TrackChange",value:"rgba(108, 226, 108, 0.75)"},
  84. 				{name:"Unsaved",value:"rgba(255, 238, 98, 0.75)"},
  85. 				{name:"Value",value:"rgba(0, 0, 0, 0.75)"}
  86. 				
  87. 			]
  88. 		},
  89. 	
  90. 		globalStyle:function(){
  91. 			//control element styles
  92. 			return ".jsfButton {"+
  93. 				//"display: block;"+
  94. 				"width: 17px;"+
  95. 				"border: 1px solid buttonshadow;"+
  96. 				"border-radius: 15%;"+
  97. 				"padding: 0px;"+
  98. 				"line-height: 0;"+
  99. 				"font-size: 16px;"+
  100. 				"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;"+
  101. 				"vertical-align: middle;"+
  102. 				"background-color: buttonface;"+
  103. 				"position:relative;"+
  104. 				"}\n"+
  105. 			".jsfButton:hover {"+
  106. 				"border: 1px solid highlight;"+
  107. 				"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;"+
  108. 				"}\n"+
  109. 			".jsfButton>span {position:absolute;}\n"+
  110. 			
  111. 			//tab styles
  112. 			".jsfTabControl>.tabs {display:block;}\n"+
  113. 			".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"+
  114. 			".jsfTabControl>.pages>div {display:block; height:100%;}\n"+
  115. 			".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"+
  116. 			".jsfTab.selected {z-index:999; top:0; background-color:buttonface;}\n"+
  117. 			".jsfTab>img {vertical-align:middle; width:16px; height:16px; padding-right:4px; display:inline-block;}\n"+
  118. 			".jsfTab>div {vertical-align:middle; display:inline-block;}\n"+
  119. 			
  120. 				//left side tabs variant
  121. 				".jsfTabControl.alignLeft>.tabs {display:inline-block; vertical-align:top;}\n"+
  122. 				".jsfTabControl.alignLeft>.pages {display:inline-block; vertical-align:top; left:-1px; top:0;}\n"+
  123. 				".jsfTabControl.alignLeft>.tabs>.jsfTab {border-radius:5px 0 0 5px; border:1px solid; border-right:none; display:block; left:2px; top:0;}\n"+
  124. 				".jsfTabControl.alignLeft>.tabs>.jsfTab.selected {left:0;}\n"+
  125. 				".jsfTabControl.alignLeft>.tabs>.jsfTab>img {}\n"+
  126. 				".jsfTabControl.alignLeft>.tabs>.jsfTab>div {}\n"+
  127. 		
  128. 				//right side tabs variant
  129. 				".jsfTabControl.alignRight>.tabs {display:inline-block; vertical-align:top;}\n"+
  130. 				".jsfTabControl.alignRight>.pages {display:inline-block; vertical-align:top; right:-1px; top:0; border-radius:5px 0 5px 5px;}\n"+
  131. 				".jsfTabControl.alignRight>.tabs>.jsfTab {border-radius:0 5px 5px 0; border:1px solid; border-left:none; display:block; right:2px; top:0;}\n"+
  132. 				".jsfTabControl.alignRight>.tabs>.jsfTab.selected {right:0;}\n"+
  133. 				".jsfTabControl.alignRight>.tabs>.jsfTab>img {}\n"+
  134. 				".jsfTabControl.alignRight>.tabs>.jsfTab>div {}\n"+
  135.  
  136. 				//bottom tabs variant
  137. 				".jsfTabControl.alignBottom>.tabs {}\n"+
  138. 				".jsfTabControl.alignBottom>.pages {border-radius:5px 5px 5px 0; top:1px;}\n"+
  139. 				".jsfTabControl.alignBottom>.tabs>.jsfTab {border:1px solid; border-top:none; border-radius:0 0 5px 5px; top:-2px;}\n"+
  140. 				".jsfTabControl.alignBottom>.tabs>.jsfTab.selected {top:0;}\n"+
  141. 				".jsfTabControl.alignBottom>.tabs>.jsfTab>img {}\n"+
  142. 				".jsfTabControl.alignBottom>.tabs>.jsfTab>div {}\n"+
  143.  
  144. 				//coolbar top variant
  145. 				".jsfTabControl.coolBar>.tabs {background-color:window;}\n"+
  146. 				".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"+
  147. 				".jsfTabControl.coolBar>.tabs>.jsfTab {margin-left:2px; top:0px; background-color:transparent; border-radius:0; border:none; text-align:center;}\n"+
  148. 				".jsfTabControl.coolBar>.tabs>.jsfTab:first-child {margin-left:11px;}\n"+
  149. 				".jsfTabControl.coolBar>.tabs>.jsfTab.selected {background-color:activecaption;}\n"+
  150. 				".jsfTabControl.coolBar.hotTrack>.tabs>.jsfTab.selected:hover {background-color:activecaption;}\n"+
  151. 				".jsfTabControl.coolBar>.tabs>.jsfTab>img {width:32px; height:32px; padding-right:0px;}\n"+
  152. 				".jsfTabControl.coolBar>.tabs>.jsfTab>div {display:block; padding-top:5px;}\n"+
  153.  
  154. 				//coolbar left variant
  155. 				".jsfTabControl.coolBar.alignLeft>.tabs {}\n"+
  156. 				".jsfTabControl.coolBar.alignLeft>.pages {left:0; border:none; border-left:solid 1px windowframe; box-shadow:inset 1px 0 buttonhighlight;}\n"+
  157. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab {left:0px; margin-left:0px; margin-top:2px;}\n"+
  158. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab:first-child {margin-left:0px; margin-top:11px;}\n"+
  159. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab.selected {}\n"+
  160. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab>img {}\n"+
  161. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab>div {}\n"+
  162.  
  163. 				//coolbar right variant
  164. 				".jsfTabControl.coolBar.alignRight>.tabs {}\n"+
  165. 				".jsfTabControl.coolBar.alignRight>.pages {left:0; border:none; border-right:solid 1px windowframe; box-shadow:inset -1px 0 buttonhighlight;}\n"+
  166. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab {left:0px; margin-left:0px; margin-top:2px;}\n"+
  167. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab:first-child {margin-left:0px; margin-top:11px;}\n"+
  168. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab.selected {}\n"+
  169. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab>img {}\n"+
  170. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab>div {}\n"+
  171.  
  172. 				//coolbar bottom variant
  173. 				".jsfTabControl.coolBar.alignBottom>.tabs {}\n"+
  174. 				".jsfTabControl.coolBar.alignBottom>.pages {border:none; border-bottom:solid 1px windowframe; box-shadow:inset 0 -1px buttonhighlight;}\n"+
  175. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab {}\n"+
  176. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab:first-child {}\n"+
  177. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab.selected {}\n"+
  178. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab>img {}\n"+
  179. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab>div {}\n"+
  180. 				
  181. 				//hottracking variant
  182. 				".hotTrack>.tabs>.jsfTab:hover {background-color:inactivecaption;}\n"+
  183. 				".hotTrack>.tabs>.jsfTab.selected:hover {background-color:buttonface;}\n"+
  184. 				
  185. 			//draw styles
  186. 			".jsfblock {display:block !important;}\n"+
  187. 			".jsftableRow {display:table-row !important;}\n"+
  188. 			".jsftableCell {display:table-cell !important;}\n"+
  189. 			".jsfinlineBlock {display:inline-block !important;}\n"+
  190. 			".jsfinline {display:inline !important;}\n"+
  191. 			".jsftable {display:table !important;}\n"+		
  192. 			".jsfhidden {display:none !important;}\n"+
  193. 			
  194. 			".jsfBlock {display:block !important;}\n"+
  195. 			".jsfTableRow {display:table-row !important;}\n"+
  196. 			".jsfTableCell {display:table-cell !important;}\n"+
  197. 			".jsfInlineBlock {display:inline-block !important;}\n"+
  198. 			".jsfInline {display:inline !important;}\n"+
  199. 			".jsfTable {display:table !important;}\n"+		
  200. 			".jsfHidden {display:none !important;}\n"+
  201. 			
  202. 		
  203. 			//form docking
  204. 			".jsfDockTop {position:absolute !important; top:0px !important;}\n"+
  205. 			".jsfDockBottom {position:absolute !important; bottom:0px !important;}\n"+
  206. 			".jsfDockRight {position:absolute !important; right:0px !important;}\n"+
  207. 			".jsfDockLeft {position:absolute !important; left:0px !important;}\n"+
  208.  
  209. 			""//leave here
  210. 		},
  211. 	
  212. 		//basic constructor
  213. 		createElement:function(type,params){try{
  214. 			if (type=="createElement") {
  215. 				log("jsForms.createElement: Whoa! That would create an infinite loop.");
  216. 				return null;
  217. 			} else if (exists(jsForms[type])) {
  218. 				return new jsForms[type](params);
  219. 			}
  220. 		}catch(e){log("jsForms.createElement: "+e);}},		
  221. 	
  222. 		//basic parts for every element
  223. 		basicElement:function(params){try{
  224. 			var self=this;
  225. 			params=params||{};
  226. 			
  227. 			//defaults
  228. 			this._enabled=true;
  229. 			this.parent=null; //container element
  230. 			this.tag=null;
  231. 			this.causesValidation=true;
  232. 			
  233. 			//events
  234. 			this.onCreated=null;
  235. 			
  236. 			//set the accessibility of the element			
  237. 			this.__defineGetter__("enabled", function(){
  238. 				return this._enabled;
  239. 			});		   
  240. 			this.__defineSetter__("enabled", function(v){
  241. 				this._enabled = cBool(v);
  242. 				if (this.node) this.node.enabled=this.enabled;
  243. 			});
  244. 			
  245. 			//enable/disable commands
  246. 			this.enable=function(){this.enabled=true;};
  247. 			this.disable=function(){this.enabled=false;};
  248.  
  249. 			//init
  250. 			for (var p in params) this[p]=params[p];
  251. 			
  252. 			//return it
  253. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  254. 			return self;
  255. 		}catch(e){log("jsForms.basicElement.init: "+e);}},
  256. 	
  257. 		//basic parts for visual elements
  258. 		visualElement:function(params){try{
  259. 			var self=this;
  260. 			params=params||{};
  261. 			
  262. 			//attach basics
  263. 			self=extend(self,new jsForms.basicElement() );
  264. 			
  265. 			//defaults
  266. 			this._backColor="";
  267. 			this._foreColor="";
  268. 			this._font="";//"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif
  269. 			this._cursor="";
  270. 			this._visible=true;
  271. 			this._position={top:"",left:"",right:"",bottom:""};
  272. 			this._size={height:"",width:""};
  273. 			this._maximumSize={height:"",width:""};
  274. 			this._minimumSize={height:"",width:""};
  275. 			this._margin={top:"",left:"",right:"",bottom:""};
  276. 			this._padding={top:"",left:"",right:"",bottom:""};
  277. 			this._node=null;
  278. 			this.backgroundNode=null;
  279. 			this.borderNode=null;
  280. 			//_backgroundImage: url
  281. 			//_backgroundImageLayout: "", time, stretch, center, zoom
  282. 			this._borderStyle="None"; //[None, FixedSingle, Fixed3D]
  283. 			this._drawStyle="inline-block";
  284. 			this._borderCSS="1px solid #646464";
  285. 			this._borderRadius={topLeft:"",topRight:"",bottomRight:"",bottomLeft:""};
  286. 			this._toolTipText="";
  287. 			this._dock="none";
  288. 			
  289. 			//events
  290. 			this.onClick=null;
  291. 			this.onFocus=null;
  292. 			this.onBlur=null;
  293. 			
  294. 			//add css className
  295. 			this.addClassName=function(s){try{
  296. 				if (!isArray(s)) s=[s];
  297. 				var css=this.node.className;
  298. 				for (var w=0,len=s.length;(w<len);w++) {
  299. 					var word=s[w];
  300. 					this.node.className=css.addWord("jsf"+word);
  301. 				}
  302. 			}catch(e){log("jsForms.visualElement.addClassName: "+e);}};
  303.  
  304. 			//remove css className
  305. 			this.removeClassName=function(s){try{
  306. 				if (!isArray(s)) s=[s];
  307. 				var css=this.node.className;
  308. 				for (var w=0,len=s.length;(w<len);w++) {
  309. 					var word=s[w];
  310. 					this.node.className=css.removeWord("jsf"+word);
  311. 				}
  312. 			}catch(e){log("jsForms.visualElement.addClassName: "+e);}};
  313. 			
  314. 			//autoFit parent element
  315. 			this.__defineGetter__("dock", function(){
  316. 				return this._dock;
  317. 			});
  318. 			this.__defineSetter__("dock", function(v){try{
  319. 				this._dock = (v=v.toString());
  320. 				
  321. 				//clear classes
  322. 				this.removeClassName(["dockTop","dockBottom","dockFill","dockRight","dockLeft"]);
  323. 				
  324. 				//calculate display, height, width and position
  325. 				var d, w, h, p=this.node.parentNode||null;
  326. 				switch(v) {
  327. 					case "none":
  328. 						//use given heights and widths
  329. 						d=this._drawStyle;
  330. 						w=this.size.width||"";
  331. 						h=this.size.height||"";						
  332. 						break;
  333. 					case "fill":
  334. 						//fully dock with parent object
  335. 						if (!p) return;
  336. 						d="block";
  337. 						w="";
  338. 						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
  339. 						break;
  340. 					case "fillAndShare":
  341. 						//dock with parent object
  342. 						//using any space left by other children
  343. 						//this assumes all siblings are blocks
  344. 						if (!p) return;
  345. 						d="block";
  346. 						w="";
  347. 						//detect maximum possible height
  348. 						h=
  349. 							//parent inner height
  350. 							elementInnerHeight(p)
  351. 							//minus the outer requirements for this element
  352. 							-(this.outerHeight-this.innerHeight);
  353. 						//detect sibling elements' heights
  354. 						var sibH=0;
  355. 						for (var s in p.childNodes){
  356. 							sib=p.childNodes[s];
  357. 							if (sib!=this.node) {
  358. 								sibH+=elementOuterHeight(sib);
  359. 							}
  360. 						}
  361. 						h=(h-sibH)+"px";
  362. 						break;
  363. 					case "top":
  364. 						//dock to the top of the parent
  365. 						d="block";
  366. 						w="";
  367. 						h=this.size.height||"";
  368. 						this.addClassName("dockTop");
  369. 						break;
  370. 					case "bottom":
  371. 						//dock to the bottom of the parent
  372. 						d="block";
  373. 						w="";
  374. 						h=this.size.height||"";
  375. 						this.addClassName("dockBottom");
  376. 						break;
  377. 					case "right":
  378. 						//dock to the right of the parent
  379. 						d=this._drawStyle;
  380. 						w=this.size.width||"";
  381. 						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
  382. 						this.addClassName("dockRight");
  383. 						break;
  384. 					case "left":
  385. 						//dock to the right of the parent
  386. 						d=this._drawStyle;
  387. 						w=this.size.width||"";
  388. 						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
  389. 						this.addClassName("dockLeft");
  390. 						break;
  391. 				}
  392. 				
  393. 				//apply non-class changes
  394. 				this.node.style.display=d;
  395. 				this.node.style.width=w;
  396. 				this.node.style.height=h;
  397. 			}catch(e){log("jsForms.visualElement.autoFit: "+e);}});
  398.  
  399. 			//set css background color
  400. 			this.__defineGetter__("backColor", function(){
  401. 				return this._backColor;
  402. 			});
  403. 			this.__defineSetter__("backColor", function(v){try{
  404. 				this._backColor = (v.toString());
  405. 				if (this.backgroundNode) this.backgroundNode.style.backgroundColor=this.backColor;
  406. 			}catch(e){log("jsForms.visualElement.backColor: "+e);}});
  407. 			
  408. 			//set draw style (display)
  409. 			this.__defineGetter__("drawStyle", function(){
  410. 				return this._drawStyle;
  411. 			});
  412. 			this.__defineSetter__("drawStyle", function(v){try{
  413. 				this._drawStyle = (v.toString());
  414. 				this.dock=this._dock;
  415. 			}catch(e){log("jsForms.visualElement.drawStyle: "+e);}});
  416.  
  417. 			//set tooltiptext/title
  418. 			this.__defineGetter__("toolTipText", function(){
  419. 				return this._toolTipText;
  420. 			});
  421. 			this.__defineSetter__("toolTipText", function(v){try{
  422. 				this._toolTipText = (v.toString());
  423. 				if (this.node) this.node.title=this._toolTipText;
  424. 			}catch(e){log("jsForms.visualElement.toolTipText: "+e);}});
  425.  
  426. 			//set css foreground color
  427. 			this.__defineGetter__("foreColor", function(){
  428. 				return this._foreColor;
  429. 			});		   
  430. 			this.__defineSetter__("foreColor", function(v){try{
  431. 				this._foreColor = (v.toString());
  432. 				if (this.node) this.node.style.color=this.foreColor;
  433. 			}catch(e){log("jsForms.visualElement.foreColor: "+e);}});
  434. 			
  435. 			//set the font used in both the box and the list
  436. 			this.__defineGetter__("font", function(){
  437. 				return this._font;
  438. 			});			   
  439. 			this.__defineSetter__("font", function(v){try{
  440. 				this._font = (v.toString());
  441. 				if (this.node) this.node.style.fontFamily=this.font;
  442. 			}catch(e){log("jsForms.visualElement.font: "+e);}});
  443.  
  444. 			//set the node element css class
  445. 			this.__defineGetter__("className", function(){
  446. 				return this.node.className;
  447. 			});			   
  448. 			this.__defineSetter__("className", function(v){try{
  449. 				if (this.node) this.node.className=v;
  450. 			}catch(e){log("jsForms.visualElement.className: "+e);}});
  451.  
  452. 			//set the cursor used in the element
  453. 			this.__defineGetter__("cursor", function(){
  454. 				return this._cursor;
  455. 			});
  456. 			this.__defineSetter__("cursor", function(v){try{
  457. 				this._cursor = (v.toString());
  458. 				if (this.node) this.node.style.cursor=this.cursor;
  459. 			}catch(e){log("jsForms.visualElement.cursor: "+e);}});
  460.  
  461. 			//set if the dropdown is visible
  462. 			this.__defineGetter__("visible", function(){
  463. 				return this._visible;
  464. 			});			   
  465. 			this.__defineSetter__("visible", function(v){try{
  466. 				this._visible = cBool(v);
  467. 				//log(this._visible);
  468. 				if (this._visible) this.removeClassName("hidden"); 
  469. 				else this.addClassName("hidden");
  470. 			}catch(e){log("jsForms.visualElement.visible: "+e);}});
  471.  
  472. 			//set the location based on the upper left of the container box
  473. 			//values are copied from the passed object so that a reference to the
  474. 			//passed object does not remain
  475. 			this.__defineGetter__("position", function(){
  476. 				return this._position;
  477. 			});			   
  478. 			this.__defineSetter__("position", function(v){try{
  479. 				if (isObject(v)) {
  480. 					this._position.top=v.top||"";
  481. 					this._position.left=v.left||"";
  482. 					this._position.right=v.right||"";
  483. 					this._position.bottom=v.bottom||"";
  484. 				} else {
  485. 					//value was not an object
  486. 					log("jsForms.visualElement.position.set: input was not an object");
  487. 					this._position={top:"",left:"",right:"",bottom:""}
  488. 				}
  489. 				if (this.node) {
  490. 					this.node.style.top=this.position.top;
  491. 					this.node.style.left=this.position.left;
  492. 					this.node.style.right=this.position.right;
  493. 					this.node.style.bottom=this.position.bottom;
  494. 				}
  495. 			}catch(e){log("jsForms.visualElement.position: "+e);}});
  496.  
  497. 			//set the height and width of the box
  498. 			this.__defineGetter__("size", function(){
  499. 				return this._size;
  500. 			});			   
  501. 			this.__defineSetter__("size", function(v){try{
  502. 				if (isObject(v)) {
  503. 					this._size.height=v.height||"";
  504. 					this._size.width=v.width||"";
  505. 				} else {
  506. 					//value was not an object
  507. 					log("jsForms.visualElement.size.set: input was not an object");
  508. 					this._size={height:"",width:""}
  509. 				}
  510. 				//now use the dock function to finish sizing
  511. 				this.dock = this._dock;
  512. 			}catch(e){log("jsForms.visualElement.size: "+e);}});
  513.  
  514. 			//set the max height and width of the box
  515. 			this.__defineGetter__("maximumSize", function(){
  516. 				return this._maximumSize;
  517. 			});			   
  518. 			this.__defineSetter__("maximumSize", function(v){try{
  519. 				if (isObject(v)) {
  520. 					this._maximumSize.height=v.height||"";
  521. 					this._maximumSize.width=v.width||"";
  522. 				} else {
  523. 					//value was not an object
  524. 					log("jsForms.visualElement.maximumSize.set: input was not an object");
  525. 					this._maximumSize={height:"",width:""}
  526. 				}
  527. 				if (this.node) {
  528. 					this.node.style.maxHeight=this.maximumSize.height;
  529. 					this.node.style.maxWidth=this.maximumSize.width;
  530. 				}
  531. 			}catch(e){log("jsForms.visualElement.maximumSize: "+e);}});
  532.  
  533. 			//set the min height and width of the box
  534. 			this.__defineGetter__("minimumSize", function(){
  535. 				return this._minimumSize;
  536. 			});			   
  537. 			this.__defineSetter__("minimumSize", function(v){try{
  538. 				if (isObject(v)) {
  539. 					this._minimumSize.height=v.height||"";
  540. 					this._minimumSize.width=v.width||"";
  541. 				} else {
  542. 					//value was not an object
  543. 					log("jsForms.visualElement.minimumSize.set: input was not an object");
  544. 					this._minimumSize={height:"",width:""}
  545. 				}
  546. 				if (this.node) {
  547. 					this.node.style.minHeight=this.minimumSize.height;
  548. 					this.node.style.minWidth=this.minimumSize.width;
  549. 				}
  550. 			}catch(e){log("jsForms.visualElement.minimumSize: "+e);}});
  551.  
  552. 			//set the margins of the object {top, left, right, bottom}
  553. 			this.__defineGetter__("margin", function(){
  554. 				return this._margin;
  555. 			});			   
  556. 			this.__defineSetter__("margin", function(v){try{
  557. 				if (isObject(v)) {
  558. 					this._margin.top=v.top||"";
  559. 					this._margin.left=v.left||"";
  560. 					this._margin.right=v.right||"";
  561. 					this._margin.bottom=v.bottom||"";
  562. 				} else {
  563. 					//value was not an object
  564. 					log("jsForms.visualElement.margin.set: input was not an object");
  565. 					this._margin={top:"",left:"",right:"",bottom:""}
  566. 				}
  567. 				if (this.node) {
  568. 					this.node.style.margin=
  569. 						this.margin.top+" "+
  570. 						this.margin.right+" "+
  571. 						this.margin.bottom+" "+
  572. 						this.margin.left;
  573. 				}
  574. 			}catch(e){log("jsForms.visualElement.margin: "+e);}});
  575.  
  576. 			//set the padding of the object {top, left, right, bottom}
  577. 			this.__defineGetter__("padding", function(){
  578. 				return this._padding;
  579. 			});			   
  580. 			this.__defineSetter__("padding", function(v){try{
  581. 				if (isObject(v)) {
  582. 					this._padding.top=v.top||"";
  583. 					this._padding.left=v.left||"";
  584. 					this._padding.right=v.right||"";
  585. 					this._padding.bottom=v.bottom||"";
  586. 				} else {
  587. 					//value was not an object
  588. 					log("jsForms.visualElement.padding.set: input was not an object");
  589. 					this._padding={top:"",left:"",right:"",bottom:""}
  590. 				}
  591. 				if (this.node) {
  592. 					this.node.style.paddingTop=this.padding.top;
  593. 					this.node.style.paddingLeft=this.padding.left;
  594. 					this.node.style.paddingRight=this.padding.right;
  595. 					this.node.style.paddingBottom=this.padding.bottom;
  596. 				}
  597. 			}catch(e){log("jsForms.visualElement.padding: "+e);}});
  598.  
  599. 			//set the border radius of the object 
  600. 			this.__defineGetter__("borderRadius", function(){
  601. 				return this._borderRadius;
  602. 			});			   
  603. 			this.__defineSetter__("borderRadius", function(v){try{
  604. 				if (isObject(v)) {
  605. 					this._borderRadius.topLeft=v.topLeft||"";
  606. 					this._borderRadius.bottomLeft=v.bottomLeft||"";
  607. 					this._borderRadius.topRight=v.topRight||"";
  608. 					this._borderRadius.bottomRight=v.bottomRight||"";
  609. 				} else {
  610. 					//value was not an object
  611. 					log("jsForms.visualElement.borderRadius.set: input was not an object");
  612. 					this._borderRadius={topLeft:"",bottomLeft:"",topRight:"",bottomRight:""}
  613. 				}
  614. 				if (this.borderNode) {
  615. 					this.borderNode.style.borderTopLeftRadius=this.borderRadius.topLeft;
  616. 					this.borderNode.style.borderTopRightRadius=this.borderRadius.topRight;
  617. 					this.borderNode.style.borderBottomLeftRadius=this.borderRadius.bottomLeft;
  618. 					this.borderNode.style.borderBottomRightRadius=this.borderRadius.bottomRight;
  619. 				}
  620. 			}catch(e){log("jsForms.visualElement.borderRadius: "+e);}});
  621.  
  622. 			//set the border style of the element
  623. 			this.__defineGetter__("borderStyle", function(){
  624. 				return this._borderStyle;
  625. 			});
  626. 			this.__defineSetter__("borderStyle", function(v){try{
  627. 				this._borderStyle = (v.toString());
  628. 				if (this.borderNode){
  629. 					this.borderNode.style.border=(
  630. 						(this._borderStyle=="Fixed3D")?"2px inset buttonface":
  631. 						(this._borderStyle=="FixedSingle")?this._borderCSS:
  632. 						"none"
  633. 					);
  634. 				}
  635. 			}catch(e){log("jsForms.visualElement.borderStyle: "+e);}});
  636.  
  637. 			//set default border css for borderStyle FixedSingle
  638. 			this.__defineGetter__("borderCSS", function(){
  639. 				return this._borderCSS;
  640. 			});			   
  641. 			this.__defineSetter__("borderCSS", function(v){try{
  642. 				this._borderCSS = (v.toString());
  643. 				this.borderStyle = this._borderStyle;
  644. 			}catch(e){log("jsForms.visualElement.borderCSS: "+e);}});
  645.  
  646. 			//return the dom node
  647. 			this.__defineGetter__("node", function(){
  648. 				return this._node;
  649. 			});	
  650.  
  651. 			//calculate inner and outer actual sizes
  652. 			this.__defineGetter__("outerWidth", function(){
  653. 				return elementOuterWidth(this._node);
  654. 			});	
  655.  
  656. 			this.__defineGetter__("innerWidth", function(){
  657. 				return elementInnerWidth(this._node);
  658. 			});	
  659.  
  660. 			this.__defineGetter__("outerHeight", function(){
  661. 				return elementOuterHeight(this._node);
  662. 			});	
  663.  
  664. 			this.__defineGetter__("innerHeight", function(){
  665. 				return elementInnerHeight(this._node);
  666. 			});				
  667.  
  668. 			//show/hide the visual element
  669. 			this.show=function(){
  670. 				this.visible=true;
  671. 			};
  672. 			this.hide=function(){
  673. 				this.visible=false;
  674. 			};
  675.  
  676. 			//draw the housing
  677. 			this._node=createElement("div",{
  678. 				style:(
  679. 					"display:"+this._drawStyle+";"+
  680. 					"vertical-align:middle;"+
  681. 					""//leave here
  682. 				)
  683. 			});
  684. 			
  685. 			//set nodes for bordering and background
  686. 			this.borderNode=this._node;
  687. 			this.backgroundNode=this._node;
  688. 			
  689. 			//init
  690. 			for (var p in params) this[p]=params[p];
  691. 			//confirm(JSON.stringify(this));
  692.  
  693. 			//return it
  694. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  695. 			return self;
  696. 		}catch(e){log("jsForms.visualElement.init: "+e);}},
  697. 	
  698. 		//icon specific parts
  699. 		icon:function(params){try{
  700. 			var self=this;
  701. 			params=params||{};
  702. 			
  703. 			//attach basic elements
  704. 			self=extend(self,new jsForms.visualElement() );
  705.  
  706. 			//defaults
  707. 			this._src=null;
  708. 			this._defaultImage=null;
  709. 			this._altImage=null;
  710. 			this.imageNode=null;
  711. 			this.node.style.overflow="hidden";
  712. 			this._selectedImage="_src";
  713. 						
  714. 			//set the image
  715. 			this.__defineGetter__("src", function(){
  716. 				return this._src;
  717. 			});
  718. 			this.__defineSetter__("_src", function(v){try{
  719. 				this._src = (v.toString());
  720. 				if (this._selectedImage=="_src") this.redraw();
  721. 			}catch(e){log("jsForms.icon.src: "+e);}});
  722. 			
  723. 			//set the default image
  724. 			this.__defineGetter__("defaultImage", function(){
  725. 				return this._defaultImage;
  726. 			});
  727. 			this.__defineSetter__("defaultImage", function(v){try{
  728. 				this._defaultImage = (v.toString());
  729. 				if (this._selectedImage=="_defaultImage") this.redraw();
  730. 			}catch(e){log("jsForms.icon.defaultImage: "+e);}});
  731.  
  732. 			//set the alt image
  733. 			this.__defineGetter__("altImage", function(){
  734. 				return this._altImage;
  735. 			});
  736. 			this.__defineSetter__("altImage", function(v){try{
  737. 				this._altImage = (v.toString());
  738. 				if (this._selectedImage=="_altImage") this.redraw();
  739. 			}catch(e){log("jsForms.icon.altImage: "+e);}});
  740. 			
  741. 			//show different images
  742. 			this.showPrimary=function(){
  743. 				this._selectedImage="_src";
  744. 				this.redraw();
  745. 			};
  746. 			this.showDefault=function(){
  747. 				this._selectedImage="_defaultImage";
  748. 				this.redraw();
  749. 			};
  750. 			this.showAlt=function(){
  751. 				this._selectedImage="_altImage";
  752. 				this.redraw();
  753. 			};
  754. 			
  755. 			//redraw
  756. 			this.redraw=function(){try{
  757. 				if (this.imageNode) {
  758. 					this.imageNode.src=(this[this._selectedImage]||this._defaultImage);
  759. 				}
  760. 			}catch(e){log("jsForms.icon.src: "+e);}};
  761. 			
  762. 			//draw it
  763. 			if (this.node){
  764. 				this.node.appendChild(
  765. 					this.imageNode=createElement("img",{
  766. 						style:(
  767. 							"width:inherit;"+
  768. 							"height:inherit;"+
  769. 							""//leave here
  770. 						),
  771. 					})
  772. 				);
  773. 			}			
  774.  
  775. 			//init
  776. 			for (var p in params) {try{
  777. 				//separate event functions
  778. 				if (p.startsWith("on")) {
  779. 					//apply event functions to intended objects
  780. 					if (["onCreated"].inArray(p)) {
  781. 						this[p]=params[p];
  782. 					} else this.imageNode[p.toLowerCase()]=params[p];
  783. 				} else this[p]=params[p];
  784. 			}catch(e){log("jsForms.icon.init (params): "+e);}};
  785. 			//confirm(JSON.stringify(this));
  786.  
  787. 			/*/preload images
  788. 			new Image().src = this._altImage;
  789. 			new Image().src = this._defaultImage;
  790. 			new Image().src = this._src;
  791. 			*/
  792.  
  793. 			//return it
  794. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  795. 			return self;
  796. 		}catch(e){log("jsForms.icon.init: "+e);}},
  797. 	
  798. 		//textbox specific parts
  799. 		textBox:function(params){try{
  800. 			var self=this;
  801. 			params=params||{};
  802. 			
  803. 			//attach basic elements
  804. 			self=extend(self,new jsForms.visualElement() );
  805.  
  806. 			//defaults
  807. 			this._text="";
  808. 			this._emptyText="";
  809. 			this._maxLength=32767;
  810. 			this.textNode=null;
  811. 			this.borderNode=null;
  812. 			this.backgroundNode=null;
  813. 			this._borderStyle="FixedSingle";
  814. 			//this._drawStyle="block";
  815. 			
  816. 			//events
  817. 			this.onChange=null;
  818.  
  819. 			//set the text shown in the box
  820. 			this.__defineGetter__("text", function(){
  821. 				return this._text;
  822. 			});
  823. 			this.__defineSetter__("text", function(v){try{
  824. 				this._text = (v.toString());
  825. 				if (this.textNode) this.textNode.value=v;
  826. 				if (this.causesValidation && this.onChange) {var caller=this; doAction(function(){caller.onChange(caller);})};
  827. 			}catch(e){log("jsForms.textBox.text: "+e);}});
  828.  
  829. 			//text to display when text=""
  830. 			this.__defineGetter__("emptyText", function(){
  831. 				return this._emptyText;
  832. 			});
  833. 			this.__defineSetter__("emptyText", function(v){try{
  834. 				this._emptyText = (v.toString());
  835. 				if (this.node) this.node.title=this.emptyText;
  836. 			}catch(e){log("jsForms.textBox.emptyText: "+e);}});
  837.  
  838. 			//set the max number of characters that can be entered in the box
  839. 			this.__defineGetter__("maxLength", function(){
  840. 				return this._maxLength;
  841. 			});
  842. 			this.__defineSetter__("maxLength", function(v){try{
  843. 				this._maxLength = parseInt(v);
  844. 				if (this.node) this.node.maxLength=this.maxLength;
  845. 			}catch(e){log("jsForms.textBox.maxLength: "+e);}});
  846.  
  847. 			//get the default value as text
  848. 			this.__defineGetter__("value", function(){
  849. 				return this._text;
  850. 			});
  851. 						
  852. 			//draw it
  853. 			this._node.appendChild(
  854. 				this.textNode=createElement("input",{
  855. 					maxLength:this._maxLength, 
  856. 					value:this._text, 
  857. 					title:this._emptyText, 
  858. 					enabled:this._enabled, 
  859. 					style:(
  860. 						"display:"+this._drawStyle+";"+
  861. 						"width:inherit;"+
  862. 						"height:inherit;"+
  863. 						"minWidth:inherit;"+
  864. 						"minHeight:inherit;"+
  865. 						"maxWidth:inherit;"+
  866. 						"maxHeight:inherit;"+
  867. 						"margin-top:inherit;"+
  868. 						"margin-left:inherit;"+
  869. 						"margin-right:inherit;"+
  870. 						"margin-bottom:inherit;"+
  871. 						"top:inherit;"+
  872. 						"left:inherit;"+
  873. 						"right:inherit;"+
  874. 						"bottom:inherit;"+
  875. 						"cursor:inherit;"+
  876. 						//"font-family:inherit;"+
  877. 						//"background-color:"+this._backColor+";"+
  878. 						"color:inherit;"+
  879. 						/*"border:"+(
  880. 							(this.borderStyle=="Fixed3D")?"":
  881. 							(this.borderStyle=="FixedSingle")?this.borderCSS:
  882. 							"none"
  883. 						)+";"+
  884. 						"border-top-left-radius:"+this.borderRadius.topLeft+";"+
  885. 						"border-top-right-radius:"+this.borderRadius.bottomLeft+";"+
  886. 						"border-bottom-left-radius:"+this.borderRadius.topRight+";"+
  887. 						"border-bottom-right-radius:"+this.borderRadius.bottomRight+";"+
  888. 						*/
  889.  
  890.  
  891. 						""//leave here					
  892. 					),
  893. 					onclick:self.onClick,
  894. 					ondblclick:self.onDoubleClick,
  895. 					onmousedown:self.onMouseDown,
  896. 					onmouseup:self.onMouseUp,
  897. 					onmousemove:self.onMouseMove,
  898. 					onmouseover:self.onMouseOver,
  899. 					onmouseout:self.onMouseOut,
  900. 					onkeydown:self.onKeyDown,
  901. 					onkeypress:self.onKeyPress,
  902. 					onkeyup:self.onKeyPress,
  903. 					onblur:self.onBlur,
  904. 					onfocus:self.onFocus,
  905. 					onselect:self.onSelect,
  906. 					onchange:function(){
  907. 						self.text=this.value;
  908. 					},
  909. 				})
  910. 			);
  911. 			
  912. 			//set nodes for bordering and background
  913. 			this.borderNode=this.textNode;
  914. 			this.backgroundNode=this.textNode;
  915. 			
  916. 			//init
  917. 			for (var p in params) this[p]=params[p];
  918. 			//confirm(JSON.stringify(this));
  919.  
  920. 			//return it
  921. 			if (this.causesValidation && this.onCreated) doAction(function(){this.onCreated(this);});
  922. 			return this;
  923. 		}catch(e){log("jsForms.textBox.init: "+e);}},
  924.  
  925. 		//numeric up/down specific parts
  926. 		spinBox:function(params){try{
  927. 			var self=this;
  928. 			params=params||{};
  929. 			
  930. 			//attach basic elements
  931. 			self=extend(self,new jsForms.textBox() );
  932.  
  933. 			//defaults
  934. 			//this._hexadecimal=false;
  935. 			//this._thousandsSeparator=false;
  936. 			this._upDownAlign="right";
  937. 			//this._decimalPlaces=0;
  938. 			this._increment=1;
  939. 			this._maximum=100;
  940. 			this._minimum=0;
  941. 			this._rollOver=false; //start at the other end if past boundary
  942. 			
  943. 			//set the max value
  944. 			this.__defineGetter__("maximum", function(){
  945. 				return this._maximum;
  946. 			});
  947. 			this.__defineSetter__("maximum", function(v){try{
  948. 				this._maximum = parseInt(v);
  949. 			}catch(e){log("jsForms.spinBox.maximum: "+e);}});
  950.  
  951. 			//set the min value
  952. 			this.__defineGetter__("minimum", function(){
  953. 				return this._minimum;
  954. 			});
  955. 			this.__defineSetter__("minimum", function(v){try{
  956. 				this._minimum = parseInt(v);
  957. 			}catch(e){log("jsForms.spinBox.minimum: "+e);}});
  958.  
  959. 			//set the increment value
  960. 			this.__defineGetter__("increment", function(){
  961. 				return this._increment;
  962. 			});
  963. 			this.__defineSetter__("increment", function(v){try{
  964. 				this._increment = parseInt(v);
  965. 			}catch(e){log("jsForms.spinBox.increment: "+e);}});
  966.  
  967. 			//set the rollOver flag
  968. 			this.__defineGetter__("rollOver", function(){
  969. 				return this._rollOver;
  970. 			});
  971. 			this.__defineSetter__("rollOver", function(v){try{
  972. 				this._rollOver = cBool(v);
  973. 			}catch(e){log("jsForms.spinBox.rollOver: "+e);}});
  974.  
  975. 			//up and down functions
  976. 			this.up=function(){
  977. 				this.change(this._increment);
  978. 			};
  979. 			this.down=function(){
  980. 				this.change(-(this._increment));
  981. 			};
  982. 			this.change=function(n){
  983. 				var v=parseInt(this.text),hasChanged=false;
  984. 				v=v+n;
  985. 				//validate boundaries
  986. 				if ((v<=this._maximum)&&(v>=this._minimum)){
  987. 					hasChanged=true;
  988. 				} else {
  989. 					if (this._rollOver) {
  990. 						//perform rollover
  991. 						if (v>this._maximum) v=this._minimum;
  992. 						else v=this._maximum;
  993. 						hasChanged=true;
  994. 					}
  995. 				}
  996. 				if (hasChanged){
  997. 					//format output
  998. 					//v=v.toString();
  999. 					//v=v.format("#,##0");
  1000. 					//print it
  1001. 					this.text=v;
  1002. 				}
  1003. 			};			
  1004. 			
  1005. 			//append buttons to the textbox portion
  1006. 			this.node.style.position="relative";
  1007. 			this.textNode.style.textAlign=(this._upDownAlign=="left")?"right":"left";
  1008. 			this.textNode.style.verticalAlign="middle";
  1009. 			this.node.appendChild(
  1010. 				this.buttonNode=createElement("div",{
  1011. 					style:(
  1012. 						"vertical-align: middle;"+
  1013. 						"position: relative;"+
  1014. 						"display: inline-block;"+
  1015. 						""//leave here
  1016. 					),
  1017. 				},[
  1018. 					this.incrementNode=createElement("button",{
  1019. 						className:"jsfButton jsfblock",
  1020. 						title:"Up",
  1021. 						onclick:function(){
  1022. 							self.up();
  1023. 						},
  1024. 					},[
  1025. 						createElement("span",{
  1026. 							textContent:"\u25B4",
  1027. 						})
  1028. 					]),
  1029. 					this.decrementNode=createElement("button",{
  1030. 						className:"jsfButton jsfblock",
  1031. 						title:"Down",
  1032. 						onclick:function(){
  1033. 							self.down();
  1034. 						},
  1035. 					},[
  1036. 						createElement("span",{
  1037. 							textContent:"\u25BE",
  1038. 						})
  1039. 					])
  1040. 				])
  1041. 			);
  1042. 			
  1043. 			//init
  1044. 			for (var p in params) this[p]=params[p];
  1045.  
  1046. 			//resize its buttons
  1047. 			this.fixSizes=function(){
  1048. 				var self=this;
  1049. 				var btn=this.incrementNode;
  1050. 				var h=elementOuterHeight(this.textNode);
  1051. 				var i=elementOuterHeight(btn)-elementInnerHeight(btn);
  1052. 				if (!isNaN(h) && !isNaN(i) && h>0){
  1053. 					//resize buttons
  1054. 					btn.style.height=(h/2)-i+"px";
  1055. 					self.decrementNode.style.height=
  1056. 						btn.style.height;
  1057. 					//move child text to center
  1058. 					var span=btn.childNodes[0];
  1059. 					span.style.left=
  1060. 						Math.floor((
  1061. 							elementInnerWidth(btn)-elementOuterWidth(span))/2
  1062. 						)+"px";
  1063. 					span.style.bottom=
  1064. 						Math.floor((
  1065. 							elementInnerHeight(btn)-elementOuterHeight(span))/2
  1066. 						)+"px";
  1067. 						
  1068. 					var span=self.decrementNode.childNodes[0];
  1069. 					span.style.left=
  1070. 						Math.floor(
  1071. 							(elementInnerWidth(self.decrementNode)-elementOuterWidth(span))/2
  1072. 						)+"px";
  1073. 					span.style.bottom=
  1074. 						Math.floor(
  1075. 							(elementInnerHeight(self.decrementNode)-elementOuterHeight(span))/2
  1076. 						)+"px";
  1077. 				} else {
  1078. 					setTimeout(function(){self.fixSizes();},100);
  1079. 				}
  1080. 			};
  1081. 			this.fixSizes();
  1082.  
  1083. 			//return it
  1084. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1085. 			return self;			
  1086. 		}catch(e){log("jsForms.spinBox.init: "+e);}},	
  1087.  
  1088. 		//checkbox specific parts
  1089. 		checkBox:function(params){try{
  1090. 			var self=this;
  1091. 			params=params||{};
  1092. 			
  1093. 			//attach basic elements
  1094. 			self=extend(self,new jsForms.visualElement() );
  1095.  
  1096. 			//defaults
  1097. 			this._checked=false;
  1098. 			this._text=""; 
  1099. 			this._value="";
  1100. 			//_threeState: see checkedState
  1101. 			//_checkedState: [unchecked, checked, indeterminate]
  1102. 			this._autoCheck=true; //check on label click
  1103. 			this.checkNode=null;
  1104. 			this.labelNode=null;
  1105. 			this._highlightSelected=false;
  1106.  
  1107. 			//this._image="";
  1108. 			//this._textCheckRelation="After"; //[Above, Below, Before, After]
  1109. 			//this._textImageRelation="After"; //[Above, Below, Before, After]
  1110. 			
  1111. 			//events
  1112. 			this.onChecked=null;
  1113. 			this.onUnchecked=null;
  1114. 			
  1115. 			//set visible text of the checkbox
  1116. 			this.__defineGetter__("text", function(){
  1117. 				return this._text;
  1118. 			});
  1119. 			this.__defineSetter__("text", function(v){try{
  1120. 				this._text = (v.toString());
  1121. 				if (this.labelNode) this.labelNode.textContent=this._text;
  1122. 			}catch(e){log("jsForms.checkBox.text: "+e);}});
  1123.  
  1124. 			//set underlying value of the checkbox
  1125. 			this.__defineGetter__("value", function(){
  1126. 				return this._value;
  1127. 			});
  1128. 			this.__defineSetter__("value", function(v){try{
  1129. 				this._value =  v;
  1130. 				if (this.checkNode) this.checkNode.value=this._value;
  1131. 			}catch(e){log("jsForms.checkBox.value: "+e);}});
  1132.  
  1133. 			this.doAutoCheck=function(){try{
  1134. 				click(self.checkNode);
  1135. 				if (self.onLabelClick) self.onLabelClick();
  1136. 			}catch(e){log("jsForms.checkBox.doAutoCheck: "+e);}};
  1137. 			
  1138. 			//set autocheck on label click
  1139. 			this.__defineGetter__("autoCheck", function(){
  1140. 				return this._autoCheck;
  1141. 			});
  1142. 			this.__defineSetter__("autoCheck", function(v){try{
  1143. 				this._autoCheck = cBool(v);
  1144. 				this.labelNode.onclick=(!this._autoCheck)?this.onLabelClick:this.doAutoCheck;
  1145. 			}catch(e){log("jsForms.checkBox.autoCheck: "+e);}});
  1146.  
  1147. 			//set highlight on checked
  1148. 			this.__defineGetter__("highlightSelected", function(){
  1149. 				return this._highlightSelected;
  1150. 			});
  1151. 			this.__defineSetter__("highlightSelected", function(v){try{
  1152. 				this._highlightSelected = cBool(v);
  1153. 				if (this.node) {
  1154. 					this.node.style.backgroundColor=(this._highlightSelected)?((this._checked)?"highlight":this.backColor):this.backColor;
  1155. 					this.node.style.color=(this._highlightSelected)?((this._checked)?"highlighttext":this.foreColor):this.foreColor;
  1156. 				}
  1157. 			}catch(e){log("jsForms.checkBox.highlightSelected: "+e);}});
  1158.  
  1159. 			//set checked state
  1160. 			this.__defineGetter__("checked", function(){
  1161. 				return this._checked;
  1162. 			});
  1163. 			this.__defineSetter__("checked", function(v){try{
  1164. 				this._checked = cBool(v);
  1165. 				if (this.checkNode) this.checkNode.checked=this._checked;
  1166. 				if (this.node) {
  1167. 					this.node.style.backgroundColor=(this._highlightSelected)?((this._checked)?"highlight":this.backColor):this.backColor;
  1168. 					this.node.style.color=(this._highlightSelected)?((this._checked)?"highlighttext":this.foreColor):this.foreColor;
  1169. 				}
  1170. 				if (this.causesValidation){
  1171. 					var caller=this;
  1172. 					if (this.onChecked && this._checked) doAction(function(){caller.onChecked(caller);});
  1173. 					if (this.onUnchecked && !this._checked) doAction(function(){caller.onChecked(caller);});
  1174. 					if (this.onChange) doAction(function(){caller.onChange(caller);});
  1175. 						/*confirm("-onchange");
  1176. 						window.setTimeout(function(){
  1177. 							confirm("-onchange delay");
  1178. 							caller.onChange(caller);
  1179. 						},1000);*/
  1180. 					//}
  1181. 				}
  1182. 			}catch(e){log("jsForms.checkBox.checked: "+e);}});
  1183. 			
  1184. 			//register the initial params
  1185. 			for (var p in params) this[p]=params[p];
  1186. 			
  1187. 			//draw it
  1188. 			this.node.appendChild(
  1189. 				this.checkNode=createElement("input",{
  1190. 					type: "checkbox",
  1191. 					value: this._value,
  1192. 					checked: this._checked,
  1193. 					style:(
  1194. 						"margin-right: 4px;"+
  1195. 						"vertical-align: middle;"+
  1196. 						
  1197. 						"" //leave here
  1198. 					),
  1199. 					onclick:self.onClick,
  1200. 					ondblclick:self.onDoubleClick,
  1201. 					onmousedown:self.onMouseDown,
  1202. 					onmouseup:self.onMouseUp,
  1203. 					onmousemove:self.onMouseMove,
  1204. 					onmouseover:self.onMouseOver,
  1205. 					onmouseout:self.onMouseOut,
  1206. 					onkeydown:self.onKeyDown,
  1207. 					onkeypress:self.onKeyPress,
  1208. 					onkeyup:self.onKeyPress,
  1209. 					onblur:self.onBlur,
  1210. 					onfocus:self.onFocus,
  1211. 					onchange:function(){
  1212. 						self.checked=this.checked;
  1213. 					},
  1214. 				})
  1215. 			);			
  1216. 			
  1217. 			this.node.appendChild(
  1218. 				this.labelNode=createElement("label",{
  1219. 					textContent:this._text,
  1220. 					style:(
  1221. 						"margin-right: 4px;"+
  1222. 						"vertical-align: middle;"+
  1223. 						"font-weight: normal;"+
  1224. 						"color: inherit;"+
  1225. 						
  1226. 						"" //leave here
  1227. 					),
  1228. 					onclick:(this._autoCheck)?self.doAutoCheck:self.onLabelClick,
  1229. 					ondblclick:self.onLabelDoubleClick,
  1230. 					onmousedown:self.onMouseDown,
  1231. 					onmouseup:self.onMouseUp,
  1232. 					onmousemove:self.onMouseMove,
  1233. 					onmouseover:self.onMouseOver,
  1234. 					onmouseout:self.onMouseOut,
  1235. 					onkeydown:self.onKeyDown,
  1236. 					onkeypress:self.onKeyPress,
  1237. 					onkeyup:self.onKeyPress,
  1238. 					onblur:self.onBlur,
  1239. 					onfocus:self.onFocus,
  1240. 				})
  1241. 			);
  1242. 			
  1243. 			//return it
  1244. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1245. 			return self;
  1246. 		}catch(e){log("jsForms.checkBox.init: "+e);}},
  1247. 		
  1248. 		//toolBox for containing tool icons
  1249. 		toolBox:function(params){try{
  1250. 			var self=this;
  1251. 			params=params||{};
  1252. 			
  1253. 			//attach basic elements
  1254. 			self=extend(self,new jsForms.listBox({items:params.items}) );
  1255. 			delete params.items;
  1256.  
  1257. 			//defaults
  1258. 			this.node.style.position="absolute";
  1259. 			this.drawStyle="block";
  1260. 			//this.node.style.overflow=""; //make it expand as needed
  1261. 			this.position={top:"0px",right:"0px"};
  1262. 			
  1263. 			//init
  1264. 			for (var p in params) this[p]=params[p];
  1265. 			//confirm(JSON.stringify(this));
  1266.  
  1267. 			//return it
  1268. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1269. 			return self;			
  1270. 		}catch(e){log("jsForms.toolBox.init: "+e);}},		
  1271. 		
  1272. 		//listbox specific parts
  1273. 		listBox:function(params){try{
  1274. 			var self=this;
  1275. 			params=params||{};
  1276. 			
  1277. 			//attach basic elements
  1278. 			self=extend(self, new jsForms.visualElement() );
  1279.  
  1280. 			//defaults
  1281. 			this._maxItems=32767;
  1282. 			this._maxSelectedItems=32767;
  1283. 			this._sorted=false;
  1284. 			this._sortBy=["text"];
  1285. 			this._sortOrder="asc";
  1286. 			this.listNode=this.node;
  1287. 			this._items=[];
  1288. 			this._firstItemSelectsAll=false;
  1289. 			this._explicitClose=false;
  1290. 			this._valueMember="value";
  1291. 			this._highlightSelected=false;
  1292. 			this.node.style.overflow="scroll";
  1293. 			this._allowMoveChildren=false;
  1294. 			
  1295. 			//events
  1296. 			this.onItemSelected=null;
  1297. 			this.onItemChecked=null;
  1298. 			this.onItemUnselected=null;
  1299. 			this.onItemUnchecked=null;
  1300. 			this.onMaxItemsSelected=null;
  1301. 			
  1302. 			//set the max number of items to show in the list
  1303. 			this.__defineGetter__("maxItems", function(){
  1304. 				return this._maxItems;
  1305. 			});
  1306. 			this.__defineSetter__("maxItems", function(v){try{
  1307. 				this._maxItems = parseInt(v);
  1308. 			}catch(e){log("jsForms.listBox.maxItems: "+e);}});
  1309.  
  1310. 			//set the max number of items that can be selected
  1311. 			this.__defineGetter__("maxSelectedItems", function(){
  1312. 				return this._maxSelectedItems;
  1313. 			});
  1314. 			this.__defineSetter__("maxSelectedItems", function(v){try{
  1315. 				this._maxSelectedItems = parseInt(v);
  1316. 			}catch(e){log("jsForms.listBox.maxSelectedItems: "+e);}});
  1317.  
  1318. 			//set if the list is to be sorted
  1319. 			this.__defineGetter__("sorted", function(){
  1320. 				return this._sorted;
  1321. 			});
  1322. 			this.__defineSetter__("sorted", function(v){try{
  1323. 				this._sorted = cBool(v);
  1324. 				if (this._sorted) this.sort();
  1325. 			}catch(e){log("jsForms.listBox.sorted: "+e);}});
  1326. 			
  1327. 			//set if the list children can be moved around
  1328. 			this.__defineGetter__("allowMoveChildren", function(){
  1329. 				return this._allowMoveChildren;
  1330. 			});
  1331. 			this.__defineSetter__("allowMoveChilden", function(v){try{
  1332. 				this._allowMoveChildren = cBool(v);
  1333. 				//add||remove tools for each child
  1334. 				for (var i=0,child;(child=this.items[i]);i++){
  1335. 					if (this._allowMoveChildren) {
  1336. 						//add item to toolbox
  1337. 					} else {
  1338. 						//remove item from toolbox
  1339. 					}
  1340. 				}				
  1341. 			}catch(e){log("jsForms.listBox.allowMoveChildren: "+e);}});
  1342.  
  1343. 			//set highlight if selected
  1344. 			this.__defineGetter__("highlightSelected", function(){
  1345. 				return this._highlightSelected;
  1346. 			});
  1347. 			this.__defineSetter__("highlightSelected", function(v){try{
  1348. 				this._highlightSelected = cBool(v);
  1349. 				for (var i=0,child;(child=this.items[i]);i++){
  1350. 					child.highlightSelected=this._highlightSelected;
  1351. 				}
  1352. 			}catch(e){log("jsForms.listBox.highlightSelected: "+e);}});
  1353.  
  1354. 			//set the parameters by which the list is to be sorted
  1355. 			this.__defineGetter__("sortBy", function(){
  1356. 				return this._sortBy;
  1357. 			});
  1358. 			this.__defineSetter__("sortBy", function(v){try{
  1359. 				if (isArray(v) || isString(v)) {
  1360. 					this._sortBy = v;
  1361. 					if (this._sorted) this.sort();
  1362. 				} else {
  1363. 					log("jsForms.listBox.sortBy: Expected array or string, found "+typeof v);
  1364. 				}
  1365. 			}catch(e){log("jsForms.listBox.sortBy: "+e);}});
  1366. 			
  1367. 			//set the direction by which the sorting is done
  1368. 			this.__defineGetter__("sortOrder", function(){
  1369. 				return this._sortOrder;
  1370. 			});
  1371. 			this.__defineSetter__("sortOrder", function(v){try{
  1372. 				this._sortOrder = v.toString();
  1373. 				if (this._sorted) this.sort();
  1374. 			}catch(e){log("jsForms.listBox.sortOrder: "+e);}});
  1375.  
  1376. 			//get the items list of the list
  1377. 			this.__defineGetter__("items", function(){
  1378. 				return this._items;
  1379. 			});
  1380. 			this.__defineSetter__("items", function(v){try{
  1381. 				this._items = v;
  1382. 			}catch(e){log("jsForms.listBox.items: "+e);}});
  1383. 			
  1384. 			//alias for items list
  1385. 			this.__defineGetter__("options", function(){
  1386. 				return this._items;
  1387. 			});
  1388.  
  1389. 			//set the parameter of the sub item that is to be used as a value
  1390. 			this.__defineGetter__("valueMember", function(){
  1391. 				return this._valueMember;
  1392. 			});
  1393. 			this.__defineSetter__("valueMember", function(v){try{
  1394. 				this._valueMember = (v.toString());
  1395. 			}catch(e){log("jsForms.listBox.valueMember: "+e);}});
  1396.  
  1397. 			//an object to display at the end of the
  1398. 			//...list that can be clicked to close a dropdown
  1399. 			this.__defineGetter__("explicitClose", function(){
  1400. 				return this._explicitClose;
  1401. 			});
  1402. 			this.__defineSetter__("explicitClose", function(v){try{
  1403. 				this._explicitClose = cBool(v);
  1404. 			}catch(e){log("jsForms.listBox.explicitClose: "+e);}});
  1405. 			
  1406. 			//set if the special selectAll option appears
  1407. 			this.__defineGetter__("firstItemSelectsAll", function(){
  1408. 				return this._firstItemSelectsAll;
  1409. 			});
  1410. 			this.__defineSetter__("firstItemSelectsAll", function(v){try{
  1411. 				this._firstItemSelectsAll = cBool(v);
  1412. 			}catch(e){log("jsForms.listBox.firstItemSelectsAll: "+e);}});
  1413.  
  1414. 			//get the default value as text
  1415. 			this.__defineGetter__("value", function(){try{
  1416. 				var ret=[];
  1417. 				var sel=this.selectedItems;
  1418. 				for (var i=0,child;(child=sel[i]);i++){
  1419. 					ret.push(child[this._valueMember]);
  1420. 				}
  1421. 				return ret;
  1422. 			}catch(e){log("jsForms.listBox.value: "+e);}});
  1423. 			
  1424. 			//get an array of selected options/checkboxes
  1425. 			this.__defineGetter__("selectedItems", function(){try{
  1426. 				var ret=[];
  1427. 				for (var i=0,child;(child=this.items[i]);i++){
  1428. 					if (exists(child.selected)) {
  1429. 						//check for option types that are selected
  1430. 						if (child.selected) ret.push(child);
  1431. 					} else if (exists(child.checked)) {
  1432. 						//check for checkbox types that are checked
  1433. 						if (child.checked) ret.push(child);
  1434. 					}
  1435. 				}
  1436. 				return ret;
  1437. 			}catch(e){log("jsForms.listBox.selectedItems: "+e);}});
  1438.  
  1439. 			//sort the list and redraw
  1440. 			//p accepts {direction:string, by:array:string}
  1441. 			//sorting is done using by[len-1] to by[0] so that
  1442. 			//...sorting by ["lastName","firstName"] results in
  1443. 			//...items being sorted by lastName first in the output
  1444. 			this.sort=function(p){try{
  1445. 				var params=p||{};
  1446. 				params.by=params.by||this._sortBy||["text"];
  1447. 				if (!isArray(params.by)) params.by=[].push(params.by);
  1448. 				params.direction=params.direction||this._sortOrder||"asc";
  1449. 				//var arrList=methodsToArray(this._items);
  1450. 				var arrList=this._items;
  1451. 				var dir=params.direction.toLowerCase();
  1452. 				//for each passed sort by entry, sort the list
  1453. 				for (var i=this.params.by.length,by;(by=this.params.by[i]);i--){
  1454. 					arrList.sort(function(a,b){
  1455. 						if (["ascending","asc"].inArray(dir)) return a[by]>=b[by];
  1456. 						if (["descending","desc"].inArray(dir)) return a[by]<=b[by];
  1457. 						return true;
  1458. 					});
  1459. 				};
  1460. 				//this._items=arrayToMethods(arrList);
  1461. 				this._items=arrList;
  1462. 				this.redraw();
  1463. 			}catch(e){log("jsForms.listBox.sort: "+e);}};
  1464. 			
  1465. 			//redraw the list of items
  1466. 			this.redraw=function(){try{
  1467. 				//clear all items
  1468. 				for (var n in this.node){
  1469. 					remove(n);
  1470. 				}
  1471. 				//append selectall button if needed
  1472. 				if (this._firstItemSelectsAll) {
  1473. 					this.node.appendChild(this._selectAllNode);
  1474. 				}
  1475. 				//redraw in current order
  1476. 				for (var i=0,child;(child=this.items[i]);i++){
  1477. 					this.node.appendChild(child.node||child);
  1478. 				}
  1479. 				//append explicitclose button if needed
  1480. 				if (this._explicitClose){
  1481. 					this.node.appendChild(this._explicitCloseNode);
  1482. 				}
  1483. 			}catch(e){log("jsForms.listBox.redraw: "+e);}};
  1484. 			
  1485. 			//generic close function, to be replaced by parent objects
  1486. 			this.close=function(){
  1487. 				this.visible=false;
  1488. 			};
  1489. 			//collapse the list down to a single element
  1490. 			this.collapse=function(){try{
  1491. 				this.node.style.height=this.items[0].node.offsetHeight;
  1492. 				this.node.style.overflowX="hidden";
  1493. 				this.node.style.overflowY="hidden";
  1494. 			}catch(e){log("jsForms.listBox.collapse: "+e);}};
  1495. 			//expand the list to the specified size
  1496. 			this.expand=function(){try{
  1497. 				this.node.style.height=this.size.height;
  1498. 				this.node.style.overflowX="hidden";
  1499. 				this.node.style.overflowY="scroll";
  1500. 			}catch(e){log("jsForms.listBox.expand: "+e);}};
  1501.  
  1502. 			//update visual details, such as border
  1503. 			this.borderStyle="FixedSingle";
  1504.  
  1505. 			//register the initial params
  1506. 			for (var p in params) {try{
  1507. 				this[p]=params[p];
  1508. 			}catch(e){log("jsForms.listBox.init(params "+p+"): "+e);}};
  1509. 									
  1510. 			//modify children
  1511. 			for (var i=0,child;(child=this.items[i]);i++){try{
  1512. 				//append onchange value to every list item
  1513. 				child.onChange=function(){
  1514. 					if (self.causesValidation && self.onChange) {
  1515. 						doAction(function(){self.onChange(self);});
  1516. 					}
  1517. 				};
  1518. 				//change the drawstyle of each listitem
  1519. 				(child.node||child).style.display="block";
  1520. 				//set the highlightSelected attribute
  1521. 				child.highlightSelected=this._highlightSelected;
  1522. 			}catch(e){log("jsForms.listBox.init(modify children): "+e);}};
  1523. 						
  1524. 			//create the maybe-needed explicit close button
  1525. 			this._explicitCloseNode=createElement("button",{
  1526. 				textContent:"Close",
  1527. 				style:(
  1528. 					"float:right;"+
  1529. 					""//leave here
  1530. 				),
  1531. 				onclick:function(){
  1532. 					if (self.close) doAction(function(){self.close();});
  1533. 				},
  1534. 			});
  1535. 			
  1536. 			//create the maybe-needed select all node
  1537. 			var o=new jsForms.checkBox({
  1538. 				text:"Select All",
  1539. 				onChange:function(){
  1540. 					for (var i=0,child;(child=self._items[i]);i++){
  1541. 						if (exists(child.selected)) child.selected=this.checked;
  1542. 						if (exists(child.checked)) child.checked=this.checked;
  1543. 					}
  1544. 				},
  1545. 			});
  1546. 			this._selectAllNode=o.node;
  1547. 			o.labelNode.style.fontWeight="bold";
  1548. 			
  1549. 			//draw it
  1550. 			this.node.style.overflowX="hidden";
  1551. 			this.node.style.overflowY="scroll";
  1552. 			this.redraw();
  1553. 			
  1554. 			//return it
  1555. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1556. 			return self;
  1557. 		}catch(e){log("jsForms.listBox.init: "+e);}},
  1558.  
  1559. 		//combobox, dropdown, select-multi
  1560. 		comboBox:function(params){try{
  1561. 			var self=this;
  1562. 			params=params||{};
  1563. 			
  1564. 			//attach basic elements
  1565. 			self=extend(self,new jsForms.textBox() );
  1566. 			
  1567. 			//defaults
  1568. 			this._dropDownStyle="dropDown";
  1569. 			this._dropDownZIndex="999";
  1570. 			this.node.style.position="relative";
  1571. 			this.textNode.style.verticalAlign="middle";
  1572. 			this.textNode.disabled=true; //prevent typing in the box
  1573. 			
  1574. 			//sub items
  1575. 			try{
  1576. 				this._dropDown=new jsForms.listBox({
  1577. 					parent:this,
  1578. 					items:params.items,
  1579. 					onChange:function(){
  1580. 						self.text=this.value;
  1581. 						//confirm(this.value);
  1582. 					},
  1583. 					firstItemSelectsAll:params.firstItemSelectsAll,
  1584. 					explicitClose:params.explicitClose,
  1585. 					backColor:params.backColor||"window",
  1586. 					//size:{width:"100%"},
  1587. 					highlightSelected:params.highlightSelected,
  1588. 					size:params.dropDownSize,
  1589. 					drawStyle:"block",
  1590. 				});
  1591. 				//close the dropdown by default
  1592. 				if (this._dropDownStyle!="simple") this._dropDown.hide();
  1593. 				
  1594. 				this._dropDown.node.style.zIndex=this._dropDownZIndex;
  1595. 				this._dropDown.node.style.position="absolute";
  1596. 				
  1597. 				//set the text based on what was passed as selected
  1598. 				this.text=this._dropDown.value;
  1599. 			}catch(e){log("jsForms.comboBox.init(create list): "+e);};
  1600. 			
  1601. 			//scrap items we don't want appended to this object
  1602. 			delete params.items;
  1603. 			delete params.explicitClose;
  1604. 			delete params.firstItemSelectsAll;
  1605. 			delete params.highlightSelected;
  1606. 			delete params.dropDownSize;
  1607.  
  1608. 			//get the dropdown sub object
  1609. 			this.__defineGetter__("dropDown", function(){
  1610. 				return this._dropDown;
  1611. 			});
  1612.  
  1613. 			//set the dropdown visual style
  1614. 			//simple: no dropdown, elements shown directly below all the time
  1615. 			//dropdown: dropdown, elements in hidden list, allow typing in top box
  1616. 			//dropdownList: same as dropdown minus typing in top box
  1617. 			this.__defineGetter__("dropDownStyle", function(){
  1618. 				return this._dropDownStyle;
  1619. 			});
  1620. 			this.__defineSetter__("dropDownStyle", function(v){try{
  1621. 				this._dropDownStyle = (v.toString());
  1622. 				this._dropDown.visible=((this._dropDownStyle=="simple")?true:false);
  1623. 			}catch(e){log("jsForms.comboBox.dropDownStyle: "+e);}});
  1624.  
  1625. 			//set the z-index of the dropdown portion when open
  1626. 			this.__defineGetter__("dropDownZIndex", function(){
  1627. 				return this._dropDownZIndex;
  1628. 			});
  1629. 			this.__defineSetter__("dropDownZIndex", function(v){try{
  1630. 				this._dropDownZIndex = parseInt(v);
  1631. 				this._dropDown.node.style.zIndex=this._dropDownZIndex;
  1632. 			}catch(e){log("jsForms.comboBox.dropDownZIndex: "+e);}});
  1633. 			
  1634. 			//redefine value: get the dropdown value array
  1635. 			this.__defineGetter__("value", function(){
  1636. 				return this._dropDown.value;
  1637. 			});
  1638. 			
  1639. 			//show/hide dropdown
  1640. 			this.showDropDown=function(){
  1641. 				this._dropDown.show();
  1642. 				this.buttonTextNode.textContent="\u25B4";
  1643. 			};
  1644. 			this.hideDropDown=function(){
  1645. 				this._dropDown.hide();
  1646. 				this.buttonTextNode.textContent="\u25BE";
  1647. 			};
  1648. 			this.toggleDropDown=function(){
  1649. 				var dd=this._dropDown;
  1650. 				if (dd.visible) this.hideDropDown(); else this.showDropDown();
  1651. 			};
  1652. 			
  1653. 			//register the initial params
  1654. 			for (var p in params) this[p]=params[p];
  1655. 			
  1656. 			//append a button to the textbox portion
  1657. 			this.node.appendChild(
  1658. 				this.buttonNode=createElement("button",{					
  1659. 					className:"jsfButton jsfinlineBlock",
  1660. 					onclick:function(){
  1661. 						self.toggleDropDown();
  1662. 					},
  1663. 				},[
  1664. 					this.buttonTextNode=createElement("span",{
  1665. 						textContent:"\u25BE",
  1666. 					})
  1667. 				])
  1668. 			);
  1669. 			
  1670. 			//append the dropdown list
  1671. 			this.node.appendChild(this._dropDown.node);
  1672. 			
  1673. 			//resize its parts
  1674. 			this.fixSizes=function(){
  1675. 				var self=this;
  1676. 				//resize dropdown button
  1677. 				var btn=this.buttonNode;
  1678. 				var h=elementOuterHeight(this.textNode);
  1679. 				var i=elementOuterHeight(btn)-elementInnerHeight(btn);
  1680. 				if (!isNaN(h) && !isNaN(i) && h>0){
  1681. 					btn.style.height=(h-i)+"px";
  1682. 					var span=btn.childNodes[0];
  1683. 					span.style.left=
  1684. 						Math.floor((
  1685. 							elementInnerWidth(btn)-elementOuterWidth(span))/2
  1686. 						)+"px";
  1687. 					span.style.bottom=
  1688. 						Math.floor((
  1689. 							elementInnerHeight(btn)-elementOuterHeight(span))/2
  1690. 						)+"px";
  1691. 					
  1692. 				} else {
  1693. 					setTimeout(function(){self.fixSizes();},100);
  1694. 				}
  1695.  
  1696. 				//resize dropdown
  1697. 				this._dropDown.node.style.width=
  1698. 					this.innerWidth-
  1699. 					(this._dropDown.outerWidth-this._dropDown.innerWidth)+
  1700. 					"px";
  1701. 				
  1702. 			};
  1703. 			this.fixSizes();
  1704.  
  1705. 			//return it
  1706. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1707. 			return self;
  1708. 		}catch(e){log("jsForms.comboBox.init: "+e);}},
  1709.  
  1710. 		//css color picker
  1711. 		colorPicker:function(params){try{
  1712. 			var self=this;
  1713. 			params=params||{};
  1714. 			
  1715. 			//attach basic elements
  1716. 			self=extend(self,new jsForms.textBox() );
  1717. 			
  1718. 			//defaults
  1719. 			this._dropDownStyle="dropDown";
  1720. 			this._dropDownZIndex="999";
  1721. 					
  1722. 			//functions			
  1723. 			var spanClick=function(){
  1724. 				self.text=this.getAttribute("data-ft");
  1725. 				self.hideDropDowns();
  1726. 				self.colorBox.style.backgroundColor=self.text;				
  1727. 			};
  1728. 			
  1729. 			var makeSpans=function(data,e){
  1730. 				var ret=[];
  1731. 				if (isArrayAndNotEmpty(data)) for (var i=0,d;(d=data[i]);i++){
  1732. 					var value=(typeof d == "object")?d.value:d;
  1733. 					var name=(typeof d == "object")?d.name:d;
  1734. 			
  1735. 					ret.push(createElement("span",{
  1736. 						onclick:spanClick,
  1737. 						style:(
  1738. 							//"color: white !important;"+
  1739. 							//"text-shadow: 0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black;"+
  1740. 							//"font-weight:bold;"+
  1741. 							"display:block;"+
  1742. 							""//leave here
  1743. 						),
  1744. 						"data-ft":value,
  1745. 					},[
  1746. 						createElement("div",{
  1747. 							style:(
  1748. 								"background-color:"+value+" !important;"+
  1749. 								"margin:0px 6px 0px 3px;"+
  1750. 								"border:1px solid black;"+
  1751. 								"width:20px; height:10px;"+
  1752. 								"vertical-align:baseline;"+
  1753. 								"display:inline-block;"+
  1754. 								""//leave here
  1755. 							),
  1756. 						}),
  1757. 						createElement("text",name)
  1758. 					]));
  1759. 				}
  1760. 				return ret;
  1761. 			};
  1762. 					
  1763. 			//sub items
  1764. 			var shareStyle=(
  1765. 				"background-color:"+(params.backColor||"window")+";"+
  1766. 				"height:"+params.dropDownSize.height+";"+
  1767. 				"z-index:"+this._dropDownZIndex+";"+
  1768. 				"position:absolute;"+
  1769. 				"display:none;"+
  1770. 				"overflow-x:hidden;"+
  1771. 				"overflow-y:auto;"+
  1772. 				""//leave here
  1773. 			);
  1774. 			try{
  1775. 				this._webSafe=createElement("div",{
  1776. 						style:shareStyle,
  1777. 					},
  1778. 					makeSpans(jsForms.colorData.webSafe)
  1779. 				);
  1780. 			}catch(e){log("jsForms.colorPicker.init(webSafe): "+e);};
  1781. 			try{
  1782. 				this._colorWords=createElement("div",{
  1783. 						style:shareStyle,
  1784. 					},
  1785. 					makeSpans(jsForms.colorData.colorWords)
  1786. 				);
  1787. 			}catch(e){log("jsForms.colorPicker.init(colorWords): "+e);};
  1788. 			try{
  1789. 				this._system=createElement("div",{
  1790. 						style:shareStyle,
  1791. 					},
  1792. 					makeSpans(jsForms.colorData.system)
  1793. 				);
  1794. 			}catch(e){log("jsForms.colorPicker.init(system): "+e);};
  1795. 			try{
  1796. 				this._custom=createElement("div",{
  1797. 						style:shareStyle,
  1798. 					},
  1799. 					makeSpans(jsForms.colorData.custom)
  1800. 				);
  1801. 			}catch(e){log("jsForms.colorPicker.init(custom): "+e);};
  1802. 			delete params.dropDownSize;
  1803. 			
  1804. 			//set the z-index of the dropdown portion when open
  1805. 			this.__defineGetter__("dropDownZIndex", function(){
  1806. 				return this._dropDownZIndex;
  1807. 			});
  1808. 			this.__defineSetter__("dropDownZIndex", function(v){try{
  1809. 				this._dropDownZIndex = parseInt(v);
  1810. 				this._webSafe.style.zIndex=this._dropDownZIndex;
  1811. 				this._system.style.zIndex=this._dropDownZIndex;
  1812. 				this._colorNames.style.zIndex=this._dropDownZIndex;
  1813. 				this._custom.style.zIndex=this._dropDownZIndex;
  1814. 			}catch(e){log("jsForms.colorPicker.dropDownZIndex: "+e);}});
  1815. 			
  1816. 			//redefine value: get the dropdown value array
  1817. 			this.__defineGetter__("value", function(){
  1818. 				return this.textNode.value;
  1819. 			});
  1820.  
  1821. 			//resize the dropdown to fit our control
  1822. 			this.resizeDropDown=function(e){
  1823. 				var w=this.innerWidth-
  1824. 					( elementOuterWidth(this[e])-elementInnerWidth(this[e]) )+
  1825. 					"px";
  1826. 				//confirm(w);
  1827. 				this[e].style.width=w;
  1828. 			};
  1829. 			
  1830. 			//show/hide dropdown
  1831. 			this.showDropDown=function(e){
  1832. 				this.hideDropDowns();
  1833. 				this.resizeDropDown(e);
  1834. 				this[e].style.display="block"
  1835. 			};
  1836. 			this.hideDropDowns=function(){
  1837. 				this._webSafe.style.display="none";
  1838. 				this._system.style.display="none";
  1839. 				this._colorWords.style.display="none";
  1840. 				this._custom.style.display="none";
  1841. 			};
  1842. 			this.toggleDropDown=function(e){
  1843. 				var hidden=(this[e].style.display=="none");
  1844. 				if (hidden) this.showDropDown(e); else this.hideDropDowns();
  1845. 			};
  1846. 			
  1847. 			//init
  1848. 			for (var p in params) this[p]=params[p];
  1849.  
  1850. 			//append a button to the textbox portion
  1851. 			this.node.style.position="relative";
  1852. 			this.node.appendChild(
  1853. 				createElement("button",{					
  1854. 					style:(
  1855. 						"position: relative;"+
  1856. 						"font-size: 18px;"+
  1857. 						"padding: 0px;"+
  1858. 						"line-height: 0px;"+
  1859. 						"border: 1px solid buttonshadow;"+
  1860. 						"height:16px; width:17px;"+
  1861. 						"background-color: buttonface;"+
  1862. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1863. 						"vertical-align:middle;"+
  1864. 						""//leave here
  1865. 					),
  1866. 					onclick:function(){
  1867. 						self.toggleDropDown("_webSafe");
  1868. 					},
  1869. 				},[
  1870. 					createElement("span",{
  1871. 						textContent:"\u25BE",
  1872. 						style:(
  1873. 							"position: relative;"+
  1874. 							"left:-3px;"+
  1875. 							""//leave here
  1876. 						)
  1877. 					})
  1878. 				])
  1879. 			);
  1880. 			this.node.appendChild(
  1881. 				createElement("button",{					
  1882. 					style:(
  1883. 						"position: relative;"+
  1884. 						"font-size: 18px;"+
  1885. 						"padding: 0px;"+
  1886. 						"line-height: 0px;"+
  1887. 						"border: 1px solid buttonshadow;"+
  1888. 						"height:16px; width:17px;"+
  1889. 						"background-color: buttonface;"+
  1890. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1891. 						"vertical-align:middle;"+
  1892. 						""//leave here
  1893. 					),
  1894. 					onclick:function(){
  1895. 						self.toggleDropDown("_colorWords");
  1896. 					},
  1897. 				},[
  1898. 					createElement("span",{
  1899. 						textContent:"\u25BE",
  1900. 						style:(
  1901. 							"position: relative;"+
  1902. 							"left:-3px;"+
  1903. 							""//leave here
  1904. 						)
  1905. 					})
  1906. 				])
  1907. 			);
  1908. 			this.node.appendChild(
  1909. 				createElement("button",{					
  1910. 					style:(
  1911. 						"position: relative;"+
  1912. 						"font-size: 18px;"+
  1913. 						"padding: 0px;"+
  1914. 						"line-height: 0px;"+
  1915. 						"border: 1px solid buttonshadow;"+
  1916. 						"height:16px; width:17px;"+
  1917. 						"background-color: buttonface;"+
  1918. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1919. 						"vertical-align:middle;"+
  1920. 						""//leave here
  1921. 					),
  1922. 					onclick:function(){
  1923. 						self.toggleDropDown("_system");
  1924. 					},
  1925. 				},[
  1926. 					createElement("span",{
  1927. 						textContent:"\u25BE",
  1928. 						style:(
  1929. 							"position: relative;"+
  1930. 							"left:-3px;"+
  1931. 							""//leave here
  1932. 						)
  1933. 					})
  1934. 				])
  1935. 			);
  1936. 			this.node.appendChild(
  1937. 				createElement("button",{					
  1938. 					style:(
  1939. 						"position: relative;"+
  1940. 						"font-size: 18px;"+
  1941. 						"padding: 0px;"+
  1942. 						"line-height: 0px;"+
  1943. 						"border: 1px solid buttonshadow;"+
  1944. 						"height:16px; width:17px;"+
  1945. 						"background-color: buttonface;"+
  1946. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1947. 						"vertical-align:middle;"+
  1948. 						""//leave here
  1949. 					),
  1950. 					onclick:function(){
  1951. 						self.toggleDropDown("_custom");
  1952. 					},
  1953. 				},[
  1954. 					createElement("span",{
  1955. 						textContent:"\u25BE",
  1956. 						style:(
  1957. 							"position: relative;"+
  1958. 							"left:-3px;"+
  1959. 							""//leave here
  1960. 						)
  1961. 					})
  1962. 				])
  1963. 			);	
  1964. 			
  1965. 			//append the dropdown list
  1966. 			this.node.appendChild(this._webSafe);			
  1967. 			this.node.appendChild(this._colorWords);			
  1968. 			this.node.appendChild(this._system);			
  1969. 			this.node.appendChild(this._custom);			
  1970. 			
  1971. 			//append the colorbox before the textbox
  1972. 			this.colorBox=createElement("div",{
  1973. 				style:(
  1974. 					"background-color:"+this.text+";"+
  1975. 					"margin:0px 6px 0px 3px;"+
  1976. 					"border:1px solid black;"+
  1977. 					"width:20px; height:10px;"+
  1978. 					"vertical-align:middle;"+
  1979. 					"display:inline-block;"+
  1980. 					""//leave here
  1981. 				),
  1982. 			});
  1983. 			this.node.insertBefore(this.colorBox,this.textNode);
  1984. 			this.textNode.style.verticalAlign="middle";
  1985. 			var oldOnChange=this.textNode.onchange||null;
  1986. 			this.textNode.onchange=function(){				
  1987. 				self.text=this.value;
  1988. 				self.colorBox.style.backgroundColor=this.value;
  1989. 			};
  1990. 			
  1991. 			//return it
  1992. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1993. 			return self;
  1994. 		}catch(e){log("jsForms.colorPicker.init: "+e);}},		
  1995. 		
  1996. 		//tabcontrol inner control
  1997. 		tabPage:function(params){try{
  1998. 			var self=this;
  1999. 			params=params||{};
  2000. 			
  2001. 			//attach basic elements
  2002. 			self=extend(self,new jsForms.visualElement() );
  2003.  
  2004. 			//make sure we know our parent
  2005. 			this.parent=params.parent||null;
  2006. 			delete params.parent;
  2007.  
  2008. 			//defaults
  2009. 			this._text="";
  2010. 			this._image="";
  2011. 			//this._autoScroll=true;
  2012. 			this._showImage=true;
  2013. 			this.buttonNode=null;
  2014. 			this.imageNode=null;
  2015. 			this.textNode=null;
  2016. 			this.pageNode=null;
  2017. 			this._drawStyle="block";
  2018. 			
  2019. 			//set the text shown in the tab button
  2020. 			this.__defineGetter__("text", function(){
  2021. 				return this._text;
  2022. 			});
  2023. 			this.__defineSetter__("text", function(v){try{
  2024. 				this._text = (v.toString());
  2025. 				if (this.textNode) this.textNode.textContent=this._text;
  2026. 			}catch(e){log("jsForms.tabPage.text: "+e);}});
  2027.  
  2028. 			//return if the parent knows we are selected
  2029. 			this.__defineGetter__("selected", function(){
  2030. 				return (this.parent._selectedTab===this);
  2031. 			});
  2032.  
  2033. 			//set the image shown in the tab button
  2034. 			this.__defineGetter__("image", function(){
  2035. 				return this._image;
  2036. 			});
  2037. 			this.__defineSetter__("image", function(v){try{
  2038. 				this._image = ((v||"").toString());
  2039. 				if (this.imageNode) {
  2040. 					this.imageNode.src=this._image;
  2041. 					this.imageNode.className=
  2042. 						this.imageNode.className[((this._showImage && (this._image||this._imageClass))?"remove":"add")+"Word"]("jsfHidden");
  2043. 				}
  2044. 			}catch(e){log("jsForms.tabPage.image: "+e);}});
  2045.  
  2046. 			//image className
  2047. 			this.__defineGetter__("imageClass", function(){
  2048. 				return this._imageClass;
  2049. 			});
  2050. 			this.__defineSetter__("imageClass", function(v){try{
  2051. 				var oldClass=this._imageClass;
  2052. 				this._imageClass = ((v||"").toString());
  2053. 				if (this.imageNode) {
  2054. 					this.imageNode.className=
  2055. 						this.imageNode.className.removeWord(oldClass).addWord(this._imageClass);
  2056. 				}
  2057. 			}catch(e){log("jsForms.tabPage.imageClass: "+e);}});
  2058.  
  2059. 			//show/hide the tab button image
  2060. 			this.__defineGetter__("showImage", function(){
  2061. 				return this._showImage;
  2062. 			});
  2063. 			this.__defineSetter__("showImage", function(v){try{
  2064. 				this._showImage = cBool(v);
  2065. 				if (this.imageNode) {
  2066. 					this.imageNode.className=
  2067. 						this.imageNode.className[((this._showImage && (this._image||this._imageClass))?"remove":"add")+"Word"]("jsfHidden");
  2068. 				}
  2069. 			}catch(e){log("jsForms.tabPage.showImage: "+e);}});
  2070.  
  2071. 			//select tab
  2072. 			this.select=function(){
  2073. 				this.parent.selectTab(this);
  2074. 			}
  2075. 			
  2076. 			//init
  2077. 			var selected=params.selected||false;
  2078. 			delete params.selected;
  2079. 			var content=params.content||null;
  2080. 			delete params.content;
  2081. 			for (var p in params) this[p]=params[p];
  2082.  
  2083. 			//draw it
  2084. 			if (this.parent) {
  2085. 				//add button to parent node
  2086. 				this.parent.tabsNode.appendChild(
  2087. 					this.buttonNode=createElement("div",{
  2088. 						className:"jsfTab",
  2089. 						style:(
  2090. 							""//leave here
  2091. 						),
  2092. 						onclick:function(){self.select();},
  2093. 					},[
  2094. 						this.imageNode=createElement("img",{
  2095. 							className:this._imageClass+((this._showImage && (this._image||this._imageClass))?"":" jsfHidden"),
  2096. 							style:(
  2097. 								""//leave here
  2098. 							),
  2099. 							src:this._image||"",
  2100. 						}),
  2101. 						this.textNode=createElement("div",{
  2102. 							textContent:this._text.upperWords(),
  2103. 							style:(
  2104. 								""//leave here
  2105. 							),
  2106. 						}),
  2107. 					])
  2108. 				);
  2109. 				
  2110. 				//add page to parent node
  2111. 				if (content) {
  2112. 					if (!isArray(content)) content=[content];
  2113. 					for (var i=0,contentNode;(contentNode=content[i]);i++){
  2114. 						this.node.appendChild(contentNode);
  2115. 					}
  2116. 				}
  2117. 				this.parent.pagesNode.appendChild(this.node);
  2118. 				this.pageNode=this.node;
  2119. 									
  2120. 				//make selected if needed
  2121. 				this.hide();
  2122. 				this.dock=this._dock;
  2123. 				if (selected) this.select();
  2124. 			}
  2125. 			
  2126. 			//return it
  2127. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2128. 			return self;
  2129. 		}catch(e){log("jsForms.tabPage.init: "+e);}},
  2130.  
  2131. 		//tabcontrol uppermost control
  2132. 		tabControl:function(params){try{
  2133. 			var self=this;
  2134. 			params=params||{};
  2135. 			
  2136. 			//attach basic elements
  2137. 			self=extend(self,new jsForms.visualElement() );
  2138. 			
  2139. 			//defaults
  2140. 			this._alignment="top"; //[top, left, right, bottom]
  2141. 			//this._appearance="normal"; //[normal,buttons,flat buttons]
  2142. 			this._hotTrack=true; //mouseover glow on buttons
  2143. 			this._multiLine=false; //allow multiple lines of tabs
  2144. 			//this._sizeMode="normal"; //[normal,fixed,filltoright]
  2145. 			this._shareSinglePage=false; //all tabs use the same pageNode
  2146. 			this.tabs=[];
  2147. 			this.tabsNode=null;
  2148. 			this.pagesNode=null;
  2149. 			this._selectedTab=null;
  2150. 			this.node.className=this.node.className.addWord("jsfTabControl hotTrack");
  2151. 			this.sharedPageNode=null; //container for shared tabPage
  2152. 			this.preventAutoSelectTab=false;
  2153.  
  2154. 			//subStyle
  2155. 			this.__defineGetter__("subStyle", function(){
  2156. 				return this._subStyle;
  2157. 			});
  2158. 			this.__defineSetter__("subStyle", function(v){try{
  2159. 				this.node.className=this.node.className.removeWord(this._subStyle);
  2160. 				this._subStyle = (v.toString());
  2161. 				this.node.className=this.node.className.addWord(this._subStyle);
  2162. 			}catch(e){log("jsForms.tabControl.subStyle: "+e);}});
  2163.  
  2164. 			//tabs alignment
  2165. 			this.__defineGetter__("alignment", function(){
  2166. 				return this._alignment;
  2167. 			});
  2168. 			this.__defineSetter__("alignment", function(v){try{
  2169. 				this._alignment = (v.toString().toLowerCase().upperWords());
  2170. 				//remove all alignment css words
  2171. 				this.node.className=this.node.className.removeWord(["alignTop","alignLeft","alignBottom","alignRight"]);
  2172. 				this.node.className=this.node.className.addWord("align"+this._alignment);
  2173. 				this.redraw();
  2174. 			}catch(e){log("jsForms.tabControl.alignment: "+e);}});
  2175.  
  2176. 			//tab bar hot tracking
  2177. 			this.__defineGetter__("hotTrack", function(){
  2178. 				return this._hotTrack;
  2179. 			});
  2180. 			this.__defineSetter__("hotTrack", function(v){try{
  2181. 				this._hotTrack = cBool(v);
  2182. 				this.node.className=this.node.className[((this._hotTrack)?"add":"remove")+"Word"]("hotTrack");
  2183. 			}catch(e){log("jsForms.tabControl.hotTrack: "+e);}});
  2184.  
  2185. 			//use a single tabPage for all tabs
  2186. 			this.__defineGetter__("shareSinglePage", function(){
  2187. 				return this._shareSinglePage;
  2188. 			});
  2189. 			this.__defineSetter__("shareSinglePage", function(v){try{
  2190. 				this._shareSinglePage = cBool(v);
  2191. 			}catch(e){log("jsForms.tabControl.shareSinglePage: "+e);}});
  2192.  
  2193. 			//select tab by index or by passed object
  2194. 			this.selectTab=function(v){try{
  2195. 				var lastSelected=this._selectedTab;
  2196. 				switch(typeof v){
  2197. 					case "object":
  2198. 						this._selectedTab=v;
  2199. 						break;
  2200. 					case "number":
  2201. 						this._selectedTab=this.tabs[v];
  2202. 						break;
  2203. 				}
  2204. 				//move the selected tab forward, unselected backward
  2205. 				if (lastSelected) {
  2206. 					if (!this._shareSinglePage) lastSelected.hide();
  2207. 					with (lastSelected.buttonNode) {
  2208. 						className=className.removeWord("selected");
  2209. 					}
  2210. 				}
  2211. 				if (!this._shareSinglePage) this._selectedTab.show();
  2212. 				with (this._selectedTab.buttonNode) {
  2213. 					className=className.addWord("selected");
  2214. 				}
  2215. 				
  2216. 				//do onSelect event
  2217. 				if (this._selectedTab.onSelect) {
  2218. 					this._selectedTab.onSelect(this._selectedTab);
  2219. 				}
  2220. 			}catch(e){log("jsForms.tabControl.selectTab: "+e);}};
  2221. 			
  2222. 			//capture the sizes we need for this tabcontrol
  2223. 			//and redraw its borders
  2224. 			this.redraw=function(){try{
  2225. 				//reset self first
  2226. 				this.dock=this._dock;
  2227. 			
  2228. 				//pages fit this minus the tabs bar
  2229. 				this.pagesNode.style.height=
  2230. 					(this._alignment=="Top" || this._alignment=="Bottom")?(
  2231. 						this.innerHeight
  2232. 						- elementOuterHeight(this.tabsNode)
  2233. 						- (
  2234. 							elementOuterHeight(this.pagesNode)
  2235. 							- elementInnerHeight(this.pagesNode)
  2236. 						) + "px"
  2237. 					):(
  2238. 						this.innerHeight
  2239. 						-(
  2240. 							elementOuterHeight(this.pagesNode)
  2241. 							- elementInnerHeight(this.pagesNode)							
  2242. 						) + "px"
  2243. 					);
  2244. 				this.pagesNode.style.width=
  2245. 					(this._alignment=="Left" || this._alignment=="Right")?(
  2246. 						this.innerWidth
  2247. 						- elementOuterWidth(this.tabsNode)
  2248. 						- (
  2249. 							elementOuterWidth(this.pagesNode)
  2250. 							- elementInnerWidth(this.pagesNode)
  2251. 						) + "px"
  2252. 					):("");//automatic
  2253. 					
  2254. 				//order the tabs in relation to the pages based on alignment
  2255. 				if (this._alignment=="Bottom" || this._alignment=="Right"){
  2256. 					this.node.insertBefore(this.pagesNode,this.tabsNode);
  2257. 				} else {
  2258. 					this.node.insertBefore(this.tabsNode,this.pagesNode);
  2259. 				}
  2260. 			}catch(e){log("jsForms.tabControl.redraw: "+e);}};
  2261. 			
  2262. 			//addTab using tab construction params
  2263. 			this.addTab=function(params){try{
  2264. 				params.parent=this;
  2265. 				var tab;
  2266. 				this.tabs.push(tab=new jsForms.tabPage(params));
  2267. 				return tab;
  2268. 			}catch(e){log("jsForms.tabControl.addTab: "+e);}};
  2269.  
  2270. 			//removeTab using tab object reference
  2271. 			this.removeTab=function(tab){try{
  2272. 				this.tabs.removeByValue(tab);
  2273. 				remove(tab.node);
  2274. 			}catch(e){log("jsForms.tabControl.removeTab: "+e);}};
  2275. 						
  2276. 			//create tab button container
  2277. 			this.node.appendChild(
  2278. 				this.tabsNode=createElement("div",{
  2279. 					className:"tabs",
  2280. 					style:(
  2281. 						((!this._multiLine)?"overflow: hidden;":"")+
  2282. 						//(!this._multiLine)?"height:24px;":""+
  2283. 						//"width:"+(parseInt(this.size.width)-5)+"px;"+
  2284. 						""//leave here
  2285. 					),
  2286. 				})
  2287. 			);
  2288. 			
  2289. 			//append tab page container
  2290. 			this.node.appendChild(
  2291. 				this.pagesNode=createElement("div",{
  2292. 					className:"pages",
  2293. 					style:(
  2294. 						((this._autoFit)?"display:block;":"")+
  2295. 						//(!this._multiLine && this.size.height)?"height:"+(parseInt(this.size.height)-32)+"px;":""+
  2296. 						""//leave here
  2297. 					),
  2298. 				})
  2299. 			);
  2300. 			
  2301. 			//append a shared tabPage if required
  2302. 			this._shareSinglePage=params.shareSinglePage||false;
  2303. 			if (this._shareSinglePage){
  2304. 				var content=params.sharedContent;
  2305. 				delete params.sharedContent;
  2306. 				if (content) {
  2307. 					if (!isArray(content)) content=[content];
  2308. 				}
  2309. 				this.pagesNode.appendChild(
  2310. 					this.sharedPageNode=createElement("div",{},content)
  2311. 				);
  2312. 			}
  2313. 			
  2314. 			//init the tabs
  2315. 			if (isArrayAndNotEmpty(params.tabs)) {
  2316. 				for (var i=0,tab;(tab=params.tabs[i]);i++) {
  2317. 					this.addTab(tab);
  2318. 				}
  2319. 				//select an initial tab if none already selected
  2320. 				var autoTab=!(params.preventAutoSelectTab||false);
  2321. 				if (autoTab && !this._selectedTab) this.selectTab(0);
  2322. 			}
  2323. 			delete params.tabs;
  2324. 			
  2325. 			//init the rest
  2326. 			for (var p in params) this[p]=params[p];
  2327. 			
  2328. 			//draw
  2329. 			this.alignment=this._alignment; //and it redraws here
  2330. 			
  2331. 			//return it
  2332. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2333. 			return self;
  2334. 		}catch(e){log("jsForms.tabControl.init: "+e);}},
  2335. 		
  2336. 		//coolBar version of tabcontrol
  2337. 		coolBar:function(params){try{
  2338. 			var self=this;
  2339. 			params=params||{};
  2340. 			params.hotTrack=true;
  2341. 			params.subStyle="coolBar";
  2342. 			
  2343. 			//attach basic elements
  2344. 			//this is basically the exact same thing as a tabcontrol
  2345. 			self=extend(self,new jsForms.tabControl(params) );
  2346. 						
  2347. 			//return it
  2348. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2349. 			return self;
  2350. 		}catch(e){log("jsForms.coolBar.init: "+e);}},
  2351.  
  2352. 		//treeview inner controls
  2353. 		treeNode:function(params){try{
  2354. 			var self=this;
  2355. 			params=params||{};
  2356. 			
  2357. 			//attach basic elements
  2358. 			self=extend(self,new jsForms.visualElement() );
  2359.  
  2360. 			//defaults
  2361. 			this._text="";
  2362. 			this._checked=false;
  2363. 			this._image="";
  2364. 			this._selected=false;
  2365. 			this.TreeView=null;
  2366. 			
  2367. 			//fullPath
  2368. 			//getNodeCount //full count of child tree nodes
  2369. 			//level //depth in the tree
  2370. 			//remove
  2371. 			//isEditing
  2372. 			//toggle (expanded/collapsed)
  2373.  
  2374. 			//edit label
  2375. 			this.beginEdit=function(){
  2376. 			};
  2377. 			this.endEdit=function(){
  2378. 			};
  2379. 			
  2380. 			//expand/collapse (with children)
  2381. 			this.expand=function(ignoreChildren){
  2382. 			};
  2383. 			this.collapse=function(ignoreChildren){
  2384. 			};
  2385. 			
  2386. 			//copy
  2387. 			this.clone=function(){
  2388. 			};
  2389. 			
  2390. 			//open parent nodes and scroll into view
  2391. 			this.ensureVisible=function(){
  2392. 			};
  2393. 			
  2394. 			//init
  2395. 			for (var p in params) this[p]=params[p];
  2396. 			
  2397. 			//return it
  2398. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2399. 			return self;
  2400. 		}catch(e){log("jsForms.treeNode.init: "+e);}},
  2401.  
  2402. 		//treeview uppermost control
  2403. 		treeView:function(params){try{
  2404. 			var self=this;
  2405. 			params=params||{};
  2406. 			
  2407. 			//attach basic elements
  2408. 			self=extend(self, new jsForms.visualElement() );
  2409.  
  2410. 			//defaults
  2411. 			this._checkBoxes=false; //show checkboxes at nodes
  2412. 			this._fullRowSelect=false; //highlight the entire child
  2413. 			this._hotTracking=true;
  2414. 			this._indent="28px";
  2415. 			this._labelEdit=false; //allow edit of labels on node
  2416. 			this._nodes=[];
  2417. 			this._pathSeparator="\\";
  2418. 			this._scrollable=true;
  2419. 			this._showLines=false; //show node lines
  2420. 			this._showPlusMinus=true;
  2421. 			this._showRootLines=true;
  2422. 			this._sortBy="value";
  2423. 			this._sortOrder="asc";
  2424. 			
  2425. 			//get the dropdown sub object
  2426. 			this.__defineGetter__("hasChildren", function(){
  2427. 				return (this._nodes.length>0);
  2428. 			});
  2429. 						
  2430. 			//add remove nodes
  2431. 			this.addRoot=function(node){
  2432. 				//draw it
  2433. 				
  2434. 				//add it
  2435. 				this._nodes.push(node);
  2436. 			};
  2437. 			
  2438. 			//expand/collapse nodes
  2439. 			this.collapseAll=function(){
  2440. 				for (var i=0,child;(child=this._nodes[i]);i++) child.collapseAll();
  2441. 			};
  2442. 			this.expandAll=function(){
  2443. 				for (var i=0,child;(child=this._nodes[i]);i++) child.expandAll();
  2444. 			};
  2445. 			
  2446. 			//sort nodes
  2447. 			this.sort=function(){
  2448. 			};
  2449. 			
  2450. 			//init
  2451. 			for (var p in params) this[p]=params[p];
  2452. 			
  2453. 			//return it
  2454. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2455. 			return self;
  2456. 		}catch(e){log("jsForms.treeView.init: "+e);}},
  2457.  
  2458. 		
  2459. 	};
  2460. 	
  2461. 	/*to do list
  2462. 		dropDown: simplified comboBox with only one item selectable
  2463. 		checkedListBox: uses listBox and assumes checks based on bound data or simple input		
  2464. 		checkedDropDown: uses comboBox and assumes checks
  2465. 		bindToData function
  2466. 		checkbox: check-image-text ordering/layout
  2467. 		checkbox: check hidden
  2468. 	*/
  2469. 	
  2470. 	//JSON-ready testing page
  2471. 	if (window.location.href.match(/^(http:\/\/www\.facebook\.com\/test)/) ||
  2472. 		window.location.href.match(/^(file:\/\/\/C:\/Users\/Charlie\/Desktop)/) ) {
  2473. 	
  2474. 		var textBox = new jsForms.textBox({
  2475. 			text:"hello world",
  2476. 			backColor:"window",
  2477. 			foreColor:"windowtext",
  2478. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2479. 			//borderStyle:"Fixed3D",
  2480. 			borderRadius:{topLeft:"5px", bottomRight:"5px"},
  2481. 			onChange:function(o){
  2482. 				confirm(o.text);
  2483. 			},
  2484. 		});
  2485. 		document.documentElement.appendChild(textBox.node,document.documentElement.childNodes[0]);
  2486. 		
  2487. 		var spinBox = new jsForms.spinBox({
  2488. 			text:"3",
  2489. 			backColor:"window",
  2490. 			foreColor:"windowtext",
  2491. 			minimum:0,
  2492. 			maximum:10,
  2493. 			rollOver:true,
  2494. 			increment:1,
  2495. 		});
  2496. 		document.documentElement.appendChild(spinBox.node,document.documentElement.childNodes[0]);
  2497.  
  2498. 		var checkBox = new jsForms.checkBox({
  2499. 			text:"hello world",
  2500. 			value:"1",
  2501. 			checked:true,
  2502. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2503. 			onChange:function(o){
  2504. 				confirm(o.checked);
  2505. 			},
  2506. 		});
  2507. 		document.documentElement.appendChild(checkBox.node,document.documentElement.childNodes[0]);
  2508. 		
  2509. 		var listBox = new jsForms.listBox({
  2510. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2511. 			onChange:function(o){
  2512. 				//confirm(o.value);
  2513. 			},
  2514. 			items:[
  2515. 				new jsForms.checkBox({text:"hello world"}),
  2516. 				new jsForms.checkBox({text:"hello moon"}),
  2517. 				new jsForms.checkBox({text:"goodnight moon"}),
  2518. 			],
  2519. 			borderStyle:"Fixed3D",
  2520. 			firstItemSelectsAll:true,
  2521. 			explicitClose:true,
  2522. 		});
  2523. 		document.documentElement.appendChild(listBox.node,document.documentElement.childNodes[0]);
  2524. 		
  2525. 		var postParts = {
  2526. 			//derived from post.testData
  2527. 			//this stuff is created in the main.which call
  2528. 			//so if that is not called yet, each will be undefined
  2529. 			"title":"The title of a post contains the bold text, usually including the poster's name, at the top of the post.",
  2530. 			"msg":"The msg of a post is the part the poster added as a comment.",
  2531. 			"caption":"The caption of a post is one of two lines just below the title.",
  2532. 			"desc":"The desc of a post is one of two lines just below the title.",
  2533. 			"link":"The link of a post is just the ORIGINAL link text, not the url.",
  2534. 			"url":"The url of a post is the address to which the post redirects the user when clicked.",
  2535. 			"img":"The img of a post is the url of the icon that displays with the post.",
  2536. 			"fromName":"The fromName is the name of the poster.",
  2537. 			"fromID":"The fromID is the ID of the poster.",
  2538. 			"targetName":"The targetName is a list of targets the poster intended the post to display to.",
  2539. 			"targetID":"The targetID is a list of targets' IDs that the poster intended the post to display to.",
  2540. 			"canvas":"The canvas of a post is location of the game code.",
  2541. 			"likeName":"The likeName is a list of names of users who liked this post.",
  2542. 			"likeID":"The likeID is a list of IDs of users who liked the post.",
  2543. 			"comments":"The comments is a list of all comments made to the post, excluding the initial msg.",
  2544. 			"commentorName":"The commentorName is a list of names of all commentors.",
  2545. 			"commentorID":"The commentorID is a list of IDs of all commentors.",
  2546. 			"body":"The body of a post is a compilation of the title, caption, and desc.",
  2547. 			"either":"The either of a post is the compilation of the link and body.",
  2548. 			"html":"The html of a post is the compilation of ALL visible FB attributes.",
  2549. 			
  2550. 			//right from the post object
  2551. 			"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.",
  2552. 			"idText":"The identified link text of a post.",
  2553. 			"date":"The date of a post is its creation time on FB. This time is read as a unix date.", //read as unix time
  2554. 			"status":"The status of a post is the return code created by the sidekick.",
  2555. 			"priority":"The priority of a post is set by the prioritizer.",
  2556. 			"appID":"The appID of the game for which this post belongs.",
  2557. 			"appName":"The appName of the game for which this post belongs, as reported by the FB database.",
  2558. 			"isStale":"Reports if a post is older than the user-set older limit.",
  2559. 			"isScam":"Reports if a post is suspected of being a scam. Usually if the canvas and appName do not match.",
  2560. 			"isCollect":"Reports if the post is set to be collected.",
  2561. 			"isExcluded":"Reports if the post has been set as excluded.",
  2562. 			"isFailed":"Reports if the post is set as having already failed.",
  2563. 			"isAccepted":"Reports if the post is set as having already been successfully collected.",
  2564. 			"isPaused":"Reports if the post's bonus type or app has been paused by the prioritizer. Paused objects to not process for collection.",
  2565. 			"isPinned":"Reports if the post is marked as being pinned.",
  2566. 			"isLiked":"Reports if the post has been identified as already being liked by the current user.",
  2567. 			"isMyPost":"Reports if the post belongs to the current user.",
  2568. 			"isUndefined":"Reports if the post does not match any id given by the sidekick.",
  2569. 			"isWishlist":"Reports if the post is deemed a whichlist request.",
  2570. 			"isTimeout":"Reports if the post has been marked as a timed out collection try.",
  2571. 			"isW2W":"Reports if the post is a Wall-To-Wall post, meaning that it was posted to a specific user's wall.",
  2572. 			"isForMe":"Reports if the W2W post targets the current user."
  2573. 		};
  2574. 		var search=["body"];
  2575.  
  2576. 		var comboBox = new jsForms.comboBox({
  2577. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2578. 			onChange:function(o){
  2579. 				GM_log("combo changed");
  2580. 			},
  2581. 			items:(function(){
  2582. 				var ret=[];
  2583. 				for (var i in postParts){
  2584. 					ret.push(new jsForms.checkBox({
  2585. 						text:i,
  2586. 						value:i,
  2587. 						toolTipText:postParts[i],
  2588. 						checked:(search.inArray(i)),
  2589. 						size:{width:"200%"},
  2590. 					}));
  2591. 				}
  2592. 				return ret;
  2593. 			})(),
  2594. 			borderStyle:"Fixed3D",
  2595. 			borderRadius:{topLeft:"1px", bottomRight:"1px",topRight:"1px",bottomLeft:"1px"},
  2596. 			explicitClose:true,
  2597. 			highlightSelected:true,
  2598. 			dropDownSize:{height:"200px"},
  2599. 			sorted:true,
  2600. 		});
  2601. 		document.documentElement.appendChild(comboBox.node,document.documentElement.childNodes[0]);
  2602.  
  2603. 		//just a divider
  2604. 		document.documentElement.appendChild(createElement("div"));
  2605. 		var myConsole={};
  2606. 		var tabControl = new jsForms.tabControl({
  2607. 			//font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2608. 			tabs:[
  2609. 				{
  2610. 					text:"Tabs",
  2611. 					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/selLast.png",
  2612. 					//selected:true,
  2613. 					content:createElement("div",{},[
  2614. 						createElement("label",{textContent:"Alignment: "}),
  2615. 						createElement("select",{
  2616. 							onchange:function(){
  2617. 								tabControl.alignment=this.value;
  2618. 							},
  2619. 						},optionsFromArray([
  2620. 							"Top","Right","Bottom","Left"
  2621. 						])),
  2622. 						createElement("br"),
  2623. 						createElement("label",{textContent:"hotTrack: "}),
  2624. 						createElement("select",{
  2625. 							onchange:function(){
  2626. 								tabControl.hotTrack=this.value;
  2627. 							},
  2628. 						},optionsFromArray([
  2629. 							"false","true"
  2630. 						])),
  2631. 						createElement("br"),
  2632. 						createElement("label",{textContent:"subStyle: "}),
  2633. 						createElement("select",{
  2634. 							onchange:function(){
  2635. 								tabControl.subStyle=this.value;
  2636. 							},
  2637. 						},optionsFromArray([
  2638. 							"normal","coolBar"
  2639. 						])),
  2640. 					])
  2641. 				},
  2642. 				{
  2643. 					text:"red phone",
  2644. 					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/red%20phone%20128.png",
  2645. 				},
  2646. 				{
  2647. 					text:"firefox",
  2648. 					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/firefox_icon.png",
  2649. 				},
  2650. 			],
  2651. 			dock:"fill",
  2652. 		});
  2653. 		
  2654. 		(myConsole.phoneTab=tabControl.tabs[1]).node.appendChild(
  2655. 			new jsForms.textBox().node
  2656. 		);
  2657. 		(myConsole.ffTab=tabControl.tabs[2]).node.textContent="FireFox is the best!";
  2658. 		
  2659. 		document.documentElement.appendChild(
  2660. 			createElement("div",{
  2661. 				style:(
  2662. 					"height:500px;"+
  2663. 					""//leave here
  2664. 				),
  2665. 			},[
  2666. 				tabControl.node
  2667. 			])
  2668. 		);
  2669. 		tabControl.redraw();
  2670.  
  2671. 		var colorPicker = new jsForms.colorPicker({
  2672. 			borderStyle:"none",
  2673. 			dropDownSize:{height:"200px"},
  2674. 			sorted:true,
  2675. 			text:"",
  2676. 		});
  2677. 		document.documentElement.appendChild(colorPicker.node,document.documentElement.childNodes[0]);
  2678. 		
  2679.  
  2680. 	};
  2681. 	
  2682. 	//add own css
  2683. 	try{addGlobalStyle(jsForms.globalStyle(),"jsForms");}catch(e){log("jsForms.addGlobalStyle: "+e);};
  2684. 	
  2685. })();