var initModals = function () {
    alert('hi');
    $.fn.modalmanager.defaults.resize = true;
    $.fn.modalmanager.defaults.spinner = '<div class="loading-spinner fade" style="width: 200px; margin-left: -100px;"><img src="assets/img/ajax-modal-loading.gif" align="middle">&nbsp;<span style="font-weight:300; color: #eee; font-size: 18px; font-family:Open Sans;">&nbsp;Loading...</div>';

    var $modal = $('#ajax-modal');
    var Products = function () {

        $('.modal_product_edit_btn').on('click', function(){
            // create the backdrop and wait for next modal to be triggered
            $('body').modalmanager('loading');

                setTimeout(function(){
                    $modal.load('/products/edit', '', function(){
                        $modal.modal();
                    });
                }, 1000);
        });

        $modal.on('click', '.update', function(){
            $modal.modal('loading');
            setTimeout(function(){
                $modal
                .modal('loading')
                .find('.modal-body')
                .prepend('<div class="alert alert-info fade in">' +
                'Updated!<button type="button" class="close" data-dismiss="alert"></button>' +
                '</div>');
            }, 1000);
        });
    }
    return {

        //main function to initiate the module
        init: function () {
            initModals();
        }
    };
}();