/*************************************************************************************
程式功能		:	圖片放大鏡(magnifier)
建置日期		:	2011-11-03
版本			:	1.1
--------------------------------------------------------------------------------------
參數
maskWidth	:	方塊寬度	
maskHeight	:	方塊高度
opacity		:	透明度
objid		:	物件id
*************************************************************************************/
(function ($){
	jQuery.fn.extend ({	
		magnifier: function(option){
			var magnifier_void = {
				settings: null,
				init: function($this, settings){					
					magnifier_void.settings = settings;
					
					var mvs = magnifier_void.settings;
					
					$(document).mousemove(function(event){	
						var maskWidth	= 	mvs.maskWidth;
						var maskHeight	= 	mvs.maskHeight;					
						var myLeft 		= 	parseInt($("#" + mvs.objid).offset().left);
						var myTop 		= 	parseInt($("#" + mvs.objid).offset().top);
						var myWidth 	= 	parseInt($("#" + mvs.objid).attr("width"));
						var myHeight 	= 	parseInt($("#" + mvs.objid).attr("height"));
						var maxLeft 	= 	myLeft + myWidth;
						var maxTop 		= 	myTop + myHeight;
						var bigsrc 		= 	$("#" + mvs.objid).attr("bigsrc");
						var w 			= 	$("#" + mvs.objid).attr("w");
						var h 			= 	$("#" + mvs.objid).attr("h");
						

						if((myLeft <= event.pageX && event.pageX <= maxLeft) && (myTop <= event.pageY && event.pageY <= maxTop)){//觸發的範圍坐標			
							//避免重覆產生遮罩小方塊
							if(!$("#shui_zoom_mask").attr('id')){
								$("body").append("<div id=\"shui_zoom_mask\"></div>");
							}
							
							var ToLeft = event.pageX - (maskWidth - (maxLeft - event.pageX));//X軸的最大坐標
							var ToTop = event.pageY - (maskHeight - (maxTop - event.pageY));//Y軸的最大坐標
										
							//X軸的遮罩方塊
							if(maskWidth - (maxLeft - event.pageX) > 0 && (maxLeft - event.pageX) < (maskWidth / 2)){
								ToLeft = event.pageX - (maskWidth - (maxLeft - event.pageX));//超過右邊的遮罩定位
							}
							else if(maskWidth - (myLeft - event.pageX) < (maskWidth + maskWidth / 2)){
								ToLeft = myLeft;//超過左邊的遮罩定位
							}
							else{
								ToLeft = event.pageX - maskWidth / 2;
							}
										
							//Y軸的遮罩方塊
							if(maskHeight - (maxTop - event.pageY) > 0 && (maxTop - event.pageY) < (maskHeight / 2)){
								ToTop = event.pageY - (maskHeight - (maxTop - event.pageY));//超過上面的遮罩定位
							}
							else if(maskHeight - (myTop - event.pageY) < (maskHeight + maskHeight / 2)){
								ToTop = myTop;//超過下面的遮罩定位
							}
							else{
								ToTop = event.pageY - maskHeight / 2;
							}
							
							//遮罩小方塊
							$("#shui_zoom_mask").css({
													  "width": maskWidth,
													  "height": maskHeight,
													  "background-color": "#CCC",
													  "opacity": mvs.opacity,
													  "left": ToLeft,
													  "top": ToTop,
													  "position": "absolute",
													  "cursor": "crosshair"
													});
							
							//避免重覆產生放大區塊
							if(!$("#shui_show_photo").attr('id')){
								$("body").append('<div id="shui_show_photo">' + 
												 '<img id="shui_show_photo_image" src="' + bigsrc + '" border="0" width="' + w + '" height="' + h + '">'+
												 '</div>');
							}			
							
							//算出比率放大的區塊
							var toPerW = parseInt($("#shui_show_photo_image").attr('width')) / myWidth;
							var toPerH = parseInt($("#shui_show_photo_image").attr('height')) / myHeight;
							
							//笡出圖秀的位置
							var photoToW = (myLeft - ToLeft) * toPerW;
							var photoToH = (myTop - ToTop) * toPerH;
							
										
							//先大圖位置定義相對
							$("#shui_show_photo_image").css({
															"left": photoToW,
															"top": photoToH,
															"position": "relative"									
														   });
													
							//放大區塊
							$("#shui_show_photo").css({
													  "width": maskWidth * toPerW,
													  "height": maskHeight * toPerH,
													  "left": maxLeft,
													  "top": myTop,
													  "position": "absolute",
													  "overflow": "hidden"
													});
							
						}
						else{
							$("#shui_zoom_mask").remove();
							$("#shui_show_photo").remove();
						}
					});
				}
			};
			
			return this.each(function(){	
				var settings = { maskWidth: 200,
								 maskHeight: 200,
								 opacity: 0.3,
								 objid: this.id
							   };
				$.extend(settings, option);				
				magnifier_void.init($(this), settings);
			});
		}
	});
})(jQuery);