$(document).ready(function(){
	$('#octPlantingPhotos').css({'overflow': 'hidden'});
	$('.prevOctPlanting').css('display', 'inline').css('cursor','default');
	$('.nextOctPlanting').css('display', 'inline').css('cursor','pointer');
	$('#octPlantingPhotos').serialScroll({
		items:'li',
		prev:'.prevOctPlanting',
		next:'.nextOctPlanting',
		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 ){
			$('.prevOctPlanting').removeClass('disabledPrev');
			$('.nextOctPlanting').removeClass('disabledNext');
			//if at the beginning of the strip
			if( pos == 0 ){ 
				//gray out the prev arrow
				$('.prevOctPlanting').addClass('disabledPrev');
				//set the cursor to an arrow when over the prev arrow
				$('.prevOctPlanting').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.nextOctPlanting').css('display', 'inline').css('cursor','pointer');
			}
			//if at the end of the strip
			else if( pos == $items.length-2){
				//gray out the next arrow
				$('.nextOctPlanting').addClass('disabledNext');	
				//set the cursor to an arrow when over the next arrow
				$('.nextOctPlanting').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the prev arrow so the user knows its clickable*/
				$('.prevOctPlanting').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*/
				$('.prevOctPlanting').css('display', 'inline').css('cursor','pointer');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.nextOctPlanting').css('display', 'inline').css('cursor','pointer');
			}
		}
	});
	$('#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');
			}
		}
	});
	
	$('#fall2011Photos').css({'overflow': 'hidden'});
	$('.prevFall2011').css('display', 'inline').css('cursor','default');
	$('.nextFall2011').css('display', 'inline').css('cursor','pointer');
	$('#fall2011Photos').serialScroll({
		items:'li',
		prev:'.prevFall2011',
		next:'.nextFall2011',
		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 ){
			$('.prevFall2011').removeClass('disabledPrev');
			$('.nextFall2011').removeClass('disabledNext');
			//if at the beginning of the strip
			if( pos == 0 ){ 
				//gray out the prev arrow
				$('.prevFall2011').addClass('disabledPrev');
				//set the cursor to an arrow when over the prev arrow
				$('.prevFall2011').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.nextFall2011').css('display', 'inline').css('cursor','pointer');
			}
			//if at the end of the strip
			else if( pos == $items.length-2){
				//gray out the next arrow
				$('.nextFall2011').addClass('disabledNext');	
				//set the cursor to an arrow when over the next arrow
				$('.nextFall2011').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the prev arrow so the user knows its clickable*/
				$('.prevFall2011').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*/
				$('.prevFall2011').css('display', 'inline').css('cursor','pointer');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.nextFall2011').css('display', 'inline').css('cursor','pointer');
			}
		}
	});
});