var bc_gCurrentPageNumber = 0;
var bc_gNumOfPages = 0;

function bc_onLoadExtended(obj) {
	bc_gNumOfPages = Math.ceil((document.getElementById("thumbnail-box-" + obj).getElementsByTagName("div").length/4)-1);
}

function bc_slideLeft(obj) {
	 bc_onLoadExtended(obj);
	var newPos = (bc_getNum(document.getElementById('thumbnail-box-' + obj).style.marginLeft) < 0) ? bc_getNum(document.getElementById('thumbnail-box-' + obj).style.marginLeft) + 544 : null;
	if(newPos == null) {
		return;
	}
	if(newPos > 0) { newPos = 0; }
	if(newPos==0) {
		document.getElementById('thumbnail-left-' + obj).style.backgroundPosition = "bottom";
	}
	document.getElementById('thumbnail-right-' + obj).style.backgroundPosition = "top";
	bc_prepSlideElement(document.getElementById('thumbnail-box-' + obj), 500, newPos, "marginLeft");
}

function bc_slideRight(obj) {
    //if (bc_gNumOfPages == 0)
      bc_onLoadExtended(obj);

	var newPos = (bc_getNum(document.getElementById('thumbnail-box-' + obj).style.marginLeft) - 544 >= -(bc_gNumOfPages * 544)) ? bc_getNum(document.getElementById('thumbnail-box-' + obj).style.marginLeft) - 544 : null;
	if(newPos == null) {
		return;
	}
	
	document.getElementById('thumbnail-left-' + obj).style.backgroundPosition = "top";
	if(bc_getNum(document.getElementById('thumbnail-box-' + obj).style.marginLeft) - 544 <= -(bc_gNumOfPages * 544)) {
		document.getElementById('thumbnail-right-' + obj).style.backgroundPosition = "bottom";
	}
	bc_prepSlideElement(document.getElementById('thumbnail-box-' + obj), 500, newPos, "marginLeft");
}


/**
 * 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_prepSlideElement(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);
    }
}

/**
 * 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);
	}
}