Creating modal views with emberjs and movejs

animation_style.js

Luh.Ui.AnimationStyle = {
  FROM_DOWN: 0
  , FROM_UP: 1
  , FROM_LEFT: 2
  , FROM_RIGHT: 3
  , NONE: 4
};

app.js

App.modalView = Luh.Ui.ModalView.create({
  classNames: ['modal'],
  animationStyle: Luh.Ui.AnimationStyle.FROM_DOWN
});

modal_view.js

Luh.Ui.ModalView = SC.View.extend({

  position: null,
  move: null,
  defaultHidden: true,
  duration: '1s',
  animationStyle: Luh.Ui.AnimationStyle.FROM_RIGHT,

  didInsertElement: function() {

    if ( this.defaultHidden ) {

      set(this, 'isVisible', false);

      if ( this.animationStyle !== Luh.Ui.AnimationStyle.NONE ) {

        var id = get( this, 'elementId');
        var position;

        if ( this._isHorizontalAnimation() ) {

          this.move = $(window).width();
          position = this.move;

          if ( this.animationStyle  === Luh.Ui.AnimationStyle.FROM_LEFT ) {
            position = position*(-1);
          }

          var that = this;

          move('#'+id)
            .x(position)
            .end(function(){

              set(that, 'isVisible', true);
              set(that, 'position', position);

             });

        } else {

          this.move = $(window).height();
          position = this.move;

          if ( this.animationStyle  === Luh.Ui.AnimationStyle.FROM_UP ) {
            position = position*(-1);
          }

          var that = this;

          move('#'+id)
            .y(position)
            .end(function(){

              set(that, 'isVisible', true);
              set(that, 'position', position);

             });

        }

      }

    }

  },

  toogle: function() {

    if ( this.animationStyle !== Luh.Ui.AnimationStyle.NONE ) {

      var id = get(this, 'elementId');
      var position = get(this, 'position');

      position = ( position !== 0 ) ? 0 : this.move; 

      if ( this.animationStyle === Luh.Ui.AnimationStyle.FROM_UP || this.animationStyle === Luh.Ui.AnimationStyle.FROM_LEFT ) {
        position = position*(-1);
      }


      if ( this._isHorizontalAnimation() ) {

        move('#'+id)
          .x(position)
          .duration(this.duration)
          .end();

      } else {

        move('#'+id)
          .y(position)
          .duration(this.duration)
          .end();

      }

      set(this, 'position', position);

    } else {

      var isVisible = get(this, 'isVisible'); 
      set(this, 'isVisible', !isVisible);

    }

  },

  _isHorizontalAnimation: function(){

    return ( this.animationStyle === Luh.Ui.AnimationStyle.FROM_LEFT 
            || this.animationStyle === Luh.Ui.AnimationStyle.FROM_RIGHT); 

  }

});