// This is a wrapper for Extron's licensed flowplayer
// function extronFlowPlayerStreaming() plays videos from a streaming server.
// function extronVideo() gets video data from database and creates video player and bookmarks on the web page. (recommended)

var flowplayerJS = "/inc/jquery/jqueryTools/flowplayer-3.2.6.min.js";
var flowplayeripad = "/inc/jquery/jqueryTools/flowplayer.ipad-3.2.2.min.js";
var flowplayerJSLoaded = false;
var flowplayerKey = "#@6d6da12527716a64dd9";
var flowplayerSWF = "/inc/jquery/jqueryTools/flowplayer.commercial-3.2.7.swf";
var flowplayerRTMP = "/inc/jquery/jqueryTools/flowplayer.rtmp-3.2.3.swf";
var contentPlugin = "/inc/jquery/jqueryTools/flowplayer.content-3.2.0.swf";
var captionsPlugin = "/inc/jquery/jqueryTools/flowplayer.captions-3.2.3.swf";

function extronFlowplayerStreaming(targetId, rtmpUrl, clipUrl, httpUrl, subtitleLang, autoStart, allowfullscreen, showplayagain, videoHeight, view, playagaintrans, videoId) {
    //video playback tracking vars
    var cuepointscreated = false;
    var viewPercents = [];
    if (videoId == undefined) { videoId = 0 };
    
    //These are effectively a private functions...
    //We don't want getFlowPlayer, popIn or popReturn exposed to anything outside of extron.flowplayer
    function getFlowPlayer() {
        //specify param playagain 1 if you want the play again button to show at end of video. playagain is hidden by default.
        var playagainparam = (typeof (showplayagain) != "undefined") ? showplayagain : 0;
        var whichView = (typeof (view) != "undefined") ? view : "";    // only set for tradeshow
        var hasSubtitle = false;
        var subtitlebarHeight = 50;
        var playagaintranslation = (typeof (playagaintrans) != "undefined") ? playagaintrans : "Play again";
        
        if (autoStart) {
            $("#" + targetId).html(""); //empty inner html so flowplayer will autostart
        };

        return $f(targetId, { src: flowplayerSWF, wmode: true }, {
            key: flowplayerKey,
            clip: {
                provider: 'rtmp',
                url: clipUrl,
                ipadUrl: httpUrl,
                captionsTrackFilter: "",
                //showCaptions: "true",
                scaling: 'fit',
                autoPlay: autoStart,
                autoBuffering: true,
                onStart: function () {
                    this.getPlugin("play").css({ opacity: 1 });

                    if (hasSubtitle == true) {  // subtitle in user language found                        
                        this.getPlugin("subtitles").show();     // show subtitles
                        if (whichView == "videogrid") {
                            this.getScreen().css({ bottom: subtitlebarHeight, height: parseInt(videoHeight) - subtitlebarHeight });   // resize video screen                            
                        }
                        else {
                            this.getScreen().css({ bottom: 25 });   // reposition video screen
                        }
                        this.getPlugin("controls").css({ bottom: subtitlebarHeight });      // reposition control bar                        
                    }
                    else {
                        this.getPlugin("subtitles").hide();     // hide subtitles
                        this.getScreen().css({ bottom: 0 });    // reposition video screen
                        this.getPlugin("controls").css({ bottom: 0 });  // reposition control bar                       
                    }
                },
                onFinish: function () {
                    this.getPlugin("play").css({ opacity: playagainparam }); setTimeout("$('.morevideoslink').click();", 2000);
                },
                onMetaData: function () {   // this function gets called before clip.onStart()                    
                    // determine whether subtitle in user language exists (look at video clip's track meta data)
                    var clip = this.getClip();
                    var trackInfo = clip.metaData.trackinfo;
                    var trackId;
                    for (var i = 0; i < trackInfo.length; i++) {
                        if (trackInfo[i].language == subtitleLang && trackInfo[i].sampledescription[0].sampletype == "tx3g") { // subtitle in user language found
                            hasSubtitle = true;
                            trackId = i + 1;    // get corresponding track ID
                            break;
                        }
                    }

                    if (hasSubtitle == true) {  // subtitle in user language found
                        // show subtitles
                        clip.update({ 'captionsTrackFilter': 'trackid=' + trackId });   // set trackfilter
                        if (whichView != "videogrid") { $("#" + targetId).height(parseInt(videoHeight) + subtitlebarHeight); }     // resize video container
                    }
                    else {
                        $("#" + targetId).height(videoHeight);  // resize video container
                    }

                    // video view tracking
                    var t = clip.fullDuration;
                    if (typeof t !== "undefined" && cuepointscreated == false) {
                        clip.onCuepoint(
                            [
                                //Cuepoints are set in milliseconds, fullDuration returns seconds, hence the 1000x multiplier to get percent.
                                { time: 1000, percent: "0", vidId: videoId }, // 1 second after start
                                { time: t * 250, percent: "25", vidId: videoId },
                                { time: t * 500, percent: "50", vidId: videoId },
                                { time: t * 750, percent: "75", vidId: videoId },
                                { time: (t * 1000) - 5000, percent: "100", vidId: videoId } //5 seconds before the end.
                            ],
                            function (clip, cuepoint) {
                                // The Captions/Subtitles plugin causes multiple cuepoint triggers, regardless if there are actual subtitles. Only track percentages once.
                                if ($.inArray(cuepoint.percent, viewPercents) == -1) {
                                    $.ajax({ url: "/video/vidtrack.ashx?id=" + cuepoint.vidId + "&percent=" + cuepoint.percent, cache: false });
                                    viewPercents.push(cuepoint.percent); //Once a percent is tracked, place it in viewPercents so it won't be tracked again.
                                }
                            }
                        );
                        cuepointscreated = true;
                    }

                }
            },
            play: {
                replayLabel: playagaintranslation
            },
            canvas: { backgroundGradient: "none" },
            screen: {
                bottom: 0      // position video screen at distance X from the bottom edge of the layer
            },
            plugins: {
                rtmp: { url: flowplayerRTMP, netConnectionUrl: rtmpUrl },
                controls: { bottom: 0 },
                captions: {
                    url: captionsPlugin,
                    captionTarget: "subtitles",
                    button: null    // hide cc-button initally
                },
                subtitles: {
                    url: contentPlugin,
                    bottom: 0,
                    width: "100%",
                    height: subtitlebarHeight,
                    backgroundColor: "#003366",
                    backgroundGradient: "none",
                    borderRadius: 0,
                    border: 0,
                    style: {
                        body: {
                            fontSize: 14,
                            fontFamily: "verdana,arial,helvetica,sans-serif",
                            textAlign: "center",
                            color: "#ffffff"
                        }
                    },
                    display: "none"     // hide subtitles initially
                }
            },
            onBeforeFullscreen: function () {
                if (!allowfullscreen) {
                    if ($("#" + targetId).hasClass("docked")) {
                        popIn();
                    } else {
                        popReturn();
                    }
                    return false;
                }
            }
        }).ipad().play();
    }        

    function popIn() {
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
        $('#fade').click(function () { popReturn(); return false; });
        $("#" + targetId).removeClass("docked").addClass("popped");

        //center popup
        var popMargTop = ($("#" + targetId).height()) / 2;
        var popMargLeft = ($("#" + targetId).width()) / 2;
        $("#" + targetId).css({ 'margin-top': -popMargTop, 'margin-left': -popMargLeft });
    }

    function popReturn() {
        $("#" + targetId).css({ 'margin-top': '', 'margin-left': '' });
        $("#" + targetId).removeClass("popped").addClass("docked");
        $('#fade').fadeOut("fast", function () { $('#fade').remove() });
    }

    if (!flowplayerJSLoaded) {
        $.getScript(flowplayerJS, function () {
            $.getScript(flowplayeripad, function () {
                flowplayerJSLoaded = true;
                return getFlowPlayer();
            });
        });
    } else {
        return getFlowPlayer();
    }
}


