//#!javascript

var g_thumbnail;

function Point()
{
	this.x=0;
	this.y=0;
	
	this.create = function(x, y)
	{
		this.x=x; this.y=y;
	}
}

function hasCSSClass(node, _class)
{
	var ar=node.className.split(" ");
	
	for(var i=0; i < ar.length; i++){
		if(ar[i]==_class)
			return true;
	}
	return false;
}

function initThumbnail(maxSize, user_fn)
{
	g_thumbnail.style.position="absolute";
	g_thumbnail.style.overflow="hidden";
	g_thumbnail.style.width="auto";
	g_thumbnail.style.height="auto";
	
	g_thumbnail.user_previewMaxSize=maxSize;
	g_thumbnail.user_fn_getPreviewFileName=user_fn;
	
	showPreview(false);
}

/*
	previewElementID - name of the container used to display the preview (ususaly a div)
	imgGroupName - class name or ID of container containing the images for which you want the preview
	               container can have multiple classes
	               if you are using ID, prefix it with # (example: #my_images)
	previewMaxSize - max width/height of the preview image. If null, default (200px) will be used
	fn_getPreviewFileName - user callback function 
	                        string fn(string fileName)
	                        where fileName is the image source of the original image. If null, the 
	                        original image will be used to display the preview
*/

function initImagePreview(previewElementID, imgGroupName, previewMaxSize, fn_getPreviewFileName)
{
	if(previewMaxSize==null) previewMaxSize=200;

	g_thumbnail=document.getElementById(previewElementID);
	
	if(g_thumbnail==null) 
		return;
	
	initThumbnail(previewMaxSize, fn_getPreviewFileName);
	
	attachEvent(document, "mouseover", on_mouseOver);
	attachEvent(g_thumbnail, "mousemove", on_mouseMove);
	
	var nodes;
	
	var checkClass=(imgGroupName.charAt(0)!="#");
	
	if(!checkClass)
		nodes=new Array(document.getElementById(imgGroupName.substring(1, imgGroupName.length)));
	else
		nodes=document.getElementsByTagName("div");
	
	for(var i=0; i < nodes.length; i++){
		if(checkClass && !hasCSSClass(nodes[i], imgGroupName)) continue;
		
		var imgs=nodes[i].getElementsByTagName("img");
		
		for(var j=0; j < imgs.length; j++){	
			var img=imgs[j];
			
			img.user_hasPreview=true;
			
			attachEvent(img, "mouseover", on_mouseOver);
			attachEvent(img, "mousemove", on_mouseMove);
		}
	}
}

function on_mouseOver(e)
{
	e=getEvent(e);
	var target=getEventTarget(e);
	
	if(target==g_thumbnail || target.parentNode==g_thumbnail)
		return;
	
	if(!target.user_hasPreview){
		showPreview(false);
		return;
	}
	
	var file;
	if(g_thumbnail.user_fn_getPreviewFileName)
		file=eval(g_thumbnail.user_fn_getPreviewFileName + "(\"" + target.src + "\")");
	else
		file=target.src;
		
	showPreview(true, file);
	
	on_mouseMove(e);
}

function getDocumentElement()
{
	if(document.documentElement && document.documentElement.clientWidth > 0)
		return document.documentElement;
	else
		return document.body;
}

function getWindowSize()
{
	var pt=new Point();
	
	var doc=getDocumentElement();
	
	/* shamelessly stolen from quirksmode.org */
	if(self.innerHeight) { // all except Explorer
		pt.x = self.innerWidth;
		pt.y = self.innerHeight;
	}
	else if(document.documentElement && document.documentElement.clientHeight) {	// Explorer 6 Strict Mode
		pt.x = document.documentElement.clientWidth;
		pt.y = document.documentElement.clientHeight;
	}
	else if(document.body) { // other Explorers
		pt.x = document.body.clientWidth;
		pt.y = document.body.clientHeight;
	}
	
	return pt;
}

function getBoxSize(node)
{
	var pt=new Point();
	
	pt.create(node.offsetWidth, node.offsetHeight);
	
	return pt;
}

function enoughSpace(pt, thumb_size, x_dimension)
{
	var size=getWindowSize();
	var window_dim=x_dimension ? size.x : size.y;
	var xy= x_dimension ? "x" : "y";
	var ptxy=eval("pt." + xy);
	
	return !(((ptxy + eval("thumb_size." + xy)) > window_dim) && (ptxy > window_dim - ptxy));
}

function on_mouseMove(e)
{
	e=getEvent(e);
	
	var doc=getDocumentElement();
	var target=getEventTarget(e);
	var pt=new Point();
	
	pt.create(e.clientX, e.clientY);
	
	var thumb_size=getBoxSize(g_thumbnail);
	
	var cursor_offset=new Point();
	cursor_offset.create(10, 10);
	
	if(!enoughSpace(pt, thumb_size, true)){
		pt.x -= thumb_size.x;
		cursor_offset.x*=-0.5;
	}

	if(!enoughSpace(pt, thumb_size, false)){
		pt.y -= thumb_size.y;
		cursor_offset.y*=-0.5;
	}
	
	pt.y += doc.scrollTop;
	pt.x += doc.scrollLeft;
	
	g_thumbnail.style.left = pt.x + cursor_offset.x + "px";
	g_thumbnail.style.top = pt.y + cursor_offset.y + "px";
	
}	

function showPreview(bShow, imgFileName)
{
	if(bShow==null) bShow=true;
	
	if(g_thumbnail.user_timerID)
		clearTimeout(g_thumbnail.user_timerID);
	
	if(bShow)
		g_thumbnail.user_timerID=setTimeout("showPreviewReal('" + imgFileName + "')", 500);
	else
		g_thumbnail.style.display="none";
}

function showPreviewReal(imgFileName)	
{
	if(g_thumbnail.user_timerID)
		clearTimeout(g_thumbnail.user_timerID);
	/* velikost wait.gif */
	g_thumbnail.style.width="2px";
	g_thumbnail.style.height="2px";
	
	g_thumbnail.style.display="block";
	
	g_thumbnail.innerHTML="<img onLoad=\"on_img_loaded()\" src=\"" + imgFileName + "\" />";
	
	var img=g_thumbnail.getElementsByTagName("img");
	if(img==null || img.length==0) return;
	img=img[0];
	
	g_thumbnail.user_img=img;
	
	// hide the image until its loaded
	img.style.visibility="hidden";
	
	// show progress 
	var progressImg=document.createElement("img");
	progressImg.src="wait.gif"
	g_thumbnail.appendChild(progressImg);
	g_thumbnail.user_progress=progressImg;
	
	// position the "progress bar" somehow...
	
	// rest of the code is called in the img::onLoad handler (on_img_loaded)
}

function on_img_loaded()
{
	var img=g_thumbnail.user_img;
	
	var aspect=img.offsetWidth / img.offsetHeight;
		
	if(img.offsetWidth > img.offsetHeight){
		img.style.width=g_thumbnail.user_previewMaxSize + "px";
		img.style.height=Math.round(g_thumbnail.user_previewMaxSize / aspect) + "px";
	}
	else {
		img.style.height=g_thumbnail.user_previewMaxSize + "px";
		img.style.width=Math.round(g_thumbnail.user_previewMaxSize * aspect) + "px";
	}
	g_thumbnail.style.width="";
	g_thumbnail.style.height="";

	// remove the "progress bar"
	if(g_thumbnail.user_progress)
		g_thumbnail.removeChild(g_thumbnail.user_progress);
		
	// show the image to user
	img.style.visibility="";
}