<?php
include( "./inc/config.inc.php" );
include( BASEDIR."/inc/common.inc.php" );
include( BASEDIR."/inc/sections.inc.php" );

?><!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="<?=BASEURL; ?>/js/jquery-3.6.0.js"></script>
    <script src="<?=BASEURL; ?>/js/jquery.history.js"></script>
    <script src="<?=BASEURL; ?>/js/jquery-ui.js"></script>
    <script src="<?=BASEURL; ?>/js/bootstrap.min.js"></script>
   
    <link type="text/css" href="<?=BASEURL; ?>/css/bootstrap.min.css" rel="stylesheet" />
    <link type="text/css" href="<?=BASEURL; ?>/css/materialdesignicons.min.css" rel="stylesheet" />
    <link type="text/css" href="<?=BASEURL; ?>/css/style.css?<?=JSVersion; ?>" rel="stylesheet" />
    
    <link rel="icon" type="image/svg+xml" href="<?=BASEURL; ?>/images/favicon.svg">
    
    <link rel="apple-touch-icon" href="<?=BASEURL; ?>/images/apple-scanner-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="57x57" href="<?=BASEURL; ?>/images/apple-scanner-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="<?=BASEURL; ?>/images/apple-scanner-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="<?=BASEURL; ?>/images/apple-scanner-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="<?=BASEURL; ?>/images/apple-scanner-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="<?=BASEURL; ?>/images/apple-scanner-icon-144x144.png" />
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="description" content="Hot 80s and a few sneaky 90s">
    <meta name="keywords" content="icecast,radio,internet radio,station,turbo80s.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
    <meta property="og:url" content="https://www.turbo80s.com" />
    <meta property="og:image" content="https://www.turbo80s.com/images/og-image.png" />
    <meta property="og:site_name" content="Turbo80s.com Radio" />
    <meta property="og:description" content="Turbo80s.com internet radio station" />

    <title id="track-title"></title>
    
    <script type="text/javascript">
        
        function updateTitle() {
            $.ajax({
                type: 'GET',
                url: 'https://transmitter.turbo80s.com:8443/status-json.xsl',
                dataType: 'text',
                async: true,
                success: function(data) {
                    var json = jQuery.parseJSON(data);
                    var songTitle = json.icestats.source.title;
                    jQuery('#track-title').text( "Turbo80s.com - "+songTitle );
                    jQuery('#current-track-title').text( songTitle );
                }
            });
        }
        
        $(function() {
            updateTitle();
            setTimeout(function(){updateTitle();}, 2000);
            setInterval(function(){updateTitle();}, 15000);
            $('.nav-link').on('click',function() {
              $('.navbar-collapse').collapse('hide');
            });
        });
        
    </script>
    
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0L92P5291Y"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-0L92P5291Y');
    </script>

<?php
if ( 1 == 2 ) { ?>
    <!-- Meta Pixel Code -->
    <script>
        !function(f,b,e,v,n,t,s)
        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
                'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '534993651545126');
        fbq('track', 'PageView');
    </script>
    <!-- End Meta Pixel Code -->

    <!-- Twitter universal website tag code -->
    <script>
        !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
        },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js',
            a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
            // Insert Twitter Pixel ID and Standard Event data below
            twq('init','o8tuy');
            twq('track','PageView');
    </script>
    <!-- End Twitter universal website tag code -->
<?php
}
?>
    
