Ext.onReady(function(){
  Ext.Direct.addProvider(Ext.app.REMOTING_API);

  var Cookies = Ext.util.Cookies;
  Ext.BLANK_IMAGE_URL = 'assets/images/s.gif';
  Ext.form.Field.prototype.msgTarget = 'under';

  var lastKnownUser = Cookies.get('lun') || '';

  var formPanel = new Ext.FormPanel({
    enableOverflow: false,
    labelWidth: 70,
    labelAlign: 'top',
    monitorValid: true,
    baseCls: 'x-plain',
    el: 'form-box',
    autoHeight: true,
    defaultType: 'textfield',
    defaults: {
      validationEvent: false,
      validateOnBlur: false
    },
    items: [{
      id: 'userName',
      fieldLabel: 'Username',
      name: 'userName',
      width: 185,
      allowBlank: false,
      autoCreate: {
        tag: "input",
        type: "text",
        autocomplete: "on"
      }
    }, {
      id: 'password',
      fieldLabel: 'Password',
      name: 'password',
      width: 185,
      allowBlank: false,
      inputType: 'password'
    }],
    buttons: [{
      id:'signin',
      text: 'Sign In',
      disabled: true,
      handler: doLogin,
      formBind: true
    }],
    keys: [{
      key: 13,
      fn: doLogin
    }]
  });


  var panel = new Ext.Panel({
    layout:'table',
    layoutConfig:{columns:2},
    frame: true,
    el: 'login-box',
    autoHeight: true,
    items: [{
      xtype: 'box',
      el: 'info-box',
      colspan: 2,
      cellCls:'info-cell'
    },{
      xtype: 'box',
      width: 150,
      el: 'left-box',
      cellCls:'left-cell'
    },formPanel]
  });
  panel.render();

  function doLogin(){
    var form = formPanel.getForm();
    var signin = Ext.getCmp('signin');
    if (form.isValid()) {
      Ext.getDom('logo').src = 'assets/images/extlogo64-anim.gif';
      var o = form.getFieldValues();
      saveCookies(o);
      form.callFieldMethod('disable');
      signin.formBind = false;
      signin.disable();
      LoginAction.doLogin(o.userName.trim(), o.password, null, getTimeOffset(), function(url, e){
        if (e.status === true && url) {
          window.location.href = url;
        } else {
          Ext.getDom('logo').src = 'assets/images/extlogo64.gif';
          form.callFieldMethod('enable');
          signin.formBind = true;
          signin.enable();
          Ext.get("instructions-ct").slideOut('t', {
            callback: function(){
              Ext.get("msg-ct").update(e.message).slideIn('t');
            },
            useDisplay: true,
            duration: 0.2
          });
        }
      });
    }
  }

  function getTimeOffset(){
    var date = new Date();
      date.setFullYear(date.getFullYear() + 1);
    return ((new Date().getTimezoneOffset() / 60) * -1) * 1000 * 60 * 60;
  }

  function saveCookies(o){
    var date = new Date();
    date.setFullYear(date.getFullYear() + 1);
    Cookies.set('lun', o.userName, date);
  }

  if (lastKnownUser) {
    formPanel.items.get('userName').setValue(lastKnownUser);
    formPanel.items.get('password').focus(true, true);
  } else {
    formPanel.items.get('userName').focus(true, true);
  }
});