randombrad/nav_tab_thing.html

## nav_tab_thing.html
<!DOCTYPE html>

<html>
<head>
	<script src="../../build/aui/aui.js" type="text/javascript"></script>

	<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />

	<style type="text/css" media="screen">
		body {
			font-size: 12px;
		}

		#wrapper {
			padding: 10px;
		}

		.aui-custom {
			background: #eee;
			border: 3px solid #999;
		}

		.aui-custom-rendered {
			background: #ffc;
			border: 3px solid #fc0;
		}

		.content-area {
			display: none;
		}

		.content-area.selected {
			display: block;
		}
	</style>
</head>

<body>

<ul id="test">
	<li><a href="#div1">Div1</a></li>
	<li><a href="#div2">Div2</a></li>
	<li><a href="#div3">Div3</a></li>
	<li><a href="#div4">Div4</a></li>
</ul>

<div class="content-area selected" data-bannerImage="path/to/doclib/image" id="div1">Div 1</div>
<div class="content-area" id="div2">Div 2</div>
<div class="content-area" id="div3">Div 3</div>
<div class="content-area" id="div4">Div 4</div>
<script type="text/javascript" charset="utf-8">

AUI().ready(
	'aui-base',
	function(A) {

		if (location.hash) {
			var div = A.one(location.hash);

			if (div) {
				div.radioClass('selected');

				div.setStyle('backgroundImage', div.attr('data-bannerImage'));
			}
		}

		A.one('#test').delegate(
			'click',
			function(event) {
				var a = event.currentTarget;

				event.preventDefault();

				var href = a.get('hash');
				var div = A.one(href);

				if (div) {
					div.radioClass('selected');

					div.setStyle('backgroundImage', div.attr('data-bannerImage'));
				}
			},
			'a'
		);
	}
);

</script>

</body>
</html>

## template.vm
<style type="text/css" media="screen">
        .content-area {
			display: none;
		}

		.content-area.selected {
			display: block;
		}
	</style>

<header class="content-head content-head-liferay-portal">
    <hgroup>
        <h1>$page-title.data</h1>
        <div class="hr">
            <div>&nbsp;</div>
        </div>
    </hgroup>
    <nav>
        <ul id="test">
            #foreach($link in $links.siblings)
				#if($velocityCount == 1)
                	<li class="selected"><a href="#div$velocityCount">$link.data</a></li>
				#else
					<li><a href="#div$velocityCount">$link.data</a></li>
				#end
            #end
        </ul>
    </nav>
</header>

#foreach($link in $links.siblings)
$velocityCount
    #if($velocityCount == 1)
        <style>
        .content-area {
            background: url($link.bg-image.data) 100% 0 no-repeat;
        }
        </style>
        <div class="content-area selected" data-bannerImage="$link.bg-image.data" id="div$velocityCount">$link.data</div>
    #else
        <div class="content-area " data-bannerImage="$link.bg-image.data" id="div$velocityCount">$link.data</div>
    #end
#end


<script type="text/javascript" charset="utf-8">

AUI().ready(
	'aui-base',
	function(A) {

		function selectTab(href){
			var div = A.one(href);

            if (div) {
    			div.radioClass('selected');
				div.setStyle('background', 'url(' + div.attr('data-bannerImage')+') 100% 0 no-repeat');
				hash = href;
				A.one('#test a[href$="'+ hash +'"]').ancestor().radioClass('selected');
			}
		}

		var hash = null;

		if (location.hash) {
			selectTab(location.hash);
			A.one('#test a[href$="'+ location.hash +'"]').ancestor().addClass('selected');
		}

		setInterval(function(){
			if(location.hash != hash){
				selectTab(location.hash);
			}

		}, 200);

		A.one('#test').delegate(
			'click',
			function(event) {
				var a = event.currentTarget;
				var href = a.get('hash');
				a.ancestor().radioClass('selected');
				selectTab(href);
			},
			'a'
		);
	}
);

</script>
	<!DOCTYPE html>

	<html>
	<head>
	<script src="../../build/aui/aui.js" type="text/javascript"></script>

	<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />

	<style type="text/css" media="screen">
	body {
	font-size: 12px;
	}

	#wrapper {
	padding: 10px;
	}

	.aui-custom {
	background: #eee;
	border: 3px solid #999;
	}

	.aui-custom-rendered {
	background: #ffc;
	border: 3px solid #fc0;
	}

	.content-area {
	display: none;
	}

	.content-area.selected {
	display: block;
	}
	</style>
	</head>

	<body>

	<ul id="test">
	<li><a href="#div1">Div1</a></li>
	<li><a href="#div2">Div2</a></li>
	<li><a href="#div3">Div3</a></li>
	<li><a href="#div4">Div4</a></li>
	</ul>

	<div class="content-area selected" data-bannerImage="path/to/doclib/image" id="div1">Div 1</div>
	<div class="content-area" id="div2">Div 2</div>
	<div class="content-area" id="div3">Div 3</div>
	<div class="content-area" id="div4">Div 4</div>
	<script type="text/javascript" charset="utf-8">

	AUI().ready(
	'aui-base',
	function(A) {

	if (location.hash) {
	var div = A.one(location.hash);

	if (div) {
	div.radioClass('selected');

	div.setStyle('backgroundImage', div.attr('data-bannerImage'));
	}
	}

	A.one('#test').delegate(
	'click',
	function(event) {
	var a = event.currentTarget;

	event.preventDefault();

	var href = a.get('hash');
	var div = A.one(href);

	if (div) {
	div.radioClass('selected');

	div.setStyle('backgroundImage', div.attr('data-bannerImage'));
	}
	},
	'a'
	);
	}
	);

	</script>

	</body>
	</html>