<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root
	xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:og="hybs-taglib.tld"
	version="2.0">

<jsp:directive.page language="java" contentType="text/html; charset=UTF-8" />
<og:head headType="result" useJQUI="true" >
	<!-- 2015/08/08 K.H ID属性(#CustomData) を、class属性(.MonitorTbl) に変更 -->
	<style type="text/css">
		/* モニターテーブルの幅 */
		.MonitorTbl td { width : 20px; }

		/* モニターを移動させるための設定 */
		.boxID { position: absolute; }

		/* モニターが移動できる範囲の設定。背景に、LOC_GRP 単位に切り替える。 */
		.factoryLayout {
			height : 100%;
			width  : 100%;
			background-size  : 800px;
<og:text>	background-image : url( image/{@LOC_GRP}.png );	</og:text>
			background-repeat: no-repeat;
		}
	</style>

	<!-- モニターを移動させる JavaScript本体。jQueryのdraggableで、位置情報をentry.jsp に投げてMEMOに書き込んでいるだけ -->
	<script type="text/javascript">
		$(function(){
			$(".boxID").draggable( {
				containment: 'parent',			// 親範囲の中のみで移動
				opacity: 0.5,					// 移動中のオブジェクトの透明度
				grid: [10, 10],					// 移動時のグリッド
				stop: function ( ev, ui ) {		// 移動終了時の callメソッド
			//		alert( $(this).attr("id") + "," + Math.round($(this).offset().left) + "," + Math.round($(this).offset().top) );
					$.ajax({
							url		: 'entry.jsp',
							data	: {	UNIQ:   $(this).attr("id") ,
										LOC_COL: Math.round($(this).offset().left) ,
										LOC_ROW: Math.round($(this).offset().top) ,
									  } ,
							async	: true,
							type	: 'GET',
							dataType: 'html' ,
					});
				 }
			 } );
		});
	</script>

</og:head>

<jsp:directive.include file="/jsp/custom/none_info.jsp" />
<og:comment
	system	= "GF:エンジンサンプル"
	pgid	= "GF7221"
	title	= "配置図/座席表配置"
	date	= "2015/09/14"
	author	= "K.Hasegawa"
	text	= ""
	version	= "001"
/>

<!-- ワーニングメッセージです。ここでは、登録完了のメッセージを表示します。
<og:errorMessage command="{@command}" clear="{@clear}" displayMsg="{@displayMsg}" />
 -->
<!-- 入力チェック -->
<og:columnCheck
	command   = "{@command}"
/>

<!-- 取り消しボタンが押された時に必要です。 -->
<og:entry command="{@command}" />

<!-- DB検索 SQL文記述 debug="true" でSQL文を確認できます。-->
<og:query command="{@command}" debug="{@debug}" maxRowCount="{@maxRowCount}">
		SELECT SYSTEM_ID , LOC_GRP, LOC_COL, LOC_ROW, NAME_JA, LABEL_NAME, BIKO, ICON, FGJ, UNIQ
		FROM GE18
	<og:where>
		<og:and value="SYSTEM_ID	=    '{@SYSTEM_ID}'"	/>
		<og:and value="LOC_GRP		like '{@LOC_GRP}'"		/>
		<og:and value="NAME_JA		like '{@NAME_JA}'"		/>
		<og:and value="LABEL_NAME	like '{@LABEL_NAME}'"	/>
		<og:and value="BIKO			like '{@BIKO}'"			/>
	</og:where>
		ORDER BY SYSTEM_ID, LOC_GRP, NAME_JA
</og:query>

<og:viewMarker command="{@command}">
	<!-- 決め打ちに近い。LOC_GRP 単位にフォルダを作成してアイコンを保管している -->
	<og:columnMarker column="ICON"><img src="image/[LOC_GRP]/[ICON]" width="50px" /></og:columnMarker>
</og:viewMarker>
<br/>

<!-- DB検索結果を表示させます。 -->
<!-- checked="true" で、チェック済みの状態で表示できます。 -->
<div class="factoryLayout">
	<og:view
		viewFormType = "CustomData"
		command		 = "{@command}"
		writable	 = "false"
		useScrollBar = "false"
		numberType	 = "delete"
		bgColorCycle = "1"
		useHilightRow= "false"
	>
		<og:thead rowspan="1"><!-- --></og:thead>
		<og:tbody rowspan="1" >
		  <!-- モニターを移動させるための設定。style属性に、位置を指定。 -->
		  <div class="boxID" id="[UNIQ]" style="left:[LOC_COL]px; top:[LOC_ROW]px;" >
			<span class="MonitorTbl">[ICON]</span>
		  </div>
	  </og:tbody>
	</og:view>

	<div id="imgTag" class="boxID" style="left:640px; top:500px;" ><!-- -->
		<div id="imgBody"><!-- --></div>
	</div>
</div>

<jsp:directive.include file="/jsp/common/htmlend.jsp" />
</jsp:root>
