var curImg;
var curPan;

var iconSize = 35;
var timeOut = 0;
function SelectIcon(imgClientID_, panClientID_, txtID_)
{
    timeOut = 0
    if(document.getElementById(imgClientID_, panClientID_) != curImg)
    {
        curImg = document.getElementById(imgClientID_);
        curPan = document.getElementById(panClientID_);
        if(curImg.style.width == '')
        {
            curImg.style.width = iconSize + 'px';
            curImg.style.height = iconSize + 'px';
            curPan.style.width = iconSize + 'px';
            curPan.style.height = iconSize + 'px';
        }
        ExpandIcon(imgClientID_, panClientID_, txtID_);
    }
}

function ExpandIcon(imgClientID_, panClientID_, txtID_)
{
    if(curImg == document.getElementById(imgClientID_))
    {
        curImg.style.zIndex = 10;
        curPan.style.zIndex = 10;
        curPan.parentNode.style.zIndex = 10;
        
        
        curPan.style.padding = '2px';
        curPan.style.borderWidth = '3px';
            curPan.style.backgroundColor = '#dddac9';
        
        var homePos = document.getElementById(txtID_).value;
        var homePos_X = homePos.substring(0,homePos.indexOf(':'));
        var homePos_Y = homePos.substring(homePos.indexOf(':') + 1);
        
        var tarPos_X = homePos_X - 165;
        var tarPos_Y = homePos_Y - 35;
        
        var curPos_X = parseInt(curPan.style.left.replace('px',''));
        var curPos_Y = parseInt(curPan.style.top.replace('px',''));
        
        if(curPos_Y >= tarPos_Y || curPos_X >= tarPos_X)
        {
            var distY = curPos_Y - tarPos_Y;
            var distX = curPos_X - tarPos_X;
            
            var totalDistY = homePos_Y - tarPos_Y;
            var totalDistX = homePos_X - tarPos_X;
            
            var speedY = parseInt(((distY / 15) + 1) + '');
            var speedX = parseInt(((distX / 15) + 1) + '');
            
            curPos_X = curPos_X - speedX;
            curPos_Y = curPos_Y - speedY;
            
            if(curPos_Y < tarPos_Y) curPos_Y = tarPos_Y;
            if(curPos_X < tarPos_X) curPos_X = tarPos_X;
            
            curPan.style.width = (iconSize + ((totalDistX) - distX + speedX) * 2) - 40 + 'px';
            curPan.style.height = iconSize + (totalDistY - distY + speedY + 45) + 'px';
            
            curImg.style.width = (25 - ((distX / totalDistX) * 25)) + iconSize + 'px';
            curImg.style.height = curImg.style.width;
            
            curPan.style.left = curPos_X + 'px'
            curPan.style.top = curPos_Y + 'px'
            
            setTimeout(function(){ExpandIcon(imgClientID_, panClientID_, txtID_)},5);   
        }        
    }
    else
    {   
        ShrinkIcon(imgClientID_, panClientID_, txtID_);
    }
}

function ShrinkIcon(imgClientID_, panClientID_, txtID_)
{
    var shrinkImg = document.getElementById(imgClientID_);
    var shrinkPan = document.getElementById(panClientID_);
    if(curImg != shrinkImg)
    {        
        shrinkImg.style.zIndex = 4;
        shrinkPan.style.zIndex = 4;
        shrinkPan.parentNode.style.zIndex = 4;
        
        shrinkPan.style.padding = '0px';
        shrinkPan.style.borderWidth = '0px';
        
        var homePos = document.getElementById(txtID_).value;
        var homePos_X = homePos.substring(0,homePos.indexOf(':'));
        var homePos_Y = homePos.substring(homePos.indexOf(':') + 1);
        
        var tarPos_X = homePos_X;
        var tarPos_Y = homePos_Y;
        
        var curPos_X = parseInt(shrinkPan.style.left.replace('px',''));
        var curPos_Y = parseInt(shrinkPan.style.top.replace('px',''));        
            
        var totalDistX = homePos_X - curPos_X;
        var totalDistY = homePos_Y - curPos_Y;
        
        var distY = curPos_Y - tarPos_Y;
        var distX = curPos_X - tarPos_X;
        
        if(curPos_Y < homePos_Y || curPos_X < homePos_X)
        {
            var speedX = parseInt(((tarPos_X - curPos_X) / 15) + 1 + '');
            var speedY = parseInt(((tarPos_Y - curPos_Y) / 15) + 1 + '');
            
            curPos_X = curPos_X + speedX;
            curPos_Y = curPos_Y + speedY;
                        
            shrinkPan.style.left = curPos_X + 'px'
            shrinkPan.style.top = curPos_Y + 'px'            
            
            var mw = ((iconSize + (totalDistX + distX) + totalDistX) * 2) - 40;
            var mh = iconSize + (totalDistY + distY) + totalDistY;
            
            shrinkPan.style.width = mw + 'px';
            shrinkPan.style.height = mh + 'px';
            
            shrinkImg.style.width = iconSize + 'px';
            shrinkImg.style.height = iconSize + 'px';
        
            setTimeout(function(){ShrinkIcon(imgClientID_, panClientID_, txtID_)},5);        
        }
        else
        {
            shrinkPan.style.width = iconSize + 'px';
            shrinkPan.style.height = iconSize + 'px';
            shrinkImg.style.width = iconSize + 'px';
            shrinkImg.style.height = iconSize + 'px';
            shrinkPan.style.backgroundColor = 'Transparent';
        }
        
    }
}

function CloseAll()
{
    curImg = null;
}