/**
 * @author Huy Dinh
 * @date Sept 2008
 * @version 0.1
 * 
 * A plug in to show a magnify effect on images
 */
 /*
 ##########################################################################################################
 #	Modified by Duane A. Comeaux
 #	Added calculation to determine top offset of the item
 #	Added support for screen resizing to ensure that the magnifier stays true (centered)
 #	Added some browser sniffing
 #	Added margin to ZoomImage to allow better viewing at edge of image
 ##########################################################################################################
 */ 
function detectBrowser()
{	
	//alert($('.item').offset().left - $('#page').offset().left );
	var oset = new Object();
	if( /Safari/.test(navigator.userAgent) )
	{
		//alert('Safari');
		oset.left = $('.item').offset().left + $('#page').offset().left;
		oset.top = $('.item').offset().top + $('#page').offset().top;
	}
	if( /MSIE (\d+\.\d+);/.test(navigator.userAgent) )
	{
		oset.left = $('.item').offset().left;
		oset.top = $('.item').offset().top;
	}
	if( /Firefox\/\d\.\d\.\d/.test(navigator.userAgent) )
	{
		oset.left = $('.item').offset().left;
		oset.top = $('.item').offset().top;
	}
		
	return oset;
}
(function ($) {
	var zoomImageContainerCentreX,
		zoomImageContainerCentreY,
		zoomImageContainerHeight,
		zoomImageContainerWidth,
		thumbImageOffsetX,
		thumbImageOffsetY,
		sensorWidth,
		sensorHeight,
		zoomImageWidth,
		zoomImageHeight,
		zoomImage = $("<img style='position:absolute;'/>").css({margin: '100px 150px'}),
		zoomImageContainer = $("<div id='huy-magnifier' style='overflow:hidden;position:absolute;display:none;'></div>").append(zoomImage),
		sensor = $("<div id='sensor' style='position:absolute;top:0;left:0;background-color:#000;opacity:0;filter:Alpha(Opacity=0);cursor:crosshair; zIndex: 20002'></div>");
		
	$.fn.magnify = function() {
		var el1  = $('.item');
		var sp1 = el1.position();
		var sp2 = $('#zoomContainer').position();
		
		// Get the positioned parents of the item element
		var parentEls = el1.parents()
			.map(function () { 
				if(($(this).css('position') == 'absolute' || $(this).css('position') == 'relative') && $(this).attr('id') != 'content-wrapper' )
				{
					return this;
				}
			});
					
		// Add the elements' top to the total Y offset
		var totalOffsetY = sp1.top + sp2.top;
		
		// Add each parent's position to the total Y offset
		// Their position is relative to their parents
		parentEls.each(function()
		{
			totalOffsetY += $(this).position().top + parseInt($(this).css('marginTop'));
		});
		
		// Do some browser specific adjustments
		if( /MSIE (6\.\d+);/.test(navigator.userAgent) )
		{
			totalOffsetY = 2;
		}
		else if( /MSIE (7\.\d+);/.test(navigator.userAgent))
		{
			totalOffsetY = 0;
		}
		else if( /MSIE (8\.\d+);/.test(navigator.userAgent))
		{
			totalOffsetY = 0;
		}
			
		// Get the item's left and top offsets
		var itemOffsetLeft = $('img[rel=display]').offset().left + 1;
		var itemOffsetTop = $('img[rel=display]').offset().top; //totalOffsetY + 2;
		//var itemOffsetTop = $('img[rel=display]').offset().top + totalOffsetY
		
		// More adjustments for Safari Versions
		if( (/Safari/.test(navigator.userAgent)) && !(/Chrome/.test(navigator.userAgent)) )
		{	
			var version = navigator.appVersion.substr((navigator.appVersion.indexOf("Version") + 8), navigator.appVersion.indexOf(" "));
			version = parseInt(version);
			
			if( version < 4 )
				var contentOffsetTop = $('#content-wrapper').offset().top + 20;
			else
				var contentOffsetTop = $('#content-wrapper').offset().top;
		}
		else
			var contentOffsetTop = $('#content-wrapper').offset().top;
		
		// If the window width is less than the content width
		// contentOffsetLeft = 0;
		if( $(window).width() < $('#content-wrapper').width() )
			var adjustedOffsetLeft = 0;
		else
			var adjustedOffsetLeft = Math.floor(($(window).width() - $('#content-wrapper').width())/2);
			
		// Handle resizing the window to keep the magnifier true (centered)
		$(window)
		.bind('resize', function()
		{
			itemOffsetLeft = $('img[rel=display]').offset().left;
		});
	
		
		$("#zoomContainer")
		/*.css({
			top: ((/MSIE (7\.\d+);/.test(navigator.userAgent) || /MSIE (6\.\d+);/.test(navigator.userAgent)) ? '+=5':'+=0')
		})*/
		.append(zoomImageContainer).append(sensor);
		zoomImageContainerWidth = (zoomImageContainer.width() + 2);
		zoomImageContainerHeight = (zoomImageContainer.height() + 2);
		zoomImageContainerCentreX = zoomImageContainerWidth * .5;
		zoomImageContainerCentreY = zoomImageContainerHeight * .5;
		
		/*
		if( /MSIE (7\.\d+);/.test(navigator.userAgent) || /MSIE (6\.\d+);/.test(navigator.userAgent) )
		{
			alert($('img[rel=display]').offset().top +' '+ itemOffsetTop);
			
			$("#zoomContainer")
			.css({
				top: ($("#zoomContainer").position().top + 10) +'px'
			});
		}
		*/
		
		// Set the position of the magnifier and the zoomable image
		// (large image placed over the existing viewed image)
		$('#sensor')
		.bind('mousemove', function(e) {
			zoomImageContainer.css({
				left:(e.pageX - itemOffsetLeft) - zoomImageContainerCentreX,
				top:(e.pageY - itemOffsetTop) - zoomImageContainerCentreY
			});
			
			if( /MSIE (7\.\d+);/.test(navigator.userAgent) || /MSIE (6\.\d+);/.test(navigator.userAgent) )
			{
				zoomImageContainer.css({
					top:e.pageY - itemOffsetTop - zoomImageContainerCentreY
				});
				
				zoomImage.css({
					left:((e.pageX - itemOffsetLeft - thumbImageOffsetX) / sensorWidth) * -(zoomImageWidth - zoomImageContainerWidth) + 0,
					top:((e.pageY - itemOffsetTop - thumbImageOffsetY) / sensorHeight) * -(zoomImageHeight - zoomImageContainerHeight) + 0
				});
			}
			else
			{
				zoomImage.css({
					left:((e.pageX - itemOffsetLeft - thumbImageOffsetX) / sensorWidth) * -(zoomImageWidth - zoomImageContainerWidth),
					top:((e.pageY - itemOffsetTop - thumbImageOffsetY) / sensorHeight) * -(zoomImageHeight - zoomImageContainerHeight)
				});
			}
			
		}).bind("mouseleave", function() {
			zoomImageContainer.hide();
			sensor.hide();
		});
		var thumbImage = this,
			fullWidth = this.width();
			fullHeight = this.height()
			thumbContainer = this.parent().css({
				position:"absolute"
			});
			thumbImage.data("fullWidth", this.width() + 300);
			thumbImage.data("fullHeight", this.height() + 200);
		this.attr("alt","").bind("mouseenter", function(){
			sensorWidth = thumbImage.width();
			sensorHeight = thumbImage.height();
			thumbImageOffsetX = (thumbImage.position().left);
			thumbImageOffsetY = (thumbImage.position().top);
			zoomImage.attr("src", thumbImage.attr("src"));
			zoomImageWidth = thumbImage.data("fullWidth");
			zoomImageHeight = thumbImage.data("fullHeight");
			if( /MSIE (\d+\.\d+);/.test(navigator.userAgent) )
				var t = 0;
			else 
				var t = 1;
			sensor.css({
				width:sensorWidth + 2 + "px",
				height:sensorHeight + 2 + "px",
				left:1 + "px",
				top:t + "px",
				zIndex: 50000
			}).show()
			.parent().css({
				zIndex: 50001, 
				width: $(this).width() + 2, 
				height: $(this).height() + 2
			})
			.parent().css({zIndex: 50002});
			zoomImageContainer.fadeIn("fast");
		});
		if (this.width() > this.height()) {
			this.height(this.height() / (this.width() / thumbContainer.width())).width(thumbContainer.width()).css({
				bottom:0
			});
		} else {
			var thumbImageWidth = this.width() / (this.height() / thumbContainer.height());
			this.width(thumbImageWidth).height(thumbContainer.height()).css({
				marginLeft:((thumbContainer.width() - thumbImageWidth) * 0.5) + "px"
			});
		}
		return this;
	}
})(jQuery);