var selectedSliderTabId = 'popularTabContainer';
var currentPopularPage = 0;
var currentRelatedPage = 0;

function doLoad() {
	$('relatedVideosContainer').style.left = '0px';
	$('popularVideosContainer').style.left = '0px';
}

/*
 * The below functions deal with the related videos and most popular video area.  These funcitons also include the sliding.
 */
function tabMouseOver(pElem) {
	if(pElem.id != selectedSliderTabId) {
		pElem.style.color = '#2268a0';
	}
}

function tabMouseOut(pElem) {
	if(pElem.id != selectedSliderTabId) {
		pElem.style.color = '#484849';
	}
}

function changeSelectedVideos(pElem) {
	if(pElem.id === 'relatedTabContainer') {
		$('relatedVideosContainer').style.display = "block";
		$('popularVideosContainer').style.display = "none";
		$('relatedTabContainer').className = 'relatedTabSelectedContainer';
		$('popularTabContainer').className = 'popularTabContainer';
		$('popularTabContainer').style.color = '#484849';
		selectedSliderTabId = 'relatedTabContainer';
		setArrows();
	} else {
		$('relatedVideosContainer').style.display = "none";
		$('popularVideosContainer').style.display = "block";
		$('relatedTabContainer').className = 'relatedTabContainer';
		$('relatedTabContainer').style.color = '#484849';
		$('popularTabContainer').className = 'popularTabSelectedContainer';
		selectedSliderTabId = 'popularTabContainer';
		setArrows();
	}
}

function slideLeft() {
	if(selectedSliderTabId === 'relatedTabContainer') {
		if(currentRelatedPage != 0) {
			bc_slideElement($('relatedVideosContainer'), 500, bc_getNum($('relatedVideosContainer').style.left) + 625, 'left');
			currentRelatedPage--;
			$('activeRight').style.display = 'block';
			$('deActiveRight').style.display = 'none';
		}
		
		setArrows();
	} else {
		if(currentPopularPage != 0) {
			bc_slideElement($('popularVideosContainer'), 500, bc_getNum($('popularVideosContainer').style.left) + 625, 'left'); 
			currentPopularPage--;
			$('activeRight').style.display = 'block';
			$('deActiveRight').style.display = 'none';
		}
		
		setArrows();
	}
}

function slideRight() {
	if(selectedSliderTabId === 'relatedTabContainer') {
		if(currentRelatedPage < (bc_gNumOfRelatedVideos/5)-1) {
			bc_slideElement($('relatedVideosContainer'), 500, bc_getNum($('relatedVideosContainer').style.left) - 625, 'left');
			currentRelatedPage++;
			$('activeLeft').style.display = 'block';
			$('deActiveLeft').style.display = 'none';
		} 
		
		setArrows();
		
	} else {
		if(currentPopularPage < (bc_gNumOfPopularVideos/5)-1) {
			bc_slideElement($('popularVideosContainer'), 500, bc_getNum($('popularVideosContainer').style.left) - 625, 'left'); 
			currentPopularPage++;
			$('activeLeft').style.display = 'block';
			$('deActiveLeft').style.display = 'none';
		} 
		
		setArrows();
	}
}

function setArrows() {
	if (selectedSliderTabId === 'relatedTabContainer') {
		if(currentRelatedPage == 0) {
			$('activeLeft').style.display = 'none';
			$('deActiveLeft').style.display = 'block'
			$('activeRight').style.display = 'block';
			$('deActiveRight').style.display = 'none';;
		} else if(currentRelatedPage >= (bc_gNumOfRelatedVideos/5)-1) {
			$('activeRight').style.display = 'none';
			$('deActiveRight').style.display = 'block';
			$('activeLeft').style.display = 'block';
			$('deActiveLeft').style.display = 'none';
		} else {
			$('activeLeft').style.display = 'block';
			$('deActiveLeft').style.display = 'none';
			$('activeRight').style.display = 'block';
			$('deActiveRight').style.display = 'none';
		}
	} else {
		if(currentPopularPage >= (bc_gNumOfPopularVideos/5)-1) {
			$('activeRight').style.display = 'none';
			$('deActiveRight').style.display = 'block';
			$('activeLeft').style.display = 'block';
			$('deActiveLeft').style.display = 'none';
		} else if(currentPopularPage === 0) {
			$('activeLeft').style.display = 'none';
			$('deActiveLeft').style.display = 'block';
			$('activeRight').style.display = 'block';
			$('deActiveRight').style.display = 'none';
		} else {
			$('activeLeft').style.display = 'block';
			$('deActiveLeft').style.display = 'none';
			$('activeRight').style.display = 'block';
			$('deActiveRight').style.display = 'none';
		}
	}
}

