window.onload = function() {
	document.onselectstart = function() { return false; }

	readDB();

	var form = new Form("form0", "tools");
	form.getForm();
	document.getElementById("postButton").onclick = function() { writeDB(); }
	var limit = {
		message: { min: 0, max: 20 },
		x: { min: 160, max: 1000 },
		y: { min: 80, max: 400 },
		error: false
	};
	var dd = new DragDrop(limit);
	document.getElementById("form0").firstChild.onmousedown = function(e) {
		var target = this.parentNode;
		var output = document.getElementById("tools");
		dd.setTarget(e, target, output);
	}
	document.onmousemove = function(e) {
		dd.dragTarget(e);
	};
	document.onmouseup = function () {
		if (dd.trashBox.trashFlag) {
			dd.output.removeChild(dd.clone);
			dd.trashBox.removePad(dd.target, dd.output);
			removeDB(dd.id);
			dd.resetProps();
			return false;
		}

		if (dd.limit.error) {
			dd.undoMove();
			dd.resetProps();
			return false;
		}

		if (dd.clone && dd.id.match(/pad/)) {
			var x = parseInt(dd.clone.style.left);
			var y = parseInt(dd.clone.style.top);
			updateDB(dd.id, x, y);
		}

		dd.dropTarget();
	};

	function updateDB(id, x, y) {
		var id = id.replace(/pad/, "");
		var url = '/memo/petari.pl';
		var pars = 'mode=move&id=' + id + '&x=' + x + '&y=' + y;
		var myAjax = new Ajax.Request(
			url,
			{
				method: 'post',
				parameters: pars
				//onComplete: showResponse
			});
	}

	function removeDB(id) {
		var id = id.replace(/pad/, "");
		var url = '/memo/petari.pl';
		var pars = 'mode=remove&id=' + id;
		var myAjax = new Ajax.Request(
			url,
			{
				method: 'post',
				parameters: pars,
				onComplete: showResponse
			});
	}

	function readDB() {
		var url = '/memo/petari.pl';
		var pars = "mode=read";
		var myAjax = new Ajax.Request(
			url,
			{
				method: "post",
				parameters: pars,
				onCreate: showSpinner,
				onComplete: showResponse
			});
	}

	function showSpinner() {
		var spinner = new Spinner("spinner");
		if (!document.getElementById("spinner")) {
			document.getElementById("tools").appendChild(spinner.getSpinner());
		}
		else { $('spinner').show(); }
	}

	function showResponse(originalRequest) {
		$('spinner').hide();
		var xml = originalRequest.responseXML;
		var error = xml.getElementsByTagName("error");
		var id = xml.getElementsByTagName("id");
		var message = xml.getElementsByTagName("message");
		var x = xml.getElementsByTagName("x");
		var y = xml.getElementsByTagName("y");

		var pad = new Pad("canvas");
		while (pad.output.hasChildNodes()) {
			pad.output.removeChild(pad.output.firstChild);
		}
		for (i = 0; i < id.length; i++) {
			var myId = "pad" + id[i].firstChild.nodeValue;
			var myX = x[i].firstChild.nodeValue;
			var myY = y[i].firstChild.nodeValue;
			var myMessage = message[i].firstChild.nodeValue;
			pad.createPad(myId, myX, myY, myMessage);
			document.getElementById(myId).firstChild.onmousedown = function(e) {
				var target = this.parentNode;
				var output = pad.output;
				dd.moveFront(target, output);
				dd.setTarget(e, target, output);
			}
			document.getElementById(myId).onclick = function(e) {
				var output = pad.output;
				dd.moveFront(this, output);
			}
		}
	}

	function writeDB() {
		var message = document.getElementById("message").value;
		var cood = {
			x: document.getElementById("x").value,
			y: document.getElementById("y").value
		};
		checkValues(message, cood.x, cood.y);
		if (limit.error) { limit.error = false; return false; }
		form.goBack();
		var pad = new Pad("canvas");
		var id = pad.output.childNodes.length;
		pad.createPad(id, cood.x, cood.y, message);
		var url = '/memo/petari.pl';
		var pars = "mode=write&x=" + cood.x + "&y=" + cood.y + "&message=" + encodeURIComponent(message);
		var myAjax = new Ajax.Request(
			url,
			{
				method: "post",
				parameters: pars,
				onComplete: showResponse
			});
	}

	function checkValues(message, x, y) {
		if (message.length == 0) {
			var errorMessage = "メッセージを書いてください";
			alert(errorMessage);
			limit.error = true;
		}
		else if (message.length > limit.message.max) {
			var errorMessage = "制限文字数の" + limit.message.max + "文字を超えています。";
			alert(errorMessage);
			limit.error = true;
		}
		else if (x < limit.x.min || y < limit.y.min || x > limit.x.max || y > limit.y.max) {
			var errorMessage = "書き込み禁止区域です。";
			alert(errorMessage);
			limit.error = true;
		}
	}
}