/**
 * This class is the controller for the main view for the application. It is specified as
 * the "controller" of the Main view class.
 */
Ext.define('saas.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

    onToggleNavigationSize: function () {
        var me = this,
        viewModel = me.getViewModel(),
        refs = me.getReferences(),
        navigationList = refs.navigationTreeList,
        navCollapsed = !navigationList.navCollapsed,
        new_width = navCollapsed ? viewModel.get('smallNavWidth') : viewModel.get('navWidth'),
        newLogoImgStyle = navCollapsed ? { width: 36, height: 36, top: 6, left: 12 } : { width: 32, height: 32, top: 8, left: 28 },
        newLogoTextStyle = navCollapsed ? {
            0: { opacity: 0 },
            100: { opacity: 0, display: 'none' }
        } : {
            10: { opacity: 0 },
            90: { opacity: 1 }
        },
        newNavIconStyle = navCollapsed ? { marginLeft: 6, fontSize: 28 } : { marginLeft: 22, fontSize: 24 },
        newNavTextStyle = navCollapsed ? { opacity: 0 } : { opacity: 1 },
        ope = navCollapsed ? 'addCls' : 'removeCls',
        toggleIconCls = navCollapsed ? 'sa-arrows-right' : 'sa-arrows-left';

        var mainLogo = refs.mainLogo;
        var logoImg = mainLogo.el.dom.getElementsByTagName('img')[0];
        var logoText = mainLogo.el.dom.getElementsByClassName('logo-text')[0];
        var navItems = navigationList.el.dom.getElementsByClassName('x-navitem');
        var toggleIcon = Ext.getCmp('main-navigation-toggle-btn');

        Ext.suspendLayouts();
        
        toggleIcon.setIconCls('x-sa ' + toggleIconCls);

        mainLogo.animate({dynamic: true, duration: 500, to: {width: new_width}});
        Ext.fly(logoImg).animate({dynamic: true, duration: 500, to: newLogoImgStyle});
        Ext.fly(logoText).animate({dynamic: true, duration: 500, keyframes: newLogoTextStyle});
        navigationList.body.animate({dynamic: true, duration: 500, to: {width: new_width}});
        navigationList.animate({dynamic: true, duration: 500, to: {width: new_width}});

        for(var i = 0; i < navItems.length; i++) {
            var item = navItems[i];
            var icon = item.getElementsByClassName('nav-inner-icon')[0];
            var text = item.getElementsByClassName('nav-inner-text')[0];

            Ext.fly(icon).animate({dynamic: true, duration: 500, to: newNavIconStyle});
            Ext.fly(text).animate({dynamic: true, duration: 500, to: newNavTextStyle});
        }

        navigationList.el[ope]('nav-collapsed');

        navigationList.navCollapsed = navCollapsed;
        Ext.resumeLayouts(true);
    },

    onLogout: function() {
        this.fireEvent('logout');
    }
});