var ztImg = new Image(); 
var zvImg = new Image(); 

var dragObj = null;
var thumbBox = null; // ¿ÞÂÊ ¹è°æ À̹ÌÁö 
var dragImg = null; // ¿ÞÂÊ µå·¡±× À̹ÌÁö 
var largeBox = null; // ¿À¸¥ÂÊ ¹Ú½º  
var largeImg = null; // ¿À¸¥ÂÊ À̹ÌÁö 

var largeSize = 200;
var largeTop = 0; 
var largeLeft = 20;
var dragSize = 100;
var blink_gap = 10; 

var thumbOffset = {}; 
thumbOffset.left=thumbOffset.trueLeft=thumbOffset.top=thumbOffset.right=thumbOffset.bottom=null;

var pnt_1 = '';
var pnt_2 = '';
var pnt_3 = '';
var pnt_4 = '';

function zoom1_init(largesize, largetop, largeleft, dragsize, blingap, t_path, t_width, t_height, v_path, v_width, v_height) { 
	ztImg.src = t_path;
	ztImg.width = t_width; 
	ztImg.height = t_height; 
	zvImg.src = v_path;
	zvImg.width = v_width; 
	zvImg.height = v_height; 
	largeSize = largesize;
	largeTop = largetop;
	largeLeft = largeleft;
	dragSize = dragsize; 
	blink_gap = blingap; 

	document.getElementById('tbl_imgs').style.height = ztImg.height + 10;

	thumbBox = document.getElementById('div_z_thumb_box');
	thumbBox.style.width = ztImg.width; 
	thumbBox.style.height= ztImg.height; 
	thumbBox.style.background = "url('" + ztImg.src + "') no-repeat 0px 0px";
	//alert(thumbBox.style.width);
	dragImg = document.getElementById('div_z_drag');
	dragImg.style.width  = dragSize+"px";
	dragImg.style.height = dragSize+"px";
	dragImg.style.background = "url(" + ztImg.src + ") no-repeat 0px 0px";
	
	thumb_overlay = document.getElementById('div_z_thumb_overlay');
	thumb_overlay.style.width = ztImg.width; 
	thumb_overlay.style.height= ztImg.height; 

	largeBox = document.getElementById('div_z_large_box'); 
	largeBox.style.width = largeSize+"px";
	largeBox.style.height= largeSize+"px";
	
	largeImg = document.getElementById('div_z_large_img');
	largeImg.style.width = largeImg.style.height = largeSize;
	largeImg.style.background = "url('" + zvImg.src + "') no-repeat 0px 0px";
	
	//Mouse On&Off Events
	document.onmousemove = zoom1_move;
	thumbBox.onmouseover = function() {zoom1_over()}
	thumbBox.onmouseout = function() {zoom1_out()}

	//Intiailize Offsets & Thresholds
	zoom1_offset_init();
	thumbOffset.left = thumbBox.style.posLeft;	
	thumbOffset.top = thumbBox.style.posTop;	

	//Position Zoom Container
	largeBox.style.top = thumbOffset.top + largeTop + "px"; //change this to move the zoomed image up and down
	largeBox.style.left = thumbOffset.left + ztImg.width + largeLeft +"px";

	pnt_1 = thumbOffset.left;
	pnt_2 = ((thumbOffset.left + ztImg.width) - dragSize);
	pnt_3 = thumbOffset.top;
	pnt_4 = ((thumbOffset.top + ztImg.height) - dragSize);
}

function zoom1_over() {
	dragObj = document.getElementById('div_z_drag');
	//ie6SelectFix(true);
	dragImg.style.display = 'block';
	largeBox.style.display = 'block';
	thumb_overlay.style.display='block';
	dragImg.className = 'z_drag_over';
}

function zoom1_out() {
	dragObj = null;
	//ie6SelectFix(false);
	dragImg.style.display = 'none';
	largeBox.style.display = 'none';
	thumb_overlay.style.display='none';
	dragImg.className = 'z_drag_out';
}

