$(document).ready(function() {
    var $el;
	var iImageWidth;    // declared out here because it is used in load()
	var iImageHeight;    // declared out here because it is used in load()

    $(".gallery a").live("mouseenter mouseleave", function(e) {  
		// use mouseenter and mouseleave and NOT mouseover and mouseout
		var iTop;
		var iLeft;
		
		var iSpacer=3;
		
		var iAbsoluteBottom;
		var iAbsoluteRight;
		var iAbsoluteStartIfZoomOnLeft;
		var iAbsoluteStartIfZoomAbove;
		
		var iViewportWidth;
		var iViewportHeight;
		
		
		var iThumbnailTop;
		var iThumbnailLeft;
		var iThumbnailWidth;
		var iThumbnailHeight;
		
		var sRel;
		
		$el = $(this);
		if (e.type == "mouseenter"){
			if ($el.attr("rel")=="nopic_tn.png"){
			    // don't display thumbnail
			    $("#id_divZoom").hide();
			    $("#id_imgZoom").removeAttr("src");
			} else {
			    $("#id_imgZoom").attr("src", "http://www.mazinfurniture.com/images/ajaxload.gif");
			    $("#id_imgZoom").css({
								    "top":"0", 
								    "left":"0",
								    "position":"absolute",
								    "color":"#ffffff",
								    "background":"#ffffff",
								    "opacity":"1"
								    });
			
				//$("#id_imgZoom").attr("opacity","1");
			    $("#id_divZoom").show();

			    sRel=$el.attr("rel");
			    /*
			    $("#id_imgZoom").attr("src", sRel);	// using src attribute with existing img and div seems to get around issue where adding img dynamically sometimes gets confused
			    $("#id_divZoom").show();	// need to load and show image to get width and height
			    iImageWidth=$("#id_imgZoom").width();
			    iImageHeight=$("#id_imgZoom").height();
			    $("#id_divZoom").hide();	// hide it while doing calculations
			    */
				
			    var img = new Image();
			    $(img).load(function(){
			        // this function is called when the img has finished loading
			        //  (i.e. after img.src is set)
                    iImageWidth=img.width;
                    iImageHeight=img.height;
			    })
			    img.src=sRel;

			    //iTop=iThumbnailTop-$("#id_tbl").height(); // use this if id_imgZoom is using position:absolute
			    iViewportWidth=$(window).width();
			    iViewportHeight=$(window).height();
			    
			    iThumbnailTop=$el.children(":first").offset().top;
			    iThumbnailLeft=$el.children(":first").offset().left;
			    iThumbnailWidth=$el.children(":first").width();
			    iThumbnailHeight=$el.children(":first").height();
    			
			    iAbsoluteBottom=iThumbnailTop+iImageHeight; 
			    iAbsoluteRight=iThumbnailLeft+iThumbnailWidth+iSpacer+iImageWidth;
			    iAbsoluteStartIfZoomOnLeft=iThumbnailLeft-iImageWidth-(iSpacer*5);
			    //iAbsoluteStartIfZoomAbove=iThumbnailTop-iImageHeight+(iThumbnailHeight/2);
				iAbsoluteStartIfZoomAbove=iThumbnailTop+iThumbnailHeight-iImageHeight-(iSpacer*2);
			    //---------------------------------------
/*
    $("#id_txtDebug").text(
                        "sRel="+sRel
                        +"\r"
                        +"\r"
                        +", iVpWidth="+iViewportWidth
                        +", iAbsRight="+iAbsoluteRight
                        +"\r"
                        +"\r"
                        +", iVpHeight="+iViewportHeight
                        +", iAbsBottom="+iAbsoluteBottom
                        +"\r"
                        +"\r"
                        +", iImgWidth="+iImageWidth
                        +", iImgHeight="+iImageHeight
                        +"\r"
                        +", iThumbnailTop="+iThumbnailTop
                        +", iThumbnailLeft="+iThumbnailLeft
                        +", iThumbnailWidth="+iThumbnailWidth
                        +", iThumbnailHeight="+iThumbnailHeight
                        +"\r"
                        +", iAbsStartIfZoomOnLeft="+iAbsoluteStartIfZoomOnLeft
                        +", iAbsoluteStartIfZoomAbove="+iAbsoluteStartIfZoomAbove
                        +", iThumbnailTop+(iThumbnailheight/2)="+(iThumbnailTop+(iThumbnailHeight/2))
                        +", (iImageHeight/2)="+(iImageHeight/2)
                        +"\r"
                        );
*/	                        
	                        
	                        
			    if (iViewportWidth >= iAbsoluteRight){
			        // zoomed image will fit to the right of the thumbnail
			        if (iViewportHeight >= iAbsoluteBottom){
			            // zoomed image will fit below the top of the thumbnail
					    // start point is top of thumb and to right of thumb
					    iTop=iThumbnailTop;
					    iLeft=iThumbnailLeft+iThumbnailWidth+iSpacer;
                                                                //$("#id_txtDebug").text("10:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
                    } else {
			            // zoomed image will fit below the top of the thumbnail
					    if (iAbsoluteStartIfZoomAbove > 0){
                            iTop=iAbsoluteStartIfZoomAbove;
    					    iLeft=iThumbnailLeft+iThumbnailWidth+iSpacer;
                                                                //$("#id_txtDebug").text("21:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
                        } else if ((iThumbnailTop+(iThumbnailHeight/2) - (iImageHeight/2)) > 0){
			                // show zoomed image to the right but halfway vertically
                            // start point is halfway above thumb and to right of thumb
                            iTop=iThumbnailTop+(iThumbnailHeight/2)-(iImageHeight/2);
                            iLeft=iThumbnailLeft+iThumbnailWidth+iSpacer;
                                                                //$("#id_txtDebug").text("23:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
                        } else {
                            // display it to bottom right anyways
					        iTop=iThumbnailTop;
					        iLeft=iThumbnailLeft+iThumbnailWidth+iSpacer;
                                                                //$("#id_txtDebug").text("22:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
                        } 
					 }
			    } else if (iViewportWidth < iAbsoluteRight) {
			        // zoomed image will NOT fit to the right of the thumbnail
			        if (iAbsoluteStartIfZoomOnLeft < 0){
					    // start point is top of thumb and to right of thumb
					    iTop=iThumbnailTop;
					    iLeft=iThumbnailLeft+iThumbnailWidth+iSpacer;
																//$("#id_txtDebug").text("30:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
					 } else if (iViewportHeight >= iAbsoluteBottom){
					    // start point is top of thumb and to left of thumb
					    iTop=iThumbnailTop;
					    iLeft=iAbsoluteStartIfZoomOnLeft;
																//$("#id_txtDebug").text("40:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
					 } else if (iViewportHeight < iAbsoluteBottom){
					    // start point is halfway above thumb and to left of thumb
                        iTop=iAbsoluteStartIfZoomAbove;
//					    iTop=iThumbnailTop-iImageHeight+(iThumbnailHeight/2);
					    iLeft=iAbsoluteStartIfZoomOnLeft;
																//$("#id_txtDebug").text("50:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
					 } else {
																//$("#id_txtDebug").text("55:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
                     }
			    } else {
				    // should never get here
				    //alert('out of viewport');
                                                                //$("#id_txtDebug").text("60:\r" + $("#id_txtDebug").val() +"\r(" + iTop +", "+iLeft+")");
				    return false;
			    }
    			
    			
			    $("#id_imgZoom").attr("src", sRel);
			    $("#id_imgZoom").css({
								    "top":iTop, 
								    "left":iLeft,
								    "position":"absolute",
								    "color":"#fff",
								    "background":"#cccccc",
								    "padding":"5px",
								    "-webkit-border-radius":"3px",
								    "-moz-border-radius":"3px",
								    "border-radius":"3px",
									"opacity":"0"
								    });
								    //"z-index":"1000",
    							
				$("#id_imgZoom").stop().animate({"opacity":1}, 500);
			    //$("#id_divZoom").show();
	        }
		} else if (e.type == "mouseleave"){
			$("#id_imgZoom").stop();
			$("#id_divZoom").hide();
			$("#id_imgZoom").removeAttr("src");
			$("#id_imgZoom").attr("opacity","0");
		}
        return false;
    });

});