var modVP;
var videoData;
var playerID = '30884189001';
var publisherID = '1509317113';

// called when template loads, we use this to store a reference to the player and modules
// and add event listeners for external Ads
function onTemplateLoaded(experienceID) {

	// 'experienceID' is equivalent to the html object id (ie: "myExperience")
	bcExp= brightcove.getExperience(experienceID);
	
	// Get a reference to the BC Module API
	modAd = bcExp.getModule(APIModules.ADVERTISING);
	modCon = bcExp.getModule(APIModules.CONTENT);		
	modExp = bcExp.getModule(APIModules.EXPERIENCE);
	modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);
	       
	// Add a callback function for events
	modVP.addEventListener("videoConnect", metaUpdate); 
}

function metaUpdate(evt) {
    var currentVideo = modVP.getCurrentVideo();
	document.getElementById("bc_title").innerHTML = currentVideo.displayName;
	document.getElementById("bc_description").innerHTML = currentVideo.shortDescription;
	if (currentVideo.linkURL != null) document.getElementById("bc_related").innerHTML = '<a href="' + currentVideo.linkURL + '">' + currentVideo.linkText + '</a>';
	document.getElementById("adCompanionBanner").innerHTML = '';	
}

// use the bctid query parameter as the default video
var queryParameters = ParseQueryString();
if (queryParameters['bctid']) { GetVideo(queryParameters['bctid']); }

function AddScriptTag(id,url,callback) {
	var scriptTag = document.createElement("script");
   
	scriptTag.setAttribute("type","text/javascript");
	scriptTag.setAttribute("charset","utf-8");
	scriptTag.setAttribute("src",url + "&callback=" + callback);
	scriptTag.setAttribute("id",id);
	
	var head = document.getElementsByTagName("head").item(0);
	head.appendChild(scriptTag);
}

function BuildPlaylistTiles(json) {
	for (var playlistNumber = 0; playlistNumber < playlistIds.length; playlistNumber++) {
		for (var channelNumber = 0; channelNumber < json['items'].length; channelNumber++) {
			if (playlistIds[playlistNumber] == json['items'][channelNumber]['id']) {
				MakeTileSet(playlistNumber,json['items'][channelNumber]);
			}
		}
	}
	PlayVideo("",videoData);
}
	
function GetPlaylists() {
	AddScriptTag("bc_playlists","http://api.brightcove.com/services/library?command=find_playlists_by_ids&playlist_ids=" + playlistIds.join(",") + "&video_fields=id,name,thumbnailURL,publishedDate,shortDescription,linkText,linkURL,length&token=wDB-OKhuEv7gy4b3wBJgWPW0fQk8ah32tzqhNiGVfYk.","BuildPlaylistTiles");
}

function GetVideo(videoId) {
	AddScriptTag("bc_playlists","http://api.brightcove.com/services/library?command=find_video_by_id&video_id=" + videoId + "&video_fields=id,name,thumbnailURL,publishedDate,shortDescription,linkText,linkURL,length&token=wDB-OKhuEv7gy4b3wBJgWPW0fQk8ah32tzqhNiGVfYk.","ParseVideoData");
}

function ParseVideoData(json) {
	videoData = json;
}
	
function ParseQueryString() {
	var queryString = document.location.search;
	var queryStringArray = new Array();
	if (queryString.length > 1) {
		queryString = queryString.substring(1,queryString.length); // remove ? from query string
		var queries = queryString.split("&");
		for (var queryNumber = 0; queryNumber < queries.length; queryNumber++) {
			queryStringArray[queries[queryNumber].split("=")[0]] = decodeURIComponent(queries[queryNumber].split("=")[1]);
		}
	}
	return queryStringArray;
}
	
function MakeTileSet(playlistNumber,json) {
	var counter = 1;
	for (var videoNumber = 0; videoNumber < json['videos'].length; videoNumber++) {
		var tile = MakeTile(json['videos'][videoNumber]);
		document.getElementById('bc_tiles_' + json['id']).appendChild(tile);
		
		// make 1st video of 1st playlist the default video if no video id was passed via query parameter
		if ((playlistNumber == 0) && (videoNumber == 0)) {
			if (! queryParameters['bctid']) { 
				videoData = json['videos'][videoNumber];
			}
		}
		counter++;
	}
	var playlistId = 'bc_tiles_' + json['id'];
	var playlistWidth = (130 * counter);
	document.getElementById(playlistId).style.width = playlistWidth + "px";			
}

function PlayVideo(element,json) {
	if (json['id']) {

		var params = {};
		params.playerID = playerID;
		params.videoId = json['id'];
		params.autoStart = "true";
		params.bgcolor = "#FFFFFF";
		params.width = "658";
		params.height = "400";
		params.isVid = "true";	
		params.autoStart = "false";		
		params.VideoDescriptionURL = "http://seattletimes.nwsource.com/flatpages/video/seattletimesvideo.html";
		
		var player = brightcove.createElement("object");
		player.id = playerID;
		var parameter;
		for (var i in params) {
		     parameter = brightcove.createElement("param");
		     parameter.name = i;
		     parameter.value = params[i];
		     player.appendChild(parameter);
		}			
		var playerContainer = document.getElementById("bc_player");
		brightcove.createExperience(player, playerContainer, true);
		
		document.getElementById("bc_title").innerHTML = json['name'];
		document.getElementById("bc_description").innerHTML = json['shortDescription'];
		if (json['linkURL'] != null) document.getElementById("bc_related").innerHTML = '<a href="' + json['linkURL'] + '">' + json['linkText'] + '</a>';
		document.getElementById("adCompanionBanner").innerHTML = '';
	}
}

function switchVideo (json) {

    // Get the current page URL remove any existing URL parameter
    var fullURL = document.location.toString();

    if(fullURL.indexOf("?") != -1) {
         var urlPath = fullURL.substring(0,fullURL.indexOf("?"));
    } else { 
         var urlPath = fullURL; 
    }	
	
	// Refresh the page adding the current playlist and video to the URL
	document.location = urlPath + "?bclid=" + playerID + "&bctid=" + json['id'];
}


function MakeTile(json) {
	var tile = document.createElement("div");
	tile.className = "bc_tile";
	
	var thumbnail = document.createElement("img");
	thumbnail.className = "bc_tile_thumbnail";
	thumbnail.setAttribute("src",json['thumbnailURL']);
	tile.appendChild(thumbnail);
	
	var body = document.createElement("div");
	body.className = "bc_tile_body";
	var title = document.createElement("p");
	title.className = "bc_tile_body_title";
	var titleText = document.createTextNode(json['name']);
	title.appendChild(titleText);
	body.appendChild(title);
	tile.appendChild(body);			

	tile.onclick = function() { switchVideo(json);};
	return tile;
}