Ext.onReady(function(){

	Ext.QuickTips.init();
 
 
/*	// Header
	HeaderPanel = new Ext.FormPanel({
		title : '',
		frame : true,
		url : 'app/main_action.php/USER/logout',   // app/logout.php
		// basCls : 'x-plain',
		// cls : 'btn-panel',
		renderTo : 'Header',
		bodyStyle : 'padding:0 10px 0;',
		items : [{
			layout : 'column',
			items : [{
				columnWidth:.2,
				items : [{
					xtype : 'label',
					html : '<img src="./images/logo.png" height=80 align="top" />',
					anchor : '50%'
				}]
			},{
				columnWidth:.8,			
				items : [{
					xtype : 'label',
					html : '<font size="24px"> Plateforme BIP-BOP</font>',
					anchor : '50%'
				}]
			}]
		}]
	});
*/


	var	F_UserName = new Ext.form.TextField({
		id: 'F_loginUserName',
		name : 'loginUserName',
		fieldLabel: 'Nom',
		fieldLabel:'Utilisateur', 
		maxLength: 45,
		allowBlank: false,
		allowBlank:false 
		//anchor : '95%',    
		//maskRe: /([a-zA-Z0-9éèàçüäëïöâêûîô'.,:\s]+)$/  
	});

	var F_UserAssocDataStore = new Ext.data.Store({
		id :'SF_UserAssoc',
		url:'./app/main_action.php/GAMEMBER/ListAssocShow',
		params: {
			USERNAME : F_UserName.getValue()
    }, 
		reader: new Ext.data.JsonReader({
			root: 'results',
			totalProperty:'total'
		},[
				{name:'ASSOC_ID', mapping:'ASSOC_ID'},
				{name:'ASSOC_NAME', mapping:'ASSOC_NAME'}
		])
	}); 

	
	
	var F_UserAssoc = new Ext.form.ComboBox({
		fieldLabel: 'Association',
		width : 280,
		name:'USER_ASSOC_ID',
		typeAhead: true,
		triggerAction: 'all',
		lazyRender:true,
		allowBlank:false,
		listeners:{
			'focus' : onFocusUserAssoc
		},
		store: F_UserAssocDataStore,
		valueField: 'ASSOC_ID',
		displayField: 'ASSOC_NAME'
	});


	function onFocusUserAssoc() {
		F_UserAssocDataStore.setBaseParam('USERNAME', F_UserName.getValue());
		F_UserAssocDataStore.load();
	}


	

	// Create a variable to hold our EXT Form Panel. 
	// Assign various config options as seen.	 
	var login = new Ext.FormPanel({
		width : 385,
		labelWidth:80,
		url:'app/main_action.php/GAMEMBER/login',    //app/login.php', 
		frame:true, 
		renderTo : 'content',
		title:'Authentification', 
		defaultType:'textfield',
		monitorValid:true,
		align : 'left',
		// Specific attributes for the text fields for username / password. 
		// The "name" attribute defines the name of variables sent to the server.
        	items:[F_UserName,{
			xtype : 'textfield',
			fieldLabel:'Mot de passe', 
			name:'loginPassWord', 
			inputType:'password', 
			allowBlank:false 
		}, F_UserAssoc],
 
		// All the magic happens after the user clicks the button     
		buttons:[{
			text:'Entrer',
			formBind: true,	 
			// Function that fires when user clicks the button 
			handler:function(){ 
				login.getForm().submit({ 
					method:'POST', 
					waitTitle:'Connexion', 
					waitMsg:'Authentification...',
 
			// Functions that fire (success or failure) when the server responds. 
			// The one that executes is determined by the 
			// response that comes from login.asp as seen below. The server would 
			// actually respond with valid JSON, 
			// something like: response.write "{ success: true}" or 
			// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
			// depending on the logic contained within your server script.
			// If a success occurs, the user is notified with an alert messagebox, 
			// and when they click "OK", they are redirected to whatever page
			// you define as redirect. 
 
					success:function(){
						var redirect = 'index.php'; 
						window.location = redirect;
					},
 
			// Failure function, see comment above re: success and failure. 
			// You can see here, if login fails, it throws a messagebox
			// at the user telling him / her as much.  
 
					failure:function(form, action){ 
						if(action.failureType == 'server'){ 
							obj = Ext.util.JSON.decode(action.response.responseText); 
							Ext.Msg.alert('Erreur lors de l\'authentification', obj.errors.reason); 
						}else{ 
							Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
						} 
						login.getForm().reset(); 
					}
				}); 
			} 
		}] 
	});

	var forgetpass = new Ext.FormPanel({ 
		width : 385,
    labelWidth:80,
    url:'app/main_action.php/GAMEMBER/forgetpassword',    //app/loginforgetpass.php', 
    frame:true, 
		renderTo : 'content',
		title:'Oubli de mot de passe', 
		defaultType:'textfield',
		monitorValid:true,
		align : 'stretch ',
	// Specific attributes for the text fields for username / password. 
	// The "name" attribute defines the name of variables sent to the server.
		items:[{
			xtype : 'textfield',
			fieldLabel:'Adresse Email', 
			name:'loginemail',
			value : '',
			allowBlank:true		
		}],
 
		// All the magic happens after the user clicks the button     
        	buttons:[{
			text:'Mot de passe oubli&eacute;',
			formBind: true,	 
			// Function that fires when user clicks the button 
			handler:function(){ 
				forgetpass.getForm().submit({ 
					method:'POST', 
					waitTitle:'Connecting', 
					waitMsg:'Sending data...',
 
			// Functions that fire (success or failure) when the server responds. 
			// The one that executes is determined by the 
			// response that comes from login.asp as seen below. The server would 
			// actually respond with valid JSON, 
			// something like: response.write "{ success: true}" or 
			// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
			// depending on the logic contained within your server script.
			// If a success occurs, the user is notified with an alert messagebox, 
			// and when they click "OK", they are redirected to whatever page
			// you define as redirect. 
 
					success:function(){
						Ext.Msg.alert('Envois...', 'Un email vous a &eacute;t&eacute; adress&eacute; avec vos informations de comptes.'); 
						var redirect = 'index.php'; 
						window.location = redirect;
					},
 
			// Failure function, see comment above re: success and failure. 
			// You can see here, if login fails, it throws a messagebox
			// at the user telling him / her as much.  
 
					failure:function(form, action){ 
						if(action.failureType == 'server'){ 
							obj = Ext.util.JSON.decode(action.response.responseText); 
							Ext.Msg.alert('Login Failed!', obj.errors.reason); 
						}else{ 
							Ext.Msg.alert('Warning!',  action.response.responseText); 
						} 
						login.getForm().reset(); 
					} 
				}); 
			} 
		}] 
	});
	
	var FormInfosWeb2Label = new Ext.form.Label({
		border:true,
		html: 'Nous vous souhaitons bienvenue sur G-ASSOC.<br/><b>Attention :</b><br/> G-ASSOC utilise une technologie Web&nbsp;2.0 avanc&eacute;e, v&eacute;rifiez que votre navigateur peut accepter ce type de technologies.<br/>Nous vous conseillons <b>FireFox&nbsp;3</b> ou <b>Internet Explorer&nbsp;8</b>.<br/>Merci.'
	});

 
	// This just creates a window to wrap the login form. 
	// The login object is passed to the items collection.       
	var win = new Ext.Window({
		layout:'column',
		title : 'Entrer...',
		width:400,
		height:370,
		closable: false,
		resizable: false,
		plain: true,
		border: false,
						
/*        items: [{
				layout : 'column',
				border : false,
				defaults : {
					columnWidth : .5,
					border : false
				}
				items : [{ 
				*/
		items : [login, forgetpass, FormInfosWeb2Label]
		//		}]
		//		}]
	});
	win.show();

});