$(document).ready(function(){
	$('#volunteerPhotos').css({'overflow': 'hidden'});
	$('.prev').css('display', 'inline').css('cursor','default');
	$('.next').css('display', 'inline').css('cursor','pointer');
	$('#volunteerPhotos').serialScroll({
		items:'li',
		prev:'.prev',
		next:'.next',
		axis:'x',
		step:2,
		duration:1000,
		offset:-5,
		force:true,
		stop:true,
		lock:false,
		exclude:1,
		cycle:false, //don't pull back once you reach the end
		onBefore:function( e, elem, $pane, $items, pos ){
			$('.prev').removeClass('disabledPrev');
			$('.next').removeClass('disabledNext');
			//if at the beginning of the strip
			if( pos == 0 ){ 
				//gray out the prev arrow
				$('.prev').addClass('disabledPrev');
				//set the cursor to an arrow when over the prev arrow
				$('.prev').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.next').css('display', 'inline').css('cursor','pointer');
			}
			//if at the end of the strip
			else if( pos == $items.length-2){
				//gray out the next arrow
				$('.next').addClass('disabledNext');	
				//set the cursor to an arrow when over the next arrow
				$('.next').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the prev arrow so the user knows its clickable*/
				$('.prev').css('display', 'inline').css('cursor','pointer');
			}
			//if anywhere in the middle
			else {
				/*set the cursor to a pointer when over the prev arrow so the user knows its clickable*/
				$('.prev').css('display', 'inline').css('cursor','pointer');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.next').css('display', 'inline').css('cursor','pointer');
			}
		}
	});
});