NavigatorGallery = {
	thumbnailSliderId: 'thumbnails',
	thumbnailSlider: null,

	currentThumbnailId: 'currentThumbnail',
	currentThumbnail: null,

	thumbnailSize: null,

	delay: 2000, // 2 seconds
	timeout: null,

	init: function() {
		this.thumbnailSlider = document.getElementById(this.thumbnailSliderId);
		if (!this.thumbnailSlider) return;

		this.currentThumbnail = document.getElementById(this.currentThumbnailId);
		this.thumbnailSize = Math.round(this.thumbnailSlider.scrollWidth / $(this.thumbnailSlider).find('img').length);

		$(this.thumbnailSlider).find('img.notloaded').mouseover(this.onMouseOver);
		$(this.thumbnailSlider).scroll(this.onScroll);

		this.scrollCurrentThumbnailIntoView();
		this.loadThumbnails();
	},

	loadThumbnail: function(thumbnail) {
		var src = $(thumbnail).attr('tsrc')
		if (src) $(thumbnail).attr('src', src).removeAttr('tsrc');
	},

	loadThumbnails: function() {
		var slider = NavigatorGallery.thumbnailSlider;

		var offsetStart = Math.floor($(slider).scrollLeft() / NavigatorGallery.thumbnailSize);
		var offsetEnd   = Math.ceil($(slider).innerWidth() / NavigatorGallery.thumbnailSize) + offsetStart + 1;

		$(slider).find('img').slice(offsetStart, offsetEnd).mouseover();
	},

	onScroll: function(event) {
		if (NavigatorGallery.timeout) window.clearTimeout(NavigatorGallery.timeout);
		window.setTimeout(NavigatorGallery.loadThumbnails, NavigatorGallery.delay);
	},

	onMouseOver: function(event) {
		if ($(this).hasClass('notloaded')) {
			$(this).removeClass('notloaded').addClass('loaded');
			NavigatorGallery.loadThumbnail(this);
		}
	},

	scrollCurrentThumbnailIntoView: function() {
		//NavigatorGallery.currentThumbnail.scrollIntoView();

		var slider = NavigatorGallery.thumbnailSlider;
		var thumbnail = NavigatorGallery.currentThumbnail;

		slider.scrollLeft = thumbnail.offsetLeft - Math.round((slider.offsetWidth - thumbnail.offsetWidth) / 2);
	}

};

$(document).ready(function() {
	NavigatorGallery.init();


	$('#artwork-thumbnails .thumbnail').hover(
		function() {
			$(this).find('.flyout').removeClass('hidden');
		},
		function() {
			$(this).find('.flyout').addClass('hidden');
		}
	);

});