/* ยังไม่ได้ใช้ 
 * 
 */
(function($) {
	$.fn.myItemImageEnlarge = function(custom_conf){
		var conf = {'handler':null};
		if (custom_conf) $.extend(conf, custom_conf);		
		this.each(function(){
			var $imgObj = $(this);			
			$imgObj.data("_already_make",true);
			myItImgEnl_ClickEvent($imgObj);
		});
	}
	function myItImgEnl_ClickEvent($imgObj,$handler){
		$imgObj.css("cursor","pointer");
		$imgObj.attr('title','click เพื่อดูภาพขนาดใหญ่');
		$imgObj.click( function(){
			myItImgEnl_makeImageBox($(this));
		});
		//http://www.beautyintrend.com/images/item/thumbs/s012581-0.jpg
		//http://www.beautyintrend.com/images/item/012581-0.jpg
	}
	function myItImgEnl_makeImageBox($imgObj){
		var img_url = $imgObj.attr("src");
		var img_id = $imgObj.attr("id");
		var match = null;
		var enlarge_img_url = null;
		var protected_image = true;
		if( match = /^itEL_(.+)$/i.exec(img_id) ){
			enlarge_img_url = match[1];
			protected_image = false;
		}else if( match = /^(.+)\/thumbs\/[a-z]{1,3}(\d{2,9}\-\d{1})\.(jpg|jpeg)$/i.exec(img_url) ){
			enlarge_img_url = match[1]+"/"+match[2]+"."+match[3];
			protected_image = true;
		}else{
			alert('not match all');
			return null;
		}
		if( enlarge_img_url === null  ){ return false; }	
		var $DspWindow = $(top);
		var $DspDocument = $(top.document);
		if( $("frameset",$DspDocument).length > 0 ){
			$DspWindow = $(window);
			$DspDocument = $(document);
		}		
		var $Box = $("<div class='ItemEnlargeBox'></div>");		
		var CenterPos = myItImgEnl_getCenterPosition($DspWindow,{'width':400,'height':250});
		$Box.css({
			'overflow':'hidden',
			'border':'1px dashed black',
			'background-color':'#FFFFFF',
			'background-color':'#FFFFFF',
			'background-image':"url('http://www.beautyintrend.com/images/icon/loading.gif')",
			'background-repeat':'no-repeat',
			'background-position':'center center', 			
			'width':'400px','height':'200px',
			'position':'absolute',
			'cursor':'pointer',
			'top':CenterPos.top+'px','left':CenterPos.left+'px'
		}).click( function(){
			//$(this).animate({opacity:0},200,function(){ $(this).remove(); });
			$(this).remove();
		});
		$("body",$DspDocument).append($Box);
		var $img = $("<img src='"+enlarge_img_url+"'>").css({
			'position':'relative',
			'top':'-5000px','left':'-5000px'
		});	
		$Box.append($img);
		$img.load( function(){
			var w = $(this).attr('width')+10;
			var h = $(this).attr('height')+10;
			var CenterPos = myItImgEnl_getCenterPosition($DspWindow,{'width':w,'height':h});
//			alert( CenterPos.top+" "+CenterPos.left);
			$(this).parent().animate({
			    left: CenterPos.left,
			    top: CenterPos.top,
			    height: h,
			    width: w
			  }, 200, function() {
				  $("img",$(this)).css({'top':'5px','left':'5px'});
				  if( protected_image ){ myItImgEnl_makeProtectorCover($(this)); }					  
			  });
		});
	}
	function myItImgEnl_getCenterPosition($Window,Size){
		var h = $Window.height();
		var w = $Window.width();
		var top = $Window.scrollTop()+Math.ceil( (h-Size.height)/2 );
		var left = $Window.scrollLeft()+Math.ceil( (w-Size.width)/2 );
		var pos = {'left':left,'top':top};
	return pos;
	}
	
	function myItImgEnl_makeProtectorCover($ProtectObj){    
	    $ProtectObj.css({'MozUserSelect' : 'none'})
	    .bind('selectstart', function(e) { e.preventDefault(); } )
	    .mousedown(function(e) { e.preventDefault(); })
		var h = $ProtectObj.height();
		var w = $ProtectObj.width();
		var offset = $ProtectObj.offset();
		var $OverObj = $("<img src='http://www.beautyintrend.com/images/spacer.gif'/>");
		var css = {
				"z-index":"900000",
				"width":w+"px",
				"height":h+"px",
				"position":"absolute",
				//"border-width":"1px","border-style":"solid",
				"top":offset.top+"px",
				"left":offset.left+"px"
				};
		$ProtectObj.append($OverObj); 
		$OverObj.css(css);
		$OverObj.offset( offset );
	}
})(jQuery);

/*** ตรงส่วนนี้คือส่วนสั่งให้มัน Load Auto สำหรับ Listing มาตรฐานของเรา ที่ให้ Item Image มี class เป็น "itEL" */
$(document).ready( function(){
	/** มีไว้สำหรับ ie โดยเฉพาะ เพราะว่าพอเราไป add $Box ไว้ที่ top.docuemtn เวลาใน iframe เปลี่ยน  มันจะไม่ลบ $Box นั้นออกไป แต่ event click บน $Box ก็จะถูกลบออกไปด้วย
	 * ทำให้ไม่สามารถ remove $Box นั้นออกจากหน้า main ได้ ดังนั้นจึงต้องเช็คเมื่อมีการ unload ให้ remove ItemEnlargeBox ออกให้หมด
	 */
	$(window).unload( function(){
		$("div.ItemEnlargeBox",$(top.document)).remove();
	});		
	$("img.itEL").myItemImageEnlarge();
});