var ExtiPhone = {};
ExtiPhone.view = {};
    
/*
 *  Outermost view for the application
 */
ExtiPhone.view.viewport = function(){
	ExtiPhone.view.viewport.superclass.constructor.apply(this,arguments);
};

Ext.extend(ExtiPhone.view.viewport, Yext.view.base, {
	view: function(opt){
		
		var grid = this.createGrid();

		var vport = new Ext.Panel({
			layout	:	'fit',
			width	:	320,
			autoHeight: true,
			items	:	grid,
			renderTo:   'vp'
		});
		
		grid.getStore().load({params:{start:0,limit:5}});
		
		this.panel = vport;
	},
	
	createGrid: function(){
 		var store = new Ext.data.Store({
 			// APIのURLを指定
	        proxy: new Ext.data.ScriptTagProxy({
				url: "http://webservice.recruit.co.jp/carsensor/usedcar/v1/" 
			}),
			// APIに固定的に渡すパラメーターを指定
	        baseParams: {
	        	key		: 'd66bf4106270fae4', // 自分のAPI-KEYを入れてください
	        	person	: 2, // Carsensor.NET API用必須パラメーターの一つ（乗車定員）これでほぼ全データを取得
	        	order	: 1,
	        	format	: 'jsonp'
	        },
	        // 取得したデータを読み込むためのリーダー
	        reader: new Ext.data.JsonReader({
	            root: 'results.usedcar', // 表示するデータ配列のルートへのパス
	            totalProperty: 'results.results_available', // PaingToolbar用、全レコード数へのパス
	            id: 'id',
	            fields: [ 
	            	// データ項目のマッピング。名前が同じ場合は「mapping」は必要無い
	            	{name:'photo', mapping: 'photo.main.s'},
	              	{name:'model'},
	              	{name:'grade'},
	              	{name:'brand', mapping: 'brand.name'},
	              	{name:'url', mapping: 'urls.pc'},
	              	{name:'price'}
	            ]
	        })
	    });
	    
	    // データ取得前にパラメータを設定。PagingToolbarを利用する場合、PagingToolbarのパラメーターをAPI用パラメーターに変換する必要がある
		store.on('beforeload',function(o,p){
		  p.params.start++;
		  p.params.count = p.params.limit;
		});

	    // データ取得後にパラメータを再設定。PagingToolbar用のパラメーターを再設定
		store.on('load',function(o,r,p){
		  p.params.start--;
		});	    
	    		
		var ptool = new Ext.PagingToolbar({
	    	pageSize: 5,
	        store: store,
	        displayInfo: true,
	        displayMsg: '全{2}件',
	        emptyMsg: "データが見つかりません"
	    });
		
		// 取得したデータを表示するためのグリッドパネル            
	    var panel = new Ext.grid.GridPanel({
//	        layout: 'fit',
	        store: store,
	        header: false,
	        // データストア（store）内のデータをグリッドに表示するための設定。rendererを指定すると表示方法を柔軟に指定可能
    		columns: [
        		{dataIndex: 'photo', width: 160, renderer: render_image},
        		{dataIndex: 'model', width: 160, renderer: render_data}
    		],
   	        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
			autoScroll: false,
			autoHeight: true,
//			height: 300, // 高さは適当な数字でOK。autoHeightかheightを指定しないとなぜかグリッドがrenderされない。autoHeightを指定すると「fit」がなぜか適用されない
	        bbar: ptool,
	        loadMask: true
	    });
	    
	    panel.getSelectionModel().on('rowselect',function(t,ri,r){
	    	window.open(r.data.url);
	    });
	    
	    return panel;
	       
	    // 価格データのフォーマット
        function render_price(value,p,record){
        	if(isNaN(value)){ return value; } // 数値じゃない場合はフォーマットしない
        	else{ return Ext.util.Format.jpMoney(value); }
        }

		// 画像をリンクにフォーマット
        function render_image(value,p,record){ 
        	return '<a href="'+record.data.url+'" target="_blank"><img height="100px" src="'+value+'" /></a>';
        }

		// ブランド名＋車名＋グレードを組み合わせ
        function render_data(value,p,record){
 			var carname = record.data.brand+'&nbsp;'+record.data.model+'&nbsp;'+record.data.grade;       
        	return '<p style="font-size:1.4em">'+carname+'</p>';
        }
	}
});