Ext.enableListenerCollection = true;
Ext.onReady( function(){
  //alert( "Layout-Ext.js Ext.onReady{...]" );
  
  
  AppUI = function(){
	        return {
	            init : function(){
	               Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	               layout = new Ext.BorderLayout(document.body, {
	                    /* north: {
                        	    titlebar: false,
	                        useShim: false,
	                        autoScroll: false,
	                        split: false,
	                        initialSize: 50,
	                        minSize: 27,
	                        maxSize: 200,
	                        collapsible: false,
	                        hidden: false
	                     }, */
	                    center: {
	                        titlebar: false,
	                        useShim: false,
	                        autoScroll: false,
                             closeOnTab: true,
                             hidden: false, 
	                        collapsible: false,
                             hideTabs: true
                          },
					east: {
	                        titlebar: true,
	                        autoScroll: true,
                             collapsible: true,
                             collapsed: true,
                             split: true,
	                        initialSize: 202,
	                        minSize: 175,
	                        maxSize: 400,
                             animate: true,
                             hidden: true
	                    }
					/*, south: {
                        	    titlebar: false,
	                        split: false,
	                        initialSize: 27,
	                        minSize: 27,
	                        maxSize: 200,
	                        collapsible: false,
	                        hidden: true
	                     }*/
	                });
	                
                     layout.beginUpdate();
                     var CP = Ext.ContentPanel;
                     
var scrollbarWidth = 0;
var el = CP;
if(el.scrollWidth > el.offsetWidth){
    scrollbarWidth = el.offsetWidth - el.clientWidth;
    if(!Ext.isIE || el.currentStyle.hasLayout){
         scrollbarWidth -= Ext.fly(el).getBorderWidth('lr'); // 'lr' means "left" and "right"
    }
}

    	                /* layout.add('north', new CP('north-content-panel', {title: 'North', closable: false, autoScroll: false})); */
    	                layout.add('center', new CP('center-content-panel', {title: 'Center Content Panel', closable: false, fitToFrame: true, adjustments: [scrollbarWidth,0], autoScroll: true}));
	                layout.add('center', new CP('center-iframe-panel', {title: 'Center Content Iframe', closable: false, fitToFrame: true, adjustments: [scrollbarWidth,-27], resizeEl: 'center-iframe', autoScroll: false}));
	                layout.add('east', new CP('east-content-panel', {title: 'East', closable: false, autoScroll: false, hidden: true}));
    	                //layout.add('south', new CP('south-content-panel', {title: 'South', closable: false, hidden: true}));

	                layout.getRegion("center").showPanel("center-content-panel");
	                layout.endUpdate();
	                
	          var loading = Ext.get('loading');
			var mask = Ext.get('loading-mask');
			
			mask.setOpacity(.8);
			mask.shift({
				xy:loading.getXY(),
				width:loading.getWidth(),
				height:loading.getHeight(), 
				remove:true,
				duration:1,	
				opacity:.3,
				easing:'bounceOut',
				callback : function(){
					loading.fadeOut({duration:.1,remove:true});
					loading = null;
				}
			});
	                
	                CP = null;
	                mask = null;
	           },
	           
	           toggleEast : function(forceVisible){
	                var east = layout.getRegion('east');
	                if ( !( typeof forceVisible == "boolean" && forceVisible == true ) && east.isVisible() ) {
	                    east.hide();
					window.ctb.items.get('toggleEast').setText('Show ' + east.activePanel.getTitle());
	               } else {
                         east.show();
                         window.ctb.items.get('toggleEast').setText('Hide ' + east.activePanel.getTitle());
                         east.expand();
	                }
	                east = null;
	           }
	     };
	       
	}();
	
    AppUI.init();

});