/**
 * Displays full size versions of thumbnails in a miniature gallery.
 * 
 * $('#product_images').productImages({autoRotateDelay: 2000});
 * 
 * Copyright 2008 Line Digital Ltd. <http://www.line.uk.com/>
 * @author John Sutherland <john@line.uk.com>
 */
(function ($) {
	var DEFAULT_OPTIONS = {
		autoRotateDelay: 4000, // The delay between auto-rotation.
		fullSizeSelector: '.full_size', // The relative selector of the full-size place holder.
		triggerSelector: 'a', // The relative selector of the triggers.
		triggerSelectedClass: 'current' // The class name to add to the selected trigger.
	};

	$.fn.productImages = function (options) {
		options = jQuery.extend(DEFAULT_OPTIONS, options);
		var self = $(this);
		var triggers = self.find(options.triggerSelector);
		var bigImage = $('<img/>').appendTo(self.find(options.fullSizeSelector));
		var bigImage2 = $('<img/>').appendTo(self.find(options.fullSizeSelector)).hide();

		var autoRotateDirection = 1;

		triggers.click(function () {
			triggers.removeClass(options.triggerSelectedClass);

			var trigger = $(this);
			trigger.addClass(options.triggerSelectedClass);

			var preloader = new Image();
			$(preloader).load(function () {
				// Cross fades images.
				bigImage.fadeOut('slow');
				bigImage2.attr('src', preloader.src).fadeIn('slow');

				var t = bigImage;
				bigImage = bigImage2;
				bigImage2 = t;
			});
			preloader.src = trigger.attr('href');

			return false;
		});

		function rotateImage(direction) {
			var selected = triggers.filter('.' + options.triggerSelectedClass);
			var index = triggers.index(selected) + direction;

			if (index < 0) {
				index = 1;
				autoRotateDirection = 1;
			} else if (index >= triggers.length) {
				index = triggers.length - 2;
				autoRotateDirection = -1;
			}

			$(triggers[index]).click();
		}

		var prev = $('<a class="previous" href="#">Previous</a>').insertBefore(bigImage).click(function () {
			rotateImage(-1);
			return false;
		});

		var next = $('<a class="next" href="#">Next</a>').insertBefore(bigImage).click(function () {
			rotateImage(1);
			return false;
		});

		// Pause the automatic rotation of images if we're hovered over the product images.
		var autoRotatePause = false;
		self.hover(
			function () {
				autoRotatePause = true;
			},
			function () {
				autoRotatePause = false;
			}
		);

		function autoRotate() {
			if (!autoRotatePause) {
				rotateImage(autoRotateDirection);
			}
			setTimeout(autoRotate, options.autoRotateDelay);
		}

		autoRotate();
	};
})(jQuery);