<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="uscYouTubePlaylist.ascx.vb" Inherits="MailEnable.Clients.WebMail.Mondo.uscYouTubePlaylist" %>

<script type="text/javascript">
    //
    // Requires: JQuery, LIBCommon, LIBCore
    // 

    var ytplayer = null;            // the youtube player (javascript) object
    var ytplayer_playlistVideos = null;    // an array of the video IDs
    var ytplayer_ready = false;      // We need to know when the player is ready for us to use it
    
    var PLAYER_WIDTH = "500";
    var PLAYER_HEIGHT = "300";
    var PLAYER_MIN_SWFVERSION = "8";
    var PLAYER_ID = "myytplayer";
    
    var DIV_PLAYLIST = "div_ytplaylist";
    var DIV_PLAYER = "div_ytplayer";
    var DIV_PLAYER_SHELL = "div_ytplayer_shell";
    
    var PLAYER_STATUS_UNSTARTED = -1;
    var PLAYER_STATUS_ENDED = 0;
    var PLAYER_STATUS_PLAYING = 1;
    var PLAYER_STATUS_PAUSED = 2;
    var PLAYER_STATUS_BUFFERING = 3;
    var PLAYER_STATUS_CUED = 5;

    var ytplayer_initialize = false;
   
    
    $(document).ready(function() 
    {
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    });

    function onYouTubeIframeAPIReady() {
        ytplayer = new YT.Player(DIV_PLAYER, {
            height: '300',
            width: '500',
            wmode: 'transparent',
            playerVars: {'wmode': 'transparent'},
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady() {
        ytplayer_ready = true;
        
        if (ytplayer_playlistVideos != null) ytplayer_init(ytplayer_playlistVideos);
    }

    function ytplayer_setPlaylist(arrVideos) {
        ytplayer_playlistVideos = arrVideos;

        if (ytplayer_ready) ytplayer_init(ytplayer_playlistVideos);
    }

    function ytplayer_init(arrVideos) {

        if (!ytplayer_initialize) {
            
            if (arrVideos && arrVideos.length > 0) {
                
                ytplayer_loadPlaylist(arrVideos, true);
                ytplayer_showPanel();                
            }
            ytplayer_initialize = true;
        }
    }

    function setCloseButtonText(text)
    {
        $("#div_playlist_close > a").html(text);
    }

    function ytplayer_showPanel()
    {
        $("div.vidPreview_shell").show();
    }

    function ytplayer_hidePanel()
    {
        $("div.vidPreview_shell").hide();
    }

    function ytplayer_showPlayer()
    {
        //$("#" + DIV_PLAYER_SHELL).slideDown(300);
        $("#" + DIV_PLAYER_SHELL).show();
    }

    function ytplayer_hidePlayer()
    {
        //$("#" + DIV_PLAYER_SHELL).slideUp(300);
        $(".vidPreview_video").css("display", "none");
        
    }
    
    function ytplayer_getVideoIDFromURL(URL)
    {
        //
        // e.g. http://www.youtube.com/watch?v=EGS4p15DIlY
        // or http://youtu.be/EGS4p15DIlY
        //

        var regex = /www\.youtube\.com\/(watch|watch_popup)\?\w*v=([a-zA-Z0-9_-]+)/g;
        var match = null;
        if (match = regex.exec(URL))
        {
            return match[1];
        }
        else
        {
            // try alternative (short) youtube URL's
            regex = /http:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/g;
            if (match = regex.exec(URL))
            {
                return match[1];
            }
        }
        return "";
    }
    
    function ytplayer_loadPlaylist(videos, loadFirst)
    {
        //
        // takes an array of youtube videoIDs and adds them to our playlist 
        // (as clickable thumbnails or small YouTube icons)
        //
        
        if (videos == undefined)
            return;
            
        var playlist = document.getElementById(DIV_PLAYLIST);
        var ul = document.createElement("ul");
        
               
        // first clear any previously added thumbs
        ytplayer_clearPlaylist();
        
        for (var i = 0; i < videos.length; i++)
        {
            var videoID = videos[i];
            var li = document.createElement("li");
            var a = document.createElement("a");
            var img = document.createElement("img");

            li.style.cursor = "pointer";
     
            // use video thumbnails for playlist items
            img.src = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
            
            a.id = "pl_" + videoID;
            a.appendChild(img);
            
            a.onclick = ( function(j) { return function() { ytplayer_selectVideo(j, true); } } )(videoID);
            
            li.appendChild(a);
            ul.appendChild(li);
        }
        
        playlist.appendChild(ul);

        if ( (videos.length > 0) && loadFirst )
        {
            // initialise the player with first video in the playlist
            ytplayer_selectVideo(videos[0], false);
        }
    }

    function onYouTubePlayerReady(playerId)
    {
        ytplayer = document.getElementById(PLAYER_ID);
        ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
    }

    function onPlayerStateChange(newState)
    {
        var state = ytplayer.getPlayerState();
    }
    
    function parseYouTubeInfo(data)
    {
        // http://code.google.com/intl/de-DE/apis/youtube/2.0/reference.html#youtube_data_api_tag_id
        
        var id = data.entry.id.$t.split("video:")[1];  // example id returned: "tag:youtube,2008:video:24Ryj1ywosw"
        var title = data.entry.title.$t;
        var description = data.entry.media$group.media$description.$t;
        var viewcount = data.entry.yt$statistics.viewCount;
        var author = data.entry.author[0].name.$t;
        var published = data.entry.published.$t;
        var duration = data.entry.media$group.media$content[0].duration;    // number of seconds

        var dateStr = ytplayer_getVideoDateStr(published);
        
        ytplayer_setTitleLabel(title);
        ytplayer_setDurationLabel(duration);
        ytplayer_setAuthorLabel(author, dateStr);
    }

    function getYouTubeInfo(videoID)
    {
        $.ajax({
            url: "http://gdata.youtube.com/feeds/api/videos/" + videoID + "?v=2&alt=json",
            dataType: "jsonp",
            success: function(data) { parseYouTubeInfo(data); }
        });
    }

    function ytplayer_clearPlaylist()
    {
        $("#" + DIV_PLAYLIST).empty();
    }
    
    function ytplayer_setTitleLabel(title)
    {
        $("#ytplayer_title").html(title);
        $("#ytplayer_title").show();
    }
    
    function ytplayer_setDurationLabel(duration)
    {
        var hours = (duration > (60 * 60)) ? Math.floor(duration / 60 / 60) : 0;
        var mins = Math.floor(duration / 60) % 60;
        var secs = Math.floor(duration % 60);
        
        var str = padZeros(hours, 2) + ":" + padZeros(mins, 2) + ":" + padZeros(secs, 2);
        
        $("#ytplayer_duration").html(str);
        $("#ytplayer_duration").show();
    }
    
    function ytplayer_setAuthorLabel(author, date)
    {
        $("#ytplayer_author").html('<%=GetText("[ME_TXT-UploadedBy]")%> <strong>' + author + '</strong> <%=GetText("[ME_TXT-OnDate]")%> <strong>' + date + '</strong>');
        $("#ytplayer_author").show();
    }
    
    function getMonthName(month)
    {
        var monthTokens = new Array(
            '<%=GetText("[ME_TXT-JanuaryLong]")%>', '<%=GetText("[ME_TXT-FebruaryLong]")%>', 
            '<%=GetText("[ME_TXT-MarchLong]")%>', '<%=GetText("[ME_TXT-AprilLong]")%>', 
            '<%=GetText("[ME_TXT-MayLong]")%>', '<%=GetText("[ME_TXT-JuneLong]")%>',
	        '<%=GetText("[ME_TXT-JulyLong]")%>', '<%=GetText("[ME_TXT-AugustLong]")%>', 
	        '<%=GetText("[ME_TXT-SeptemberLong]")%>', '<%=GetText("[ME_TXT-OctoberLong]")%>', 
	        '<%=GetText("[ME_TXT-NovemberLong]")%>', '<%=GetText("[ME_TXT-DecemberLong]")%>');
	        
	    return monthTokens[month];
    }
    
    function ytplayer_getVideoDateStr(UTCDateString)
    {
        var date = new Date(UTCDateString);
        return ( getMonthName(date.getUTCMonth()) + " " + date.getUTCDate() + ", " + date.getUTCFullYear() );
    }
    
    function ytplayer_togglePlaylistHideBttn(visible)
    {
        if (visible)
        {
            $("#div_playlist_label").hide();
            $("#div_playlist_close").show();
        }
        else
        {
            $("#div_playlist_close").hide();
            $("#div_playlist_label").show();
        }
    }
       
    function ytplayer_closeVideo()
    {       
        if (ytplayer)
        {            
            // stop the video if it had been started or was buffering
            var state = ytplayer.getPlayerState();
            
            if ( (state != PLAYER_STATUS_CUED) && (state != PLAYER_STATUS_UNSTARTED) )
            {
                ytplayer.stopVideo();
            }
        }
        
        // change Close Video button to a label
        ytplayer_togglePlaylistHideBttn(false);
        
        // hide the youtube player
        ytplayer_hidePlayer();

        // reset playlist selected styles (unselect all)
        ytplayer_resetSelectedStyles();
    }
    
    function ytplayer_resetSelectedStyles()
    {
        $("#" + DIV_PLAYLIST + " > ul > li").children().attr("class", "");
    }
    
    function ytplayer_setPlaylistSelectedStyle(videoID)
    {
        ytplayer_resetSelectedStyles();
        $("#pl_" + videoID).attr("class", "selected");
    }
    
    function ytplayer_selectVideo(videoID, autoplay) {
        ytplayer_setPlaylistSelectedStyle(videoID);
        ytplayer_togglePlaylistHideBttn(true);

        if (ytplayer == null)   // ytplayer not yet initialised
        {
            ytplayer_showPlayer();
            ytplayer_cueVideo(videoID, autoplay);
            return 1;
        }

        if ($("#" + DIV_PLAYER_SHELL).css("display") == "none") // player shell not yet made visible
        {
            ytplayer_showPlayer();
            if (ytplayer.getPlayerState == undefined)   // player lost its methods because it was hidden previously
            {
                return 0;
            }
            else
            {
                window.setTimeout(function() { ytplayer_cueVideo(videoID, autoplay); }, 1000);
            }
        }
        else    // player already visible
        {
            var loadedVideoID = ytplayer_getVideoIDFromURL(ytplayer.getVideoUrl());
            var state = ytplayer.getPlayerState();
            var videoLoaded = (videoID == loadedVideoID);

            if (videoLoaded)
            {
                // player has already loaded/cued the selected video
                return 1;
            }
            else
            {
                ytplayer_cueVideo(videoID, autoplay);
            }
        }
        
        return 1;
    }

    function ytplayer_cueVideo(videoID, autoplay) {
        getYouTubeInfo(videoID);

        if (ytplayer && (ytplayer.stopVideo != undefined))
        {
            ytplayer.stopVideo();

            if (autoplay) {
                ytplayer.loadVideoById(videoID);
            } else {
                ytplayer.cueVideoById(videoID);
            }
        }
        
        return 1;
    }

</script>


<div id="<%=Me.ID%>" class="vidPreview_shell">
  <h1 class="youtube"><%=GetText("[ME_TXT-YoutubeVideosInThisEmail]")%>:</h1>
  <div id="div_ytplaylist" class="vidPreview_gal">
    
  </div>
  <div class="vidPreview_bttns">
    <div id="div_playlist_label" style="display:block"><%=GetText("[ME_TXT-SelectAVideoToWatch]")%></div>
    <div id="div_playlist_close" style="display:none" onclick="ytplayer_closeVideo();"><span class="close" style="cursor:pointer;"><%=GetText("[ME_TXT-CloseVideo]")%></span></div>
  </div>
  <div id="div_ytplayer_shell" class="vidPreview_video">
  
    <div id="div_ytplayer" class="vidPreview_video_player">
       <div>You need Flash player 8+ and JavaScript enabled to view this video.</div>
    </div>
    
    <div class="vidPreview_video_info_left">
	  <h2 id="ytplayer_title" style="display:none"></h2>
      <span id="ytplayer_author" style="display:none"></span>
    </div>
    <div class="vidPreview_video_info_right">
      <h3 id="ytplayer_duration" style="display:none"></h3>
    </div>
  </div>
  
</div>
<div class="clear_div"></div>