//- UNCLASSIFIED
extends layout
append layout_help
	block base_help
	:markdown
		# base
		Provides a skinning framework with options:

			- url = hosting url (!{url})
			- flags.edit = edit switch (!{flags.edit})
			- flags.nomenu = menu switch (!{flags.nomenu})
			- query.locale = "locale name" (!{query.locale})
			- query.theme = "css theme name" (!{query.theme})
			- tech = "flow || d3 || world || usa || cubeland || forest || simple || three || reveal || scene || elFinder || isotope || apy || layout || dojo || extjs" (!{tech})
			- highlight = code highlighting tech (!{highlight})
			- math = enable embedded math (!{math})
			- capture = enable browser canvas capture (!{capture})
			- ext_carousel = false
			- ext_charting = false
			- ext_codeEdit = true
			- ext_jsonEdit = true
			- ext_theme = "crisp || ..." 
			- layout_grid = "datatable || w2ui || easyui || jqgrid"
			- layout_image = "darkroom || vide || fabric || camen" 
			- layout_theme = "..."
			- three_effect = "AnaglyphEffect || ... "
			- elFinder_path = "/root/"

append layout_parms
	block base_parms
		- tech = "layout"
		- highlight = ""
		- math = false
		- capture = false
		- ext_carousel = false
		- ext_charting = false
		- ext_codeEdit = true
		- ext_jsonEdit = true
		- ext_theme = "crisp" 
		- layout_grid = "datatable"
		- layout_image = "darkroom" 
		- layout_theme = ""
		- three_effect = "AnaglyphEffect"
		- elFinder_path = "/root/"

