$(document).ready(function() {

	$(".ckshow_Img").click(function(){ 
		var index = $(".ckshow_Img").index(this);
		ck_showImage(index,"bg");
	}); 
}); 
function ck_showImage(index, bg){
	var imgObj = new Image();
	imgObj.src = $(".ckshow_Img").eq(index).attr("osrc");

	//·Îµù·¹ÀÌ¾î ¸¸µé±â
	ck_loading(index);

	$(imgObj).load(function () {
		//Æ˾÷ ·¹ÀÌ¾î »ý¼º & È®´ëÀ̹ÌÁö Ŭ¸¯ÈÄ Ãà¼ÒµÇ´Â°Å±îÁö
		ck_Createbox(index);
		
		$("#loading").remove();
	
		$('#ckImageBox').append(this);

		//À̹ÌÁö È®´ëÀü Áغñ
		ck_Setimage(index);
				
		//À̹ÌÁö¸¦ È®´ë½ÃÅ´
		ck_Showimage(index);

		//À̹ÌÁö µÞ¹è°æÀ» ¸¸µë
		if(bg)
		ck_ImageBox_bg();
	}).error(function () {
		alert("ÆÄÀÏÀ» ãÀ» ¼ö ¾ø½À´Ï´Ù.");
		$("#loading").remove();
	}).attr('src', $(".ckshow_Img").eq(index).attr("osrc"));

}
function ck_replaceWith(index){
	//ck_CloseImg(pn,index);
}
//·Îµù À̹ÌÁö Ãâ·Â
function ck_loading(index){
	
	var imgOrg = new Image();
		imgOrg.src = $(".ckshow_Img").eq(index).attr("src");
		
	//½æ³×ÀÏ À̹ÌÁö ÁÂÇ¥¸¦ ±¸ÇÔ
	var offsetLeft = $(".ckshow_Img").eq(index).offset().left;
	var offsetTop = $(".ckshow_Img").eq(index).offset().top;
 
	var imgW = $(".ckshow_Img").eq(index).width();
	var imgH = $(".ckshow_Img").eq(index).height();
 
	$("<div id='loading'></div>").appendTo('body').click(function(){
		$(this).remove();
		ck_showImage.stop;
	});
	$("#loading").css('width',imgW + 'px');
	$("#loading").css('height',imgH + 'px');
	$("#loading").css('top',offsetTop + 'px');
	$("#loading").css('left',offsetLeft + 'px');
	$("#loading").css('opacity','0.5');
}
//À̹ÌÁö º¯È­½ÃÀÛ
function ck_Showimage(index){

 	//Æ˾÷µÉ À̹ÌÁö Å©±â(ºê¶ó¿ìÀú â¿¡ ¸º°Ô ±¸Çس¿)
	var n_wh = ck_reckon(index,100);

	// À̹ÌÁö È®´ë ½ÃÀÛ : ÃÖÁ¾ »çÀÌÁî¿Í À§Ä¡
	$("#ckImageBox img").animate({
		width: n_wh[0]+"px",
		height: n_wh[1]+"px",
		top:  Math.round(($(window).height()-n_wh[1])/2)  + $(window).scrollTop() + "px",
		left:  Math.round(($(window).width()-n_wh[0])/2)+"px",
		opacity: 1.0
	}, 500,function(){
		if(n_wh[0] != n_wh[2] && n_wh[1] != n_wh[3])
		ck_zoom(n_wh);
		else{
		// È®´ëµÈÈÄ À̹ÌÁö¸¦ µå·¡±× Çϱâ
		$("#ckImageBox").draggable({ cursor: 'move',scroll: false }); 
		$("#ckImageBox").css('cursor', 'move'); 
		}
		
		var imgCnt = $(".ckshow_Img").length;
	
		if(index > 0){
		//´ÙÀ½ ÀÌÀü ¹öÆ°
		$("<div id='ck_prevbtn'></div>").appendTo('body').click(function(){
			ck_CloseImg(index,index-1);
			//ck_Showimage(index-1);
			//ck_replaceWith(index,index-1);
		});
		$("#ck_prevbtn").css("top", Math.round(($(window).height()- 60 )/2)  + $(window).scrollTop() + "px");
		$("#ck_prevbtn").css("left", "20px");

         $(document).keydown(function(evt) { 
             if (!evt) 
                 evt = window.event; 
             if (evt.keyCode == 37) { 
                 $("#ck_prevbtn").click(); 
             }
         }); 

			/*
			$(window).keydown(function(event){
					alert("a:"+index+"::"+event.keyCode);
				if(event.keyCode==37){
					ck_CloseImg(index, index-1);
				}
			});
			*/
		}		
		if(index < imgCnt-1){
		//´ÙÀ½ ÀÌÀü ¹öÆ°
		$("<div id='ck_nextbtn'></div>").appendTo('body').click(function(){
			ck_CloseImg(index,index+1);
			//ck_Showimage(index+1);
			//ck_replaceWith(index+1);
			
		});
		$("#ck_nextbtn").css("top", Math.round(($(window).height()- 60 )/2)  + $(window).scrollTop() + "px");
		$("#ck_nextbtn").css("right", "20px");
         $(document).keydown(function(evt) { 
             if (!evt) 
                 evt = window.event; 
             if (evt.keyCode == 39) { 
                 $("#ck_nextbtn").click(); 
             }
         }); 

			/*

			$(window).keydown(function(event){
				if(event.keyCode==39)
					ck_CloseImg(index, index+1);
			});	
			*/
		}
	});
	// À̹ÌÁö È®´ë ½ÃÀÛ : ÃÖÁ¾ »çÀÌÁî¿Í À§Ä¡
	$("#ckImageBox").animate({
		width: n_wh[0]+"px",
		height: n_wh[1]+"px",
		top:  ($(window).height()-n_wh[1])/2  + $(window).scrollTop() + "px",
		left:  ($(window).width()-n_wh[0])/2+"px",
		opacity: 1.0
	}, 500);
}

