scrollLeft = 0;
scrollTop = 0;
scrollHeight = 0;
//================================ EVENT MOUSE MOVE CALLBACK FUNCTION
function swap_image(strPath) {
    document.getElementById("swap").src = strPath;	
}

function zoomGetSize(type, div)
{
	if (type == 'w')
		var info = div.style.width;
	else if (type == 'h')
		var info = div.style.height;
	else if (type == 't')
		var info = div.style.top;
	else if (type == 'l')
		var info = div.style.left;
	else
		return 0;
	
	return parseInt(info.substr(0, info.length - 2), 10);
}

function pos(event, p_img, p_div, l_div, d_div, detail_img, name_img, alter)
{
	var img_path = 'img/';
	var img_ext = '.jpg';

	var small_img 	= document.getElementById(p_img);
	var small_div 	= document.getElementById(p_div);
	var viewer_div 	= document.getElementById(l_div);
	var big_div 	= document.getElementById(d_div);
	var img_detail 	= document.getElementById(detail_img);
	var alter_div 	= document.getElementById(alter);

	// set zoom image
	img_detail.src = small_img.src.replace('detail', 'zoom');

	//======== get images size  
	var small_img_width 	= small_img.width;
	var small_img_height 	= small_img.height;
	
	var img_detail_width 	= img_detail.width;
	var img_detail_height 	= img_detail.height;

	var zoomW	= zoomGetSize('w', viewer_div);
	var zoomH	= zoomGetSize('h', viewer_div);

	//======== get interaction limit rect 
	
	if (document.body)
	{
		var margeW = parseInt(((document.body.clientWidth - 975) / 2) - scrollLeft);
		var margeH = parseInt(scrollTop);
	}
	else
	{
		var margeW = parseInt(((window.innerWidth - 975) / 2) - scrollLeft);
		var margeH = parseInt(scrollHeight);
	}
	if (margeW < 0) margeW = 0;
	if (margeH < 0) margeH = 0;

	var limit_left 		= 600 + margeW; // zoomGetSize('l', small_div);
	var limit_top 		= 250 + small_div.offsetTop + margeH; // zoomGetSize('t', small_div)

	var limit_right 	= limit_left + small_img_width;
	var limit_bottom 	= limit_top + small_img_height;

	var big_limit_left 		= big_div.offsetLeft; // zoomGetSize('l', big_div);
	var big_limit_top 		= big_div.offsetTop; // zoomGetSize('t', big_div)
	
//======== get mouse position 

mouseX = ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? event.pageX + 30 : event.x + limit_left;
mouseY = ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? event.pageY  : event.y + limit_top;
	
	//======== set limit position 			
	if(mouseX < limit_left || mouseX > limit_right + 60 || mouseY < limit_top || mouseY > limit_bottom - 35)
	{
		viewer_div.style.display	= 'none';
		big_div.style.display		= 'none';
		alter_div.style.display		= 'block';
		return;
	}
  
  viewer_div.style.left  		= ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? (mouseX - limit_left - (zoomW / 2)) - 90 + 'px' : (mouseX - limit_left - (zoomW / 2)) + 'px'; 
	viewer_div.style.top 		= (mouseY - limit_top - (zoomH / 2)) + 'px';
		
    viewer_div.style.display	= 'block';
	
	var rate_imgs_heigth 		= img_detail_height / small_img_height;
	var rate_imgs_width 		= img_detail_width / small_img_width;
	
	var offset_img_detail_top 	= parseInt(zoomGetSize('t', viewer_div) * (img_detail_height / small_img_height));
	var offset_img_detail_left 	= parseInt(zoomGetSize('l', viewer_div) * (img_detail_width / small_img_width));

	if (offset_img_detail_top < 0) offset_img_detail_top = 0;
	if (offset_img_detail_left < 0) offset_img_detail_left = 0;
	
	var max_offset_limit_top = parseInt( (zoomGetSize('t', viewer_div) + zoomH) * rate_imgs_heigth);
	var max_offset_limit_left = parseInt( (zoomGetSize('l', viewer_div) + zoomW) * rate_imgs_width);
	
	
  if (max_offset_limit_top > (img_detail_height + (zoomW / 2) - 5)) offset_img_detail_top = (img_detail_height - (zoomH * rate_imgs_heigth) + (zoomW / 2) -5);
  if (max_offset_limit_left > (img_detail_width + (zoomH / 2) - 5)) offset_img_detail_left = (img_detail_width - (zoomW * rate_imgs_width) + (zoomH / 2) -5);


	
	img_detail.style.marginTop  = -offset_img_detail_top + 'px';
	img_detail.style.marginLeft = -offset_img_detail_left + 'px';
	big_div.style.display 		= 'block';
}