function zoom1_move(ev) {
	//document.getElementById('emt').innerHTML = '1 - event.offsetX:' + event.offsetX + ', event.offsetY:' + event.offsetY;
	//document.getElementById('emt2').innerHTML = '2 - thumbBox.style.width:' + thumbBox.style.width + ', thumbBox.style.height:' + thumbBox.style.height;
	//document.getElementById('emt3').innerHTML = '3 - thumbBox.offsetWidth:' + thumbBox.offsetWidth + ', thumbBox.offsetHeight:' + thumbBox.offsetHeight;
	//document.getElementById('emt4').innerHTML = '4 - thumbOffset.left:' + thumbOffset.left + ', thumbOffset.top:' + thumbOffset.top;
	//document.getElementById('emt5').innerHTML = '5 - pnt:' + pnt_1 + ', ' + pnt_2 + ', ' + pnt_3 + ', ' + pnt_4 ;

	ev = ev || window.event; 
	var mousePos = zoom1_mouseCoords(ev);

	if (dragObj){

		if ((mousePos.x - blink_gap)<=pnt_1) {
			x = pnt_1 + blink_gap; 
		} else if ((mousePos.x - blink_gap)>=pnt_2)  {
			x = pnt_2 + blink_gap; 
		} else {
			x = mousePos.x; 
		}

		if ((mousePos.y - blink_gap)<=pnt_3) {
			y = pnt_3 + blink_gap; 
		} else if ((mousePos.y - blink_gap)>=pnt_4)  {
			y = pnt_4 + blink_gap; 
		} else {
			y = mousePos.y; 
		}
		//document.getElementById('emt6').innerHTML = '6 - x,y:' + dragObj.style.pixelLeft + ', ' + y;

		dragObj.style.pixelLeft = x - blink_gap - pnt_1;
		dragObj.style.pixelTop = y - blink_gap - pnt_3;
		//document.getElementById('emt7').innerHTML = '7 - dragObj.style.pixelLeft:' + dragObj.style.pixelLeft;
		var bgx = x - thumbOffset.left - blink_gap;
		var bgy = y - thumbOffset.top - blink_gap; 
		//document.getElementById('emt8').innerHTML = '8 - bgx:' + bgx + ', ' + bgy;
		dragObj.style.backgroundPosition = "-"+bgx+"px -"+bgy+"px";

		var bgx2 = bgx * (zvImg.width/ztImg.width);
		var bgy2 = bgy * (zvImg.height/ztImg.height);
		//document.getElementById('emt9').innerHTML = '9 - bgx2:' + bgx2 + ', ' + bgy2;
		largeImg.style.backgroundPosition = "-"+bgx2+"px -"+bgy2+"px";
	}
}

function zoom1_set_large(t_path, t_width, t_height, v_path, v_width, v_height){
	dragObj = null;
	//ie6SelectFix(false);
	dragImg.style.display = 'none';
	largeBox.style.display = 'none';
	thumb_overlay.style.display='none';
	dragImg.className = 'z_drag_out';
	zoom1_init(largeSize, largeTop, largeLeft, dragSize, blink_gap, t_path, t_width, t_height, v_path, v_width, v_height); 
} 

function getPosition(obj){
	var T= 0,L= 0;
	while(obj){
		L+= obj.offsetLeft;
		T+= obj.offsetTop;
		obj = obj.offsetParent;
	}
	return [L,T];    
}

function zoom1_mouseCoords(ev){ 
	if(ev.pageX || ev.pageY){ 
		return {x:ev.pageX, y:ev.pageY}; 
	} 
	return { 
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop 
	}; 
}

function zoom1_offset_init(){
	//thumbOffset_ar = getPosition(document.getElementById('div_z_thumb_box'));
	//thumbOffset.left = thumbOffset_ar[0];	
	//thumbOffset.top = thumbOffset_ar[1];	
	//thumbOffset.left = thumbOffset_ar[0];	
	//thumbOffset.top = thumbOffset_ar[1];	
}