</head>
<body>
    
    <div class="container">
        
        <?php
        nav_bar()
        ?>
        
        <div class="header bg-nav">
            
            <div class="row justify-content-md-center">
            
                <div class="col col-lg-3 pageLink">
                    <a class="pageLink" href="<?=BASEURL; ?>">
                        <img src="<?=BASEURL; ?>/images/turbo80s-com-logo.svg?20221221" alt="Turbo80s.com Logo" title="Turbo80s.com" style="padding: 5px 0 5px 5px;" />
                    </a>
                </div>
                
                <div class="col col-lg-9">
                    <div class="strip-line_header">
                        <div class="strip-line">
                            Hot 80s and a few sneaky 90s
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>

        <div class="row">
            <div style="width:100%; height:20px;"></div>
        </div>        
        
        <div class="row bgwhite player-div">
            
            <div style="width:100%; height:12px;"></div>
            
            <div class="col-sm-6">
                
                <h2 class="nowPlaying">
                    <span id="nowPlayingText">Playing Now:</span><br />
                    <div id="current-track-title"></div>
                </h2>
                
                <div class="simplePlayer" id="mainPlayer" style="display:none;">

                    <audio id="my-audio" preload>
                        <source src="https://transmitter.turbo80s.com:8443/live.mp3" type="audio/mpeg">
                    </audio>

                </div>
                
                
                
                <div class="audio-controls">
                
                    <div class="player-buttons">

                        <button id="player-play">
                            <span class="mdi mdi-play"></span>
                        </button>

                        <button id="player-stop" style="display:none;">
                            <span class="mdi mdi-stop"></span>
                        </button>

                    </div>

                    <div style="width:100%; height:12px;"></div>

                    <div class="player-volume">

                        <input id="volume" type="range" min="0" max="100" step="1" value="100" style="display:none;" />
                        <label class="visually-hidden" for="volume">Volume</label>

                    </div>

                </div>
                
            </div>

            <div class="col-sm-6">
                
                <p align="center"><?php
                get_ad( "lrg_rect" );
                ?></p>
                
            </div>

        </div>
            
        <div class="row bgwhite" id="contentArea">
            <div style="width:100%; height:12px;"></div>
            <div class="content"></div>
        </div>

        <div class="row bgwhite">
            <div class="heading-banner-03"></div>
        </div>
        
    </div>
    
   <link rel="stylesheet" href="https://telbee.io/channel/ro808c5phhuuou-ogpfyha/telbee-vox.min.css"/><script id="react-telbee-script-tag" src="https://telbee.io/channel/ro808c5phhuuou-ogpfyha/telbee-vox.min.js?OwnTriggerButton=true"></script>
   
<?php
print_footer();
?>
    
</body>

<script type='text/javascript'>
    
    var notSafari = true
    if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
        notSafari = false
    }
    
    
    $(function() {
        
        $('#player-play').click( function(e){
            var audio = $("#my-audio");
            audio[0].load();
            audio[0].play();
            $("#player-stop").show();
            if ( notSafari ) {
                $("#volume").show();
            }
            $("#mainPlayer").css("background-image", "url(images/cassette-tape.svg)");
            $("#mainPlayer").show();
            $("#player-play").hide();
        });
        
        $('#player-stop').click( function(e){
            var audio = $("#my-audio");
            audio[0].currentTime = 0;
            audio[0].pause();
            $("#player-play").show();
            $("#player-stop").hide();
            $("#volume").hide();
            $("#mainPlayer").hide();
        });
        
        $("#volume").on('input', function(e){
            var audio = $("#my-audio");
            var myVolume = ( $(this).val() / 100 );
            audio[0].volume = myVolume;
        });
        
    });
 

    $(function(){
        
        var mainContainer = $("html,body");
        var scrollTo = $('#contentArea');

        var History = window.History;
        if (History.enabled) {
            var page = get_url_value('page');
            var path = page ? page : 'home';
            // Load the page
            load_page_content(path);
        } else {
            return false;
        }

        History.Adapter.bind(window, 'statechange', function() {
            var State = History.getState();
            // Do ajax
            load_page_content(State.data.path);
            // Log the history object to your browser's console
            History.log(State);
        });
        
        $('body').on('click', 'a.nav-link-np', function(e) {
            var urlPath = $(this).attr('href');
            History.pushState({path: urlPath}, title, urlPath);
        });

        $('body').on('click', 'a.nav-foot', function(e) {
            var urlPath = $(this).attr('href');
        });

        $('body').on('click', 'nav a', function(e) {
            e.preventDefault();
            var urlPath = $(this).attr('href');
            var title = $(this).text();
            mainContainer.animate({scrollTop: ( scrollTo.offset().top - 250 ) },300);
            History.pushState({path: urlPath}, title, './?page=' + urlPath);
        });

        $('body').on('click', '.pageLink', function(e) {
            e.preventDefault();
            var urlPath = $(this).attr('href');
            var title = $(this).text();
            mainContainer.animate({scrollTop: ( scrollTo.offset().top - 250 ) },300);
            History.pushState({path: urlPath}, title, './?page=' + urlPath);
        });

        function load_page_content(page) {
            $.ajax({  
                type: 'post',
                url: page + '.php',
                data: {},                      
                success: function(response) {
                    $('.content').html(response);
                }
            });
        }

        function get_url_value(variable) {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
        }
    });

</script>

</html>
