var playListIsAtLeft = true;
var playListIsAtRight = false;
var cardCount = 0;
var cardWidth = 0;
var jScrollPaneApi;
var $playListCardWrapper;
var arrCardLocations;
var playListSlidesWidth;
var playListCardWrapperWidth = 0;


//$plaListCardWrapper must be initialized
function initCardCount() {
    cardCount = $playListCardWrapper.find('li').length;
}

function initCardLocationsArray(cardCount) {
    arrCardLocations = new Array(cardCount);
    $playListCardWrapper.find('li').each(function(index) {
        arrCardLocations[index] = $(this).position().left;
    });
}


//DOCUMENT READY
var currentHash = '';

$(document).ready(function() {
	initPlaylist();

	var strHash = new String(location.hash);
	if (strHash.match(/#addFirstCard/i)) {
		newCard(-1, true);
	}
}); 



function initPlaylist()
{
    //resize the cardWrapper before binding the jScrollPane becuase it needs the proper size

    //init global vars

    $playListCardWrapper = $('#playListCardWrapper');
    initCardCount();

    $playListSettings = $('#playListSettings');
    $playListSlides = $('#playListSlides');
    playListSlidesWidth = $playListSlides.width();

    //the width of the card must be the same as the width of the bookmark (as set in the CSS as "#playListCardWrapper li")
    if (cardCount > 0)
        cardWidth = $playListCardWrapper.find('li:first').outerWidth(true);


    //adjust the playListCardWrapper width
    playListCardWrapperWidth = cardWidth * cardCount;
    $playListCardWrapper.width(playListCardWrapperWidth);

    $('#playListSlides').jScrollPane({
        showArrows: false,
        animateScroll: true,
        maintainPosition: true,
        horizontalDragMinWidth: 40
    });

    $('#playListSlides').bind(
				'jsp-scroll-x',
				function(event, scrollPositionX, isAtLeft, isAtRight) {
				    playListIsAtLeft = isAtLeft;
				    playListIsAtRight = isAtRight;
				});


    jScrollPaneApi = $('#playListSlides').data('jsp');

   	adjustStateBasedOnHash();

	

    //init this global var here after the scroller has been initialized
    //this is used for proper scrolling to the next/prev card
    initCardLocationsArray(cardCount);


   
}	// end initPlaylist




// playlist scroll button functions

function playListScrollLeft() {
    if (playListIsAtLeft) return;

    var curScrollPosition = jScrollPaneApi.getContentPositionX();
    var curCardIndex = Math.floor(curScrollPosition / cardWidth);
    var pixelsIntoCurCard = Math.round(curScrollPosition) % cardWidth;
    var indexOffset = 0;
    //if only a few px into the current card, show the previous card or if seeing the margin of the prev card
    if (pixelsIntoCurCard < 8) indexOffset = 1;

    //if in edit mode, scroll left extra pixels to reveal the preceeding add button
    var editOffsetPx = 0;

    jScrollPaneApi.scrollToX((curCardIndex == 0) ? 0 : arrCardLocations[curCardIndex - indexOffset] - editOffsetPx, true);
}

function playListScrollRight() {
    if (playListIsAtRight) return;
    //adjust for width of the visible pane
    var curScrollPosition = jScrollPaneApi.getContentPositionX() + playListSlidesWidth;
    var pixelsIntoCurCard = Math.round(curScrollPosition) % cardWidth;
    var indexOffset = 0;
    if (pixelsIntoCurCard > 600) indexOffset = 1;
    var curCardIndex = Math.floor(curScrollPosition / cardWidth);

    jScrollPaneApi.scrollToX((curCardIndex == arrCardLocations.length - 1) ? arrCardLocations[curCardIndex] : arrCardLocations[curCardIndex + indexOffset] - playListSlidesWidth + cardWidth+50, true);
}



function adjustStateBasedOnHash() {
	//scroll the cards to the currently selected card if a card should be selected
	var strHash = new String(location.hash);
	if (strHash.match(/#pos\=/i)) {
		//js has sent a current offset for the playlist in a hash - use that
		strHash = strHash.replace(/#pos\=/i, '').replace(/st\=/i, '').replace(/cid\=/i, '');
		jScrollPaneApi.scrollToX(strHash.split('&')[0], false);
		$(document).scrollTop(strHash.split('&')[1]);
		cardAddSelectedBorderToCard(strHash.split('&')[2]);
	} 
}