//Global vars
var UtilisateursDataStore;
var UtilisateursColumnModel;
var UtilisateurListingEditorGrid;
var UtilisateurListingWindow;
//Our new vars
var UtilisateurCreateForm;
var UtilisateurCreateWindow;
var PrenomField;
var NomField;
var TypeField;
var Username;
var Password;
var PartyField;
var viewport;

var layer,map;


var currentFrame;




Ext.onReady(function(){

	Ext.QuickTips.init();



	/////////////////////////////  grid user  ////////////////////////////////:
	// This saves the utilisateur after a cell has been edited
	function saveTheUtilisateur(oGrid_event){
		Ext.Ajax.request({
			waitMsg: 'Please wait...',
			url: 'php/database_user.php',
			params: {
			task: "UPDATEPRES",
			ID_UTILISATEUR: oGrid_event.record.data.ID_UTILISATEUR,
			prenom: oGrid_event.record.data.Prenom,
			nom: oGrid_event.record.data.Nom,
			type: oGrid_event.record.data.Type,
			username: oGrid_event.record.data.Username,
			password: oGrid_event.record.data.Password
		},
		success: function(response){
			var result=eval(response.responseText);
			switch(result){
			case 1:
				UtilisateursDataStore.commitChanges();
				UtilisateursDataStore.reload();
				break;
			default:
				Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
			break;
			}
		},
		failure: function(response){
			var result=response.responseText;
			Ext.MessageBox.alert('error','could not connect to the database. retry later');
		}
		});
	}

	// this creates a new utilisateur
	function createTheUtilisateur(){
		if(isUtilisateurFormValid()){
			Ext.Ajax.request({
				waitMsg: 'Please wait...',
				url: 'php/database_user.php',
				params: {
				task: "CREATEPRES",
				prenom:           PrenomField.getValue(),
				nom:              NomField.getValue(),
				type:             TypeField.getValue(),
				username:         Username.getValue(),
				password:         Password.getValue()
			},
			success: function(response){
				var result=eval(response.responseText);
				switch(result){
				case 1:
					Ext.MessageBox.alert('Creation OK','The utilisateur was created successfully.');
					UtilisateursDataStore.reload();
					UtilisateurCreateWindow.hide();
					break;
				default:
					Ext.MessageBox.alert('Warning','Could not create the utilisateur.');
				break;
				}
			},
			failure: function(response){
				var result=response.responseText;
				Ext.MessageBox.alert('error','could not connect to the database. retry later');
			}
			});
		} else {
			Ext.MessageBox.alert('Warning', 'Your Form is not valid!');
		}
	}

	// reset the Form before opening it
	function resetUtilisateurForm(){
		PrenomField.setValue('');
		NomField.setValue('');
		TypeField.setValue('');
		Username.setValue('');
		Password.setValue('');
	}

	// check if the form is valid
	function isUtilisateurFormValid(){
		return(PrenomField.isValid() && NomField.isValid() && TypeField.isValid() && Username.isValid() && Password.isValid() );
	}

	// display or bring forth the form
	function displayFormWindow(){
		if(!UtilisateurCreateWindow.isVisible()){
			resetUtilisateurForm();
			UtilisateurCreateWindow.show();
		} else {
			UtilisateurCreateWindow.toFront();
		}
	}

	// This was added in Tutorial 6
	function confirmDeleteUtilisateurs(){
		if(UtilisateurListingEditorGrid.selModel.getCount() == 1) // only one utilisateur is selected here
		{
			Ext.MessageBox.confirm('Confirmation','You are about to delete a utilisateur. Continue?', deleteUtilisateurs);
		} else if(UtilisateurListingEditorGrid.selModel.getCount() > 1){
			Ext.MessageBox.confirm('Confirmation','Delete those utilisateurs?', deleteUtilisateurs);
		} else {
			Ext.MessageBox.alert('Uh oh...','You can\'t really delete something you haven\'t selected huh?');
		}
	}
	// This was added in Tutorial 6
	function deleteUtilisateurs(btn){
		if(btn=='yes'){
			var selections = UtilisateurListingEditorGrid.selModel.getSelections();
			var prez = [];
			for(i = 0; i< UtilisateurListingEditorGrid.selModel.getCount(); i++)
				prez.push(selections[i].json.ID_UTILISATEUR);

			var encoded_array = Ext.encode(prez);
			Ext.Ajax.request({
				waitMsg: 'Please Wait',
				url: 'php/database_user.php',
				params: {
				task: "DELETEPRES",
				ids:  encoded_array
			},
			success: function(response){
				var result=eval(response.responseText);
				switch(result){
				case 1:  // Success : simply reload
					UtilisateursDataStore.reload();
					break;
				default:
					Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
				break;
				}
			},
			failure: function(response){
				var result=response.responseText;
				Ext.MessageBox.alert('error','could not connect to the database. retry later');
			}
			});
		}
	}


	// << CONFIG >>
	UtilisateursDataStore = new Ext.data.Store({
		id: 'UtilisateursDataStore',
		proxy: new Ext.data.HttpProxy({
			url: 'php/database_user.php',
			method: 'POST'
		}),
		baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
		reader: new Ext.data.JsonReader({
			root: 'results',
			totalProperty: 'total',
			id: 'id'
		},[
		   {name: 'ID_UTILISATEUR', type: 'int', mapping: 'ID_UTILISATEUR'},
		   {name: 'Prenom', type: 'string', mapping: 'PRENOM'},
		   {name: 'Nom', type: 'string', mapping: 'NOM'},
		   {name: 'Type', type: 'string', mapping: 'TYPE'},
		   {name: 'Username', type: 'string', mapping: 'USERNAME'},
		   {name: 'Password', type: 'string', mapping: 'PASSWORD'}
		   ]),
		   sortInfo:{field: 'ID_UTILISATEUR', direction: "ASC"}
	});

	UtilisateursColumnModel = new Ext.grid.ColumnModel(
			[{
				header: '#',
				readOnly: true,
				dataIndex: 'ID_UTILISATEUR',
				width: 40,
				hidden: false
			},{
				header: 'Prenom',
				dataIndex: 'Prenom',
				width: 60,
				editor: new Ext.form.TextField({
					allowBlank: false,
					maxLength: 20,
					maskRe: /([a-zA-Z0-9\s]+)$/
				})
			},{
				header: 'Nom',
				dataIndex: 'Nom',
				width: 80,
				editor: new Ext.form.TextField({
					allowBlank: false,
					maxLength: 20,
					maskRe: /([a-zA-Z0-9\s]+)$/
				})
			},{
				header: 'Accès',
				dataIndex: 'Type',
				width: 150,
				editor: new Ext.form.ComboBox({
					typeAhead: true,
					triggerAction: 'all',
					store:new Ext.data.SimpleStore({
						fields:['partyValue', 'partyName'],
						data: [['0','USER'],['1','ADMIN']]
					}),
					mode: 'local',
					displayField: 'partyName',
					lazyRender:true,
					listClass: 'x-combo-list-small'
				})
			},{
				header: 'Username',
				dataIndex: 'Username',
				width: 80,
				editor: new Ext.form.TextField({
					allowBlank: false,
					maxLength: 20,
					maskRe: /([a-zA-Z0-9\s]+)$/
				})
			},{
				header: 'Password',
				dataIndex: 'Password',
				width: 80,
				editor: new Ext.form.TextField({
					allowBlank: false,
					maxLength: 20,
					maskRe: /([a-zA-Z0-9\s]+)$/
				})
			}]
	);
	UtilisateursColumnModel.defaultSortable= true;

	UtilisateurListingEditorGrid =  new Ext.grid.EditorGridPanel({
		id: 'UtilisateurListingEditorGrid',
		store: UtilisateursDataStore,
		cm: UtilisateursColumnModel,
		enableColLock:false,
		region:'center',
		clicksToEdit:1,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
		tbar: [
		       {
		    	   text: 'Ajouter un utilisateur',
		    	   tooltip: 'Cliquez sur ce bouton',
		    	   iconCls:'add',                      // reference to our css
		    	   handler: displayFormWindow
		       }, '-', { // Added in Tutorial 6
		    	   text: 'Supprimer la selection',
		    	   tooltip: 'Cliquez sur ce bouton',
		    	   handler: confirmDeleteUtilisateurs,   // Confirm before deleting
		    	   iconCls:'remove'
		       }]
	});
	UtilisateursDataStore.load();
	UtilisateurListingEditorGrid.on('afteredit', saveTheUtilisateur);
	//////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////
	// form
	PrenomField = new Ext.form.TextField({
		id: 'PrenomField',
		fieldLabel: 'Prenom',
		maxLength: 20,
		allowBlank: false,
		anchor : '95%',
		maskRe: /([a-zA-Z0-9\s]+)$/
	});

	NomField = new Ext.form.TextField({
		id: 'NomField',
		fieldLabel: 'Nom',
		maxLength: 20,
		allowBlank: false,
		anchor : '95%',
		maskRe: /([a-zA-Z0-9\s]+)$/
	});

	TypeField = new Ext.form.ComboBox({
		id:'TypeField',
		fieldLabel: 'Type',
		store:new Ext.data.SimpleStore({
			fields:['partyValue', 'partyName'],
			data: [['0','USER'],['1','ADMIN']]
		}),
		mode: 'local',
		displayField: 'partyName',
		allowBlank: false,
		anchor:'95%',
		triggerAction: 'all'
	});

	Username = new Ext.form.TextField({
		id:'Username',
		fieldLabel: 'UserName',
		maxLength: 20,
		allowBlank: false,
		anchor : '95%',
		maskRe: /([a-zA-Z0-9\s]+)$/
	});

	Password = new Ext.form.TextField({
		id:'password',
		fieldLabel: 'Password',
		allowNegative: false,
		allowBlank: false,
		anchor:'95%'
	});



	UtilisateurCreateForm = new Ext.FormPanel({
		labelAlign: 'top',
		bodyStyle:'padding:5px',
		width: 600,
		items: [{
			layout:'column',
			border:false,
			items:[{
				columnWidth:0.5,
				layout: 'form',
				border:false,
				items: [PrenomField, NomField,TypeField]
			},{
				columnWidth:0.5,
				layout: 'form',
				border:false,
				items: [Username, Password]
			}]
		}],
		buttons: [{
			text: 'Save and Close',
			handler: createTheUtilisateur
		},{
			text: 'Cancel',
			handler: function(){
			// because of the global vars, we can only instantiate one window... so let's just hide it.
			UtilisateurCreateWindow.hide();
		}
		}]
	});

	UtilisateurCreateWindow= new Ext.Window({
		id: 'UtilisateurCreateWindow',
		title: 'Creation d\'un nouveau utilisateur',
		closable:true,
		width: 610,
		height: 250,
		plain:true,
		layout: 'fit',
		items: UtilisateurCreateForm
	});
	///////////////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////////////

	var options;
	//layer = ;
    layer = new OpenLayers.Layer.OSM("New Layer","tiles/${z}/${x}/${y}.png"    );
    map = new OpenLayers.Map();
    map.addLayer(layer);
    map.setCenter(new OpenLayers.LonLat(7.01602,43.61125) // Center of the map
      .transform(
        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
      ), 17 // Zoom level
    );

    var mapPanel = new GeoExt.MapPanel({
        stateId: "mappanel",
        id: 'idmap',
		enableColLock:false,
		region:'center',
        map: map,
        center: new OpenLayers.LonLat(7.01602,43.61125) // Center of the map
        .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
              ),
        zoom:15
    });





	///////////////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////////////
	/////// menu
	var taskActions = new Ext.Panel({
		frame:true,
		title: 'Utilisateurs',
		collapsible:true,
		contentEl:'task-actions',
		titleCollapse: true
	});
	var Cartographie = new Ext.Panel({
		frame:true,
		title: 'Cartographie',
		collapsible:true,
		contentEl:'carto-menu',
		titleCollapse: true
	});
	var actionPanel = new Ext.Panel({
		id:'action-panel',
		region:'west',
		split:true,
		collapsible: true,
		collapseMode: 'mini',
		header: false,
		width:200,
		minWidth: 150,
		border: false,
		baseCls:'x-plain',
		items: [taskActions,Cartographie]
	});
	///////////////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////////////
	//// final
	currentFrame="mappanel";
	viewport = new Ext.Viewport({
		layout:'border',
		id: 'mainViewTabs',
		// UtilisateurListingEditorGrid
		items: [ actionPanel,mapPanel	]
	});

	//////////////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////////////
	// event  menu
	var actions_menu = {
			'action-GUtilisateurs' : function(){
		         viewport= Ext.getCmp('mainViewTabs');
	  	         viewport.remove('idmap');
		         viewport.add(UtilisateurListingEditorGrid);
		         viewport.doLayout();
	         },'carto-menu':function(){
				   if(!currentFrame)
					   viewport.remove(currentFrame,false);
				   viewport.doLayout();

	         }

	};
	var ab = actionPanel.body;
	ab.on('mousedown', doAction, null, {delegate:'a'});
	ab.on('click', Ext.emptyFn, null, {delegate:'a', preventDefault:true});
	function doAction(e, t){
		e.stopEvent();
		actions_menu[t.id]();
	}
	//////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////

});