Ext.onReady(function(){

	Ext.QuickTips.init();

	var filterColCombo = new Ext.form.ComboBox({
		id: 'filtercol_combo_id',
		width: 100,
		triggerAction: 'all',
		valueField: 'value',
		displayField : 'view',
		value: 'flightName',
		editable: false,
		mode: 'local',
		store: new Ext.data.ArrayStore({
			fields: ['view','value'],
			data: [
				['対象空港', 'destination'],
				['航空会社', 'airline'],
				['便名', 'flightName'],
				['機種', 'model'],
				['伊丹空港時間', 'itamiTime'],
				['対象空港時間', 'objectTime'],
				['出発/到着種別', 'type']
			]
		}),
		listeners: {
			'select': {
				fn: function(combo, record, index) {
					store.baseParams = {
						sort: 'itamiTime',
						dir: 'ASC',
						filterCol: record.data.value,
					};
				}
			},
			'afterrender': {
				fn: function(combo) {
					store.baseParams = {
						sort: 'itamiTime',
						dir: 'ASC',
						filterCol: combo.value,
					};
				}
			}
		}
	});

	var store = new Ext.data.Store({
		proxy: new Ext.ux.data.PagingMemoryProxy(timeTableData),
		remoteSort: true,
		baseParams: {sort: 'itamiTime', dir: 'ASC', filterCol: '', filter: ''},
		reader: new Ext.data.ArrayReader({
			fields: [
				{name: 'destination'},
				{name: 'airline'},
				{name: 'flightName'},
				{name: 'model'},
				{name: 'itamiTime', type: 'date'},
				{name: 'objectTime', type: 'date'},
				{name: 'type'}
			]
		})
	});

	var searchField = new Ext.ux.form.SearchField({
		store: store,
		width: 200,
		paramName: 'filter'
	});

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

	var expander = new Ext.ux.grid.RowExpander({
		tpl : new Ext.Template(
			'<table>',
			'    <tr>',
			'        <td>',
			'            <img src="../plainmodel/{airline}/{model}.jpg" alt="{model}">',
			'        </td>',
			'        <td>',
			'            <iframe src="../plainmodel/{airline}/{model}.html" width="500" height="100" frameborder="0"></iframe>',
			'        </td>',
			'    </tr>',
			'</table>'
		)
	});

	var grid = new Ext.grid.GridPanel({
		title: '時刻表',
		frame: true,
		height: 350,
		width: 750,
		renderTo: 'grid-timetable',
		stripeRows: true,
		trackMouseOver:true,
		store: store,
		columns: [
			expander,
			{
				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
			}),
			expander
		],
		tbar: [
			filterColCombo,
			searchField
		],
		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'
		}
	});

});