try {
    window.addEventListener("load",initialize,false);
} catch(e) {
    window.attachEvent("onload",initialize);
}

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g, '');
}


var form_data = [
		 // inbox
		 // color
		 {
		     "crfunc" : crfunc1,
		     "getfunc" : getfunc1,
		     "box" : 1,
		     "setsumei" : "color(前景色、文字の色)を指定します。",
		     "params" : [
				 "color",
				 "inbox-color"
				 ]
		 }
		 // background-color
		 ,{
		     "crfunc" : crfunc1,
		     "getfunc" : getfunc1,
		     "box" : 1,
		     "setsumei" : "background-color(背景色)を指定します。",
		     "params" : [
				 "background-color",
				 "inbox-background-color"
				 ]
		 }
		 // margin
		 ,{
		     "crfunc" : crfunc1,
		     "getfunc" : getfunc1,
		     "box" : 1,
		     "setsumei" : "marginの値を指定します。",
		     "params" : [
				 "margin",
				 "inbox-margin"
				 ]
		 }
		 // padding
		 ,{
		     "crfunc" : crfunc1,
		     "getfunc" : getfunc1,
		     "box" : 1,
		     "setsumei" : "paddingの値を指定します。",
		     "params" : [
				 "padding",
				 "inbox-padding"
				 ]
		 }
		 // border
		 ,{
		     "crfunc" : crfunc1,
		     "getfunc" : getfunc1,
		     "box" : 1,
		     "setsumei" : "border(枠)の値を指定します。<br />幅、種類、色の中からいくつかを指定します。",
		     "params" : [
				 "border",
				 "inbox-border"
				 ]
		 }
		 ];

// checkbox property value
function crfunc1(tr,params) {
    var td = document.createElement("td");
    td.setAttribute("valign","top");
    tr.appendChild(td);

    td.appendChild(document.createTextNode(params[0]+":"));

    var elm = document.createElement("input");
    elm.setAttribute("type","text");
    elm.setAttribute("id",params[1]+"_input");
    td.appendChild(elm);

    td.appendChild(document.createTextNode(";"));

    td.appendChild(document.createElement("br"));
}
function getfunc1(params) {
    var s = "";
    var elm = document.getElementById(params[1]+"_input");
    var v = elm.value.trim();
    if ( v.length > 0 ) {
	s = params[0] + ":" + v + ";";
    }
    return s;
}

function initialize() {
    // 入力フォームの作成
    var f = document.getElementById("inputform");
    var t = document.createElement("table");
    t.setAttribute("border","1");
    f.appendChild(t);
    var tr = document.createElement("tr");
    t.appendChild(tr);
    var td = document.createElement("th");
    tr.appendChild(td);
    td.appendChild(document.createTextNode("プロパティ"));
    td = document.createElement("th");
    tr.appendChild(td);
    td.appendChild(document.createTextNode("説明"));
    for (idx in form_data) {
	// む、EmacsのJavaモードでfor eachだと字下げがおかしくなる
	tr = document.createElement("tr");
	t.appendChild(tr);
	form_data[idx].crfunc(tr,form_data[idx].params);
	td = document.createElement("td");
	td.setAttribute("style","white-space:nowrap;");
	td.setAttribute("valign","top");
	tr.appendChild(td);
	td.innerHTML = form_data[idx].setsumei;
    }

    // 実行ボタン
    var elm = document.createElement("input");
    elm.setAttribute("type","button");
    elm.setAttribute("id","accept_button");
    elm.setAttribute("value","実行");
    elm.onclick = acceptData;
    f.appendChild(elm);
}

function acceptData() {
    var a = new Array(2);
    a[0] = new Array(); // outbox
    a[1] = new Array(); // inbox
    for (idx in form_data) {
	var bidx = form_data[idx].box;
	a[bidx][a[bidx].length] = form_data[idx].getfunc(form_data[idx].params);
    }

    var ss = "";
    /*
    if (a[0].length > 0) {
	var ob = document.getElementById("outbox");
	ob.setAttribute("style",a[0].join(''));
	ss += "div#outbox {<br />";
	ss += a[0].join('<br />') + "<br />";
	ss += "}";
    }
    */
    if (a[1].length > 0) {
	var ib = document.getElementById("inbox");
	ib.setAttribute("style",a[1].join(''));
	if ( ss.length > 0 ) {
	    ss += "<br />";
	}
	ss += "div#inbox {<br />";
	ss += a[1].join('<br />') + "<br />";
	ss += "}";
    }

    var c = document.getElementById("css_text");
    c.innerHTML = ss;
}