/* To use you much pass the mouseCords (e) and the image to Pop
   $(img)  : is the jquery image //required
   e       : can be passed as jquery mouseCords or a two item array [x,y] //required
	 imgPath : is the src of the larger image, but if not set then the src of the $(img) will be passed

  imgPop($(img), e, imgPath);
 
  This will also work with the thumbnailer.

  Add this style to your css
	
/*
-------- PopUp Image --------
	#uiPopImage, #fxWrapper * {
		position: absolute;
		display: none;
		border: 1px solid #c0c0c0 !important;
	}
	#loading {
		position: absolute;
		display: none;
		background: #fff url('/gallery/loading.gif') 50% 50% no-repeat;
		border: 1px solid #c0c0c0 !important;
		width: 50px;
		height: 50px;
	}
*/
//originalSrcMask = ["/images/mojoThumb.aspx?img=~", "/images/mojoThumb.aspx?img=~", "&w=200"]; // Set this array with Strings to be replaced from the thumbnailed image

	function imgPop(toPop, e, imgPath) {
	
		//console.log(!$("#uiPopImage").parent().is("body") +" && "+ $("#uiPopImage"));
	
		if ( !$(".ui-effects-wrapper, #uiPopImage").parent().is("body") ) {
			lContainer = $("#loading");
		
			docWidth = $("body").width();
			docHeight = $("body").height();
			
			if ($.isArray(e)) {
				pageX = e[0];
				pageY = e[1];
			} else {
				pageX = e.pageX;
				pageY = e.pageY;
			}
			
			if (pageX > docWidth/2) {
				sDisplay = "right";
				lContainer.css({"top":pageY-10, "left":pageX-40});
			} else {
				sDisplay = "left";
				lContainer.css({"top":pageY-10, "left":pageX-10});
			}
			
			lContainer.effect("size", {from:{width:"0", height:"0"}, origin:["top",sDisplay] }, 200);
			
			if (!imgPath) {
				//imgPath = getSrc(toPop.attr("src"));
				imgPath = toPop.attr("src");
			}

			$("body").append("<img id=\"uiPopImage\" src=\""+imgPath+"\" border=\"0\" />");
			
			sContainer = $("#uiPopImage");
			sContainer.load(function() {
				imgWidth = sContainer.width();
								
				if (sDisplay == "right") {
					sContainer.css({"top":pageY-10, "left":pageX-imgWidth+10});
				} else if (sDisplay == "left") {
					sContainer.css({"top":pageY-10, "left":pageX-10});
				}
				
				sContainer.effect("size", { from:{width:"0", height:"0"}, origin:["top",sDisplay] }, 500, function() {
					lContainer.hide();
					sendBack($(this), sDisplay);
				});
			});
		}
	}
var timer;
	function sendBack(toHide, hDisplay) {

		//hContainer = $("#pageWrap");
		hContainer = $("#aspnetForm");
		
		hContainer.bind("mouseover", function() {
			timer = setTimeout( function() {
				toHide.effect("size", { to:{width:"0", height:"0"}, origin:["top",hDisplay] }, 500);
				toHide.queue(function() {
					$(this).unbind("mouseout");
					$(this).remove();
					$(this).dequeue();
				});
				hContainer.unbind("mouseover");
			},300);
		});
		
		hContainer.bind("mouseout", function() {
			clearTimeout(timer);
		});
	}

function getSrc(src) {
	for (x in originalSrcMask) {
		//alert("src: "+src+"\n replace: "+originalSrcMask[x]);
		src = src.replace(originalSrcMask[x], "");
	}
	return src;
}

$(function() { $("body").append("<div id=\"loading\"></div>"); });