/**
 * @author brianlocicero
 */
var player;
var content
var exp;
var videoModule;
var cuePointsModule;
var cueArray;
var videoTitle;
var shortDescription;
var longDescription;
var videoThumbnail;


$(document).ready(function(){
    //$("div#relatedItems").prepend("<div id='contactUs'><img src='http://cnpg.com/vendor_assets/practiceworks/images/contactus_wide.jpg'/></div>");
    $("#cnCopyright").html("Website powered by <a href='http://dentalcompare.com'>CompareNetworks Production Group (CNPG)/Dentalcompare</a>");
    var relatedVideoRow = $('.relatedVideosRow')
    var collapsedHeight = (relatedVideoRow.height() + 11) * 4;
	var totalHeight = $('#relatedVideos').height();
    if (relatedVideoRow.length > 4) {
        relatedVideoRow.each(function(i, domElement){
            if (i > 3) {
                $('#relatedVideos').height(collapsedHeight)
            }
        })
        $('#relatedVideos').after('<a href="#" class="expandVideos">Show All Related Videos</a>');
        $('.expandVideos').toggle(function(){
			$('#relatedVideos').animate({height:totalHeight},600);
			$(this).text('Hide Additional Related Videos').addClass('open');
			return false;
        }, function(){
			$('#relatedVideos').animate({height:collapsedHeight},600);
			$(this).text('Show All Related Videos').removeClass('open')
			return false;
        })
        
    }
});


function onTemplateLoaded(id){
    //grab basic modules here
    player = brightcove.getExperience(id);
    content = player.getModule(APIModules.CONTENT);
    exp = player.getModule(APIModules.EXPERIENCE);
    exp.addEventListener(BCExperienceEvent.TEMPLATE_READY, onTemplateReady);
    videoModule = player.getModule(APIModules.VIDEO_PLAYER);
    videoModule.addEventListener("mediaChange", onVideoLoaded);
    videoModule.addEventListener("mediaSeek", onMediaSeek);
    cuePointsModule = player.getModule(APIModules.CUE_POINTS);
    cuePointsModule.addEventListener(BCCuePointEvent.CUE, onCuePoint);
}

function onTemplateReady(e){
    //grab other player components here
}

function onVideoLoaded(e){
    /*
     for (prop in e.media)
     {
     console.log(prop + " : " + e.media[prop]);
     }
     */
    videoTitle = e.media.displayName;
    shortDescription = e.media.shortDescription;
    longDescription = e.media.longDescription;
    videoThumbnail = e.media.thumbnailURL;
    
    //grab cue points from video, if any
    cueArray = cuePointsModule.getCuePoints(e.media.id);
    
    if (cueArray != null) {
        createChapters();
    }
    
}

function createChapters(){
    //add video navigation items
    var videoNavigationHTML = "<div id='videoNavigation'><div><img id='videoThumbnail' width='100' src=''><h5 id='videoSmallTitle'></h5><p id='videoShortDescription'></p></div><div id='chaptersContainer'><h2>Chapters</h2><ul id='videoChapters'></ul></div></div>";
    $("div#relatedItems").prepend(videoNavigationHTML);
    
    
    jQuery('h2.videoPlayerSubTitle').text(videoTitle);
    if (longDescription == null) {
        jQuery('p.videoPlayerDescription').text(shortDescription);
    }
    else {
        jQuery('p.videoPlayerDescription').text(longDescription);
    }
    
    jQuery('#videoNavigation #videoSmallTitle').text(videoTitle);
    jQuery('#videoNavigation #videoShortDescription').text(shortDescription);
    jQuery('#videoNavigation #videoThumbnail').attr('src', videoThumbnail);
    
    for (var i = 0; i < cueArray.length; i++) {
        //make sure these are not the auto-generated cue points
        if (cueArray[i].name != "Pre-roll" && cueArray[i].name != "Post-roll") {
            jQuery('#videoNavigation #chaptersContainer #videoChapters').append('<li>' + '<a id="cue' + cueArray[i].time + '" href="#" rel="' + cueArray[i].time + '">' + cueArray[i].name + '</a></li>')
        }
    }
    $('#videoNavigation').slideDown("800");
    //add click event to links
    jQuery('#videoNavigation #chaptersContainer #videoChapters li a').click(function(){
        videoModule.play();
        videoModule.seek(Number(jQuery(this).attr('rel')));
		return false;
    })
    
}

function onMediaSeek(e){
    setLinkStyles(e.position);
}

function onCuePoint(e){
    setLinkStyles(e.cuePoint.time);
}

function setLinkStyles(triggerTime){

    //first remove all active styles
    for (i = 0; i < cueArray.length; i++) {
        jQuery('#cue' + cueArray[i].time + '').removeClass("active");
    }
    
    //if it's greater than the last cue point time in the array, activate the last chapter in the array
    if (triggerTime > cueArray[cueArray.length - 1].time) {
        jQuery('#cue' + cueArray[cueArray.length - 1].time + '').addClass("active");
    }
    
    //if it's an exact match (cue point fires)
    for (i = 0; i < cueArray.length; i++) {
        if (triggerTime == cueArray[i].time) {
            jQuery('#cue' + cueArray[i].time + '').addClass("active");
        }
    }
    
    //if it's in-between two time points, then activate the chapter it's on
    for (i = 0; i < cueArray.length; i++) {
        if (triggerTime > cueArray[i].time && triggerTime < cueArray[i + 1].time) {
            jQuery('#cue' + cueArray[i].time + '').addClass("active");
        }
    }
    
    
}