[% pagetitle = "HOME" | string %] [% pageicon = 'MUSIC' %] [% browse = '1' %] [% music = '1' %][% playlist = '0' %]

[%- IF browse_radio -%]
[%- thispage = 'radio' -%]
[%- ELSE -%]
[%- thispage = 'home' -%]
[%- END -%]

[%- IF ajaxRequest -%]
        <pre>
[% PROCESS ajaxRequest.txt page = thispage %]
        </pre>
[%- ELSE -%]

[% title = 'SqueezeCenter'; homeString = 'Home'; goHomeURI = 'href = "' _ webroot _ 'home.html?player=' _ playerURI _ '"' %][%# <!-- "HOME" | string --> %]
[% PROCESS iHeaderVert.html noShowBar = 1 %]
<script>
[% PROCESS html/iui/iui.js %]
</script>

<style>
body > div > ul > li > a  /* Handle the click/tap highlight. Highlight an entire cell with the iPhone grey background when tapped */ 
{
	display: block;   /* Sets the href to be a block rather than inline */
	
	/* The padding properties adjust the text content within the href block */
	padding-top: 9px;
	padding-right: 9px;
	padding-bottom: 11px;
	padding-left: 9px;
	
	/* The margin properties adjust the size of the href block	*/
	margin-top: -9px;
	margin-right: -9px;
	margin-bottom: -11px;
	margin-left: -9px;	 
	
	border: 0px;
	-webkit-border-radius: 8px;		 /* Round each corner of the created rectangle */
	
	text-decoration: none;
	color:black;
}

[% PROCESS html/iui/iui.css %] /* include IUI */
/* and start to redefine some.... */

body > div > ul > li > a[selected], body > div > ul > li > a:active {
    background-color: #194fdb !important;
    background-image: url(html/images/chevronSel.png), url(html/iui/selection.png) !important;
    background-repeat: no-repeat, repeat-x;
    background-position: 282px center, left top;
    color: #FFFFFF !important;
    padding: 11px 11px 13px 11px;
    margin: -11px -11px -13px -11px;
}

#preloader {
	display: none;
	background-image: none;
}

</style>

<div class="toolbar" id = "topbar_vert" style = "height: 44;">
    <h1 id="pageTitle"></h1>

	<div style = 'position: absolute; right: 4; top: 4; z-index: 12;'>
	<a class="blackRight iButton" href="[% webroot %]status.html?player=[% playerURI %]" style = "color: white; width: 43; padding: 0; text-align: right;"  target="_self">Playing</a>
	</div>

	<!--div style = 'position: absolute; left: 4; top: 4; z-index: 12;'>
	<a id = "backButton" class="iblueLeft iButton" style = "color: white; padding: 0; text-align: right;" href = "#"></a>
	</div-->
	
    <a id="backButton" class="button" style = "z-index: 14; color: white;" href="#"></a>
</div>

<!--div style = "position: relative; height: 44; border: 0; padding: 0;">&nbsp;</div>  <!-- spacer to keeps margins from collapsing on safari -->

<script>storeReturnPage();</script>

<!--div style = "position: relative; top: 0; left: 0; width: 320; height: 323px; overflow: hidden;" selected = "true"-->




<div class = 'toolbar' style = "position: relative; background: none; border: 0; top: 0; right: 0; width: 0; height: 369px; overflow: hidden;" >&nbsp;</div> <!-- keep bar at bottom -->

[% PROCESS browseDatabase; %]
[% PROCESS browseLists; %]
[% PROCESS browseSettings; %]
[% PROCESS browseRadio; %]



<div id = "main" title = "Home" selected = 'true'><!-- 'HOME' | string -->
<ul>
	<li class = "showArrow">
		<a href="#Database">
		Database</a> <!-- "DATABASE" | string -->
	</li>
	<li class = "showArrow">
		<a href="#Lists">
		Lists</a>  <!-- "LISTS" | string-->
	</li>
</ul>

