var BoxClass = new function() {
		this.oldMousePosition= undefined;
		this.border_ = 3;

		this.border = 12;
		this.boxBorder = 24;
		this.maskBorder = 20;
		this.maskOpacity = 50;

		this.initWidth = 200;
		this.initHeight = 100;

		this.state = null;
		this.direction = null;

		this.tmpOnmousemove = null;
		this.tmpOnmouseup = null;

		this.edit = false;
		this.placeID = null;

		this.openBox = function(mousePos) {
			BoxClass.edit = false;
			BoxClass.resetBox();

			var point = MapClass.GoogleMap.getSize();
			var mapObj = document.getElementById("map");
			var boxObj = document.getElementById("box");

			var boxWidth = BoxClass.getBoxWidth();
			var boxHeight = BoxClass.getBoxHeight();

			boxObj.style.left = getObjPos(mapObj).x + point.width / 2 - boxWidth / 2 - BoxClass.border_;
			boxObj.style.top = getObjPos(mapObj).y + point.height / 2 - boxHeight / 2 - BoxClass.border_;
			boxObj.style.display = "";
			//setOpacity(boxObj, 80);

			showMask();
			if ( mousePos == undefined ) // click from float button
				MapClass.zoom(18, mousePos);
			else // right click
				MapClass.zoom(18, mousePos);
			samplepic();
			return false;
		}
		this.closeBox = function() {
			var boxObj = document.getElementById("box");

			boxObj.style.display = "none";

			hideMask();
			MapClass.zoom(16);
			return false;
		}
		this.resetBox = function() {
			var boxObj = document.getElementById("box");

			boxObj.style.width = BoxClass.initWidth + BoxClass.border_ * 2;
			boxObj.style.height = BoxClass.initHeight + BoxClass.border_ * 2;

			document.getElementById("addPlace___Form").maxWidth.value	= "";
			document.getElementById("addPlace___Form").maxHeight.value	= "";
			document.getElementById("addPlace___Form").width.value		= "";
			document.getElementById("addPlace___Form").height.value		= "";
			document.getElementById("addPlace___Form").fileName.value	= "";
			document.getElementById("addPlace___Form").fileWidth.value	= "";
			document.getElementById("addPlace___Form").fileHeight.value	= "";
			document.getElementById("addPlace___Form").file.value		= "";

//			document.getElementById("addPlace___Form").submitButton.style.display	= "none";

			boxObj.innerHTML = "";

			return false;
		}
		this.changeCursor = function(e) {
			var mousePos = getMousePos(e);
			var boxObj = document.getElementById("box");

			var boxWidth = BoxClass.getBoxWidth();
			var boxHeight = BoxClass.getBoxHeight();

			if(mousePos.x <= getObjPos(boxObj).x + BoxClass.border) {
				if(mousePos.y <= getObjPos(boxObj).y + BoxClass.border)
					document.getElementsByTagName("body")[0].style.cursor = "se-resize";
				else if(mousePos.y >= getObjPos(boxObj).y + boxHeight - BoxClass.border)
					document.getElementsByTagName("body")[0].style.cursor = "sw-resize";
				else document.getElementsByTagName("body")[0].style.cursor = "e-resize";
			} else if(mousePos.x >= getObjPos(boxObj).x + boxWidth - BoxClass.border) {
				if(mousePos.y <= getObjPos(boxObj).y + BoxClass.border)
					document.getElementsByTagName("body")[0].style.cursor = "ne-resize";
				else if(mousePos.y >= getObjPos(boxObj).y + boxHeight - BoxClass.border)
					document.getElementsByTagName("body")[0].style.cursor = "nw-resize";
				else document.getElementsByTagName("body")[0].style.cursor = "e-resize";
			} else {
				if(mousePos.y <= getObjPos(boxObj).y + BoxClass.border)
					document.getElementsByTagName("body")[0].style.cursor = "s-resize";
				else if(mousePos.y >= getObjPos(boxObj).y + boxHeight - BoxClass.border)
					document.getElementsByTagName("body")[0].style.cursor = "s-resize";
				else document.getElementsByTagName("body")[0].style.cursor = "";
			}

			BoxClass.tmpOnmousemove = document.onmousemove;
			document.onmousemove = function(e) {
				BoxClass.onmousemove(e);
				return false;
			}

			return false;
		}
		this.onmouseover = function(e) {
			if(BoxClass.state == null)
				BoxClass.changeCursor(e);

			return false;
		}
		this.resetCursor = function(e) {
			document.getElementsByTagName("body")[0].style.cursor = "";

			document.onmousemove = BoxClass.tmpOnmousemove;

			BoxClass.tmpOnmousemove = null;

			return false;
		}
		this.onmousedown = function(e) {
			var mousePos = getMousePos(e);
			var boxObj = document.getElementById("box");

			var boxWidth = BoxClass.getBoxWidth();
			var boxHeight = BoxClass.getBoxHeight();

			BoxClass.state = "resize";

			if(mousePos.x <= getObjPos(boxObj).x + BoxClass.border) {
				if(mousePos.y <= getObjPos(boxObj).y + BoxClass.border)
					BoxClass.direction = "nw";
				else if(mousePos.y >= getObjPos(boxObj).y + boxHeight - BoxClass.border)
					BoxClass.direction = "sw";
				else BoxClass.direction = "w";
			} else if(mousePos.x >= getObjPos(boxObj).x + boxWidth - BoxClass.border) {
				if(mousePos.y <= getObjPos(boxObj).y + BoxClass.border)
					BoxClass.direction = "ne";
				else if(mousePos.y >= getObjPos(boxObj).y + boxHeight - BoxClass.border)
					BoxClass.direction = "se";
				else BoxClass.direction = "e";
			} else {
				if(mousePos.y <= getObjPos(boxObj).y + BoxClass.border)
					BoxClass.direction = "n";
				else if(mousePos.y >= getObjPos(boxObj).y + boxHeight - BoxClass.border)
					BoxClass.direction = "s";
				else BoxClass.direction = "";
			}

			BoxClass.tmpOnmouseup = document.onmouseup;
			document.onmouseup = function(e) {
				BoxClass.onmouseup(e);
				return false;
			}

			return false;
		}
		this.onmousemove = function(e) {
			var mousePos = getMousePos(e);
			var point = MapClass.GoogleMap.getSize();
			var mapObj = document.getElementById("map");
			var boxObj = document.getElementById("box");

			var boxWidth = BoxClass.getBoxWidth();
			var boxHeight = BoxClass.getBoxHeight();

			if(BoxClass.state == null) {
				if(mousePos.x < getObjPos(boxObj).x || mousePos.x > getObjPos(boxObj).x + boxWidth
					|| mousePos.y < getObjPos(boxObj).y || mousePos.y > getObjPos(boxObj).y + boxHeight) {
					BoxClass.resetCursor(e);
					return false;
				}

				BoxClass.changeCursor(e);
			} else {
				if(BoxClass.direction.indexOf("w") != -1) {
					var newWidth = 0;
					if(mousePos.x < getObjPos(mapObj).x + BoxClass.maskBorder) {
						newWidth			= boxWidth + getObjPos(boxObj).x - getObjPos(mapObj).x - BoxClass.maskBorder;
						boxObj.style.left	= getObjPos(mapObj).x + BoxClass.maskBorder;
					} else if(mousePos.x > getObjPos(boxObj).x + boxWidth - BoxClass.boxBorder) {
						boxObj.style.left	= getObjPos(boxObj).x + boxWidth - BoxClass.boxBorder;
						newWidth			= BoxClass.boxBorder;
					} else {
						newWidth			= boxWidth + getObjPos(boxObj).x - mousePos.x;
						boxObj.style.left	= mousePos.x;
					}
					if(firefox) {
						newWidth			-= BoxClass.border_ * 2;
					}
					boxObj.style.width		= newWidth;
				}
				if(BoxClass.direction.indexOf("e") != -1) {
					if(mousePos.x > getObjPos(mapObj).x + point.width - BoxClass.maskBorder) {
						boxObj.style.width	= getObjPos(mapObj).x + point.width - BoxClass.maskBorder - getObjPos(boxObj).x;
					} else if(mousePos.x < getObjPos(boxObj).x + BoxClass.boxBorder) {
						boxObj.style.width	= BoxClass.boxBorder;
					} else {
						boxObj.style.width	= mousePos.x - getObjPos(boxObj).x;
					}
				}
				if(BoxClass.direction.indexOf("n") != -1) {
					var newHeight = 0;
					if(mousePos.y < getObjPos(mapObj).y + BoxClass.maskBorder) {
						newHeight			= boxHeight + getObjPos(boxObj).y - getObjPos(mapObj).y - BoxClass.maskBorder;
						boxObj.style.top	= getObjPos(mapObj).y + BoxClass.maskBorder;
					} else if(mousePos.y > getObjPos(boxObj).y + boxHeight - BoxClass.boxBorder) {
						boxObj.style.top	= getObjPos(boxObj).y + boxHeight - BoxClass.boxBorder;
						newHeight			= BoxClass.boxBorder;
					} else {
						newHeight			= boxHeight + getObjPos(boxObj).y - mousePos.y;
						boxObj.style.top	= mousePos.y;
					}
					if(firefox) {
						newHeight			-= BoxClass.border_ * 2;
					}
					boxObj.style.height		= newHeight;
				}
				if(BoxClass.direction.indexOf("s") != -1) {
					if(mousePos.y > getObjPos(mapObj).y + point.height - BoxClass.maskBorder-110) {
						boxObj.style.height	= getObjPos(mapObj).y + point.height - BoxClass.maskBorder-110- getObjPos(boxObj).y;
					} else if(mousePos.y < getObjPos(boxObj).y + BoxClass.boxBorder) {
						boxObj.style.height	= BoxClass.boxBorder;
					} else {
						boxObj.style.height	= mousePos.y - getObjPos(boxObj).y;
					}
				}

				showMask();
			}

			BoxClass.resizePic();
		}
		this.onmouseup = function(e) {
			this.state = null;

			BoxClass.changeCursor(e);

			document.onmouseup = BoxClass.tmpOnmouseup;

			BoxClass.tmpOnmouseup = null;
		}
		this.uploadSuccess = function(fileName, width, height) {
			if(width == undefined || height == undefined) {
				var img = new Image();
				img.src = fileName;
				width = img.width;
				height = img.height;
			}

			var boxObj = document.getElementById("box");
			boxObj.innerHTML = "<table height='100%' border='0' cellpadding='0' cellspacing='0'><tr><td align='center' valign='middle'><img src='" + fileName + "' style='vertical-align: middle; display: none;' border='0' /></td></tr></table>";

			document.getElementById("addPlace___Form").submitButton.style.display	= "";

			document.getElementById("addPlace___Form").fileName.value = fileName;
			document.getElementById("addPlace___Form").maxWidth.value = width;
			document.getElementById("addPlace___Form").maxHeight.value = height;
			//document.getElementById("addPlace___Form").fileWidth.value = width;
			//document.getElementById("addPlace___Form").fileHeight.value = height;

			BoxClass.resizePic();
		}
		this.resizePic = function() {
			var boxObj = document.getElementById("box");

			if(boxObj.getElementsByTagName("IMG").length == 0)
				return;

			var boxWidth = BoxClass.getBoxWidth();
			var boxHeight = BoxClass.getBoxHeight();

			var imageObj = boxObj.getElementsByTagName("IMG")[0];

			var max_w = boxWidth - BoxClass.border_ * 2;
			var max_h = boxHeight - BoxClass.border_ * 2;

			var img_w = document.getElementById("addPlace___Form").maxWidth.value;
			var img_h = document.getElementById("addPlace___Form").maxHeight.value;

			var per = 100 * max_w / img_w;
			if(Math.floor(img_w * per / 100) > max_w || Math.floor(img_h * per / 100) > max_h)
				per = 100 * max_h / img_h;

			var new_w = Math.floor(img_w * per / 100);
			var new_h = Math.floor(img_h * per / 100);

			imageObj.style.width = new_w;
			imageObj.style.height = new_h;
			imageObj.style.display = "";

			document.getElementById("addPlace___Form").fileWidth.value = new_w;
			document.getElementById("addPlace___Form").fileHeight.value = new_h;
		}
		this.submitPic = function() {
			if(BoxClass.edit) {
				BoxClass.submitEditPic();
			} else {
				var filename = document.getElementById("addPlace___Form").fileName;
				var fileWidth = document.getElementById("addPlace___Form").fileWidth;
				var fileHeight = document.getElementById("addPlace___Form").fileHeight;

				makeHttpRequest( 'box/fckbox.php' , 'fillfckbox', false , 'GET' , null , false );
				document.getElementById('PostImgDiv').innerHTML='<img src=\''+filename.value+'\' '+calcImg(fileWidth,fileHeight)+' />';
				PostBox.style.display='inline';
			}
		}
		this.submitPicResult = function(responseText) {
			if(responseText == "login") {
				alert("คุณยังไม่ได้ login เข้าสู่ระบบ\nกรุณา login เข้าสู่ระบบก่อน จึงจะสามารถเพิ่มเติมข้อมูลได้");
				parent.LoginBox.style.visibility='visible';
				return;
			}

			MapClass.removeOverlay(BoxClass.placeID);
			BoxClass.closeBox();
		}
		this.editImage = function(editPlaceID) {
			if(!MapClass.placeHash.containsKey(editPlaceID))
				return false;

			BoxClass.edit = true;
			BoxClass.placeID = editPlaceID;

			var place = MapClass.placeHash.get(editPlaceID);
			var c1 = MapClass.GoogleMap.fromLatLngToDivPixel(place.overlay.bounds_.getSouthWest());
			var c2 = MapClass.GoogleMap.fromLatLngToDivPixel(place.overlay.bounds_.getNorthEast());

			var northWestPoint = MapClass.getNorthWestPoint();
			var boxObj = document.getElementById("box");
			boxObj.style.left = Math.min(c2.x, c1.x) - BoxClass.border_ - northWestPoint.x + getObjPos(document.getElementById("map")).x;
			boxObj.style.top = Math.min(c2.y, c1.y) - BoxClass.border_ - northWestPoint.y + getObjPos(document.getElementById("map")).y;
			if(firefox) {
				boxObj.style.width = Math.abs(c2.x - c1.x);
				boxObj.style.height = Math.abs(c2.y - c1.y);
			} else {
				boxObj.style.width = Math.abs(c2.x - c1.x) + BoxClass.border_ * 2;
				boxObj.style.height = Math.abs(c2.y - c1.y) + BoxClass.border_ * 2;
			}

			var imageName = place.imageName;
			if(imageName.indexOf("../") == 0)
				imageName = imageName.substring(3);
			else imageName = "pic/" + imageName;

			BoxClass.uploadSuccess(imageName, Math.abs(c2.x - c1.x), Math.abs(c2.y - c1.y));

			showMask();
			return true;
		}
		this.submitEditPic = function() {
			var mapObj = document.getElementById("map");
			var imageObj = document.getElementById("box").getElementsByTagName("IMG")[0];

			var point = new GPoint(getObjPos(imageObj).x + BoxClass.border_, getObjPos(imageObj).y + BoxClass.border_);
			var latLng = MapClass.fromPointToLatLng(point);

			var parameter = "";
			parameter += "PlaceID=" + BoxClass.placeID;
			parameter += "&lat=" + latLng.lat();
			parameter += "&lon=" + latLng.lng();
			parameter += "&fileName=" + document.getElementById("addPlace___Form").fileName.value;
			parameter += "&width=" + document.getElementById("addPlace___Form").fileWidth.value;
			parameter += "&height=" + document.getElementById("addPlace___Form").fileHeight.value;

			makeHttpRequest("request/editImage.php", "BoxClass.submitPicResult", false, "POST", parameter);

			return false;
		}

		this.getBoxWidth = function() {
			var boxObj = document.getElementById("box");
			var boxWidth = getObjWidth(boxObj);
			if(firefox) {
				boxWidth += BoxClass.border_ * 2;
			}
			return boxWidth;
		}
		this.getBoxHeight = function() {
			var boxObj = document.getElementById("box");
			var boxHeight = getObjHeight(boxObj);
			if(firefox) {
				boxHeight += BoxClass.border_ * 2;
			}
			return boxHeight;
		}
	}

	function showMask() {
		var point = MapClass.GoogleMap.getSize();
		var mapObj = document.getElementById("map");
		var boxObj = document.getElementById("box");

		if(boxObj.style.display == "none")
			return;

		var boxWidth = BoxClass.getBoxWidth();
		var boxHeight = BoxClass.getBoxHeight();

		var maskLeftObj = document.getElementById("maskLeft");
		maskLeftObj.style.left		= getObjPos(mapObj).x;
		maskLeftObj.style.top		= getObjPos(mapObj).y;
		maskLeftObj.style.width		= getObjPos(boxObj).x - getObjPos(mapObj).x;
		maskLeftObj.style.height	= point.height;
		maskLeftObj.style.display	= "";
		setOpacity(maskLeftObj, BoxClass.maskOpacity);

		var maskRightObj = document.getElementById("maskRight");
		maskRightObj.style.left		= getObjPos(boxObj).x + boxWidth;
		maskRightObj.style.top		= getObjPos(mapObj).y;
		maskRightObj.style.width	= point.width - getObjWidth(maskLeftObj) - boxWidth;
		maskRightObj.style.height	= point.height;
		maskRightObj.style.display	= "";
		setOpacity(maskRightObj, BoxClass.maskOpacity);

		var maskTopObj = document.getElementById("maskTop");
		maskTopObj.style.left		= getObjPos(boxObj).x;
		maskTopObj.style.top		= getObjPos(mapObj).y;
		maskTopObj.style.width		= boxWidth;
		maskTopObj.style.height		= getObjPos(boxObj).y - getObjPos(mapObj).y;
		maskTopObj.style.display	= "";
		setOpacity(maskTopObj, BoxClass.maskOpacity);

		var maskBottomObj = document.getElementById("maskBottom");
		maskBottomObj.style.left	= getObjPos(boxObj).x;
		maskBottomObj.style.top		= getObjPos(boxObj).y + boxHeight;
		maskBottomObj.style.width	= boxWidth;
		maskBottomObj.style.height	= point.height - getObjHeight(maskTopObj) - boxHeight;
		maskBottomObj.style.display	= "";
		setOpacity(maskBottomObj, BoxClass.maskOpacity);

		var addFormObj = document.getElementById("addPlace___Div");
		addFormObj.style.left	= getObjPos(boxObj).x;
		addFormObj.style.top	= getObjPos(boxObj).y + boxHeight + 10;
		addFormObj.style.display	= "";

		document.getElementById("addPlace___Form").width.value	= boxWidth;
		document.getElementById("addPlace___Form").height.value	= boxHeight;
	}

	function hideMask() {
		document.getElementById("maskLeft").style.display	= "none";
		document.getElementById("maskRight").style.display	= "none";
		document.getElementById("maskTop").style.display	= "none";
		document.getElementById("maskBottom").style.display	= "none";

		document.getElementById("addPlace___Div").style.display	= "none";
	}