gistfile1.js

(function ($) {
    "use strict";

    var FonicAjaxBox = {
        $container:'',
        $wrapper:$('<div class="alert-box" style="position: absolute;z-index:30;height: 0;width: 0;"></div>'),
        $alertBox:'',
        $center_dim:{},
        $closeBox:'',
        init: function () {
            this.$container = $('#app_wrapper');
            this.$container.append(this.$wrapper);
            this.$alertBox = $('.alert-box');
//            this._appendClosebutton();
            this._registerEvenListener();
        },
        _registerEvenListener:function(){
            $(document).on('fonic-ajax-box-open', $.proxy(this._openAnimation,this));
            $(document).on('fonic-ajax-box-close', $.proxy(this._closeAnimation,this));
            $(document).on('fonic-register-closeBox', $.proxy(this._closeButtonEventListener,this));
        },
        /**
         * @param event
         * @param body
         * @private
         */
        _openAnimation:function(event,body){
            var self= this;
            this.$alertBox.append(body);
            this.$alertBox.children().prepend(this._closeButton);
            this.$center_dim = this._getWindowDimension();


            TweenMax.fromTo(
                self.$alertBox,
                1.2,
                {
                    height:0,
                    width:0,
                    autoAlpha:0,
                    left:self.$center_dim.left,
                    top:self.$center_dim.top
                },
                {
                    height:self.$center_dim.height,
                    width:self.$center_dim.width,
                    autoAlpha:1,
                    left:0,
                    top:0,
                    ease:Elastic.easeOut,
                    onComplete:self._appendBoxReady
                }
            );
        },
        _appendBoxReady:function(){
            $(document).trigger('fonic-register-closeBox');
        },
        /**
         * @private
         */
        _closeAnimation:function(){
            var self= this;
            TweenMax.fromTo(
                self.$alertBox,
                1.2,
                {
                    height:self.$center_dim.height,
                    width:self.$center_dim.width,
                    autoAlpha:0,
                    left:0,
                    top:0,
                    ease:Elastic.easeIn
                },
                {
                    height:0,
                    width:0,
                    autoAlpha:1,
                    left:-9999,
                    top:0,
                    ease:Elastic.easeIn,
                    onComplete:self._remove,
                    onCompleteParams:[self]
                }
            );
        },
        /**
         * remove the body
         * @param self
         * @private
         */
        _remove:function(self){
            self.$alertBox.children().remove();
            self.$alertBox.css('left','-9999px');
        },
        /**
         *
         * @returns {{left: number, top: number}}
         * @private
         */
        _getWindowDimension:function(){
            this.$center_dim = {};
            var wH = this.$container.height();
            var wW = this.$container.width();
            return {
                left: wW/2,
                top: wH/2,
                height:this.$container.innerHeight(),
                width:810
            };
        },

        /**
         *
         * @returns {string}
         * @private
         */
        _closeButton:function()
        {
            return '<div class="closeBox"><span class="f18 l24 clanNew">X</span></div>';
        },
        /**
         *
         * @private
         */
        _closeButtonEventListener:function(){
            this.$closeBox = $('.closeBox');
            $('.closeBox').on('click',function(){$(document).trigger('fonic-ajax-box-close');});
        }
    };
    /**
     * Initializes the component
     */
    $(
        function () {
            // Initializes the B_Gallery Grid
            FonicAjaxBox.init();
        }
    );
}(jQuery,TweenMax));