Ext.onReady(function(){
  var employee_win;
  var externalButton = Ext.get('employee_span');
  ////////////////
  function validatePassword(){
    employee_form.getForm().submit({
      url:'employee_auth.php',
      waitMsg:'Authenticating...',
      success:function(theForm,theAction){
	window.location = 'employees.php';
      },
      failure:function(theForm,theAction){
	alert('Invalid Password');
      }
    });
  }
  ////////////////
  employee_form = new Ext.FormPanel({
      labelWidth: 75, // label settings here cascade unless overridden
      frame:true,
      title: 'Employees Area',
      defaultType: 'textfield',
      keys: (this, [{
        	key: 13, //key 'enter'
        	fn: function(){
        		//alert("Return was pressed");
        		employee_form.buttons[0].handler();
        	}
    	}]),
      items: [{
	      id:'passwordField',
	      fieldLabel: 'Password',
	      name: 'password',
	      allowBlank:false
	  }
      ],

      buttons: [{
	  text: 'Enter',
	  handler: validatePassword
      },{
	  text: 'Cancel',
	  handler: function(){
	    employee_win.hide();
	  }
      }]
  });
  ////////////////////////////////////////////////////////
  externalButton.on('click', function(){
      if(!employee_win){
	employee_win = new Ext.Window({
	    width:350,
	    height:110,
	    y:600,
	    
	    closable:false,
	    closeAction:'hide',
	    items:[
	      employee_form
	    ]
	});
	employee_win.show();
	employee_form.items.items[0].focus();
      }else{
	if(employee_win.isVisible()){
	  employee_win.hide();
	}else{
	  employee_win.show();
	  employee_form.items.items[0].focus();
	}
      }
    }
  );
});