(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function(require, exports, module) {
            module.exports = factory(require("jquery"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("animation/fx"), require("core/devices"), require("ui/slide_out"), require("ui/toolbar"), require("ui/button"))
        })
    }
    else {
        root.DevExpress.layouts = root.DevExpress.layouts || {};
        root.DevExpress.layouts.SlideOutLayout = factory(jQuery, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController, DevExpress.fx, DevExpress.devices);
        root.DevExpress.framework.html.SlideOutController = root.DevExpress.layouts.SlideOutLayout.SlideOutController
    }
}(this, function($, layoutSets, DefaultLayoutController, fx, devices) {
    var exports = {};
    var SlideOutController = DefaultLayoutController.inherit({
            ctor: function(options) {
                options = options || {};
                options.name = options.name || "slideout";
                this.swipeEnabled = options.swipeEnabled === undefined ? true : options.swipeEnabled;
                this.callBase(options)
            }, init: function(options) {
                    this.callBase(options);
                    this._navigationManager = options.navigationManager;
                    this._navigationCanceledHandler = $.proxy(this._onNavigatingCanceled, this)
                }, activate: function() {
                    var result = this.callBase.apply(this, arguments);
                    this._navigationManager.on("navigationCanceled", this._navigationCanceledHandler);
                    return result
                }, deactivate: function() {
                    this._navigationManager.off("navigationCanceled", this._navigationCanceledHandler);
                    return this.callBase.apply(this, arguments)
                }, disable: function() {
                    if (this.slideOut.option("menuVisible")) {
                        this._toggleNavigation()
                    }
                    return this.callBase.apply(this, arguments)
                }, _onNavigatingCanceled: function(args) {
                    if (this.slideOut.option("menuVisible") && args.cancelReason !== "redirect") {
                        this._toggleNavigation()
                    }
                }, _createNavigationWidget: function() {
                    this.$slideOut = $("<div data-bind='dxSlideOut: {  menuItemTemplate: $(\"#slideOutMenuItemTemplate\"), contentTemplate: \" \" }'></div>").dxCommandContainer({id: 'global-navigation'});
                    this._applyTemplate(this.$slideOut, this._layoutModel);
                    this.callBase();
                    this.slideOut = this.$slideOut.dxSlideOut("instance");
                    this.slideOut.option("swipeEnabled", this.swipeEnabled);
                    this.$slideOut.find(".dx-slideout-item-container").append(this._$mainLayout);
                    return this.$slideOut
                }, _renderNavigationImpl: function(navigationCommands) {
                    var container = this.$slideOut.dxCommandContainer("instance");
                    this._commandManager.renderCommandsToContainers(navigationCommands, [container])
                }, element: function() {
                    return this.$slideOut
                }, _showViewImpl: function(viewInfo, direction, previousViewTemplateId) {
                    this._fxOffSaved = fx.off;
                    if (this.slideOut.option("menuVisible")) {
                        fx.off = true
                    }
                    return this.callBase.apply(this, arguments)
                }, _getReadyForRenderDeferredItems: function(viewInfo) {
                    var result = this.callBase(viewInfo);
                    fx.off = this._fxOffSaved;
                    if (this.slideOut.option("menuVisible")) {
                        result = $.when(this._toggleNavigation(), result)
                    }
                    return result
                }, _onViewShown: function(viewInfo) {
                    this._refreshVisibility()
                }, _refreshVisibility: function() {
                    if (devices.real().platform === "android") {
                        this.$slideOut.css("backface-visibility", "hidden");
                        this.$slideOut.css("backface-visibility");
                        this.$slideOut.css("backface-visibility", "visible")
                    }
                }, _viewHasBackCommands: function(viewInfo) {
                    var hasBackCommands = false;
                    $.each(viewInfo.commands, function(index, command) {
                        if (((command.option("behavior") === "back" || command.option("id") === "back")) && command.option("visible")) {
                            hasBackCommands = true;
                            return false
                        }
                    });
                    return hasBackCommands
                }, _onRenderComplete: function(viewInfo) {
                    var that = this;
                    if (!that._viewHasBackCommands(viewInfo)) {
                        that._initNavigationButton(viewInfo.renderResult.$markup)
                    }
                    var $content = viewInfo.renderResult.$markup.find(".layout-content"),
                        $appbar = viewInfo.renderResult.$markup.find(".layout-toolbar-bottom"),
                        appbar = $appbar.dxToolbar("instance");
                    if (appbar) {
                        that._refreshAppbarVisibility(appbar, $content);
                        appbar.on("optionChanged", function(args) {
                            if (args.name === "items") {
                                that._refreshAppbarVisibility(appbar, $content)
                            }
                        })
                    }
                }, _refreshAppbarVisibility: function(appbar, $content) {
                    var isAppbarNotEmpty = false;
                    $.each(appbar.option("items"), function(index, item) {
                        if (item.visible) {
                            isAppbarNotEmpty = true;
                            return false
                        }
                    });
                    $content.toggleClass("has-toolbar-bottom", isAppbarNotEmpty);
                    appbar.option("visible", isAppbarNotEmpty)
                }, _initNavigationButton: function($markup) {
                    var that = this,
                        $toolbar = $markup.find(".layout-toolbar"),
                        toolbar = $toolbar.dxToolbar("instance");
                    var initNavButton = function() {
                            toolbar.option("items[0].visible", true);
                            $toolbar.find(".nav-button").dxButton("instance").option("onClick", $.proxy(that._toggleNavigation, that, $markup))
                        };
                    initNavButton();
                    toolbar.on("contentReady", function(args) {
                        initNavButton()
                    })
                }, _toggleNavigation: function($markup) {
                    return this.slideOut.toggleMenuVisibility()
                }
        });
    layoutSets["slideout"] = layoutSets["slideout"] || [];
    layoutSets["slideout"].push({
        platform: "ios", controller: new SlideOutController
    });
    layoutSets["slideout"].push({
        platform: "android", controller: new SlideOutController
    });
    layoutSets["slideout"].push({
        platform: "generic", controller: new SlideOutController
    });
    layoutSets["slideout"].push({
        platform: "win", controller: new SlideOutController
    });
    exports.SlideOutController = SlideOutController;
    return exports
}));