;
(function($) {

	$.fn.hsgallery = function(options) {
		var opts = $.extend( {}, $.fn.hsgallery.defaults, options);
		
		this.each(function() {
				$this = $(this);
				// build element specific options
				var o = $.meta ? $.extend( {}, opts, $this.data()) : opts;
				
				var hsWidth  = o.hsWidth;
				var hsHeight = o.hsHeight;
				var len = o.imageList.length;
				
				var info = "";
				for (var i=0; i<len; i++) {
					if (o.imageList[i]["imageInfo"] == undefined) {
						info = info + ", " + o.imageList[i]["displayname"];
					}
				}
				if (info != "") {
					alert("Image size is not avaliable,\n" + 
							"images might not have been processed or have not been processed with size option, \nimages: " + info);
					return;
				}
				
				var jqArea = $('<div class="InlineGalleryHotspotArea"></div>');
				var jqImages = $('<div class="InlineGalleryHotspotImages"></div>');
				// Build the image list
				for (var i=0; i<len; i++) {
					var jqImageDiv = $('<div><img src="' + o.imagePrefix + o.imageList[i].url  + '" alt="' + o.imageList[i].displayname + '"/></div>');
					var jqImage = $(jqImageDiv).find("img"); 
					$(jqImage).data("imageInfo", o.imageList[i]["imageInfo"]);
					reCalcImage(jqImage, hsWidth, hsHeight);
					if (i == 0) {
						$(jqImage).show();
					} else {
						$(jqImage).hide();
					}
					$(jqImages).append(jqImageDiv);
				}
				var jqImageArea = $(jqArea).append(jqImages);
				$this.append(jqImageArea);
				
				var padding = 2;
				if (hsHeight > 200) {
					var arrowSize = "21";
					var nvNavWidth  = 21;
					var nvNavHeight = 21 + padding + padding;
				} else {
					var arrowSize = "16";
					var nvNavWidth  = 16;
					var nvNavHeight = 16 + padding + padding;
				}

				// Build the navigation
				var nvNav = $('<div class="InlineGalleryHotspotNavTransparency InlineGalleryHotspotNavFirst"</div>' + 
								'<div class="InlineGalleryHotspotNav InlineGalleryHotspotNavFirst" ' + 
								'<img style="float:right;" src="/oosurf/organicobject/jquery-plugins/hsGallery/images/FirstArrow' + arrowSize + '.png"/>' +
								'</div>')
							.css({left:0, top:(hsHeight - nvNavHeight), width:((hsWidth/2) - nvNavWidth), height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.hide()
							.dblclick(function() {return(false);})
							.click(function() {
								var images  = $(this).parent().find(".InlineGalleryHotspotImages img");
								var visible = $(images).filter(":visible");
								var idx = $(images).index(visible);
								if (idx > -1 && images.length > 0) {
									images.eq(idx).hide();
									images.eq(0).show();
								}
								return(false); // Avoid propagating click to parent div
							});
				$(jqImageArea).append(nvNav);
				
				var vNav = $('<div class="InlineGalleryHotspotNavTransparency InlineGalleryHotspotNavPrev"</div>' + 
								'<div class="InlineGalleryHotspotNav InlineGalleryHotspotNavPrev" ' + 
								'<img src="/oosurf/organicobject/jquery-plugins/hsGallery/images/PrevArrow' + arrowSize + '.png"/>' +
								'</div>')
							.css({left:((hsWidth/2) - nvNavWidth), top:(hsHeight - nvNavHeight), width:nvNavWidth, height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.hide()
							.dblclick(function() {return(false);})
							.click(function() {
								var images  = $(this).parent().find(".InlineGalleryHotspotImages img");
								var visible = $(images).filter(":visible");
								var idx = $(images).index(visible);
								if (idx > 0 && images.length > 1) {
									images.eq(idx).hide();
									images.eq(idx - 1).show();
								}
								return(false); // Avoid propagating click to parent div
							});
				$(jqImageArea).append(vNav);
				
				var eNav = $('<div class="InlineGalleryHotspotNavTransparency InlineGalleryHotspotNavNext"</div>' + 
								'<div class="InlineGalleryHotspotNav InlineGalleryHotspotNavNext" ' + 
								'<img src="/oosurf/organicobject/jquery-plugins/hsGallery/images/NextArrow' + arrowSize + '.png"/>' +
								'</div>')
							.css({left:(hsWidth/2), top:(hsHeight - nvNavHeight), width:nvNavWidth, height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.hide()
							.dblclick(function() {return(false);})
							.click(function() {
								var images  = $(this).parent().find(".InlineGalleryHotspotImages img");
								var visible = $(images).filter(":visible");
								var idx = $(images).index(visible);
								if (idx > -1 && idx < (images.length - 1)) {
									images.eq(idx).hide();
									images.eq(idx + 1).show();
								}
								return(false); // Avoid propagating click to parent div
							});
				$(jqImageArea).append(eNav);
		
				var neNav = $('<div class="InlineGalleryHotspotNavTransparency InlineGalleryHotspotNavLast"</div>' + 
								'<div class="InlineGalleryHotspotNav InlineGalleryHotspotNavLast" ' + 
								'<img src="/oosurf/organicobject/jquery-plugins/hsGallery/images/LastArrow' + arrowSize + '.png"/>' +
								'</div>')
							.css({left:((hsWidth/2) + nvNavWidth), top:(hsHeight - nvNavHeight), width:((hsWidth/2) - nvNavWidth), height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.hide()
							.dblclick(function() {return(false);})
							.click(function() {
								var images  = $(this).parent().find(".InlineGalleryHotspotImages img");
								var visible = $(images).filter(":visible");
								var idx = $(images).index(visible);
								if (idx > -1 && images.length > 0) {
									images.eq(idx).hide();
									images.eq(images.length - 1).show();
								}
								return(false); // Avoid propagating click to parent div
							});
				$(jqImageArea).append(neNav);
				
				$this.click(function() {
					return(false); 
				});
				
				bindHover(this);
				
				$this.bind('resizestart', function(event, ui) {
						unBindHover(this);
					}
				);
				
				$this.bind('resizestop', function(event, ui) {
						// Update images
						var images  = $(this).find(".InlineGalleryHotspotImages img");
						var hsWidth  = ui.size.width;
						var hsHeight = ui.size.height;
						var len = images.length;
						for (var i=0; i<len; i++) {
							reCalcImage(images[i], hsWidth, hsHeight);
						}
						
						var padding = 2;
						if (hsHeight > 200) {
							var arrowSize = "21";
							var nvNavWidth  = 21;
							var nvNavHeight = 21 + padding + padding;
						} else {
							var arrowSize = "16";
							var nvNavWidth  = 16;
							var nvNavHeight = 16 + padding + padding;
						}
						
						// Update navigation
						$(this).find(".InlineGalleryHotspotNavFirst")
							.css({left:0, top:(hsHeight - nvNavHeight), width:((hsWidth/2) - nvNavWidth), height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.find("img")
							.replaceWith('<img style="float:right;" src="/oosurf/organicobject/jquery-plugins/hsGallery/images/FirstArrow' + arrowSize + '.png"/>');
						$(this).find(".InlineGalleryHotspotNavPrev")
							.css({left:((hsWidth/2) - nvNavWidth), top:(hsHeight - nvNavHeight), width:nvNavWidth, height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.find("img")
							.replaceWith('<img src="/oosurf/organicobject/jquery-plugins/hsGallery/images/PrevArrow' + arrowSize + '.png"/>');
						$(this).find(".InlineGalleryHotspotNavNext")
							.css({left:(hsWidth/2), top:(hsHeight - nvNavHeight), width:nvNavWidth, height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.find("img")
							.replaceWith('<img src="/oosurf/organicobject/jquery-plugins/hsGallery/images/NextArrow' + arrowSize + '.png"/>');
						$(this).find(".InlineGalleryHotspotNavLast")
							.css({left:((hsWidth/2) + nvNavWidth), top:(hsHeight - nvNavHeight), width:((hsWidth/2) - nvNavWidth), height:nvNavHeight, 'padding-top':padding, 'padding-bottom':padding})
							.find("img")
							.replaceWith('<img src="/oosurf/organicobject/jquery-plugins/hsGallery/images/LastArrow' + arrowSize + '.png"/>');
						
						bindHover(this);
					}
				);
				
			});

		return this;
	};
	
	function reCalcImage(image, hsWidth, hsHeight) {
		var imageInfo = $(image).data("imageInfo");
		if (imageInfo == undefined) {
			return image;
		}
		var imageWidth  = imageInfo.width;
		var imageHeight = imageInfo.height;
		
		if ((hsWidth/imageWidth) > 1 && (hsHeight/imageHeight) > 1) {
			$(image).height("").width("")
				.parent()
				.css({left:((hsWidth - imageWidth)/2), top: ((hsHeight - imageHeight)/2), position:"absolute"});
		} else if ((hsWidth/imageWidth) > (hsHeight/imageHeight)) {
			$(image).height("100%").width("")
				.parent()
				.height(hsHeight)
				.css({left:((hsWidth - (imageWidth * (hsHeight/imageHeight)))/2), top: 0, position:"absolute"});
		} else {
			$(image).height("").width("100%")
				.parent()
				.width(hsWidth)
				.css({left:0, top: ((hsHeight - (imageHeight * (hsWidth/imageWidth)))/2), position:"absolute"});
		}
		return image;
	}
	
	function bindHover(jqObj) {
		$(jqObj).hover(
			function() {
				$(this).find(".InlineGalleryHotspotNav").show();
				$(this).find(".InlineGalleryHotspotNavTransparency").show();
				return(false); // Avoid propagating to parent div
			},
			function() {
				$(this).find(".InlineGalleryHotspotNav").hide();
				$(this).find(".InlineGalleryHotspotNavTransparency").hide();
				return(false); // Avoid propagating to parent div
			}
		);
	}
	
	function unBindHover(jqObj) {
		// unbind and hide in case they are shown when this method is called
		$(jqObj).unbind('mouseenter mouseleave');
		$(jqObj).find(".InlineGalleryHotspotNav").hide();
		$(jqObj).find(".InlineGalleryHotspotNavTransparency").hide();
	}
	
	// Setup default options
	$.fn.hsgallery.defaults = {imagePrefix: ""};

})(jQuery);