function extronVideo(videoPlayerId, videoId, autoStart, allowFullscreen, useOrigSize, bookmarksId, firstBKItemText, firstBKItemVal, titleId, descId) {
    //USAGE: * = required
    // videoPlayerId* - the html id of the <div id=xxxx></div> element where the video will be inserted
    // videoId* - the FileID of the video
    // autoStart* - true/false. whether or not to start playing the video automatically
    // allowFullscreen* - true/false.
    //                  true: player's fullscreen button will make the player take over the entire screen.
    //                  false: player's fullscreen button will make the player pop-in over current page and dim the background
    // useOrigSize* - true/false.
    //                  true: if Dimensions data is stored, the videoPlayerId <div></div> element will be resized to those dimensions.
    //                  false: videoPlayerId will not be resized and whatever dimensions are currently set in the <div></div> will be retained.
    //
    // bookmarksId - the html id of the <select></select> element where video bookmarks (if any) will be listed
    // firstBKItemText - if set, the first dropdown item will show this text, setting this requires firstBKItemVal to be set as well.
    // firstBKItemVal - the value of the first dropdown item. recommended value is "0" including quotes.
    // titleId - the html id of the element where the Title text should be displayed
    // descId - the html id of the element where the Description text should be displayed
    
    var target = $("#" + videoPlayerId);

    //Get video data via json
    $.getJSON("/video/videodata.ashx?id=" + videoId, function (video) {
        if (video.length == 0 || video.IsLoaded == false) {
            target.hide();
        } else {

            //Show Bookmarks
            if (bookmarksId) {
                var bkSelect = $("#" + bookmarksId);
                bkSelect.empty();
                if (video.Bookmarks.length > 0) {
                    if (firstBKItemText) { bkSelect.append($("<option></option").attr("value", firstBKItemVal).text(firstBKItemText)); }
                    bkSelect.change(function () { $f(videoPlayerId).seek($(this).val()); });
                    $.each(video.Bookmarks, function () {
                        bkSelect.append($("<option></option>").attr("value", this.Seconds).text(this.Description));
                    });
                    bkSelect.show();
                } else {
                    bkSelect.hide();
                }
            }

            //set the width and height if desired and available
            if ((useOrigSize) && (video.Width > 0 & video.Height > 0)) {
                target.width(video.Width);
                target.height(video.Height);
            }

            //Title and Description text
            if (titleId) { $("#" + titleId).html(video.Title); }
            if (descId) { $("#" + descId).html(video.Description); }

            extronFlowplayerStreaming(videoPlayerId, video.RTMP_ServerURL, video.RTMP_ServerClip, autoStart, allowFullscreen);

        }
    });
}