function pos2(event, p_img, p_div, l_div, d_div, detail_img, name_img, alter)
{
	var img_path = 'img/';
	var img_ext = '.jpg';

	var small_img 	= document.getElementById(p_img);
	var small_div 	= document.getElementById(p_div);
	var viewer_div 	= document.getElementById(l_div);
	var big_div 	= document.getElementById(d_div);
	var img_detail 	= document.getElementById(detail_img);
	var alter_div 	= document.getElementById(alter);

	// set zoom image
	img_detail.src = small_img.src.replace('detail', 'zoom');

	//======== get images size  
	var small_img_width 	= small_img.width;
	var small_img_height 	= small_img.height;
	//300x375
	
	var img_detail_width 	= img_detail.width;
	var img_detail_height 	= img_detail.height;
	//1600x2000
	
	var zoomW	= zoomGetSize('w', viewer_div);
	var zoomH	= zoomGetSize('h', viewer_div);
	//55x90
	
	//======== get interaction limit rect 
	
	if (document.body)
	{
		var margeW = parseInt(((document.body.clientWidth - 975) / 2) - scrollLeft);
		var margeH = parseInt(scrollTop);
	}
	else
	{
		var margeW = parseInt(((window.innerWidth - 975) / 2) - scrollLeft);
		var margeH = parseInt(scrollHeight);
	}
	if (margeW < 0) margeW = 0;
	if (margeH < 0) margeH = 0;

	var limit_left 		= 300 + margeW; // zoomGetSize('l', small_div);
	var limit_top 		= 250 + small_div.offsetTop + margeH; // zoomGetSize('t', small_div)

	var limit_right 	= limit_left + small_img_width;
	var limit_bottom 	= limit_top + small_img_height;

	var big_limit_left 		= big_div.offsetLeft; // zoomGetSize('l', big_div);
	var big_limit_top 		= big_div.offsetTop; // zoomGetSize('t', big_div)
	
//======== get mouse position 

mouseX = ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? event.pageX + 30 : event.x + limit_left;
mouseY = ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? event.pageY  : event.y + limit_top;
	
	//======== set limit position 			
	if(mouseX < limit_left || mouseX > limit_right + 60 || mouseY < limit_top || mouseY > limit_bottom - 35)
	{
		viewer_div.style.display	= 'none';
		big_div.style.display		= 'none';
		alter_div.style.display		= 'block';
		return;
	}
  
  viewer_div.style.left  		= ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? (mouseX - limit_left - (zoomW / 2)) - 10 + 'px' : (mouseX - limit_left - (zoomW / 2)) + 'px'; 
	viewer_div.style.top 		= (mouseY - limit_top - (zoomH / 2)) + 'px';
		
    viewer_div.style.display	= 'block';
	
	var rate_imgs_heigth 		= img_detail_height / small_img_height;
	var rate_imgs_width 		= img_detail_width / small_img_width;
	
	var offset_img_detail_top 	= parseInt(zoomGetSize('t', viewer_div) * (img_detail_height / small_img_height));
	var offset_img_detail_left 	= parseInt(zoomGetSize('l', viewer_div) * (img_detail_width / small_img_width));
	
	if (offset_img_detail_top < 0) offset_img_detail_top = 0;
	if (offset_img_detail_left < 0) offset_img_detail_left = 0;
	
	var max_offset_limit_top = parseInt( (zoomGetSize('t', viewer_div) + zoomH) * rate_imgs_heigth);
	var max_offset_limit_left = parseInt( (zoomGetSize('l', viewer_div) + zoomW) * rate_imgs_width);
	
	
  if (max_offset_limit_top > (img_detail_height + (zoomW / 2) - 5)) offset_img_detail_top = (img_detail_height - (zoomH * rate_imgs_heigth) + (zoomW / 2) -5);
  if (max_offset_limit_left > (img_detail_width + (zoomH / 2) - 5)) offset_img_detail_left = (img_detail_width - (zoomW * rate_imgs_width) + (zoomH / 2) -5);
	
	offset_img_detail_left *= 0.93;
	
	img_detail.style.marginTop  = -offset_img_detail_top + 'px';
	img_detail.style.marginLeft = -offset_img_detail_left + 'px';
	big_div.style.display 		= 'block';
}

function SeeZoom(nCase)
{
	if(nCase*1==1) {
		document.getElementById('shop_details').style.display='none';
		document.getElementById('zoomcontainer').style.display='';
	}
	else {
		document.getElementById('shop_details').style.display='';
		document.getElementById('zoomcontainer').style.display='none';
	}
}

