<?php include 'app/view/header.php'; ?>

<!--
<div class="container mt-4" style="background:pink">
    <h1>Välkommen till Radio Krishna</h1>
-->
<?php 
//echo $this->getRadioContent(); 
?>

<!-- player code -->   

<div id="hap-wrapper" style="background:yellow">
    <div class="hap-player-wrapper">

	<div class="hap-playlist-holder">
	    <div class="hap-playlist-top-bar">
		<div class="hap-playlist-close hap-contr-btn" data-tooltip="Back"><i class="fas fa-long-arrow-alt-left hap-icon-color"></i></div>
		<div class="hap-sort-alpha" data-tooltip="Alphabetic sort"><i class="fas fa-sort-alpha-down hap-icon-color"></i></div>
		<input class="hap-search-filter" type="text" value="filter...">
	    </div>

	    <div class="hap-playlist-filter-msg"><p>NOTHING FOUND!</p></div>

	    <div class="hap-playlist-inner">
		<div class="hap-playlist-content">
		    <?php 
		    foreach ($prog_arr as $prog) { ?>
			
			<div class="hap-playlist-item" data-share="http://radio-krishna.se/<?php echo $prog["id"] ?>" data-album="<?php echo $prog["prog_cat"] ?>" data-link="http://radio-krishna.se" data-artist="<?php echo $prog["producer_name"] ?>" data-type="audio" data-mp3="<?php echo "http://217.70.33.42/rk/".$prog["prog_fname"] ?>" data-share="http://radio-krishna.se?id=1">
			    <a class="hap-playlist-non-selected" href="#">
				<span class="hap-playlist-thumb">
					<img src="public/images/mahavishnu01.png" alt="">
				</span>
				<span class="hap-playlist-title"><?php echo $prog["prog_title"] ?> | <?php echo $prog["comment"] ?> 
					| <?php echo $prog["prod_date"] ?>}
				</span>
			    </a>
			</div>
		    <?php } ?>
		</div>
	    </div>

	</div> <!-- hap-playlist-holder -->

	<div class="hap-player-holder">
	    <div class="container-fluid h-100" style="background-image: url('public/images/texture11a.png'">
		<div class="row hap-top-cont d-flex align-items-center"  style=""> 
		    <div class="col-1 hap-playlist-toggle hap-contr-btn" data-tooltip="Playlist"><i class="fas fa-th-list hap-icon-color"></i></div> 
		    <div class="col-8 " style="">
			<img class="img-fluid" src="public/images/rk_logo2.png">
		    </div>
		    <div class="col-3 hap-share-wrapper" style="">
			<div class="hap-share-holder">
			    <div class="hap-share-item" data-type="tumblr" data-tooltip="tumblr"><i class="fab fa-tumblr-square hap-icon-color"></i></div>
			    <div class="hap-share-item" data-type="twitter" data-tooltip="twitter"><i class="fab fa-twitter-square hap-icon-color"></i></div>
			    <div class="hap-share-item" data-type="facebook" data-tooltip="facebook"><i class="fab fa-facebook-square hap-icon-color"></i></div>
			    <div class="hap-share-item" data-type="googleplus" data-tooltip="googleplus"><i class="fab fa-google-plus-square hap-icon-color"></i></div>
			</div>
			<div class="hap-share-toggle hap-contr-btn" data-tooltip="Share"><i class="fas fa-share-square hap-icon-color"></i></div>
		    </div>
		</div>

		<div class="row hap-middle-cont " > 
		    <div class="col-12 col-sm-8 col-md-12 col-lg-8 col-xl-6  " style="">
			<div class="hap-player-thumb" style=" border-style:solid; border: 2px 2px 2px 2px"></div>
		    </div>

		    <div class="col-12 col-sm-4 col-md-12 col-lg-4 col-xl-6"  style="">

			<div class="row" style="margin-top: 19px">
			    <div class="col">
				<div class="form-group" style="margin: 10px 0 10px 0">

				    <form method="post" action="">
					<div>
					    <label for="producer">Producer</label>
					    <select id="producer" name="producer" onchange="this.form.submit()">
						<?php foreach ($producers as $key => $value): ?>
						    <option value="<?php echo htmlspecialchars($key); ?>"><?php echo htmlspecialchars($value); ?></option>
						<?php endforeach; ?>
					    </select>
					</div>

					<div>
					    <label for="category">Category</label>
					    <select id="category" name="category" onchange="this.form.submit()">
						<?php foreach ($categories  as $value) { ?>
						    <option value="<?php echo htmlspecialchars($value[1]); ?>"><?php echo htmlspecialchars($value[0]); ?></option>
						<?php }; ?>
					    </select>
					</div>
				    </form>

				</div>
			    </div>
			</div>

			<div class="row  " style="">
			    <div class="col ">
				<div class="hap-info" style=" margin-left: 0">
				    <p class="hap-player-artist" ></p>
				    <p class="hap-player-title" id="prog-title"></p>
				</div>
				<div class="hap-preloader"></div>
			    </div>
			</div>

			<div class="col hap-volume-wrapper">
				<div class="hap-player-volume" data-tooltip="Volume"><i class="fas fa-volume-up hap-icon-color"></i></div>
				<div class="hap-volume-seekbar" data-is-vertical>
					 <div class="hap-volume-bg"></div>
					 <div class="hap-volume-level"></div>
				</div>
			</div>

		    </div>

		</div>

		<div class="row hap-bottom-cont " style="position: fixed; bottom:0;max-height:100px">
		    <div class="col" style=";">

			<div class="hap-player-controls">
			    <div class="hap-loop-toggle hap-contr-btn" data-tooltip="Loop"><i class="fas fa-sync-alt hap-icon-rollover-color hap-icon-color"></i></div>
			    <div class="hap-player-controls-center">
				<div class="hap-prev-toggle hap-contr-btn"><i class="fas fa-backward hap-icon-color"></i></div>
				<div class="hap-playback-toggle hap-contr-btn"><i class="fas fa-play hap-icon-color"></i></div>
				<div class="hap-next-toggle hap-contr-btn"><i class="fas fa-forward hap-icon-color"></i></div>
			    </div>
			    <div class="hap-random-toggle hap-contr-btn" data-tooltip="Shuffle"><i class="fas fa-random hap-icon-color"></i></div>
			</div> 

			<div class="hap-seekbar">
			    <p class="hap-media-time-current">0:00</p>
			    <div class="hap-progress-bg"></div>
			    <div class="hap-load-level"></div>
			    <div class="hap-progress-level"></div>
			    <p class="hap-media-time-total">0:00</p>
			</div> 

		    </div>

		</div> <!-- row -->

	    </div>      <!-- container -->  
		  
	</div> <!-- hap-player-holder -->
	
    </div> <!-- hap-player-wrapper -->
		    
    <div class="hap-tooltip"><p></p></div> 

