<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">
  <xi:include href="layout.html" />
  <xi:include href="macros.html" />
<?python
  typename = {1:"フリー入力(１行)", 2:"フリー入力(複数行)", 3:"単一選択(ラジオボタン)", 4:"単一選択(コンボボックス)",5:"日付",6:"式",7:"Template"}
  typedisplay = {0:"表示",1:"非表示"}
?>

  <head>
    <title>リスト構成明細編集</title>
	<script type="text/javascript">
		function eventHandler(actionName) {
			f = document.forms['elementdetail'];
			document.getElementById('actionName').value = actionName;
			if(actionName == "update"){
				var len = document.getElementById('length').value;
				if(!requireCheck(document.getElementById('element_id').value)){
					alert("カラムIDが未入力です。");
					return false;
				} else if(!requireCheck(document.getElementById('element_name').value)){
					alert("カラム名が未入力です。");
					return false;
				}

				if(!checkLength(len)){
					alert("長さが不正な入力値です。");
					return false;
				}

				if(!confirm('登録します。よろしいですか？')){
					return false;
				}
				f.action = "${href.listmanage('editelementdetail')}";
			} else if(actionName == "cancel"){
				f.action = "${href.listmanage('editelement')}";
			}
			f.submit();
		}

		function controlField(type){
			var elm_detail = document.getElementById('element_detail');
			var elm_length = document.getElementById('length');
			var elm_default = document.getElementById('default_value');
			if(type=="1" || type=="2"){
				elm_detail.value = '';
				elm_detail.readOnly = true;
				elm_detail.style.backgroundColor='#E0E0E0';
				elm_length.readOnly = false;
				elm_length.style.backgroundColor='#FFFFFF';
				elm_default.readOnly = false;
				elm_default.style.backgroundColor='#FFFFFF';
			} else if(type=="3" || type=="4" || type=="7"){
				elm_detail.readOnly=false;
				elm_detail.style.backgroundColor='#FFFFFF';
				elm_length.value = '';
				elm_length.readOnly = true;
				elm_length.style.backgroundColor='#E0E0E0';
				elm_default.readOnly = false;
				elm_default.style.backgroundColor='#FFFFFF';
			} else if(type=="6"){
				elm_detail.readOnly=false;
				elm_detail.style.backgroundColor='#FFFFFF';
				elm_length.value = '';
				elm_length.readOnly = true;
				elm_length.style.backgroundColor='#E0E0E0';
				elm_default.readOnly = true;
				elm_default.style.backgroundColor='#E0E0E0';
			} else {
				elm_detail.value = '';
				elm_detail.readOnly = true;
				elm_detail.style.backgroundColor='#E0E0E0';
				elm_length.value = '';
				elm_length.readOnly = true;
				elm_length.style.backgroundColor='#E0E0E0';
				elm_default.value = '';
				elm_default.readOnly = true;
				elm_default.style.backgroundColor='#E0E0E0';
			}
		}
	</script>
  </head>

  <body>
	<py:if test="error!=''">
		<div>
			<h2>Error:</h2>
			<p class="error">${error}</p>
		</div>
	</py:if>
	<py:if test="message!=''">
		<div>
			<h2>Result:</h2>
			<p class="message">${message}</p>
		</div>
	</py:if>
	<form name="elementdetail" action="" method="post">
	<div>
		<table width="90%"  class="list">
			<tr>
				<th>カラムID</th><td><input type="text" name="element_id" id="element_id"  size="70"  value="${element['element_id']}"/></td>
			</tr>
			<tr>
				<th>カラム名</th><td><input type="text" name="element_name" id="element_name"  size="70"  value="${element['element_name']}"/></td>
			</tr>
			<tr>
				<th>カラムタイプ</th><td><select name="element_type" id="element_type"  onChange="javascript:controlField(this.value);">
					<option py:for="t in [1,2,3,4,5,6,7]" value="$t" selected="${t==int(element['element_type']) or None}">${typename[t]}</option>
				</select>
				</td>
			</tr>
			<tr>
<?python
	readOnly=None
	value = element['element_detail']
	if value == 'None':
		value =''

	if element['element_type']==1 or element['element_type']==2:
		readOnly='true'
?>
				<th>明細</th><td><textarea name="element_detail" id="element_detail" rows="4" cols="80" readOnly='${readOnly}'>${value}</textarea></td>
			</tr>
			<tr>
				<th>デフォルト値</th><td><input type="text" name="default_value" id="default_value" size="70"  value="${element['default_value']}"/></td>
			</tr>
			<tr>
				<th>長さ</th><td><input type="text" name="length" id="length"  size="70"  value="${element['length']}"/></td>
			</tr>
			<tr>
				<th>表示/非表示</th><td><select name="hidden" id="hidden" >
					<option py:for="h in [0,1]" value="$h" selected="${h==int(element['hidden']) or None}">${typedisplay[h]}</option>
				</select>
				</td>
			</tr>
		</table>
	</div>
	<div style="padding-left:40px">
		<input type="button" name="update" value="登録"  onclick="eventHandler('update');" />
		<input type="button" name="cancel" value="キャンセル"  onclick="eventHandler('cancel');" />
		<input type="hidden" name="idx"/>
		<input type="hidden" name="list_id" value="${list_id}" />
		<input type="hidden" id="actionName"  name="actionName"/>
	</div>
	</form>
<script type="text/javascript">
window.onload = function(){
	var elm_id = document.getElementById('element_id');
	if(elm_id.value != ""){
		elm_id.readOnly = true;
		elm_id.style.backgroundColor='#E0E0E0';
	}
	controlField(document.getElementById('element_type').value);

}
</script>
  </body>
</html>
