var GRIDW = 50;
var GRIDH = 50;
/**   
showpopup.js   
v   1.0   
3/17/2006   
copyright   jacky   huang   
flashlib@gmail.com   
*/   
function hidePopup() {
  //hide popup window (when rollout...)
  var   popup = document.getElementById('popup');
  popup.style.visibility='hidden';
  window.clearTimeout(id);
}
function   isArrived(popup) {
	//check if the popup window is moved to the target place, mouse location
	//return true if it is arrived, otherwise else.
	var   x   =   popup.offsetTop;
	var   y   =   popup.offsetLeft;
	return ((x==popup.targetX)&&(y==popup.targetY));
}   
function   getWindowSize() {   
	var   w   =   0;   
	var   h   =   0;   
	if(!document.all) {   
		//not   IE browser 
		w   =   window.innerWidth;   
		h   =   window.innerHeight;   
	} else {   
		//IE browser   
		w   =   document.documentElement.clientWidth   ?   document.documentElement.clientWidth   :   document.body.clientWidth;   
		h   =   document.documentElement.clientHeight   ?   document.documentElement.clientHeight   :   document.body.clientHeight;   
	}   
	winwidth   =   w;   
	winheight   =   h;   
}   
function getIEBody() {   
	return   (document.compatMode   &&   document.compatMode!="BackCompat")?   document.documentElement   :   document.body   
}   
function adjustPosition(evt,popup) {   
	//ajust popupwindows postion ifnecessary   
	//check left   
	if((evt.clientX-popup.clientWidth-hPadding)<0) {   
		//move to the right   
		popup.targetX = nowX + hPadding;   
	}   
	//check bottom   
	if   ((evt.clientY+popup.clientHeight+vPadding)>=winHeight) {   
	//   move   to   the   top   
	popup.targetY = nowY - popup.clientHeight - vPadding;   
	}   
}   
function showPopup(evt,url,img,name,headline,location,gender,age,dating,desc) {   
  //show popup window with the content   
  //get the event handle, and fit the ie and mf compatibility   
  evt = evt ? evt : (window.event ? window.event : null);   
   //get information
   if(img == "") {
	   img = "images/noimg.png";
   }
   <!--http://www.artviper.net/screenshots/screener.php?url="+url+"&w=300&h=300"+url+"-->
   content = "<div class=pop_top>&nbsp;</div>" +
   "<div class=pop_container>" +
   "<div class=pop_name></div>" +
   "<center>Website Name: <b>"+name+"</b><br />" +
   "URL: <b>"+url+"</b><br /><b>"+headline+"</b><br /></center>" +
   "<center><img width=300 height=300 src=../manage/websitethumbs/"+img+"></center>" +
   "</div></div><div class=pop_bottom>&nbsp;</div>";  
	//get   the   handle   of   popup   window   
	var popup = document.all ? document.all["popup"] : document.getElementById ? document.getElementById("popup") : "";   
	popup.innerHTML = content;   
	
	//get the current mouse position.
	nowX = MF ? evt.pageX : evt.clientX + getIEBody().scrollLeft;
	nowY = MF ? evt.pageY : evt.clientY + getIEBody().scrollTop;
	//set   the   target   position   of   the   popup   window   to   the   mouse   position   
	popup.targetX = nowX - popup.clientWidth - hPadding;   
	popup.targetY = nowY + vPadding;   
	
	//adjust   the   target   position   to   prevent   the   edge   effect   
	getWindowSize();   
	adjustPosition(evt,popup);   
	
	//set the popup window visible   
	popup.style.visibility = 'visible';   
	movePopup();   
}   

function movePopup() {   
	//move   popup   window   
	//clear timeout first
	window.clearTimeout(id);
	
	//get popup window handle   
	var popup = document.all ? document.all["popup"] : document.getElementById ? document.getElementById("popup") : "";   
	
	//get current position   
	var nowx = popup.offsetLeft;   
	var nowy = popup.offsetTop;   
	
	if(!isArrived(popup)) {   
		// if not arrived, move   
		if(nowx   <   popup.targetX) {   
			nowx += step;   
		}   
		if(nowx   >   popup.targetX) {   
			nowx -= step;   
		}   
		if(nowy   <   popup.targetY) {   
			nowy += step;   
		}   
		if(nowy   >   popup.targetY) {   
			nowy -= step;   
		}   
		
		popup.style.left = nowx;   
		popup.style.top =  nowy;   
		
		id   =   window.setTimeout("movePopup()",1);   
	}   
}   

//init IE and MF browser tags
//init ie and mf browser tags   
var IE = document.all;   
var MF = document.getElementById && !document.all;   

//init window height and width   
var winWidth	=   0;   
var winHeight	=   0;   
var id;
var step		=	5;
var nowX		=   1;   
var nowY		=   1;   
var hPadding	=   25;   
var vPadding	=   25;   

