ui_components.naml

==========================================
	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[n.dot_pack/].js?2"></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>