function ck_zoom(n_wh){
	$("<div id='ck_actualBtn'></div>").appendTo('body').click(function(){
		ck_Showzoom(n_wh);
	});
	var t = $("#ckImageBox").css("top").substr(0,  $("#ckImageBox").css("top").length-2);
	var l = $("#ckImageBox").css("left").substr(0,  $("#ckImageBox").css("left").length-2);
 	$("#ck_actualBtn").css("top", Number(t) - 15 + "px");
	$("#ck_actualBtn").css("left", Number(l)+Number(n_wh[0]) - 15 +"px");


}
function ck_Showzoom(n_wh){
	$('#ck_actualBtn').hide();
	$("#ckImageBox").animate({
		width: n_wh[2]+"px",
		height: n_wh[3]+"px",
		top:  ($(window).height()-n_wh[3])/2  + $(window).scrollTop() + "px",
		left:  ($(window).width()-n_wh[2])/2+"px"
	}, 500);
	// À̹ÌÁö È®´ë ½ÃÀÛ : ÃÖÁ¾ »çÀÌÁî¿Í À§Ä¡
	$("#ckImageBox img").animate({
		width: n_wh[2]+"px",
		height: n_wh[3]+"px",
		top:  ($(window).height()-n_wh[3])/2  + $(window).scrollTop() + "px",
		left:  ($(window).width()-n_wh[2])/2+"px"
	}, 500);
	// È®´ëµÈÈÄ À̹ÌÁö¸¦ µå·¡±× Çϱâ
	$("#ckImageBox").draggable({ cursor: 'move',scroll: false }); 
	$("#ckImageBox").css('cursor', 'move'); 
}
function ck_Setimage(index){

	var imgOrg = new Image();
	imgOrg.src = $(".ckshow_Img").eq(index).attr("src");
		
	//½æ³×ÀÏ À̹ÌÁö ÁÂÇ¥¸¦ ±¸ÇÔ
	var offsetLeft = $(".ckshow_Img").eq(index).offset().left;
	var offsetTop = $(".ckshow_Img").eq(index).offset().top;

	// È®´ëµÉ¶§ ·¹À̾îÀÇ Ã³À½ À§Ä¡¿Í »çÀÌÁî , Åõ¸íµµ
	$("#ckImageBox").css('width',imgOrg.width + 'px');
	$("#ckImageBox").css('height',imgOrg.height + 'px');
	$("#ckImageBox").css('top',offsetTop + 'px');
	$("#ckImageBox").css('left',offsetLeft+'px');
	$("#ckImageBox").css({ opacity: 0.0 });
	
	// È®´ëµÉ¶§ À̹ÌÁöÀÇ Åõ¸íµµ¿Í »çÀÌÁî
	//$("#ckImageBox img").css({ opacity: 0.0 });
	$("#ckImageBox img").css('width',imgOrg.width + 'px');
	$("#ckImageBox img").css('height',imgOrg.height + 'px');
}
//Æ˾÷ ·¹ÀÌ¾î »ý¼º
function ck_Createbox(index){
		var mx =0;
		var my =0; 
  	$("<div id='ckImageBox'></div>").appendTo('body').mousedown(function(e){
			mx = e.pageX;
			my = e.pageY;
			}).mouseup(function(e){
			if(mx==e.pageX && my==e.pageY){
				ck_CloseImg(index);
		  }
	});
}