append layout_head
	- locale = query.locale || "en"  // en | fr | de | ...
	- theme = query.theme || "" // name of css theme

	//- Load underlying tech
	case tech
		when "flow"
			case "1.x"
				when "1.x"
					script(type="text/javascript",src="/clients/lodash.js")
					script(type="text/javascript",src="/clients/backbone.js")
					script(type="text/javascript",src='/clients/jquery/js/jquery-3.1.1.js')
				when "0.x"
					script(type="text/javascript",src='/clients/jquery/js/jquery-1.11.0.min.js')
					//-script(type="text/javascript",src='/clients/jquery/js/jquery-1.9.1.min.js')
					//-script(type="text/javascript",src='/clients/jquery/plugins/misc/jquery.ui.tooltip.min.js')

			link(rel="stylesheet",href="/clients/joint/joint.css")
			// script(type="text/javascript",src='/clients/jquery/ui/jquery-ui-1.10.3.custom.min.js')
			//- any changes in these scripts require re-minification
			script(type="text/javascript",src="/clients/joint/joint.min.js")
			script(type="text/javascript",src="/clients/joint/joint.shapes.devs.js")
			script(type="text/javascript",src="/clients/joint/joint.shapes.fsa.min.js")
			script(type="text/javascript",src="/clients/joint/joint.shapes.pn.min.js")
			script(type="text/javascript",src="/clients/joint/joint.shapes.erd.min.js")

		when "d3"
		when "d3v3"
		when "d3v4"
		when "d3v5"	
			// https://d3js.org/
			script(type="text/javascript",src="/clients/#{tech}.min.js")
			script(type="text/javascript",src="/clients/d3-selection-multi.js")
			script(type="text/javascript",src="/uis/uibase.js")
			script(type="text/javascript",src="/uis/uidraw.js")

		when "world"
			script(type="text/javascript",src="/clients/maps/topojson.min.js")
			script(type="text/javascript",src="/clients/maps/datamaps.world.min.js")
			script(type="text/javascript",src="/uis/uidraw.js")

		when "usa"
			script(type="text/javascript",src="/clients/maps/topojson.min.js")
			script(type="text/javascript",src="/clients/maps/datamaps.usa.min.js")
			script(type="text/javascript",src="/uis/uidraw.js")

		when "cubeland"
		when "forest"
		when "simple"
			// https://github.com/voxel/voxel-clientmc
			script(type="text/javascript",src="/clients/games/#{view}/bundle.js")

		when "three"
			// https://threejs.org/
			link(rel='stylesheet',href='/clients/totem.three.css')

		when "reveal"
			// https://revealjs.com/
			link(rel='stylesheet',href='/clients/reveal/css/reveal.min.css')
			link(rel='stylesheet',href='/clients/reveal/css/theme/moon.css')
			link(rel='stylesheet',href='/clients/reveal/lib/css/zenburn.css')
			// link(rel='stylesheet',href='/clients/reveal/css/print.css',type='text/css',media='print')
			
			link(rel='stylesheet',href='/uis/totem.reveal.css')
			
			//script(type="text/javascript",src="/uis/uiquiz.js")
			//script(type="text/javascript",src="/uis/uibrief.js")

		when "scene"
			link(rel="stylesheet",href="/clients/games/style.css")
			script(type="text/javascript",src="/clients/scenejs/scenejs.js")
			script.
				SceneJS.setConfigs({
					pluginPath:"/clients/scenejs/plugins"
				});

		when "dojo"
			// https://dojotoolkit.org/
			script.
				var dojoConfig = {
					async: true,
					baseUrl: "/clients/dojo/",
					packages: [
						//{ name: "dojo" 	},
						//{ name: "dijit"  },
						//{ name: "dojox"  }
					]
				};

			script(type="text/javascript",src="/clients/dojo/dojo/dojo.js")

		when "elFinder"
			// https://jqueryui.com/
			// http://layout.jquery-dev.com/
			// https://github.com/Studio-42/elFinder
			// jquery 1.7.2 and jquery-ui 1.8.18 for elFinder 2.0.2
			// jquery 3.4.1 and jquery-ui 1.12.1 for elFinder 2.1.57
			
			//link(href='/clients/jquery/ui/css/smoothness/jquery-ui.css',rel='stylesheet')
			script(type="text/javascript",src='/clients/jquery/js/jquery-1.7.2.min.js')

			link(type="text/css",rel="stylesheet",media="screen",href="/clients/elFinder/css/elfinder.min.css")
			link(type="text/css",rel="stylesheet",media="screen",href="/clients/elFinder/css/theme.css")
			script(type="text/javascript",src="/clients/elFinder/js/elfinder.min.js")

			link(href='/clients/jquery-ui-1.8.18/themes/smoothness/jquery-ui.css',rel='stylesheet')
			script(type="text/javascript",src="/clients/jquery-ui-1.8.18/ui/minified/jquery-ui.min.js")
			
			script(type="text/javascript",src="/uis/uibase.js")
			// script(type="text/javascript",src="/uis/uibrowse.js")
		
		when "isotope"
			// https://isotope.metafizzy.co/
			link(rel="stylesheet",href="/clients/css/totem.isotope.css")
			script(type="text/javascript",src="/clients/isotope.pkgd.min.js")
			script(type="text/javascript",src="/clients/imagesloaded.pkgd.min.js")
			script(type="text/javascript",src="/clients/packery-mode.pkgd.min.js")

		when "apy"
			// https://jquery-menu.com/jquery-navigation-menu-apy.html
			link(type="text/css",rel="stylesheet",href="/clients/apy/#{pivot}/menu.css")
			script(type="text/javascript",src="/clients/apy/#{pivot}/jquery.js")
			script(type="text/javascript",src="/clients/apy/#{pivot}/menu.js")
			//a(href="http://-apycom.com/")
		
		when "layout"
		when "tablayout"
			// load order is important: jquery, jqueryui, then grids etc

			// link(href='/clients/jquery/ui/css/smoothness/jquery-ui.css',rel='stylesheet')

			// load jquery
			link(href='/clients/jquery/css/default.css',rel='stylesheet')
			script(type="text/javascript",src='/clients/jquery/js/jquery-1.9.1.min.js')
				
			// 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')

			// load jqueryui
			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.min.js")

			// load layout
			link(href='/clients/jquery-layout-1.4.0/complex-layout.css',rel='stylesheet')
			script(type="text/javascript",src="/clients/jquery-layout-1.4.0/jquery-layout.js")
			// link(rel="stylesheet", href="/clients/css/totem.jqueryui.css")
			
			// load base and layout
			link(rel='stylesheet',href='/uis/uilayout.css')
			link(rel='stylesheet',href='/uis/w3.w3css.css')
			script(type="text/javascript",src="/uis/uibase.js")
			script(type="text/javascript",src="/uis/uilayout.js")
			
			case layout_grid
				when "w2ui"
					// http://w2ui.com/web/
					link(href='/clients/w2ui/dist/w2ui.min.css',rel='stylesheet')
					script(type="text/javascript",src='/clients/w2ui/dist/w2ui.min.js')
				when "datatable"
					// Datatables
					// https://datatables.net/download/
					// https://github.com/KasperOlesen/DataTable-AltEditor
					
					link(rel="stylesheet", type="text/css", href="/clients/dt/Bootstrap-3.3.7/css/bootstrap.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/popper.min.js")
					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-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")
					
					script(type="text/javascript",src="/clients/dt-AltEditor/src/dataTables.altEditor.free.js")
					
				when "easyui"
					// 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/demo/demo.css")
					
					script(type="text/javascript",src="/clients/easyui/jquery.easyui.min.js")
					script(type="text/javascript",src="/clients/easyui-edatagrid/jquery.edatagrid.js")
				when "jqgrid"
					// https://plugins.jquery.com/jqGrid/
					link(type="text/css",rel="stylesheet",media="screen",href="/clients/jqgrid/css/ui.jqgrid.css")
					
					script(type="text/javascript",src="/clients/jqgrid/js/i18n/grid.locale-en.js")
					script(type="text/javascript",src="/clients/jqgrid/js/minified/jquery.jqgrid.min.js")

			case layout_image
				when "vide"
					// https://vodkabears.github.io/vide/
					script(type="text/javascript",src="/clients/vide/src/jquery.vide.js")

				when "fabric"
					// http://fabricjs.com/
					script(type="text/javascript",src="/clients/fabric.js/dist/fabric.min.js")

				when "caman"
					// http://camanjs.com/
					script(type="text/javascript",src="/clients/caman/dist/caman.full.min.js")

				when "darkroom"
					// https://mattketmo.github.io/darkroomjs/
					//- "npm start" from jquery/plugins/darkroom to recompile lib/icons and lib/js
					link(href="/clients/darkroom/build/darkroom.css",rel='stylesheet')
					
					script(type="text/javascript",src="/clients/fabricjs/dist/fabric.min.js")
					script(type="text/javascript",src="/clients/darkroom/build/darkroom.js")
					script(type="text/javascript",src="/clients/darkroom/lib/js/plugins/darkroom.brightness.js")
					script(type="text/javascript",src="/clients/darkroom/lib/js/plugins/darkroom.grayscale.js")
					script(type="text/javascript",src="/clients/darkroom/lib/js/plugins/darkroom.invert.js")
					script(type="text/javascript",src="/clients/darkroom/lib/js/plugins/darkroom.remove.js")
					script(type="text/javascript",src="/clients/darkroom/lib/js/plugins/darkroom_help.js")

			case layout_theme
				when "switcher"
					script(type="text/javascript",src='/clients/jquery/plugins/misc/themeswitchertool.js')

		when "extjs"
			// extjs framework
			// https://www.extjs.com/
			
			if ext_theme == "Hydra"
				script.
					alert("Install Hydra themes at themes/hydra");
			else
				case "5.x"
					when "5.x"
						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")
					when "6.x"
						link(rel="stylesheet", type="text/css", href="/clients/extjs/build/classic/theme-"+(theme||"crisp")+"/resources/theme-"+(theme||"crisp")+"-all.css")

			if ext_carousel  /* unsupported in ExtJS 5.x */
				link( rel="stylesheet", type="text/css", href="/clients/extjs/resources/css/carousel.css" )
				//- script(type="text/javascript",src="/clients/extjs/ext-core.js")
				script(type="text/javascript",src="/clients/extjs/plugins/carousel.js")
				script.
					Ext.onReady( function () {
						new Ext.ux.carousel('content', {
							itemSelector: 'img',
							interval: 4,
							autoPlay: true,
							showPlayButton: true,
							transitionDuration: 2,
							width: 600,
							height: 400,
							pauseOnNavigate: true,
							freezeOnHover: false,
							transitionType: 'fade',
							navigationOnHover: true
						});
					});
			else
				script(type="text/javascript",src="/clients/extjs/build/ext-all.js")
				// script(type="text/javascript",src="/clients/ckeditor/ckeditor.js")

			if ext_jsonEdit
				link(rel="stylesheet" href="/clients/flexied/jsoneditor.css")
				//script(type="text/javascript",src="/clients/flexied/jquery.min.js")
				//script(type="text/javascript",src="/clients/flexied/jquery.jsoneditor.js")
	
			if ext_codeEdit
				link(rel="stylesheet", href="/clients/codemirror/lib/codemirror.css")
				link(rel="stylesheet", href="/clients/codemirror/addon/fold/foldgutter.css")
				// script(type="text/javascript",src="/clients/jquery/js/jquery-1.11.0.min.js")
				script(type="text/javascript",src="/clients/codemirror/lib/codemirror.js")
				script(type="text/javascript",src="/clients/codemirror/addon/fold/foldcode.js")
				script(type="text/javascript",src="/clients/codemirror/addon/fold/foldgutter.js")
				script(type="text/javascript",src="/clients/codemirror/addon/fold/brace-fold.js")
				script(type="text/javascript",src="/clients/codemirror/addon/fold/xml-fold.js")
				script(type="text/javascript",src="/clients/codemirror/addon/fold/indent-fold.js")
				script(type="text/javascript",src="/clients/codemirror/addon/fold/markdown-fold.js")
				script(type="text/javascript",src="/clients/codemirror/addon/fold/comment-fold.js")
				script(type="text/javascript",src="/clients/codemirror/mode/javascript/javascript.js")
				script(type="text/javascript",src="/clients/codemirror/mode/xml/xml.js")
				script(type="text/javascript",src="/clients/codemirror/mode/python/python.js")
				script(type="text/javascript",src="/clients/codemirror/mode/htmlmixed/htmlmixed.js")
				script(type="text/javascript",src="/clients/codemirror/mode/markdown/markdown.js")
				script(type="text/javascript",src="/clients/codemirror/mode/css/css.js")

			if ext_charting
				link(type="text/css",href="/clients/extjs/build/packages/sencha-charts/build/neptune/resources/sencha-charts-all.css")
				script(type="text/javascript",src="/clients/extjs/build/packages/sencha-charts/build/sencha-charts.js")

			script.
				Ext.Loader.setConfig({
					enabled: true, 
					paths: {
						'Ext.ux': '/clients/extjs/plugins',
						'Ext': '/clients/extjs/build/examples'
				}});
				/*
				Ext.Loader.loadScript({
					//url: "/clients/extjs/packages/ext-locale/build/ext-locale-#{locale}.js",
					//onLoad: function () { alert("Language loaded"); },
					onError: function () { alert("Locale failed to load"); },
					scope: this
				});
				*/
			
			link(rel="stylesheet", type="text/css", href="/uis/uiext.css")
			script(type="text/javascript",src="/uis/uiext.js")

	//- Load mathjax preprocessor
	if math
		script(type="text/javascript",src="/clients/mathjax/MathJax.js?config=default")
		script.
			setTimeout( () => {
				MathJax.Hub.Queue([ "Typeset", MathJax.Hub ]);
				MathJax.Hub.Config({
					extensions: ["tex2jax.js"],
					jax: ["input/TeX","output/HTML-CSS"],
					"HTML-CSS": { availableFonts: ["TeX"] },
					tex2jax: {
						processEscapes: true,
						inlineMath: [ ['$','$']  ],  // ['$','$'],  //["\\(","\\)"]
						displayMath: [ ['$$','$$'], ["\\[","\\]"] ]					
					}
				});
			}, 500);

	//- Capture web canvas
	if capture 
		script(type="text/javascript",src="/clients/html2canvas/dist/html2canvas.min.js")
		script(type="text/javascript",src="/clients/screen2canvas/capture.js")

	block base_head

