function ZoomPicture(img, div_id) {
 if (typeof div_id=='undefined') div_id='zoomed';
 document.getElementById(div_id).innerHTML='';
 document.getElementById(div_id).style.display="none";
 //if you want to use your own container you can place it as a paremeter
 if (typeof div_id=='undefined') div_id='zoomed';
 //getting client window height and width
 h=document.documentElement.clientHeight;
 ww = document.documentElement.clientWidth;
 //if height>1500 we do not scale the image, so correctiong image parameters
 if (h>1500) {h=1500; w=1050;} else {w=Math.round(h*7/10);}
 //if big image will overlap the small one scale it again
 if (w>ww-450) {w=ww-450; h=Math.round(w*10/7);}
 //getting scroll position
 if (window.pageXOffset) XOffset = window.pageXOffset; else XOffset=(document.documentElement.scrollLeft)?document.documentElement.scrollLeft:0;
 if (window.pageYOffset) YOffset = window.pageYOffset; else YOffset=(document.documentElement.scrollTop)?document.documentElement.scrollTop:0;
 //getting image container top and left coordinates and places it on the page
 wleft=document.documentElement.clientWidth + XOffset - w;
 document.getElementById(div_id).style.top=YOffset+'px';
 document.getElementById(div_id).style.left=(wleft)+'px';
 //setting up big image size
 document.getElementById(div_id).style.height=h+'px';
 document.getElementById(div_id).style.width=w+'px';
 //setting up 'Loading' picture. It is  till the main image will be loaded
 document.getElementById(div_id).innerHTML='<p align="center"><img src="/js/css/zoom.gif"></p>';
 //showing image container
 document.getElementById(div_id).style.display="block";
 var im=new Image();
 //showing the main image only when it loaded
 im.onload=function(){
  document.getElementById(div_id).innerHTML='<img src="'+img+'" width="'+w+'" height="'+h+'">';
 }
 im.src=img;
proverka=1;
}
function ZoomOutPicture(div_id) {
 if (typeof div_id=='undefined') div_id='zoomed';
 document.getElementById(div_id).innerHTML='';
 document.getElementById(div_id).style.display="none";
 proverka=1;
}


function ZoomPlusPicture(img, div_id) {
 
  if (proverka==1) {Zoom2Picture(img);} else {ZoomPicture(img);}

}

function Zoom2Picture(img, div_id) {
 if (typeof div_id=='undefined') div_id='zoomed';
 document.getElementById(div_id).innerHTML='';
 document.getElementById(div_id).style.display="none";
 //if you want to use your own container you can place it as a paremeter
 if (typeof div_id=='undefined') div_id='zoomed';
 //getting client window height and width
 h=document.documentElement.clientHeight;
 ww = document.documentElement.clientWidth;
 //if height>1500 we do not scale the image, so correctiong image parameters
 if (h>1500) {h=1500; w=1050;} else {w=Math.round(h*7/10);}
 //if big image will overlap the small one scale it again
 if (w>ww-450) {w=ww-450; h=Math.round(w*10/7);}
 //getting scroll position
 if (window.pageXOffset) XOffset = window.pageXOffset; else XOffset=(document.documentElement.scrollLeft)?document.documentElement.scrollLeft:0;
 if (window.pageYOffset) YOffset = window.pageYOffset; else YOffset=(document.documentElement.scrollTop)?document.documentElement.scrollTop:0;
 //getting image container top and left coordinates and places it on the page
 wleft=document.documentElement.clientWidth + XOffset - w;
 document.getElementById(div_id).style.top=YOffset+'px';
 document.getElementById(div_id).style.left=(wleft)+'px';
 //setting up big image size
 document.getElementById(div_id).style.height=h+'px';
 document.getElementById(div_id).style.width=w+'px';
 //setting up 'Loading' picture. It is  till the main image will be loaded
 document.getElementById(div_id).innerHTML='<p align="center"><img src="/js/css/zoom.gif"></p>';
 //showing image container
 document.getElementById(div_id).style.display="block";
 var im=new Image();
 //showing the main image only when it loaded
 im.onload=function(){
  document.getElementById(div_id).innerHTML='<div id="zoomdiv" style="width:100%; height:100%; background: #00ff00 url(\''+img+'\'); background-position:50% 50%;"></span>';
 }
 im.src=img;

 proverka=2;
}


function mv(ev,el){

 if (typeof proverka=='undefined') proverka=1;

if (proverka==2) {
var leftPos = 0; // by illion
var topPos = 0;

obj=el;
var w=obj.offsetWidth;
var h=obj.offsetHeight;
var scrollUp = obj.scrollTop

while( obj!=null)
{
      leftPos += obj.offsetLeft;
      topPos += obj.offsetTop;
      obj = obj.offsetParent;
}
posH=(ev.clientY+YOffset-topPos)/h*100;
posW=(ev.clientX+XOffset-leftPos)/w*100;
document.getElementById('zoomdiv').style.top=YOffset+'px';
document.getElementById('zoomdiv').style.left=(wleft)+'px';
document.getElementById('zoomdiv').style.backgroundPosition=posW+"% "+posH+"%";
document.getElementById('zoomdiv').style.top=YOffset+'px';
document.getElementById('zoomdiv').style.left=(wleft) +'px';
}
}