function CustImg(id)
{
    this.SmallImage = document.getElementById(id + "_imSmall");
    this.BigImage = document.getElementById(id + "_imBig");
    this.Rect = this.SmallImage.getBoundingClientRect();
    
    this.RealWidth = function(){
        return parseInt(this.BigImage.getAttribute("RealWidth"),10);
    }
    this.RealHeight = function(){
        return parseInt(this.BigImage.getAttribute("RealHeight"),10);
    }  
    this.RealLeft = function(){
        return parseInt(this.BigImage.style.left);
    }
    this.RealTop = function(){
        return parseInt(this.BigImage.style.top);
    }    
    this.CurrentWidth = function(){
        return parseInt(this.BigImage.style.width,10);
    }  
    this.CurrentHeight = function(){
        return parseInt(this.BigImage.style.height,10);
    }  
    this.Left = function(){
        return this.Rect.left;
    }  
    this.Top = function(){
        return this.Rect.top + this.TopScroll;
    }
    this.PreviewWidth = function(){
        return this.SmallImage.width;
    }
    this.PreviewHeight = function(){
        return this.SmallImage.height;
    }  
    this.BigLeft = function(){
        return (window.screen.width - this.RealWidth()) / 2;
    }
    this.DeltaWidth = 20;
    this.DeltaLeft = 20;
    this.DeltaTop = 20;
    this.TopScroll = parseInt(document.documentElement.scrollTop);
    this.ClackDelta = function(){
        var d1 = Math.abs((this.RealWidth() - this.PreviewWidth()) / (this.BigLeft() - this.Left()))
        var d2 = Math.abs((this.RealWidth() - this.PreviewWidth()) / (this.TopScroll - this.Top()))
        this.DeltaWidth = (this.RealWidth() - this.PreviewWidth()) / 10;
        //this.DeltaLeft =  Math.abs(this.BigLeft() - this.Left()) / 15;
        //this.DeltaTop =  Math.abs(5 - this.Top()) / 15;
        this.DeltaLeft  =  parseInt(this.DeltaWidth / d1);         
        this.DeltaTop  =  parseInt(this.DeltaWidth / d2);         
    }
    
}

var CurrentImageOpened;

function OpenBigImg(id)
{
    if(CurrentImageOpened) return false;
    var im = new CustImg(id);
    CurrentImageOpened = im;
    im.BigImage.src = im.SmallImage.getAttribute("BigImg");
    if(im.BigImage.getAttribute("RealWidth"))
    {
        im.BigImage.style.display = "";
        im.ClackDelta();
        ShowBigImage(im);
    }
}

function BigImgLoad(id)
{
    var im = new CustImg(id);
    im.BigImage.style.display = "";
    if(!im.BigImage.getAttribute("RealWidth"))
    {    
        im.BigImage.setAttribute("RealWidth",im.BigImage.width);
        im.BigImage.style.width = im.SmallImage.width + "px";   
        im.BigImage.style.position = "absolute";
        im.BigImage.style.left = im.Left() + "px";
        im.BigImage.style.top = im.Top() + "px";
        im.ClackDelta();
        ShowBigImage(im);
    }
}

function ShowBigImage(im)
{
    var w = im.RealWidth();
    var l = im.RealLeft();
    var f = true;
    var ResizeFlag = true;
    if(im.CurrentWidth() + im.DeltaWidth < w)
    {
        im.BigImage.style.width = im.CurrentWidth() + im.DeltaWidth + "px";
        f = false;
        ResizeFlag = false;
    }      
    if(ResizeFlag)
    {
        im.BigImage.style.left = im.BigLeft() + "px";
        im.BigImage.style.top = im.TopScroll + "px";
    }
    if(im.RealLeft() + im.DeltaLeft < im.BigLeft())
    {
        im.BigImage.style.left = im.RealLeft() + im.DeltaLeft + "px";
        f = false;
        ResizeFlag = false;
    } 
    if(im.RealLeft() - im.DeltaLeft > im.BigLeft())
    {
        im.BigImage.style.left = im.RealLeft() - im.DeltaLeft + "px";
        f = false;
    } 
    if(im.RealTop() + im.DeltaTop < im.TopScroll)
    {
        im.BigImage.style.top = im.RealTop() + im.DeltaTop + "px";
        f = false;
    } 
    if(im.RealTop() - im.DeltaTop > im.TopScroll)
    {
        im.BigImage.style.top = im.RealTop() - im.DeltaTop + "px";
        f = false;
    }         
    if(!f)
    {
        setTimeout(function(){ShowBigImage(im);},1);
    }
    else
    {
        im.BigImage.style.width = w + "px";
        im.BigImage.style.left = im.BigLeft() + "px";
        im.BigImage.style.top = im.TopScroll + "px";
    }
}

function CloseBigImg(id)
{
    var im = new CustImg(id);
    im.ClackDelta();
    HideBigImage(im);   
}

function HideBigImage(im)
{
    var w = im.PreviewWidth();
    var f = true;
    var ResizeFlag = true;
    if(im.CurrentWidth() - im.DeltaWidth > w)
    {
        im.BigImage.style.width = im.CurrentWidth() - im.DeltaWidth + "px";
        f = false;
        ResizeFlag = false;
    }  
    if(ResizeFlag)
    {
        im.BigImage.style.left = im.Left() + "px";
        im.BigImage.style.top = im.Top() + "px";   
    }
    if(im.RealLeft() + im.DeltaLeft < im.Left())
    {
        im.BigImage.style.left = im.RealLeft() + im.DeltaLeft + "px";
        f = false;
    } 
    if(im.RealLeft() - im.DeltaLeft > im.Left())
    {
        im.BigImage.style.left = im.RealLeft() - im.DeltaLeft + "px";
        f = false;
    } 
    if(im.RealTop() + im.DeltaTop < im.Top())
    {
        im.BigImage.style.top = im.RealTop() + im.DeltaTop + "px";
        f = false;
    } 
    if(im.RealTop() - im.DeltaTop > im.Top())
    {
        im.BigImage.style.top = im.RealTop() - im.DeltaTop + "px";
        f = false;
    }         
    if(!f)
    {
        setTimeout(function(){HideBigImage(im);},20);
    }
    else
    {
        im.BigImage.style.width = w + "px"; 
        im.BigImage.style.display = "none";
        im.BigImage.style.left = im.Left() + "px";
        im.BigImage.style.top = im.Top() + "px";        
        CurrentImageOpened = null;
    }
}