$(document).ready(function(){
	/*Override styles that were set for when javascript is disabled*/
	$('#schmulParkPhotos').css({'overflow': 'hidden'});
	$('.prevSchmulPark').css('display', 'inline').css('cursor','default');
	$('.nextSchmulPark').css('display', 'inline').css('cursor','pointer');
			
	$('#schmulParkPhotos').serialScroll({
		items:'li',
		prev:'.prevSchmulPark',
		next:'.nextSchmulPark',
		axis:'x',
		step:1,
		duration:1000,
		offset:-5,
		force:true,
		stop:true,
		lock:false,
		exclude:2,
		cycle:false, //don't pull back once you reach the end
		onBefore:function( e, elem, $pane, $items, pos ){
			$('.prevSchmulPark').removeClass('disabledPrev');
			$('.nextSchmulPark').removeClass('disabledNext');
			//if at the beginning of the strip
			if( pos == 0 ){ 
				//gray out the prev arrow
				$('.prevSchmulPark').addClass('disabledPrev');
				//set the cursor to an arrow when over the prev arrow
				$('.prevSchmulPark').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.nextSchmulPark').css('display', 'inline').css('cursor','pointer');
			}
			//if at the end of the strip
			else if( pos == $items.length-3){
				//gray out the next arrow
				$('.nextSchmulPark').addClass('disabledNext');	
				//set the cursor to an arrow when over the next arrow
				$('.nextSchmulPark').css('display', 'inline').css('cursor','default');
				/*set the cursor to a pointer when over the prev arrow so the user knows its clickable*/
				$('.prevSchmulPark').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*/
				$('.prevSchmulPark').css('display', 'inline').css('cursor','pointer');
				/*set the cursor to a pointer when over the next arrow so the user knows its clickable*/
				$('.nextSchmulPark').css('display', 'inline').css('cursor','pointer');
			}
		}
	});
});