define(function(require) {
    'use strict';

    var CheckConnectionView;
    var $ = require('jquery');
    var _ = require('underscore');
    var __ = require('orotranslation/js/translator');
    var routing = require('routing');
    var mediator = require('oroui/js/mediator');
    var layout = require('oroui/js/layout');
    var messenger = require('oroui/js/messenger');
    var BaseView = require('oroui/js/app/views/base/view');

    CheckConnectionView = BaseView.extend({
        route: 'oro_imap_connection_check',
        entity: 'user',
        entityId: 0,
        organization: '',
        formPrefix: '',
        requestPrefix: 'oro_imap_configuration',
        events: {
            'click [data-role=check-connection-btn]': 'requestAPI',
            'change .critical-field :input': 'clear'
        },
        initialize: function(options) {
            _.extend(this, _.pick(options, ['entity', 'entityId', 'organization', 'formPrefix']));
            this.model.on('change', this.render, this);
        },

        render: function() {
            var imap = this.model.get('imap');
            var $container = this.$el.find('.folder-tree');
            if ('folders' in imap) {
                $container.replaceWith(imap.folders);
                layout.initPopover(this.$el.find('.folder-tree'));
            } else {
                $container.empty();
            }
        },

        requestAPI: function() {
            var data = this.$el.find('.check-connection').serializeArray();
            var $messageContainer = this.$el.find('.check-connection-messages');
            mediator.execute('showLoading');
            this.clear();
            $.ajax({
                type: 'POST',
                url: this.getUrl(),
                data: $.param(this.prepareData(data)),
                success: _.bind(function(response) {
                    if (response.imap) {
                        if (response.imap.error) {
                            this.showMessage('error', 'oro.imap.connection.imap.error', $messageContainer);
                        } else {
                            this.showMessage('success', 'oro.imap.connection.imap.success', $messageContainer);
                            this.model.set('imap', response.imap);
                        }
                    }
                    if (response.smtp) {
                        if (response.smtp.error) {
                            this.showMessage('error', 'oro.imap.connection.smtp.error', $messageContainer);
                        } else {
                            this.showMessage('success', 'oro.imap.connection.smtp.success', $messageContainer);
                            this.model.set('smtp', response.smtp);
                        }
                    }
                }, this),
                error: _.bind(function() {
                    this.showMessage('error', 'oro.imap.connection.error', $messageContainer);
                }, this),
                complete: function() {
                    mediator.execute('hideLoading');
                }
            });
        },

        showMessage: function(type, message, container) {
            messenger.notificationFlashMessage(type, __(message), {
                container: container,
                delay: 5000
            });
        },

        prepareData: function(data) {
            var result = [];
            var start = this.formPrefix.length;
            if (start > 0) {
                _.each(data, _.bind(function(item) {
                    if (item.name.indexOf(this.formPrefix) === 0) {
                        item.name = this.requestPrefix + item.name.substr(start);
                        result.push(item);
                    }
                }, this));
                return result;
            } else {
                return data;
            }
        },

        getUrl: function() {
            var params = {
                'for_entity': this.entity,
                'organization': this.organization
            };
            if (this.entityId !== null) {
                params.id = this.entityId;
            }

            return routing.generate(this.route, params);
        },

        clear: function() {
            this.model.set({'imap': {}, 'smtp': []});
        }
    });

    return CheckConnectionView;
});

@@ -1131,39 +1131,32 @@
  = this.
-$el.find('.folder-tree'
+ensureContainer(
 );%0A     
@@ -1361,24 +1361,24 @@
 er.empty();%0A
-
             
@@ -1383,32 +1383,454 @@
   %7D%0A        %7D,%0A%0A
+        ensureContainer: function() %7B%0A            var $container = this.$el.find('.folder-tree');%0A            if ($container.length === 0) %7B%0A                $container = $('%3Cdiv/%3E', %7B'class': 'control-group folder-tree'%7D);%0A                this.$el.find('%5Bdata-role=check-connection-btn%5D')%0A                    .closest('.control-group').parent().append($container);%0A            %7D%0A            return $container;%0A        %7D,%0A%0A
         requestA

add check folder tree container is present