</div> <!-- hap-wrapper --> 

<script type="text/javascript">

var player;  
jQuery(document).ready(function($){
    var settings = {
	instanceName:"modern",
	sourcePath:"",
	//activePlaylist:"#playlist-audio1",
	activePlaylist:"",
	activeItem: <?php echo $playit ?>,
	//activeItem: 5,
	volume:0.5,
	autoPlay:true,
	preload:"auto",
	randomPlay:false,
	loopingOn:true,
	mediaEndAction:"next",
	soundCloudAppId:"",
	gDriveAppId:"",
	usePlaylistScroll:true,
	playlistScrollOrientation:"vertical",
	playlistScrollTheme:"minimal",
	useKeyboardNavigationForPlayback:true,
	facebookAppId:"669611213072804",
	useNumbersInPlaylist: false,
	sortableTracks: false,
	playlistItemContent:"title,thumb",
    };

    player = $("#hap-wrapper").on('playlistItemDisabled overPlaylistItem', function(e, data){
	//called on playlist item disable, returns (instance, instanceName, item)
	data.item.closest('.hap-playlist-item').addClass('hap-active');

    }).on('playlistItemEnabled outPlaylistItem', function(e, data){
	//called on playlist item enable, returns (instance, instanceName, item)
	data.item.closest('.hap-playlist-item').removeClass('hap-active');

    }).on('clickPlaylistItem', function(){
	togglePlaylist('close');
    }).hap(settings);

    //toggle playlist
    $(".hap-playlist-toggle").on('click',function(){
	togglePlaylist('open');
    });
    $(".hap-playlist-close").on('click',function(){
	togglePlaylist('close');
    });

    var playerHolder = $('.hap-player-holder'), 
	playlistHolder = $('.hap-playlist-holder'), 
	ease = 'easeInOutCubic',
	time = 500;

    function togglePlaylist(dir){

	if(dir == 'close'){
	    playlistHolder.stop().animate({'left': -playlistHolder.width()+'px'},{duration: time, easing: ease, complete: function(){
		if(player.forcePlayback){
		    player.playMedia();
		    player.forcePlayback = false;
		}
	    }});
	    playerHolder.stop().animate({'left': 0+'px'},{duration:time, easing: ease});

	}else{

	    player.forcePlayback = player.getMediaPlaying();
	    if(player.forcePlayback)player.pauseMedia();

	    playlistHolder.css({left: -playlistHolder.width()+'px', display:'block'}).stop().animate({'left': 0+'px'},{duration:time, easing: ease});
	    playerHolder.stop().animate({'left': playerHolder.width()+'px'},{duration:time, easing: ease});
	}  

    }
var divContent= $('.hap-player-title').html();
//alert ('testing'+divContent);
//alert(player.activePlaylistItem);

$('button').on('click', function() {
	    // Just replacing the value of the 'content' attribute will not work.
		    $('meta[name=description]').remove();
			    $('head').append( '<meta name="description" content="this is new">' );
});

//var descval = document.getElementById('beskrivelse').innerHTML;
//var paras = document.getElementsByTagName('meta');
//var elm = document.createElement("meta");
//elm.setAttribute("property", "og:description") 
//elm.setAttribute("content", descval);
//document.getElementsByTagName("head")[0].appendChild(elm);

            });

        </script>

