/**
 * @package VC brightcove.js
 * @author Tony Simbine
 * @Version 1.11, updated 2012.01.12 16:22
 * Copyright (c) 2009-2011 and developed by Tony Simbine <ejantos (at) yahoo.com>
 * Copyright (c) 2009-2011 OMS Online Marketing Service GmbH & Co. KG
 * @link http://www.oms.eu/
**/
var tsColor = {'PlayerTabs':['#FFFFFF', '#FFFFFF'], 'TabContainer':['#FFFFFF', '#FFFFFF'], 'pageList':['#ffffff', '#000'], 'videoThum':['#004080', '#c0c0c0']};
var tsXML = 'players.xml'; // Link zur players.xml
var tsVCdir = './'; // Link zu dem image-Verzeichnis
var TSplayerData = {'width':954,'height':410,'playlistTargeting':'playlistRefID','isVid':'true','isUI':'true','videoSmoothing':'true','dynamicStreaming':'true','tsVersion':'1.11'};
TSplayerData['height'] = 535; // Standard player
if (typeof IVW == 'undefined') var IVW = '';
if (typeof szmvars == 'undefined') var szmvars = '';
var TsNuggad = true;
var nuggadURL = 'http://oms.nuggad.net/rc?nuggn=1615459509&nuggtg=';// oms
if (typeof oms_zone == 'undefined') var oms_zone='videocenter';
if (typeof rmsi_zone != 'undefined') {oms_zone = rmsi_zone; nuggadURL = 'http://rmsi.nuggad.net/rc?nuggn=498868272&amp;nuggtg=';} // rms
if (typeof WLRCMD == 'undefined') WLRCMD = '';
var TsNuggadZone = '';
var TSplayerXML = '';
var tsPlayers = new Object();
var tsArgs, tsURL = '', tsVcSelPlayer;
var tsIVWKey = '', tsIVWCode = '', tsIVWComment = 'VideoCenter', tsIVWCurCode = '';
var TScoID = 50;
var tsBuilt = false;
var BC_OMS_TOKEN, BC_PLAYER_ID, vc_currentSelectedPlayerId, vc_currentSelectedTab, vc_lineups, parentEl, vc_pageLoad;
var BC_API_URL = 'http://api.brightcove.com/services/library';
var BC_ACCOUNT_TYPE = 'national';
var arrayOfPlayers = new Array();
var vc_currentView = 1;
var TScurrentView = 0;
var vc_tabCount = 0;
var vc_pageDisplayCount = 10;
var vc_lineupPosition = 0;
var vc_tsFirst = true;
var tsChanges = 0;
if (window.addEventListener) window.addEventListener('load', bc_getPlayerNames, false);
else if (window.attachEvent) window.attachEvent('onload', bc_getPlayerNames);
else window.onload = bc_getPlayerNames;

function bc_getToken() {
	return BC_OMS_TOKEN;
}

