ft = new Array('maru-gothic-bold','maru-gothic','kaku-gothic','pop-p','jtc-p','ui-gothic','mincho','edokan-p','heta','dasa','Generic','impact','tahoma','tahoma-bold','times','times-bold','times-italic','times-italic-bold');
ftname = new Array('丸ゴシック (Bold)','丸ゴシック','角ゴシック','丸ポップ調','角ポップ調','UI-Gothic','明朝','江戸勘亭流','へた字','ダサ字','*Art Brush','*Impact','*Tahoma','*Tahoma (Bold)','*Times','*Times (Bold)','*Times (Italic)','*Times (Bold/Italic)');
ftSel = "";
for (i in ft) ftSel += "<div lang='" + ft[i] + "' class=opt-out>" + ftname[i] + "</div>";
fn = 0;
sp = 10;
lock = 0;
optHeight = 18;
optMaxLine = 10;
selHeight = 20;
var load, FX, SL;

closeOff1 = new Image();
closeOff1.src = "/image/close-off-1.gif";
closeOn1 = new Image();
closeOn1.src = "/image/close-on-1.gif";
closeOff2 = new Image();
closeOff2.src = "/image/close-off-2.gif";
closeOn2 = new Image();
closeOn2.src = "/image/close-on-2.gif";

font = new Array();
for(i = 0; i < ft.length; i ++) {
	font[ft[i]] = new Image();
	font[ft[i]].src = "/image/fonts/" + ft[i] + ".gif";
}

code = new Array('00', '33', '66', '99', 'CC', 'FF');
buf = "";
buf += "<table id=plt><tr><td colspan=3 id=titlebar2><div id=cparea></div><img src='' width=17 height=17 id=winbtn2></td></tr><tr><td>";
c = 0;
for(r in code) {
	c++;
	for(g in code) {
		for(b in code) {
			rgb = code[r] + code[g] + code[b];
			buf += "<img src='/image/clr.gif' style=\"background:#" + rgb + ";\" onmouseover=\"cp('#" + rgb + "')\" onclick=\"cc('" + rgb + "')\">";
		}
		buf += "<br>";
	}
	buf += "</td>";
	if(c == 3) buf += "</tr><tr>";
	if(r != code.length - 1) {
		buf += "<td>";
	}
}
buf += "</td></tr></table>";
buf += "<div id=overlay></div>";
buf += "<table id=prvfr><td id=prvfrinner>";
buf += "<table align=center id=winout><td><table id=winmid><tr><td id=titlebar><img src='' id=winbtn></td></tr><tr><td><div id=winin></div></td></tr></table></td></table>";
buf += "</td></table>";
buf += "<table id=dlgfr><td>";
buf += "<table align=center id=dlgout><tr><td><img src='/image/alert.gif' id=sign></td><td id=msg></td></tr><tr><td colspan=2 align=center id=btn><input type=button  id=close value='0 K'></td></tr></table>";
buf += "</td></table>";
buf += "<table id=pgrfr><td>";
buf += "<table align=center><td><div id=pgrout><div id=pgrbar></div></div></td><td id=pgrper></td></table>";
buf += "</td></table>";
buf += "<table id=resfr><td>";
buf += "<table align=center><td id=resout>Please Wait...</td></table>";
buf += "</td></table>";
document.write(buf);

function overLay(v, mode, task) {

	if(v == "close") {
		getSelfSize();
		inner.innerHTML = "";
		almsg.innerHTML = "";
		prvwin.style.top = selfH * -1 + "px";
		dlgwin.style.top = selfH * -1 + "px";
		pgrwin.style.top = selfH * -1 + "px";
		reswin.style.top = selfH * -1 + "px";
		scr.style.display = "none";
		prvin.style.verticalAlign = "middle";
		outer.style.marginTop = 0;
		if(mode) mode.focus();
		return;
	}

	scroll_top = (document.all) ? document.body.scrollTop : self.pageYOffset;

	if(mode.match(/^wait/)) {
		getSelfSize();
		scr.style.background = (mode == "wait2") ? "#000000" : "#ffffff";
		scr.style.width = maxX + "px";
		scr.style.height = maxY + "px";
		scr.style.display = "block";
		reswin.style.height = selfH + "px";
		reswin.style.top = scroll_top;
		return;
	}

	((mode == "window") ? inner : almsg).innerHTML = v;
	if(document.all && document.getElementById("imsz"))
		document.getElementById("imsz").style.visibility = "hidden";
	if(task) eval(task);
	getSelfSize();

	if(mode == "window") {
		if(document.getElementById("comp")) {
			scr.style.background = "#ffffff";
			outer.style.borderColor = (document.all) ? "#ffffff" : "transparent";
			midder.style.borderColor = "#000000";
			tbar.style.background = "#000000";
			tbtn.src = closeOff2.src;
			tbtn.style.marginBottom = "1px";
		}
		else {
			scr.style.background = "#000000";
			outer.style.borderColor = "#ffffff";
			midder.style.borderColor = "#ffffff";
			tbar.style.background = "#ffffff";
			tbtn.src = closeOff1.src;
			tbtn.style.marginBottom = "3px";
		}
		maxH = Math.ceil(selfH * 0.7);
		inner.style.maxHeight = maxH + "px";
		if(document.all) {
			inner.style.overflow = "visible";
			inner.style.height = "100px";
			if(parseInt(inner.clientHeight) > maxH) {
				inner.style.overflow = "scroll";
				inner.style.height = maxH + "px";
			}
		}
		if(document.getElementById("smplay") && numIm) {
			prvin.style.verticalAlign = "top";
			outer.style.marginTop = Math.ceil((selfH - maxH) / 2);
		}
		inner.scrollTop = 0;
	}
	else
		scr.style.background = "#000000";

	obj = (mode == "window") ? prvwin : dlgwin;
	obj.style[cmd] = (cmd == 'filter') ? "alpha(opacity=0)" : 0;
	obj.style.height = selfH + "px";
	obj.style.top = scroll_top;
	if(mode == "alert")
		document.getElementById("close").focus();

	scr.style.width = (selfW == maxX) ? "100%" : maxX + "px";
	scr.style.height = (selfH == maxY) ? "100%" : maxY + "px";
	scr.style.display = "block";

	fn = 0;
	lay = obj;
	if(document.getElementById("smplay") && numIm) {
		pgrwin.style.height = selfH + "px";
		pgrwin.style.top = scroll_top;
		TO = setTimeout("timeout()", 10000);
		imLoad();
	}
	else {
		layfade();
	}
}

