--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/nabble/view/naml/ui_components.naml	Thu Mar 21 19:15:52 2019 -0600
@@ -0,0 +1,404 @@
+==========================================
+	VERTICAL TAB CONTROL
+==========================================
+
+<macro name="vertical_tab_control" dot_parameter="vertical_tabs">
+	<n.put_in_head.>
+		<style type="text/css">
+			table.vertical-control {
+				margin: 1em 0;
+				width:100%;
+				border-collapse:collapse;
+			}
+			table.vertical-control td {
+				padding:0;
+				vertical-align:top;
+			}
+			table.vertical-control td.details {
+				width:90%;
+				padding:.5em 1em;
+			}
+			ul.vertical-control {
+				width:100%;
+				list-style-type:none;
+				padding:0;
+				margin:0;
+			}
+			ul.vertical-control li {
+				padding: .3em;
+				white-space:nowrap;
+			}
+			ul.vertical-control li.selected {
+				border-top-left-radius:5px;
+				border-bottom-left-radius:5px;
+				-moz-border-radius-topleft:5px;
+				-moz-border-radius-bottomleft:5px;
+			}
+		</style>
+	</n.put_in_head.>
+	<table class="vertical-control">
+		<tr>
+			<td>
+				<ul class="vertical-control">
+					<n.vertical_tab.>
+						<n.vertical_tabs/>
+					</n.vertical_tab.>
+				</ul>
+			</td>
+			<td class="details shaded-bg-color">
+				<n.vertical_tabs/>
+			</td>
+		</tr>
+	</table>
+</macro>
+
+<macro name="vertical_tab" dot_parameter="do">
+	<n.do/>
+</macro>
+
+<macro name="is_vertical_tab">
+	<n.is_in_command name="vertical_tab" />
+</macro>
+
+<macro name="add_vertical_tab" dot_parameter="text" parameters="url,selected,details,icon,style">
+	<n.if.is_vertical_tab>
+		<then>
+			<n.if.selected>
+				<then><li class="selected shaded-bg-color" style="[n.style/]"><n.hide_null.icon/> <n.truncate. size="25"><n.text/></n.truncate.></li></then>
+				<else><li style="[n.style/]"><n.hide_null.icon/> <a href="[n.url/]"><n.truncate. size="25"><n.text/></n.truncate.></a></li></else>
+			</n.if.selected>
+		</then>
+		<else>
+			<n.if.selected>
+				<then.details/>
+			</n.if.selected>
+		</else>
+	</n.if.is_vertical_tab>
+</macro>
+
+==========================================
+	HORIZONTAL TAB CONTROL
+==========================================
+
+<macro name="horizontal_tab_control" dot_parameter="horizontal_tabs" parameters="is_live">
+	<n.put_in_head.>
+		<script src="[n.tabs_library_path/]" type="text/javascript"></script>
+		<style type="text/css">
+			div.tab-contents {
+				margin-top:1.5em;
+			}
+		</style>
+	</n.put_in_head.>
+	<script type="text/javascript">
+		NabbleTabs.startTabControl(<n.hide_null.is_live/>);
+		<n.horizontal_tab.><n.horizontal_tabs/></n.horizontal_tab.>
+		NabbleTabs.endTabControl();
+	</script>
+	<n.if.is_null.is_live>
+		<then>
+			<div class="tab-contents">
+				<n.horizontal_tabs/>
+			</div>
+		</then>
+	</n.if.is_null.is_live>
+</macro>
+
+<macro name="horizontal_tab" dot_parameter="do">
+	<n.do/>
+</macro>
+
+<macro name="is_horizontal_tab">
+	<n.is_in_command name="horizontal_tab" />
+</macro>
+
+<macro name="add_horizontal_tab" parameters="url,text,selected,details">
+	<n.if.is_horizontal_tab>
+		<then>
+			NabbleTabs.addTab('<n.url/>', '<n.javascript_string_encode.text/>', <n.selected/>);
+		</then>
+		<else>
+			<n.if.selected>
+				<then.details/>
+			</n.if.selected>
+		</else>
+	</n.if.is_horizontal_tab>
+</macro>
+
+<macro name="add_live_horizontal_tab" parameters="element_id,text,selected,details,onclick">
+	<n.if.is_horizontal_tab>
+		<then>
+			<n.if.is_null.onclick>
+				<then>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>);</then>
+				<else>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>, <n.onclick/>);</else>
+			</n.if.is_null.onclick>
+		</then>
+		<else.details/>
+	</n.if.is_horizontal_tab>
+</macro>
+
+==========================================
+	SLIDER
+==========================================
+
+<macro name="slider" dot_parameter="contents" requires="html">
+	<n.put_in_head.>
+		<script src="/util/nabblegallery-1.2.js"></script>
+	</n.put_in_head.>
+	<n.slider_counter.increment/>
+	<div id="slider[n.slider_id/]" style="width:100%">
+		<table id="gallery-view[n.slider_id/]">
+			<tr>
+				<td style="width:20px">
+					<img id="prev[n.slider_id/]" src="/images/left.png" style="cursor:pointer;display:none"/>
+				</td>
+				<td>
+					<div id="gallery[n.slider_id/]" style="width:500px;overflow-x:hidden;position:relative">
+						<table id="images[n.slider_id/]" style="border-collapse:collapse;margin-top:.7em;">
+							<tr style="vertical-align:top">
+								<n.contents/>
+							</tr>
+						</table>
+					</div>
+				</td>
+				<td style="width:20px">
+					<img id="next[n.slider_id/]" src="/images/right.png" style="cursor:pointer"/>
+				</td>
+			</tr>
+		</table>
+	</div>
+	<script type="text/javascript">
+		function update<n.slider_id/>() {
+			fixGalleryWidth(<n.slider_id/>);
+		};
+		galleryReady(<n.slider_id/>);
+		$(window).load(update<n.slider_id/>).resize(update<n.slider_id/>);
+	</script>
+</macro>
+
+<macro name="slider_id">
+	<n.slider_counter.value/>
+</macro>
+
+<macro name="slider_counter" dot_parameter="do">
+	<n.counter name="slider" do="[n.do/]" />
+</macro>
+
+==========================================
+	TOOLTIP
+==========================================
+
+<macro name="tooltip" dot_parameter="contents" parameters="use_title, delay, position">
+	<n.if.not.is_ajax>
+		<then.put_in_head.compress.tooltip_head/>
+	</n.if.not.is_ajax>
+	<n.set_var. name='tag_id'>tooltip<n.random max="99999"/></n.set_var.>
+	<div id="[n.var name='tag_id'/]" class="nabble-tooltip" use_title="[n.null_to_false.use_title/]">
+		<n.hide_null.contents/>
+		<div class="nabble-tooltip-arrow">
+			<div class="d1">&diams;</div>
+			<div class="d2">&diams;</div>
+		</div>
+	</div>
+	<script type="text/javascript">
+		Nabble.startTooltip(Nabble.get('<n.var name='tag_id'/>'), '<n.default to="up" text="[n.position/]"/>', <n.default to="400" text="[n.delay/]"/>);
+	</script>
+</macro>
+
+<macro name="tooltip_head">
+	<n.tooltip_css/>
+	<n.tooltip_js/>
+</macro>
+
+<macro name="tooltip_small_row" dot_parameter="contents">
+	<div class="nabble-tooltip-small-row second-font">
+		<n.contents/>
+	</div>
+</macro>
+
+<macro name="tooltip_css">
+	<style type="text/css">
+		div.nabble-tooltip,
+		div.nabble-tooltip * {
+			color: #EEE;
+			font-weight:bold;
+		}
+		div.nabble-tooltip {
+			background: #000;
+			font-size:90%;
+			line-height:normal;
+			display: none;
+			position: absolute;
+			z-index: 88888;
+			padding: .5em;
+			border: 1px solid #FFF;
+			white-space:normal;
+			-moz-border-radius: 3px;
+			-webkit-border-radius: 3px;
+			border-radius: 3px;
+		}
+		div.nabble-tooltip-small-row,
+		div.nabble-tooltip-small-row * {
+			color:#D0EAF2;
+		}
+		div.nabble-tooltip-small-row {
+			font-size:80%;
+			font-weight:normal;
+			padding-top: .4em;
+		}
+		div.nabble-tooltip-arrow {
+			font: 40px Arial, Sans-serif;
+			line-height:1em;
+			left:15px;
+			position:absolute;
+			bottom:-15px;
+			height:15px;
+			width:30px;
+			overflow:hidden;
+		}
+		div.nabble-tooltip-arrow div {
+			position:absolute;
+		}
+		div.nabble-tooltip-arrow div.d1 {
+			top:-22px;
+			color: #FFF;
+		 }
+		div.nabble-tooltip-arrow div.d2 {
+			top:-25px;
+			color: #000;
+		}
+	</style>
+</macro>
+
+<macro name="tooltip_js">
+	<script type="text/javascript">
+		<![CDATA[
+		Nabble.startTooltip = function(e, position, delay) {
+			if (e.nabbletooltip)
+				return;
+			e.nabbletooltip = true;
+			var $this = $(e);
+			var $arrow = $this.children().last();
+			var $elem = $this.prev();
+			$elem.hover(
+				function() {
+					setTip();
+					setTimer();
+				},
+				function() {
+					stopTimer();
+					$this.hide();
+				}
+			);
+			function setTimer() {
+				$this.showTipTimer = setTimeout(function() {
+					$('div.nabble-tooltip').hide();
+					stopTimer();
+					$this.fadeTo('fast', .8);
+				}, delay);
+			};
+			function stopTimer() {
+				clearInterval($this.showTipTimer);
+			};
+			function setTip(){
+				if ($this.parent().get() != document.body)
+					$(document.body).append($this);
+				var useTitle = $this.attr('use_title') == 'true';
+				if (useTitle) {
+					var title = $elem.attr('title');
+					if (title != '') {
+						$arrow.remove();
+						$this.html(title);
+						$elem.attr('title','');
+						$this.append($arrow);
+					}
+				}
+				var win = $(window).width();
+				if (position == 'up') {
+					var w = $this.outerWidth();
+					if (w > 250) {
+						w = 250;
+						$this.width(w);
+					}
+					var xMid = $elem.offset().left + $elem.outerWidth()/2;
+					var xTip = xMid - w/2;
+					if (xTip+w > win-5)
+						xTip = win-w-5;
+					if (xTip < 0)
+						xTip = 0;
+					var xArrow = xMid-xTip-11;
+					var yTip = $elem.offset().top-$this.outerHeight()-12;
+					$arrow.css('left', xArrow);
+					$this.css({'top' : yTip, 'left' : xTip});
+				} else if (position == 'right') {
+					var h = $this.outerHeight();
+					var yMid = $elem.offset().top + $elem.outerHeight()/2;
+					var yTip = yMid - h/2;
+					var xTip = $elem.offset().left + $elem.outerWidth() + 10;
+					$arrow.width(8).height(24).css({bottom:0,left:-8});
+					var yArrow = (h - 24)/2;
+					$arrow.css({top:yArrow});
+					var $d1 = $arrow.children().first();
+					var $d2 = $arrow.children().last();
+					$d1.css({top:-11});
+					$d2.css({top:-11,left:1});
+					$this.css({'top' : yTip, 'left' : xTip});
+				}
+			};
+		};
+		]]>
+	</script>
+</macro>
+
+==========================================
+	CUSTOM DROPDOWN
+==========================================
+
+<macro name="custom_dropdown" parameters="clickable_id, panel_id">
+	<n.put_in_head.>
+		<script type="text/javascript">
+			<![CDATA[
+			var ddPanels = [];
+			Nabble.asDropdown = function(clickableId, panelId) {
+				ddPanels.push(panelId);
+				$(document).ready(function() {
+					var $clickable = $('#'+clickableId);
+					var $panel = $('#'+panelId);
+					$panel.css({
+						position:'absolute',
+						zIndex: 5555,
+						display:'none'
+					});
+					$clickable.addClass('custom-dropdown');
+					$clickable.click(function(e) {
+						e.stopPropagation();
+						var isVisible = $panel.css('display') != 'none';
+						closeDropdowns();
+						if (!isVisible) {
+							var left = $(this).position().left - 5;
+							var w = $panel.outerWidth();
+							var win = $(window).width() - 10;
+							if (left+w > win)
+								left = win - w -10;
+							left = left < 0? 0 : left;
+							$panel.css('left', left);
+							$panel.show();
+						}
+					});
+					$(document).click(function(e) {
+						if ($(e.target).hasClass('custom-dropdown'))
+							return;
+						closeDropdowns();
+					});
+					function closeDropdowns() {
+						for (var i=0;i<ddPanels.length;i++)
+							$('#'+ddPanels[i]).hide();
+					};
+				});
+			};
+			]]>
+		</script>
+	</n.put_in_head.>
+	<script type="text/javascript">
+		Nabble.asDropdown('<n.clickable_id/>', '<n.panel_id/>');
+	</script>
+</macro>
\ No newline at end of file