//youtube stuff
var tag = document.createElement('script');
var origin = "*";
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: '366',
    width: '600',
    videoId: 'OW7j5vaamSU',
    events: {
      'onReady': onPlayerReady
      //'onStateChange': onPlayerStateChange
    }
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    console.log('player ready')
    //event.target.playVideo();
}

function loadVideo(videoId){
    player.loadVideoById({'videoId':videoId,
        'startSeconds':0})
}

//youtube search

function ParseYouTubeURL(url){
    var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length == 11) {
      return match[2];
    } else {
      return false
    }
}


function youtubeSearch(pcIDVer){
    var term = $("#youtubeURL").val();
    $('#player').hide();
    $("#yt_thumb").attr('src','https://via.placeholder.com/640x360/dedede/ffffff?text=Retrieving+Video')
    $('#yt_thumb').show();
    $("#btnVideoSetup").css('visibility','hidden');
    if (ParseYouTubeURL(term)){
        var videoId = ParseYouTubeURL(term);
        var formData = {
            'videoId':videoId,
            'pcIDVer':pcIDVer
        };
        $.ajax({
            type: "GET",
            url: "/youtubesingle",
            data: formData,
            encode: true,
            timeout: 10000,
            success: function(data){
                var vidata = JSON.parse(data);
                loadVideo(videoId);
                var alt =  vidata['alt'];
                var thumb = vidata['personalized'];
                $("#yt_thumb").attr('src',vidata['personalized']);
                youtubeToClipboard(videoId, alt, thumb);
            }, error: function(data){
                $("#youtubeURL").val('');
                $("#youtubeURL").attr('placeholder','Setup permission denied; use another video');
            }
        });
    }
}

//tab switch
$(".carTab").on("click",function(){
    pauseVideos();
    $(".carMain").hide();
    $("#tabMain").removeClass('carTabOn');
    $("#tabYouTube").removeClass('carTabOn');
    switch(this.id) {
        case "tabYouTube":
            $("#tabYouTube").addClass('carTabOn');
            $("#youtube-main").show();      
            break;
        
        case "tabMain":
            $("#tabMain").addClass('carTabOn');
            $("#ffwd-main").show();
            break;
    }   
})

$("#youtubeURL").on("change",function(){
    $("#btnVideoSetup").css('visibility','visible');
})

//copy ffwd
$(".ffVideo").on('click',function(){
    var uber = $(this).data('uber');
    var alt = $(this).data('alt');
    var thumb = 'https://res.cloudinary.com/ffwd/image/upload/e_replace_color:0C2074:4:426BBA/t_/f_auto/t_L0-' + uber +'/l_admin:bluplay/w_640/ffwdvideo/t9.jpg';
    var url_base = '<div><a href="https://ctnt.co/video/UBER/"><img alt="ALT" src="THUMB" width="640" height="360" style="style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block; max-width: 100%; max-height:100%;"></a></div>';
    var url = url_base.replace('UBER',uber).replace('THUMB',thumb).replace('ALT',alt);
    clipboard.copy({
        "text/plain":url,
        "text/html":url
    });
})
function youtubeToClipboard(videoId, alt, thumb){
    var url_base = '<div><a href="https://ctnt.co/video/VIDEOID/"><img alt="ALT" src="THUMB" width="640" height="360" style="style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block; max-width: 100%; max-height:100%;"></a></div>';
    var url = url_base.replace('VIDEOID',videoId).replace('THUMB',thumb).replace('ALT',alt);
    clipboard.copy({
        "text/plain":url,
        "text/html":url
    });
}
function pauseVideos(){
    window._wq = window._wq || [];
    _wq.push({ id: "_all", onReady: function(video) {
      video.pause();
    }});
    //wistia_video.pause();
    player.stopVideo();
}

function carClose(){
    pauseVideos();
    window.parent.postMessage('bye',origin)
}
$(document).ready(function() {
    $('#player').hide();
    $('#yt_thumb').click(function() {
        $('#player').show();
        $('#yt_thumb').hide();
    });
    var coll = document.getElementsByClassName("collapsible");
    var i;
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        } 
      });
    }
    //event listener to close iframe
    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
        console.log(event);
    if (event.origin == origin)
        modal.style.display = "none";
    // ...
    }
});