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 GRIDSIZE = 10;
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=buy.php method=post><input type=hidden name=x value="+startX+"><input type=hidden name=y value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy\" style=\"width:50px\"><input type=button value=Redo style=\"width:50px\" onclick=doClick()></form></td></tr></table>";
			}
			if(IE){
				str = "</td></tr><form action=buy.php method=post><tr><td width=50% align=center><input type=hidden name=x value="+startX+"><input type=hidden name=y value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy\" style=\"width:50px\"></td><td align=center width=50%><input type=button value=Redo style=\"width:50px\" 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();
			
			//check right
			if ((e.clientX+sizeWindow.clientWidth+GRIDW)>winWidth){
				// move to the right
				sizeWindow.style.left = nowX - sizeWindow.clientWidth-GRIDW;
			}
			else{
				sizeWindow.style.left = nowX;
			}
			
			//check top
			if ((e.clientY-sizeWindow.clientHeight)<originY || (e.clientY-sizeWindow.clientHeight)< 0){
				// move to the top
				sizeWindow.style.top = nowY + GRIDH;
			}
			else{
				sizeWindow.style.top = nowY-sizeWindow.clientHeight-GRIDH;	
			}	
							
			sizeWindow.style.visibility = "visible";
		}
		else{
			//
			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=buy.php method=post><input type=hidden name=x value="+startX+"><input type=hidden name=y value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy\" style=\"width:50px\"><input type=button value=Redo style=\"width:50px\" onclick=doClick()></form></td></tr></table>";
			}
			if(IE){
				str = "</td></tr><form action=buy.php method=post><tr><td width=50% align=center><input type=hidden name=x value="+startX+"><input type=hidden name=y value="+startY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy\" style=\"width:50px\"></td><td align=center width=50%><input type=button value=Redo 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();
			
			//check right
			if ((e.clientX+sizeWindow.clientWidth+GRIDW)>winWidth){
				// move to the right
				sizeWindow.style.left = nowX - sizeWindow.clientWidth-GRIDW;
			}
			else{
				sizeWindow.style.left = nowX;
			}
			
			//check top
			if ((e.clientY-sizeWindow.clientHeight)<originY || (e.clientY-sizeWindow.clientHeight)< 0){
				// move to the top
				sizeWindow.style.top = nowY + GRIDH;
			}
			else{
				sizeWindow.style.top = nowY-sizeWindow.clientHeight-GRIDH;	
			}	
							
			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)/GRIDW)+1;
		var endY = Math.floor((nowY-originY)/GRIDH)+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)*GRIDH + originY;
			nowHeight = startY - endY +1;
			newStartY = endY;
		}
		if(nowWidth<=1){
			rectWindow.style.left = (endX-1)*GRIDW + originX;
			nowWidth = startX - endX + 1;
			newStartX = endX;
		}
		
		nowHeight = nowHeight ? nowHeight : 1;
		nowWidth = nowWidth ? nowWidth : 1;	
				
		rectWindow.style.height = nowHeight*GRIDH;
		rectWindow.style.width = nowWidth*GRIDW;
		
		if(MF){
			str = "</td></tr><tr><td><form action=buy.php method=post><input type=hidden name=x value="+newStartX+"><input type=hidden name=y value="+newStartY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy\" style=\"width:50px\"><input type=button value=Redo style=\"width:50px\" onclick=doClick()></form></td></tr></table>";
		}
		if(IE){
			str = "</td></tr><form action=buy.php method=post><tr><td width=50% align=center><input type=hidden name=x value="+newStartX+"><input type=hidden name=y value="+newStartY+"><input type=hidden name=width value="+nowWidth+"><input type=hidden name=height value="+nowHeight+"><input type=submit value=\"Buy\" style=\"width:50px\"></td><td align=center width=50%><input type=button value=Redo style=\"width:50px\" onclick=doClick()></td></tr></form></table>";
		}
						
		sizeWindow.innerHTML = "<table border=0><tr><td colspan=2>Start:("+newStartX+","+newStartY+")</td></tr><tr><td colspan=2>"
								+"Size:"+nowWidth+"*"+nowHeight+str;
	}
}

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

//document.onmouseup = doMouseUp;