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%'
				}]
			}]
		}]
	});
*/
 
	// Create a variable to hold our EXT Form Panel. 
	// Assign various config options as seen.	 
	var login = new Ext.FormPanel({ 
		labelWidth:80,
		url:'app/main_action.php/USER/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:[{
			xtype : 'textfield',
			fieldLabel:'Utilisateur', 
			name:'loginUserName', 
			allowBlank:false 
		},{
			xtype : 'textfield',
			fieldLabel:'Mot de passe', 
			name:'loginPassWord', 
			inputType:'password', 
			allowBlank:false 
		}],
 
		// 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:'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(){
						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!', 'Authentication server is unreachable : ' + action.response.responseText); 
						} 
						login.getForm().reset(); 
					}
				}); 
			} 
		}] 
	});

	var forgetpass = new Ext.FormPanel({ 
        	labelWidth:80,
        	url:'app/main_action.php/USER/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 BipBop.<br/><b>Attention :</b><br/> BipBop 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:250,
		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();

});