/*
 * Saffire connector for Ext 1.1
 * Copyright (c) 2006 FirstFocus BV
 *
 * This script converts Saffire scaffolds into Ext 1.1 controls.
 *
 */

/************************************************
 * The Page object
 ************************************************/

Page = { 
	Navigate: function(url) {
		window.location.href = url;
	},
	DoPostBack: function(eventTarget, eventCommand, eventArgument) {
		var f = document.forms[0];
		f.__EVENTTARGET.value = eventTarget.split("$").join(":");
		f.__EVENTARGUMENT.value = eventCommand + (eventArgument ? (":" + eventArgument) : "");
		f.submit();
	},
	Refresh: function() {
		var url = document.location.href;
		var hashpos = url.indexOf("#");
		if (hashpos > 0)
			url = url.substring(0, pos-1);
		if (url.indexOf("rnd=") >= 0) {
			var pos = url.indexOf("rnd=");
			url = url.substring(0, pos) + "rnd=" + Math.random();
		} else
			if (url.indexOf("?") >= 0)
				url += "&rnd=" + Math.random();
			else
				url += "?rnd=" + Math.random();
		document.location.href = url;
	}

};

///////////////////////////////////////////////////////////////////////////
// BuildMenu function
_Saffire_BuildMenu = function(elm) {
	var menu = new Ext.menu.Menu({
	});
	Ext.each(Ext.query(">li", elm), function(elm, index, all) {
		var item = null;
		var imgs = Ext.query("img", elm);
		var spans = Ext.query("span", elm);
		if (elm.className.indexOf("s-MenuSplitter") >= 0)
			item = "-";
		else if (elm.className.indexOf("s-MenuItem") >= 0) {
			var handlerJS = elm.getAttribute("handler");
			item = new Ext.menu.Item({
				icon: imgs.length > 0 ? imgs[0].getAttribute("src") : "",
				text: spans.length > 0 ? spans[0].innerHTML : "",
				disabled: elm.getAttribute("enabled") == "false",
				handler: function() {eval(handlerJS);}
			})	
		}
		else if (elm.className.indexOf("s-Menu") >= 0)
			item = new Ext.menu.Item({
				icon: imgs.length > 0 ? imgs[0].getAttribute("src") : "",
				text: spans.length > 0 ? spans[0].innerHTML : "",
				menu: _Saffire_BuildMenu(Ext.query(">ul", elm)[0]),
				disabled: elm.getAttribute("enabled") == "false"
			});
		menu.add(item);
	});
    Page[elm.id] = menu;
	return menu;
}

///////////////////////////////////////////////////////////////////////////
// FlashMovie function
_Saffire_FlashMovie = function(a) {
	var $a = a;
	var self = {
		
		// the following functions are copied from an Adobe sample
		AddExtension : function(src, ext)
		{
		  if (src.indexOf('?') != -1)
		    return src.replace(/\?/, ext+'?'); 
		  else
		    return src + ext;
		},
		GenerateObject : function(objAttrs, params, embedAttrs) 
		{ 
		  var str = '<object ';
		  for (var i in objAttrs)
		  	if (typeof(objAttrs[i]) != "function")
			    str += i + '="' + objAttrs[i] + '" ';
		  str += '>';
		  for (var i in params)
		  	if (typeof(params[i]) != "function")
			    str += '<param name="' + i + '" value="' + params[i] + '" /> ';
		  str += '<embed ';
		  for (var i in embedAttrs)
		  	if (typeof(embedAttrs[i]) != "function")
			    str += i + '="' + embedAttrs[i] + '" ';
		  str += ' ></embed></object>';
		  document.write(str);
		},
		InsertFlash : function(){
		  var ret = 
		    this.GetArgs
		    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
		     , "application/x-shockwave-flash"
		    );
		  this.GenerateObject(ret.objAttrs, ret.params, ret.embedAttrs);
		},
		InsertShockWave : function(){
		  var ret = 
		    this.GetArgs
		    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
		     , null
		    );
		  this.GenerateObject(ret.objAttrs, ret.params, ret.embedAttrs);
		},
		GetArgs : function(args, ext, srcParamName, classid, mimeType){
		  var ret = new Object();
		  ret.embedAttrs = new Object();
		  ret.params = new Object();
		  ret.objAttrs = new Object();
		  for (var i=0; i < args.length; i=i+2){
		    var currArg = args[i].toLowerCase();    
		
		    switch (currArg){	
		      case "classid":
		        break;
		      case "pluginspage":
		        ret.embedAttrs[args[i]] = args[i+1];
		        break;
		      case "src":
		      case "movie":	
		        args[i+1] = this.AddExtension(args[i+1], ext);
		        ret.embedAttrs["src"] = args[i+1];
		        ret.params[srcParamName] = args[i+1];
		        break;
		      case "onafterupdate":
		      case "onbeforeupdate":
		      case "onblur":
		      case "oncellchange":
		      case "onclick":
		      case "ondblClick":
		      case "ondrag":
		      case "ondragend":
		      case "ondragenter":
		      case "ondragleave":
		      case "ondragover":
		      case "ondrop":
		      case "onfinish":
		      case "onfocus":
		      case "onhelp":
		      case "onmousedown":
		      case "onmouseup":
		      case "onmouseover":
		      case "onmousemove":
		      case "onmouseout":
		      case "onkeypress":
		      case "onkeydown":
		      case "onkeyup":
		      case "onload":
		      case "onlosecapture":
		      case "onpropertychange":
		      case "onreadystatechange":
		      case "onrowsdelete":
		      case "onrowenter":
		      case "onrowexit":
		      case "onrowsinserted":
		      case "onstart":
		      case "onscroll":
		      case "onbeforeeditfocus":
		      case "onactivate":
		      case "onbeforedeactivate":
		      case "ondeactivate":
		      case "type":
		      case "codebase":
		        ret.objAttrs[args[i]] = args[i+1];
		        break;
		      case "width":
		      case "height":
		      case "align":
		      case "vspace": 
		      case "hspace":
		      case "class":
		      case "title":
		      case "accesskey":
		      case "name":
		      case "id":
		      case "tabindex":
		        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
		        break;
		      default:
		        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
		    }
		  }
		  ret.objAttrs["classid"] = classid;
		  if (mimeType) ret.embedAttrs["type"] = mimeType;
		  return ret;
		}
	};
	return self;
}

