// JavaScript Document
// Path to the blank image must point to a valid location on your server
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

Ext.onReady(function(){
    var win;
    var buttonLogin = Ext.get('login_admin');
	var lblStrings = new Array();
	
	buttonLogin.on('click', function(){
		// Create a variable to hold our EXT Form Panel. 
		// Assign various config options as seen.	 
		var login = new Ext.FormPanel({ 
			labelWidth:100,
			url:'scripts/chkLogin.php?lang='+document.getElementById('page_language').value+'&admin=1', 
			frame:true, 
			title:'Authentification', 
			defaultType:'textfield',
			monitorValid:true,
			// Specific attributes for the text fields for username / password. 
			// The "name" attribute defines the name of variables sent to the server.
			items:[
				{ 
					fieldLabel:'Utilisateur', 
					name:'loginUsername', 
					id:'loginUsername', 
					width:170,
					allowBlank:false 
				},
				{ 
					fieldLabel:'Mot de passe', 
					name:'loginPassword', 
					inputType:'password', 
					width:170,
					allowBlank:false 
				}
			],
	 
			// All the magic happens after the user clicks the button     
			buttons:[
				{ 
					text:'Connexion',
					formBind: true,	 
					// Function that fires when user clicks the button 
					handler:function()
					{ 
						login.getForm().submit(
							{ 
								method:'POST', 
								waitTitle:'En cours de connexion', 
								waitMsg:'Envoi des informations...',
								
								// Functions that fire (success or failure) when the server responds. 
								// The one that executes is determined by the 
								// response that comes from login.php as seen below. The server would 
								// actually respond with valid JSON, 
								// something like: echo "{ success: true}" or 
								// echo "{ 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('Status',
														'Authentification r\351ussie !',
														function(btn, text)
														{
															if (btn == 'ok'){
																document.getElementById('login_admin_contener').innerHTML = '<a href="scripts/disconnect_user.php?lang='+document.getElementById('page_language').value+'" id="login_admin">Se d&eacute;connecter</a>';
																//Ext.Msg.alert(lblStrings[0], 'You are logged successfuly !', null);
																window.location = "Admin/";
																win.hide();
															}
														}
										);
								},
								
								// 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', obj.errors.reason); 
									}else{ 
										Ext.Msg.alert('Attention', 'L\'autentification au serveur est inaccessible : ' + action.response.responseText); 
									} 
									login.getForm().reset(); 
								} 
							}
						); 
					} 
				},
				{
					text: 'Fermer',
					handler: function()
					{
						Ext.getCmp('LoginWindow').close();
					}
				}
			] 
		});
		
		// 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:'fit',
			id:'LoginWindow',
			width:300,
			height:150,
			closable: false,
			resizable: false,
			plain: true,
			draggable:false,
			border: false,
			items: [login]
		});
		win.show();
	});
});