//Æ˾÷ À̹ÌÁö ´Ý±â
function ck_CloseImg(index,np){
	var k=0;
		$('#ck_actualBtn').remove();
		$('#ck_nextbtn').remove();
		$('#ck_prevbtn').remove();

		var imgOrg = new Image();
		imgOrg.src = $(".ckshow_Img").eq(index).attr("src");
		

		//½æ³×ÀÏ À̹ÌÁö ÁÂÇ¥¸¦ ±¸ÇÔ
		var offsetLeft = $(".ckshow_Img").eq(index).offset().left;
		var offsetTop = $(".ckshow_Img").eq(index).offset().top;


		//Æ˾÷ ·¹À̾î Ŭ¸¯½Ã ¹ß»ýÇÒ À̺¥Æ® »ý¼º(Ãà¼Ò)
		$( "#ckImageBox, #ckImageBox img" ).animate({
			width: imgOrg.width+"px",
			height: imgOrg.height+"px",
			top: offsetTop+"px",
			left: offsetLeft+"px",
			opacity: 0.0
		  }, 500, function(){
			if(!k){
			$('#ckImageBox').html("");
			$('#ckImageBox').remove();
		 	if(np>=0)ck_showImage(np);
			else{
				$('#ckImageBox_bg').remove();
				$("body").css("overflow","auto");
			}
			} 
			k++
		  });

}
//À̹ÌÁö Å©±â(ºê¶ó¿ìÀú â¿¡ ¸º°Ô ±¸Çس¿)
function ck_reckon(index,m){

	var imgObj = new Image();
	imgObj.src = $(".ckshow_Img").eq(index).attr("osrc");

	var n_wh = new Array();
	n_wh[0] = imgObj.width;
	n_wh[1] = imgObj.height;
	n_wh[2] = imgObj.width;
	n_wh[3] = imgObj.height;
 
	if(imgObj.width > $(window).width()-m){
		n_wh[0] = $(window).width() - m;
		n_wh[1] = Math.round(n_wh[0] * imgObj.height / imgObj.width); //¹Ý¿Ã¸²
		if(n_wh[1] > $(window).height()-m){
			n_wh[1] = $(window).height() - m;
			n_wh[0] = Math.round(imgObj.width * n_wh[1] / imgObj.height); //¹Ý¿Ã¸²
		}
	}else if(imgObj.height > $(window).height()-m){
		n_wh[1] = $(window).height() - m;
		n_wh[0] = Math.round(n_wh[1] * imgObj.width / imgObj.height);
	}
	return n_wh;

}
//À̹ÌÁö È®´ëÈÄ ¹è°æ ¸¸µé±â
function ck_ImageBox_bg(){
	//$("body").css("overflow","hidden")
	$("<div id='ckImageBox_bg'></div>").appendTo('body');
	$("#ckImageBox_bg").css('height',$(document).height() + 'px');
  	$("#ckImageBox_bg").css('width',$(window).width() + 'px');
	$("#ckImageBox_bg").css({ opacity: 0.0 });

	$("#ckImageBox_bg").animate({
		opacity: 0.5
	  }, 500 );

	 $("#ckImageBox_bg").show();
	
}