﻿
var playlist = ["v2968A-v8KI", "VdYVg9Dp0zw", "4oEok5Gkr6E", "KLE8WJnhZ78", "TbJGtn7gFg0", "NvF7H1GxUGM", "oUjauS3h9oA", "nLMC4V7a-M8"];
var ytplayer;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };


var boxyContent;
$(document).ready(function () {

    $('#video-link').click(function () {

        boxyContent = "";
        boxyContent = $('<div id="training-videos">' +
'<div id="ytapiplayer">You need Flash player 9+ and JavaScript enabled to view this video.</div>' +
'<ul id="video-list" style="float:left">' +
'<li class="video-link-selected"><a href="javascript:;" class="video-link" id="first-video" rel="0">1. Searching</a></li>' +
'<li><a href="javascript:;" class="video-link" rel="1">2. Results</a></li>' +
'<li><a href="javascript:;" class="video-link" rel="2">3. Case Information</a></li>' +
'<li><a href="javascript:;" class="video-link" rel="3">4. Legislation Information</a></li>' +
'<li><a href="javascript:;" class="video-link" rel="4">5. EU Directives</a></li>' +
'<li><a href="javascript:;" class="video-link" rel="5">6. My JustCite</a></li>' +
'<li><a href="javascript:;" class="video-link" rel="6">7. Advanced Search</a></li>' +
'<li><a href="javascript:;" class="video-link" rel="7">8. Precedent Map</a></li>' +
'</ul>' +
'</div>')
        new Boxy(boxyContent, { title: "JustCite Training Videos", classname: "video-gallery", modal: true, afterShow: doVideos, unloadOnHide: true });


    });
});


function doVideos() {
    $('#training-videos').show();

    swfobject.embedSWF("http://www.youtube.com/e/v2968A-v8KI?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "640", "390", "9", null, null, params, atts);
    $('.video-link').click(function () {
        var videoIndex = $(this).attr('rel');
        ytplayer.loadPlaylist(playlist, videoIndex, 0, 'hd720');
    });
}

function undoVideos() {
    ytplayer.clearVideo();
}

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    ytplayer.loadPlaylist(playlist, 0, 0, 'hd720');
}

function onytplayerStateChange(newState) {
    if (newState == 1) {
        playIndex = ytplayer.getPlaylistIndex();
        $('.video-link').parent().removeClass('video-link-selected');
        $('.video-link[rel="' + playIndex + '"]').parent().addClass('video-link-selected');
    }
}


