$(document).ready(
	function() {
		if( $('#scroller').size() > 0 ) {
			Scroller.init();
		}
	}
);

var Scroller = {
	pageSize: 7,
	
	currentPage: 0,

	pages: [[]],
	
	elements: {
		next: null,
		prev: null,
		thumbs: null,
		showhide: null,
		scroller: null,
		scrollerDisplay: null,
		activeElement: null,
		splashImg: null
	},

	init: function() {
		window._scroller = this;
		this.elements.next = $('#next');
		this.elements.prev = $('#previous');
		this.elements.thumbs = $('#thumbs');
		this.elements.showHide = $('#show-hide a');
		this.elements.scroller = $('#scroller');
		this.elements.scrollerDisplay = $('#scroller-display');
		this.elements.splashImg = $('#splash-img img');
		this.elements.activeElement = this.elements.thumbs.find('.active');
		
		// disable the show/hide controls on pages that *only* have a scroller
		// otherwise, there'd be no content at all
		if( this.elements.scroller.attr('isCollapsible') == 'false' ) {
			this.elements.showHide.hide();	
		}
		
		this.elements.next.click(
			function() {
				window._scroller.next();
			}
		);
		this.elements.prev.click(
			function() {
				window._scroller.prev();
			}
		);
		
		this.elements.showHide.click(
			function() {
				window._scroller.expand();
				return false;
			}						
		);
		
		// ugghhh. sheesh. evidently, the desire is to enable an top navigation item to expand the scroller (optionally)
		// so, look for silly classed elements there
		$('.remoteGalleryExpander').click(
			function() {
				window._scroller.expand();
				return false;
			}								  
		);
		
		this.elements.thumbs.find('img').each(
			function(index) {
				// reference to scroller object
				var s = window._scroller;
				
				var aPages = s.pages;
				var jqImg = $(this);

				// preload full sized version
				s.preload( this.src );

				// if this isn't the first page and we're at the page limit, 
				// move the index to the next page
				if( index % s.pageSize == 0 && index != 0 ) {
					aPages[aPages.length] = [];
				}
				jqImg.click(
					function() {
						var s = window._scroller;
						// remove opacity from previously active element, if one is currently in active state
						if( s.elements.activeElement != null ) {
							s.elements.activeElement.removeClass('active');
						}
						s.elements.activeElement = jqImg;
						jqImg.addClass('active');
						var sSplashSrc = jqImg.attr('src').replace('_tn.jpg', '_lg.jpg');
						s.elements.splashImg.attr('src', sSplashSrc);
					}			
				)
				aPages[aPages.length-1].push( jqImg );
			}
		);
		
		this.show();
		
		if( $('#scroller').attr('open') == 'true' ) {
			this.expand();	
		}
	},
	
	next: function() {
		this.hide();
		if( this.currentPage >= this.pages.length -1 ) {
			this.currentPage = 0;
		} else {
			this.currentPage++;
		}
		this.show();
	},
	
	prev: function() {
		this.hide();
		if( this.currentPage == 0 ) {
			this.currentPage = this.pages.length -1;
		} else {
			this.currentPage--;
		}
		this.show();
	},
	
	show: function() {
		$(this.pages[this.currentPage]).each(
			function() {
				this.show();
			}
		)
	},
	
	hide: function() {
		$(this.pages[this.currentPage]).each(
			function() {
				this.hide();
			}
		)
	},
	
	expand: function() {
		var sText='';
		if( ! this.elements.scrollerDisplay.is(":visible") ) {
			this.elements.scrollerDisplay.show();
			sText = this.elements.showHide.text().replace('Show', 'Hide');
			this.elements.showHide.parent().addClass('expanded');
		} else {
			this.elements.scrollerDisplay.hide();
			sText = this.elements.showHide.text().replace('Hide', 'Show');
			this.elements.showHide.parent().removeClass('expanded');

		}
		this.elements.showHide.text(sText);
		return false;
	},
	
	preload: function(sThumbSrc) {
		// presumes:
		// 1. the images are in a local directory named "images"
		// 2. the full sized version is in the same directory, with a similar name, differing only by the _tn and _lg flag
		var newImg = new Image();
		newImg.src = sThumbSrc.replace('_tn.jpg', '_lg.jpg');
	}

};