
var _cmnParts =new function(){
	var formatStr = {
		4:"YYYY/MM/DD HH:MI:SS",
		5:"YYYY/MM/DD",
		6:"HH:MI:SS"
	};

	var txtValidate = function(){
		if( this.value == "" )return ;

		blValid = _tableData.dataValidation( this.value , this.dataset.type );

		if( ! blValid ){
			var colName = this.dataset.colName;

			var msg = _msg.getMessage( "cmmn_W0" );
			var mainMsgObj =  msg.main ;
			if( this.dataset.type == 1 ){
				mainMsgObj.discription = msg.sub.i;
			}else if( this.dataset.type == 2 ){
				mainMsgObj.discription = msg.sub.r;
			}else if( _U.find( this.dataset.type , [ 4 , 5 , 6 ] ) != -1 ){
				mainMsgObj.discription = msg.sub.t;
			}

			mainMsgObj.discription = mainMsgObj.discription.replace( new RegExp( "#0#" , "g") , colName )
			mainMsgObj.discription = mainMsgObj.discription.replace( new RegExp( "#1#" , "g") , this.value )
			mainMsgObj.discription = mainMsgObj.discription.replace( new RegExp( "#2#" , "g") , formatStr[ this.dataset.type ] )
			var targ = this;

			_disp.showMessage( mainMsgObj , function(){ targ.focus(); });
		};

	};
	var getMyValue = function(){
/*		if( _U.find( this.dataset.type , [ 4 , 5 , 6 ] == -1 ){
			return this.value;
		};
		if( this.value == "" ){
			return "";
		};
*/
		return _tableData._dataConv4ReqStr( this.value , this.dataset.type );
	};
	var hideSubTableView = function(){
		var mainInner = _D.par( _D.par( this ) );
		mainInner.dataset.disp = "false";
	};
	var tableWrapOnScroll = function(){
		var topTbl = _D.fEC( this );
		topTbl.style.top =  this.scrollTop +"px";
	};
	var showSubTableView = function(){
		var mainInner = _D.par( this );
		mainInner.dataset.disp = "true";

		var tblWrap = _D.fEC( mainInner.children[1] );
		_D.lEC( tblWrap ).style.top = _D.fEC( tblWrap ).clientHeight + "px";
	};
	var nodeDef ={
		mainInner :{attr:{
			tagname:"div",
			className:"_cmnprt_sub_table_view_"
		},children:[
			{attr:{
				tagname:"h1",
				className:"_titles_ _cmnprt_h1_"
			},children:[
				{attr:{
					tagname:"div",
					className:"_cmnprt_div_tname_"
				},children:[
				]},
				{attr:{
					tagname:"input",
					type :"button",
					value:"hidden",
					onclick : hideSubTableView,
					className:"_btn_in_title_ _cmnprt_btn_hidden_"
				}}
			]},

			{attr:{
				tagname:"div",
				className:"_cmnprt_table_area_"
			},children:[
				{attr:{
					tagname:"div",
					className:"_vh_sc_auto_ _cmnprt_table_area_inner_",
					onscroll: tableWrapOnScroll
				},children:[
					{attr:{
						tagname:"table",
						className:"_cmnprt_table_top_"
					},children:[
						{attr:{
							tagname:"thead",
							className:"_cmnprt_thead_top_"
						},children:[
							{attr:{
								tagname:"tr"
							}}
						]}
					]},
					{attr:{
						tagname:"table",
						className:"_cmnprt_table_body_"
					},children:[
						{attr:{
							tagname:"tbody",
							id:"_cmnprt_tbody_body"
						},children:[
						]}
					]}
				]}
			]},
			{attr:{
				tagname:"button",
				value:"",
				onclick : showSubTableView,
				className:"_cmnprt_btn_show_"
			}}
		]},
		tr:{attr:{
			tagname:"tr"
		}},
		th:{attr:{
			tagname:"th"
		},children:[
			{attr:{
				tagname:"span",
				className:"_default_width_ _cmnprt_head_inner_"
			}}
		]},
		td:{attr:{
			tagname:"td"
		},children:[
			{attr:{
				tagname:"span",
				className:"_default_width_ _cmnprt_body_inner_"
			}}
		]}
	};
	var getCssClass = function( colId ){
		return "_cmn_prt_col_" + colId + "_";
	};
	var createSubTable = function( sbTblData ){
		var outerDiv = _D.cN(  nodeDef.mainInner );

		var divTName = _D.fEC( _D.fEC( outerDiv ) );
		var tblTop = _D.fEC( _D.fEC( outerDiv.children[ 1 ] ) );
		var trTop = _D.fEC( _D.fEC( tblTop ) );
		var tblBody = _D.lEC( _D.fEC( outerDiv.children[ 1 ] ) );
		var tbodyBody = _D.fEC( tblBody );
		var btnShow = _D.lEC( outerDiv );

		var tname = sbTblData.tbl.name;
		var strRelats = "";

		switch( sbTblData.rlt.type ){
			case _sysData._rltType.p:
				strRelats = "Parent";
				break;
			case _sysData._rltType.s:
				strRelats = "Sibling";
				break;
			case _sysData._rltType.c:
				strRelats = "Child";
				break;
			case _sysData._rltType.r:
				strRelats = "Relative";
				break;
		};
		var strRltCol = "";
		if( sbTblData.strRltCol ){
			strRltCol = " : " + sbTblData.strRltCol;
		};

		divTName.innerHTML = _U.htmlEscape( tname + "( " + strRelats +" )" );
		_D.par( divTName ).title = tname + "( " + strRelats + strRltCol +" )";
		btnShow.innerHTML = "show<br />";
		btnShow.innerHTML += _U.htmlEscape( tname + "( " + strRelats +" )" );
		btnShow.title = tname + "( " + strRelats + strRltCol +" )";

		//表ボディのデータは改めて_tableDataに問い合わせるので、更新は後になる。
		var funcLoadAfterTBodyAppend = function(){

			var dataTbl = _tableData._getSingleTableData( sbTblData.tbl.id );
			var aryColDatas =[];

			
			//ヘッダの出力
			for( var i = 0 ; _U.isIdx( i , sbTblData.cols ) ; i ++ ){
				var colInfo = sbTblData.cols[ i ];
				var dataIdx = _U.find( colInfo.id , dataTbl.head );
				if( dataIdx == -1 ){
					return;
				};


				var Rlt = ( _sysData._tblFind( sbTblData.rlt.cols , [{key:"tCId",value:colInfo.id }] , true )[ 0 ] );
				var isPk = ( colInfo.pk == 1 );

				//css生成
				var cssClass = getCssClass( colInfo.id );
				_D.css.del( "._cmnprt_sub_table_view_ ." + cssClass );
				_D.css.add( "._cmnprt_sub_table_view_ ." + cssClass +"{" +colInfo.css +"}");
				var ObjColData = {
					colInfo:colInfo,
					cssClass:cssClass,
					dataIdx : dataIdx,
					strTitle :""
				};


				var th = _D.aCAndCN( trTop , nodeDef.th );
				var innerTh = _D.fEC( th );

				if( Rlt ){
					th.className +=" _thead_g_";
					ObjColData.clrClass = " _tbody_w_y_";
					var myRltColName = _sysData._tblFind( sbTblData.cCols , [{key:"id",value:Rlt.myCId }] , true )[ 0 ].name ;
					var strTitle = tname + "." + colInfo.name + " = " + myRltColName;
					ObjColData.strTitle = strTitle;
					th.title = strTitle;
				}else{
					th.className +=" _thead_b_";
					ObjColData.clrClass = "";
				};
				if( isPk ){
					innerTh.dataset.after = "PK";
				};
				innerTh.innerHTML = _U.htmlEscape( colInfo.name );
				innerTh.className +=" "+cssClass;

				aryColDatas.push( ObjColData );
			};

			for( var i = 0 ; _U.isIdx( i , dataTbl.table ) ; i ++ ){
				var rowData = dataTbl.table[i];
				var tr = _D.aCAndCN( tbodyBody , nodeDef.tr );
				for( var j = 0 ; _U.isIdx( j , aryColDatas ) ; j ++ ){
					var td = _D.aCAndCN( tr , nodeDef.td );
					var tdInner = _D.fEC( td );
					td.className += " " + aryColDatas[j].clrClass
					td.title = aryColDatas[j].strTitle;
					tdInner.className += " " + aryColDatas[j].cssClass;
					var innerValue = rowData[ aryColDatas[j].dataIdx ];
					tdInner.innerHTML = _tableData._dataConv4HtmlStr( innerValue , aryColDatas[j].colInfo.type );
				};
			};
		};

		_tableData._loadSingle( funcLoadAfterTBodyAppend , { db_id :_disp.dbId , table_id : sbTblData.tbl.id } )

		outerDiv.dataset.disp = "false";

		_D.rC( outerDiv );
		return outerDiv;
	};


	//共通部品としてオブジェクトを生成し返す。
	//内部でｼｽﾃﾑ表の
	// type
	// tbl
	// col
	// opt
	// uq
	// rlt
	//を参照するので、呼び出し元でこれらを参照済みであることを前提とする。
	//これは以下の形式のオブジェクトを返す。
	//	{
	//		inputElm:inputOrSelectElement(inlineBlock),
	//		spanElm:inlineBlockElement,
	//		relatsSubTables:[ blockElement ],
	//		remarks:[ BlockElement ],
	//		btns:[ inlineBlock ],
	//	}
	//
	//inputElm,spanElmにはユーザ指定のcssが設定される。
	//relatsSubTables,remarksにはwidth:100%が設定される。
	//必要に応じて、これらのエレメントに呼び出し元からcss,style属性を追加し、処理させること。
	//
	//尚、引数のcolInfoは、ｼｽﾃﾑ表colの1行分のデータを設定すること。
	//また、呼び出しの度にcssとして、"._cmn_prt_col_[col_id]_{ * }"が再生成される。
	//これにはユーザ指定のcssが適用される。
	//
	//btnsの子要素はボタンエレメントである。
	//datasetに
	//	mycolsとしてコンマ区切りの自身の列ID
	//	targcolsとしてコンマ区切りの関連付け相手の列ID
	//	targtblとして関連付け相手の表ID
	//を持つ。
	//表示内容は表名(関連)とし、
	//title属性に詳細な関連付け情報を持つ。
	this.getParts = function( colId , colValue ){
		var myId = colId;
		var colTbl = _sysData._getData( "col" );
		var tblTbl = _sysData._getData( "tbl" );
		var colInfo = _sysData._tblFind( colTbl , [{key:"id",value:colId }] , true )[0];
		if( ! colInfo ){
			return null;
		}

		var aryTargRltsAndTable =[];


		var mayTable = colInfo.tableId;
		var myType = colInfo.type;
		var amIPk = colInfo.pk == 1;
		var myCss = colInfo.css;
		var myName = colInfo.name;
		var mayTableInfo = _sysData._tblFind( tblTbl , [{key:"id",value:mayTable }] , true )[0]

		var myCssClass = getCssClass( myId );

		var myColTbl = _sysData._tblFind( colTbl , [{key:"tableId",value:mayTable }] );


		//cssの作成
		_D.css.del( "." + myCssClass );
		_D.css.add( "." + myCssClass +"{" +myCss +"}");

		var ret ={};

		//span(表示用エレメント)の作成
		ret.spanElm = _D.cE("span");
		ret.spanElm.className = "_cmn_prts_span_ _default_width_ " + myCssClass;
		ret.spanElm.innerHTML = _U.htmlEscape( _tableData._dataConv4HtmlStr( colValue , myType ) );
		if( colValue == 0 || colValue ){
			ret.spanElm.dataset.value = colValue;
		}else{
			ret.spanElm.dataset.value = '';
		}
		//inputElm(操作用エレメント)の作成

		if( _U.find( myType , [ 7 , 8 ] ) == -1 ){
			ret.inputElm = _D.cE("input");
			ret.inputElm.type = "text";
			ret.inputElm.onchange = txtValidate;
			ret.inputElm.value = _tableData._dataConv4HtmlStr( colValue , myType );
		} else {
			ret.inputElm = _D.cE("select");
			if( myType == 7 ){
				//bool型の場合、null,true,falseを作成する。
				_D.aCAndCN( ret.inputElm , {attr:{tagname:"option",value:"0",label:""}} );
				_D.aCAndCN( ret.inputElm , {attr:{tagname:"option",value:"1",label:"true"}} );
				_D.aCAndCN( ret.inputElm , {attr:{tagname:"option",value:"-1",label:"false"}} );
				if( colValue > 0 ){
					ret.inputElm.value = 1;
				}else if(colValue < 0 ){
					ret.inputElm.value = -1;
				}else{
					ret.inputElm.value = 0;
				};

			}else{
				//select型の場合、null,optionの項目,自身の値を作成する。
				var selectAny = false;

				var opt = _D.aCAndCN( ret.inputElm , {attr:{tagname:"option",value:"",label:""}} );
				if( colValue == "" || colValue == null || colValue == undefined ){
					opt.selected = true;
					selectAny = true;
				};
				var optMyTbl = _sysData._tblFind( _sysData._getData( "opt" ) , [{key:"colId",value:myId }] );

				for( var i = 0 ; _U.isIdx( i , optMyTbl ) ; i ++ ){
					opt = _D.aCAndCN( ret.inputElm , {attr:{tagname:"option",value:optMyTbl[ i ].value ,label:optMyTbl[ i ].value }} );
					if( ! selectAny && colValue == optMyTbl[ i ].value ){
						opt.selected = true;
						selectAny = true;
					};
				};

				if( ! selectAny ){
					_D.aCAndCN( ret.inputElm , {attr:{tagname:"option",value:colValue ,label:colValue }} );
				};
			};
		};
		ret.inputElm.className = "_cmn_prts_input_ _default_width_ " + myCssClass;
		ret.inputElm.dataset.type = myType;
		ret.inputElm.dataset.colId = myId;
		ret.inputElm.getMyValue = getMyValue;
		ret.inputElm.dataset.colName = myName;


		//remark表示用エレメント配列の作成
		//btnsはリンク用ボタン配列。関連付け情報にアクセスした際に、併せて生成する。
		ret.remarks =[];
		ret.btns =[];
		var strRemark4Title = "";

		//PKおよびユニーク情報の作成
		var myUqAndPk = _sysData._getData( "uq" , _sysData._getMode.uqAndPk )[ mayTable ];
		//表にユニークもしくはPKが有る場合･･･
		if( myUqAndPk ){
			for( var i = 0 ; _U.isIdx( i , myUqAndPk ) ; i ++ ){
				var cols = myUqAndPk[ i ].cols;
				var isUq = ( _sysData._tblFind( cols , [{key:"colId",value:myId }] , true )[0] != null );
				if( ! isUq ) continue;
				var strRmk = "Unique";
				if( myUqAndPk[ i ].id == "PK" ){
					strRmk = "PK";
					if( mayTableInfo.autoID == 1 ){
						strRmk += "( auto number )";
					};
				};
				if( cols.length > 1 ){
					strRmk +="( ";
					for( var j = 0 ; _U.isIdx( j , cols ) ; j ++ ){
						if( j != 0 ){
							strRmk += " , ";
						};
						var uqColId = cols[j].colId;
						var uqColName = _sysData._tblFind( myColTbl , [{key:"id",value:uqColId }] , true )[ 0 ].name ;
						strRmk +=uqColName;

					};
					strRmk +=" )";
				};
				var spanRmk = _D.cE("div");
				spanRmk.className ="_cmn_prt_rmrk_";
				spanRmk.innerHTML =_U.htmlEscape( strRmk );
				ret.remarks.push( spanRmk );
				if( strRemark4Title != "" ){
					strRemark4Title += "\r\n";
				};
				strRemark4Title += strRmk;
			};
		};

		//入力用部品にも、リマーク情報をtitle属性で埋め込む
		ret.inputElm.title = strRemark4Title;

		var myRlts = _sysData._getData( "rlt" , _sysData._getMode.rlt )[ mayTable ];
		if( myRlts ){
			for( var i = 0 ; _U.isIdx( i , myRlts ) ; i ++ ){
				var myRlt = myRlts[i];
				var cols = myRlt.cols;
				var isRlt = ( _sysData._tblFind( cols , [{key:"myCId",value:myId }] , true )[0] != null );
				if( ! isRlt ) continue;

				var hisTable = _sysData._tblFind( tblTbl , [{key:"id",value:myRlt.table }] , true )[0]
				var hisColTbl = _sysData._tblFind( colTbl , [{key:"tableId",value:myRlt.table }] );

				var strRmk = "";


				switch( myRlt.type ){
					case _sysData._rltType.p:
						strRmk += "Parent";
						break;
					case _sysData._rltType.s:
						strRmk += "Sibling";
						break;
					case _sysData._rltType.c:
						strRmk += "Child";
						break;
					case _sysData._rltType.r:
						strRmk += "Relative";
						break;
					default:
						continue;
				};
				strRmk += " : ";
				strRmk += hisTable.name;

				var strBtn = strRmk;
				var strMyCol = "";
				var strTargCol = "";
				
				var strRmkInner = "";
				if( cols.length >= 1 ){
					strRmk +="(";
					
					for( var j = 0 ; _U.isIdx( j , cols ) ; j ++ ){
						if( j != 0 ){
							strRmkInner += " , ";
							strMyCol += ",";
							strTargCol += ",";
						};
						strMyCol += cols[j].myCId;
						strTargCol += cols[j].tCId;

						var myRltColId = cols[j].myCId;
						var hisRltColId = cols[j].tCId;
						var myRltColName = _sysData._tblFind( myColTbl , [{key:"id",value:myRltColId }] , true )[ 0 ].name ;
						var hisRltColName = _sysData._tblFind( hisColTbl , [{key:"id",value:hisRltColId }] , true )[ 0 ].name ;
						strRmkInner +=myRltColName + " = " + hisTable.name + "." + hisRltColName;
					};
					strRmk += strRmkInner + " )";
				};
				//後で親表情報を作成する時に使う。
				aryTargRltsAndTable.push({
					tbl : hisTable,
					cols : hisColTbl,
					rlt : myRlt,
					strRltCol : strRmkInner,
					cCols : myColTbl
				});

				var spanRmk = _D.cE("div");
				spanRmk.className ="_cmn_prt_rmrk_";
				spanRmk.innerHTML =_U.htmlEscape( strRmk );
				ret.remarks.push( spanRmk );


				var btnBtns = _D.cE("button");
				btnBtns.innerHTML =_U.htmlEscape( strBtn );
				btnBtns.title = strRmk;
				btnBtns.dataset.mycols = strMyCol;
				btnBtns.dataset.targcols = strTargCol;
				btnBtns.dataset.targtbl = myRlt.table;
				ret.btns.push( btnBtns );
			};
		};
		ret.relatsSubTables = [];
		for( var i = 0 ; _U.isIdx( i , aryTargRltsAndTable ) ; i ++ ){
			ret.relatsSubTables.push( createSubTable( aryTargRltsAndTable[i] ) );
		};



		return ret;
	};
}();

