var sliderPage = 1;
function initFilmStripScroller() {
	$('.film-strip-scroller').each(function() {
		var viewingArea = $('.viewing-area', this);
		var filmStrip = $('.film-strip', this);
		var scrollAmount = Number(viewingArea.css('width').replace('px', ''));
		var numFrames = $('.frame', filmStrip).length;
		//var frameWidth = Number($('.frame', this).eq(0).css('width').replace('px', ''));
		var frameWidth = 170;
		var filmStripWidth = scrollAmount * numFrames;
		if (scrollAmount > frameWidth) {
			filmStripWidth = Math.ceil((frameWidth * numFrames) / scrollAmount) * scrollAmount;
		} 
		filmStrip.width(filmStripWidth);
		
		var currentPosition = 0;
		var scroll = function() {
			var direction = ($(this).hasClass('left') ? 1 : -1);
			var newPosition = currentPosition + (scrollAmount * direction);
			filmStrip.animate({left: newPosition + 'px'}, 500);
			currentPosition = newPosition;
			if (currentPosition == 0) {
				btnScrollLeft.hide();
			}
			else {
				btnScrollLeft.show();
			}
			if (currentPosition ==  0 - filmStripWidth + scrollAmount) {
				btnScrollRight.hide();
			}
			else {
				btnScrollRight.show();
			}
			sliderPage += -direction;
			updatePager(sliderPage);
		}
		var updatePager = function(pageNum) {
		    var pageCounter = $('.page-counter');
		    var pagerText = pageCounter.html();
		    pageCounter.html(pageNum + pagerText.substring(1));
		}
		var btnScrollRight = $('<span class="button btnScroll right">Scroll Right</span>').appendTo('.film-strip-scroller .nextBox').click(scroll);
		var btnScrollLeft = $('<span class="button btnScroll left">Scroll Left</span>').appendTo('.film-strip-scroller .prevBox').hide().click(scroll);
	});
}

$(document).ready(function() {
    initFilmStripScroller();
});