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 - 2;

		var nowY = MF ? e.pageY : e.clientY + getIEBody().scrollTop - 2;

		
		startX = Math.floor((nowX-originX)/GRIDSIZE)+1;

		startY = Math.floor((nowY-originY)/GRIDSIZE)+1;

		if(startX<=100 & startY<=100){
		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-1)+"><input type=hidden name=y value="+(startY-1)+"><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-1)+"><input type=hidden name=y value="+(startY-1)+"><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-1)+","+(startY-1)+")</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>100)?100:endX;

		endY = (endY>100)?100: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-1)+"><input type=hidden name=y value="+(newStartY-1)+"><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-1)+"><input type=hidden name=y value="+(newStartY-1)+"><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-1)+","+(newStartY-1)+")</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;