append layout_body

	- edit = parseInt(flags.edit)
	- nomenu = parseInt(flags.nomenu)
	- menu = edit ? "Close".link( url.tag("?",{_edit:0}) ) : ["Edit".link( url.tag("?", {_edit:1}) ), "Help".link( `/${name}.help` ), "NoMenu".link( url.tag("?", {_nomenu:1}) )].join(" || ")
	
	span!= nomenu ? "" : menu

	if edit
		- button = name => "".tag("img",{src:`/clients/icons/actions/${name}.png`,width:15,height:15}).tag("button",{id:name,text:name,value:"on",class:"btn",onclick:`edit_${name}()`})
		- tools = button("save") + button("find") + button("replace") + button("show") 
		//-
		style.
			#aceEdit {
				position: relative;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				height: 200px;
				width: 100%;
			}
			.app_editor {
				height: 300px;
			}
			.app_editor_wrapper {
				background-color: #cccccc;
				border-bottom: 1px solid #222222;
			}
			.app_editor_dragbar {
				background-color: #222222;
				width: 100%;
				height: 4px;
				cursor: row-resize;
				opacity: 1;
			}

		//-
		script(type="text/javascript",src="/clients/acemin/ace.js")
		//script(type="text/javascript",src="/clients/acemin/ext-linking.js")
		script(type="text/javascript",src="/clients/acemin/ext-language_tools.js")

		span!= tools

		//-
		#aceEdit_wrapper.app_editor_wrapper
			#aceEdit.app_editor
			#aceEdit_dragbar.app_editor_dragbar

		//-
		script.
			function edit_save() {
				Ajax({
					code: ed.getValue()
				}, "put", `/engines?name=#{table}`, res => {
					alert("save #{table}");
					//alert(res);
				});
			}
			function edit_find() {
				alert("find");
			}
			function edit_replace() {
				alert("replace");
			}
			function edit_show() {
				const 
					ctx_editor = document.getElementById("aceEdit"),
					rect = ctx_editor.getBoundingClientRect();

				ctx_editor.style.height = "10px";
				ctx_editor.style.opacity = 1;
				ed.resize();
			}

			const ed = ace.edit("aceEdit", {
				value: unescape("#{escape(skin)}"), 	// escape to avoid jade bug
				newLineMode: "auto",
				mode: "ace/mode/coffee",
				//mode: "ace/mode/javascript",
				//mode: "ace/mode/asciidoc",
				theme: "ace/theme/chaos",
				selectionStyle: "text",
				autoScrollEditorIntoView: true,
				copyWithEmptySelection: true,
				fontSize: 16,
				highlightActiveLine: true,
				hScrollBarAlwaysVisible: true,
				vScrollBarAlwaysVisible: true,
				useSoftTabs: false,
		
				// auto complete requires ext-language scripts
				//enableBasicAutocompletion: true,	
				//enableLiveAutocompletion: true,

				// code folding
				foldStyle: "markbegin",
				showGutter: true,
				showLineNumbers: true,
				showFoldWidgets: true 

				// text linking requires ext-linking scripts
				// https://ourcodeworld.com/articles/read/994/how-to-make-an-ace-editor-instance-resizable-by-the-user-dinamically-with-a-drag-and-drop-bar
				// https://ourcodeworld.com/articles/read/994/how-to-make-an-ace-editor-instance-resizable-by-the-user-dinamically-with-a-drag-and-drop-bar
				//enableLinking: true
			}); 

			ed.on("linkClick", data => {	// text-linking
				console.log("CLICK", data); 
				if (data && data.token && data.token.type == "link") 
					window.open(data.token.value, "_blank");

				function GetWordByPos(str, pos) {	// get only one word from the whole string
					var left = str.substr(0, pos);
					var right = str.substr(pos);

					left = left.replace(/^.+ /g, "");
					right = right.replace(/ .+$/g, "");

					alert("get="+ left + right);
					return left + right;
				}

				var pos = data.position.column;
				var token = data.token.value;
				var url = GetWordByPos(token,pos);
				alert('You clicked on '+url);
			});

			// Global variable to store the ids of the status of the current dragged ace editor.
			window.draggingAceEditor = {};

			function makeAceEditorResizable(editor) {
				var id_editor = editor.container.id;
				var id_dragbar = id_editor + '_dragbar';
				var id_wrapper =  id_editor + '_wrapper';
				var wpoffset = 0;
				window.draggingAceEditor[id_editor] = false;

				var action_mousedown = function(e) {
					e.preventDefault();

					window.draggingAceEditor[id_editor] = true;

					// Set editor opacity to 0 to make transparent so our wrapper div shows
					document.getElementById(id_editor).style.opacity = 0;

					document.addEventListener("mousemove", action_document_mousemove);
				};

				var action_document_mousemove = function(e) {
					e.preventDefault();
					var _editor = document.getElementById(id_editor);
					var rect = _editor.getBoundingClientRect();

					var rsl = {
						top: rect.top + document.body.scrollTop
					};

					var top_offset = rsl.top - wpoffset;

					var actualY = e.pageY - wpoffset;

					// editor height
					var eheight = actualY - top_offset;

					// Set wrapper height
					document.getElementById(id_wrapper).style.height = eheight;

					// Set dragbar opacity while dragging (set to 0 to not show)
					document.getElementById(id_dragbar).style.opacity =  0.15;
				};

				document.getElementById(id_dragbar).addEventListener("mousedown", action_mousedown);

				var action_mouseup = function(e) {
					if (window.draggingAceEditor[id_editor]) {
						var ctx_editor = document.getElementById(id_editor);

						var rect = ctx_editor.getBoundingClientRect();

						var rsl = {
							top: rect.top + document.body.scrollTop
						};

						var actualY = e.pageY - wpoffset;
						var top_offset = rsl.top - wpoffset;
						var eheight = actualY - top_offset;

						document.removeEventListener("mousemove", action_document_mousemove);

						// Set dragbar opacity back to 1
						document.getElementById(id_dragbar).style.opacity = 1;

						// Set height on actual editor element, and opacity back to 1
						ctx_editor.style.height = eheight + "px";
						ctx_editor.style.opacity = 1;

						// Trigger ace editor resize()
						editor.resize();

						window.draggingAceEditor[id_editor] = true;
					}

					else {
						//editor.resize();
					}
				};

				document.addEventListener("mouseup", action_mouseup);
			}

			makeAceEditorResizable(ed);

	case tech
		when "elFinder"
			#content
				block base_body
			
			script.
				$().ready( () => {
					$('#content').elfinder({
						url : "#{elFinder_path}",

						lang: "en",
						//debug: ["error", "warning"],
						rememberLastDir: true,
						requestType: "get",
						defaultView: "list",  // list||icons
						resizable: true,
						sort: "name",
						sortDirect: "asc",
						dragUploadAllow: "auto",
						/*commands: [
							"getfile","help","rename","open"
						],*/
						handlers: {
							add: ev => console.log("add",ev),
							upload: ev => console.log("up",ev),
							//select: ev => console.log("sel",ev),
							//open: ev => alert("open"),
							//back: ev => alert("back"),
						},
					}).elfinder('instance');
				});

		when "three"
			block base_body
			script(type="text/javascript",src="/clients/threejs/build/three.min.js")
			script(type="text/javascript",src="/clients/threejs/examples/js/Detector.js")
			script(type="text/javascript",src="/clients/threejs/examples/js/libs/stats.min.js")

			if three_effect
				script(type="text/javascript",src="/clients/threejs/examples/js/effects/#{three_effect}.js")

		when "reveal"
			header
				p.R.ar.sm #{banner} || #{client} || 
					a(href="/briefs.view?notebook=#{name}", title="Open in new window") Open
					|  || 
					a(href="/tutorial.view?print-pdf=1", title="Print this tutorial") Print
					|  || 
					a(href="#{Home}") Home
					|  || O/utline S/ynopsis F/ullscreen B/lank F1/quiz

				img.ir(src="/stash/#{domain}/header0.jpg",width="50%",height="5%")
			footer
				block reveal_help
				p.R.al.sm #{banner}
			//
				footer
				img.ac(src="/stash/#{domain}/footer.jpg",width="90%",height="1%")
				p.rd.al #{banner}
					|  || 
					a(href="/skinguide.view") Skinning
					|  || 
					a(href="/api.view") API
			.reveal(style="width:100%;height:90%;")
				// .progress // .control // .status-background // .pause-overlay
				.slides
					block base_body
			
			script(type="text/javascript",src='/clients/reveal/plugin/highlight/highlight.js')
			script(type="text/javascript",src='/clients/reveal/lib/js/head.min.js')
			script(type="text/javascript",src='/clients/reveal/js/reveal.min.js')
			script(type="text/javascript",src="/uis/uibrief.js")

		when "voxel"
			#container
				#crosshair
				#battery
				nav#tools.bar-tab
					ul.tab-inner
						li(class="tab-item active")
							.tab-label
								| grass
						li.tab-item
							.tab-label
								| dirt
						li.tab-item
							.tab-label
								| obsidian
						li.tab-item
							.tab-label
								| plank
						li.tab-item
							.tab-label
								| dude		
				block base_body

		when "layout"
		when "tablayout"
			#content
				block base_body

		default
			block base_body