- theme = ""
- tech = "jquery"

- banner = "layout banner" // site banner
- start = "content" // name of div id to start client content
- highlight = ""	// code styling theme zenburn | ... or "" to disable
- capture = false // switch to add screen capture button
- math = false // switch to add mathjax plugin
- prep = true // switch to prep brower 
- debug = false // switch to enable query debugger

- query = {}
- table = "demos"
- icons = ""
- client = "test.me.org"

html(lang="en")
	head
		meta(http-equiv="Content-Type",content="text/html; charset=utf-8;")
		
		// extjs
			script(src="/clients/extjs/build/ext-all.js")
			link(rel="stylesheet", type="text/css", href="/clients/extjs/build/packages/ext-theme-"+(theme||"crisp")+"/build/resources/ext-theme-"+(theme||"crisp")+"-all.css")
			link(rel="stylesheet", type="text/css", href="/clients/extjs/plugins/htmleditor/resources/css/ux-all.css")
			script.
				var io = null
				Ext.Loader.setConfig({
					enabled: true, 
					paths: {
						'Ext.ux': '/clients/extjs/plugins',
						'Ext': '/clients/extjs/build/examples'
				}});

			script(src="/uis/base.js")
			script(src="/uis/extjs.js")

		// jquery core
		// https://jquery.com/
		link(href='/clients/jquery/css/default.css',rel='stylesheet')
		script(type="text/javascript",src='/clients/jquery/js/jquery-1.9.1.js')
		// link(href='/clients/jquery/css/default.css',rel='stylesheet')
		// script(type="text/javascript",src='/clients/jquery/js/jquery-1.11.0.min.js')	// fails w layout widget
		// script(type="text/javascript",src='/clients/jquery/js/jquery-3.5.1.min.js')
		
		// jquery widgets
		// https://jqueryui.com/
		// http://layout.jquery-dev.com/
		// https://github.com/KasperOlesen/DataTable-AltEditor
		// link(href='/clients/jquery/ui/css/smoothness/jquery-ui.css',rel='stylesheet')
		link(href='/clients/jquery-ui-1.12.1/jquery-ui.theme.min.css',rel='stylesheet')
		script(type="text/javascript",src="/clients/jquery-ui-1.12.1/jquery-ui.js")

		link(href='/clients/jquery-layout-1.4.0/jquery-layout.css',rel='stylesheet')
		script(type="text/javascript",src="/clients/jquery-layout-1.4.0/jquery-layout.js")
		
		style.
			.ui-tabs-vertical { width: 55em; }
			.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
			.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
			.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
			.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
			.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

		// easyui
		// https://www.jeasyui.com/
			link(rel="stylesheet",type="text/css",href="/clients/easyui/easyui/themes/default/easyui.css")
			link(rel="stylesheet",type="text/css",href="/clients/easyui/easyui/themes/icon.css")
			link(rel="stylesheet",type="text/css",href="/clients/easyui/easyui/demos/demos.css")
			script(type="text/javascript",src="/clients/easyui/jquery.easyui.min.js")
			script(type="text/javascript",src="/clients/easyui-edatagrid/jquery.edatagrid.js")
	
		// Datatables
		// https://datatables.net/download/
		link(rel="stylesheet", type="text/css", href="/clients/dt/Bootstrap-3.3.7/css/bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/DataTables-1.10.22/css/dataTables.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/AutoFill-2.3.5/css/autoFill.bootstrap.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/Buttons-1.6.5/css/buttons.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/ColReorder-1.5.2/css/colReorder.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/FixedColumns-3.3.1/css/fixedColumns.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/FixedHeader-3.1.7/css/fixedHeader.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/KeyTable-2.5.3/css/keyTable.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/Responsive-2.2.6/css/responsive.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/RowGroup-1.1.2/css/rowGroup.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/RowReorder-1.2.7/css/rowReorder.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/Scroller-2.0.3/css/scroller.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/SearchBuilder-1.0.0/css/searchBuilder.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/SearchPanes-1.2.1/css/searchPanes.bootstrap.min.css")
		// link(rel="stylesheet", type="text/css", href="/clients/dt/Select-1.3.1/css/select.bootstrap.min.css")
		link(rel="stylesheet", type="text/css", href="/clients/dt/Select-1.3.1/css/select.dataTables.min.css")
		
		script( type="text/javascript", 		src="/clients/dt/Bootstrap-3.3.7/js/bootstrap.min.js")
		script( type="text/javascript", 		src="/clients/dt/DataTables-1.10.22/js/jquery.dataTables.min.js")
		script( type="text/javascript", 		src="/clients/dt/DataTables-1.10.22/js/dataTables.bootstrap.min.js")
		script( type="text/javascript", 		src="/clients/dt/AutoFill-2.3.5/js/dataTables.autoFill.min.js")
		script( type="text/javascript", 		src="/clients/dt/AutoFill-2.3.5/js/autoFill.bootstrap.min.js")
		script( type="text/javascript", 		src="/clients/dt/Buttons-1.6.5/js/dataTables.buttons.min.js")
		script( type="text/javascript", 		src="/clients/dt/Buttons-1.6.5/js/buttons.bootstrap.min.js")
		script( type="text/javascript", 		src="/clients/dt/Buttons-1.6.5/js/buttons.colVis.min.js")
		script( type="text/javascript", 		src="/clients/dt/Buttons-1.6.5/js/buttons.print.min.js")
		// script( type="text/javascript", 		src="/clients/dt/ColReorder-1.5.2/js/dataTables.colReorder.min.js")
		script( type="text/javascript", 		src="/clients/dt/FixedColumns-3.3.1/js/dataTables.fixedColumns.min.js")
		script( type="text/javascript", 		src="/clients/dt/FixedHeader-3.1.7/js/dataTables.fixedHeader.min.js")
		script( type="text/javascript", 		src="/clients/dt/KeyTable-2.5.3/js/dataTables.keyTable.min.js")
		script( type="text/javascript", 		src="/clients/dt/Responsive-2.2.6/js/dataTables.responsive.min.js")
		script( type="text/javascript", 		src="/clients/dt/Responsive-2.2.6/js/responsive.bootstrap.min.js")
		script( type="text/javascript", 		src="/clients/dt/RowGroup-1.1.2/js/dataTables.rowGroup.min.js")
		script( type="text/javascript", 		src="/clients/dt/RowReorder-1.2.7/js/dataTables.rowReorder.min.js")
		script( type="text/javascript", 		src="/clients/dt/Scroller-2.0.3/js/dataTables.scroller.min.js")
		script( type="text/javascript", 		src="/clients/dt/SearchBuilder-1.0.0/js/dataTables.searchBuilder.min.js")
		script( type="text/javascript", 		src="/clients/dt/SearchBuilder-1.0.0/js/searchBuilder.bootstrap.min.js")
		script( type="text/javascript", 		src="/clients/dt/SearchPanes-1.2.1/js/dataTables.searchPanes.min.js")
		script( type="text/javascript", 		src="/clients/dt/SearchPanes-1.2.1/js/searchPanes.bootstrap.min.js")
		script( type="text/javascript", 		src="/clients/dt/Select-1.3.1/js/dataTables.select.min.js")

		script(type="text/javascript",src="/clients/dt-AltEditor/src/dataTables.altEditor.free.js")
		
		script(type="text/javascript",src="/clients/dt-ColReorderWithResize-3.0.js")
		
		//link(type="text/css", 			href="/clients/jquery-datatables-checkboxes-1.2.12/css/dataTables.checkboxes.css",rel="stylesheet")
		//script(type="text/javascript",	src="/clients/jquery-datatables-checkboxes-1.2.12/js/dataTables.checkboxes.min.js")

		style.
			.ui-banner {
				text-align: center;
				background-color: yellow;
				border-width:1px;
			}

		style.
			.ui-button-retired:hover 	{ background-color: pink; }
			.ui-button-broken:hover 	{ background-color: red; }
			.ui-button-started:hover 	{ background-color: orange; }
			.ui-button-policed:hover 	{ background-color: yellow; }
			.ui-button-unfunded:hover 	{ background-color: green; }
			.ui-button-ready:hover 		{ background-color: blue; }

			.ui-header-retired 			{ background-color: pink; 	border-width:1px;border-style:solid;border-color:black;text-align:center; }
			.ui-header-broken 			{ background-color: red; 	border-width:1px;border-style:solid;border-color:black;text-align:center; }
			.ui-header-started 			{ background-color: orange; border-width:1px;border-style:solid;border-color:black;text-align:center; }
			.ui-header-policed 			{ background-color: yellow; border-width:1px;border-style:solid;border-color:black;text-align:center; }
			.ui-header-unfunded 		{ background-color: green; 	border-width:1px;border-style:solid;border-color:black;text-align:center; }
			.ui-header-ready 			{ background-color: blue; 	border-width:1px;border-style:solid;border-color:black;text-align:center; }	
		
		style.
			p,h1,h2,h3 {
				color: navy;
			}
			html, body {
				background:	#666;
				width:		100%;
				height:		100%;					
				padding:	0;
				margin:		0;
				overflow:	auto; /* when page gets too small */
			}
			#container {
				background:	#999;
				height:		100%;
				margin:		0 auto;
				width:		100%;
				max-width:	900px;
				min-width:	700px;
				_width:		700px; /* min-width for IE6 */
			}
			.pane {
				display:	none; /* will appear when layout inits */
			}
		
		// basic enumerators
		script(type="text/javascript",src="/uis/base.js")
		script(type="text/javascript",src="/uis/jquery.js")

	//
		body
		grid#test(path="/demo.db",cols="ID.n,Name.t,Source.t,Description.x")
	//
		body
		grid#test(path="/demo.db",cols="ID.n,Name.t,Source.t,Description.x",north="http://test.com")
			p here is some help
			p here is more help
			accordion#Amy
				tab.One
					p test1
				tab.Two
					p test2
	//
		body
		//grid#test1(path="/demo.db",_cols="ID.n,Name,Description.x,Source")
		grid#test1(path="/test.db",cols="ID.n,x(Name,y(Description.x,Source))")
	//
		body
		border#subDude
			tab#center.Junk.Stuff
				p hello there
			tab#west.mod
				p this is a test
			tab#east.mod
			tab#north.setup
			tab#south.info
				p a secret
	//
		body
		folder#Fold
			tab.One
				p tab1 content
				//
					folder#X
					tab.xOne
						p tab1 content
					tab.xTwo
						p tab2 content
			tab.Two
				p tab2 content
	//
		body
		border#Dude
			tab#center.Main.Content
				p here is some main content
				p this is another test of content with some markdown
				:markdown
					*#{title}* provides a scalable service for evaluating geoint products developed
					by its industrial and academic partners.  Use *#{title}*'s [endpoints](/api.view):

				//
				folder#Fold
					tab.One
						p this is a test
						folder#Junk
							tab.Junk1
								p xxxx this is a test
								accordion.A1
									tab.TryMe
										p here i be
										grid#testTryMe(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")
									tab.TryThis
										p there it is
							tab.Junk2
								p xxxx this is only a test
							tab.Junk3
								p hello
					tab.Two
						h3 this is some tab2 text
						grid#testTabTwo(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")

			tab#west.etc
				grid#testWest(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")

			tab#east.modE
				border#Eborder
					tab#center
						p tada!
					tab#west
						p a secret
			tab#north.setup
				p this is some help
				p this is more help
				post(path="/demo.view",width="400px",height="300px")

			tab#south.info
				border#Sborder
					tab#center
						p tada!
					tab#west
						p a secret
	//
	body
		accordion.A1
			tab.TryMe
				p here i be
				grid#test1(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")
			tab.TryThis
				p there it is	
	//
		body
		border#Dude
			tab#center.Main.Content
				p main content
				p this is another test
				folder#Fold
					tab.One
						p this is a test
						folder#Junk
							tab.Junk1
								p xxxx this is a test
								accordion.A1
									tab.TryMe
										p here i be
										grid#test1(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")
									tab.TryThis
										p there it is
							tab.Junk2
								p xxxx this is only a test				
					tab.Two
						p this is only a test
						grid#test1(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")

			tab#west.etc
				grid#test1(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")

			tab#east.mod
			tab#north.setup
			tab#south.info
				border.S
					tab#center
						p tada!
					tab#west
						p a secret
						
	//
		body
		folder#Fold
			tab.One
				p this is a test
				folder#Junk(north="/demo.tou")
					tab.Junk1
						p xxxx this is a test
						accordion.A1
							tab.TryMe
								p here i be
								grid#test1(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")
							tab.TryThis
								p there it is
								border#BB
									tab#center
										p center2
									tab#west
										p west2
					tab.Junk2
						p xxxx this is only a test				
			tab.Two
				p this is only a test
				border#B
					tab#center
						p center
						grid#test1(path="/demo.db",cols="ID.n..hide,Name.t,Source.t,Description.x")
					tab#west
						p west

		//
			folder#Gold
			tab.One
				p this is a test
			tab.Two
				p this is only a test
	//
		body
		#folder.Fold
			ul
				li
					a(href="#Fold0") One
				li
					a(href="#Fold1") Two
				
			#Fold0
				p tab1 content
				#folder.NewFold
					ul
						li
							a(href="#X0") tab a
						li
							a(href="#x1") tab b
							
					#X0
						p here is some content for a
					#X1
						p here is some content for b
				
			#Fold1
				p tab2 content				
	//
		body
		script.
		Ext.create('Ext.container.Viewport', {  
			layout: "fit",
			overflowY: "scroll",
			items: [], 
			//autoScroll: true,
			listeners: {
				afterRender: function () {
					// If the extjs default of keeping the body visible is
					// overridden, then this makes the body visible when 
					// the document becomes ready.
					alert("!rendered");
					//console.log(document.body);

					var body = window.document.getElementsByTagName("body");
					body[0].style.visibility = "visible";
					console.log("ext body=", body);
					//MathJax.Hub.Queue([ "Typeset", MathJax.Hub ]);
				}
			}
		});	

		#content.layout(
			icons=icons,
			start=start,
			client=client,
			source=table,
			query=JSON.stringify(query),
			title="")

			#border.xSite(crush,dims="600,600",title="test" )

				block site_help
				#post.xBrief(path="/briefs.view?notebook=#{table}",dims="800,600")

				block site_body

				#fit(class=etc,west,crush)
					:markdown
						[browse](/briefs.view?nb=browse)  
						[API](/api.view)  
						[skinning](/skinguide.view)  
						[PRM](/shares/prm/debe/index.html)  
						[blog](http://intellipedia/swag)  
						[restart](/restart)  
						[email](/email.view)  
						[issues](http://10.0.0.100:8080/issues.view)  
						[scripts](/scripts.view)  
						[survey](/survey.view)  
						[status](/status.view)  
						!{RTP}  
						!{JIRA}  
						!{RAS}


				#grid.Demo(path="/#{table}.db",center,cols="Name,Description")