<ul>
	<li class = "showArrow">
		<a href="#Radio">
		<img src="html/images/iRadioWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'radio'>&nbsp;
		<span class="secondary">[% 'RADIO' | string %]</span></a>
	</li>
</ul>

[% PROCESS playerChoose %]

<ul>
	<li class = "showArrow">
		<a href="#browseSettings">
		[% "SETTINGS" | string %]</a>
	</li>
</ul>

[%# END %]

</div>

[% PROCESS iFooterVert.html selectedButton = 5 classFooter = " selected = 'true' class = 'toolbar' " %]

</body>

<script> window.scrollBy (0,1); </script>

</html>


[%- END -%]



[% BLOCK browseDatabase %]
<div id = "Database" title = "Database" > <!-- "DATABASE" | string -->
<ul>
	<!-- ALBUMS -->
	[% IF additionalLinks.browse.BROWSE_BY_ALBUM %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.BROWSE_BY_ALBUM %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iAlbumWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'album'>&nbsp;
		<span class="secondary">[% 'ALBUMS' | string %]</span></a>
		</li>
	[% END %]
	
	<!-- ARTIST -->
	[% IF additionalLinks.browse.BROWSE_BY_ARTIST %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.BROWSE_BY_ARTIST %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iArtistWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'artist'>&nbsp;
		<span class="secondary">[% 'ARTIST' | string %]</span></a>
		</li>
	[% END %]		
		
	<!-- GENRE -->
	[% IF additionalLinks.browse.BROWSE_BY_GENRE %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.BROWSE_BY_GENRE %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iGenreWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'genre'>&nbsp;
		<span class="secondary">[% 'GENRES' | string %]</span></a>
		</li>
	[% END %]
	
	<!-- MUSIC FOLDER -->
	[% IF additionalLinks.browse.BROWSE_MUSIC_FOLDER %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.BROWSE_MUSIC_FOLDER %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iFolderWhite2.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'music folder'>&nbsp;
		<span class="secondary">[% 'SETUP_AUDIODIR' | string %]</span></a>
		</li>
	[% END %]		
		
	<!-- YEAR, dot a lot of sense in this... -->
	[% IF additionalLinks.browse.BROWSE_BY_YEAR %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.BROWSE_BY_YEAR %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iAlbumWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'by year'>&nbsp;
		<span class="secondary">[% 'BROWSE_BY_YEAR' | string %]</span></a>
		</li>
	[% END %]
</ul>


[% orderByList = {
	'album.titlesort'                                     => 'ALBUM',
	'album.year,album.titlesort'                          => 'SORT_YEARALBUM',
	'album.year,contributor.namesort,album.titlesort'     => 'SORT_YEARARTISTALBUM',
	'contributor.namesort,album.titlesort'                => 'SORT_ARTISTALBUM',
	'contributor.namesort,album.year,album.titlesort'     => 'SORT_ARTISTYEARALBUM',
	'genre.namesort,album.titlesort'                      => 'SORT_GENREALBUM',
	'genre.namesort,contributor.namesort,album.titlesort' => 'SORT_GENREARTISTALBUM',
} %]

<label for="orderBy" class="backgroundtext">[% 'ALBUMS' | string %] [% "SORT_BY" | string %]</label>

<select class = "selectItems" name="orderBy" onChange="setAlbumOrderBy(selectedIndex,options[selectedIndex].value)">
[% FOREACH orderType = orderByList.keys.sort %]
	<option [% IF orderType == orderBy %]selected[% END %] value="[% orderType %]">[% orderByList.$orderType | string %]</option>
[% END %]
</select>
<!--br><br><br-->
</div>

[% END %]

[% BLOCK browseLists %]
<div id = "Lists" title = "Lists"> <!-- "LISTS" | string -->
<ul>
	<!-- PLAYLISTS -->
	[% IF additionalLinks.browse.SAVED_PLAYLISTS %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.SAVED_PLAYLISTS %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iPlaylistWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'playlist'>&nbsp;
		<span class="secondary">[% 'PLAYLISTS' | string %]</span></a>
		</li>
	[% END %]

	<!-- FAVORITES -->
	<li class = "showArrow">
	[% FOR links IN additionalLinks %][% END %]
	<a href="[% webroot %]plugins/Favorites/index.html?fav&player=[% playerURI %]" target="_self">
	<img src="html/images/iFavoritesWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'favorites'>&nbsp;
	<span class="secondary">[% 'FAVORITES' | string %]</span></a>
	</li>

	<!-- NEW MUSIC -->
	[% IF additionalLinks.browse.BROWSE_NEW_MUSIC %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.BROWSE_NEW_MUSIC %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iNewWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'new'>&nbsp;
		<span class="secondary">[% 'BROWSE_NEW_MUSIC' | string %]</span></a>
		</li>
	[% END %]

	<!-- RANDOM PLAY -->
	[% IF additionalLinks.browse.PLUGIN_RANDOMPLAY %]
		<li class = "showArrow">
		<a href="[% webroot %][% additionalLinks.browse.PLUGIN_RANDOMPLAY %]&player=[% playerURI %]" target="_self">
		<img src="html/images/iRandomWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'random'>&nbsp;
		<span class="secondary">[% 'PLUGIN_RANDOMPLAY' | string %]</span></a>
		</li>
	[% END %]
	
	<!-- SEARCH -->
	<li class = "showArrow">
	<a href="[% webroot %]search.html?player=[% playerURI %]" target="_self">
	<img src="html/images/iSearchWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'search'>&nbsp;
	<span class="secondary">[% 'SEARCH' | string %]</span></a>
	</li>
</ul>		
</div>
[% END %]

[% BLOCK playerChoose %]

[% IF player_chooser_list %]
	<form method="get" class = "backgroundtext">[% "CURRENT_PLAYER" | string %]<br>
		<select name="player" class = "selectItems" onChange="submit();">
		[% player_chooser_list %]
		</select>
	[% IF page %]<input type = 'hidden' name = 'page' value = '[% page %]'>[% END %]
	[% IF playerid %]<input type = 'hidden' name = 'playerid' value = '[% playerid %]'>[% END %]
	</form>
	<br>
[% ELSE %]
	<br>
	[%- USE Clients; players = Clients.get("id") -%]
	[% temp = '0'; FOREACH playerobj IN players %]
		[% IF player == playerobj.id; temp = '1'; %]
				<span class = "backgroundtext">[% "CURRENT_PLAYER" | string %] [% IF playerobj.name %][% playerobj.name %][% ELSE %][% player %][% END %]</span>
				<br>
		[% END %]
	[% END %]
	[% IF !temp %]
		<span class = "backgroundtext">[% "CURRENT_PLAYER" | string %] [% "NONE" | string %]</span>
		<br>
	[% END %]
		<br>
[% END %]

[% END %]

[% BLOCK browseSettings %]
<div id = "browseSettings" title = "[% 'SETTINGS' | string %]">
<ul>
	<!-- SERVER SETTINGS -->
	<li class = "showArrow">
	<a href="[% webroot %]settings/server/basic.html" target="_self">
	<img src="html/images/blank.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'server settings'>&nbsp;
	<span class="secondary">[% 'SERVER_SETTINGS' | string | truncate(20) %]</span></a>
	</li>

	<!-- PLAYER SETTINGS -->
	<li class = "showArrow">
	<a href="[% webroot %]settings/player/basic.html?player=[% playerURI %]&playerid=[% playerURI %]" target="_self">
	<img src="html/images/blank.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'player settings'>&nbsp;
	<span class="secondary">[% 'PLAYER_SETTINGS' | string %]</span></a>
	</li>

	<!-- STATISTICS -->
	<!--li class = "showArrow">
	<a href="[% webroot %]hitlist.html">
	<img src="html/images/iStatisticsWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'statistics'>&nbsp;
	<span class="secondary">[% 'STATISTICS' | string %]</span></a>
	</li-->

	<!-- MORE -->
	<!--li class = "showArrow">
	<a href="[% webroot %]home.html?extended_browse=1&player=[% playerURI %]">
	<img src="html/images/iHelpWhite.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'more'>&nbsp;
	<span class="secondary">[% 'MORE' | string %]</span></a>
	</li-->
	
	<!-- ABOUT -->
	<!--li class = "showArrow">
	<a href="[% webroot %]html/about.html">
	<img src="html/images/blank.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'about'>&nbsp;
	<span class="secondary">[% 'ABOUT_SHORT' | string %]</span></a>
	</li-->
</ul>	

<!--
[% IF song_count %]
	<span class="backgroundtext">[% "LIBRARY_CONTAINS" | string %] [% album_count %] [% "WITH" | string %] [% song_count %] [% "BY" | string %] [% artist_count %].</span>
[% END %]
-->
</div>
[% END %]


[% BLOCK browseRadio %]
<div id = "Radio" title = '[% "RADIO" | string %]' style = 'height: 270; overflow: scroll'>
[% PROCESS tune_in_form %]
<ul>
	[% linkHash = additionalLinks.radio %]
	[% linkHash.import(additionalLinks.music_on_demand) %]
	[% FOREACH key = linkHash.keys %]
		<li class = "showArrow">
<!--			<a href="[% webroot %][% linkHash.$key %]player=[% playerURI %]"><img src="[% webroot %][% IF additionalLinks.icons.$key %][% additionalLinks.icons.$key.url.replace('.png', "_${iconWidth}x${iconWidth}_F.png") %][% ELSE %]html/images/radio.gif[% END %]" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'radio'>-->
				<a href="[% linkHash.$key %]player=[% playerURI %]"><img src="html/images/iRadioWhite.png" width = '[% iconWidth %]' width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'radio'>
			<span class="secondary" style = "font-size: 80%;">[% key | string | truncate(26) %]</a>
		</li>
	[% END %]
</ul>
<br><br><br>
</div>
[% END %]

[% BLOCK tune_in_form %]
    <form name="tune" method="get" action="status.html">
        <input type="hidden" name="p0" value="playlist">
        <input type="hidden" name="p1" value="play">
        <input type="hidden" name="player" value="[% player %]">
        <br>[% 'RADIO_TUNEIN_RADIOURL' | string %]
        <input type="text" class="stdedit" name="p2" size="40">
        <input type="submit" class="stdclick" value="[% "RADIO_TUNEIN_CHOOSE" | string %]">
	</form>
[% END %]



















[%- BLOCK Old -%]

[% IF additionalLinks.plugins %]
<div class="homeMenuSection">
	<div>[% "PLUGINS" | string | upper %]</div>
	<ul>
		[%- FOREACH key = additionalLinks.plugins.keys %]
			<li><a href="[% additionalLinks.plugins.$key | html %]player=[% playerURI %]">[% key | string %]</a></li>
		[%- END %]
	</ul>
</div>
[% END %]


[%- END -%]

[% BLOCK library_stats %]
[%# to add back in on a rainy day... %]
<table width="100%" bgcolor="#666666">
	<tr>
		<td align="right">
			<a href="[% webroot %]html/about.html" class = 'statusbartext'>[% "ABOUT_SHORT" | string %]</a>&nbsp;|&nbsp;
			<a href="[% webroot %]settings/server/basic.html" class = "statusbartext">[% "SERVER_SETTINGS" | string %]</a>&nbsp;|&nbsp;
			<a class = 'statusbartext' href="[% webroot %]setup.html?page=BASIC_PLAYER_SETTINGS&player=[% playerURI %]&playerid=[% playerURI %]">[% "PLAYER_SETTINGS" | string %]</a>
		</td>
		<td width="4"></td>
	</tr>
[% IF song_count %]
	<tr>
		<td align = right>
			<font class="statusbartext">[% "LIBRARY_CONTAINS" | string %] [% album_count %] [% "WITH" | string %] [% song_count %] [% "BY" | string %] [% artist_count %].</font>
		</td>
		<td width="4"></td>
	</tr>
[% END %]
</table>
[% END %]