<!--
- - Copyleft Matthieu Lalonde 2012 LGPL, no guarantee given.
- - This software includes other similarly licensed software in /resources/vendors, see there for licenses
-->
<!DOCTYPE html>
<html>
<head>
	<title>DAAPr</title>

	<meta charset="utf-8">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<!--meta href="/"-->

	<style type="text/css">
		@import "/resources/css/normalize.css";

		@import "/resources/vendors/bootstrap/2.1.1/css/bootstrap.min.css";

		@import "/resources/vendors/jquery/datatables/1.9.4/extras/ColReorder/media/css/ColReorder.css";

		@import "/resources/css/datatables.css";
		@import "/resources/css/app.css";
 		@import "/resources/css/player.css";
	</style>

	<script src="/resources/js/libs/utils.js">/**/</script>
	<script data-main="/resources/js/main" src="/resources/vendors/require/require.min.js">/**/</script>
</head>
<body>
	<div class="ui-layout-north" id="wrapperPlayer">
		<div class="daaprControlsWrap">
			<a id="buttonPrev" class="disabled"></a>
			<a id="buttonPlay" class="disabled"></a>
			<a id="buttonNext" class="disabled"></a>
			<div id="volumeWrapper">
				<a id="buttonVolDown" class="disabled"></a>
				<input type="range" id="buttonVolume" minx="0" max="1" step="0.05" value="0" disabled />
				<a id="buttonVolUp" class="disabled"></a>
			</div>
			<div class="clearfix"></div>
		</div>
		<form action="#" class="form-search controls" id="wrapperSearchWidget">
			<div class="input-prepend">
				<button type="submit" tabindex="-1" class="btn"><i class="icon-search"></i></button>
				<input type="text" tabindex="1" class="span3 search-query">
			</div>
		</form>
		<div id="daaprPlayerViewport">
			<h1>DAAPr<sup>3</sup></h1>
		</div>
	</div>

	<div class="ui-layout-west"></div>

	<div class="ui-layout-center" class="loading"></div>

	<div class="ui-layout-south row-fluid">
		<div id="wrapperFooterLeft" class="span4 row-fluid">
			<div class="span2">
				<button class="btn btn-mini btn-inverse" type="button" data-target="sidebar"><i class="icon-chevron-left icon-white"></i></button>
			</div>
			<button class="btn btn-mini btn-inverse" type="button" data-target="random"><i class="icon-random icon-white"></i></button>
			<button class="btn btn-mini btn-inverse" type="button" data-target="repeat"><i class="icon-retweet icon-white"></i></button>
		</div>
		<div id="wrapperFooterCenter" class="span4">
			<span class="list-count">0</span>&nbsp;items
		</div>
		<div id="wrapperFooterRight" class="span4">
			<!-- <div class="btn-group">
				<button class="btn btn-inverse btn-mini"><i class="icon-download-alt icon-white"></i>Download</button>
				<button class="btn btn-inverse btn-mini dropdown-toggle" data-toggle="dropdown">
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu pull-up" role="menu" aria-labelledby="dLabel">
					<li><a tabindex="-1" href="#">Action</a></li>
					<li><a tabindex="-1" href="#">Another action</a></li>
					<li><a tabindex="-1" href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a tabindex="-1" href="#">Separated link</a></li>
				</ul>
			</div> -->
			<button class="btn btn-mini btn btn-inverse" type="button" data-target="about"><i class="icon-question-sign icon-white"></i></button>
		</div>
	</div>

	<ul id="listItemContextMenu" class="context-menu dropdown-menu">
		<li><a href="javascript:void(0);" data-target="listItemDetails"><i class="icon-info-sign"></i>&nbsp;Details...</a></li>
		<li><a href="javascript:void(0);" data-target="permalink"><i class="icon-bookmark"></i>&nbsp;Direct link</a></li>
		<li><a href="javascript:void(0);" data-target="download"><i class="icon-download-alt"></i>&nbsp;Download</a></li>
	</ul>

	<ul id="listColumnsContextMenu" class="context-menu dropdown-menu">
		<li><a href="javascript:void(0);">Title</a></li>
		<li><a href="javascript:void(0);">Artist</a></li>
		<li><a href="javascript:void(0);">Album</a></li>
		<li><a href="javascript:void(0);">Track</a></li>
		<li><a href="javascript:void(0);">Disc</a></li>
		<li><a href="javascript:void(0);">Year</a></li>
		<li><a href="javascript:void(0);">Time</a></li>
		<li><a href="javascript:void(0);">Genre</a></li>
	</ul>

	<!-- Underscore Templates -->
	<script type="text/html" id="_tmplPlayerView">
		<div class="daaprPlayerTitleIndicator">{{dmap_itemname}}</div>
		<div class="daaprPlayerInfoIndicator">{{daap_songartist}}</div>
		<div class="daaprProgressWrap">
			<span id="daaprProgressTimeElapsed">0:00</span>
			<progress min="0" max="1" value="0" id="daaprPlayerProgress"></progress>
			<span id="daaprProgressTimeRemain">-0:00</span>
		</div>
	</script>

	<script type="text/html" id="_tmplModalFatal">
		<div id="modalFatal">
			<div class="overlay"></div>
			<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-header alert alert-error">
					<h3 id="myModalLabel">A fatal error has occured</h3>
				</div>
				<div class="modal-body" style="font-size: 1.2em">

				</div>
				<div class="modal-footer">
					<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-refresh"></i>&nbsp;Reload</button>
				</div>
			</div>
		</div>
	</script>
	<script type="text/html" id="_tmplListItemDetails">
		<div id="listItemDetails" data-closable="true">
			<div class="overlay"></div>
			<div class="modal hide fade" data-show="true" tabindex="-1" role="dialog" aria-labelledby="listItemDetailsLabel" aria-hidden="true">
				<div class="modal-header">
					<!--button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button-->
					<h4 id="myModalLabel">Song Details</h4>
				</div>
				<div class="modal-body">
					<table class="table table-striped table-hover table-condensed">
					<%
						_.each(items, function(item) {
							print("<tr>\n");
							print("	<td>\n");
							print("		" + item.title + ":\n");
							print("	</td>\n");
							print("	<td>\n");
							print("		" + item.data + "\n");
							print("	</td>\n");
							print("</tr>\n");

						});
					%>
					</table>
				</div>
				<div class="modal-footer">
					<button class="btn btn-mini" data-target="download" aria-hidden="true" data-loading-text="Downloading..."><i class="icon-download-alt"></i>&nbsp;Download</button>
					<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Close</button>
				</div>
			</div>
		</div>
	</script>
</body>
</html>