" + imageSrc + "
" + videos[j].name + "
";
} else {
htmlText = htmlText + "
" + imageUrl + "
" + videos[j].name + "
";
}
htmlText = htmlText + "
";
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) {
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("
";
}
}
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 = '
';
var left = 0;
vc_lineups = playlists;
if ($('vc_lineup_nav')) {
$('vc_lineup_nav').remove();
$('lineupName').remove();
$('vc_videoSlider').remove();
}
var videos = playlists[0].videos;
for (var j=0; j < videos.length; j++) {
if (videos[j].thumbnailURL) {
var imageSrc = "
![](" + videos[j].thumbnailURL + ")
";
} else {
var imageSrc = "
";
}
htmlText = htmlText + "
" + imageSrc + "
" + videos[j].name + "
";
vidCount++;
left = left + 170;
}
htmlText = htmlText + '
';
$('vc_playerVideoInnerContainer').innerHTML = htmlText;
$('vc_playerVideoInnerContainer').style.top = "44px";
$('vc_playerVideoInnerContainer').style.width = "771px";
htmlText = '
' + playlists[0].name + '
' + $('vc_playerVideoOuterContainer').innerHTML + '
';
$('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 = '
';
var left = 0;
var videos = vc_lineups[pArrayId].videos;
for (var j=0; j < videos.length; j++) {
if (videos[j].thumbnailURL) {
var imageSrc = "
";
} else {
var imageSrc = "
";
}
htmlText = htmlText + "
" + imageSrc + "
" + videos[j].name + "
";
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++;
}
}
" + "
';
} else {
$("vc_paginationList").style.display = "none";
$('vc_playerVideoOuterContainer').style.background = "#000 url(images/vc_view2_bg.jpg) repeat-x bottom";
$('vc_views').innerHTML = '
';
}
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";
}
for (var i=0; i < playlists.length; i++) {
var videos = playlists[i].videos;
for (var j=0; j < videos.length; j++) {
if (videos[j].thumbnailURL) {
var imageSrc = "
