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 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){
	if(!completed & onPic!=1){
		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)/GRIDSIZE)+1;
		startY = Math.floor((nowY-originY)/GRIDSIZE)+1;
		nowWidth = 1;
		nowHeight = 1;

		
		rectWindow.style.left = (startX-1)*GRIDSIZE + originX;
		rectWindow.style.top = (startY-1)*GRIDSIZE + originY;
		rectWindow.style.height = nowWidth*GRIDSIZE;
		rectWindow.style.width = nowHeight*GRIDSIZE;
		
		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-GRIDSIZE;	
		
		getWindowSize();
		
		//check right
		if ((e.clientX+sizeWindow.clientWidth+GRIDSIZE)>winWidth){
			// move to the right
			sizeWindow.style.left = nowX - sizeWindow.clientWidth-GRIDSIZE;
		}
		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 + GRIDSIZE;
		}
		else{
			sizeWindow.style.top = nowY-sizeWindow.clientHeight-GRIDSIZE;	
		}	
						
		sizeWindow.style.visibility = "visible";	
	}							
}

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

function doMouseMove(e){
	if(dragFlag == 0 && completed==0 && !onPic){
		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)/GRIDSIZE)+1;
		var endY = Math.floor((nowY-originY)/GRIDSIZE)+1;
		
		endX = (endX>500)?500:endX;
		endY = (endY>50)?50:endY;
		
		nowHeight = endY - startY + 1;

		nowWidth = endX - startX + 1;	
		
		if(nowHeight<=1){
			rectWindow.style.top = (endY-1)*GRIDSIZE + originY;
			nowHeight = startY - endY +1;
			newStartY = endY;
		}
		if(nowWidth<=1){
			rectWindow.style.left = (endX-1)*GRIDSIZE + originX;
			nowWidth = startX - endX + 1;
			newStartX = endX;
		}
		
		nowHeight = nowHeight ? nowHeight : 1;
		nowWidth = nowWidth ? nowWidth : 1;	
				
		rectWindow.style.height = nowHeight*GRIDSIZE;
		rectWindow.style.width = nowWidth*GRIDSIZE;
		
		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;