<div ng-show="complete" id="home-wrapper" class="ng-scope" ng-swipe-left="go('/option', 'option-list')" ng-swipe-right="go('/menu', 'menu-list')">
	<div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<div class="header-home row">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
					<a href="javascript:void(0);" ng-click="setShareOnChat(0); setTmpMsgsArr(null); go('/menu', 'none')">
						<img id="btnmenu"  class="img-responsive" src="img/btnmenu.png" alt="Watuu menu"/>
					</a>	
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
					<img id="logo-home" class="centered img-responsive" src="img/logo.png"/>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
					<a href="javascript:void(0);" ng-click="setShareOnChat(0); setTmpMsgsArr(null); go('/option', 'none')">
						<img id="btnoptions" class="right img-responsive" src="img/btnoptions.png" alt="Watuu options"/>
					</a>	
				</div>
			</div>
		</div>	
	</div>
	
	<!-- SEARCH BAR -->
	<div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<div class="background-input-thin row">
				<form method="POST" action="" class="form-inline" role="form" ng-submit="setSearchTerm('search_term'); go('/watuu-list', 'none')">		
					<input type="text" name="keywords" ng-model="keywords" id="keywords" class="form-control" value="" placeholder="{{'Search lyrics, artist, song or emotion'|translate}}" />
					<input type="hidden" name="token" value="" />
				</form>
			</div>
		</div>		
	</div>
	 
	<!-- CATEGORIES TITLE -->
	<div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<div class="categories-title row">
				<span translate>Categories</span>
			</div>
		</div>		
	</div>
	
	
	<!-- WATUU CATEGORIES -->
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('favorites'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-favorite{{locale}}.png" alt="Favorite Watuu"/>
					</a>	
				</div> 
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('trending'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-trending{{locale}}.png" alt="Trending Watuu"/>
					</a>
				</div>	
			</div>
		</div>
	</div>
	</div>
	
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('emo_love'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-love{{locale}}.png" alt="Love Watuu"/>
					</a>
				</div>	
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('list_energy'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-lets-party{{locale}}.png" alt="Party Watuu"/>
					</a>	
				</div>
			</div>
		</div>
	</div>
	</div>
		
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('list_sayhello'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-say-hello{{locale}}.png" alt="Hello Watuu"/>
					</a>
				</div>	
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('list_missyou'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-miss-you{{locale}}.png" alt="Miss You Watuu"/>
					</a>	
				</div>
			</div>
		</div>	
	</div>
	</div>
		
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('emo_joy'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-happy{{locale}}.png" alt="Happy Watuu"/>
					</a>	
				</div>
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('emo_sadness'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-sad{{locale}}.png" alt="Sad Watuu"/>
					</a>	
				</div>
			</div>		
		</div>	
	</div>
	</div>
	
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('list_short'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-short-watuus{{locale}}.png" alt="Short Watuu"/>
					</a>
				</div>	
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('emo_anger'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-mad-at-you{{locale}}.png" alt="Mad At You Watuu"/>
					</a>
				</div>	
			</div>
		</div>
	</div>
	</div>
	
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('emo_admiration'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-admiration{{locale}}.png" alt="Admiration Watuu"/>
					</a>	
				</div>
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 without-padding">
				<div class="row">
					<a href="javascript:void(0);" ng-click="setSearchTerm('random'); go('/watuu-list')">
						<img class="img-responsive" src="img/icon-random{{locale}}.png" alt="Random Watuu"/>
					</a>	
				</div>
			</div>
		</div>	
	</div>
	</div>
	
	<!-- NEW RELEASES TITLE -->
	<div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<div class="categories-title row">
				<span translate>New Releases</span>
			</div>
		</div>		
	</div>
	
	<!-- NEW RELEASES -->
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row new-releases">			
			<div ng-repeat="watuu in watuus" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 {{$odd && 'clear-right' || 'clear-left'}}">
				<a class="show-watuu" href="javascript:void(0);" id="{{watuu.guid}}" ng-click="details(watuu)">
					<div class="row">		
						<img class='center watuu-image img-responsive' src='{{img_path}}/imagefile.php?sku={{watuu.guid}}&thumbsize=320' />
	                    <div class='watuu-title-home'>{{subString(watuu.title)}}</div>
						<div class='watuu-artist-home'>{{watuu.artist}}</div>  
						<div class='play-icon'><span class="glyphicon glyphicon-play"></span></div>   				
					</div>
				</a>
			</div>			
		</div>
	</div>
	</div>
	
	<!-- MOST SENT TITLE -->
	<div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<div class="categories-title row">
				<span translate>Most Sent</span>
			</div>
		</div>		
	</div>
	
	<!-- MOST SENT -->
	<div class="row">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="row most-sent">			
			<div ng-repeat="watuu in mostsentwatuus" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 {{$odd && 'clear-right' || 'clear-left'}}">
				<a class="show-watuu" href="javascript:void(0);" id="{{watuu.guid}}" ng-click="detailsMostSent(watuu)">
					<div class="row">		
						<img class='center watuu-image img-responsive' src='{{img_path}}/imagefile.php?sku={{watuu.guid}}&thumbsize=320' />
	                    <div class='watuu-title-home'>{{subString(watuu.title)}}</div>
						<div class='watuu-artist-home'>{{watuu.artist}}</div>  
						<div class='play-icon'><span class="glyphicon glyphicon-play"></span></div>   				
					</div>
				</a>
			</div>
		</div>
	</div>
	</div>
</div>	

<!-- Initialize details Dialog -->	
<div class="modal fade" id="details-dialog-home" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 400px;">
    	<div class="modal-content">
        		<div class="player-wrapper">
			        <div class="panel popup panel-default">
			            
		            	<div class="row">
		            		<div class='col-lg-12'>
		            			<div class="panel-header">
		                			<img class="img-responsive logo-popup" src="img/logo.png" alt="Watuu Logo"/>
		                		</div>
		                		<div class="close-popup">
		                			<a id="close-link" href="javascript:void(0);" data-dismiss="modal" class="glyphicon glyphicon-remove">
		                				<img class="img-responsive logo-popup" src="img/close.png" alt="Close dialog"/>
		                			</a>	
		                		</div>
		                	</div>	
		            	</div>
			            <div class="panel-body">
			                <div class="watuu-image-wrapper">
								<img src="{{img_path}}/imagefile.php?sku={{current_watuu.guid}}&thumbsize=200" id="album-image" class="center watuu-image img-responsive" alt="Responsive image">
								<div class="reflection">
									<img src="{{img_path}}/imagefile.php?sku={{current_watuu.guid}}&thumbsize=200" id="album-image" class="center watuu-image img-responsive" alt="Responsive image">
								</div>
								<div class="player-btn-wrapper">											
									<audio id="watuu-ff-player" type="audio/ogg" src="{{current_mp3}}" audio-events ></audio>
									<div class="controls mejs-play">
										<button title="Play/Pause" type="button" ng-click="playPause($event)"></button>
									</div>						
			                    </div>    	
							</div>
							<div class="watuu-title-dialog center">{{current_watuu.title}}</div>
							<div class="watuu-author-dialog">{{current_watuu.artist}}</div>
							<div id="watuu-lyrics" class="watuu-lyrics">{{current_watuu.lyrics}}</div>
			            </div>
			            
			            <!-- PANEL FOOTER -->
						<div class="panel-footer">
			
							<input type="hidden" id="current-guid" value="" />
			                <div class="wplayer-action-wrapper">
			                
			                <div class="wplayer-action without-margin">
			                	<a target="_blank" href="http://us.7digital.com/search?q={{current_watuu.title}}&src=live-search">
			                		<img class="img-responsive" src="img/itunes_logo.png" alt="Download App From iTunes"/>
			                	</a>
			                </div>
			                
			                <div class="wplayer-action without-margin-right">
			                	<a class="like-action like-off" href="javascript:void(0);" ng-click="handleLike()"></a>
			                </div>
			                <div class="wplayer-action without-margin-right">
			                	<a class="favorite-action favorite-off" href="javascript:void(0);" ng-click="handleFavorite()"></a>
			                </div>
			                <div class="wplayer-action without-margin-right">			                	
			                	<div id="container-send-options">
			                		<a href="javascript:void(0);" ng-click="share()"><img class="img-responsive" src="img/send{{locale}}.png" alt="Share a Watuu"/></a>         	
				  				</div>
			                </div>
			            </div>
			
			            </div>
			        </div>
			    </div>
        	
      	</div>
    </div>
</div>
<div class="complete">{{complete}}</div>