// Set initial page number
var pageNumber = 0;
var startNumber = 1;
var startVideo = "";

// The web service call
var proxy       = "http://api.connectok.com/json/?method=BrightCoveProxy.GetProxy&limit=20";
var reqLibrary  = "http://api.brightcove.com/services/library?";
var reqCommand  = "command=find_playlist_by_id";
var reqParams   = "&playlist_id=" + playlistID;
var reqCallBack = "&callback=BCresponse";

var req = proxy + "&url=" + escape(reqLibrary + reqCommand + reqParams + reqCallBack);

function initCall() {
        document.getElementById('titleList').innerHTML = '';
        // Create a new request object
        bObj = new JSONscriptRequest(req, pageNumber); 
        // Build the dynamic script tag
        bObj.buildScriptTag(); 
        // Add the script tag to the page
        bObj.addScriptTag();
}
// Define the callback function, which
// writes out the HTML for each title item in the list
function BCresponse(jsonData) {
        var items = jsonData["videos"];
        var tDiv = document.getElementById("titleList");
        var i = startNumber - 1;
        var limit = startNumber + 1;
                
        while (i<limit) {
                
                var str = "";
                str += '<div>';
                str += '<div class="imageHolder">';
                str += '<div class="playThumb"><img src="http://static.newsok.biz/sites/newsok5/images/rollover_thumb.png"/></div>';
                str += '<div class="thumb"><img src="' + items[i].thumbnailURL + '"/></div>';
                str += '</div>';
                str += '<div class="title item'+[i]%2+'" onClick="playTitleFromList(' + items[i].id + ')">';
                str += '<div class="titleHolder">';
                str += '<p class="displayName">' + items[i].name + '</p>';
                //str += '<p class="displayName">' + items[i].name + ' <span class="displayTime">(' + formatTime(items[i].length) + ')</span>'+ '</p>';
                str += '<p class="desc">' + items[i].shortDescription + '</p>';
                str += '<div class="published">' + formatBCDate(items[i].publishedDate);
                if (items[i].playsTrailingWeek) {
                        str += ' | ' + items[i].playsTrailingWeek + ' views'
                }
                str += '</div>';
                str += '<div class="clear"></div>';
                str += '</div>';
                str += '<div class="clear"></div>';
                str += '</div>';
                tDiv.innerHTML += str;
                i++;
        }

        startVideo = items[0].id

}
// time is stored in milliseconds; we need to convert to a mm:ss display format
function formatTime(time) {
        var t_secs = Math.round(time/1000);
        var mins = Math.floor(t_secs/60);
        var secs = t_secs - (mins*60);
        if (secs < 10) {
                secs = "0" + secs;
        }
        return mins + ":" + secs;
}

var player;
var content;
var video;
var experience;
var layout;
  
// called when template loads, this function stores a reference to the player and modules.
// Then event listeners will be added for when the template is ready and when a user 
// clicks on a video.
function onTemplateLoaded(pEvent) {
        player = bcPlayer.getExperience("myExperience");
        video = player.getModule(APIModules.VIDEO_PLAYER);
        content = player.getModule(APIModules.CONTENT);
        experience = player.getModule(APIModules.EXPERIENCE);
        content.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad);
        experience.addEventListener(BCExperienceEvent.TEMPLATE_READY, onTemplateReady);
        video.addEventListener(BCVideoEvent.STREAM_START, onStreamStart);
}   
// handles click event from list items 
function playTitleFromList(id) {
        video.loadVideo(id);
}

function onStreamStart() {
    var currentVideo = video.getCurrentVideo();
    s.pageName='Video Play: ' + currentVideo.displayName
    var s_code=s.t();
    if(s_code)document.write(s_code)
}

function onTemplateReady(event) {
        video.cueVideo(startVideo);
}

function onVideoLoad(event) {
}