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);