Ext.onReady(function(){
    var win;
    var button = Ext.get('request-link');

	var infoPanel = new Ext.Panel({
			region:'north',
            padding:10,
			height:90,
			bodyStyle:'text-align:left;',
			html:'<img src="img/contact-form.jpg" style="float:left; padding:0 5px; vertical-align:bottom;" />Poniżej proszę wpisać swoje dane teleadresowe i ewentualne pytania. Postaramy się odpowiedzieć na Państwa zapytanie tak szybko jak będzie to możliwe.'
        });


	 var requestForm = new Ext.FormPanel({
	
	 region:'center',
	 labelWidth: 100,
     //url:'save-form.php',
     frame:true,
	 labelAlign: 'top',

     width: '100%',
     items: [{
            layout:'column',
            items:[{
                columnWidth:.5,
                layout: 'form',
				labelSeparator:'&nbsp;',
                items: [{
                    xtype:'textfield',
					labelStyle: 'font-weight:bold;',
                    fieldLabel: 'Imię i nazwisko',
                    name: 'first_last',
					allowBlank:false,
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Firma',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
				labelSeparator:'&nbsp;',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Telefon kontaktowy',
					labelStyle: 'font-weight:bold;',
                    name: 'telephone',
					allowBlank:false,
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
					labelStyle: 'font-weight:bold;',
                    name: 'email',
                    vtype:'email',
					allowBlank:false,
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'textarea',
            id:'query',
            height:200,
            anchor:'98%'
        }]
 

	 });
    


    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
				title: 'Zapytanie ofertowe/rezerwacja',
                layout: 'border',
				modal:true,
                width:550,
                height:500,
                closeAction:'hide',
                plain: true,

                items: [requestForm, infoPanel],

                buttons: [{
                    text:'Wyślij',
					handler: function(){
						requestForm.form.submit({
							url: 'request-send.php',
							method: 'POST',
							params: {
								action: 'new'
								//modify date
								//date_value1: getDateValue(Ext.get('date_start'), 'Ymd')
							},
								waitMsg: 'Wysyłanie...',
								success: function(form, action){
											Ext.MessageBox.show({
											   title:'Kontakt',
											   msg: 'Wiadomość została wysłana!',
											   buttons: Ext.MessageBox.OK,
											   icon: Ext.MessageBox.INFO
										   });
										requestForm.getForm().reset();
										win.hide();
								},
								failure: function(form, action){
											Ext.MessageBox.show({
											   title:'Kontakt',
											   msg: 'Wystąpił błąd podczas wysyłania wiadomości!',
											   buttons: Ext.MessageBox.OK,
											   icon: Ext.MessageBox.ERROR
										   });
								}
						});
				}


                },{
                    text: 'Anuluj',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });

			var proxy=new Ext.data.HttpProxy(
				{
				
					url:'_terms-load.php'
			
				});

			  var reader=new Ext.data.JsonReader(
				{

				},[
					{name: 'lp'},
					{name: 'date_from'},  
					{name: 'food'}, 
					{name: 'period'},
					{name: 'price'},
					{name: 'def_persons'}
				]
			);
  
			var store=new Ext.data.Store({
			  proxy:proxy,
			  reader:reader
		   });

		  //var opCode = Ext.get('operatorCode').getValue();
		  //var offerCode = Ext.get('offerCode').getValue();

		  store.on('beforeload', function() {
			 store.baseParams = {
				operatorCode: document.getElementById("operatorCode").value,
				code: document.getElementById("offerCode").value
			 };

		  });


		// create the grid
		var grid = new Ext.grid.GridPanel({
			store: store,
			colModel: new Ext.grid.ColumnModel([ //instantiate ColumnModel
				{
					header: "L.p.", 
					width: 60, 
					dataIndex: 'lp', 
					sortable: true,
					id: 'lp',
					renderer: function(value, metaData, record, rowIndex, colIndex, store) 
					{ 
						metaData.attr = 'style="text-align:center;"'; 
						return value;
					}
				},
				{
					header: "Data wyjazdu", 
					width: 120,
					dataIndex: 'date_from', 
					sortable: true,
					id: 'date_from',
					renderer: function(value, metaData, record, rowIndex, colIndex, store) 
					{ 
						metaData.attr = 'style="text-align:center; color: #333333;"'; 
						return value;
					}
				},
				{
					header: "Wyżywienie", 
					width: 100, 
					dataIndex: 'food', 
					sortable: true,
					id: 'food',
					renderer: function(value, metaData, record, rowIndex, colIndex, store) 
					{ 
						metaData.attr = 'style="text-align:center; color: #FF6600;"'; 
						return value;
					}
				},
				{
					header: "Pobyt", 
					width: 100, 
					dataIndex: 'period', 
					sortable: true,
					id: 'period',
					renderer: function(value, metaData, record, rowIndex, colIndex, store) 
					{ 
						metaData.attr = 'style="text-align:center; color: blue;"'; 
						return value;
					}
				},
				{
					header: "Cena", 
					width: 100, 
					dataIndex: 'price', 
					sortable: true,
					id: 'price',
					renderer: function(value, metaData, record, rowIndex, colIndex, store) 
					{ 
						metaData.attr = 'style="text-align:center; color: green;"'; 
						return value;
					}
				},
				{
					header: "Pokój/osób", 
					width: 90, 
					dataIndex: 'def_persons', 
					sortable: true,
					id: 'def_persons',
					renderer: function(value, metaData, record, rowIndex, colIndex, store) 
					{ 
						metaData.attr = 'style="text-align:center;"'; 
						return value;
					}
				}
			]),
			loadMask: true,
			width:'99%',
			forceFit: true, //maximize column width
			height:300
		});

		grid.render('terms-grid');
		store.load();

//new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."})


});