/*
 * 	BeZoom 0.2 - jQuery plugin
 *	written by Benjamin Mock
 *	http://benjaminmock.de/bezoom-jquery-plugin/
 *
 *	Copyright (c) 2009 Benjamin Mock (http://benjaminmock.de)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */

(function($) {
	$.fn.bezoom = function(options){
		// default settings
		var settings = {
			marginLeft : 10,
			identifier : 'bezoom',
			xidentifier : 'bezoomx',
			height : 200,
			width : 200,
			titleSource : 'title',
			displayTitle: false,
			imgSource : 'href',
			bgColor : '#5398EE',     // background color for title
			color : '#ffffff',       // font color for title
			size : '0.8em',           // font size for title
			xhairsize: 110
		};
		//extending options
		options = options || {};
	   	$.extend(settings, options);

		this.each(function(i){
			var title = $(this).attr(settings.titleSource);
			var imgBig = $(this).attr(settings.imgSource);
			$.fn.bezoom.bigImg = imgBig;
			var titleAttribute = $(this).attr("title");
			
			// saving jquery object of small image
			var img = $(this).find('img');

			$(this).mouseenter(function(e){
				// we're auto updating the image, so we may need to reset the imgBig variable
				//imgBig = $(this).attr(settings.imgSource); - this method seemed to drag a lil.
				imgBig = $.fn.bezoom.bigImg;
				
				// removing zoom container if exists to avoid duplicates
				$('#'+settings.identifier).remove();
				$('#'+settings.xidentifier).remove();
				// removing title to prevent default tooltip
				$(this).attr("title","");
				var imgSmallWidth = $(this).find('img').width();
				var imgSmallHeight = $(this).find('img').height();
				imgSmallHeight = 2;

				// calculating position for zoom container
				// Let's try offset instead of position
				//var pos = $(this).position();
				var pos = $(this).offset();
				var x = Math.ceil(pos.left-0)+imgSmallWidth+settings.marginLeft;
				var y = Math.ceil(pos.top-0)-imgSmallHeight;

				var displayBeZoom = '<div id="'+settings.identifier+'" style="top:'+y+'px;left:'+x+'px;width:'+settings.width+'px;">';
				if (settings.displayTitle)
					displayBeZoom += '<div style="background-color:'+settings.bgColor+';color:'+settings.color+';font-size:'+settings.size+';">'+title+'</div>';
				displayBeZoom += '<div style="width:'+settings.width+'px;height:'+settings.height+'px;overflow:hidden;position:relative;"><img id="'+settings.identifier+'_img" src="'+imgBig+'" style="position:relative;"></div></div>';

				$('body').append(displayBeZoom);
				
				$(this).append('<div id="'+settings.xidentifier+'" style="width:'+settings.xhairsize+'px; height:'+settings.xhairsize+'px;"></div>');
			}).mouseleave(function(){
				// removing zoom container
				$('#'+settings.identifier).fadeOut('fast');
				$('#'+settings.xidentifier).fadeOut('fast');
				// setting title back
				$(this).attr("title",titleAttribute);
			});
			$(this).mousemove(function(e){
				// catching mouse movement to position imgBig
				var imgSmallHeight = $(this).find('img').height();
				var imgSmallWidth = $(this).find('img').width();

		    	// calculating image relation
		    	var imgBigWidth = $('#'+settings.identifier+'_img').width();
		    	var imgBigHeight = $('#'+settings.identifier+'_img').height();
				var widthRel = imgSmallWidth / imgBigWidth;
				var heightRel = imgSmallHeight / imgBigHeight;

				// relative mouse position
				//var offset = img.position();
				var offset = img.offset();
				var mouseX = e.pageX - offset.left;
				var mouseY = e.pageY - offset.top;

				// positioning image according to image relation and mouse position
				var imgBigX = Math.ceil((mouseX / widthRel)-(settings.width / 2)) * (-1);
				imgBigX = Math.max((-1*imgBigWidth)+settings.width,imgBigX);
				imgBigX = Math.min(0,imgBigX);

				var imgBigY = Math.ceil((mouseY / heightRel)-settings.height*0.5) *(-1);
				imgBigY = Math.min(0,imgBigY);
				imgBigY = Math.max((-1*imgBigHeight)+settings.height,imgBigY);
				
				// positioning of xhair with the mouse
				var xHairPosX = mouseX-(settings.xhairsize/2)-3;
				var xHairPosY = mouseY-(settings.xhairsize/2)-3;

				// We don't want the crosshairs going beyond the size of the image
				if (xHairPosY<0) xHairPosY = 0; else if (xHairPosY>imgSmallHeight-settings.xhairsize-3) xHairPosY = imgSmallHeight-settings.xhairsize-3;
				if (xHairPosX<0) xHairPosX = 0; else if (xHairPosX>imgSmallWidth-settings.xhairsize-3) xHairPosX = imgSmallWidth-settings.xhairsize-3;

				$('#'+settings.identifier+'_img').css('left', imgBigX);
				$('#'+settings.identifier+'_img').css('top', imgBigY);
				
				$('#'+settings.xidentifier).css('left', xHairPosX);
				$('#'+settings.xidentifier).css('top', xHairPosY);
			});
			$(this).click(function(e){
				e.preventDefault();
				return false;
			});
		});

		return this;
	};
	
	$.fn.bezoom.bigImg = '';
})(jQuery);