<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="mopidyFE" class="no-js lt-ie9 lt-ie8 lt-ie7" ng-controller="AppCtrl"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="mopidyFE" class="no-js lt-ie9 lt-ie8" ng-controller="AppCtrl"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="mopidyFE" class="no-js lt-ie9" ng-controller="AppCtrl"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="mopidyFE" class="no-js" ng-controller="AppCtrl"> <!--<![endif]-->

<head ng-app="mopidyFE" >
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MFE- Mopidy FrontEnd</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <meta name="mobile-web-app-capable" content="yes">

  <link rel="stylesheet" href="app.css"/>
  <link rel="stylesheet" href="component.css" />
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="rzslider.css"/>

  
  
  <script src="vendor/jquery-2.2.0.min.js"></script>
	<script src="vendor/angular.min.js"></script>
  <script src="vendor/angular-route.min.js"></script>
  <script src="vendor/rzslider.js"></script>
</head>

<body ng-cloak>
	
	<!-- MAIN MENU -->
	
	<nav class="cbp-spmenu cbp-spmenu-left" id="cbp-spmenu-s1">
		<a ng-click="loadMenuItem('/search')" 			href=""><i class="fa fa-search"></i> &nbsp;&nbsp;&nbsp;Search</a>
		<a ng-click="loadMenuItem('/browse')" 			href=""><i class="fa fa-music"></i> &nbsp;&nbsp;&nbsp;My Music</a>
		<a ng-click="loadMenuItem('/nowplaying')" 	href=""> <i class="fa fa-volume-up"></i> &nbsp;&nbsp;&nbsp;Now Playing</a>		
		<a ng-click="loadMenuItem('/settings')" 		href=""> <i class="fa fa-cog"></i> &nbsp;&nbsp;&nbsp;Settings</a>
	</nav>	
	
	<div>
				
		<!-- QUEUE -->
		<div ng-if="widescreen" class="queueSpacer"></div>
		<div ng-show="widescreen" class="queueHeader">
			Play Queue	
		</div>
		
		<div class="cbp-spmenu cbp-spmenu-right" id="cbp-spmenu-s2">
			<div class="queueWrapper">
				<div class="queueContent">
										
					<div ng-repeat="tracks in trackList">				
						<div class="queueBox">
							<a href="" ng-click="queueMenu(tracks);">
								<div class="queueBoxRight">
									<i class="fa fa-ellipsis-v fa-lg"></i>
								</div>
							</a>
							<a href="" ng-click="playTlTrack( tracks.tlid )">
								<div class="queueBoxLeft"> 
									<img ng-src="{{tracks.lfmImage}}" width=40 height=40 />
								</div>			
								<div class="queueBoxCenter">
									<h1 ng-if="tracks.tlid != currentTlid">{{ tracks.track.name }}</h1>
									<h2 ng-if="tracks.tlid == currentTlid">{{ tracks.track.name }}</h2>
									<h3>{{ tracks.track.artists[0].name }}</h3>
								</div>
							</a>
						</div>
					</div>
					
					<div style="height: 102px;"></div>
				</div>
			</div>
		</div>		
		
	  <div ng-view></div>
	
		<!-- HEADER -->
		
		<div class="header">
			<div ng-if="showHeaderBG" class="headerBG"></div>
			<a href="javascript:void(0);" ng-click="toggleMenu();">
				<div class="headerLeft"><i class="fa fa-bars"></i></div>
			</a>
			<a href="javascript:void(0);" ng-click="toggleQueue();">
				<div class="headerRight"><i class='fa fa-list-alt'></i></div>
			</a>

			<div class="headerCenter">
				<div class="menuPerm" ng-if="widescreen"> 
					<a ng-click="loadMenuItem('/search', true)" 			href="">&nbsp;&nbsp;<i class="fa fa-search"></i> 			&nbsp; Search 			&nbsp;&nbsp;&nbsp;&nbsp;|</a>
					<a ng-click="loadMenuItem('/browse', true)" 			href="">&nbsp;&nbsp;<i class="fa fa-music"></i> 			&nbsp; My Music 		&nbsp;&nbsp;&nbsp;&nbsp;|</a>
					<a ng-click="loadMenuItem('/nowplaying', true)" 	href="">&nbsp;&nbsp;<i class="fa fa-volume-up"></i> 	&nbsp; Now Playing 	&nbsp;&nbsp;&nbsp;&nbsp;|</a>		
					<a ng-click="loadMenuItem('/settings', true)" 		href="">&nbsp;&nbsp;<i class="fa fa-cog"></i> 				&nbsp; Settings 		&nbsp;&nbsp;&nbsp;&nbsp;|</a>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</div>
				<div class="pageTitle">
					<h1> {{ pageTitle }} </h1>
				</div>
			</div>	
		</div>
		
		<!-- FOOTER -->
		
		<div class="footer" ng-show="showFooter && (currentState === 'paused' || currentState === 'playing')">
			
			<div class="footerBackground">
				<div class="footerBackImg">
					<div class="footerBackImg2" style="background-image: url('{{currentTrackImageUrl}}');"></div>
				</div>
			</div>
			
			<div class="footerProgressWrap footerProgress">
			  <div class="footerProgressBar footerProgress"></div>
			</div>
			
			<div>	
				<a href="#/nowplaying">
				<div class="footer_center">
					<h1>{{ currentTrack }}</h1>
					<h3>{{ currentArtists[0].name }}</h3>
				</div>						
				</a>
				<div class="footer_right">  
					<a href="" ng-click="play()"><i class="fa fa-play" ng-if="currentState === 'paused' || currentState === 'stopped'" style="font-size: 20px;"></i></a>
					<a href="" ng-click="play()"><i class="fa fa-pause" ng-if="currentState === 'playing'" style="font-size: 20px;"></i></a>
					&nbsp;&nbsp;
					<a href="" ng-click="next()"><i class="fa fa-step-forward" style="font-size: 20px;"></i></a>	
		  	</div>
		  </div>
		  
		</div>


		<!-- CONTEXT MENU -->
		

		<div id="menumask" class="menumask" ng-click="closeMenu()"></div>
		
		<div class="contextMenu" ng-if="showContext">
				<a href="" ng-click="closeContextMenu()">
					<div class="contextMask"></div>
				</a>
				<div class="contextOuter">
					<div class="contextInner">					
						<div class="box" style="border-color: #777777;">						
								<div class="boxLeft"> 
									<img ng-src="{{contextData.image}}" width=50 height=50 />
								</div>
								<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
									<h1> {{contextData.header }}	</h1>
									<h3> {{contextData.header2}} </h3>
								</div></div></div>
						</div>		
						<div ng-show="contextReady">
							<div ng-repeat="button in contextData.buttons">
								<a href="" ng-click="contextLink(button.type, button.data, button.arg)">
									<div class="box2">
										<div class="boxCenter"><div style="display: table; height: 45px;"><div style="display: table-cell; vertical-align: middle;">
											<h1>{{ button.text }}</h1>
										</div></div></div>
									</div>
								</a>  
							</div>
							<a href="" ng-click="closeContextMenu()">
								<div class="contextClose">
									Close
								</div>
							</a> 
						</div>
						<div ng-show="!contextReady">
							<br><br>
							<i class="fa fa-spinner fa-2x fa-pulse"></i>	
						</div>
					</div>
				</div>
		</div>
	</div>

		
	<!-- Includes -->
	
	
	<script type="text/javascript" src="vendor/mopidy.min.js"></script>
	<script type="text/javascript" src="vendor/lastfm.api.js"></script>
	<script type="text/javascript" src="vendor/lastfm.api.md5.js"></script>
	<script type="text/javascript" src="vendor/lastfm.api.cache.js"></script>
	<script type="text/javascript" src="vendor/underscore-min.js"></script>
	
  <script src="app.js"></script>
  <script src="views/nowplaying/nowplaying.js"></script>
  <script src="views/settings/settings.js"></script>
  <script src="views/browse/browse.js"></script>
  <script src="views/playlists/playlists.js"></script>
  <script src="views/search/search.js"></script>
  <script src="views/artist/artist.js"></script>
  <script src="views/album/album.js"></script>
  <script src="services/cacheService.js"></script>
  <script src="services/mopidyService.js"></script>
  <script src="services/lastfmService.js"></script>
  <script src="services/util.js"></script>
  <script src="js/classie.js"></script>
  
</body>
</html>
