/**
 * Copyright (C) 2008 Brightcove, Inc.  All Rights Reserved.  No
 * use, copying or distribution of this work may be made except in
 * accordance with a valid license agreement from Brightcove, Inc.
 * This notice must be included on all copies, modifications and
 * derivatives of this work.
 *
 * Brightcove, Inc MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT
 * THE SUITABILITY OF THE SOFTWARE, EITHER EXPRESS OR IMPLIED,
 * INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR
 * NON-INFRINGEMENT. BRIGHTCOVE SHALL NOT BE LIABLE FOR ANY DAMAGES SUFFERED
 * BY LICENSEE AS A RESULT OF USING, MODIFYING OR DISTRIBUTING THIS
 * SOFTWARE OR ITS DERIVATIVES.
 *
 * "Brightcove" is a trademark of Brightcove, Inc.
 * 
 * @author Jesse Streb
 **/
 
/************************************************************************************
 * Global variables and constants
 ************************************************************************************/
bc_gCurrentPage = 0;
//This should be the area of the masked slider.
bc_gWidthOfSlideArea = 474;
bc_sliding = false;

/*
 * Called when the user clicks the left arrow.  This will make sure that slider still has room to slide.
 */
function slideLeft() {
	if (bc_getNum(document.getElementById('lineupSlideContainer').style.left) < 0 && !bc_sliding) {
		bc_sliding = true;
		document.getElementById('dot_' + bc_gCurrentPage).className = "dot";
		bc_gCurrentPage--;
		document.getElementById('dot_' + bc_gCurrentPage).className = "selected_dot";
       bc_slideElement(document.getElementById('lineupSlideContainer'), 500, bc_getNum(document.getElementById('lineupSlideContainer').style.left) + bc_gWidthOfSlideArea, 'left');
    }
}

/*
 * Called when the user clicks the right arrow.  This will make sure that the slider still has room to slide.
 */
function slideRight() {
    if (Math.abs(bc_getNum(document.getElementById('lineupSlideContainer').style.left)) < ((bc_gNumOfDots - 1) * bc_gWidthOfSlideArea) && !bc_sliding) {
		bc_sliding = true;
		document.getElementById('dot_' + bc_gCurrentPage).className = "dot";
		bc_gCurrentPage++;
		document.getElementById('dot_' + bc_gCurrentPage).className = "selected_dot";
        bc_slideElement(document.getElementById('lineupSlideContainer'), 500, bc_getNum(document.getElementById('lineupSlideContainer').style.left) - bc_gWidthOfSlideArea, 'left');
    } 
}

/*
 * After the slide has completed we need to set the state of the arrows.
 */
function bc_setArrows() {
	var left = Math.abs(bc_getNum(document.getElementById('lineupSlideContainer').style.left));
	if(left == 0) {
		document.getElementById('leftArrow').style.display = "block";
		document.getElementById('leftArrow_active').style.display = "none";
		document.getElementById('rightArrow').style.display = "none";
        document.getElementById('rightArrow_active').style.display = "block";
	} else if (left == (bc_gNumOfDots -1) * bc_gWidthOfSlideArea) {
	    document.getElementById('leftArrow').style.display = "none";
        document.getElementById('leftArrow_active').style.display = "block";
		document.getElementById('rightArrow').style.display = "block";
		document.getElementById('rightArrow_active').style.display = "none";
	} else {
		document.getElementById('leftArrow').style.display = "none";
		document.getElementById('leftArrow_active').style.display = "block";
		document.getElementById('rightArrow').style.display = "none";
		document.getElementById('rightArrow_active').style.display = "block";
	}
	
	//Set the dot.
	document.getElementById('dot_' + bc_gCurrentPage).className = "selected_dot";
	bc_sliding = 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_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);
    } else {
        bc_setArrows();
    }
}