jQuery( function() {

	var slides = [{"thumb":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/10-thumb-94x64.jpg","fullsize":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/10.jpg","caption":"Warehouse Clearance Sale","url":"http:\/\/www.atlanticpooltablesandhottubs.com\/blogs\/news\/5005842-warehouse-clearance-sale-while-supplies-last"},{"thumb":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/4-thumb-94x64.jpg","fullsize":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/4.jpg","caption":"New Web Site Launches!","url":"http:\/\/www.atlanticpooltablesandhottubs.com\/blogs\/news\/3906402-atlantic-pool-tables-hot-tubs-launches-new-website"},{"thumb":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/3-thumb-94x64.jpg","fullsize":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/3.jpg","caption":"Brunswick Tremont Sale $1,995","url":"http:\/\/www.atlanticpooltablesandhottubs.com\/products\/brunswick-tremont-8-pool-table"},{"thumb":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/6-thumb-94x64.jpg","fullsize":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/6.jpg","caption":"New Palliser Home Theater Seats","url":"http:\/\/www.atlanticpooltablesandhottubs.com\/collections\/vendors?q=Palliser"},{"thumb":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/7-thumb-94x64.jpg","fullsize":"http:\/\/rpedit.atlanticpooltablesandhottubs.com\/assets\/homepromos-atl\/7.jpg","caption":"New Dining Pool Tables Available","url":"http:\/\/www.atlanticpooltablesandhottubs.com\/products\/canada-billiard-la-condo-7-dining-pool-table"}];

	var scrollDuration = 500;
	var pageWidth = 525; // width of a single page in the filmstrip
	var thumbsPerPage = 5;
	var totalPages = Math.ceil( slides.length / thumbsPerPage );
	var currentPage = 1;
	
	// build out the slides
	
	jQuery.each( slides, function( i, slide ) {
		var $img = jQuery("<img />").attr( "src", slide.thumb );
		var $p = jQuery("<p></p>").append( slide.caption );
		var $a = jQuery("<a></a>").attr( "href", slide.url ).append( $img ).append( $p );
		var $li = jQuery("<li></li>").append( $a );
		jQuery("#slideshow-selector-filmstrip-ul").append( $li );
		// attach the image and URL information to the <li>, so we can
		// access it when the user hovers on it
		$li.data( "fullsize", slide.fullsize );
		$li.data( "url", slide.url );
	} );
	
	// set up click handlers on the prev and next buttons
	
	jQuery("#slideshow-selector-prev").click( function() {
		if ( totalPages > 1 ) {
			if ( currentPage === 1 ) {
				scrollToPage( totalPages );
			} else {
				scrollToPage( currentPage - 1 );
			}
		}
	} );
	
	jQuery("#slideshow-selector-next").click( function() {
		if ( totalPages > 1 ) {
			if ( currentPage === totalPages ) {
				scrollToPage( 1 );
			} else {
				scrollToPage( currentPage + 1 );
			}
		}
	} );
	
	// set up hover handlers on the thumbnails
	
	jQuery("#slideshow-selector-filmstrip-ul").delegate( "li", "hover", function () {
		
		jQuery("#slideshow-stage-loading").css( "display", "block" );
		$li = jQuery(this);
		jQuery("#slideshow-selector-filmstrip-ul>li.active").removeClass("active");
		$li.addClass("active");
		
		// it's important to register the load handler before setting the src.
		// otherwise, the load event might fire before we have a chance to
		// register the handler. (this is mainly a problem when the browser
		// is pulling the image from its cache.)
		// also, chaining - i.e., $img.load().attr() - doesn't seem to work
		// very well, so we'll use two separate calls.
		
		$img = jQuery("<img />")
			.load( function() {
				$a = jQuery("<a></a>").attr( "href", $li.data("url") ).append( $img );		
				jQuery("#slideshow-stage-actual").empty().append( $a );
				jQuery("#slideshow-stage-loading").css( "display", "none" );
			} );
						
		$img.attr( "src", $li.data("fullsize") );
		
	} );
	
	// automatically select the first slide
	
	jQuery("#slideshow-selector-filmstrip-ul>li:first").trigger("mouseover");
	
	function scrollToPage( page ) {
		// make sure all previous animations have completed before we do
		// anything - triggering overlapping animations can cause wacky
		// thangs to happen
		if ( !jQuery("#slideshow-selector-filmstrip").is(":animated") ) {
			var newLeft = ( 0 - ( ( page - 1 ) * pageWidth ) ) + "px";
			jQuery("#slideshow-selector-filmstrip").animate(
				{ left: newLeft },
				scrollDuration,
				function() {
					currentPage = page;
				}
			);
		}
		
	}	
	
} );