// This animating thumbnail code works by alternating swapping the background-image of
// the container of the image and the image itself.  This is to avoid using setting
// position: relative on the container which makes some browsers lose clickthroughs
// during animation.


var thumbnailPreview = function() {
	var defaultThumb = 'default.jpg';
	var thumbs = ['3.jpg', '1.jpg', '2.jpg'];

	var timeoutId = 0;
	var imagesLoaded = 0;
	var currentImage;
	var currentImageBaseUrl;
	var imageContainer;
	var fadeEffect;

	var currentThumbnail = 0;
	var isAnimating = false;


	function setupThumbnailPreview(el) {
		if (!el.getAttribute('thumbnail')) {
			for (var x = 0; x < thumbs.length; ++x) {
				setupThumb(currentImage, thumbs[x]);
			}

			el.setAttribute('thumbnail', 'set');
		} else {
			imagesLoaded = thumbs.length;
		}

		// fading is currently disabled
		/*
		fadeEffect = new MooFx.Opacity(currentImage,
				{'dontUseVisibility': true, 'transition': function(t, b, c, d) { return c*(t/=d)*t*t + b; },
				'transitionOut': function(t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; } });
		*/

		clearTimeout(timeoutId);
		timeoutId = setTimeout(function() {
			runThumbnailPreview(el);
		}, 0);
	}

	function thumbnailImageLoaded() {
		++imagesLoaded;
	}

	function setupThumb(image, src) {
		var thumb = new Image();
		thumb.onload = thumbnailImageLoaded;
		thumb.src = image.src.replace(defaultThumb, src);
	}

	function runThumbnailPreview(el) {
		if (imagesLoaded < thumbs.length) {
			timeoutId = setTimeout(function() { runThumbnailPreview(el) }, 100);
			return;
		}

		// fading is currently disabled

		/*
		fadeEffect.clearTimer();
		if (currentThumbnail % 2) {
			fadeEffect.hide();
		} else {
			fadeEffect.show();
		}

		if ((currentThumbnail + 1) % 2) {
			imageContainer.style.backgroundImage = 'url(' + currentImageBaseUrl + thumbs[(currentThumbnail + 1) % thumbs.length] + ')';
		} else {
			currentImage.src = currentImageBaseUrl + thumbs[(currentThumbnail + 1) % thumbs.length];
		}
		fadeEffect.toggle();
		*/
		currentImage.src = currentImageBaseUrl + thumbs[(currentThumbnail + 1) % thumbs.length];

		++currentThumbnail;
		timeoutId = setTimeout(function() { runThumbnailPreview(el) }, 999);
	}

	return {	// public functions

	isThumbnailPreviewRunning : function(targetEl) {
		if (targetEl) {
			return !!(currentImage && yt.dom.hasAncestor(targetEl, currentImage.parentNode) && isAnimating);
		} else {
			return !!isAnimating;
		}
	},

	testThumbnail : function(image) {
		return image.src.indexOf(defaultThumb) != -1 ||
					(image.getAttribute('thumb') && image.getAttribute('thumb').indexOf(defaultThumb) != -1) ||
					(image.getAttribute('onload') && image.getAttribute('onload').toString().indexOf('yt.net.delayed.register') != -1
						&& image.getAttribute('onload').toString().indexOf(defaultThumb) != -1);
	},
	
	startThumbnailPreview : function(e, el) {
		if (currentImage ||
				el.parentNode.className.indexOf('vCluster') != -1 ||
				!(el.parentNode.className.indexOf('WrapperInner') != -1 ||
					el.parentNode.className.indexOf('WrapperOuter') != -1)) {
			return;
		}
		
		isAnimating = true;
		clearTimeout(timeoutId);
		currentImage = el.getElementsByTagName('IMG')[0];
		currentImageBaseUrl = currentImage.src.replace(defaultThumb, '');
		imageContainer = el.parentNode;
		currentThumbnail = 0;
		timeoutId = setTimeout(function() { setupThumbnailPreview(el) }, 0);
	},

	stopThumbnailPreview : function(e, el) {
		var targetEl = e.target || e.srcElement;

		if ((currentImage && yt.dom.hasAncestor(targetEl, currentImage.parentNode)) || !currentImage) {		
			return;
		}

		isAnimating = false;
		clearTimeout(timeoutId);
		timeoutId = 0;
		imagesLoaded = 0;

		currentImage.src = currentImageBaseUrl + defaultThumb;
		imageContainer.style.backgroundImage = '';

		// fading is currently disabled
		/*
		if (fadeEffect) {
			fadeEffect.clearTimer();
			fadeEffect.show();
		}
		*/

		currentImage = null;
		imageContainer = null;
	}

	}; // end return

}();