//Simple Image Trail script on mouse over
//15 25
var offsetfrommouse=[-210,-70]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.

		var defaultimageheight = 40;	// maximum image size.
		var defaultimagewidth = 40;	// maximum image size.
		var divname,imgsrc;
		function showdiv(objdiv,objimg,objdivw,objdivh,objw,objh)
		{
			/*  objdiv = the name of div to open on mouse over.
				objimg = the big image to display on mouse over.
				objdivw = the width of div.
				objdivh = the height of div.
				objw = the width of image.
				objh = the height of image. */
				
			divname = objdiv; 
			imgsrc = objimg;
			//alert(objimg);
			//alert(divname);
			//alert(imgsrc);
			//alert(objh);
			newHTML = '<div align="center" class="border_preview" style="background-color:f5f5f5;WIDTH: ' + objdivw + 'px; HEIGHT: ' + objdivh + 'px; overflow:hidden;"><div id="loader_container"><div id="loader"><div align="center">Loading image preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
			newHTML = newHTML + '<TABLE style="BORDER-COLLAPSE: collapse" height="100%" cellSpacing="0"	cellPadding="0" width="100%" align="center" bgColor="#f5f5f5" border="0" runat="server">';
			newHTML = newHTML + '<TR>';
			newHTML = newHTML + '<TD align="center">';
			newHTML = newHTML + '<div class="preview_temp_load"><img id="img1" name="img1" src="' + imgsrc + '" WIDTH="' + objw + '" height="' + objh + '" onload="javascript:remove_loading()"></div>'; //"images/loading_sm.gif" onload="imgloader(this,' + objw + ',' + objh + ')"
			newHTML = newHTML + '</TD>';
			newHTML = newHTML + '</TR>';
			newHTML = newHTML + '</TABLE>';
			newHTML = newHTML + '</div>';
						
			/*newHTML = '<div class="border_preview" style="width:'+  width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
			newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'
			newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';
			newHTML = newHTML + '</div>'; */
			//alert(newHTML);
			document.getElementById("" + divname + "").innerHTML = newHTML;
			if (document.getElementById("img1"))
			{
			imgloader('img1',objw,objh);
			}
			document.onmousemove = show;
		}
		
		function truebody()
		{
			return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
		}
		
		function show(e)
		{
			var xcoord=offsetfrommouse[0]
			var ycoord=offsetfrommouse[1]

			var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
			var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

			if (typeof e != "undefined")
			{
				if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0])
				{
					xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
				} 
				else 
				{
					xcoord += e.pageX;
				}
				if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1])
				{
					ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
				}
				else
				{
					ycoord += e.pageY;
				}
			}
			else if (typeof window.event != "undefined")
			{
				if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0])
				{
					xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
				}
				else 
				{
					xcoord += truebody().scrollLeft+event.clientX
				}
				if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1]))
				{
					ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
				}
				else	
				{
					ycoord += truebody().scrollTop + event.clientY;
				}
			}
			else
			{
				xcoord = event.clientX;
				ycoord = event.clientY;
			}
			document.getElementById("" + divname + "").style.left= xcoord+"px";
			document.getElementById("" + divname + "").style.top = ycoord+"px";
			document.getElementById("" + divname + "").style.visibility = "visible";
			//document.getElementById("" + divname + "").style.display = "block";
		}
		
		function hide()
		{
			document.onmousemove = null;
			document.getElementById("" + divname + "").style.visibility="hidden";
			document.getElementById("" + divname + "").innerHTML = "";
			//document.getElementById("" + divname + "").style.display = "none";
			//document.getElementById("" + divname + "").style.left="-500px"
		}
		
		function imgloader(imgname,w,h)
		{//alert(document.getElementById("" + imgname + ""));
			document.getElementById("" + imgname + "").src = imgsrc;
			document.getElementById("" + imgname + "").width = w;
			document.getElementById("" + imgname + "").height = h;
		}
		
		// for loading
	var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;

function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}

function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
var t_id = setInterval(animate,60);
}