Ext.onReady(function(){
	
	var yy=document.getElementById("year").childNodes[0].nodeValue;
	if(yy == 1){
		f='floatTable.xml?'+ new Date().getTime();
		yy='all';
	}else{
		f=yy+'_floatTable.xml?'+ new Date().getTime();
	}
	
	// create the Data Store
	var store = new Ext.data.Store({
		// load using HTTP
		url: f,
		
		// the return will be XML, so lets set up a reader
		reader: new Ext.data.XmlReader({
			// records will have an "Item" tag
			record: 'float',
			id: 'wmo',
			totalRecords: '@total'
			}, [
				'wmo','status','profid','cycle',
				'lat','lon','date','park_pres','prof_pres',
				'dep_lat','dep_lon','dep_date','dep_plat'
		])
	});
	store.setDefaultSort('dep_date','desc');
	
	// 中間ファイルへのリンク
	function renderWMO(value, p, record){
		var url = "./all-in.php?wmo="+value+"&id=0";
		var lang = document.getElementById("lang1");
		if(lang){
			var lang = lang.childNodes[0].nodeValue;
			if(lang==0){
				var url="./all-in_e.php?wmo="+value+"&id=0";
			}
		}
		return String.format('<a href="{0}" target="top">{1}</a>',url,value);
	}
	// latitude nan
	function renderLat(value, p, record){
		var lat=value;
		if(lat==-99.999){
			return '-';
		}else{
			return lat;
		}
	}
	// latitude nan
	function renderLon(value, p, record){
		var lon=value;
		if(lon==-999.999){
			return '-';
		}else{
			return lon;
		}
	}
	
	// create the grid
	var grid = new Ext.grid.GridPanel({
		store: store,
		columns: [
			{header: "WMO", width: 50, dataIndex: 'wmo', sortable: true, renderer: renderWMO, align:'center'},
			{header: "Profile<br/>pressure", width: 55, dataIndex: 'prof_pres', sortable: true},
			{header: "Parking<br/>pressure<br/>/ density", width: 55, dataIndex: 'park_pres', sortable: true, hidden:true},
			{header: "Cycle(day)", width: 50, dataIndex: 'cycle', sortable: true},
			{header: "Last date", width: 65, dataIndex: 'date', sortable: true},
			{header: "Last<br/>latitude", width: 60, dataIndex: 'lat', sortable: true, renderer: renderLat},
			{header: "Last<br/>longitude", width: 60, dataIndex: 'lon', sortable: true, renderer: renderLon},
			{header: "Status", width: 45, dataIndex: 'status', sortable: true},
			{header: "Deploy date", width: 65, dataIndex: 'dep_date', sortable: true},
			{header: "Deploy<br/>latitude", width: 60, dataIndex: 'dep_lat', sortable: true, renderer: renderLat},
			{header: "Deploy<br/>longitude", width: 60, dataIndex: 'dep_lon', sortable: true, renderer: renderLon},
			{header: "Num. of<br/>Observation", width: 65, dataIndex: 'profid', sortable: true, hidden:true},
			{header: "Deploy<br/>Ship name", width: 125, dataIndex: 'dep_plat', sortable: true, hidden:true}
		],
		sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
		viewConfig: {
			forceFit: true
		},
		height:450,
		stripeRows:true,
		loadMask: true,
		split: true,
		region: 'north'
	});
	
	// define a template to use for the detail view
	var bookTplMarkup = [
		'<table id="grid_panel">',
		'<tr><th>WMO</th><td>{wmo}</td></tr>',
		'<tr><th>Deploy ship</th><td>{dep_plat}</td></tr>',
		'<tr><th>dQC Information</th><td><a href="http://www.jamstec.go.jp/ARGORC/float_inf/float_menu.php?wmo={wmo}" target="_blank">GO</a></td></tr>',
		'<tr><th>netCDF</th><td><a href="ftp://ftp2.jamstec.go.jp/pub/argo/ifremer/dac/jma/{wmo}" target="_blank">GO</a></td></tr>',
		'</table>'
	];
	var bookTpl = new Ext.Template(bookTplMarkup);
	
	var ct = new Ext.Panel({
		renderTo: 'float_table',
		frame: true,
		title: yy,
		width: 920,
		height: 600,
		layout: 'border',
		items: [
			grid,
			{
				id: 'detailPanel',
				region: 'center',
				bodyStyle: {
					background: '#ffffff',
					padding: '15px',
					fontSize: '14px'
				},
				html: 'Please select a column to see float information.'
			}
		]
	})
	grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
		var detailPanel = Ext.getCmp('detailPanel');
		bookTpl.overwrite(detailPanel.body, r.data);
	});
	
	store.load();
});