/* snapper css snap points carousel */
;(function( w, $ ){
	var pluginName = "snapper";
	$.fn[ pluginName ] = function(){
		var testProp = "scroll-snap-type";
		var snapSupported = w.CSS && w.CSS.supports && ( w.CSS.supports( testProp, "mandatory") || w.CSS.supports("-webkit-" + testProp, "mandatory")  || w.CSS.supports("-ms-" + testProp, "mandatory") );

		return this.each(function(){
			var self = this;

			// optional: include overthrow.toss() in your page to get a smooth scroll, otherwise it'll just jump to the slide
			function goto( elem, x ){
				if( typeof w.overthrow !== "undefined" ){
					w.overthrow.toss( elem, { left: x } );
				}
				else {
					elem.scrollLeft = x;
				}
			}
			var $slider = $( "." + pluginName + "_pane", self );
			var $itemsContain = $slider.find( "." + pluginName + "_items" );
			var $items = $itemsContain.children();

			// even if CSS snap is supported, this click binding will allow deep-linking to slides without causing the page to scroll to the carousel container
			$( "a", this ).bind( "click", function( e ){
				var slideID = $( this ).attr( "href" );
				if( slideID.indexOf( "#" ) === -1 ){
					// only local anchor links
					return;
				}
				e.preventDefault();
				var $slide = $( slideID, self );
				goto( $slider[ 0 ], $slide[ 0 ].offsetLeft );
				if( "replaceState" in w.history ){
					w.history.replaceState( {}, document.title, slideID );
				}
			});


			// snap to nearest slide
			function snapScroll(){
				var currScroll = $slider[ 0 ].scrollLeft;
				var width = $itemsContain.width();
				var itemWidth = $items.eq(0).width();
				var numItems = $items.length;
				var roundedScroll = Math.round(currScroll/itemWidth)*itemWidth;
				if( roundedScroll > width ){
					roundedScroll = width;
				}
				if( roundedScroll !== currScroll ){
					goto( $slider[ 0 ], roundedScroll );
				}
			}

			// retain snapping on resize (necessary even in scroll-snap supporting browsers, unfortunately)
			var startSlide;
			var afterResize;
			function snapStay(){
				var currScroll = $slider[ 0 ].scrollLeft;
				var width = $itemsContain.width();
				var numItems = $items.length;
				if( startSlide === undefined ){
					startSlide = Math.round(  ( currScroll / width * numItems ) );
				}
				if( afterResize ){
					clearTimeout( afterResize );
				}
				afterResize = setTimeout( function(){
					goto( $slider[ 0 ], $items[ startSlide ].offsetLeft );
					startSlide = afterResize = undefined;
				}, 300 );
			}
			$( w ).bind( "resize", snapStay );

			// apply snapping after scroll, in browsers that don't support CSS scroll-snap
			function polyfillSnap(){
				var scrollStop;
				$slider.bind( "scroll", function(){
					if( scrollStop ){
						clearTimeout( scrollStop );
					}
					scrollStop = setTimeout( snapScroll, 50 );
				});
			}

			// polyfill if unsupported
			if( !snapSupported ){
				polyfillSnap();
			}
		});
	};

	// auto-init
	$( document ).bind( "enhance", function( e ){
		$( "." + pluginName, e.target ).add( e.target ).filter( "." + pluginName )[ pluginName ]();
	});
}( this, jQuery ));

@@ -858,16 +858,129 @@
 ldren();
+%0A%09%09%09var $nav = $( %22.%22 + pluginName + %22_nav%22, self );%0A%09%09%09var navSelectedClass = pluginName + %22_nav_item-selected%22;
 %0A%0A%09%09%09// 
@@ -2634,16 +2634,544 @@
 tay );%0A%0A
+%09%09%09// update thumbnail state on pane scroll%0A%09%09%09if( $nav.length )%7B%0A%09%09%09%09function activeItem()%7B%0A%09%09%09%09%09var currScroll = $slider%5B 0 %5D.scrollLeft;%0A%09%09%09%09%09var activeIndex;%0A%09%09%09%09%09$items.each(function( i )%7B%0A%09%09%09%09%09%09if( $items%5B i %5D.offsetLeft === currScroll )%7B%0A%09%09%09%09%09%09%09activeIndex = i;%0A%09%09%09%09%09%09%7D%0A%09%09%09%09%09%7D);%0A%09%09%09%09%09// update thumbnail class%0A%09%09%09%09%09if( activeIndex )%7B%0A%09%09%09%09%09%09$nav%0A%09%09%09%09%09%09%09.children().removeClass( navSelectedClass )%0A%09%09%09%09%09%09%09.eq( activeIndex )%0A%09%09%09%09%09%09%09.addClass( navSelectedClass );%0A%09%09%09%09%09%7D%0A%09%09%09%09%7D%0A%09%09%09%09$slider.bind( %22scroll%22, activeItem );%0A%09%09%09%7D%0A%0A
 %09%09%09// ap

update thumbnail selected class to match current snapped item any time the pane is scrolled. Scroll occurs after thumbnail clicks too, so this proxies the state back to the nav then as well.