var BC_API_URL = "http://api.brightcove.com/services/library";
var BC_TOKEN = escape("Gv7NpCjRnrnXpZISCi4VSsnB3mD4GkX9Zt3VJB6Uig4.");
var BC_LINEUP_ID = 1374413530;
var bc_gCurrentVideoId = 1377895190;

var bc_gArrayOfVideos = null;

var bc_slider = null;
var bc_sliderAreaHeight = null;
var bc_gHeight = 0;
var player = null;
var content = null;
var video = null; 

var bc_gLoadedVideos = new Array(); 

window.onload = function () { 
	bc_getPlaylists();
	bc_slider = new Control.Slider(
	'bc_scrubber', 
	'bc_scrubberContainer', 
	{
		onChange: function(value) {
			bc_handleScrubChange(value);
		},
		onSlide: function(value) {
			bc_handleSlideChange(value);
		},
		axis: "vertical"
	});
}

function bc_handleSlideChange(pVal) {
	var newTop = Math.ceil(pVal * bc_gHeight) * -1;
	$('bc_slideContainer').style.top = newTop + "px";
}

function bc_handleScrubChange(pVal) {
	var newTop = Math.ceil(pVal * bc_gHeight) * -1;
	$('bc_slideContainer').style.top = newTop + "px";
}

/**
 * calls the API method for finding videos by campaign id, using the constants for the publisher and campaign
 * 
 */ 
 function bc_getPlaylists() {
	var findVideosURL = BC_API_URL  + "?command=find_playlist_by_id&playlist_id=" + BC_LINEUP_ID + "&token=" + BC_TOKEN + "&callback=bc_playlistsResults";
	var scriptElem = document.createElement('script');
    scriptElem.setAttribute('src', findVideosURL);
    scriptElem.setAttribute('type','text/javascript');
    document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

function bc_playlistsResults(pObj) {
	bc_gArrayOfVideos = pObj.videos;
	var right = false;
	var top = 0;
	for(var i = 0; i < bc_gArrayOfVideos.length; i++) {
		bc_gLoadedVideos[bc_gArrayOfVideos[i].id] = false;
		var div = document.createElement('div');
		div.className = "thumbContainer";
		div.style.top = top + "px";
		if(right) {
			div.style.left = "220px";
		}
		div.innerHTML = "<img src='" + bc_gArrayOfVideos[i].thumbnailURL + "' alt='thumb' class='bc_thumb' onclick='loadVideo(" + bc_gArrayOfVideos[i].id + ")'/>";
		document.getElementById('bc_slideContainer').appendChild(div);
		
		//Create the title area container
		var div = document.createElement('div');
		div.id = "bc_titleContainer_" + bc_gArrayOfVideos[i].id;
		div.className = "bc_titleContainer";
		if(bc_gArrayOfVideos[i].id == bc_gCurrentVideoId) {
			div.style.backgroundColor = "#00a1e0";
		}
		div.style.top = top + 135 + "px";
		if(right) {
			div.style.left = "220px";
			right = false;
			top = top + 185;
		} else {
			right = true;
		}
		if(bc_gArrayOfVideos[i].id == bc_gCurrentVideoId) {
			div.innerHTML = "<div id='bc_artist_" + bc_gArrayOfVideos[i].id + "' class='bc_artist' style='color:#ffffff' onclick='loadVideo(" + bc_gArrayOfVideos[i].id + ")'>" + bc_getArtist(bc_gArrayOfVideos[i].name) + "</div><div onclick='loadVideo(" + bc_gArrayOfVideos[i].id + ")'>" + bc_getTitle(bc_gArrayOfVideos[i].name) + "</div>";
		} else {
			div.innerHTML = "<div id='bc_artist_" + bc_gArrayOfVideos[i].id + "' class='bc_artist' onclick='loadVideo(" + bc_gArrayOfVideos[i].id + ")'>" + bc_getArtist(bc_gArrayOfVideos[i].name) + "</div><div onclick='loadVideo(" + bc_gArrayOfVideos[i].id + ")'>" + bc_getTitle(bc_gArrayOfVideos[i].name) + "</div>";
		}
		document.getElementById('bc_slideContainer').appendChild(div);
	}
	bc_gHeight = (bc_gArrayOfVideos.length % 2 == 0) ? top - 420 : top - 235;
}

function bc_getArtist(pTitle) {
	try {
		return pTitle.substr(0, pTitle.indexOf('"'));
	} catch (e) {
		return " ";
	}
}

function bc_getTitle(pTitle) {
	try {
		return pTitle.substr(pTitle.indexOf('"'), pTitle.length);
	} catch (e) {
		return " ";
	}
}


	
	// called when template loads, we use this to store a reference to the player and modules
	// and add event listeners for the video load (when the user clicks on a video)
	function onTemplateLoaded(pEvent) {
		player = bcPlayer.getPlayer("myPlayer");
		video = player.getModule(APIModules.VIDEO_PLAYER);
		content = player.getModule(APIModules.CONTENT);
		content.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad);
		video.addEventListener(BCVideoEvent.VIDEO_COMPLETE, onVideoComplete);
	}
  
	// handles click event from list items 
	function loadVideo(id) {
		$('bc_titleContainer_' + bc_gCurrentVideoId).style.backgroundColor = "transparent";
		$('bc_artist_' + bc_gCurrentVideoId).style.color = "#00a1e0";
		$('bc_titleContainer_' + id).style.backgroundColor = "#00a1e0";
		$('bc_artist_' + id).style.color = "#ffffff";
		bc_gCurrentVideoId = id;
		if(bc_gLoadedVideos[id]) {
			video.loadVideo(id);
		} else {
			content.getVideoAsynch(id);
		}
		
	}
	
	function onVideoLoad(event) {
		bc_gLoadedVideos[event.video.id] = true;
		video.loadVideo(event.video.id);
	}
	
	function onVideoComplete(pEvent) {
		for(var i = 0; i < bc_gArrayOfVideos.length; i++) {
			if(bc_gArrayOfVideos[i].id == bc_gCurrentVideoId) {
				try {
					//bc_gCurrentVideoId = bc_gArrayOfVideos[i + 1].id;
					loadVideo(bc_gArrayOfVideos[i + 1].id);
					return;
				} catch (e) {
					//We have hit the end of the array.
					return;
				}
			}
		}
	}