var deltaShow = 5;
var deltaHide = 20;
var deltaTshow = 10;
var deltaThide = 5;
var maxHeight = 600;
function showTimage(image, id) {
	var thisImg = document.getElementById(id);
	if (thisImg==null) {
		
		var 
			body = document.getElementsByTagName('body')[0];
			
		thisImg = document.createElement('img');
		body.appendChild(thisImg);
		thisImg.style.visibility='hidden';
		thisImg.id=id;
		thisImg.style.top=getOffsetTop(image)+'px';
		thisImg.style.left=getOffsetLeft(image)+'px';
		thisImg.style.zIndex=10;
		thisImg.style.position = 'absolute';
		thisImg.style.backgroundColor = '#484848';
		thisImg.style.border = '1px solid #7CB3B6';
		thisImg.src=image.src;
		thisImg.setAttribute("iniWidth", image.width);
	    
	    var 
	    	maxWidth = thisImg.height < maxHeight ? thisImg.width : (maxHeight/thisImg.height)*thisImg.width;
	    	
		thisImg.setAttribute("fullWidth", maxWidth);
		thisImg.width=image.width;
		thisImg.setAttribute('growtimer',null);
		thisImg.setAttribute('shrinkTimer',null);
		thisImg.setAttribute('growing',0);
		thisImg.setAttribute('shrinking',0);
	    thisImg.setAttribute('title', image.title);
	
		thisImg.onmouseover = function () {
			if ( this.getAttribute('shrinking') ) {
				var shrinkTimer = this.getAttribute('shrinkTimer');
				clearTimeout(shrinkTimer);
				this.setAttribute('shrinking',0);
			}
			if ( this.width == this.getAttribute('fullWidth') )
				return
			this.style.visibility = 'visible';
			this.style.zIndex=10;
			var timer = setTimeout('growImage(\''+this.id+'\')',deltaTshow);
			this.setAttribute('growtimer',timer);
			this.setAttribute('growing',1);
		}
	
		thisImg.onmouseout = function () {
			if ( thisImg.getAttribute('growing') ) {
				var growtimer = this.getAttribute('growtimer');
				clearTimeout(growtimer);
				this.setAttribute('growing', 0);
			}
			this.style.zIndex=5;
			var timer = setTimeout('shrinkImage(\''+this.id+'\')',deltaThide);
			this.setAttribute('shrinkTimer',timer);
			this.setAttribute('shrinking', 1);
		}

	} else {
		thisImg.src = image.src;
		thisImg.style.top=getOffsetTop(image)+'px';
		thisImg.style.left=getOffsetLeft(image)+'px';
		thisImg.style.zIndex=10;
		thisImg.style.position = 'absolute';
	}
	
	clearTimeout(thisImg.getAttribute('shrinkTimer'));
	thisImg.setAttribute('shrinking',0);
	thisImg.style.visibility='visible';
	
	var 
		timer = setTimeout('growImage(\''+id+'\')',deltaTshow);
	thisImg.setAttribute('growtimer', timer);
	thisImg.setAttribute('growing', 1);
}
function growImage(imageId) {
	var image = document.getElementById(imageId);
	if ( image == null )
		return;
	var fullWidth = image.getAttribute('fullWidth');
	var currentWidth = image.width;
	if (currentWidth < fullWidth) {
		if (currentWidth + deltaShow >= fullWidth) {
			image.width = fullWidth;
			image.setAttribute('growing',0);
		} else {
			image.width = currentWidth + deltaShow;
			var timer = setTimeout('growImage(\''+imageId+'\')',deltaTshow);
			image.setAttribute('growtimer',timer);
		}
	} else {
		image.setAttribute('growing',0);
	}
}
function hideTimage(image, id) {
	var thisImg = document.getElementById(id);
	if ( thisImg == null )
		return;
	if ( thisImg.getAttribute('shrinking') )
		return;
	if ( thisImg.getAttribute('growing') ) {
		var growtimer = thisImg.getAttribute('growtimer');
		clearTimeout(growtimer);
		thisImg.setAttribute('growing', 0);
	}
	thisImg.style.zIndex=5;
	var timer = setTimeout('shrinkImage(\''+id+'\')',deltaThide);
	thisImg.setAttribute('shrinkTimer',timer);
	thisImg.setAttribute('shrinking',1);
}
function shrinkImage (imageId) {
	var thisImg = document.getElementById(imageId);
	if ( thisImg == null )
		return;
	var iniWidth = thisImg.getAttribute('iniWidth');
	var currentWidth = thisImg.width;
	if (currentWidth > iniWidth) {
		if (currentWidth - deltaHide <= iniWidth) {
			var 
				body = document.getElementsByTagName('body')[0];			
	
			body.removeChild(thisImg);			
		} else {
			thisImg.width = currentWidth - deltaHide;
			var timer = setTimeout('shrinkImage(\''+imageId+'\')',deltaThide);
			thisImg.setAttribute('shrinkTimer',timer);
		}
	} else {
		var 
			body = document.getElementsByTagName('body')[0];			

		body.removeChild(thisImg);
	}
}

/////

function getOffsetTop (element) {
	var value = element.offsetTop;
	while ( element = element.offsetParent )
		value += element.offsetTop;
	return value;
}
function getOffsetLeft (element) {
	var value = element.offsetLeft;
	while ( element = element.offsetParent )
		value += element.offsetLeft;
	return value;
}