// ***********************************************************************************
// * Code for converting control scaffolds
// ***********************************************************************************

Ext.onReady(function() {

	///////////////////////////////////////////////////////////////////////////
	// InfoPanel
 	Ext.each(Ext.query("div.s-InfoPanel"), function(item, index, all) {
		var panel = new Ext.ux.InfoPanel({
			text: item.innerHTML,
			status: item.getAttribute("status"),
			cls: item.id
		});
		panel.applyTo(item);
	    Page[item.id] = panel;
	});

	///////////////////////////////////////////////////////////////////////////
	// Variables
 	Ext.each(Ext.query("var.s-Variable"), function(item, index, all) {
	    Page[item.id] = item.innerHTML;
 	});

	///////////////////////////////////////////////////////////////////////////
	// Button
 	Ext.each(Ext.query("input.Button[@useExt='true']"), function(item, index, all) {
 		var el = Ext.DomHelper.insertAfter(item, { tag: "div" });
 		var btn = new Ext.Button(el, {
 			text: item.getAttribute("value")
 		});
 		Ext.get(item).setDisplayed(false);
	    Page[item.id] = btn;
 	});

	///////////////////////////////////////////////////////////////////////////
	// DropDownList
 	Ext.each(Ext.query("select.DropDownList[@useExt='true']"), function(item, index, all) {
 		var combo = new Ext.form.ComboBox({
 			typeAhead: true,
 			triggerAction: 'all',
 			transform: item.id,
			fieldClass: "x-form-field " + item.getAttribute("class") + " " + item.id,
 			width: Ext.get(item).getWidth(),
 			forceSelection: true
 		});
	    Page[item.id] = combo;
 	});

	///////////////////////////////////////////////////////////////////////////
	// TextBox
 	Ext.each(Ext.query("input.s-TextBox[@useExt='true']"), function(item, index, all) {
 		var text = new Ext.form.TextField({
 			name: item.name,
			inputType: item.type,
			fieldClass: "x-form-field " + item.id,
			maskRe: item.getAttribute("inputMask") ? new RegExp(item.getAttribute("inputMask")) : null,
 			width: Ext.get(item).getWidth()
 		});
 		text.applyTo(item.id);
	    Page[item.id] = text;
 	});
 	Ext.each(Ext.query("textarea.s-TextBox[@useExt='true']"), function(item, index, all) {
 		var text = new Ext.form.TextArea({
 			name: item.name,
			fieldClass: "x-form-field " + item.id,
			maskRe: item.getAttribute("inputMask") ? new RegExp(item.getAttribute("inputMask")) : null,
 			width: Ext.get(item).getWidth()
 		});
 		text.applyTo(item.id);
	    Page[item.id] = text;
 	});

	///////////////////////////////////////////////////////////////////////////
	// SearchTextBox
 	Ext.each(Ext.query("input.s-SearchTextBox"), function(item, index, all) {
 		// enter toets afhandeling moet nog
   });

	///////////////////////////////////////////////////////////////////////////
	// DateTextBox
 	Ext.each(Ext.query("input.s-DateBox[@useExt='true']"), function(item, index, all) {
 		var text = new Ext.form.DateField({
 			name: item.name,
			fieldClass: "x-form-field " + item.getAttribute("class") + " " + item.id,
 			width: Ext.get(item).getWidth()
 		});
 		text.applyTo(item.id);
	    Page[item.id] = text;
 	});

	///////////////////////////////////////////////////////////////////////////
	// DataStore
 	Ext.each(Ext.query("ul.s-DataStore"), function(item, index, all) {
 		var myFields = [];
 		var myRecords = [];
	 	Ext.each(Ext.query(">li", item), function(subitem, index, all) {
	 		myFields.push(subitem.innerHTML);
	 		myRecords.push({
	 			name: subitem.innerHTML,
	 			mapping: subitem.getAttribute("path"),
	 			type: subitem.getAttribute("type")
	 		});
	 	});
	 	
	 	var proxy = item.getAttribute("timeout") == "" ? 
	 		new Ext.data.HttpProxy( { url:item.getAttribute("dataUrl") }) : 
	 		new Ext.data.HttpProxy( new Ext.data.Connection ({ url: item.getAttribute("dataUrl"), timeout: item.getAttribute("timeout") })); 
	 	
	 	var store = new Ext.data.Store({
			proxy: proxy,
			reader: new Ext.data.XmlReader({
				record: item.getAttribute("recordPath"),
				id: item.getAttribute("idPath"),
				totalRecords: item.getAttribute("itemCountPath"),
				fields: myFields
			}, 
			Ext.data.Record.create(myRecords))
		});
	    Page[item.id] = store;
 	});

	///////////////////////////////////////////////////////////////////////////
	// Toolbar
 	Ext.each(Ext.query("ul.s-Toolbar"), function(elm, index, all) {
 		var container = Ext.DomHelper.insertAfter(elm, {tag: "div" });
		var toolbar = new Ext.Toolbar(container);
	 	Ext.each(Ext.query(">li", elm), function(button_elm, index, all) {
			var item = null;
			var spans = Ext.query("span", button_elm);
			var imgs = Ext.query("img", button_elm);
			if (button_elm.className.indexOf("s-ToolbarSplitter") >= 0)
				toolbar.add("-");
			else if (button_elm.className.indexOf("s-ToolbarSpacer") >= 0)
				toolbar.addFill();
			else if (button_elm.className.indexOf("s-ToolbarButton") >= 0)
				toolbar.add(new Ext.Toolbar.Button({
					id: button_elm.id,
					icon: imgs.length > 0 ? imgs[0].getAttribute("src") : "",
					text: spans.length > 0 ? spans[0].innerHTML : "",
					cls: imgs.length > 0 ? (spans.length > 0 ? "x-btn-text-icon" : "x-btn-icon") : "x-btn-text",
					enableToggle: button_elm.getAttribute("toggle") == "true"
				}));
			else if (button_elm.className.indexOf("s-ToolbarMenuButton") >= 0 || button_elm.className.indexOf("s-ToolbarMenu") >= 0)
				toolbar.add(new Ext.Toolbar.MenuButton({
					id: button_elm.id,
					icon: imgs.length > 0 ? imgs[0].getAttribute("src") : "",
					text: spans.length > 0 ? spans[0].innerHTML : "",
					cls: imgs.length > 0 ? (spans.length > 0 ? "x-btn-text-icon" : "x-btn-icon") : "x-btn-text",
					enableToggle: button_elm.getAttribute("toggle") == "true",
					menu: _Saffire_BuildMenu(Ext.query(">ul", button_elm)[0])
				}));
			else if (button_elm.className.indexOf("s-ToolbarSearchBox") >= 0) {
				var combo_elm = Ext.query("select", button_elm)[0];
				var combo = new Ext.ux.form.HCComboBox({
					fieldClass: "x-form-field " + combo_elm.getAttribute("class") + " " + combo_elm.id,
					transform: combo_elm.name,
		 			typeAhead: true,
		 			triggerAction: 'all',
		 			forceSelection: true,
		 			lazyRender: true,
		 			width: Ext.get(combo_elm).getWidth()
		 		});
		 		Page[combo_elm.id] = combo;
		 		toolbar.add(new Ext.Toolbar.TextItem("Search"));
		 		toolbar.add(new Ext.Toolbar.Spacer());
		 		toolbar.add(new Ext.Toolbar.Spacer());
		 		toolbar.add(combo);
	    	}
			else if (button_elm.className.indexOf("s-ToolbarComboBox") >= 0) {
				var combo_elm = Ext.query("select", button_elm)[0];
				var combo = new Ext.form.ComboBox({
					fieldClass: "x-form-field " + combo_elm.getAttribute("class") + " " + combo_elm.id,
					transform: combo_elm.name,
		 			typeAhead: true,
		 			triggerAction: 'all',
		 			forceSelection: true,
		 			lazyRender: true,
		 			width: Ext.get(combo_elm).getWidth()
		 		});
		 		Page[combo_elm.id] = combo;
		 		toolbar.add(combo);
	    	}
		});
		Ext.get(elm).setDisplayed(false);
	    Page[elm.id] = toolbar;
	});

	///////////////////////////////////////////////////////////////////////////
	// Menu
 	Ext.each(Ext.query("ul.s-Menu"), function(item, index, all) {
		_Saffire_BuildMenu(item);
	});

	///////////////////////////////////////////////////////////////////////////
	// MenuBar
 	Ext.each(Ext.query("ul.s-Menubar"), function(elm, index, all) {
		var menuBar = new Ext.ux.Menubar({
			orientation: "horizontal"
		});
	 	Ext.each(Ext.query(">li", elm), function(menuitem, index, all) {
			var item = null;
			var imgs = Ext.query("img" , menuitem);
			var spans = Ext.query("span", menuitem);
			if (menuitem.className.indexOf("s-MenuSplitter") >= 0)
				item = "-";
			else if (menuitem.className.indexOf("s-MenuItem") >= 0)
				item = new Ext.menu.Item({
					icon: imgs.length > 0 ? imgs[0].getAttribute("src") : "",
					text: spans.length > 0 ? spans[0].innerHTML : ""
				});
			else if (menuitem.className.indexOf("s-Menu") >= 0)
				item = new Ext.menu.Item({
					icon: imgs.length > 0 ? imgs[0].getAttribute("src") : "",
					text: spans.length > 0 ? spans[0].innerHTML : "",
					menu: Page[Ext.query("ul", menuitem)[0].id],
					disabled: menuitem.getAttribute("enabled") == "false"
				});
			menuBar.add(item);
		});
		
		// put menu in div container
		var container = Ext.DomHelper.insertAfter(elm, { tag: "div" });
		Ext.get(elm).setDisplayed(false);
		menuBar.show(container, "tl-tl");

	    Page[elm.id] = menuBar;
	});

	///////////////////////////////////////////////////////////////////////////
	// FileUpload
 	Ext.each(Ext.query("div.FileUpload"), function(elm, index, all) {
 		Ext.get(elm).addListener("mouseover", function() {
			Ext.query("img", this.dom)[0].setAttribute("src", "/cache/FirstFocus.Web2/2.0.3163.25503/FirstFocus.Web.Resources.Saffire.images.FileUploadBrowseOver.gif");
 		});
 		Ext.get(elm).addListener("mouseout", function() {
			Ext.query("img", this.dom)[0].setAttribute("src", "/cache/FirstFocus.Web2/2.0.3163.25503/FirstFocus.Web.Resources.Saffire.images.FileUploadBrowse.gif");
 		});
 	});
 	Ext.each(Ext.query("input.FileUploadInput"), function(elm, index, all) {
 		Ext.get(elm).addListener("change", function() {
 			Ext.get(this.dom.parentNode).query("input[@type='text']")[0].value = this.dom.value;
 		});
 	});

	///////////////////////////////////////////////////////////////////////////
	// PrintButton
 	Ext.each(Ext.query("img.s-PrintButton"), function(elm, index, all) {
 		Ext.get(elm).addListener("click", function() {
			var state = this.dom["state"] = (this.dom["state"] ? false : true);
			var title = this.dom.getAttribute("title");
		 	Ext.each(Ext.query("link"), function(link_elm, index, all) {
				if (link_elm.getAttribute("rel").indexOf("style") != -1) {
					if (state)
						link_elm.disabled = link_elm.getAttribute("title") != title;
					else
						link_elm.disabled = link_elm.getAttribute("title") == title;
				}
			});
			if (state)
				window.setTimeout(function() {
					window.print();
				}, 400);
		});
		var t = elm.getAttribute("title");
		Ext.query("link[@title='" + t + "']")[0].disabled = true;
	});
	
	///////////////////////////////////////////////////////////////////////////
	// GridView
	Ext.each(Ext.query("table.s-GridView"), function(elm, index, all) {
		var columns = [];
		Ext.each(Ext.query("th", elm), function(th_elm, index, all) {
			columns.push({
				align: th_elm.getAttribute("align") || null,
				dataIndex: th_elm.getAttribute("field"),
				header: th_elm.innerHTML,
				hidden: th_elm.getAttribute("isVisible") == "false",
				locked: th_elm.getAttribute("isLocked") == "true",
				resizable: !(th_elm.getAttribute("isResizable") == "false"),
				sortable: !(th_elm.getAttribute("isSortable") == "false"),
				width: th_elm.getAttribute("width") || null,
				renderer: th_elm.getAttribute("renderer") ? eval(th_elm.getAttribute("renderer")) : null
			});
		});
		var cmodel = new Ext.grid.ColumnModel(columns);
		var table = Ext.get(elm).insertSibling({ tag: "div", style: "height: 100px" });
		var grid = new Ext.grid.Grid(table, {
			ds: Page[elm.getAttribute("store")],
			cm: cmodel,
			selModel: elm.getAttribute("canSelect") == "false" ? null : new Ext.grid.RowSelectionModel({
				singleSelect: elm.getAttribute("canSelectMultiple") == "false"
			}),
			autoSizeColumns: elm.getAttribute("autoSizeColumns") == "true",
			trackMouseOver: false
		});
		grid.render();
		var tfoots = Ext.query("tfoot", elm);
		if (tfoots.length > 0) {
		    var footer = grid.getView().getFooterPanel(true);
		    var paging = new Ext.PagingToolbar(footer, Page[elm.getAttribute("store")], {
		        pageSize: tfoots[0].getAttribute("pageSize") ? parseInt(tfoots[0].getAttribute("pageSize")) : 50,
		        displayInfo: true,
		        displayMsg: tfoots[0].getAttribute("text") || "Displaying records {0} - {1} of {2}",
		        emptyMsg: tfoots[0].getAttribute("noItemsText") || "No records to display"
		    });
		}
		Ext.get(elm).remove();
		Page[elm.id] = grid;
	});

	///////////////////////////////////////////////////////////////////////////	
	// ListView
	Ext.each(Ext.query("div.s-ListView"), function(elm, index, all) {
		var tpl = unescape(Ext.query("li", elm)[0].innerHTML);
		tpl = tpl.replace(/^\s+/g, "").replace(/\s+$/g, "");
		var myView = new Ext.ux.DDView(elm.id, tpl, {
			dragGroup: elm.getAttribute("canDrag") == "true" ? elm.getAttribute("dragGroup") || elm.id + "_dd" : null,
			dropGroup: elm.getAttribute("canDrag") == "true" ? elm.getAttribute("dropGroup") || elm.id + "_dd" : null,
			copy: false,
			allowCopy: false,
			singleSelect: elm.getAttribute("selectionMode") == "singleselect",
			multiSelect: elm.getAttribute("selectionMode") == "multiselect",
			store: Page[elm.getAttribute("store")]
      	});
      	Page[elm.id] = myView;
    });

	///////////////////////////////////////////////////////////////////////////
	// TreeView
	Ext.each(Ext.query("ul.s-TreeView"), function(elm, index, all) {
		var tree = new Ext.tree.TreePanel(elm.id, {
			animate: true,
			enableDD: elm.getAttribute("canDrag") == "true",
			ddGroup: elm.getAttribute("canDrag") == "true" ? elm.getAttribute("dragGroup") || elm.id + "_dd" : null,
			containerScroll: true,
			loader: new Ext.tree.TreeLoader({
				dataUrl: elm.getAttribute("dataUrl")
			}),
			selModel: elm.getAttribute("selectionMode") == "none" ? null :
				(elm.getAttribute("selectionMode") == "multiselect" ? new Ext.tree.MultiSelectionModel() : new Ext.tree.DefaultSelectionModel())
		});
		tree.setRootNode(new Ext.tree.AsyncTreeNode({
			id: elm.getAttribute("rootID"),
			text: elm.getAttribute("rootText")
		}));
		tree.render();
		if (elm.getAttribute("canEdit") == "true") {
			var editor = new Ext.tree.TreeEditor(tree, {
				cancelOnEsc: true,
				completeOnEnter: true,
				ignoreNoChange: true,
	            selectOnFocus: true
			});
	      	Page[elm.id + "Editor"] = editor;
		}
      	Page[elm.id] = tree;
    });

	///////////////////////////////////////////////////////////////////////////
	// Dialog
	Ext.each(Ext.query("div.s-Dialog"), function(elm, index, all) {
		// Ext.Element.get(elm).fitToParent(false, document.body);
		var d_regions = [];
		Ext.each(Ext.query("div.s-ContentPanel", elm), function(panel_elm, index, all) {
			d_regions[panel_elm.getAttribute("region")] = {
				initialSize: panel_elm.getAttribute("size") || 50,
				minSize: panel_elm.getAttribute("minSize") || 0,
				maxSize: panel_elm.getAttribute("maxSize") || 0,
				split: panel_elm.getAttribute("showSplitter") || false,
				titlebar: panel_elm.getAttribute("showTitleBar") || false,
				collapsible: panel_elm.getAttribute("canCollapse") || false
			};
		});
		// DEBUG: this.style.border = "solid 5px red";
		var dialog = new Ext.LayoutDialog(elm, {
			animateTarget: false,
			hideOnLayout: false,
			width:  parseInt(elm.getAttribute("width") || "300") + 32,
			height:  parseInt(elm.getAttribute("height") || "100") + 18,
			title: elm.getAttribute("title"),
	        modal: true,
	        closable: false,
	        collapsible: false,
	        proxyDrag: true,
	        shadow: true,
		    north: d_regions["north"],
		    west: d_regions["west"],
		    east: d_regions["east"],
		    south: d_regions["south"],
		    center: d_regions["center"]
		});
		var layout = dialog.getLayout();
		layout.beginUpdate();
		Ext.each(Ext.query("div.s-ContentPanel", elm), function(panel_elm, index, all) {
			var panel = new Ext.ContentPanel(panel_elm, {
				fitToFrame: true,
				resizeEl: panel_elm.getAttribute("resizeEl"),
				title: panel_elm.getAttribute("panelTitle") || "",
				url: panel_elm.getAttribute("url")
			});
			layout.add(panel_elm.getAttribute("region"), panel);
			Ext.get(panel_elm).setVisible(true);
		});
		layout.endUpdate();
	    Page[elm.id] = dialog;
	});

	///////////////////////////////////////////////////////////////////////////
	// FormPanel
	Ext.each(Ext.query("ul.s-FormPanel"), function(elm, index, all) {
		var lw = elm.getAttribute("labelWidth");
		var form = new Ext.form.Form({
			method: "POST",
			url: Ext.query("form")[0].getAttribute("action"),
			labelWidth: parseInt(lw),
			buttonAlign: elm.getAttribute("buttonAlign") || "right"
		});
		var dcw = (100 / Ext.query(">li", elm).length - 3) + "%";
		Ext.each(Ext.query(">li", elm), function(col_elm, index, all) {
			var w = col_elm.getAttribute("width") || dcw;
			var lw2 = col_elm.getAttribute("labelWidth") || lw;
			var sl = col_elm.getAttribute("showLabels");
			form.column({
				width: w,
				style: index >= 0 ? "margin-left: 10px" : "",
				labelWidth: parseInt(lw2),
				hideLabels: sl == "false"
			});
			Ext.each(Ext.query(">dl", col_elm), function(dl_elm, index, all) {
				if (dl_elm.getAttribute("text")) {
					var w2 = dl_elm.getAttribute("width") || w;
					var lw3 = dl_elm.getAttribute("labelWidth") || lw2;
					var sl2 = dl_elm.getAttribute("showLabels") || sl;
					form.fieldset({
						width: w2,
						labelWidth: parseInt(lw3),
						legend: dl_elm.getAttribute("text"),
						hideLabels: sl2 == "false"
					});
				}	
				var labels = [];
				Ext.each(Ext.query(">dt", dl_elm), function(dt_elm, index, all) {
					labels.push(dt_elm.innerHTML);
				});
				Ext.each(Ext.query(">dd", dl_elm), function(dd_elm, index, all) {
					var ctr = null;
					var field = Ext.get(dd_elm).down("*");
					if (field) {
						if (field.is("input.s-CheckBox")) {
							ctr = new Ext.form.Checkbox({
								fieldClass: "x-form-field " + field.dom.className + " " + (field.dom.checked ? "s-IECheckedFix " : "") + field.id,
								fieldLabel: labels[index],
								name: field.dom.getAttribute("name"),
								inputValue: "1",
								checked: field.dom.checked,
								disabled: (field.dom.getAttribute("enabled") == "false")
							});
							field.remove();
						} else if (field.is("input.s-RadioButton")) {
							ctr = new Ext.form.Radio({
								fieldClass: "x-form-field " + field.dom.className + " " + field.id,
								fieldLabel: labels[index],
								name: field.dom.name,
								inputValue: field.getValue(),
								checked: field.dom.checked
							});
							field.remove();
						} else if (field.is("input.s-DateBox")) {							
							ctr = new Ext.form.DateField({
								fieldClass: "x-form-field " + field.dom.className + " " + field.id,
								fieldLabel: labels[index],
								el: field.dom,
								name: field.dom.name,
								format: field.dom.getAttribute("format"),
								value: new Date(field.dom.getAttribute("value")).format(field.dom.getAttribute("format")),
								hideTrigger: !(field.dom.getAttribute("hideTrigger") == "false"),
								disabled: (field.dom.getAttribute("enabled") == "false")
							});
						} else if (field.is("input.s-TextBox")) {
							ctr = new Ext.form.TextField({
								fieldClass: "x-form-field " + field.dom.className + " " + field.id,
								fieldLabel: labels[index],
								name: field.dom.name,
								inputType: field.dom.type,
								maskRe: field.dom.getAttribute("inputMask") ? new RegExp(field.dom.getAttribute("inputMask")) : null,
								value: field.getValue(),
								disabled: (field.dom.getAttribute("enabled") == "false")
							});
							field.remove();
						} else if (field.is("textarea.s-TextBox")) {
							ctr = new Ext.form.TextArea({
								fieldClass: "x-form-field " + field.dom.className + " " + field.id,
								fieldLabel: labels[index],
								name: field.dom.getAttribute("name"),
								maskRe: field.dom.getAttribute("inputMask") ? new RegExp(field.dom.getAttribute("inputMask")) : null,
								value: field.dom.innerHTML,
								disabled: (field.dom.getAttribute("enabled") == "false")
							});
							field.remove();
				    	} else if (field.is("select.s-ComboBox")) {
					 		if (field.dom.getAttribute("store"))
								ctr = new Ext.form.ComboBox({
									fieldClass: "x-form-field " + field.dom.className + " " + field.id,
									fieldLabel: labels[index],
									store: Page[field.dom.getAttribute("store")],
									valueField: field.dom.getAttribute("valueField"),
									displayField: field.dom.getAttribute("displayField"),
									emptyText: field.dom.getAttribute("emptyText"),
									editable: !(field.dom.getAttribute("editable") == "false"),
									forceSelection: !(field.dom.getAttribute("forceSelection") == "false"),
									typeAhead: true,
								    mode: 'local',
								    triggerAction: 'all',
								    disabled: (field.dom.getAttribute("enabled") == "false")
				    			});
				    		else
								ctr = new Ext.form.ComboBox({
									fieldClass: "x-form-field " + field.dom.className + " " + field.id,
									fieldLabel: labels[index],
									transform: field.dom.name,
						 			typeAhead: true,
						 			editable: !(field.dom.getAttribute("editable") == "false"),
						 			forceSelection: !(field.dom.getAttribute("forceSelection") == "false"),
						 			selectOnFocus: true,
						 			triggerAction: 'all',
						 			lazyRender: true,
						 			disabled: (field.dom.getAttribute("enabled") == "false")
						 		});					 	
					 	} else if (field.is("select.s-DropDownList")) {
					 			ctr = new Ext.form.ComboBox({
									fieldClass: "x-form-field " + field.dom.className + " " + field.id,
									fieldLabel: labels[index],
									transform: field.dom.name,
						 			typeAhead: true,
						 			triggerAction: 'all',
						 			forceSelection: true,
						 			lazyRender: true
						 		});					 	
						 // legacy code for DropDownList control
						} else if (field.is("select")) {
							ctr = new Ext.form.ComboBox({
								fieldClass: "x-form-field " + field.dom.className + " " + field.id,
								fieldLabel: labels[index],
								transform: field.dom.name,
					 			typeAhead: true,
					 			triggerAction: 'all',
					 			forceSelection: true,
					 			lazyRender: true
					 		});
					 		
					 	} else if (field.is("span")) {
							ctr = new Ext.form.MiscField({
								fieldLabel: labels[index],
								value: field.dom.innerHTML
							});
						}
					}
					if (ctr && field) {
						form.add(ctr);
					    Page[field.id] = ctr;
					}
				});
				if (dl_elm.getAttribute("text"))
					form.end(); // end fieldset
			});
			form.end(); // end column
		});
		Ext.each(Ext.query(Ext.isIE ? "input.Button" : ">input.Button", elm), function(button_elm, index, all) {
	 		var btn = form.addButton({
	 			text: button_elm.value,
				cls: button_elm.className + " " + button_elm.id
	 		});
	 		Ext.get(button_elm).setDisplayed(false);
	 		Page[button_elm.id] = btn;
		 });
		
		// create form in temp div element
		var tmpDiv = Ext.DomHelper.append(document.body, { tag: "div", style: "display:none" });
		form.render(tmpDiv);
		
		// move form into placeholder
		var destDiv = Ext.DomHelper.insertAfter(elm, { tag: "div", cls: "x-form" });
		var fields = Ext.query(".x-form-ct", tmpDiv);
		var buttons = Ext.query(".x-form-btns-ct", tmpDiv);
		if (fields.length > 0)
			Ext.get(destDiv).appendChild(fields[0]);
		if (buttons.length > 0)
			Ext.get(destDiv).appendChild(buttons[0]);
		
		// clean up
		Ext.get(elm).setDisplayed(false);
		Ext.get(tmpDiv).remove();
	    Page[elm.id] = form;
	});

	///////////////////////////////////////////////////////////////////////////
	// TabPanel
	Ext.each(Ext.query("div.s-TabPanel"), function(elm, index, all) {
		var tabPanel = new Ext.TabPanel(elm);
		Ext.each(Ext.query("div.s-Tab", elm), function(tab_elm, index, all) {
			tabPanel.addTab(tab_elm.id, tab_elm.getAttribute("text") || "");
		});
		tabPanel.activate(0);
	    Page[elm.id] = tabPanel;
	    Ext.get(elm).setVisible(true);
	});

	///////////////////////////////////////////////////////////////////////////
	// BorderLayout
	Ext.EventManager.onWindowResize(function(width, height) {
		Ext.each(Ext.query("div.s-BorderLayout"), function(elm, index, all) {
			Ext.Element.get(elm).fitToParent(false, document.body);
		});
	});
	Ext.each(Ext.query("div.s-BorderLayout"), function(elm, index, all) {
		Ext.Element.get(elm).fitToParent(false, document.body);
		var regions = [];
		Ext.each(Ext.query("div.s-ContentPanel", elm), function(panel_elm, index, all) {
			regions[panel_elm.getAttribute("region")] = {
				initialSize: panel_elm.getAttribute("size") || 50,
				minSize: panel_elm.getAttribute("minSize") || 0,
				maxSize: panel_elm.getAttribute("maxSize") || 0,
				split: panel_elm.getAttribute("showSplitter") || false,
				titlebar: panel_elm.getAttribute("showTitleBar") || false,
				collapsible: panel_elm.getAttribute("canCollapse") || false
			};
		});
		var layout = new Ext.BorderLayout(elm, {
			hideOnLayout: false,
		    north: regions["north"],
		    west: regions["west"],
		    east: regions["east"],
		    south: regions["south"],
		    center: regions["center"]
		});
		layout.beginUpdate();
		Ext.each(Ext.query("div.s-ContentPanel", elm), function(panel_elm, index, all) {
			var panel = new Ext.ContentPanel(panel_elm, {
				fitToFrame: true,
				resizeEl: panel_elm.getAttribute("resizeEl"),
				title: panel_elm.getAttribute("panelTitle") || "",
				url: panel_elm.getAttribute("url")
			});
			layout.add(panel_elm.getAttribute("region"), panel);
			Ext.get(panel_elm).setVisible(true);
		});
		layout.endUpdate();
	    Page[elm.id] = layout;
	    Ext.get(elm).setVisible(true);
	});
	
	///////////////////////////////////////////////////////////////////////////
	// HtmlEditor
	// MDF 280907: we must create any HtmlEditors last to prevent a NS_ component error in Firefox!
	Ext.each(Ext.query("textarea.s-HtmlEditor"), function(elm, index, all) {
 		var editor = new Ext.ux.HtmlEditor({
 			name: elm.name,
 			value: unescape(elm.value),
 			toolbar: elm.getAttribute("toolbar") ? Page[elm.getAttribute("toolbar")] : null,
 			cssUrl: elm.getAttribute("styleSheetUrl")
 		});
 		editor.applyTo(elm.id);
	    Page[elm.id] = editor;
 	});

});