Ext.onReady(function(){
  Ext.QuickTips.init();
  
  record = Ext.data.Record.create([{
    name: 'user_id',
    type: 'int'
  }]);
  reader = new Ext.data.CFJsonReader({}, record);
  
  
  //user user_id field
  var accountNumberField = new Ext.form.TextField({
    id: 'account_number',
    fieldLabel: 'Account Number',
    anchor: '95%',
    hidden: false
  });
  
  //user stock_id field
  var usernameField = new Ext.form.TextField({
    id: 'username',
    fieldLabel: 'Username',
    maxLength: 20,
    anchor: '95%'
  });
  
  //user user_id field
  var accountNumberField2 = new Ext.form.TextField({
    id: 'account_number2',
    fieldLabel: 'Account Number',
    anchor: '95%',
    hidden: false
  });
  
  //user stock_id field
  var usernameField2 = new Ext.form.TextField({
    id: 'username2',
    fieldLabel: 'Username',
    maxLength: 20,
    anchor: '95%'
  });
  
  //user year field
  var passwordField = new Ext.form.TextField({
    id: 'password',
    fieldLabel: 'Password',
    inputType: 'password',
    maxLength: 20,
    anchor: '95%'
  });
  
  /**
   * Creates the customer field with the forms defined above, lays them out in a single column format and displays the save and cancel buttons
   */
  var acceptTermsPanel = new Ext.Panel({
    labelAlign: '',
    name: 'acceptTermsPanel',
    id: 'acceptTermsPanel',
    bodyStyle: 'padding:5px',
    width: 600,
    autoScroll: true,
    shadow: true,
    html: Ext.get('terms_of_agreement').getValue(),
    buttonAlign: 'center',
    buttons: [{
      text: 'Accept',
      handler: function(){
        acceptTermsPanelWindow.hide();
				loginUserHandler(1);
      }
    }, {
      text: 'Cancel',
      handler: function(){
        acceptTermsPanelWindow.hide();
      }
    }],
    keys: [{
      key: [Ext.EventObject.ENTER],
      fn: function(){
				acceptTermsPanelWindow.hide();
        loginUserHandler(1);
      }
    }]
  });
  
  /**
   * Create a window to display the customer form information
   */
  var acceptTermsPanelWindow = new Ext.Window({
    id: 'acceptTermsPanelWindow',
    title: 'Terms of Agreement',
    closable: false,
    width: 600,
    height: 590,
    plain: true,
    layout: 'fit',
    draggable: false,
    modal: true,
    hideBorders: true,
    items: acceptTermsPanel
  });
  
  filterPanelHide = function(){
    acceptTermsPanelWindow.hide();
  };
  
  var loginUserHandler = function(hasAcceptedTerm){
		var hasAcceptedTerm = hasAcceptedTerm | 0;
		
    var myMask = new Ext.LoadMask(Ext.getCmp('userLoginWindow').el, {
      msg: "Logging-in..."
    });
    myMask.show();
    
    Ext.Ajax.request({
      url: '/remote/RemoteUserService.cfc',
      method: 'GET',
      params: {
        method: 'loginUser',
        returnFormat: 'json',
        account_number: accountNumberField.getValue(),
        username: usernameField.getValue(),
        password: passwordField.getValue(),
				has_accepted_term: hasAcceptedTerm
      },
      success: function(response){
        var result = Ext.util.JSON.decode(response.responseText);
        if (!result.HASERRORS) {
          userLoginForm.hide();
          window.location = '/?e=page.dashboard';
        } else {
          myMask.hide();
          
          //if the user hasn't accepted the terms then display it
          if (result.ERRORS.has_accepted_term) {
            acceptTermsPanelWindow.show()
          } else {
            Ext.MessageBox.alert('error', result.ERRORS.password[0]);
          }
        }
      },
      failure: function(response){
        myMask.hide();
        var result = response.responseText;
        Ext.MessageBox.alert('error', 'could not connect to the database. retry later');
      }
    });
  }
  
  var forgotPasswordHandler = function(){
    Ext.Ajax.request({
      url: '/remote/RemoteUserService.cfc',
      method: 'GET',
      params: {
        method: 'getUserPassword',
        returnFormat: 'json',
        account_number: accountNumberField2.getValue(),
        username: usernameField2.getValue()
      },
      success: function(response){
        var result = Ext.util.JSON.decode(response.responseText);
        
        
        if (!result.HASERRORS) {
        
          forgotPasswordWindow.hide();
          userLoginWindow.show();
          Ext.Msg.show({
            title: 'Error',
            msg: 'Your password has successfully been sent to your email address.',
            buttons: Ext.Msg.OK
          });
        } else {
          Ext.MessageBox.alert('error', result.ERRORS.account_number[0]);
        }
      },
      failure: function(response){
        var result = response.responseText;
        Ext.MessageBox.alert('error', 'could not connect to the database. retry later');
      }
    });
  }
  
  var forgotPasswordForm = new Ext.FormPanel({
    bodyStyle: 'padding:5px',
    width: 600,
    shadow: true,
    items: [{
      layout: 'column',
      border: false,
      items: [{
        columnWidth: 1,
        layout: 'form',
        border: false,
        items: [accountNumberField2, usernameField2]
      }]
    }],
    buttons: [{
      text: 'Send my password',
      handler: function(){
        forgotPasswordHandler();
      }
    }, {
      text: 'Cancel',
      handler: function(){
        forgotPasswordWindow.hide();
        userLoginWindow.show();
      }
    }],
    //enable the enter key to submit the form
    keys: [{
      key: [Ext.EventObject.ENTER],
      fn: function(){
        forgotPasswordHandler();
      }
    }]
  });
  
  var forgotPasswordWindow = new Ext.Window({
    id: 'userPasswordWindow',
    title: 'Forgot Password',
    closable: false,
    width: 400,
    height: 160,
    plain: true,
    layout: 'fit',
    draggable: false,
    modal: false,
    items: forgotPasswordForm
  });
  
  /**
   * Creates the customer field with the forms defined above, lays them out in a single column format and displays the save and cancel buttons
   */
  var userLoginForm = new Ext.FormPanel({
    bodyStyle: 'padding:5px',
    width: 600,
    shadow: true,
    items: [{
      layout: 'column',
      border: false,
      items: [{
        columnWidth: 1,
        layout: 'form',
        border: false,
        items: [accountNumberField, usernameField, passwordField]
      }]
    }],
    buttons: [{
      text: 'Login',
      handler: function(){
        loginUserHandler();
      }
    }, {
      text: 'Forgot Password',
      handler: function(){
        userLoginWindow.hide();
        forgotPasswordWindow.show();
      }
    }],
    //enable the enter key to submit the form
    keys: [{
      key: [Ext.EventObject.ENTER],
      fn: function(){
        loginUserHandler();
      }
    }]
  });
  
  /**
   * Create a window to display the customer form information
   */
  var userLoginWindow = new Ext.Window({
    id: 'userLoginWindow',
    title: 'Login',
    closable: false,
    width: 400,
    height: 160,
    plain: true,
    hideMode: 'visibility',
    layout: 'fit',
    draggable: false,
    modal: false,
    items: userLoginForm,
    listeners: {
      "render": function(){
        (function(){
          accountNumberField.focus();
        }).defer(250, this);
        
      }
    }
  });
  userLoginWindow.show();
  
});