jQuery.fn.extend({
	loadLinerDetail : function(){
		$(this).bind("click", function(){
			var url = $(this).attr("rel");
			var name = $(this).children("img").attr("alt");
			$("#thb-popout").remove();
			
			var popUpTimer = 500;
			var fadeInTimer = 1000;
			
			var startLeft = $(this).offset().left.toString();
			var startTop = $(this).offset().top.toString();
			var bodyHeight = $("body").height().toString();
			var winWidth = $(window).width();
			var winHeight = $(window).scrollTop();
			var endLeft = ((winWidth - 300) / 2).toString();
			var endTop = (winHeight + 20).toString();
			
			var overlayCSS = "width:100%;height:"+bodyHeight+"px;background:#555555;opacity:0.8;filter:alpha(opacity=80);position:absolute;z-index:100;left:0px;top:0px";
			var popoutCSS = "width:96px;height:196px;background:#FFFFFF;border:2px solid #333333;position:absolute;z-index:101;left:"+startLeft+"px;top:"+startTop+"px";
			var popoutCSS_End = {width:"296px", height:"570px", left:endLeft+"px", top:endTop+"px"};
			var imgLinerWrapCSS = "width:274px;height:524px;padding:10px;margin:0 auto";
			var imgLinerCSS = "width:250px;height:500px;padding:12px;background:url(/images/liners/detail/liner_shadow.jpg);display:none;";
			var imgLiner = '<a style="text-align:right;display:block;padding:4px 20px 0px 0px;color:#FF0000" href="javascript:void(0)" onclick="$(\'#thb-popout\').remove();$(\'#thb-overlay\').remove()">Close</a><div id="liner-img-wrap" style="'+imgLinerWrapCSS+'"><h1 style="text-align:center;font-size:16px;color:#555555;margin-top:-8px;">'+name+'</h1><div id="liner-img" style="'+imgLinerCSS+'"><img width="250" height="500" src="'+url+'" /></div></div>';
			
			$(document.body).append('<div id="thb-overlay" style="'+overlayCSS+'"></div>')
			.append('<div id="thb-popout" style="'+popoutCSS+'"></div>');

			var popout = $("#thb-popout");
			popout.animate(popoutCSS_End, popUpTimer, function(){
				$(this).append(imgLiner);
				var linerImg = $("#liner-img");
				linerImg.fadeIn(fadeInTimer);
			});
		});
	}
});

$(document).ready(function(){$(".liner > a").loadLinerDetail()});