function Form(id, output) {
	this.id = id;
	this.target = false;
	this.output = document.getElementById(output);
	this.url = '/memo/petari.pl';
	this.css = {
		main: {
			position: "absolute",
			left: "20px",
			top: "100px",
			width: "120px",
			height: "120px",
			textAlign: "center",
			background: "#fff",
			border: "1px dotted #f90",
			zIndex: "9999"
		},

		grip: {
			height: "15px",
			width: "120px",
			background: "#fec",
			border: "1px dotted #f90"
		},

		table: {
			borderCollapse: "collapse",
			width: "100px",
			border: "0",
			margin: "10px auto",
			padding: "0"
		},

		tr: {
			border: "0",
			margin: "0",
			padding: "0"
		},

		td: {
			border: "0",
			margin: "0",
			padding: "0"
		},

		textarea: {
			width: "100px",
			height: "50px",
			font: "normal 10pt sans-serif",
			margin: "0 0 5px",
			padding: "0"
		},

		post: { margin: "0" }
	};

	this.limit = {
		message: { min: 0, max: 20 },
		x: { min: 0, max: 1000 },
		y: { min: 0, max: 1000 },
		flag: false
	};
}

Form.prototype.getForm = function() {
	var form = document.createElement("div");
	form.setAttribute("id", this.id);
	form.style.position = this.css.main.position;
	form.style.left = this.css.main.left;
	form.style.top = this.css.main.top;
	form.style.width = this.css.main.width;
	form.style.height = this.css.main.height;
	form.style.textAlign = this.css.main.textAlign;
	form.style.background = this.css.main.background;
	form.style.border = this.css.main.border;
	form.style.zIndex = this.css.main.zIndex;

	var grip = document.createElement("div");
	grip.style.width = this.css.grip.width;
	grip.style.height = this.css.grip.height;
	grip.style.background = this.css.grip.background;
	grip.style.borderBottom = this.css.grip.border;
	form.appendChild(grip);

	var table = document.createElement("table");
	table.style.borderCollapse = this.css.table.borderCollapse;
	table.style.width = this.css.table.width;
	table.style.border = this.css.table.border;
	table.style.margin = this.css.table.margin;
	table.style.padding = this.css.table.padding;
	form.appendChild(table);

	var tbody = document.createElement("tbody");

	var tr0 = document.createElement("tr");
	tr0.style.border = this.css.tr.border;
	tr0.style.margin = this.css.tr.margin;
	tr0.style.padding = this.css.tr.padding;
	var td0 = document.createElement("td");
	td0.style.border = this.css.td.border;
	td0.style.margin = this.css.td.margin;
	td0.style.padding = this.css.td.padding;
	var textarea = document.createElement("textarea");
	textarea.setAttribute("id", "message");
	textarea.style.width = this.css.textarea.width;
	textarea.style.height = this.css.textarea.height;
	textarea.style.font = this.css.textarea.font;
	textarea.style.margin = this.css.textarea.margin;
	textarea.style.padding = this.css.textarea.padding;
	td0.appendChild(textarea);
	tr0.appendChild(td0);
	tbody.appendChild(tr0);

	var tr1 = document.createElement("tr");
	tr1.style.border = this.css.tr.border;
	tr1.style.margin = this.css.tr.margin;
	tr1.style.padding = this.css.tr.padding;
	var td1 = document.createElement("td");
	td1.style.textAlign = "right";
	td1.style.border = this.css.td.border;
	td1.style.margin = this.css.td.margin;
	td1.style.padding = this.css.td.padding;
	var input0 = document.createElement("input");
	input0.setAttribute("id", "postButton");
	input0.setAttribute("type", "button");
	input0.setAttribute("value", "Post");
	input0.style.margin = this.css.post.margin;
	var input1 = document.createElement("input");
	input1.setAttribute("id", "x");
	input1.setAttribute("type", "hidden");
	var input2 = document.createElement("input");
	input2.setAttribute("id", "y");
	input2.setAttribute("type", "hidden");
	td1.appendChild(input0);
	td1.appendChild(input1);
	td1.appendChild(input2);
	tr1.appendChild(td1);
	tbody.appendChild(tr1);

	table.appendChild(tbody);

	this.output.appendChild(form);
}

// 初期位置に戻す
Form.prototype.goBack = function() {
	document.getElementById("message").value = "";
	document.getElementById("x").value = parseInt(this.css.main.left);
	document.getElementById("y").value = parseInt(this.css.main.top);
	this.target = document.getElementById(this.id);
	var divide = 15; // モーション分割数。奇数を設定する

	var start = {
		x: parseInt(this.target.style.left),
		y: parseInt(this.target.style.top)
	};
	var end = {
		x: parseInt(this.css.main.left),
		y: parseInt(this.css.main.top)
	};
	var d = {
		x: (start.x - end.x),
		y: (start.y - end.y)
	};

	var center = (divide + 1) / 2;
	var delta = new Array();
	for (i = 0; i < center; i++) {
		delta[i] = { x: Math.floor(d.x >> i), y: Math.floor(d.y >> i) };
	}

	var point = new Array();
	var shift = center - 1;
	for (i = 0; i < divide; i++) {
		if (i == 0) {
			point[i] = { x: start.x + "px", y: start.y + "px" }
		}
		else if (i < center -1) {
			point[i] = {
				x: start.x - delta[shift].x + "px",
				y: start.y - delta[shift].y + "px"
			};
			shift--;
		}
		else if (i >= center - 1 && i < divide - 1) {
			point[i] = {
				x: end.x + delta[shift].x + "px",
				y: end.y + delta[shift].y + "px"
			};
			shift++;
		}
		else if ( i == divide - 1)  {
			point[i] = { x: end.x + "px", y: end.y + "px" };
		}
	}

	// setIntervalスコープ内でthisを保持できないので
	// targetにthis.targetを代入しておく
	var target = this.target;
	var count = 0;
	var myTimer = setInterval(
		function() {
			if (count < divide - 1) {
				target.style.left = point[count].x;
				target.style.top = point[count].y;
				count++;
			}
			else if (count == divide - 1) {
				target.style.left = point[count].x;
				target.style.top = point[count].y;
				clearInterval(myTimer);
			}
			else {
				clearInterval(myTimer);
			}
		}, 10);
}
