bc_tabCurrentPage = 0;
//This should be the area of the masked slider.
bc_tabWidthOfSlideArea = 910;
bc_tabsliding = false;

/*
 * Called when the user clicks the left arrow.  This will make sure that slider still has room to slide.
 */
function slideTabLeft() {
	if (bc_getTabNum(document.getElementById('lineupTabSlideContainer').style.left) < 0 && !bc_tabsliding) {
		bc_tabsliding = true;
		document.getElementById('tabdot_' + bc_tabCurrentPage).className = "dot";
		bc_tabCurrentPage--;
		document.getElementById('tabdot_' + bc_tabCurrentPage).className = "selected_dot";
        bc_slideTabElement(document.getElementById('lineupTabSlideContainer'), 900, bc_getTabNum(document.getElementById('lineupTabSlideContainer').style.left) + bc_tabWidthOfSlideArea, 'left');
    }
}

/*
 * Called when the user clicks the right arrow.  This will make sure that the slider still has room to slide.
 */
function slideTabRight() {
    if (Math.abs(bc_getTabNum(document.getElementById('lineupTabSlideContainer').style.left)) < ((bc_tabNumOfDots - 1) * bc_tabWidthOfSlideArea) && !bc_tabsliding) {
		bc_tabsliding = true;
		document.getElementById('tabdot_' + bc_tabCurrentPage).className = "dot";
		bc_tabCurrentPage++;
		document.getElementById('tabdot_' + bc_tabCurrentPage).className = "selected_dot";
        bc_slideTabElement(document.getElementById('lineupTabSlideContainer'), 900, bc_getTabNum(document.getElementById('lineupTabSlideContainer').style.left) - bc_tabWidthOfSlideArea, 'left');
    } 
}

/*
 * After the slide has completed we need to set the state of the arrows.
 */
function bc_setTabArrows() {
	var left = Math.abs(bc_getTabNum(document.getElementById('lineupTabSlideContainer').style.left));
	if(left == 0) {
		document.getElementById('leftTabArrow').style.display = "block";
		document.getElementById('leftTabArrow_active').style.display = "none";
		document.getElementById('rightTabArrow').style.display = "none";
        document.getElementById('rightTabArrow_active').style.display = "block";
	} else if (left == (bc_tabNumOfDots -1) * bc_tabWidthOfSlideArea) {
	    document.getElementById('leftTabArrow').style.display = "none";
        document.getElementById('leftTabArrow_active').style.display = "block";
		document.getElementById('rightTabArrow').style.display = "block";
		document.getElementById('rightTabArrow_active').style.display = "none";
	} else {
		document.getElementById('leftTabArrow').style.display = "none";
		document.getElementById('leftTabArrow_active').style.display = "block";
		document.getElementById('rightTabArrow').style.display = "none";
		document.getElementById('rightTabArrow_active').style.display = "block";
	}
	
	//Set the dot.
	document.getElementById('tabdot_' + bc_tabCurrentPage).className = "selected_dot";
	bc_tabsliding = false;
}

/**
 * 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_getTabNum(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_slideTabElement(pElementToMove, pTimeToTake, pMoveEnd, pType) {
    var moveStart = bc_getTabNum(pElementToMove.style[pType]);
    var amountToMove = pMoveEnd - moveStart;
    var timeStart = new Date().getTime ();
    var timeEnd = timeStart + pTimeToTake;
    bc_doTabSlideElement(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_doTabSlideElement(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_doTabSlideElement(pElementToMove, pType, pAmountToMove, pMoveStart, pTimeToTake, pTimeEnd); }, 10);
    } else {
        bc_setTabArrows();
    }
}