//get window size(dont do)   
//getwindowsize(); 














var startX, startY;
var nowWidth, nowHeight;
var dragFlag;
var completed=0;	//1: Completed; 0: Incompleted
var onPic=0;		//1: On pic; 	0: Not on pic

var COLNUM = Math.floor(1000/GRIDW);
var ROWNUM = Math.floor(1000/GRIDH);
var originX;
var originY;

var str='';

var rectWindow = document.all ? document.all["rect"] : document.getElementById ? document.getElementById("rect") : "";
var sizeWindow = document.all ? document.all["size"] : document.getElementById ? document.getElementById("size") : "";
var gridWindow = document.all ? document.all["idTopLeft"] : document.getElementById ? document.getElementById("idTopLeft") : "";

originX = gridWindow.offsetLeft;
originY = gridWindow.offsetTop;

function doClick() {
	sizeWindow.style.visibility = "hidden";
	rectWindow.style.visibility = "hidden";
	completed = 0;
}

function doMouseDown(e, mouseselection) {
	if(!completed & onPic!=1) {
		if(mouseselection) {
			dragFlag = 0;
			e = e ? e : (window.event ? window.event : null);
			//get the current mouse position
			var nowX = MF ? e.pageX : e.clientX + getIEBody().scrollLeft;
			var nowY = MF ? e.pageY : e.clientY + getIEBody().scrollTop;
			startX = Math.floor((nowX-originX)/GRIDW)+1;
			startY = Math.floor((nowY-originY)/GRIDH)+1;
			nowWidth = 1;
			nowHeight = 1;

			rectWindow.style.left = (startX-1)*GRIDW+originX;
			rectWindow.style.top = (startY-1)*GRIDH+originY;
			rectWindow.style.height = nowWidth*GRIDW;
			rectWindow.style.width = nowHeight*GRIDH;
			
			rectWindow.style.visibility = 'visible';
			
			if(MF) {
				str = "</td></tr><tr><td><form action=book.php method=post style='width:200px'><input type=hidden name=xcoordinate value="+startX+"><input type=hidden name=ycoordinate value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy This Block\" style=\"width:150px\"><input type=button value=Cancel style='width:100px' onclick=doClick()></form></td></tr></table>";
			}
			if(IE) {
				str = "</td></tr><form action=book.php method=post><tr><td width=50% align=center><input type=hidden name=xcoordinate value="+startX+"><input type=hidden name=ycoordinate value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy This Block\" style=\"width:50%\"></td><td align=center width=50%><input type=button value=Cancel style='width:100px' onclick=doClick()></td></tr></form></table>";
			}
			sizeWindow.innerHTML="<table border=0><tr><td colspan=2>Start:("+startX+","+startY+")</td></tr><tr><td colspan=2>End:("+1+","+1+")</td></tr><tr><td colspan=2>"+"Size:"+nowWidth+" * "+nowHeight+str;
			
			sizeWindow.style.left = nowX;
			sizeWindow.style.top = nowY-sizeWindow.clientHeight-GRIDH;
			
			getWindowSize();

			//To left
			if(nowX - sizeWindow.clientWidth - GRIDW < 0) {
				leftval = nowX + 50;
			}
			else {
				leftval = nowX - sizeWindow.clientWidth - GRIDW;
				//if(leftval > 750){leftval = 750;}
			}
			
			//To bottom
			if(nowY + sizeWindow.clientHeight + GRIDH > 1275) {
				topval = nowY - sizeWindow.clientHeight - GRIDH;
				//To top
				if(topval < 0)
				{
					topval = 0;
				}
			}
			else {
				topval = nowY + 50;
			}
			sizeWindow.style.left		=	leftval;
			sizeWindow.style.top		=	topval;
			sizeWindow.style.visibility = 'visible';
		}
		else {
			dreaFlag = 0;
			e = e ? e : (window.event ? window.event : null);
			//get the current mouse position
			var nowX = MF ? e.pageX : e.clientX + getIEBody().scrollLeft;
			var nowY = MF ? e.pageY : e.clientY + getIEBody().scrollTop;
			
			startX = Math.floor((nowX-originX)/GRIDW)+1;
			startY = Math.floor((nowY-originY)/GRIDH)+1;
			nowWidth = 1;
			nowHeight = 1;
			
			rectWindow.style.left	=	(startX-1)*GRIDW + originX;
			rectWindow.style.top	=	(startY-1)*GRIDH + originY;
			rectWindow.style.height	=	nowWidth*GRIDW;
			rectWindow.style.width	=	nowHeight*GRIDH;
			
			rectWindow.style.visibility = 'visible';
			
			if(MF) {
				str = "</td></tr><tr><td><form action=book.php method=post style='width:200px'><input type=hidden name=xcoordinate value="+startX+"><input type=hidden name=ycoordinate value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy This Block\" style=\"width:150px\"><input type=button value=Cancel style='width:50px' onclick=doClick()></form></td></tr></table>";
			}
			if(IE) {
				str = "</td></tr><form action=book.php method=post><tr><td width=50% align=center><input type=hidden name=xcoordinate value="+startX+"><input type=hidden name=ycoordinate value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy This Block\" style=\"width:150px\"></td><td align=center width=50%><input type=button value=Cancel style='width:50px' onclick=doClick()></td></tr></form></table>";
			}
			sizeWindow.innerHTML="<center><br /><table border=0><tr><td colspan=2>Position:("+startX+","+startY+")<br /><br />"+str+"</center>";
			
			sizeWindow.style.left = nowX;
			sizeWindow.style.top = nowY-sizeWindow.clientHeight-GRIDH;
			
			getWindowSize();

			//To left
			if(e.clientX - sizeWindow.clientWidth - GRIDW < 0) {
				leftval = nowX + 50;
			}
			else {
				leftval = nowX - sizeWindow.clientWidth - GRIDW;
				//if(leftval > 750){leftval = 750;}
			}
			
			//To bottom
			if(e.clientY + sizeWindow.clientHeight + 50 > 1275) {
				topval = nowY - sizeWindow.clientHeight - 50;
				//To top
				if(topval < 0)
				{
					topval = 0;
				}
			}
			else {
				topval = nowY + 50;
			}
			sizeWindow.style.left		=	leftval;
			sizeWindow.style.top		=	topval;
			sizeWindow.style.visibility = 'visible';
		}
	}
}

