var imgBox = new Object();

function showImage(imgName, imgHeight, imgWidth, imgAlt, imgId)
{
	if(imgAlt.length >= 60)
	{
		var h = imgHeight + 70;
	}
	else
	{
		var h = imgHeight + 40;	
	}
		
	var w = imgWidth;
	
	var thumb = document.getElementById(imgId);
	
	thumb.onmousemove = function(e) 
	{ 
			
			//Get the exakt cursor position for ie an firefox
			e = e || window.event;
			var cursor = {x:0, y:0};
		  if (e.pageX || e.pageY) 
		  {
		   	var de = document.documentElement;
		    var b = document.body;
		    cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
		    cursor.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
		  } 
		  else 
		  {
		  	var de = document.documentElement;
		    var b = document.body;
		    cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
		    cursor.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
			}
			
			//handling the position of the imgbox by getting the height and the width
			//of the window. After that we take a look of the height and width of the
			//imgBox, and place it next to the cursor
			
			var winHeight = document.documentElement.clientHeight;
			var winWidth = document.documentElement.clientWidth;

			var spaceBottom = winHeight - cursor.y;
			var spaceWidth = winWidth - cursor.x;
			
			
			if(spaceBottom < imgHeight)
			{
				if(spaceWidth < imgWidth)	
				{
					imgBox.style.left = (cursor.x - imgWidth) - 15 + "px";
				}
				else
				{
					imgBox.style.left = cursor.x + 15 + "px";		
				}
				
				imgBox.style.top = (cursor.y - imgHeight) - 55 + "px";
			}
			else
			{
				if(spaceWidth < imgWidth)	
				{
					imgBox.style.left = (cursor.x - imgWidth) - 15 + "px";
				}
				else
				{
					imgBox.style.left = cursor.x + 15 + "px";		
				}
				imgBox.style.top = cursor.y + 15 + "px";
			}
			
		
	};
	
	if(!imgBox.isVisible)
	{
		//This is the box which holds the image and the alt Text
		imgBox = document.createElement("DIV");
		imgBox.style.visibility = "hidden";
		imgBox.style.backgroundColor = "#EFEFEF";
		imgBox.style.border = "1px";
		imgBox.style.borderColor = "#333333";
		imgBox.style.color = "#333333";
		imgBox.style.borderStyle = "solid";
		imgBox.style.padding = "5px";
		imgBox.style.width = w + "px";
		imgBox.style.height = h + "px";
		imgBox.style.left = "-1000px";
		imgBox.style.bottom = "-1000px";
		imgBox.style.position = "absolute";
		
		document.body.appendChild(imgBox);
		
		//Create an image node and append it to the imgBox above
		var i = document.createElement("IMG");
		i.src = imgName;
		i.src = imgName;
		i.style.border = "0px";
		i.style.verticalAlign = "TOP";
		imgBox.appendChild(i);
		
		
		var p = document.createElement("P");
		p.style.textAlign = "center";
		p.innerHTML = imgAlt;
		imgBox.appendChild(p); 
	}
		
	imgBox.isVisible = true;
	imgBox.style.visibility = "visible";

}

function hideImage()
{
	if(imgBox.isVisible)
	{
		document.body.removeChild(imgBox);
		imgBox.isVisible = false;
	}
}

//Funtion to calculate the exact cursor position
function getPosition(e) 
{
	e = e || window.event;
	var cursor = {x:0, y:0};
  if (e.pageX || e.pageY) 
  {
   	cursor.x = e.pageX;
    cursor.y = e.pageY;
  } 
  else 
  {
  	var de = document.documentElement;
    var b = document.body;
    cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
    cursor.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
	}
	return cursor;
}