Daniel@0: "use strict";
Daniel@0: 
Daniel@0: App.module("MainRegionModule", function (MainRegionModule, App, Backbone, Marionette, $, _, Logger) {
Daniel@0: 
Daniel@0:     MainRegionModule.MainRegionView = Backbone.View.extend({
Daniel@0: 
Daniel@0:         initialize: function(options) {
Daniel@0:             var _this = this;
Daniel@0:             _this.options = _.defaults(options || {}, this.options);
Daniel@0: 
Daniel@0:             var $collectionsGridEl = _this.$(".config-grid");
Daniel@0:             var $recordingsGridEl = $collectionsGridEl.clone();
Daniel@0:             $recordingsGridEl.appendTo(_this.el);
Daniel@0: 
Daniel@0:             // Render when the state changes
Daniel@0:             _this.options.state.on("change", function() {
Daniel@0:                 _this.render();
Daniel@0:             });
Daniel@0: 
Daniel@0:             // Init sub-views
Daniel@0:             _this._musicCollectionConfigGridView = new MainRegionModule.ConfigGridView({
Daniel@0:                     el: $collectionsGridEl,
Daniel@0:                     state: _this.options.state,
Daniel@0:                     configGrid: _this.options.state.get("musicCollectionGrid"),
Daniel@0:                     parentState: _this.options.state,
Daniel@0:                     parentContainerElement: _this.el
Daniel@0:                 });
Daniel@0: 
Daniel@0:             _this._musicRecordingConfigGridView  = new MainRegionModule.ConfigGridView({
Daniel@0:                     el: $recordingsGridEl,
Daniel@0:                     state: _this.options.state,
Daniel@0:                     configGrid: _this.options.state.get("musicRecordingGrid"),
Daniel@0:                     parentState: _this.options.state,
Daniel@0:                     parentContainerElement: _this.el
Daniel@0:                 });
Daniel@0: 
Daniel@0:             _this._$flipper = $.bem.generateElement("main-region", "flipper");
Daniel@0: 
Daniel@0:             _this._$flipper.append(
Daniel@0:                     _this._musicRecordingConfigGridView.$ghost,
Daniel@0:                     _this._musicCollectionConfigGridView.$ghost
Daniel@0:             );
Daniel@0:             _this._$flipperContainer = $.bem.generateElement("main-region", "flipper-container");
Daniel@0:             _this._$flipperContainer.append(_this._$flipper);
Daniel@0: 
Daniel@0:             _this._$flipper.on(
Daniel@0:                     "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
Daniel@0:                     function() {
Daniel@0:                         _this._stopFlipping();
Daniel@0:                     }
Daniel@0:                 );
Daniel@0: 
Daniel@0:             _this.render(true, true);
Daniel@0:         },
Daniel@0: 
Daniel@0:         render: function(deep, instant) {
Daniel@0:             var _this = this;
Daniel@0: 
Daniel@0:             var musicRecordingsGridNeedsToBeShown = !! _this.options.state.get("musicRecordingsGridIsShown");
Daniel@0:             var gridViewToShow =  musicRecordingsGridNeedsToBeShown ? _this._musicRecordingConfigGridView : _this._musicCollectionConfigGridView;
Daniel@0:             var gridViewToHide = !musicRecordingsGridNeedsToBeShown ? _this._musicRecordingConfigGridView : _this._musicCollectionConfigGridView;
Daniel@0: 
Daniel@0:             // need to swap grids
Daniel@0:             if (!gridViewToShow.el.getAttribute("data-active")) {
Daniel@0: 
Daniel@0:                 // launch the flipper
Daniel@0:                 if (!instant) {
Daniel@0:                     if (!_this.isSwitchingBetweenGrids()) {
Daniel@0:                         _this._$flipper.removeClass("main-region__flipper_animating");
Daniel@0:                         _this._$flipper.setMod("main-region", "flipper", "to", !musicRecordingsGridNeedsToBeShown ? "recording" : "collection");
Daniel@0:                         _this._$flipper.addClass("main-region__flipper_animating");
Daniel@0:                         _this._$flipperContainer.appendTo(_this.el);
Daniel@0:                     }
Daniel@0:                     setTimeout(function() {
Daniel@0:                         _this._$flipper.setMod("main-region", "flipper", "to", musicRecordingsGridNeedsToBeShown ? "recording" : "collection");
Daniel@0:                     }, 10);
Daniel@0:                 }
Daniel@0: 
Daniel@0:                 // swap the grids and render a new current one
Daniel@0:                 gridViewToHide.$el.attr("data-active", null).detach();
Daniel@0:                 gridViewToShow.$el.attr("data-active", "1") .appendTo(_this.$el);
Daniel@0: //                gridViewToHide.$el.attr("data-active", null).hide();
Daniel@0: //                gridViewToShow.$el.attr("data-active", "1") .show();
Daniel@0:                 gridViewToShow.render(true, true);
Daniel@0: 
Daniel@0:             // no need to swap grids - render only if it's a deep render
Daniel@0:             } else if (deep) {
Daniel@0:                 gridViewToShow.render(deep, instant);
Daniel@0:             }
Daniel@0:         },
Daniel@0: 
Daniel@0:         isSwitchingBetweenGrids: function() {
Daniel@0:             var _this = this;
Daniel@0:             return _this._$flipperContainer.parent().length;
Daniel@0:         },
Daniel@0: 
Daniel@0:         _stopFlipping: function() {
Daniel@0:             var _this = this;
Daniel@0:             _this._$flipperContainer.detach();
Daniel@0:         },
Daniel@0:     });
Daniel@0: }, Logger);