var delay    = 50;  // animation interval in miliseconds
var step     = 3;   // size is changing from min% to max% with this step
var minSize  = 14;  // percents
var maxSize  = 44;

var timer = null;   // is animation in progress (blocks next resize)
var prevObj = null;
var curObj = null;
var prevDescr = null;
var curDescr = null;
var prevSize = maxSize;
var curSize = minSize;

function openImg(num)
{
    if (timer)
        return; // animation is in progress, block new action
    
    if (!curObj) {// opened by default element
        curObj = document.getElementById("slide1");
		curDescr = document.getElementById("divdescr1");
	}

    prevObj = curObj;
    prevDescr = curDescr;
    curObj = document.getElementById("slide" + num);
	curDescr = document.getElementById("divdescr"+num);
    prevSize = maxSize;
    curSize = minSize;
    
    if (prevObj==curObj)
        return; // already opened => nothing to do
        
    timer = window.setInterval(resize, delay)

}

function resize()
{
    prevTdObj = prevObj.parentNode.parentNode;
    curTdObj  = curObj.parentNode.parentNode;
    
    prevSize -= step;
    curSize  += step;
    
    if (prevSize<minSize)
    {
        prevSize = minSize;
        curSize = maxSize;
    }
    
    prevTdObj.style.width = prevSize + "%";
    curTdObj.style.width = curSize + "%";
    
    if (prevSize==minSize) // last iteration
    {
        prevTdObj.className = "";
        curTdObj.className = "open";
        
        prevObj.className = "title";
        curObj.className = "title-open";
        
        window.clearInterval(timer);
		
		prevDescr.style.display = 'none';
		curDescr.style.display = 'inline';
        
		timer = null;
    }
    else
    {
        prevTdObj.className = "";
        curTdObj.className = "";
        
        prevObj.className = "title";
        curObj.className = "title";
    }
}