<?php include 'app/view/footer.php'; ?>


<!-- --------------------------------------- -->


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML5 Audio Player with Playlist</title>
       
        <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"><!-- icons -->
		<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all" /><!-- playlist scroll -->
		<link rel="stylesheet" type="text/css" href="css/default_100.css"/>
        
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script><!-- drag / sort -->
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script><!-- drag / sort -->    
        <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script><!-- playlist scroll -->
        <script type="text/javascript" src="js/jsmediatags.min.js"></script><!-- id3 tags -->
        <script type="text/javascript" src="js/hls.min.js"></script><!-- live streaming -->
        <script type="text/javascript" src="js/new.js"></script>		
        <script type="text/javascript" src="js/popup.js"></script>	
        <script type="text/javascript">

            var player, settings;  
            jQuery(document).ready(function(){
                
                settings = {
                    instanceName:"default",
                    sourcePath:"",
                    activePlaylist:"",
                    activeItem:0,
                    volume:0.5,
                    autoPlay:false,
                    preload:"auto",
                    randomPlay:false,
                    loopingOn:true,
                    mediaEndAction:"next",
                    soundCloudAppId:"",
                    gDriveAppId:"",
                    usePlaylistScroll:true,
                    playlistScrollOrientation:"vertical",
                    playlistScrollTheme:"light",
                    useKeyboardNavigationForPlayback:true,
                    facebookAppId:"644413448983338",
                    useNumbersInPlaylist: true,
                    sortableTracks: false,
                    playlistItemContent:"title"
                };

                player = $("#hap-wrapper").on('setupDone', function(e, data){
                    //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)
                }).on('soundRequest', function(e, data){
                    //called when new song has been requested, returns (instance, instanceName, counter)
                }).on('soundStart', function(e, data){
                    //called on song start, returns (instance, instanceName, counter)
                }).on('soundPlay', function(e, data){
                    //called on song play, returns (instance, instanceName, counter)
                }).on('soundPause', function(e, data){
                    //called on song pause, returns (instance, instanceName, counter)
                }).on('soundEnd', function(e, data){
                    //called on song end, returns (instance, instanceName, counter)
                }).on('soundError', function(e, data){
                    //called on song error, returns (instance, instanceName, counter)
                }).on('playlistStartLoad', function(e, data){
                    //called on playlist start load, returns (instance, instanceName)
                }).on('playlistEndLoad', function(e, data){
                    //called on playlist end load, returns (instance, instanceName)
                }).on('playlistEnd', function(e, data){
                    //called on playlist end, returns (instance, instanceName, counter)
                }).on('clickPlaylistItem', function(e, data){
                    //called on playlist item click, returns (instance, instanceName, counter)
                }).on('playlistItemDisabled', function(e, data){
                    //called on playlist item disable, returns (instance, instanceName, item)
                }).on('playlistItemEnabled', function(e, data){
                    //called on playlist item enable, returns (instance, instanceName, item)
                }).hap(settings);

            });

        </script>
        
	</head>
	<body>
             
        <!-- player code -->   
        <div id="hap-wrapper">

            <select name="hap-select" class="hap-select">
                <option value="#playlist-audio">Mp3 playlist self hosted</option>
                <option value="#playlist-podcast">Podcast playlist</option>
                <option value="#playlist-itunes">Playlist itunes</option>
                <option value="#playlist-soundcloud1">Soundcloud track set</option>
                <option value="#playlist-soundcloud2">Soundcloud user tracks</option>
                <option value="#playlist-soundcloud3">Soundcloud single track</option>
                <option value="#playlist-soundcloud4">Soundcloud user favorites</option>
                <option value="#playlist-folder">Folder of mp3 files</option>
                <option value="#playlist-gdrive-folder">Google drive folder</option>
                <option value="#playlist-xml">Xml playlist</option>
                <option value="#playlist-mixed">Mixed playlist</option>
            </select> 
        
       		<div class="hap-player-holder">
             
                <div class="hap-player-title"></div>
                  
                <p class="hap-media-time-total">0:00</p>
                <p class="hap-media-time-separator">&#47;</p>
              	<p class="hap-media-time-current">0:00</p>
             
                <div class="hap-player-controls">

                    <div class="hap-prev-toggle hap-contr-btn"><i class="fas fa-step-backward hap-icon-color"></i></div>
                    <div class="hap-playback-toggle hap-contr-btn"><i class="fas fa-play hap-icon-color"></i></div>
                    <div class="hap-next-toggle hap-contr-btn"><i class="fas fa-step-forward hap-icon-color"></i></div>
                      
                    <div class="hap-volume-toggle hap-contr-btn"><i class="fas fa-volume-up hap-icon-color"></i></div>
                    <div class="hap-volume-seekbar">
                         <div class="hap-volume-bg"></div>
                         <div class="hap-volume-level"></div>
                    </div>

                    <div class="hap-loop-toggle hap-contr-btn" data-tooltip="Loop"><i class="fas fa-sync-alt hap-icon-color"></i></div>
                    <div class="hap-random-toggle hap-contr-btn" data-tooltip="Shuffle"><i class="fas fa-random hap-icon-color"></i></div>
                
                </div>

                <div class="hap-seekbar">
                    <div class="hap-progress-bg"></div>
                    <div class="hap-load-level"></div>
                    <div class="hap-progress-level"></div>
                </div>
                  
            </div>
              
            <div class="hap-playlist-holder">
                <div class="hap-playlist-filter-msg"><p>NOTHING FOUND!</p></div>
                <div class="hap-playlist-inner">
                    <div class="hap-playlist-content">
                     	
                        <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/1/01.mp3" data-share="http://google.com">
                            <a class="hap-playlist-non-selected" href="#">
                                <span class="hap-playlist-title">Tim McMorris - A Bright And Hopeful Future</span>
                            </a>
                        </div>

                        <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/1/01.mp3">
                            <a class="hap-playlist-non-selected" href="#">
                                <span class="hap-playlist-title">Tim McMorris - Be My Valentine</span>
                            </a>
                        </div>

                        <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/1/03.mp3">
                            <a class="hap-playlist-non-selected" href="#">
                                <span class="hap-playlist-title">Tim McMorris - Give Our Dreams Their Wings To Fly</span>
                            </a>
                        </div>

                        <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/1/04.mp3">
                            <a class="hap-playlist-non-selected" href="#">
                                <span class="hap-playlist-title">Tim McMorris - Happy Days Are Here To Stay</span>
                            </a>
                        </div>

                        <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/1/05.mp3">
                            <a class="hap-playlist-non-selected" href="#">
                                <span class="hap-playlist-title">Tim McMorris - Health Happiness Success</span>
                            </a>
                        </div>

                    </div>
                </div>
                
                <div class="hap-preloader"></div>

                <div class="hap-bottom-bar">

                    <input class="hap-search-filter" type="text" value="filter...">
                    <div class="hap-sort-alpha" data-tooltip="Alphabetic sort"><i class="fas fa-sort-alpha-down hap-icon-color"></i></div>

                    <div class="hap-share-item" data-type="tumblr" data-tooltip="tumblr"><i class="fab fa-tumblr hap-icon-color"></i></div>
                    <div class="hap-share-item" data-type="twitter" data-tooltip="twitter"><i class="fab fa-twitter hap-icon-color"></i></div>
                    <div class="hap-share-item" data-type="facebook" data-tooltip="facebook"><i class="fab fa-facebook-f hap-icon-color"></i></div>
                    <div class="hap-share-item" data-type="googleplus" data-tooltip="googleplus"><i class="fab fa-google-plus-g hap-icon-color"></i></div> 
                    
                </div>

            </div>
			
			<div class="hap-tooltip"><p></p></div>  
        
        </div>

        <!-- PLAYLIST LIST -->
        <div id="hap-playlist-list">

            <!-- audio playlist -->
            <div id="playlist-audio1">

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/01.mp3" data-share="http://audiojungle.net/item/a-way-to-the-top/162200">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - A Way To The Top</span>
                    </a>
                </div>

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/02.mp3">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - Feel Good Journey</span>
                    </a>
                </div>

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/03.mp3">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - Fight No More</span>
                    </a>
                </div>

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/04.mp3">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - Funky Boom</span>
                    </a>
                </div>

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/05.mp3">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - Pump The Club</span>
                    </a>
                </div>

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/06.mp3">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - Rush</span>
                    </a>
                </div>

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/07.mp3">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - Sun Is So Bright</span>
                    </a>
                </div>
                
            </div>

            <!-- podcast playlists -->
            <div id="playlist-podcast">
                <div class="hap-playlist-item" data-type="podcast" data-path="http://www.kingola.com/feed/podcast/" data-link="http://codecanyon.net/user/Tean/portfolio" data-target="_blank" data-limit="11"></div>
            </div>

            <!-- podcast i-tunes -->
            <div id="playlist-itunes">
                 <div class="hap-playlist-item" data-type="itunes_podcast_music" data-path="https://itunes.apple.com/us/podcast/rodkast/id374535595" data-limit=""></div>
            </div>
                    
             <!-- Soundcloud -->
            <div id="playlist-soundcloud1">
                <!-- user favorites -->  
                <div class="hap-playlist-item" data-type="soundcloud" data-path="https://soundcloud.com/playlistsofficial/likes" data-limit="" data-download="http://google.com"></div>
            </div>  

            <div id="playlist-soundcloud2">
                <!-- user tracks -->
                <div class="hap-playlist-item" data-type="soundcloud" data-path="http://soundcloud.com/astateoftrance" data-limit=""></div>
            </div> 
            
            <div id="playlist-soundcloud3">
                <!-- single track -->
                <div class="hap-playlist-item" data-type="soundcloud" data-path="http://soundcloud.com/trance/trance-single-138-bpm-anvil"></div>
            </div> 

            <div id="playlist-soundcloud4">
                <!-- track set/playlist -->
                <div class="hap-playlist-item" data-type="soundcloud" data-path="https://soundcloud.com/simps1988/sets/mainstage-music-a-state-of" data-limit=""></div>
            </div>
             
            <!-- folder playlist -->
            <div id="playlist-folder">
                <div class="hap-playlist-item" data-type="folder" data-path="/home2/interact/public_html/env/media/audio/1/main" data-id3></div>
            </div>

            <!-- google drive folder playlist -->
            <div id="playlist-gdrive-folder">
                <div class="hap-playlist-item" data-type="gdrive-folder" data-path="0ByzcNpNrQNpWbjJGY19NSFF0R3M"></div> 
            </div>

            <!-- xml -->
            <div id="playlist-xml" data-type="xml" data-path="xml/1.xml"></div>

            <!-- mixed -->
            <div id="playlist-mixed">

                <div class="hap-playlist-item" data-type="podcast" data-path="http://www.kingola.com/feed/podcast/" data-link="http://codecanyon.net/user/Tean/portfolio" data-target="_blank" data-limit="5"></div>

                <div class="hap-playlist-item" data-type="audio" data-mp3="media/audio/2/02.mp3">
                    <a class="hap-playlist-non-selected" href="#">
                        <span class="hap-playlist-title">Soundroll - Feel Good Journey</span>
                    </a>
                </div>

                <div class="hap-playlist-item" data-type="soundcloud" data-path="/tracks/31405210"></div>

            </div> 
             
        </div>

	</body>
</html>
