var nom = "vn";
var titre = "Voitures neuves";
var titre_icone = "Neuf";
var icone = "car";

var couleur_info = "#E45900";

//#######################################################################################
//### Formulaire de recherche VN
//#######################################################################################
Ext.ns('DynamicFormsVN');
DynamicFormsVN.MyForm = Ext.extend(Ext.form.FormPanel, {
    initComponent: function(){
        Ext.apply(this, {
            floating: true,
            width: '100%',
            height: '100%',
            centered: true,
            modal: true,
            hideOnMaskTap: false,
            url: 'ajax_vn.php',
            items: [{
                xtype: 'selectfield',
                name: 'marque',
                options: [{
                    text: '--- Marque ---', value: ''
                },
                 { text: 'CITROEN', value: 'CITROEN' }, { text: 'DACIA', value: 'DACIA' }, { text: 'DS', value: 'DS' }, { text: 'FORD', value: 'FORD' }, { text: 'JEEP', value: 'JEEP' }, { text: 'NISSAN', value: 'NISSAN' }, { text: 'PEUGEOT', value: 'PEUGEOT' }, { text: 'RENAULT', value: 'RENAULT' }, { text: 'SEAT', value: 'SEAT' }, { text: 'VOLKSWAGEN', value: 'VOLKSWAGEN' },				],
				listeners: {
					change: function() {
						maj_modeles_vn(this.value);
					}
				}
            },
			{
                xtype: 'selectfield',
                id: 'modele',
                name: 'modele',
                options: [{
                    text: '--- Modèle ---', value: ''
                }]
            },{
                xtype: 'selectfield',
                name: 'boite',
                options: [{
                    text: '--- Boîte de vitesses ---', value: ''
                },
                 { text: 'Auto', value: 'Auto' }, { text: 'Manuelle', value: 'Manuelle' },				]
				},
			{
                xtype: 'selectfield',
                name: 'prix',
                options: [{
                    text: '--- Prix ---', value: ''
                }, {
                    text: 'Moins de 10 000 €',
					value: '0|10000'
                }, {
                    text: 'Entre 10 000 € et 15 000 €',
					value: '10000|15 000'
                }, {
                    text: 'Entre 15 000 € et 20 000 €',
					value: '15000|20000'
                }, {
                    text: 'Entre 20 000 € et 25 000 €',
					value: '20000|25000'
                }, {
                    text: 'Entre 25 000 € et 30 000 €',
					value: '25000|30000'
                }, {
                    text: 'Plus de 30 000 €',
					value: '30000|100000000'
                }]
            },
			{
                xtype: 'togglefield',
               	name: 'photo',
                label: 'Avec photo'
            }],
			dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            text: 'Nouvelle<br />recherche',
                            ui: 'action-small',
                            handler: function() {
								Ext.Ajax.request({
									url: 'ajax_vn.php',
									method: 'POST',
									params: {init_vn:1},
									success: function (response, opts) {
									//document.getElementById('suite_vu').innerHTML = '';
									//ajoute_vu(document.getElementById('suite_vu'));
									//Ext.getCmp('vu').doComponentLayout();
									myFormVN.reset();
									//myFormVU.hide();
								},
								});
                            }
                        },
                        {xtype: 'spacer'},
                        {
                            text: 'Annuler',
                            handler: function() {
						        myFormVN.hide();
                            }
                        },
                        {
                            text: 'Rechercher',
                            ui: 'confirm',
                            handler: function() {
								Ext.Ajax.request({
									url: 'ajax_vn.php',
									method: 'POST',
									params: {marque:myFormVN.getValues().marque, modele:myFormVN.getValues().modele, km:myFormVN.getValues().km, boite:myFormVN.getValues().boite, annee:myFormVN.getValues().annee, prix:myFormVN.getValues().prix, photo:myFormVN.getValues().photo},
									success: function (response, opts) {
									Ext.getCmp('recherche').setValue('');
									document.getElementById('suite_vn').innerHTML = '';
									ajoute_vn(document.getElementById('suite_vn'));
									Ext.getCmp('vn').doComponentLayout();
									myFormVN.hide();
								},
								});
                            }
                        },
                    ]
                }
            ]
        });
        DynamicFormsVN.MyForm.superclass.initComponent.call(this);
    }
});