function layfade(n) {

	clearTimeout(FD);
	fn ++;
	op = (cmd == 'filter') ? "alpha(opacity=" + (fn * 10) + ")" : fn / 10;
	lay.style[cmd] = op;
	end = (n) ? n : 10;
	if(fn >= end) {
		if(document.all && document.getElementById("imsz"))
			document.getElementById("imsz").style.visibility = "visible";
	}
	else {
		FD = setTimeout("layfade(" + n + ")", sp);
	}
}

function makeSocket() {

	if(window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}
	else if(window.ActiveXObject) {
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e) {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else {
		return null;
	}
}

function loadContent(url, query, next) {

	s = makeSocket();
	if(s == null) alert("XMLHttpRequest非対応");
	s.onreadystatechange = function() {
		if(s.readyState == 4) {
			if(s.status <= 200) {
				eval(next + "(0, 0, 0, s.responseText)");
			}
			else {
				alert("ERROR\n\n" + "予期せぬエラーが発生しました。\nERROR CODE: " + s.status);
				overLay("close");
				return;
			}
		}
	}
	if(query) query += "&" + escape(new Date());
	s.open("POST", url , true);
	s.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
	s.send(query);
}

function make(a, b, c, data) {

	if(data) {
		if(data.match(/^ERROR:/)) {
			getSelfSize();
			reswin.style.top = selfH * -1 + "px";
			v = data.replace(/:/, "");
			overLay(v, "alert");
		}
		else {
			dt = data.split(":");
			im = document.createElement("img");
			im.onload = function() {
				getSelfSize();
				reswin.style.top = selfH * -1 + "px";
				v = "<div id=comp>";
				v += "<div id=h>画像の生成が完了しました。</div>";
				v += "<div><img src='' id=banner><br><span class=sml>[" + dt[0] + "]</span></div>";
				v += "<div class=sml>出来上がった画像は保存してお持ち帰り下さい。<br>この画像は５分程でサーバーから削除されます。</div>";
				v += "<p class=sml>[<a href='' onclick='sendOpen(); return false;'>画像をメールで送る</a>]</p>";
				v += "<form method=POST id=sendimg onSubmit=\"sendimg('" + dt[1] +"'); return false;\">メールアドレス<br><input name=mail id=mail><input type=image src='/image/sendimg.gif' width=32 height=20 id=send align=top><input type=submit class=submit><br><span class=er>※間違いが多くなっています。正しく入力して下さい。</span></form>";
				v += "<div id=result><img src='/image/resept.gif' width=32 height=32></div>";
				v += "</div>";
				overLay(v, "window", "document.getElementById('banner').src = im.src;init();");
				
			}
			im.setAttribute("src", dt[1]);
		}
		return;
	}

	overLay("", "wait");
	query = new Array();
	el = form.elements
	for(i = 0; i < el.length; i ++) {
		v = "";
		if(el[i].type.match(/select/i))
			v = el[i].options[el[i].selectedIndex].value;
		else if(el[i].type.match(/(check|radio)/i))
			v = (el[i].checked) ? el[i].value : "";
		else
			v = el[i].value;
		query[i] = (el[i].name != "" && v != "") ? el[i].name + "=" + encodeURIComponent(v) : "";
	}
	query = query.join("&").replace(/&+/g, "&");
	query = query.replace(/^&|&$/g, "");
	loadContent("/banner", query, "make");
}

function sendOpen() {

	obj = document.getElementById("sendimg");
	obj.style.display = (obj.style.display != "block") ? "block" : "none";
	document.getElementById("result").style.display = "none";
}

function sendimg(im, a, a, v) {

	if(v) {
		document.getElementById("result").innerHTML = v;
		return;
	}

	document.getElementById("sendimg").style.display = "none";
	document.getElementById("result").style.display = "block";
	document.getElementById("result").innerHTML = "<img src='/image/resept.gif' width=32 height=32>";
	q = "mail=" + encodeURIComponent(document.getElementById("mail").value) + "&im=." + encodeURIComponent(im);
	loadContent("/sendim", q, "sendimg");
}

function baseChange() {

	document.getElementById("new").style.display = (form.elements["source"].value == "new") ? "block" : "none";
	document.getElementById("smp").style.display = (form.elements["source"].value == "stock") ? "block" : "none";
	document.getElementById("web").style.display = (form.elements["source"].value == "http") ? "block" : "none";
}

function prvSmp(dir,sz, page, v) {

	if(v) {
		progressReset();
		v = v.replace(/:::(.*?)$/, "");
		im = RegExp.$1;
		im = (im) ? im.split(",") : new Array();;
		numIm = im.length;
		overLay(v, "window");
		return;
	}

	prvwin.style[cmd] = (cmd == 'filter') ? "alpha(opacity=0)" : 0;
	dir = (dir) ? "&dir=" + dir : "";
	sz = (sz) ? "&size=" + encodeURIComponent(sz) : "";
	page = (page) ? "&page=" + page : "";
	query = dir + sz + page;
	loadContent("/preview", query, "prvSmp");
}

function imLoad() {

	count = 0;
//	time = new Date().getTime();
	img = document.getElementById("smplay").getElementsByTagName("img");
	for(i = 0; i < img.length; i ++) {
		img[i].onload = function() {
			count ++;
			per = Math.floor(count / numIm * 100);
			pbar.style.width = per + "%";
			pper.innerHTML = per + "%";
			if(per >= 100)
				PS = setTimeout("disp()", 1000);
		}
		img[i].src = im[i];// + "?" + time;
	}
}

function disp() {

	clearTimeout(TO);
	clearTimeout(PS);

	getSelfSize();
	pgrwin.style.top = selfH * -1 + "px";
	progressReset();
	layfade();
}

function progressReset() {

	pbar.style.width = "0%";
	pper.innerHTML = "0%";
	count = 0;
}

function timeout() {

	clearTimeout(TO);
	overLay("close");
	ermsg = "タイムアウト<br><br>画像の読み込みに失敗しました。<br>回線の混雑や接続不良が原因の場合があります。<br>しばらく時間を置いて再試行して下さい。";
	overLay(ermsg, "alert");
}

function selIm(dir, im) {

	img = "/material/" + dir + "/" + im
	cim = document.createElement("img");
	cim.onerror = function() {
		overLay("close");
		overLay("ERROR<br><br>サンプル画像の読み込みに失敗しました。<br>選択されたサンプル画像は既に削除された可能性があります。<br>ご面倒ですが、再度サンプル参照画面をご確認下さい。", "alert");
	}
	cim.onload = function() {
		document.getElementById("smp-" + dir).src = img;
		document.getElementById("smp-" + dir).style.marginRight = "10px";
		form.elements[dir].value = im;
		if(dir == "src") {
			document.getElementById("srcclr").style.display = "block";
			document.getElementById("srcpos").style.display = "block";
		}
		overLay("close");
	}
	cim.setAttribute("src", img + "?" + new Date().getTime());
}

function selImInit() {

	dir = new Array("base", "src");
	for(i in dir) {
		im = form.elements[dir[i]].value;
		document.getElementById("smp-" + dir[i]).src = (im) ? "/material/" + dir[i] + "/" + im : "/image/clr.gif";
		document.getElementById("smp-" + dir[i]).style.marginRight = (im) ? "10px" : "0px";
		document.getElementById("srcclr").style.display = (im) ? "block" : "none";
		document.getElementById("srcpos").style.display = (im) ? "block" : "none";
	}
}

function modeChange() {

	document.getElementById("solid").style.display = (form.elements["col_mode"].value == "solid") ? "block" : "none";
	document.getElementById("grad").style.display = (form.elements["col_mode"].value == "grad") ? "block" : "none";
	document.getElementById("def").style.display = (form.elements["use_mode"].value == "def") ? "block" : "none";
	document.getElementById("cut").style.display = (form.elements["use_mode"].value == "cut") ? "block" : "none";
}

function srcClr() {

	document.getElementById("smp-src").src = "/image/clr.gif";
	document.getElementById("smp-src").style.marginRight = "0px";
	form.elements["src"].value = "";
	document.getElementById("srcclr").style.display = "none";
	document.getElementById("srcpos").style.display = "none";
}

function pltOpen(p) {

	colFn = p.id;
	tbtn2.src = closeOff1.src;
	palette.style[cmd] = (cmd == 'filter') ? "alpha(opacity=0)" : 0;

	with(palette.style) {
		left = (cursorX - 200) + "px";
		top = (cursorY - 160) + "px";
		display = "block";
	}

	fn = 0;
	lay = palette;
	layfade();
}

function cp(col) {

	document.getElementById("cparea").style.color = (col.match(/^#ffffff$/i)) ? "black" : col;
	document.getElementById("cparea").innerHTML = col;
}

function cc(col) {

	if(col) {
		form.elements[colFn].value = col;
		form.elements[colFn].focus();
	}
	palette.style.display = "none";
}

function imConf() {

	url = document.getElementById("imurl").value.replace(/^(https?:\/\/)+/, "");
	prot = RegExp.$1;
	if(url == '') {
		overLay("ERROR<br><br>画像のURLが正しく入力されていません。", "alert");
		return;
	}

	overLay("", "wait2");
	url = prot + url + "?" + escape(new Date().getTime());
	im = document.createElement("img");
	TO = setTimeout("timeout()", 10000);
	im.onabort = function() {
		clearTimeout(TO);
		getSelfSize;
		reswin.style.top = selfH * -1 + "px";
		overLay("ERROR<br><br>画像の読み込みが中断されました。<br>読み込み先サーバーか、回線の混雑や接続不良が原因の場合があります。<br>しばらく時間を置いて再試行して下さい。", "alert");
	}
	im.onerror = function() {
		clearTimeout(TO);
		getSelfSize;
		reswin.style.top = selfH * -1 + "px";
		overLay("ERROR<br><br>画像の読み込みに失敗しました。<br>画像のURLを確認して下さい。", "alert");
	}
	im.onload = function() {
		clearTimeout(TO);
		w = im.width;
		h = im.height;
		nm = im.src.split("/");
		nm = nm[nm.length - 1].replace(/\?.*?$/, "");
		getSelfSize;
		reswin.style.top = selfH * -1 + "px";
		overLay("<div id=preview><div>画像を読み込みました</div><img src='' id=setim><div class=sml>" + nm + "<br>" + w + "px * " + h + "px</div>", "window", "document.getElementById('setim').src = im.src");
	}
	im.setAttribute("src", url);
}

function ftChange() {

	for(i = 1; i <= 5; i ++) {
		f = form.elements["font" + i];
		document.images["font" + i].src = font[f.value].src;
	}
}

function printOption(stt, end, pitch, mode, i) {

	s = "";
	if(stt == "ft")
		s += ftSel;
	else if(pitch < 0)
		for(i = stt; i >= end; i += pitch)
			s += "<div lang=" + i + " class=opt-out>" + i + "</div>";
	else
		for(i = stt; i <= end; i += pitch)
			s += "<div lang=" + i + " class=opt-out>" + i + "</div>";

	if(mode) return s;
	else document.write(s);
}

function detailOpen() {

	for(i = 1; i <= 5; i ++)
		document.getElementById("detail" + i + "box").style.display = (document.getElementById("detail" + i).checked) ? "block" : "none";
}

function addString() {

	for(i = 2; i <= 5; i ++) {
		f = document.getElementById("ustr" + i);
		document.getElementById("str" + i).style.display = (f.checked) ? "block" : "none";
	}
}

function outputOption() {

	f = form.elements["format"];
	document.getElementById("quality").style.display = (f.value == "jpeg") ? "block" : "none";
	document.getElementById("gifopt").style.display = (f.value == "gif") ? "block" : "none";
	document.getElementById("sticks_col").style.display = (f.value == "gif") ? "none" : "block";
}

function selOpen(p) {

	n = (p.id.split("-"))[0];
	obj = document.getElementById(n + "-sel");
	opt = obj.getElementsByTagName("div");

	selectedOpt = 0;
	if(n == "newX")
		for(i = 0; i < opt.length; i ++)
			opt[i].className = (opt[i].lang == form.elements["newX"].value + "," + form.elements["newY"].value) ? "opt-over" : "opt-out";
	else
		for(i = 0; i < opt.length; i ++) {
			opt[i].className = (opt[i].lang == form.elements[n].value) ? "opt-over" : "opt-out";
			if(opt[i].lang == form.elements[n].value) selectedOpt = i * optHeight;
		}

	if(i > optMaxLine) {
		selH = optHeight * optMaxLine;
		obj.style.height = selH + "px";
		obj.style.overflowY = "scroll";
		sl = 10;
	}
	else {
		selH = optHeight * i;
		sl = 5;
	}

	offbot = parseInt(document.body.clientHeight) - (cursorY - parseInt(document.body.scrollTop)) - selHeight;

	if(offbot < selH) {
		mgnTop = 0;
		mgnTopEnd = selH * -1;
		mgnTopEnd += (document.all)? 1 : -1;
		clipH = -2;
		obj.style.clip = "rect(auto,auto," + clipH + ",auto)";
		obj.style.marginTop = mgnTop + "px";
		selSlide = function() {
			clearTimeout(SL);
			clipH += sl;
			mgnTop -= sl;
			if(clipH > selH) clipH = selH;
			if(mgnTop < mgnTopEnd) mgnTop = mgnTopEnd;
			obj.style.clip = "rect(auto,auto," + (clipH + 2) + ",auto)";
			obj.style.marginTop = mgnTop + "px";
			if(clipH < selH || mgnTop > mgnTopEnd)
				SL = setTimeout("selSlide()", 10);
		}
	}
	else {
		mgnTop = selH * -1 + selHeight;
		mgnTopEnd = selHeight;
		clipH = selH + 2;
		obj.style.clip = "rect(" + clipH + ",auto,auto,auto)";
		obj.style.marginTop = mgnTopEnd + "px";
		selSlide = function() {
			clearTimeout(SL);
			clipH -= sl;
			mgnTop += sl;
			if(clipH < 0) clipH = 0;
			if(mgnTop > mgnTopEnd) mgnTop = mgnTopEnd;
			obj.style.clip = "rect(" + clipH + ",auto,auto,auto)";
			obj.style.marginTop = mgnTop + "px";
			if(clipH > 0 || mgnTop < mgnTopEnd)
				SL = setTimeout("selSlide()", 10);
		}
	}

	if(obj.style.display != "block") {
		obj.style.display = "block";
		obj.scrollTop = selectedOpt;
		document.getElementById(n + "-dmy").focus();
		Sl = setTimeout("selSlide()", 0);
	}
	else {
		obj.scrollTop = 0;
		obj.style.display = "none";
	}
}

function optClassChange(p) {

	opt = p.parentNode.getElementsByTagName("div");
	for(i = 0; i < opt.length; i ++)
		opt[i].className = (opt[i] == p) ? "opt-over" : "opt-out";
}

function inval(p) {

	n = p.parentNode.id.split("-")[0];
	if(n == "newX") {
		v = p.innerHTML.split(" × ");
		form.elements["newX"].value = v[0];
		form.elements["newY"].value = v[1];
	}
	else {
		form.elements[n].value = p.lang;
		if(! n.match(/^(ftsize|[hv]space)\d$/))
			document.getElementById(n + "-in").innerHTML = "<span>" + p.innerHTML + "</span>";
	}
	if(n == "source") baseChange();
	if(n == "col_mode") modeChange();
	if(n == "use_mode") modeChange();
	if(n.match(/^font\d$/)) ftChange();
	if(n == "format") outputOption();
	p.parentNode.style.display = "none";
	lock = 0;
}

function selClose(p) {

	if(lock) return;
	for(i = 0; i < selbox.length; i ++) {
		n = selbox[i].id.split("-")[0];
		if(! p.id || p.id.split("-")[0] != n) {
			selbox[i].scrollTop = 0;
			selbox[i].style.display = "none";
		}
	}
}

function printStringForm() {

	for(i = 1; i <=5; i ++) {
		buf = '<dl id=str' + i +'>'
		+ '<dt>挿入する文字列' + ((i > 1) ? '<span class=sml>その</span>' + i +'</dt>' : '</dt>')
		+ '<dd><table>'
		+ '<tr><th>文字列</th><td><input name=string' + i +' class=string><span class=sub3><input type=checkbox name=detail' + i +' id=detail' + i +'><label for=detail' + i +'>詳細オプション有効</label></span></td></tr>'
		+ '<tr><th>フォント</th><td>'
		+ '<input name=font' + i +' value="maru-gothic-bold" id=font' + i +'-dmy class=dmy readonly>'
		+ '<div id=font' + i +'-sel class=sel>' + ftSel + '</script></div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=font' + i +'-left class=selleft><img src="/image/selcov.gif" id=font' + i +'-cov class=selcov></td><td><div id=font' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=font' + i +'-btn class=selchip></td><td><span class=sub3><img src="/image/fonts/maru-gothic-bold.gif" id=font' + i +' class=ftsmp align=absmiddle></span></td></table>'
		+ '</td></tr>'
		+ '<tr><th>色/サイズ</th><td>'
		+ '<table class=nopad><td>#<input name=ftcolor' + i +' maxlength=6 class=color><img src="/image/palette.gif" align=absmiddle id=ftcolor' + i +' class=pltbtn></td>'
		+ '<td class=sub8><div id=ftsize' + i +'-sel class=sel>' + printOption(8, 30, 1, 1) + printOption(35, 100, 5, 1) + printOption(110, 200, 10, 1) + printOption(220, 300, 20, 1) + '</div>'
		+ '<table class=selbox><td><input name=ftsize' + i +' id=ftsize' + i +'-dmy value="12" maxlength=4></td><td><img src="/image/selchip.gif" id=ftsize' + i +'-btn class=selchip></td><td>pt<span class=sub2>※小数可</span></td></table></td>'
		+ '</table>'
		+ '</td></tr>'
		+ ((i == 1) ? '<tr><th>追加文字列</th><td class=boxin><input type=checkbox name=ustr2 id=ustr2><label for=ustr2>文字列<span class=sml>その</span>2</label><input type=checkbox name=ustr3 id=ustr3><label for=ustr3>文字列<span class=sml>その</span>3</label><input type=checkbox name=ustr4 id=ustr4><label for=ustr4>文字列<span class=sml>その</span>4</label><input type=checkbox name=ustr5 id=ustr5><label for=ustr5>文字列<span class=sml>その</span>5</label></td></tr>' : '')
		+ '</table>'
		+ '<div id=detail' + i +'box class=detail>'
		+ '<table>'
		+ '<tr><th>文書方向</th><td>'
		+ '<table class=nopad><td><input name=direction' + i +' value="breadth" id=direction' + i +'-dmy class=dmy readonly>'
		+ '<div id=direction' + i +'-sel class=sel><div lang=breadth class=opt-out>横書き</div><div lang=length class=opt-out>縦書き</div></div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=direction' + i +'-left class=selleft><img src="/image/selcov.gif" id=direction' + i +'-cov class=selcov></td><td><div id=direction' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=direction' + i +'-btn class=selchip></td></table>'
		+ '</td><td class=sub3>文字間隔</td><td class=sub7>'
		+ '<input name=space' + i +' value=1 id=space' + i +'-dmy class=dmy readonly>'
		+ '<div id=space' + i +'-sel class=sel>' + printOption(-5, 15, 1, 1) + '</div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=space' + i +'-left class=selleft><img src="/image/selcov.gif" id=space' + i +'-cov class=selcov></td><td><div id=space' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=space' + i +'-btn class=selchip></td></table>'
		+ '</td></table>'
		+ '</td></tr>'
		+ '<tr><th>縁取り</th><td>'
		+ '<table class=nopad><td>線太さ</td><td class=sub7>'
		+ '<input name=bdrwid' + i +' value=0 id=bdrwid' + i +'-dmy class=dmy readonly>'
		+ '<div id=bdrwid' + i +'-sel class=sel>' + printOption(0, 10, 1, 1) + '</div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=bdrwid' + i +'-left class=selleft><img src="/image/selcov.gif" id=bdrwid' + i +'-cov class=selcov></td><td><div id=bdrwid' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=bdrwid' + i +'-btn class=selchip></td></table>'
		+ '</td>'
		+ '<td><span class=sub3>枠線色 #<input name=bdrcol' + i +' maxlength=6 class=color></span><img src="/image/palette.gif" align=absmiddle id=bdrcol' + i +' class=pltbtn></span></td>'
		+ '</table>'
		+ '</td></tr>'
		+ '<tr><th>3D加工</th><td>'
		+ '<table class=nopad>'
		+ '<td>横方向</td><td class=sub7>'
		+ '<input name=sdwX' + i +' value=0 id=sdwX' + i +'-dmy class=dmy readonly>'
		+ '<div id=sdwX' + i +'-sel class=sel>' + printOption(-15, 15, 1, 1) + '</div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=sdwX' + i +'-left class=selleft><img src="/image/selcov.gif" id=sdwX' + i +'-cov class=selcov></td><td><div id=sdwX' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=sdwX' + i +'-btn class=selchip></td></table>'
		+ '</td>'
		+ '<td><span class=sub3>縦方向</span></td><td class=sub7>'
		+ '<input name=sdwY' + i +' value=0 id=sdwY' + i +'-dmy class=dmy readonly>'
		+ '<div id=sdwY' + i +'-sel class=sel>' + printOption(-15, 15, 1, 1) + '</div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=sdwY' + i +'-left class=selleft><img src="/image/selcov.gif" id=sdwY' + i +'-cov class=selcov></td><td><div id=sdwY' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=sdwY' + i +'-btn class=selchip></td></table>'
		+ '</td>'
		+ '<td><span class=sub3>陰影色 #<input name=sdwcol' + i +' maxlength=6 class=color></span><img src="/image/palette.gif" align=absmiddle id=sdwcol' + i +' class=pltbtn></span><span class=sub7>※影色未記入→自動設定</span></td>'
		+ '</table>'
		+ '</td></tr>'
		+ '<tr><th>配置設定</th><td>'
		+ '<table class=nopad>'
		+ '<td>横方向</td><td class=sub7>'
		+ '<input name=align' + i +' value=1 id=align' + i +'-dmy class=dmy readonly>'
		+ '<div id=align' + i +'-sel class=sel><div lang=0 class=opt-out>左揃え</div><div lang=1 class=opt-out>中揃え</div><div lang=2 class=opt-out>右揃え</div></div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=align' + i +'-left class=selleft><img src="/image/selcov.gif" id=align' + i +'-cov class=selcov></td><td><div id=align' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=align' + i +'-btn class=selchip></td></table>'
		+ '</td>'
		+ '<td><span class=sub3>縦方向</span></td><td class=sub7>'
		+ '<input name=valign' + i +' value=1 id=valign' + i +'-dmy class=dmy readonly>'
		+ '<div id=valign' + i +'-sel class=sel><div lang=0 class=opt-out>左揃え</div><div lang=1 class=opt-out>中揃え</div><div lang=2 class=opt-out>右揃え</div></div>'
		+ '<table class=selbox><td><img src="/image/selleft.gif" id=valign' + i +'-left class=selleft><img src="/image/selcov.gif" id=valign' + i +'-cov class=selcov></td><td><div id=valign' + i +'-in class=in></div></td><td><img src="/image/selchip.gif" id=valign' + i +'-btn class=selchip></td></table>'
		+ '</td>'
		+ '</table>'
		+ '</td></tr>'
		+ '<tr><th>余白調整</th><td>'
		+ '<table class=nopad>'
		+ '<td>横方向</td><td class=sub7>'
		+ '<div id=hspace' + i +'-sel class=sel>' + printOption(-100, -10, 10, 1) + printOption(-9, 0, 1, 1) + printOption(1, 9, 1, 1) + printOption(10, 100, 10, 1) + '</div>'
		+ '<table class=selbox><td><input name=hspace' + i +' id=hspace' + i +'-dmy value=0 maxlength=5></td><td><img src="/image/selchip.gif" id=hspace' + i +'-btn class=selchip></td></table>'
		+ '<td>px</td></td>'
		+ '<td><span class=sub3>縦方向</span></td><td class=sub7>'
		+ '<div id=vspace' + i +'-sel class=sel>' + printOption(-100, -10, 10, 1) + printOption(-9, 0, 1, 1) + printOption(1, 9, 1, 1) + printOption(10, 100, 10, 1) + '</div>'
		+ '<table class=selbox><td><input name=vspace' + i +' id=vspace' + i +'-dmy value=0 maxlength=5></td><td><img src="/image/selchip.gif" id=vspace' + i +'-btn class=selchip></td></table>'
		+ '</td><td>px</td><td><span class=sub2>※揃えた位置からの値（マイナス値も設定可）</span></td>'
		+ '</table>'
		+ '</td></tr>'
		+ '</table>'
		+ '</div>'
		+ '</dd>'
		+ '</dl>';
		document.write(buf);
	}
}

function sysInit() {

	scr = document.getElementById("overlay");
	prvwin = document.getElementById("prvfr");
	dlgwin = document.getElementById("dlgfr");
	pgrwin = document.getElementById("pgrfr");
	reswin = document.getElementById("resfr");
	palette = document.getElementById("plt");
	prvin = document.getElementById("prvfrinner");
	outer = document.getElementById("winout");
	midder = document.getElementById("winmid");
	inner = document.getElementById("winin");
	tbar = document.getElementById("titlebar");
	almsg = document.getElementById("msg");
	pbar = document.getElementById("pgrbar");
	pper = document.getElementById("pgrper");
	tbtn = document.getElementById("winbtn");
	tbtn2 = document.getElementById("winbtn2");
	form = document.getElementById("in");

	form.onsubmit = function() {
		if(focusConf) imConf();
		else make();
		return false;
	}

	document.onmousemove = function(e) {
		cursorX = parseInt((document.all) ? event.clientX + document.body.scrollLeft : e.pageX);
		cursorY = parseInt((document.all) ? event.clientY + document.body.scrollTop : e.pageY);
	}

	imbtn = new Array("smpprv", "imconf", "srcprv", "srcclr", "makebtn");
	for(i in imbtn) {
		document.getElementById(imbtn[i]).onmouseover = function() {
			this.style[cmd] = (cmd == 'filter') ? "alpha(opacity=100)" : 1;
		}
		document.getElementById(imbtn[i]).onmouseout = function() {
			this.style.top = "0px";
			this.style.left = "0px";
			this.style[cmd] = (cmd == 'filter') ? "alpha(opacity=60)" : 0.6;
		}
		document.getElementById(imbtn[i]).onmousedown = function() {
			this.style.top = "1px";
			this.style.left = "1px";
			return false;
		}
		document.getElementById(imbtn[i]).onmouseup = function() {
			this.style.top = "0px";
			this.style.left = "0px";
		}
		document.getElementById(imbtn[i]).onclick = function() {
			(this.id == "smpprv") ? prvSmp("base")
			 : (this.id == "srcprv") ? prvSmp("src")
			 : (this.id == "imconf") ? setTimeout("imConf()", 20)
			 : (this.id == "srcclr") ? srcClr()
			 : null;
		}
	}

	document.getElementById("imurl").onfocus = function() {
		focusConf = 1;
	}
	document.getElementById("imurl").onblur = function() {
		focusConf = 0;
	}

	for(i = 1; i <= 5; i ++) {
		document.getElementById("detail" + i).onclick = detailOpen;
		if(i == 1) continue;
		document.getElementById("ustr" + i).onclick = addString;
	}

	tbtn.onmouseover = function() {
		tbtn.src = (tbtn.src == closeOff1.src) ? closeOn1.src : closeOn2.src;
	}
	tbtn.onmouseout = function() {
		tbtn.src = (tbtn.src == closeOn1.src) ? closeOff1.src : closeOff2.src;
	}
	tbtn.onclick = function() {
		overLay("close");
	}

	tbtn2.onmouseover = function() {
		tbtn2.src = closeOn1.src;
	}
	tbtn2.onmouseout = function() {
		tbtn2.src = closeOff1.src;
	}
	tbtn2.onclick = function() {
		cc(0);
	}

	document.getElementById("close").onclick = function() {
		overLay("close");
	}

	im = document.getElementsByTagName("img");
	for(i = 0; i < im.length; i ++) {
		if(im[i].className == "pltbtn"){
			im[i].onclick = function() {
				pltOpen(this);
			}
			im[i].onmouseover = function() {
				this.style[cmd] = (cmd == 'filter') ? "alpha(opacity=100)" : 1;
			}
			im[i].onmousedown = function() {
				this.style.top = "1px";
				this.style.left = "1px";
				form.elements[this.id].focus();
				return false;
			}
			im[i].onmouseup = function() {
				this.style.top = "0px";
				this.style.left = "0px";
			}
			im[i].onmouseout = function() {
				this.style.top = "0px";
				this.style.left = "0px";
				this.style[cmd] = (cmd == 'filter') ? "alpha(opacity=60)" : 0.6;
			}
		}
		if(im[i].className.match(/^sel(chip|cov|left)$/)) {
			im[i].onmouseover = function() {
				document.getElementById(this.id.split("-")[0] + "-btn").style[cmd] = (cmd == 'filter') ? "alpha(opacity=100)" : 1;
			}
			im[i].onmousedown = function() {
				document.getElementById(this.id.split("-")[0] + "-btn").style.top = "1px";
				selClose(this);
				lock = 1;
				selOpen(this);
				return false;
			}
			im[i].onmouseup = function() {
				document.getElementById(this.id.split("-")[0] + "-btn").style.top = "0px";
				lock = 0;
			}
			im[i].onmouseout = function() {
				document.getElementById(this.id.split("-")[0] + "-btn").style.top = "0px";
				lock = 0;
				document.getElementById(this.id.split("-")[0] + "-btn").style[cmd] = (cmd == 'filter') ? "alpha(opacity=60)" : 0.6;
			}
		}
	}

	window.onresize = function() {
		next = function() {
			getSelfSize();
			scr.style.width = (selfW == maxX) ? "100%" : maxX + "px";
			scr.style.height = (selfH == maxY) ? "100%" : maxY + "px";
		}
		getSelfSize();
		scr.style.width = selfW + "px";
		scr.style.height = selfH + "px";
		setTimeout(next, 0);
		chLayout();
	}

	selbox = new Array();
	div = document.getElementsByTagName("div");
	for(i = 0; i < div.length; i ++) {
		if(div[i].className.match(/^opt-/)) {
			div[i].onmouseover = function() {
				optClassChange(this);
				lock = 1;
			}
			div[i].onmouseout = function() {
				optClassChange(this);
				lock = 0;
			}
			div[i].onmouseup = function() {
				inval(this);
			}
			n = div[i].parentNode.id.split("-")[0];
			if(form.elements[n] && document.getElementById(n + "-in") && form.elements[n].value == div[i].lang)
				document.getElementById(n + "-in").innerHTML = "<span>" + div[i].innerHTML + "</span>";
		}
		if(div[i].id.match(/^(.+)-sel$/)){
			document.getElementById(RegExp.$1 + "-dmy").onblur = function() {
				setTimeout("selClose(0)" ,0);
			}
			selbox = selbox.concat(div[i]);
			if(safari || document.all) {
				div[i].onmousedown = function() {
					if(this.getElementsByTagName("div").length > optMaxLine) {
						lock = 1;
						form.elements[n + "-dmy"].focus();
					}
				}
				div[i].onmouseout = function() {
					if(this.getElementsByTagName("div").length > optMaxLine) {
						lock = 0;
						form.elements[n + "-dmy"].focus();
						bodyFixed = function() {
							document.body.style.overflowY = "scroll";
							document.body.style.marginRight = "0px";
						}
						FX = setTimeout("bodyFixed()", 0);
					}
				}
				div[i].onmouseover = function() {
					if(this.getElementsByTagName("div").length > optMaxLine) {
						clearTimeout(FX);
						document.body.style.overflowY = "hidden";
						document.body.style.marginRight = iescrWid + "px";
					}
				}
			}
		}
	}

//	form.reset();
	baseChange();
	modeChange();
	selImInit();
	ftChange();
	detailOpen();
	addString();
	outputOption();
	init();
}

onload = sysInit;