<!-- 1. The <iframe> (and video player) will replace this <div> tag. 
Source:
https://developers.google.com/youtube/iframe_api_reference
https://megalytic.com/blog/tracking-youtube-videos-using-google-analytics
-->

<div id="player"></div>

<script>
// PWC: This grabs the Live Stream ID
// Code from https://wordpress.org/plugins/youtube-live-stream-auto-embed/
// Instructions: Channel ID from https://www.youtube.com/account_advanced
// API ID from https://console.developers.google.com/project
//     Create a Project, Add YouTube Data v3 API, Create Credentials
//     Use Public access, limit credentials to website
var YtChannelId = 'UCjddNuxZRxX3Xor7VLa8D2g';
var Yt_API_KEY = 'AIzaSyA92FxePp2Gp5M6yJk-SBRzPrtXjJE9a7g';
var videoId;
var refreshID;
var firstRequest = true;
var request;
var json;
var videoPlaceholder;
var videoPlayerMade = false;

function init() {
    gapi.client.setApiKey(Yt_API_KEY);
    gapi.client.load('youtube', 'v3').then(makeRequest);
}

function startRequest() {
    refreshID = setInterval(makeRequest, 30000);
}
      
function makeRequest() {
    request = gapi.client.youtube.search.list({
        part: 'snippet',
        channelId: YtChannelId,
        maxResults: 1,
        type: 'video',
        eventType: 'live'
    });
    request.then(function(response) {
        processResult(response);
        }, function(reason) {
          console.log('Error: ' + reason.result.error.message);
        }
    );
}
      
function processResult(result){        
    console.log(result);
    
    json = JSON.parse(result.body);
    if(json.pageInfo.totalResults == 0){ 
        videoId = 'nu6ZX2xHpCc'; // Placeholder
        console.log('Error: No Results from Search');
		if (!videoPlaceholder && videoPlayerMade) {
			player.loadVideoById (videoId)
		}
		videoPlaceholder = true;
    }
    else {
        videoId = json.items[0].id.videoId;
        if (videoPlaceholder && videoPlayerMade) {
            player.loadVideoById(videoId);
        }
	    videoPlaceholder = false;
    }
	
	if (!videoPlayerMade) {
		createIframe();
		startRequest();
	}
}

function createIframe() {
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
	videoPlayerMade = true;
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '560',
        width: '100%',
        videoId: videoId,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
  
  	// Embed Live Chat
	// https://support.google.com/youtube/answer/2524549?hl=en
	document.getElementById('chat').src = "https://www.youtube.com/live_chat?v=" +videoId+ "&embed_domain=www.tjcsj.org";

    
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        // do nothing, no tracking needed
    }
    
    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var pauseFlag = false;
    function onPlayerStateChange(event) {
        // track when user clicks to Play
        if (event.data == YT.PlayerState.PLAYING) {
            _gaq.push(['_trackEvent', 'Videos', 'Play', 'Test Video']);
            pauseFlag = true;
        }
        // track when user clicks to Pause
        if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
            _gaq.push(['_trackEvent', 'Videos', 'Pause', 'Test Video']);
            pauseFlag = false;
        }
        // track when video ends
        if (event.data == YT.PlayerState.ENDED) {
            _gaq.push(['_trackEvent', 'Videos', 'Finished', 'Test Video']);
        }
    }
}

</script>

<script src="https://apis.google.com/js/client.js?onload=init"></script>

<iframe class="iframe-youtube" src="https://www.youtube.com/embed/live_stream?channel=UCjddNuxZRxX3Xor7VLa8D2g" frameborder="0" width="100%" height="640" allowfullscreen=""></iframe>

// https://codepen.io/HanyHeikal/pen/ZQmKZK
// http://www.tagindex.net/css/frame/border.html

<iframe id="chat" src="https://www.youtube.com/live_chat?v=nu6ZX2xHpCc&embed_domain=www.tjcsj.org" width="100%" height="640" style="border: 4px solid #0084EF;" frameborder="1" scrolling="no"></iframe>

<script id="cid0020000130301083043" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 100%;height: 640px;">{"handle":"tjcsj","arch":"js","styles":{"a":"0084EF","b":100,"c":"FFFFFF","d":"FFFFFF","k":"0084EF","l":"0084EF","m":"0084EF","n":"FFFFFF","p":"10","q":"0084EF","r":100,"cnrs":"0.35","fwtickm":1}}</script>

<!--
<iframe src="http://tjcsj.chatango.com/" width="100%" height="480" --frameborder="0" scrolling="0"></iframe>
-->

<iframe id="chat" src="https://www.youtube.com/live_chat?v=nu6ZX2xHpCc&embed_domain=www.tjcsj.org" width="49%" height="640" style="border: 4px solid #0084EF;" frameborder="1" scrolling="no" align="left">></iframe>

<script id="cid0020000130301083043" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 49%;height: 640px;align:right">{"handle":"tjcsj","arch":"js","styles":{"a":"0084EF","b":100,"c":"FFFFFF","d":"FFFFFF","k":"0084EF","l":"0084EF","m":"0084EF","n":"FFFFFF","p":"10","q":"0084EF","r":100,"cnrs":"0.35","fwtickm":1}}</script>