Ext.onReady(function(){

	Ext.QuickTips.init();

	var store = new Ext.data.Store({
		proxy: new Ext.ux.data.PagingMemoryProxy(timeTableData),
		remoteSort: true,
		baseParams: {sort: 'itamiTime', dir: 'ASC'}, // baseParamを指定しないとページング時ソートがおかしくなる
		reader: new Ext.data.ArrayReader({
			fields: [
				{name: 'destination'},
				{name: 'airline'},
				{name: 'flightName'},
				{name: 'model'},
				{name: 'itamiTime', type: 'date'},
				{name: 'objectTime', type: 'date'},
				{name: 'type'}
			]
		})
	});

	function getQtipAttr(qtipTitle, qtipValue, qtipWidth) {
		return 'ext:qtitle="' + qtipTitle + '"' + ' ext:qwidth="' + qtipWidth + '"' + ' ext:qtip="' + qtipValue + '"';
	}

	var grid = new Ext.grid.GridPanel({
		title: '時刻表',
		frame: true,
		height: 350,
		width: 750,
		renderTo: 'grid-timetable',
		stripeRows: true,
		trackMouseOver:true,
		store: store,
		columns: [
			{
				header: '対象空港',
				sortable: true,
				dataIndex: 'destination',
				renderer: function(v, params) {
					params.attr = getQtipAttr("対象空港", v, 100);
					return v;
				}
			},
			{
				header: '航空会社',
				sortable: true,
				dataIndex: 'airline',
				renderer: function(v, params){
					var airlineColor = v;
					if (v == 'ANA') {
						airlineColor = '<span style="color: #003399;">' + v + '</span>';
					} else if (v == 'JAL') {
						airlineColor = '<span style="color: #cc0000;">' + v + '</span>';
					} else if (v == 'IBEX') {
						airlineColor = '<span style="color: #F552A8;">' + v + '</span>';
					} else {
						var codeShare = v.split('/');
						if (codeShare.length == 2) {
							if (codeShare[0] == 'IBEX' && codeShare[1] == 'ANA') {
								airlineColor = '<span style="color: #F552A8;">' + codeShare[0] + '</span>' + '/' + '<span style="color: #003399;">' + codeShare[1] + '</span>';
							} else {
								// 何もしない
							}
						}
					}
					params.attr = getQtipAttr("航空会社", v, 100);
					return airlineColor;
				}
			},
			{
				header: '便名',
				sortable: true,
				dataIndex: 'flightName',
			    renderer: function(v, params) {
					params.attr = getQtipAttr("便名", v, 100);
					return v;
				}
			},
			{
				header: '機種',
				sortable: true,
				dataIndex: 'model',
				renderer: function(v, params) {
					params.attr = getQtipAttr("機種", v, 100);
					return v;
				}
			},
			{
				header: '伊丹空港時間',
				sortable: true,
				dataIndex: 'itamiTime',
				renderer: function(v, params) {
					var time = Ext.util.Format.date(v, 'H:i');
					params.attr = getQtipAttr("伊丹空港時間", time, 100);
					return time;
				}
			},
			{
				header: '対象空港時間',
				sortable: true,
				dataIndex: 'objectTime',
				renderer: function(v, params) {
					var time = Ext.util.Format.date(v, 'H:i');
					params.attr = getQtipAttr("対象空港時間", time, 100);
					return time;
				}
			},
			{
				header: '出発/到着種別',
				sortable: true,
				dataIndex: 'type',
				renderer: function(v, params) {
					params.attr = getQtipAttr("出発/到着種別", v, 100);
					return v;
				}
			}
		],
		plugins: new Ext.ux.PanelResizer({
			minHeight: 100,
			maxHeight: 800
		}),
		bbar: new Ext.PagingToolbar({
			pageSize: 30,
			store: store,
			displayInfo: true,
			plugins: [
				new Ext.ux.SlidingPager(),
				new Ext.ux.ProgressBarPager()
			]
		})
	});

	store.load({
		params:{
			start:0,
			limit:30,
			sort:'itamiTime',
			dir: 'ASC'
		}
	});

});