source: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/qtip-popups.js@ 29891

var cueIdxOn = -1;

function qtinit() {
    
    var overlay= document.getElementById('overlay');
    var video= document.getElementById('video');
    
    video.addEventListener('timeupdate', function() {

    
    var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#bubForm').val() || "";
    if (trivia_layer_on != "PopupTrivia") {
        return;
    }
    // Only get to here if asked for the popup trivia layer
    //console.log("***#### trivia layer on = " + trivia_layer_on);

    vidTimeStamp = video.currentTime;
    var textTrack = document.getElementById('bubbles').track;
        
    // for each cue
    if (cueIdxOn>-1) {
        // there is a cue presently on
        // check if need to turn off cue
        if (textTrack.cues[cueIdxOn].endTime<vidTimeStamp) {
        // turn off
        hideBubble();
        console.log("turn off cue:"+cueIdxOn);
        cueIdxOn = -1;
        }
    }
    
    if (cueIdxOn==-1) {
        
        for (var cueIdx = 0; cueIdx < textTrack.cues.length; cueIdx++) {
        
        if (vidTimeStamp>=textTrack.cues[cueIdx].startTime && vidTimeStamp<textTrack.cues[cueIdx].endTime) {
            console.log("show cue:"+cueIdx);
            // turn on
            showBubble(cueIdx);
            cueIdxOn = cueIdx;
        }
        }
    }
    
    
    }, false);
    
    video.addEventListener('loadedmetadata', function () {
    console.log("loadedmetadata");
    });
    
}

function showBubble(cueIdx) {
    
    var iCue = document.getElementById('bubbles').track.cues[cueIdx];
    
    // Debug show the track properties and events.
    /*for (var prop in iCue) {
      if(iCue.hasOwnProperty(prop)){
      console.log(prop + " = " + iCue[prop]);
      }
      }*/
                    
    var objBubble = JSON.parse(iCue.text);
    console.log(objBubble.title);
    
    // Create qtip JQuery bubble.
    $('#overlay').qtip({
    overwrite: "true",
    content: {
        title: objBubble.title,
        text: objBubble.text,
        button: 'Close'
    },
    style: {
        tip: {
        corner: 'bottom left'
        },
            widget: true, // Use the jQuery UI widget classes
            def: false // Remove the default styling (usually a good idea, see below)
    },
        show: {
            effect: function() {
                $(this).show('slide', 500);
            }
        },
        hide: {
            effect: function() {
                $(this).hide('puff', 500);
            }
        }
    });
    
    // Position the bubble div.
    var divBubble = document.getElementById('overlay');
    divBubble.style.left = objBubble.xpos;
    divBubble.style.top = objBubble.ypos;
    
    // Show the qtip bubble.
    $('#overlay').qtip().show();
}

// Hide the qtip bubble.
function hideBubble() {
    console.log("onexit fired");
    $('#overlay').qtip().hide();
}

window.addEventListener("load",qtinit);