var myFormVN = new DynamicFormsVN.MyForm();

//#######################################################################################
//### Panel principal VN
//#######################################################################################
monTab_vn = Ext.extend(Ext.TabPanel, {
	id: nom,
	title: titre_icone,
	iconCls: icone,
	cls: nom,
	height: 'auto',
	scroll: 'vertical',
	id: nom,
	listeners: {
		activate: function(tab) {
			Ext.Ajax.request({
				url: 'recup-tab.php?tab='+this.cls,
				success: function (response, opts) {
				tab.update(response.responseText, true);
				ajoute_vn(document.getElementById('suite_vn'));
			},
			});
		}
	},
	dockedItems: [
		{
			xtype: 'tool_bar_vn',
			style: {
				height: '30px',
				fontSize: '12px',
			},
		}
	]
});

Ext.reg(nom, monTab_vn);

//#######################################################################################
//### Champ de tri des véhicules
//#######################################################################################
var triPickerVN = new Ext.Picker({
	doneButton: 'Valider',
	listeners: {
		cancel: function () {
		},
		change: function (val) {
			var info = val.getValue()['info'];
			var ordre = val.getValue()['ordre'];
			$(document).ready(function ()
			{
				$.post("ajax_vn.php", {init_listeVN: 1, info: info, ordre: ordre},
					function success(data)
					{
						document.getElementById('suite_vn').innerHTML = '';
						ajoute_vn(document.getElementById('suite_vn'));
						Ext.getCmp('vn').doComponentLayout();
					}
				)
			});
		},
	},
	slots: [
		{
			name: 'info',
			title: 'Info',
			data: [
				{text: 'Marque', value: 'marque'},				{text: 'Prix', value: 'prix'}
			]
		},
		{
			name: 'ordre',
			title: 'Ordre',
			data: [
				{text: 'Croissant', value: 'asc'},
				{text: 'D&eacute;croissant', value: 'desc'},
			]
		}
	]
});

//#######################################################################################
//### Barre d'outils en haut pour MAJ du listing VN
//#######################################################################################
maToolbarVN = Ext.extend(Ext.Toolbar, {
	title: titre,
	items: [
		{
		    text: '<img src="include/images/rechercher.png" style="width: 20px; height: 20px" />',
		 	ui: 'action',
		    handler: function()
			{
		        myFormVN.show();
            }
		},
		{
			xtype: 'spacer'
		},
		{
            xtype: 'textfield',
            name : 'recherche_vn',
            id : 'recherche_vn',
            label: '',
            useClearIcon: false,
            autoCapitalize : false,
            style: {fontSize: '15px', width: '70%'},
            placeHolder: 'Votre recherche...',
            allowBlank: false,
			listeners: {
				keyup: function(texte, e)
				{
					if (e.browserEvent.keyCode != 13)
					{
						Ext.Ajax.request({
							url: 'ajax_vn.php',
							method: 'POST',
							params: {recherche:Ext.getCmp('recherche_vn').getValue()},
							success: function (response, opts) {
								if (isset(myFormVN))
								{
									myFormVN.reset();
								}
								document.getElementById('suite_vn').innerHTML = '';
								ajoute_vn(document.getElementById('suite_vn'));
								//Ext.getCmp('vn').doComponentLayout();
								window.scrollTo(0,0);
							},
						});
					}
					else
					{
						window.scrollTo(0,0);
					}
				}
			}
		},
		{
			xtype: 'spacer'
		},
		{
		    text: '<img src="include/images/trier.png" style="width: 20px; height: 20px" />',
		    ui: 'action',
		    handler: function()
			{
            	triPickerVN.show();
            }
		}
	]
});

Ext.reg('tool_bar_vn', maToolbarVN);