function tsCallIVW()	{
	if (typeof tsIVWURL == 'undefined' || tsIVWURL.length < 36)	return false;
	var tsMatch = /^https?:\/\/(\w+)\.ivwbox\.de\/cgi\-bin\/ivw\/\wP\/([^\'\;\+\"]+)(?:\;([^\"\']+))?/i.exec(tsIVWURL);
	if ((! tsMatch) || (tsMatch && tsMatch.length < 1))	return false;
	tsIVWKey = tsMatch[1];
	tsIVWCode = tsMatch[2];
	TSplayerData['tsIVWKey'] = tsIVWKey; 
	TSplayerData['tsIVWCode'] = tsIVWCode;
	if (tsMatch[3])	tsIVWComment = tsMatch[3];
	return true;
}

function tsProcIVW(tsKey, tsCode, tsComment) {
	if (tsKey.length < 2 || tsCode.length < 1)	return false;
	var args = bc_getArgs();
	if (args && args.bctid)	{
		if (vc_tsFirst)
	 		return false;
	 	if (! (args['bclid'] && args['bcpid']))
	 		return false;
	}
	if (vc_currentSelectedPlayerId && tsPlayers[vc_currentSelectedPlayerId] && tsPlayers[vc_currentSelectedPlayerId]['tsIvw'])
		tsCode = tsPlayers[vc_currentSelectedPlayerId]['tsIvw'];
	tsIVWCurCode = tsCode;
	if (! tsComment)	tsComment = tsIVWComment;
	IVW = window.location.protocol + '//' + tsKey + '.ivwbox.de/cgi-bin/ivw/CP/' + tsCode + ';' + tsComment;
	args = '<img id="tsIVWId" src="' + IVW + '?r=' + escape(document.referrer) + '&d=' + (Math.random() * 100000) + '" width="1" height="1" alt="" />';
	if ($('tsVideo') != null)	{
		$('tsVideo').innerHTML = args;
		if ('http:' == window.location.protocol) {
			szmvars = tsKey + '//CP//' + tsCode;
			var eLm = document.createElement('script');
			var fraboID;
			eLm.setAttribute('charset', 'UTF-8');
			eLm.setAttribute('src', 'http://' + tsKey + '.ivwbox.de/2004/01/survey.js');
			eLm.setAttribute('type', 'text/javascript');
			eLm.setAttribute('id', 'fraboID');
			if (fraboID = $('fraboID')) 
				$('fraboID').replaceChild(eLm, fraboID);
			else 
				$('tsVideo').parentNode.insertBefore(eLm, $('tsVideo').nextSibling);
		}
		return true;
	}
	return false;
}

function setNuggad(oms_zone) {
	TsNuggadZone = oms_zone;
	var xurl = nuggadURL + encodeURIComponent(oms_zone);
	var eLm = document.createElement('script');
	eLm.setAttribute('charset', 'UTF-8');
	eLm.setAttribute('src', xurl);
	eLm.setAttribute('type','text/javascript');
	eLm.setAttribute('id', 'nuggadID');
	if (xurl = document.getElementById('nuggadID'))
		document.getElementsByTagName('head')[0].replaceChild(eLm, xurl);
	else
		document.getElementsByTagName('head')[0].appendChild(eLm);
}

function bc_getArgs() {
	if (typeof tsArgs != 'undefined' && tsArgs.length > 0)
		return tsArgs;
	var args = new Object();
	tsArgs = args;
	tsArgs.tsNo = 0;
	var query = location.search.substring(1);
	tsURL = location.pathname + '?';
	if (query === '')
		return null;
	var pairs = query.split('&');
	for(var i = 0; i < pairs.length; i++) {
		var pos = pairs[i].indexOf('=');
		if (pos == -1)
			continue;
		var argname = pairs[i].substring(0, pos);
		var value = pairs[i].substring(pos+1);
		args[argname] = unescape(value);
		if (! /^(?:bc\wid|refer)$/i.test(argname))
			tsURL += argname + '=' + args[argname] + '&';
	}
	tsArgs = args;
	return args;
}

function bc_getPlayerNames() {
	var playerXML = false;
	var httpRequest;
	if (TSplayerXML.length > 50)	{
		try {
			if (window.ActiveXObject) {
				httpRequest = new ActiveXObject('Microsoft.XMLDOM');
				httpRequest.async = 'false';
				httpRequest.loadXML(TSplayerXML);
				playerXML = true;
			} else	{
				playerXML = new DOMParser();
				httpRequest = playerXML.parseFromString(TSplayerXML, 'text/xml');
				playerXML = true;				
			}
		} catch(e) {
			try {
				playerXML = new DOMParser();
				httpRequest = playerXML.parseFromString(TSplayerXML, 'text/xml');
				playerXML = true;
			} catch (e) {
				playerXML = false;
			}
		}
		if (playerXML)
			return(tsParseXML(httpRequest));
	}
	httpRequest = null;
	playerXML = null;
	if (window.XMLHttpRequest) {
		httpRequest = new XMLHttpRequest();
		if (httpRequest.overrideMimeType)
			httpRequest.overrideMimeType('text/xml');
	} else if (window.ActiveXObject) {
		try {
			httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
		} catch (e) {
			try {
				httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
			} catch (e) {}
		}
	}
	if (! httpRequest) return false;
	httpRequest.onreadystatechange = function() {
		if (httpRequest.readyState == 4) {
			if (httpRequest.status == 200) {
				playerXML = httpRequest.responseXML;
				tsResult = tsParseXML(playerXML);
			}
		}
	};
	httpRequest.open('GET', tsXML, true);
	httpRequest.send('');
}

function tsCreatePlayer(playerObj) {
	var i, tsPar;
	var TScplayer = brightcove.createElement('object');
	TScplayer.id = 'myExperience';
	TScplayer.setAttribute('class', 'BrightcoveExperience');
	for (i in TSplayerData)	{
		tsPar = brightcove.createElement('param');
		tsPar.name = i;
		tsPar.value = TSplayerData[i];
		TScplayer.appendChild(tsPar);
	}
	for (i in playerObj)	{
		tsPar = brightcove.createElement('param');
		tsPar.name = i;
		tsPar.value = playerObj[i];
		TScplayer.appendChild(tsPar);
	}
	if (TsNuggad && WLRCMD.length > 3)	{
		tsPar = brightcove.createElement('param');
		tsPar.name = 'additionalAdTargetingParams';
		tsPar.value = ';' + WLRCMD;
		TScplayer.appendChild(tsPar);		
	}
	return(TScplayer);
}

function tsParseXML(playerXML) {
	BC_OMS_TOKEN = playerXML.getElementsByTagName('national')[0].getElementsByTagName('token')[0].firstChild.nodeValue;
	var playerNodes = playerXML.getElementsByTagName('player');
	var obj;
	for (var i=0; i < playerNodes.length; i++) {
		obj = new Object();
		obj.name = playerNodes[i].getElementsByTagName('name')[0].firstChild.nodeValue;
		obj.id = playerNodes[i].getElementsByTagName('id')[0].firstChild.nodeValue;
		obj.account = playerNodes[i].getElementsByTagName('account')[0].firstChild.nodeValue;
		if (playerNodes[i].getElementsByTagName('tsivw').length > 0)
			obj.tsIvw = playerNodes[i].getElementsByTagName('tsivw')[0].firstChild.nodeValue;
		if (playerNodes[i].getElementsByTagName('tstoken').length > 0)
			obj.tsToken = playerNodes[i].getElementsByTagName('tstoken')[0].firstChild.nodeValue;
		if (playerNodes[i].getElementsByTagName('tsurl').length > 0)
			obj.tsUrl = playerNodes[i].getElementsByTagName('tsurl')[0].firstChild.nodeValue;
		if (playerNodes[i].getElementsByTagName('tscat').length > 0)
			obj.tscat = playerNodes[i].getElementsByTagName('tscat')[0].firstChild.nodeValue;
		if (playerNodes[i].getElementsByTagName('playerKey').length > 0)
			obj.playerKey = playerNodes[i].getElementsByTagName('playerKey')[0].firstChild.nodeValue;
		tsPlayers[obj.id] = obj;
		arrayOfPlayers[i] = obj;
		BC_PLAYER_ID = (i == 0 && BC_PLAYER_ID == null) ? obj.id : BC_PLAYER_ID;
		if (BC_PLAYER_ID == obj.id)
			BC_ACCOUNT_TYPE = obj.account;
	}
	var args = bc_getArgs();
	tsCallIVW();
	if (args && args.bcpid)
		BC_PLAYER_ID = args.bcpid;
	else
		BC_PLAYER_ID = arrayOfPlayers[0].id;
	bc_changePlayer(BC_PLAYER_ID, 1);
	bc_buildPlayerTabs();
	bc_buildVideoCenter();
	vc_tsFirst = false;
	return(true);
}

function bc_buildPlayerTabs() {
	if (! $('bc_playerTabContainer')) return;
	if (arrayOfPlayers.length < 2) {
		$('bc_playerTabContainer').style.display = 'none';
		return;
	} else
		$('bc_playerTabContainer').style.display = 'block';
	var htmlText = '';
	var pUrl;	
	for (var i=0; i < arrayOfPlayers.length; i++) {
		if (arrayOfPlayers[i]['tsUrl'] != null && arrayOfPlayers[i].tsUrl != '')
			pUrl = arrayOfPlayers[i].tsUrl;
		else
			pUrl = tsURL + 'bcpid=' + arrayOfPlayers[i].id;
		if(arrayOfPlayers[i].id == BC_PLAYER_ID)
			htmlText += "<div class='bc_playerTab' id='Tab" + arrayOfPlayers[i].id + "'><a href='" + pUrl + "' onclick='return bc_changePlayer(" + arrayOfPlayers[i].id + ",false),false;' style='color:" + tsColor.PlayerTabs[0] + "'>" + arrayOfPlayers[i].name.replace(/\s/g, '&nbsp;') + "</a> </div> ";
		else
			htmlText += "<div class='bc_playerTab' id='Tab" + arrayOfPlayers[i].id + "'><a href='" + pUrl + "' onclick='return bc_changePlayer(" + arrayOfPlayers[i].id + ",false),false;' style='color:" + tsColor.PlayerTabs[1] + "'>" + arrayOfPlayers[i].name.replace(/\s/g, '&nbsp;') + "</a> </div> ";
	}
	$('bc_playerTabContainer').innerHTML = htmlText;
}

function bc_changePlayer(pId, pFirst) {
	var args = bc_getArgs();
	if (args && args.bcpid)
		vc_pageLoad = (pFirst? true: false);
	else
		vc_pageLoad = false;
	var tsChanged = false;
	if (vc_currentSelectedPlayerId != pId)	{
		tsChanges++;
		tsChanged = true;
	}
	vc_currentSelectedPlayerId = pId;
	if (TsNuggad && tsChanged)	{
		var xoms_zone = oms_zone;
		if (vc_currentSelectedPlayerId && tsPlayers[vc_currentSelectedPlayerId] && tsPlayers[vc_currentSelectedPlayerId]['tscat'])
			xoms_zone = tsPlayers[vc_currentSelectedPlayerId]['tscat'];
		if (TsNuggadZone != xoms_zone)
			setNuggad(xoms_zone);
	}
	if ((! pFirst) && arrayOfPlayers.length > 1) {
		parentEl = $('bc_playerTabContainer');
		if (parentEl) {
			for (var i = 0; i < arrayOfPlayers.length; i++) {
				var childEl = parentEl.getElementsByTagName('div')[i];
				var childLink = childEl.getElementsByTagName('a');
				if (childEl.id == 'Tab' + pId) 
					childLink[0].style.color = tsColor.TabContainer[0];
				else 
					childLink[0].style.color = tsColor.TabContainer[1];
			}
		}
	}
	args = tsProcIVW(tsIVWKey, tsIVWCode, tsIVWComment);
	bc_changePlayerCallback({ });
}

function bc_changePlayerCallback(pObj) {
	var playlists = pObj.items;
	var args = bc_getArgs();
	var tsPlyID = (vc_pageLoad && args)? args.bcpid: vc_currentSelectedPlayerId;	
	var tsPlayerAd = {'playerID': tsPlyID, 'tsIVWCurCode': tsIVWCurCode, 'tsChange': tsChanges};
	if (tsPlyID && tsPlayers[tsPlyID] && tsPlayers[tsPlyID]['playerKey'])
		tsPlayerAd['playerKey'] = tsPlayers[tsPlyID]['playerKey'];
	else if (args && args.bcpid && tsPlyID == args.bcpid && args.playerKey)
		tsPlayerAd['playerKey'] = args.playerKey;
	if (! tsBuilt)	{
		if (args)	{
			if (args.bclid) tsPlayerAd['@playlistTabs.featured'] = args.bclid;
			if (args.bctid) tsPlayerAd['@videoList.featured'] = args.bctid;
		}
		$('bc_national_player').style.width = TSplayerData.width + 'px';
		$('bc_national_player').style.height = TSplayerData.height + 'px';
		tsBuilt = true;
	}
	$('bc_national_player').innerHTML = '';
	brightcove.createExperience(tsCreatePlayer(tsPlayerAd), $('bc_national_player'), true);
}

function bc_showOverlay(pId, pState) {
	$('thumbOverlay'+pId).style.display = ((pState == 1)? 'block': 'none');
}

/************************************************************************************
 * Global functions not related to any specific view
 ************************************************************************************/

/**
 * This is the function that is called once all other necessary page items
 * have been loaded. First the lineups for the current player are retrieved,
 * then each lineup is added to the left-side navigation.
 */
function bc_buildVideoCenter() {
	if (! $('vc_leftNavContainer')) return;
	vc_getPlaylists(arrayOfPlayers[0].id, arrayOfPlayers[0].account, true);
	var htmlText = '';
	if (arrayOfPlayers.length > 0)	{
		var i = 0;
		htmlText = '<div id="vc_playerNav_' + arrayOfPlayers[i].id + '" class="vc_playerNavOver" onclick="vc_getPlaylists(' + arrayOfPlayers[i].id + ');"><div class="vc_playerNavText">' + arrayOfPlayers[i].name + '</div><img src="' + tsVCdir + 'images/vc_arrow.png" class="vc_arrow"/><img src="' + tsVCdir + 'images/vc_arrowOver.png" class="vc_arrow" id="vc_arrow_' + arrayOfPlayers[i].id + '"/></div>';	
		for (i = 1; i < arrayOfPlayers.length; i++)
			htmlText += '<div id="vc_playerNav_' + arrayOfPlayers[i].id + '" class="vc_playerNav" onclick="vc_getPlaylists(' + arrayOfPlayers[i].id + ');"><div class="vc_playerNavText">' + arrayOfPlayers[i].name + '</div><img src="' + tsVCdir + 'images/vc_arrow.png" class="vc_arrow"/><img src="' + tsVCdir + 'images/vc_arrowOver.png" class="vc_arrow" style="display:none;" id="vc_arrow_' + arrayOfPlayers[i].id  + '"/></div>';
	}
	$('vc_leftNavContainer').innerHTML = htmlText;
}

/**
 * This function retrieves all of the lineups for a specified player.
 * First we reset the pagination container if we're in View 1, and then
 * the navigation is handled if this is not the first time handling the
 * player. We then make our BC API call.
 * 
 * @param {integer} pId - The ID of the player
 * @param {boolean} pFirstTime - Whether this is the first retrieval
 */
function vc_getPlaylists(pId, pFirstTime) {
	if (vc_currentView == 1)
		$('vc_paginationList').innerHTML = '';
	if (!pFirstTime)
		handleNav(pId);
	else
		vc_currentSelectedPlayerId = arrayOfPlayers[0].id;
	tsVcSelPlayer = vc_currentSelectedPlayerId;
	var findVideosURL = BC_API_URL  + '?command=find_playlists_for_player_id&player_id=' + pId + '&token=' + (tsPlayers[pId]['tsToken']? tsPlayers[pId].tsToken: BC_OMS_TOKEN) + '&callback=vc_playlistsResults&video_fields=id,name,thumbnailURL&playlist_fields=id,name,videos';
	var scriptElem = document.createElement('script');
	scriptElem.setAttribute('charset', 'UTF-8');
	scriptElem.setAttribute('src', findVideosURL);
	scriptElem.setAttribute('type','text/javascript');
	TScoID++;
	scriptElem.setAttribute('id', TScoID);
	document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

/**
 * This is the callback function for the BC API lineup call. First
 * we reset the inner container's position, then build the video center
 * based on the currently selected view.
 * 
 * @param {object} pObj - The object containing the lineup results
 */
function vc_playlistsResults(pObj) {
	if (! (pObj && pObj.items))
		return false;
	var playlists = pObj.items;
	$('vc_playerVideoInnerContainer').style.left = '0px';	
	if (vc_currentView == 1)
		vc_buildView1(playlists);
	else
		vc_buildView2(playlists);
}

/**
 * This function highlights the currently selected lineup's associated
 * navigation element.
 * 
 * @param {int} pId - The ID of the lineup
 */
function handleNav(pId) {
	if (vc_currentSelectedPlayerId) {
		$('vc_playerNav_' + vc_currentSelectedPlayerId).className = 'vc_playerNav';
		$('vc_arrow_' + vc_currentSelectedPlayerId).style.display = 'none';
		if (tsVcSelPlayer != null && tsVcSelPlayer != vc_currentSelectedPlayerId)	{
			$('vc_playerNav_' + tsVcSelPlayer).className = 'vc_playerNav';
			$('vc_arrow_' + tsVcSelPlayer).style.display = 'none';
		}
	}
	$('vc_playerNav_' + pId).className = 'vc_playerNavOver';
	$('vc_arrow_' + pId).style.display = 'block';
	vc_currentSelectedPlayerId = pId;
}

/**
 * This function switches between views. If switching to View 1 then
 * certain element are reset, while different elements are reset when
 * switching to View 2. After all of the elements have been reset we call
 * a function to retrieve the lineup.
 * 
 * @param {integer} pView - The desired view ( 1 / 2 )
 */
function switchView(pView) {
	vc_currentView = pView;
	if (vc_currentView == 1) {
		if ($('vc_paginationList').style.display == 'none') {
			$('vc_paginationList').style.display = 'block';	
			$('vc_playerVideoOuterContainer').style.background = tsColor.pageList[0];
			$('vc_playerVideoOuterContainer').innerHTML = "<div id='vc_playerVideoInnerContainer' class='vc_playerVideoInnerContainer'></div>";
		}
		$('vc_views').innerHTML = '<img src="' + tsVCdir + 'images/vc_view1_selected.png" /><img src="' + tsVCdir + 'images/vc_view2.png" onclick="switchView(2)" />';
	} else {
		$('vc_paginationList').style.display = 'none';
		$('vc_playerVideoOuterContainer').style.background = tsColor.pageList[1] + " url(images/vc_view2_bg.jpg) repeat-x bottom";
		$('vc_views').innerHTML = '<img src="' + tsVCdir + 'images/vc_view1.png" onclick="switchView(1)" /><img src="' + tsVCdir + 'images/vc_view2_selected.png" />';
	}
	vc_getPlaylists(vc_currentSelectedPlayerId);
}

/************************************************************************************
 * Functions related to View 1
 ************************************************************************************/

/**
 * This object builds the initial video center for View 1. First we assign
 * multiple variables their default properties, and then immediately check
 * for the number of players in the left-side navigation, as our rows and
 * heights will be based on this number. Next we loop through all of the
 * lineups for the player and build their thumbnails, positioning them
 * afterwards. If the number of videos reaches the vc_pageDisplayCount, then
 * we add a new pagination item through another function.
 * 
 * @param {object} playlists - All of the lineups
 */
function vc_buildView1(playlists) {
	vc_tabCount = 0;
	var vidCount = 0;
	var left = 7;
	var top = 8;
	var row = 1;
	var htmlText = '';
	if (arrayOfPlayers.length < 13) {
		vc_pageDisplayCount = 10;
		var rows = 2;
		if (($('vc_leftNavContainer').offsetHeight-1) < 324)
			var containerHeight = 324;
		else
			var containerHeight = ($('vc_leftNavContainer').offsetHeight-1);
		$('vc_playerVideoOuterContainer').style.height = containerHeight + 'px';
	} else {
		vc_pageDisplayCount = 15;
		var rows = 3;
		$('vc_playerVideoOuterContainer').style.height = ((arrayOfPlayers.length*37)-1) + 'px';
	}
	if (TScurrentView == 2)	{
		switchView(TScurrentView);
		TScurrentView = 0;
		return(true);
	}
	$('vc_paginationList').innerHTML = '';	
	for (var i=0; i < playlists.length; i++) {
		if (! playlists[i].videos)
			continue;
		var videos = playlists[i].videos;
		for (var j=0; j < videos.length; j++) {
			if (videos[j].thumbnailURL) {
				var imageSrc = "<img class='vc_thumb' src='" + videos[j].thumbnailURL + "'/>";
				var imageUrl = videos[j].thumbnailURL;
			} else {
				var imageSrc = "<span class='vc_video_thumb_blank' style='display:block;'></span>";
				var imageUrl = "<span class='vc_video_thumb_blank' style='display:block;'></span>";
			}
			if (vidCount < vc_pageDisplayCount)
				htmlText += "<div id='vc_video_" + vidCount + "' class='vidContainer' style='left:" + left + "px;top:" + top + "px' onmouseover='bc_showOverlay(" + vidCount + ",1); this.childNodes[0].style.borderColor=\"" + tsColor.videoThum[0] + "\"' onmouseout='bc_showOverlay(" + vidCount + ",0); this.childNodes[0].style.borderColor=\"" + tsColor.videoThum[1] + "\"'><div class='vc_thumbContainer'>" + imageSrc + "</div><div class='vc_vidTitleText'>" + videos[j].name + "</div>";
			else
				htmlText += "<div id='vc_video_" + vidCount + "' class='vidContainer' style='left:" + left + "px;top:" + top + "px' onmouseover='bc_showOverlay(" + vidCount + ",1); this.childNodes[0].style.borderColor=\"" + tsColor.videoThum[0] + "\"' onmouseout='bc_showOverlay(" + vidCount + ",0); this.childNodes[0].style.borderColor=\"" + tsColor.videoThum[1] + "\"'><div class='vc_thumbContainer'><span id='vc_video_thumb_" + vidCount + "'>" + imageUrl + "</span></div><div class='vc_vidTitleText'>" + videos[j].name + "</div>";
 			htmlText += "<div id='thumbOverlay" + vidCount + "' class='vc_thumbOverlay' style='display:none;left:11px;top:11px;' onclick=\"location.href='" + tsURL + 'bcpid=' + vc_currentSelectedPlayerId + "&bclid=" + playlists[i].id + "&bctid=" + videos[j].id + "'\"></div></div>";
 			if (row == 1) {
 				top = 165;
 				row++;
 			} else if (row == 2) {
 				if (rows == 3) {
 					top = 323;
 					row++;
 				} else {
 					top = 8;
 					left = left + 153;
 					row = 1;
 				}
 			} else if (row == 3) {
 				top = 8;
 				left = left + 153;
 				row = 1;
 			}
			if (vidCount%vc_pageDisplayCount == 0)
				vc_addPage(vidCount == 0);
			vidCount++;
		}
	}
	$('vc_playerVideoInnerContainer').innerHTML = htmlText;
}

/**
 * This function adds a new pagination element to the pagination container.
 * First we create the element, decide whether it's the first (and therefore
 * selected page), and then assign on onClick event.
 * 
 * @param {boolean} pFirst - Whether we're on the first pagination element
 */
function vc_addPage(pFirst) {
	var parent = $("vc_paginationList");
	
	var listItem = document.createElement('li');
	listItem.innerHTML = vc_tabCount+1;
	if (pFirst) {
		parent.innerHTML = '';
		listItem.className = 'vc_selectedTab';
		vc_currentSelectedTab = 0;
	} else
		listItem.className = 'vc_tab';
	listItem.id = 'li' + vc_tabCount;
	listItem.pagecount = vc_tabCount;
	listItem.onclick = function () {vc_handleTabSlide(this.pagecount)}
	if (vc_tabCount > (vc_pageDisplayCount-1))
		listItem.style.display = 'none';
	parent.appendChild(listItem);
	vc_tabCount++;
}

/**
 * This function updates the pagination elements to reflect any changes
 * based on user inputs. First we determine which pages should be visible,
 * and then either hide or display them.
 * 
 * @param {integer} pPage - The page selected
 */
function vc_updateNav(pPage) {
	var showStart = 0;
	if (pPage+((vc_pageDisplayCount/2)-1) >= vc_tabCount)
		showStart = vc_tabCount-vc_pageDisplayCount;
	else if (pPage > ((vc_pageDisplayCount/2)-1)) {
		showStart = pPage-(vc_pageDisplayCount/2);
		if (showStart < 0)
			showStart = 0;
	} else 
		showStart = 0;
	for (var i=0; i<=vc_tabCount; i++) {
		if ($('li'+i)) {
			if (i>=showStart && i<(showStart+vc_pageDisplayCount))
				$('li'+i).style.display = 'block';
			else
				$('li'+i).style.display = 'none';
		}
	}
}

/**
 * This function handles the sliding of the video center inner video
 * container (pages). First we determine which direction the video container
 * should slide, and then perform an Effect.Move function on the element.
 * After waiting 1 second we call the vc_slideFinished function, and then
 * change the pagination elements to reflect the current page.
 * 
 * @param {integer} pPage - The page which the user has selected
 */
function vc_handleTabSlide(pPage) {
	var vc_pagesToSlide = vc_currentSelectedTab - pPage;
	var vc_distanceToSlide = vc_pagesToSlide * 765;
	new Effect.Move($('vc_playerVideoInnerContainer'), { x: vc_distanceToSlide, y: 0 });
	setTimeout('vc_slideFinished()', 1000);
	vc_updateNav(pPage);
	$('li'+vc_currentSelectedTab).className = 'vc_tab';
	$('li'+pPage).className = 'vc_selectedTab';
	vc_currentSelectedTab = pPage;
}

/**
 * This function is called 1 second after a slide has been completed, and
 * determines which videos to load thumbnail images for, based on the page
 * number and the number of displayed items per page.
 */
function vc_slideFinished() {
	var videoStart = vc_currentSelectedTab*vc_pageDisplayCount;
	var videoEnd = ((vc_currentSelectedTab+1)*vc_pageDisplayCount)-1;
	for (var i=videoStart; i<=videoEnd; i++) {
		if ($('vc_video_thumb_'+i)) {
			var thumbContainer = $('vc_video_thumb_'+i);
			if (thumbContainer.innerHTML.indexOf('<',0) == -1) {
				if (thumbContainer.innerHTML.indexOf('<img',0) == -1) {
					var imgSrc = thumbContainer.innerHTML;
					thumbContainer.innerHTML = '<img class="vc_thumb" src="' + imgSrc + '"/>';
				}
			}
			thumbContainer.style.display = 'block';
		}
	}
}

/************************************************************************************
 * Functions related to View 2
 ************************************************************************************/

/**
 * This object builds the initial video center for View 2. First we assign
 * multiple variables their default properties, and then check to see if
 * a lineup navigation element already exists (if so we remove it and other
 * elements). Next we loop through each video in the first playlist and
 * build out it's display elements. We the change a few properties of the
 * inner video container, followed by the build-out of the lineup navigation
 * bar. Afterwards we check to see the need for a slider and, if it exists,
 * build it out and display it. Otherwise we build it out but hide it.
 * 
 * @param {object} playlists - All of the lineups
 */
function vc_buildView2(playlists) {
	var vidCount = 0;
	var htmlText = '<div id="vc_videoContainer">';
	var left = 0;
	vc_lineups = playlists;
	if ($('vc_lineup_nav')) {
		$('vc_lineup_nav').remove();
		$('lineupName').remove();
		$('vc_videoSlider').remove();
	}
	var videos = playlists[0].videos;
	var imageSrc = '';
	for (var j=0; j < videos.length; j++) {
		if (videos[j].thumbnailURL)
			imageSrc = '<img class="vc_view2_thumb" src="' + videos[j].thumbnailURL + '"/>';
		else
			imageSrc = '<span class="vc_view2_video_thumb_blank" style="display:block;"></span>';
		htmlText += '<div class="vc_view2_video" id="vc_view2_video' + vidCount + '" style="left:' + left + "px;\" onclick=\"location.href='" + tsURL + 'bcpid=' + vc_currentSelectedPlayerId + '&bclid=' + playlists[0].id + '&bctid=' + videos[j].id + "'\"><div class=\"vc_view2_thumb\">" + imageSrc + '</div><div class="vc_view2_videoTitle">' + videos[j].name + '</div></div>';
		vidCount++;
		left += 170;
	}
	htmlText += '</div>';
	$('vc_playerVideoInnerContainer').innerHTML = htmlText;
	$('vc_playerVideoInnerContainer').style.top = '44px';
	$('vc_playerVideoInnerContainer').style.width = '771px';
	htmlText = '<div id="vc_lineup_nav"><img src="' + tsVCdir + 'images/vc_lineup_nav_left.png" id="lineup_nav_left" onclick="lineupSlide(0)" /><div id="lineupContainer"><ul id="lineupList">';
	for (var i=0; i < playlists.length; i++)
		htmlText += '<li><a href="javascript:vc_updateView2(' + i + ')">' + playlists[i].name + '</a></li>';
	htmlText += '</ul></div><img src="' + tsVCdir + 'images/vc_lineup_nav_right.png" id="lineup_nav_right" onclick="lineupSlide(1)" /></div><div id="lineupName">' + playlists[0].name + '</div>' + $('vc_playerVideoOuterContainer').innerHTML + '<div id="vc_videoSlider"><div id="vc_video_slider_left"><img src="' + tsVCdir + 'images/vc_track_left.png" /></div><div id="vc_slider_wrapper"><div id="vc_video_slider" class="slider"><div class="handle"><img id="vc_video_slider_handle" src="' + tsVCdir + 'images/vc_handle.png" /></div></div></div><div id="vc_video_slider_right"><img src="' + tsVCdir + 'images/vc_track_right.png" /></div></div>';
	$('vc_playerVideoOuterContainer').innerHTML = htmlText;
	vc_buildSlider(vidCount-4);
	if (vidCount < 5)
		$('vc_videoSlider').style.visibility = 'hidden';
	else
		$('vc_videoSlider').style.visibility = 'visible';
}

/**
 * This function changes the videos displayed based on a selection by
 * the user. First we loop through all the videos of the new lineup,
 * build out their display elements, and again build a slider while
 * checking for it's necessity.
 * 
 * @param {integer} pArrayId - The array key for the selected lineup
 */
function vc_updateView2(pArrayId) {
	var vidCount = 0;
	var htmlText = '<div id="vc_videoContainer">';
	var left = 0;
	var videos = vc_lineups[pArrayId].videos;
	var imageSrc = '';
	for (var j=0; j < videos.length; j++) {
		if (videos[j].thumbnailURL)
			imageSrc = "<img class='vc_view2_thumb' src='" + videos[j].thumbnailURL + "'/>";
		else
			imageSrc = "<span class='vc_view2_video_thumb_blank' style='display:block;'></span>";
		htmlText += "<div class='vc_view2_video' id='vc_view2_video" + vidCount + "' style='left:" + left + "px;' onclick=\"location.href='" + tsURL + 'bcpid=' + vc_currentSelectedPlayerId + "&bclid=" + vc_lineups[pArrayId].id + "&bctid=" + videos[j].id + "'\"><div class='vc_view2_thumb'>" + imageSrc + "</div><div class='vc_view2_videoTitle'>" + videos[j].name + "</div></div>";
		vidCount++;
		left = left + 170;
	}
	$('vc_playerVideoInnerContainer').innerHTML = htmlText;
	$('lineupName').innerHTML = vc_lineups[pArrayId].name;
	vc_buildSlider(vidCount-4);
	if (vidCount < 5)
		$('vc_videoSlider').style.visibility = 'hidden';
	else
		$('vc_videoSlider').style.visibility = 'visible';
}

/**
 * This function builds a slider using the script.aculo.us library Slider
 * element. We determine the range of possible values based on the number
 * of videos in the currently selected lineup.
 * 
 * @param {integer} pVideoCount - The number of videos in the lineup
 */
function vc_buildSlider(pVideoCount) {
	var video_slider = $('vc_video_slider');
	var video_container = $('vc_videoContainer');
	if (pVideoCount == 0)
		pVideoCount = 1;
	new Control.Slider(video_slider.down('.handle'), video_slider, {
		range: $R(0, pVideoCount),
		sliderValue: 0,
		handleImage: 'vc_video_slider_handle',
		onSlide: function(value) {
			var newLeft = 50 - (value * 170);
			video_container.style.left = newLeft + 'px';
		},
		onChange: function(value) { 
			var newLeft = 50 - (value * 170);
			video_container.style.left = newLeft + 'px';
		}
	});
}

/**
 * This function performs a slide on the lineup navigation bar when initiated
 * by the user. First we check to see which direction the user is trying to
 * slide (0 = Left, 1 = Right), and then move the navigation bar a set
 * distance in that direction. We also keep track of the position (number of
 * times the user has slid) so that we can disallow left-slides at the
 * first-position.
 * 
 * @param {integer} pDirection - The direction in which to slide the navigation
 */
function lineupSlide(pDirection) {
	var navEl = $('lineupList');
	if (pDirection == 0 && vc_lineupPosition > 0) {
		new Effect.Move(navEl, { x: 500, y: 0 });
		vc_lineupPosition--;
	} else if (pDirection == 1) {
		new Effect.Move(navEl, { x: -500, y: 0 });
		vc_lineupPosition++;
	}
}