
(function($)
{
	$.fn.productGallery = function(options)
	{
		var defaults =
		{
			container: null,
			containerClass: 'productGalleryContainer',
			containerClassLarge: 'productGalleryLarge',
			selItemClass: 'sel',
			selItemSelector: 'a',
			itemSelector: 'img',
			itemTemplate: '<img />',
			containerCSS: {overflow: 'hidden'},
			itemCSS: {position:'absolute', left: '0px', top: '0px'},
			onParseHref: null
		};
		var options = $.extend(defaults, options);
		
		return this.each(function()
		{
			var t = $(this);
			var c, cpos, plus, next, prev;
			var hasMenu = $(options.selItemSelector, t).length > 1;
			
			// hide the menu if there's only one item in there
			if(!hasMenu)
			{
				t.addClass('displayNone');
			}
			
			if(options.container == null)
			{
				options.container = $('<div></div>').insertBefore(t);
			}
			
			c = options.container;
			c.addClass(options.containerClass);
			
			// initialise the gallery container
			// check for position attribute
			cpos = c.css('position');
			if(cpos != 'relative' && cpos != 'absolute')
			{
				c.css($.extend({position:'relative', width: c.outerWidth(), height: c.outerWidth()}, options.containerCSS));
			}
			// set all image items to absolute position
			$(options.itemSelector,c).css(options.itemCSS);
			
			// add the functionality to enlarge the image
			plus = $('<span class="plus">&nbsp;</span>')
				.appendTo(c)
				.toggle(function()
					{
						t.fadeOut(500);
						
						$('.control', c).fadeIn(500);
					
						c.animate(
							{
								width: 680,
								height: 680
							},
							{
								easing: 'easeInOutQuint',
								duration: 1000,
								step: function()
								{
									var w = c.width();
									$(options.itemSelector, c).each(function()
									{
										$(this).width(w).height(w);
									});
									$(window).trigger('resize');
								},
								complete: function()
								{
									// add the enlarged class to the container
									c.addClass('enlarged');
									
									// massage any contained items as appropriate
									$(options.itemSelector, c).each(function()
									{
										var op = $(this);
										var href = op.attr('rel');
										href = options.onParseHref(href, t, c);
										
										// add the new href
										op.attr('src', href);
									});
								}
							});
							
						$('span.plus',c).addClass('close');
						return false;
					}, function()
					{
						t.fadeIn(500);
						
						$('.control', c).fadeOut(500);
						
						c.animate(
							{
								width: 300,
								height: 300
							},
							{
								easing: 'easeInOutQuint',
								duration: 1000,
								step: function()
								{
									var w = c.width();
									$(options.itemSelector, c).each(function()
									{
										$(this).width(w).height(w);
									});
									$(window).trigger('resize');
								},
								complete: function()
								{
									c.removeClass('enlarged');
									
									// massage any contained items as appropriate
									$(options.itemSelector, c).each(function()
									{
										var op = $(this);
										var href = op.attr('rel');
										href = options.onParseHref(href, t, c);
										
										// add the new href
										op.attr('src', href);
									});
								}
							}
						);
							
						$('span.plus',c).removeClass('close');
						return false;
					}
				);
			
			// add the next and back buttons
			if(hasMenu)
			{
				next = $('<a class="control control_next">Next</a>').appendTo(c).click(function()
				{
					var op = $(options.selItemSelector+'.'+options.selItemClass, t).parent().next().find(options.selItemSelector);
					if(!op.length)
					{
						op = $(options.selItemSelector+':first', t);
					}
					op.click();
				});
				prev = $('<a class="control control_prev">Prev</a>').appendTo(c).click(function()
				{
					var op = $(options.selItemSelector+'.'+options.selItemClass, t).parent().prev().find(options.selItemSelector);
					if(!op.length)
					{
						op = $(options.selItemSelector+':last', t);
					}
					op.click();
				});
			}
			
			// add the sel class to the first item in the list
			$(options.selItemSelector+':first', t).addClass(options.selItemClass);
			
			// add the click handler to the gallery items
			t.click(function(e)
			{
				// find the correct target
				var ct = $(e.target);
				var img, href;
				if(!ct.is(options.selItemSelector))
				{
					ct = $(e.target).parents(options.selItemSelector);
				}
				
				// if we don't have a target, execute the link as normal
				if(!ct.length)
				{
					return true;
				}
				
				// parse the HREF
				href = ct.attr('href');
				if(typeof options.onParseHref == 'function')
				{
					href = options.onParseHref(href, t, c);
				}
				
				if(!href)
				{
					// throw error
					return false;
				}
				
				// execute
				img = $(options.itemTemplate)
					.appendTo(c)
					.load(function(e)
						{
							var op = $(this);
							
							// fade in and out
							op.fadeIn(500);
							$(options.itemSelector, op.parent()).not(':animated').fadeOut(500, function()
							{
								$(this).remove();
							});
							
							// unbind any load handler on the image (we're just toggling here)
							op.unbind('load');
						})
					.attr(
						{
							src: href,
							rel: ct.attr('href')
						})
					.css(options.itemCSS)
					.hide();
					
				// fix the menu
				$(options.selItemSelector, t).removeClass(options.selItemClass);
				ct.addClass(options.selItemClass);
				
				// return false (override the link element)
				return false;
			});
		});
	}
})(jQuery);

/*
// enlargement images
$('a.img-enlarge').each(function()
{
	var smallimg = $('img',this);
	smallimg.addClass('small');
	var largeimg = $('<img class="large" src="'+$(this).attr('href')+'" />');
	largeimg.css({display:'none'});
	largeimg.appendTo($(this));
	$(this).next('.img-enlarge-down').addClass('img-enlarge-open');
	
	$('<span class="plus">&nbsp;</span>').appendTo($(this));
});
$('a.img-enlarge').toggle(function()
{
	var op = $(this);
	var smallimg = $('img.small',this);
	var largeimg = $('img.large',this);
	var w = smallimg.width();
	var h = smallimg.height();
	smallimg.css('display','none');
	largeimg.css('display','block');
	var new_w = largeimg.width();
	var new_h = largeimg.height();
	
	$(this).next('.img-enlarge-down').addClass('img-enlarge-opened');
	
	largeimg.css({width:w,height:h});
	
	op.css({zIndex:'9998'});
	$('span.plus',op).addClass('close');
	largeimg.animate({width:new_w,height:new_h},{duration: 500,step: function() { $(window).trigger('resize'); }});
	
	return false;
}, function()
{
	var op = $(this);
	var smallimg = $('img.small',this);
	var largeimg = $('img.large',this);
	var new_w = smallimg.width();
	var new_h = smallimg.height();
	var w = largeimg.width();
	var h = largeimg.height();
	
	largeimg.css({width:w,height:h});
	$('span.plus',op).removeClass('close');
	
	largeimg.animate({width:new_w,height:new_h},{duration: 500, step: function() { $(window).trigger('resize'); }, complete: function()
	{
		op.css({zIndex:'1'});
		smallimg.css('display','block');
		largeimg.css({display:'none',width:'auto',height:'auto'});
	
		op.next('.img-enlarge-down').removeClass('img-enlarge-opened');
	}});
	
	return false;
});*/