function extronVideoPopIn(videoId, playlist) {
    var playlistparam = (typeof (playlist) != "undefined") ? '&playlist=' + playlist : '';
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    if (isipad()) {
        $('#fade').css({ 'width': '10000px', 'height': '10000px' });
        $('html, body').animate({ scrollTop: '0px' }, 300);
    }
    $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
    //$('#fade').click(function () { popReturn(); return false; });
    $('body').append('<iframe id="idVidBox" frameborder="0" scrolling="no" allowtransparency="true" src="/video/playvideo.aspx?popin=1&desc=0&id=' + videoId + playlistparam +'"></iframe>');
    $('body').append('<img id="idClosePlayerBtn" onclick="popReturn(); return false;" src="/img/btn_close24.png" border="0"/>');

    //center popup
    var popMargTop = ($("#idVidBox").height()) / 2;
    var popMargLeft = ($("#idVidBox").width()) / 2;
    $("#idVidBox").css({ 'margin-top': -popMargTop, 'margin-left': -popMargLeft });
    $("#idClosePlayerBtn").css({ 'margin-top': -(popMargTop-5), 'margin-left': popMargLeft-22 }).fadeIn();
    //$('#idClosePlayerBtn').click(function () { popReturn(); return false; });
}

function isipad() {
    return (navigator.platform.indexOf("iPad") != -1);
}

function noVidTn(el) {
    el.src = "/img/movie_reel.png";
    el.style.width = 80;
    el.style.height = 46;
    el.onerror = "";
    return true;
}

function popReturn() {
    $('#fade').fadeOut("fast", function () { $('#fade').remove() });
    $('#idVidBox').contents().find('object').remove(); //remove flash objects to prevent IE9 __flash__removeCallback error.
    $('#idVidBox').fadeOut("fast", function () { $('#idVidBox').remove() });
    $('#idClosePlayerBtn').fadeOut("fast", function () { $('#idClosePlayerBtn').remove() });
}