function doMouseUp() {
	if(onPic !=1) {
		dragFlag = 1;
		completed = 1;
	} else {
		onPic = 0;
	}
}

function doMouseMove(e, mouseselection) {
	if(dragFlag == 0 && completed == 0 && !onPic && mouseselection) {
		var newStartX = startX;
		var newStartY = startY;

		e = e ? e : (window.event ? window.event : null);
		
		var nowX = MF ? e.pageX : e.clientX + getIEBody().scrollLeft;
		var nowY = MF ? e.pageY : e.clientY + getIEBody().scrollTop;
		
		var endX = Math.floor((nowX-originX)/50)+1;
		var endY = Math.floor((nowY-originY)/50)+1;
		
		endX = (endX > COLNUM) ? COLNUM : endX;
		endY = (endY > ROWNUM) ? ROWNUM : endY;
		
		nowHeight = endY - startY + 1;
		nowWidth = endX - startX + 1;
		
		if(nowHeight <= 1) {
			rectWindow.style.top = (endY-1)*50 + originY;
			nowHeight = startY - endY + 1;
			newStartY = endY;
		}
		
		if(nowWindth <= 1) {
			rectWindow.style.left = (endX=1) * 50 + originX;
			nowWidth = startX - endX + 1;
			newStartX = endX;
		}
		
		nowHeight = nowHeight ? nowHeight : 1;
		nowWidth = nowWidth ? nowWidth : 1;
		
		rectWindow.style.height = nowHeight*50;
		rectWindow.style.width = nowWidth*50;
		
			if(MF) {
				str = "</td></tr><tr><td><form action=book.php method=post><input type=hidden name=xcoordinate value="+newStartX+"><input type=hidden name=ycoordinate value="+newStartY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy This Block\" style=\"width:150px\"><input type=button value=Cancel style=\"width:50px\" onclick=doClick()></form></td></tr></table>";
			}
			if(IE) {
				str = "</td></tr><form action=book.php method=post><tr><td width=50% align=center><input type=hidden name=xcoordinate value="+newStartX+"><input type=hidden name=ycoordinate value="+newStartY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy This Block\" style=\"width:150px\"></td><td align=center width=50%><input type=button value=Cancel style=\"width:50px\" onclick=doClick()></td></tr></form></table>";
			}
			sizeWindow.innerHTML="<table border=0><tr><td colspan=2>Position:("+newStartX+","+newStartY+")</td></tr><tr><td colspan=2>"+"Size:"+nowWidth+" * "+nowHeight+str;
	}
}

//when mousedown on picture, dont show the selection window by setting the tag onPic to 1.
function mouseDownOnPic() {
	onPic = 1;
}









