header.jsf

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<script>
$(function() {	
	$("#jqt3").addClass("active");
	$("<div/>", { id: 'footercrumb' }).appendTo($("#content")).html($("#breadcrumb").html());
});
</script>

<c:if test="${!empty req.demo}">

	<c:set var="tool" value="${fn:substringBefore(req.demo.path, '/')}"/>
	<c:if test="${fn:contains(req.demo.path, '/expose/')}">
		<c:set var="tool" value="toolbox/expose"/>
	</c:if>
	<c:if test="${fn:contains(req.demo.path, '/flashembed/')}">
		<c:set var="tool" value="toolbox/flashembed"/>
	</c:if>
	
	<style>	
	ul.css-tabs li {
		list-style-image:none !important;
		list-style-type:none !important;
		margin:0 !important;
	}
	
	div.css-panes h2 {
		margin-top:0px;		
	}
	
	#credits {
		color:#555;
		font-size:11px;
		text-decoration:none;
	}
	
	h1 {
		background-position:0 ${tool=='overlay' || tool=='scrollable' ? 15 : tool=='rangeinput'||tool=='combine' ? 5 : 25}px;		
	} 
	</style>
	
	
	<h1 style="background-image:url(${jqt}/img/hero/${tool == 'combine' ? 'jquerytools' : tool}.jpg)">
		${req.demo.title}
	</h1>	
	
	<div id="breadcrumb">
		
		<%-- prev --%>
		<c:if test="${!empty req.demo.previous}">
			<div style="width:260px;float:left">
				<a href="${jqt}/demos/${req.demo.previous.path}">&laquo; ${req.demo.previous.title}</a>
			</div>
		</c:if>
		
		<%-- index --%>
		<div style="width:220px;float:left">
			[ 
				<a href="${jqt}/demos/index.html">demo index</a>
				<c:if test="${tool != 'combine'}"> |
					<c:if test="${!fn:contains(tool, 'toolbox/')}">
						<a href="${jqt}/${tool}/index.html">${tool} docs</a>
					</c:if>
					<c:if test="${fn:contains(tool, 'toolbox/')}">
						<a href="${jqt}/${tool}.html">${fn:replace(tool, 'toolbox/', '')} docs</a>
					</c:if>
				</c:if>
			]
		</div>	
	
		
		<%-- next --%>
		<c:if test="${!empty req.demo.next}">
			<div style="float:right;text-align:right">
				<a href="${jqt}/demos/${req.demo.next.path}">${req.demo.next.title} &raquo;</a>
			</div>
		</c:if>		
		
	</div>

	<br clear="all">
	
	<h2 style="margin:0 0 20px 0">
		<em> 
			${req.demo.category.shortTitle} demo ${req.demo.index + 1} / ${fn:length(req.demo.category.demos)} 
		</em>:
		
		<strong>${req.demo.title}</strong>
	</h2>
	
</c:if>