/**
 * @package VC brightcove.js
 * @author Tony Simbine
 * @Version 1.10, updated 2011.07.15 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':['#000', '#687316'], 'TabContainer':['#000', '#687316'], 'pageList':['#ffffff', '#000'], 'videoThum':['#000', '#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.10'};
TSplayerData['height'] = 535; // Standard player
var TsNuggad = true;
var nuggadURL = 'http://oms.nuggad.net/rc?nuggn=1615459509&nuggtg=';// oms
if (typeof oms_zone=='undefined') 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;
  args = '<img src="http://' + tsKey + '.ivwbox.de/cgi-bin/ivw/CP/' + tsCode + ';' + tsComment + '?r=' + escape(document.referrer) + '&d=' + (Math.random() * 100000) + '" width="1" height="1" alt="" />';
  if ($('tsVideo') != null)  {
    $('tsVideo').innerHTML = args;
    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++;
  }
}