/**
 * These function deal with the changing of the lineups at the bottom of the page.
 */
function changeLineup(pId) {
	if (bc_gSelectedLineup != pId) {
		//Switch the thumbs to the new videos
		$(bc_gSelectedLineup + 'Container').style.display = 'none';
		$(pId + 'Container').style.display = 'block';
		
		//Set the left hand nav.
		$(pId).className = 'lineupNameContainerSelected';
		$(bc_gSelectedLineup).className = 'lineupNameContainer';
		$(bc_gSelectedLineup).style.color = '#000000';
		$(pId).childElements()[1].src = bc_gBaseURl + 'images/lineupArrowSelected.gif';
		$(bc_gSelectedLineup).childElements()[1].src = bc_gBaseURl + 'images/lineupArrow.gif';
		bc_gSelectedLineup = pId;
	}
}

function mouseOverLineup(pId) {
	if(bc_gSelectedLineup != pId) {
		$(pId).style.color = '#2268a0';
	}
}

function mouseOutLineup(pId) {
	if(bc_gSelectedLineup != pId) {
		$(pId).style.color = '#000000';
	}
}


/**
 * A helper function to get a number if from a style.  This is to handle the case where we set the height
 * of a div to 100px and need to get rid of the px.
 * @param {Object} num - the string or number to check.
 */
function bc_getNum(num) {
	if(num.indexOf('px') > -1) {
		return parseInt(num.substring(0, num.indexOf('px')));
	} else {
		return parseInt(num);
	}
}

/**
 * A helper function to prep for the actual transistion of sliding the elements.
 * @param {Object} pElementToMove - The element that we are going to move on the screen.
 * @param {Object} pTimeToTake - How long we have to make this transistion.
 * @param {Object} pMoveEnd - Where we want this element to end up.
 * @param {Object} pType - What type of move this is.  So top in this case.
 */
function bc_slideElement(pElementToMove, pTimeToTake, pMoveEnd, pType) {
    var moveStart = bc_getNum(pElementToMove.style[pType]);
    var amountToMove = pMoveEnd - moveStart;
    var timeStart = new Date().getTime ();
    var timeEnd = timeStart + pTimeToTake;
    bc_doSlideElement(pElementToMove, pType, amountToMove, moveStart, pTimeToTake, timeEnd);
  }

/**
 * A helper function do the actual slide down.  This based off of time to make the transistion as
 * clean as possible.
 * 
 * @param {Object} pElementToMove - The element that is goign to be slid
 * @param {Object} pType - What we changing on this element to move.  In this case top.
 * @param {Object} pAmountToMove - How much we have to move.
 * @param {Object} pMoveStart - A starting position.
 * @param {Object} pTimeToTake - How much time we have to complete this move.
 * @param {Object} pTimeEnd - When we have to complete this move by.
 */
function bc_doSlideElement(pElementToMove, pType, pAmountToMove, pMoveStart, pTimeToTake, pTimeEnd) {
    var currentTime = new Date().getTime();
    var timeRemaining = Math.max(0, pTimeEnd - currentTime);
    var currentMove = parseInt(pAmountToMove - (Math.pow(timeRemaining, 3) / Math.pow(pTimeToTake, 3)) * pAmountToMove);
    pElementToMove.style[pType] = (pMoveStart + currentMove) + "px";
    if (timeRemaining > 0) {
      setTimeout(function () { bc_doSlideElement(pElementToMove, pType, pAmountToMove, pMoveStart, pTimeToTake, pTimeEnd); }, 10);
    } 
}

function onTemplateLoaded()
{
	player = brightcove.getExperience("myPlayer");
	experience = player.getModule(APIModules.EXPERIENCE);
	experience.addEventListener(BCExperienceEvent.CONTENT_LOAD, onContentLoad);
	social = player.getModule(APIModules.SOCIAL);
}

function onContentLoad()
{
	social.setLink(experience.getExperienceURL());
}