/*
* Анимированное открытие и закрытие изображений
* Автор: Андрей А. Борисов, ax@axweb.ru
* 
*    Вызов функции: 
*    openImg(obj, final_img, width, height, comment)
*
*    obj - инициатор события, картинка (this)
*    final_img - путь к "большой картинке", может быть относительным
*    width - конечная ширина изображения
*    height - конечная высота изображения
*    comment - комментарий к фотографии
*/

var popupImg;
var popupImgTimer;

function openImg(obj, final_img, width, height, comment)
{
	clearInterval(popupImgTimer);

	// предзагрузка большой картинки
	var _final_img = new Image();
	_final_img.src = final_img;

	var scrollTop = document.documentElement.scrollTop;

	// вычисляем конечную позицию картинки
	var popupImgLeft = (document.body.clientWidth / 2) - (width / 2);
	var popupImgTop  = 10 + scrollTop;
	
	// если не определено всплывающее окошко
	if (!popupImg) {
		popupImg = document.createElement('DIV');
		document.body.appendChild(popupImg);
		
		popupImg.style.position = 'absolute';
		popupImg.style.border = '1px solid #000000';
		popupImg.style.backgroundColor = '#16516d';
		popupImg.style.padding = '9px';
		
		if (popupImg.addEventListener) {
	        popupImg.addEventListener('click', popupImgClose, false);
	    } else if (popupImg.attachEvent) {
	        popupImg.attachEvent('onclick', popupImgClose);
	    }
	} else {
		popupImg.innerHTML = '';
		popupImg.style.width = '0px';
		popupImg.style.height = '0px';
		popupImg.style.display = 'block';
	}
	
	var par = obj;
	var _left = 0;
	var _top = 0;
	while (par.tagName != 'BODY') {
		_left += par.offsetLeft;
		_top += par.offsetTop;
		par = par.offsetParent;
	}
	
	var tmpImg = document.createElement('IMG');
	tmpImg.src = obj.src;
	tmpImg.style.width = obj.offsetWidth + 'px';
	tmpImg.style.height = obj.offsetHeight + 'px';
	tmpImg.style.border = '1px solid #c0c0c0';
	tmpImg.id = 'tmpImg';
	popupImg.appendChild(tmpImg);
	
	if(comment) {
		var tmpComment = document.createElement('DIV');
		tmpComment.style.textAlign = 'center';
		tmpComment.style.padding = '5px';
		tmpComment.style.color = '#ffffff';
		tmpComment.style.fontWeight = 'bold';
	
		tmpComment.innerHTML = comment;
		popupImg.appendChild(tmpComment);
	}
	
	popupImg.style.display = 'block';
	popupImg.style.width = obj.offsetWidth + 'px';
	popupImg.style.left = (_left - (popupImg.offsetWidth - obj.offsetWidth) / 2) + 'px';
	popupImg.style.top = (_top - (popupImg.offsetHeight - obj.offsetHeight) / 2) + 'px';
	
	// Интервалы
	var steps = 10;
	
	var stepTop = (popupImgTop - popupImg.offsetTop) / steps;
	var stepLeft = (popupImgLeft - popupImg.offsetLeft) / steps;
	var stepWidth = (width - obj.offsetWidth) / steps;
	var stepHeight = (height - obj.offsetHeight) / steps;
	
	popupImgTimer = window.setInterval("growImg('"+final_img+"', "+stepTop+","+stepLeft+","+stepWidth+","+stepHeight+","+popupImgTop+","+popupImgLeft+","+width+","+height+")", 30);
}

function growImg(final_img, stepTop, stepLeft, stepWidth, stepHeight, top, left, width, height)
{
	var tmpImg = document.getElementById('tmpImg');
	
	var _width = tmpImg.offsetWidth + stepWidth;
	var _height = tmpImg.offsetHeight + stepHeight; 
	
	if(_width < width) {
		tmpImg.style.width = _width + 'px';
		tmpImg.style.height = _height + 'px';
		
		popupImg.style.width = tmpImg.offsetWidth + 'px';
	} else {
		tmpImg.src = final_img;
		tmpImg.style.width = width + 'px';
		tmpImg.style.height = height + 'px';
		tmpImg.style.cursor = 'pointer';
		tmpImg.title = 'Закрыть';

		var _height = 0;
		for(var i=0; i<popupImg.childNodes.length; i++) {
			_height += popupImg.childNodes.item(i).offsetHeight;
		}
		
		popupImg.style.width = tmpImg.offsetWidth + 'px';
		popupImg.style.height = _height + 'px';
		
		clearInterval(popupImgTimer);
	}
	
	popupImg.style.top = (popupImg.offsetTop + stepTop) + 'px';
	popupImg.style.left = (popupImg.offsetLeft + stepLeft) + 'px';
}

function popupImgClose()
{
	clearInterval(popupImgTimer);
	//document.getElementById('tmpImg').style.height = '100%';
	//document.getElementById('tmpImg').style.width = '100%';
	
	popupImgTimer = window.setInterval("fadeImg()", 20);
}

function fadeImg()
{
	var _height = popupImg.offsetHeight - 100;
	
	var tmpImg = document.getElementById('tmpImg');
	if(tmpImg.offsetHeight > 100){tmpImg.style.height = (tmpImg.offsetHeight - 100) + 'px'}
	else {tmpImg.style.height = '0px';}

	if (_height > 10) {
		popupImg.style.height = _height + 'px';
	} else {
		popupImg.style.display = 'none';
		popupImg.innerHTML = '';
		
		clearInterval(popupImgTimer);
	}
}