<!-- Mouse over feature and cater for different screen resolutions -->
if (document.getElementById && !document.all)
{ 
	var nsmousepos = new Object(); nsmousepos.pageX = 0; nsmousepos.pageY = 0; nsmousepos.clientX = 0; nsmousepos.clientY = 0; 
}
function getMouseXY(e)
{
	if (document.getElementById && !document.all)
	{
		nsmousepos.pageX = e.pageX; nsmousepos.pageY = e.pageY; nsmousepos.clientX = e.clientX; nsmousepos.clientY = e.clientY;
	}
}
function ietruebody()
{
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
//document.onmousemove=getMouseXY;
function showPopupBlock(e,url,websitename,websiteimg,websitetype,websitedesc) {
	if(websiteimg == "") {
		websiteimg = "manage/images/noimg.png";
	}
	myDiv = document.getElementById('divThumb');
	if (myDiv) {
		var x = ( ( document.getElementById && ! document.all ) ? nsmousepos.pageX : event.x + ietruebody().scrollLeft ) + 20;
		var y = ( ( document.getElementById && ! document.all ) ? nsmousepos.pageY : event.y + ietruebody().scrollTop ) - 40;
		if ( myDiv.style.visibility == 'hidden' ) {
			myDiv.style.visibility = 'visible';
			if(websitename!='') 
				myDiv.innerHTML = '<center>' + websitename;
			if(websitetype!='') 
				myDiv.innerHTML += '('+websitetype+')';
			myDiv.innerHTML += '<img src=' + websiteimg + ' width=300 height=250><br />';
			if(websitedesc!='') 
				myDiv.innerHTML += websitedesc ;
			myDiv.innerHTML += '</center>';
		}
		
		//window pre-defined event.
		e = e ? e : (window.event ? window.event : null);
		
		//I set the distance of 6px between the popup with the cursor.
		var padding = 20;
		//Get the top value before minus 150.
		var topval = 0;
		//current mouse position. xy coordinate.
		var nowX = MF ? e.pageX : e.clientX + getIEBody().scrollLeft;
		var nowY = MF ? e.pageY : e.clientY + getIEBody().scrollTop;
		
		//myDiv - width=300px - height=400px
		//left : position left and right
		//top : position up and down
		
		//To left
		if(nowX - 312 - padding < 0) {
			leftval = nowX + padding;
		}
		else {
			leftval = nowX - 312 - padding;
			//if(leftval > 750){leftval = 750;}
		}
		
		//To bottom
		//alert(nowY);
		if(nowY + 350 + padding > 1275) {
			topval = nowY - 350 - padding;
			//To top
			if(topval < 0)
			{topval = 0;}
		}
		else {
			topval = nowY + padding - 150; /* 150px made the picture pop up in middle, so look better. */
			//To top
			if(topval < 0)
			{topval = 0;}
		}
		
		myDiv.style.left		=	leftval;
		myDiv.style.top			=	topval;
		myDiv.style.visibility 	=	'visible';
	}
}
function hidePopupBlock() {
	myDiv = document.getElementById('divThumb');
	if (myDiv) {
		myDiv.style.visibility = 'hidden';
		myDiv.innerHTML = '';
	}
}










function showCoordinates(e) {
	var popupWindow=document.all ? document.all["popup"] : document.getElementById ? document.getElementById("popup") : "";
	var selectionWindow = document.all ? document.all["rect"] : document.getElementById ? document.getElementById("rect") : "";
	var divThumb = document.all ? document.all["divThumb"] : document.getElementById ? document.getElementById("divThumb") : "";
	if(popupWindow.style.visibility == 'hidden' && selectionWindow.style.visibility == 'hidden' && divThumb.style.visibility == 'hidden') {
		e = e ? e : (window.event ? window.event : null);
		
		var padding = 12;
		var nowX = MF ? e.pageX : e.clientX + getIEBody().scrollLeft;
		var nowY = MF ? e.pageY : e.clientY + getIEBody().scrollTop;
		
		var x = Math.floor((nowX-originX)/50)+1;
		var y = Math.floor((nowY-originY)/50)+1;
		
		var tipWindow = document.all ? document.all["tip"] : document.getElementById ? document.getElementById("tip") : "";
		tipWindow.innerHTML = "("+x+"/"+y+"):Mouse Click to Select!";
		
		
		//To left
		if(nowX - tipWindow.clientWidth - padding < 0) {
			leftval = nowX + padding;
		}
		else {
			leftval = nowX - tipWindow.clientWidth - padding;
			//if(leftval > 750){leftval = 750;}
		}
		
		//To bottom
		if(nowY + tipWindow.clientHeight + padding > 1275) {
			topval = nowY - tipWindow.clientHeight - padding;
			//To top
			if(topval < 0)
			{topval = 0;}
		}
		else {
			topval = nowY + padding;
		}
		
		tipWindow.style.left		=	leftval;
		tipWindow.style.top			=	topval;
		tipWindow.style.visibility = 'visible';
	}
	else {
		var tipWindow = document.all ? document.all["tip"] : document.getElementById ? document.getElementById("tip") : "";
		tipWindow.style.visibility = 'hidden';
	}
}
function hideTip() {
	var tipWindow = document.all ? document.all["tip"] : document.getElementById ? document.getElementById("tip") : "";
	tipWindow.style.visibility = 'hidden';
}