Ext.ns('com.quizzpot.tutorial');

Ext.BLANK_IMAGE_URL = '../ext-3.0.0/resources/images/default/s.gif';

com.quizzpot.tutorial.LoadFormTutorial = {
	init: function(){
		//Get the information
		Ext.Ajax.request({
			url: 'loadform.php',
			params: {all:true},
			method: 'GET',
			scope: this,
			success: this.createTopTen
		});
	},
	
	createTopTen: function(response){
		//create the main list
		var info = Ext.decode(response.responseText);
		Ext.each(info,function(movie){
			Ext.DomHelper.append('content',{
				tag:'img',
				src:movie.img, 
				alt:movie.title, 
				title:movie.title,
				cls: 'movie'
			});
		},this);
		
		var items = Ext.DomQuery.select('div[id=content] > img');
		Ext.each(items,function(el,i){
			el = Ext.get(el);
			el.on('click',function(){
				this.showDetail(i);
			},this);
		},this);
	},
			
	showDetail: function(id){
		//create and load the form
		var form = new Ext.form.FormPanel({
			url: 'loadform.php',
			border:false,
			labelWidth: 80,
			defaults: {
				xtype:'textfield',
				width: 150
			},
			items:[
				{fieldLabel:'Title',name:'title'},
				{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]},
				{xtype:'numberfield',fieldLabel:'Revenues',name:'revenues'},
				{xtype:'textarea',fieldLabel:'Comment',name:'comment'},
				{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
			]
		});

		var win = new Ext.Window({
			title: 'Loading data into a form',
			bodyStyle: 'padding:10px;background-color:#fff;',
			width:300,
			height:270,
			items:[form],
			buttons: [{text:'Save'},{text:'Cancel'}]
		});

		win.show();
		
		form.getForm().load({params:{id:id}});
	}	
}

Ext.onReady(com.quizzpot.tutorial.LoadFormTutorial.init,com.quizzpot.tutorial.LoadFormTutorial);