User = Em.Object.extend({
  firstname: null,
  lastname: null,
  email: null,
  active: null,
  fullName: function(){
    return this.get('firstname') + " " + this.get('lastname')
  }.property('firstname', 'lastname').cacheable()
})

Auth = Em.Namespace.create({
  loadingAnimation : "static/img/ajax-loader.gif" // some way to make this app specific?
  // user is prepopulated by the app as a global object
  user: User.create(user), // some better way to do this? A cookie perhaps?
});


if ('undefined' !== typeof window) {
  window.Auth = Auth
}


Auth.loggedOutView = Em.View.extend({
  templateName: "login",
  LoginFormView: Em.View.extend({
    errorMsgBinding: 'Auth.UserFormController.content.errorMsg',
    usernameBinding: 'Auth.UserFormController.content.username',
    passwordBinding: 'Auth.UserFormController.content.password',
    submitLogin:function(){
      Auth.LoginManager.send('login', {username: this.get('username'),
                                            password: this.get('password')
                                           })
    }
  }),
});


Auth.UserFormController = Em.Object.create({
  content: Em.Object.create({username: null,
                             password: null,
                             errorMsg: null,
                            })
})


Auth.loggingInAnimation = Em.View.extend({
  templateName : "login-animation",
})


Auth.LoginManager = Em.StateManager.create({
  start: Em.State.create({
    enter: function(manager, transition){

      if (Auth.user.get('active')){
        manager.goToState('loggedInState')
      } else {
        transition.async()
        transition.resume()
        manager.goToState('loggedOutState')
      }
    }
  }),

  loggedOutState : Em.ViewState.create({
    view: Auth.loggedOutView.create(),

    loggingInState : Em.ViewState.create({
      view: Auth.loggingInAnimation.create(),
    }),

    loginErrState : Em.State.create({
      enter: function(manager, transition){
        content = ClientHub.UserFormController.get('content')
        content.set('errorMsg', "There was a problem logging you in. Please try again.")
      },
      exit: function(manager, transition){
        content = ClientHub.UserFormController.get('content')
        content.set('errorMsg', null)
      },
    }),

    login: function(manager, usernamePass){
      //send xhr request
      $.post("/auth/authentication/", usernamePass)
        .success(function(data){
          manager.send('loginSuccessful', data)
        })
        .error(function(data){
          manager.send('loginError', data)
        })
      manager.goToState('loggedOutState.loggingInState')
    },
    loginSuccessful: function(manager, data){
      Auth.user = User.create(data)
      manager.goToState('loggedInState')
    },
    loginError: function(manager, data){
      manager.goToState('loggedOutState.loginErrState')
    }

  }),

  loggedInState : Em.State.create({
    //view: Auth.loggedInView.create()
  }),

});