1 files changed, 496 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js
new file mode 100644
index 0000000..fa8a1b6
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js
@@ -0,0 +1,496 @@
+/**
+ * @class YAHOO.ext.LayoutRegion
+ * @extends YAHOO.ext.util.Observable
+ * This class represents a region in a layout manager.
+ * @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
+ * @cfg {Boolean} floatable False to disable floating (defaults to true)
+ * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
+ * @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
+ * @cfg {String} tabPosition 'top' or 'bottom' (defaults to 'bottom')
+ * @cfg {Boolean} alwaysShowTabs True to always display tabs even when only 1 panel (defaults to false)
+ * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
+ * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
+ * @cfg {String} title The title for the region (overrides panel titles)
+ * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
+ * @cfg {Float} duration The duration of the expand/collapse animation in seconds 
+ * @cfg {Float} slideDuration The duration of the slide out/in when collapsed in seconds
+ * @cfg {Boolean} autoHide False to disable disable autoHide when the mouse leaves the "floated" region (defaults to true)
+ * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
+ * @cfg {Boolean} closeOnTabs True to place the close icon on the tabs instead of the region titlebar (defaults to false)
+ * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
+ * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within 
+ * the space available, similar to FireFox 1.5 tabs (defaults to false)
+ * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
+ * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
+ */
+YAHOO.ext.LayoutRegion = function(mgr, config, pos){
+    YAHOO.ext.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
+    var dh = YAHOO.ext.DomHelper;
+    /** This regions container element @type YAHOO.ext.Element */
+    this.el = dh.append(mgr.el.dom, {tag: 'div', cls: 'ylayout-panel ylayout-panel-' + this.position}, true);
+    /** This regions title element @type YAHOO.ext.Element */
+    this.titleEl = dh.append(this.el.dom, {tag: 'div', unselectable: 'on', cls: 'yunselectable ylayout-panel-hd ylayout-title-'+this.position, children:[
+        {tag: 'span', cls: 'yunselectable ylayout-panel-hd-text', unselectable: 'on', html: '&#160;'},
+        {tag: 'div', cls: 'yunselectable ylayout-panel-hd-tools', unselectable: 'on'}
+    ]}, true);
+    this.titleEl.enableDisplayMode();
+    /** This regions title text element @type HTMLElement */
+    this.titleTextEl = this.titleEl.dom.firstChild;
+    this.tools = getEl(this.titleEl.dom.childNodes[1], true);
+    this.closeBtn = this.createTool(this.tools.dom, 'ylayout-close');
+    this.closeBtn.enableDisplayMode();
+    this.closeBtn.on('click', this.closeClicked, this, true);
+    this.closeBtn.hide();
+    /** This regions body element @type YAHOO.ext.Element */
+    this.bodyEl = dh.append(this.el.dom, {tag: 'div', cls: 'ylayout-panel-body'}, true);
+    this.visible = false;
+    this.collapsed = false;
+    this.hide();
+    this.on('paneladded', this.validateVisibility, this, true);
+    this.on('panelremoved', this.validateVisibility, this, true);
+    
+    this.applyConfig(config);
+};
+YAHOO.extendX(YAHOO.ext.LayoutRegion, YAHOO.ext.BasicLayoutRegion, {
+    applyConfig : function(config){
+        if(config.collapsible && this.position != 'center' && !this.collapsedEl){
+            var dh = YAHOO.ext.DomHelper;
+            this.collapseBtn = this.createTool(this.tools.dom, 'ylayout-collapse-'+this.position);
+            this.collapseBtn.mon('click', this.collapse, this, true);
+            /** This regions collapsed element @type YAHOO.ext.Element */
+            this.collapsedEl = dh.append(this.mgr.el.dom, {tag: 'div', cls: 'ylayout-collapsed ylayout-collapsed-'+this.position, children:[
+                {tag: 'div', cls: 'ylayout-collapsed-tools'}
+            ]}, true);
+            if(config.floatable !== false){
+               this.collapsedEl.addClassOnOver('ylayout-collapsed-over');
+               this.collapsedEl.mon('click', this.collapseClick, this, true);
+            }
+            this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild, 'ylayout-expand-'+this.position);
+            this.expandBtn.mon('click', this.expand, this, true);
+        }
+        if(this.collapseBtn){
+            this.collapseBtn.setVisible(config.collapsible == true);
+        }
+        this.cmargins = config.cmargins || this.cmargins || 
+                         (this.position == 'west' || this.position == 'east' ? 
+                             {top: 0, left: 2, right:2, bottom: 0} : 
+                             {top: 2, left: 0, right:0, bottom: 2});
+        this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+        this.bottomTabs = config.tabPosition != 'top';
+        this.autoScroll = config.autoScroll || false;
+        if(this.autoScroll){
+            this.bodyEl.setStyle('overflow', 'auto');
+        }else{
+            this.bodyEl.setStyle('overflow', 'hidden');
+        }
+        if((!config.titlebar && !config.title) || config.titlebar === false){
+            this.titleEl.hide();
+        }else{
+            this.titleEl.show();
+            if(config.title){
+                this.titleTextEl.innerHTML = config.title;
+            }
+        }
+        this.duration = config.duration || .30;
+        this.slideDuration = config.slideDuration || .45;
+        this.config = config;
+        if(config.collapsed){
+            this.collapse(true);
+        }
+    },
+    /**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    isVisible : function(){
+        return this.visible;
+    },
+    
+    getBox : function(){
+        var b;
+        if(!this.collapsed){
+            b = this.el.getBox(false, true);
+        }else{
+            b = this.collapsedEl.getBox(false, true);
+        }
+        return b;
+    },
+    
+    getMargins : function(){
+        return this.collapsed ? this.cmargins : this.margins;
+    },
+    
+    highlight : function(){
+        this.el.addClass('ylayout-panel-dragover'); 
+    },
+    
+    unhighlight : function(){
+        this.el.removeClass('ylayout-panel-dragover'); 
+    },
+    
+    updateBox : function(box){
+        this.box = box;
+        if(!this.collapsed){
+            this.el.dom.style.left = box.x + 'px';
+            this.el.dom.style.top = box.y + 'px';
+            this.el.setSize(box.width, box.height);
+            var bodyHeight = this.titleEl.isVisible() ? box.height - (this.titleEl.getHeight()||0) : box.height;
+            bodyHeight -= this.el.getBorderWidth('tb');
+            bodyWidth = box.width - this.el.getBorderWidth('rl');
+            this.bodyEl.setHeight(bodyHeight);
+            this.bodyEl.setWidth(bodyWidth);
+            var tabHeight = bodyHeight;
+            if(this.tabs){
+                tabHeight = this.tabs.syncHeight(bodyHeight);
+                if(YAHOO.ext.util.Browser.isIE) this.tabs.el.repaint();
+            }
+            this.panelSize = {width: bodyWidth, height: tabHeight};
+            if(this.activePanel){
+                this.activePanel.setSize(bodyWidth, tabHeight);
+            }
+        }else{
+            this.collapsedEl.dom.style.left = box.x + 'px';
+            this.collapsedEl.dom.style.top = box.y + 'px';
+            this.collapsedEl.setSize(box.width, box.height);
+        }
+        if(this.tabs){
+            this.tabs.autoSizeTabs();
+        }
+    },
+    
+    /**
+     * Returns the container element for this region.
+     * @return {YAHOO.ext.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+    
+    /**
+     * Hides this region.
+     */
+    hide : function(){
+        if(!this.collapsed){
+            this.el.dom.style.left = '-2000px';
+            this.el.hide();
+        }else{
+            this.collapsedEl.dom.style.left = '-2000px';
+            this.collapsedEl.hide();
+        }
+        this.visible = false;
+        this.fireEvent('visibilitychange', this, false);
+    },
+    
+    /**
+     * Shows this region if it was previously hidden.
+     */
+    show : function(){
+        if(!this.collapsed){
+            this.el.show();
+        }else{
+            this.collapsedEl.show();
+        }
+        this.visible = true;
+        this.fireEvent('visibilitychange', this, true);
+    },
+    
+    closeClicked : function(){
+        if(this.activePanel){
+            this.remove(this.activePanel);
+        }
+    },
+    
+    collapseClick : function(e){
+       if(this.isSlid){
+           e.stopPropagation();
+           this.slideIn();
+       }else{
+           e.stopPropagation();
+           this.slideOut();
+       }   
+    },
+    
+    /**
+     * Collapses this region.
+     * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+     */
+    collapse : function(skipAnim){
+        if(this.collapsed) return;
+        this.collapsed = true;
+        if(this.split){
+            this.split.el.hide();
+        }
+        if(this.config.animate && skipAnim !== true){
+            this.fireEvent('invalidated', this);    
+            this.animateCollapse();
+        }else{
+            this.el.setLocation(-20000,-20000);
+            this.el.hide();
+            this.collapsedEl.show();
+            this.fireEvent('collapsed', this);
+            this.fireEvent('invalidated', this); 
+        }
+    },
+    
+    animateCollapse : function(){
+        // overridden
+    },
+    
+    /**
+     * Expand this region if it was previously collapsed.
+     * @param {YAHOO.ext.EventObject} e The event that triggered the expand (or null if calling manually)
+     * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
+     */
+    expand : function(e, skipAnim){
+        if(e) e.stopPropagation();
+        if(!this.collapsed) return;
+        if(this.isSlid){
+            this.slideIn(this.expand.createDelegate(this));
+            return;
+        }
+        this.collapsed = false;
+        this.el.show();
+        if(this.config.animate && skipAnim !== true){
+            this.animateExpand();
+        }else{
+            if(this.split){
+                this.split.el.show();
+            }
+            this.collapsedEl.setLocation(-2000,-2000);
+            this.collapsedEl.hide();
+            this.fireEvent('invalidated', this);
+            this.fireEvent('expanded', this);
+        }
+    },
+    
+    animateExpand : function(){
+        // overridden
+    },
+    
+    initTabs : function(){
+        this.bodyEl.setStyle('overflow', 'hidden');
+        var ts = new YAHOO.ext.TabPanel(this.bodyEl.dom, this.bottomTabs);
+        if(this.config.hideTabs){
+            ts.stripWrap.setDisplayed(false);
+        }
+        this.tabs = ts;
+        ts.resizeTabs = this.config.resizeTabs === true;
+        ts.minTabWidth = this.config.minTabWidth || 40;
+        ts.maxTabWidth = this.config.maxTabWidth || 250;
+        ts.preferredTabWidth = this.config.preferredTabWidth || 150;
+        ts.monitorResize = false;
+        ts.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
+        this.panels.each(this.initPanelAsTab, this);
+    },
+    
+    initPanelAsTab : function(panel){
+        var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null, 
+                    this.config.closeOnTab && panel.isClosable());
+        ti.on('activate', function(){ 
+              this.setActivePanel(panel); 
+        }, this, true);
+        if(this.config.closeOnTab){
+            ti.on('beforeclose', function(t, e){
+                e.cancel = true;
+                this.remove(panel);
+            }, this, true);
+        }
+        return ti;
+    },
+    
+    updatePanelTitle : function(panel, title){
+        if(this.activePanel == panel){
+            this.updateTitle(title);
+        }
+        if(this.tabs){
+            this.tabs.getTab(panel.getEl().id).setText(title);
+        }
+    },
+    
+    updateTitle : function(title){
+        if(this.titleTextEl && !this.config.title){
+            this.titleTextEl.innerHTML = (typeof title != 'undefined' && title.length > 0 ? title : "&#160;");
+        }
+    },
+    
+    setActivePanel : function(panel){
+        panel = this.getPanel(panel);
+        if(this.activePanel && this.activePanel != panel){
+            this.activePanel.setActiveState(false);
+        }
+        this.activePanel = panel;
+        panel.setActiveState(true);
+        if(this.panelSize){
+            panel.setSize(this.panelSize.width, this.panelSize.height);
+        }
+        this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
+        this.updateTitle(panel.getTitle());
+        this.fireEvent('panelactivated', this, panel);
+    },
+    
+    /**
+     * Show the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
+     * @return {YAHOO.ext.ContentPanel} The shown panel or null
+     */
+    showPanel : function(panel){
+        if(panel = this.getPanel(panel)){
+            if(this.tabs){
+                this.tabs.activate(panel.getEl().id);
+            }else{
+                this.setActivePanel(panel);
+            }
+        }
+        return panel;
+    },
+    
+    /**
+     * Get the active panel for this region.
+     * @return {YAHOO.ext.ContentPanel} The active panel or null
+     */
+    getActivePanel : function(){
+        return this.activePanel;
+    },
+    
+    validateVisibility : function(){
+        if(this.panels.getCount() < 1){
+            this.updateTitle('&#160;');
+            this.closeBtn.hide();
+            this.hide();
+        }else{
+            if(!this.isVisible()){
+                this.show();
+            }
+        }
+    },
+    
+    /**
+     * Add the passed ContentPanel(s)
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {YAHOO.ext.ContentPanel} The panel added (if only one was added)
+     */
+    add : function(panel){
+        if(arguments.length > 1){
+            for(var i = 0, len = arguments.length; i < len; i++) {
+                    this.add(arguments[i]);
+            }
+            return null;
+        }
+        if(this.hasPanel(panel)){
+            this.showPanel(panel);
+            return panel;
+        }
+        panel.setRegion(this);
+        this.panels.add(panel);
+        if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+            this.bodyEl.dom.appendChild(panel.getEl().dom);
+            if(panel.background !== true){
+                this.setActivePanel(panel);
+            }
+            this.fireEvent('paneladded', this, panel);
+            return panel;
+        }
+        if(!this.tabs){
+            this.initTabs();
+        }else{
+            this.initPanelAsTab(panel);
+        }
+        if(panel.background !== true){
+            this.tabs.activate(panel.getEl().id);
+        }
+        this.fireEvent('paneladded', this, panel);
+        return panel;
+    },
+    
+    /**
+     * Hides the tab for the specified panel.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     */
+    hidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.hideTab(panel.getEl().id);
+        }
+    },
+    
+    /**
+     * Unhides the tab for a previously hidden panel.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     */
+    unhidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.unhideTab(panel.getEl().id);
+        }
+    },
+    
+    clearPanels : function(){
+        while(this.panels.getCount() > 0){
+             this.remove(this.panels.first());
+        }
+    },
+    
+    /**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {YAHOO.ext.ContentPanel} The panel that was removed
+     */
+    remove : function(panel, preservePanel){
+        panel = this.getPanel(panel);
+        if(!panel){
+            return null;
+        }
+        var e = {};
+        this.fireEvent('beforeremove', this, panel, e);
+        if(e.cancel === true){
+            return null;
+        }
+        preservePanel = (typeof preservePanel != 'undefined' ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
+        var panelId = panel.getId();
+        this.panels.removeKey(panelId);
+        if(preservePanel){
+            document.body.appendChild(panel.getEl().dom);
+        }
+        if(this.tabs){
+            this.tabs.removeTab(panel.getEl().id);
+        }else if (!preservePanel){
+            this.bodyEl.dom.removeChild(panel.getEl().dom);
+        }
+        if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
+            var p = this.panels.first();
+            var tempEl = document.createElement('span'); // temp holder to keep IE from deleting the node
+            tempEl.appendChild(p.getEl().dom);
+            this.bodyEl.update('');
+            this.bodyEl.dom.appendChild(p.getEl().dom);
+            tempEl = null;
+            this.updateTitle(p.getTitle());
+            this.tabs = null;
+            this.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
+            this.setActivePanel(p);
+        }
+        panel.setRegion(null);
+        if(this.activePanel == panel){
+            this.activePanel = null;
+        }
+        if(this.config.autoDestroy !== false && preservePanel !== true){
+            try{panel.destroy();}catch(e){}
+        }
+        this.fireEvent('panelremoved', this, panel);
+        return panel;
+    },
+    
+    /**
+     * Returns the TabPanel component used by this region
+     * @return {YAHOO.ext.TabPanel}
+     */
+    getTabs : function(){
+        return this.tabs;    
+    },
+    
+    createTool : function(parentEl, className){
+        var btn = YAHOO.ext.DomHelper.append(parentEl, {tag: 'div', cls: 'ylayout-tools-button', 
+            children: [{tag: 'div', cls: 'ylayout-tools-button-inner ' + className, html: '&#160;'}]}, true);
+        btn.addClassOnOver('ylayout-tools-button-over');
+        return btn;
+    }
+});

diff --git a/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js new file mode 100644 index 0000000..fa8a1b6 --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js
@@ -0,0 +1,496 @@
	1	/**
	2	* @class YAHOO.ext.LayoutRegion
	3	* @extends YAHOO.ext.util.Observable
	4	* This class represents a region in a layout manager.
	5	* @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
	6	* @cfg {Boolean} floatable False to disable floating (defaults to true)
	7	* @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
	8	* @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
	9	* @cfg {String} tabPosition 'top' or 'bottom' (defaults to 'bottom')
	10	* @cfg {Boolean} alwaysShowTabs True to always display tabs even when only 1 panel (defaults to false)
	11	* @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
	12	* @cfg {Boolean} titlebar True to display a title bar (defaults to true)
	13	* @cfg {String} title The title for the region (overrides panel titles)
	14	* @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
	15	* @cfg {Float} duration The duration of the expand/collapse animation in seconds
	16	* @cfg {Float} slideDuration The duration of the slide out/in when collapsed in seconds
	17	* @cfg {Boolean} autoHide False to disable disable autoHide when the mouse leaves the "floated" region (defaults to true)
	18	* @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
	19	* @cfg {Boolean} closeOnTabs True to place the close icon on the tabs instead of the region titlebar (defaults to false)
	20	* @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
	21	* @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
	22	* the space available, similar to FireFox 1.5 tabs (defaults to false)
	23	* @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
	24	* @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
	25	*/
	26	YAHOO.ext.LayoutRegion = function(mgr, config, pos){
	27	YAHOO.ext.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
	28	var dh = YAHOO.ext.DomHelper;
	29	/** This regions container element @type YAHOO.ext.Element */
	30	this.el = dh.append(mgr.el.dom, {tag: 'div', cls: 'ylayout-panel ylayout-panel-' + this.position}, true);
	31	/** This regions title element @type YAHOO.ext.Element */
	32	this.titleEl = dh.append(this.el.dom, {tag: 'div', unselectable: 'on', cls: 'yunselectable ylayout-panel-hd ylayout-title-'+this.position, children:[
	33	{tag: 'span', cls: 'yunselectable ylayout-panel-hd-text', unselectable: 'on', html: ' '},
	34	{tag: 'div', cls: 'yunselectable ylayout-panel-hd-tools', unselectable: 'on'}
	35	]}, true);
	36	this.titleEl.enableDisplayMode();
	37	/** This regions title text element @type HTMLElement */
	38	this.titleTextEl = this.titleEl.dom.firstChild;
	39	this.tools = getEl(this.titleEl.dom.childNodes[1], true);
	40	this.closeBtn = this.createTool(this.tools.dom, 'ylayout-close');
	41	this.closeBtn.enableDisplayMode();
	42	this.closeBtn.on('click', this.closeClicked, this, true);
	43	this.closeBtn.hide();
	44	/** This regions body element @type YAHOO.ext.Element */
	45	this.bodyEl = dh.append(this.el.dom, {tag: 'div', cls: 'ylayout-panel-body'}, true);
	46	this.visible = false;
	47	this.collapsed = false;
	48	this.hide();
	49	this.on('paneladded', this.validateVisibility, this, true);
	50	this.on('panelremoved', this.validateVisibility, this, true);
	51
	52	this.applyConfig(config);
	53	};
	54
	55	YAHOO.extendX(YAHOO.ext.LayoutRegion, YAHOO.ext.BasicLayoutRegion, {
	56	applyConfig : function(config){
	57	if(config.collapsible && this.position != 'center' && !this.collapsedEl){
	58	var dh = YAHOO.ext.DomHelper;
	59	this.collapseBtn = this.createTool(this.tools.dom, 'ylayout-collapse-'+this.position);
	60	this.collapseBtn.mon('click', this.collapse, this, true);
	61	/** This regions collapsed element @type YAHOO.ext.Element */
	62	this.collapsedEl = dh.append(this.mgr.el.dom, {tag: 'div', cls: 'ylayout-collapsed ylayout-collapsed-'+this.position, children:[
	63	{tag: 'div', cls: 'ylayout-collapsed-tools'}
	64	]}, true);
	65	if(config.floatable !== false){
	66	this.collapsedEl.addClassOnOver('ylayout-collapsed-over');
	67	this.collapsedEl.mon('click', this.collapseClick, this, true);
	68	}
	69	this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild, 'ylayout-expand-'+this.position);
	70	this.expandBtn.mon('click', this.expand, this, true);
	71	}
	72	if(this.collapseBtn){
	73	this.collapseBtn.setVisible(config.collapsible == true);
	74	}
	75	this.cmargins = config.cmargins \|\| this.cmargins \|\|
	76	(this.position == 'west' \|\| this.position == 'east' ?
	77	{top: 0, left: 2, right:2, bottom: 0} :
	78	{top: 2, left: 0, right:0, bottom: 2});
	79	this.margins = config.margins \|\| this.margins \|\| {top: 0, left: 0, right:0, bottom: 0};
	80	this.bottomTabs = config.tabPosition != 'top';
	81	this.autoScroll = config.autoScroll \|\| false;
	82	if(this.autoScroll){
	83	this.bodyEl.setStyle('overflow', 'auto');
	84	}else{
	85	this.bodyEl.setStyle('overflow', 'hidden');
	86	}
	87	if((!config.titlebar && !config.title) \|\| config.titlebar === false){
	88	this.titleEl.hide();
	89	}else{
	90	this.titleEl.show();
	91	if(config.title){
	92	this.titleTextEl.innerHTML = config.title;
	93	}
	94	}
	95	this.duration = config.duration \|\| .30;
	96	this.slideDuration = config.slideDuration \|\| .45;
	97	this.config = config;
	98	if(config.collapsed){
	99	this.collapse(true);
	100	}
	101	},
	102	/**
	103	* Returns true if this region is currently visible.
	104	* @return {Boolean}
	105	*/
	106	isVisible : function(){
	107	return this.visible;
	108	},
	109
	110	getBox : function(){
	111	var b;
	112	if(!this.collapsed){
	113	b = this.el.getBox(false, true);
	114	}else{
	115	b = this.collapsedEl.getBox(false, true);
	116	}
	117	return b;
	118	},
	119
	120	getMargins : function(){
	121	return this.collapsed ? this.cmargins : this.margins;
	122	},
	123
	124	highlight : function(){
	125	this.el.addClass('ylayout-panel-dragover');
	126	},
	127
	128	unhighlight : function(){
	129	this.el.removeClass('ylayout-panel-dragover');
	130	},
	131
	132	updateBox : function(box){
	133	this.box = box;
	134	if(!this.collapsed){
	135	this.el.dom.style.left = box.x + 'px';
	136	this.el.dom.style.top = box.y + 'px';
	137	this.el.setSize(box.width, box.height);
	138	var bodyHeight = this.titleEl.isVisible() ? box.height - (this.titleEl.getHeight()\|\|0) : box.height;
	139	bodyHeight -= this.el.getBorderWidth('tb');
	140	bodyWidth = box.width - this.el.getBorderWidth('rl');
	141	this.bodyEl.setHeight(bodyHeight);
	142	this.bodyEl.setWidth(bodyWidth);
	143	var tabHeight = bodyHeight;
	144	if(this.tabs){
	145	tabHeight = this.tabs.syncHeight(bodyHeight);
	146	if(YAHOO.ext.util.Browser.isIE) this.tabs.el.repaint();
	147	}
	148	this.panelSize = {width: bodyWidth, height: tabHeight};
	149	if(this.activePanel){
	150	this.activePanel.setSize(bodyWidth, tabHeight);
	151	}
	152	}else{
	153	this.collapsedEl.dom.style.left = box.x + 'px';
	154	this.collapsedEl.dom.style.top = box.y + 'px';
	155	this.collapsedEl.setSize(box.width, box.height);
	156	}
	157	if(this.tabs){
	158	this.tabs.autoSizeTabs();
	159	}
	160	},
	161
	162	/**
	163	* Returns the container element for this region.
	164	* @return {YAHOO.ext.Element}
	165	*/
	166	getEl : function(){
	167	return this.el;
	168	},
	169
	170	/**
	171	* Hides this region.
	172	*/
	173	hide : function(){
	174	if(!this.collapsed){
	175	this.el.dom.style.left = '-2000px';
	176	this.el.hide();
	177	}else{
	178	this.collapsedEl.dom.style.left = '-2000px';
	179	this.collapsedEl.hide();
	180	}
	181	this.visible = false;
	182	this.fireEvent('visibilitychange', this, false);
	183	},
	184
	185	/**
	186	* Shows this region if it was previously hidden.
	187	*/
	188	show : function(){
	189	if(!this.collapsed){
	190	this.el.show();
	191	}else{
	192	this.collapsedEl.show();
	193	}
	194	this.visible = true;
	195	this.fireEvent('visibilitychange', this, true);
	196	},
	197
	198	closeClicked : function(){
	199	if(this.activePanel){
	200	this.remove(this.activePanel);
	201	}
	202	},
	203
	204	collapseClick : function(e){
	205	if(this.isSlid){
	206	e.stopPropagation();
	207	this.slideIn();
	208	}else{
	209	e.stopPropagation();
	210	this.slideOut();
	211	}
	212	},
	213
	214	/**
	215	* Collapses this region.
	216	* @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
	217	*/
	218	collapse : function(skipAnim){
	219	if(this.collapsed) return;
	220	this.collapsed = true;
	221	if(this.split){
	222	this.split.el.hide();
	223	}
	224	if(this.config.animate && skipAnim !== true){
	225	this.fireEvent('invalidated', this);
	226	this.animateCollapse();
	227	}else{
	228	this.el.setLocation(-20000,-20000);
	229	this.el.hide();
	230	this.collapsedEl.show();
	231	this.fireEvent('collapsed', this);
	232	this.fireEvent('invalidated', this);
	233	}
	234	},
	235
	236	animateCollapse : function(){
	237	// overridden
	238	},
	239
	240	/**
	241	* Expand this region if it was previously collapsed.
	242	* @param {YAHOO.ext.EventObject} e The event that triggered the expand (or null if calling manually)
	243	* @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
	244	*/
	245	expand : function(e, skipAnim){
	246	if(e) e.stopPropagation();
	247	if(!this.collapsed) return;
	248	if(this.isSlid){
	249	this.slideIn(this.expand.createDelegate(this));
	250	return;
	251	}
	252	this.collapsed = false;
	253	this.el.show();
	254	if(this.config.animate && skipAnim !== true){
	255	this.animateExpand();
	256	}else{
	257	if(this.split){
	258	this.split.el.show();
	259	}
	260	this.collapsedEl.setLocation(-2000,-2000);
	261	this.collapsedEl.hide();
	262	this.fireEvent('invalidated', this);
	263	this.fireEvent('expanded', this);
	264	}
	265	},
	266
	267	animateExpand : function(){
	268	// overridden
	269	},
	270
	271	initTabs : function(){
	272	this.bodyEl.setStyle('overflow', 'hidden');
	273	var ts = new YAHOO.ext.TabPanel(this.bodyEl.dom, this.bottomTabs);
	274	if(this.config.hideTabs){
	275	ts.stripWrap.setDisplayed(false);
	276	}
	277	this.tabs = ts;
	278	ts.resizeTabs = this.config.resizeTabs === true;
	279	ts.minTabWidth = this.config.minTabWidth \|\| 40;
	280	ts.maxTabWidth = this.config.maxTabWidth \|\| 250;
	281	ts.preferredTabWidth = this.config.preferredTabWidth \|\| 150;
	282	ts.monitorResize = false;
	283	ts.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
	284	this.panels.each(this.initPanelAsTab, this);
	285	},
	286
	287	initPanelAsTab : function(panel){
	288	var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
	289	this.config.closeOnTab && panel.isClosable());
	290	ti.on('activate', function(){
	291	this.setActivePanel(panel);
	292	}, this, true);
	293	if(this.config.closeOnTab){
	294	ti.on('beforeclose', function(t, e){
	295	e.cancel = true;
	296	this.remove(panel);
	297	}, this, true);
	298	}
	299	return ti;
	300	},
	301
	302	updatePanelTitle : function(panel, title){
	303	if(this.activePanel == panel){
	304	this.updateTitle(title);
	305	}
	306	if(this.tabs){
	307	this.tabs.getTab(panel.getEl().id).setText(title);
	308	}
	309	},
	310
	311	updateTitle : function(title){
	312	if(this.titleTextEl && !this.config.title){
	313	this.titleTextEl.innerHTML = (typeof title != 'undefined' && title.length > 0 ? title : " ");
	314	}
	315	},
	316
	317	setActivePanel : function(panel){
	318	panel = this.getPanel(panel);
	319	if(this.activePanel && this.activePanel != panel){
	320	this.activePanel.setActiveState(false);
	321	}
	322	this.activePanel = panel;
	323	panel.setActiveState(true);
	324	if(this.panelSize){
	325	panel.setSize(this.panelSize.width, this.panelSize.height);
	326	}
	327	this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
	328	this.updateTitle(panel.getTitle());
	329	this.fireEvent('panelactivated', this, panel);
	330	},
	331
	332	/**
	333	* Show the specified panel.
	334	* @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
	335	* @return {YAHOO.ext.ContentPanel} The shown panel or null
	336	*/
	337	showPanel : function(panel){
	338	if(panel = this.getPanel(panel)){
	339	if(this.tabs){
	340	this.tabs.activate(panel.getEl().id);
	341	}else{
	342	this.setActivePanel(panel);
	343	}
	344	}
	345	return panel;
	346	},
	347
	348	/**
	349	* Get the active panel for this region.
	350	* @return {YAHOO.ext.ContentPanel} The active panel or null
	351	*/
	352	getActivePanel : function(){
	353	return this.activePanel;
	354	},
	355
	356	validateVisibility : function(){
	357	if(this.panels.getCount() < 1){
	358	this.updateTitle(' ');
	359	this.closeBtn.hide();
	360	this.hide();
	361	}else{
	362	if(!this.isVisible()){
	363	this.show();
	364	}
	365	}
	366	},
	367
	368	/**
	369	* Add the passed ContentPanel(s)
	370	* @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
	371	* @return {YAHOO.ext.ContentPanel} The panel added (if only one was added)
	372	*/
	373	add : function(panel){
	374	if(arguments.length > 1){
	375	for(var i = 0, len = arguments.length; i < len; i++) {
	376	this.add(arguments[i]);
	377	}
	378	return null;
	379	}
	380	if(this.hasPanel(panel)){
	381	this.showPanel(panel);
	382	return panel;
	383	}
	384	panel.setRegion(this);
	385	this.panels.add(panel);
	386	if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
	387	this.bodyEl.dom.appendChild(panel.getEl().dom);
	388	if(panel.background !== true){
	389	this.setActivePanel(panel);
	390	}
	391	this.fireEvent('paneladded', this, panel);
	392	return panel;
	393	}
	394	if(!this.tabs){
	395	this.initTabs();
	396	}else{
	397	this.initPanelAsTab(panel);
	398	}
	399	if(panel.background !== true){
	400	this.tabs.activate(panel.getEl().id);
	401	}
	402	this.fireEvent('paneladded', this, panel);
	403	return panel;
	404	},
	405
	406	/**
	407	* Hides the tab for the specified panel.
	408	* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
	409	*/
	410	hidePanel : function(panel){
	411	if(this.tabs && (panel = this.getPanel(panel))){
	412	this.tabs.hideTab(panel.getEl().id);
	413	}
	414	},
	415
	416	/**
	417	* Unhides the tab for a previously hidden panel.
	418	* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
	419	*/
	420	unhidePanel : function(panel){
	421	if(this.tabs && (panel = this.getPanel(panel))){
	422	this.tabs.unhideTab(panel.getEl().id);
	423	}
	424	},
	425
	426	clearPanels : function(){
	427	while(this.panels.getCount() > 0){
	428	this.remove(this.panels.first());
	429	}
	430	},
	431
	432	/**
	433	* Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
	434	* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
	435	* @param {Boolean} preservePanel Overrides the config preservePanel option
	436	* @return {YAHOO.ext.ContentPanel} The panel that was removed
	437	*/
	438	remove : function(panel, preservePanel){
	439	panel = this.getPanel(panel);
	440	if(!panel){
	441	return null;
	442	}
	443	var e = {};
	444	this.fireEvent('beforeremove', this, panel, e);
	445	if(e.cancel === true){
	446	return null;
	447	}
	448	preservePanel = (typeof preservePanel != 'undefined' ? preservePanel : (this.config.preservePanels === true \|\| panel.preserve === true));
	449	var panelId = panel.getId();
	450	this.panels.removeKey(panelId);
	451	if(preservePanel){
	452	document.body.appendChild(panel.getEl().dom);
	453	}
	454	if(this.tabs){
	455	this.tabs.removeTab(panel.getEl().id);
	456	}else if (!preservePanel){
	457	this.bodyEl.dom.removeChild(panel.getEl().dom);
	458	}
	459	if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
	460	var p = this.panels.first();
	461	var tempEl = document.createElement('span'); // temp holder to keep IE from deleting the node
	462	tempEl.appendChild(p.getEl().dom);
	463	this.bodyEl.update('');
	464	this.bodyEl.dom.appendChild(p.getEl().dom);
	465	tempEl = null;
	466	this.updateTitle(p.getTitle());
	467	this.tabs = null;
	468	this.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
	469	this.setActivePanel(p);
	470	}
	471	panel.setRegion(null);
	472	if(this.activePanel == panel){
	473	this.activePanel = null;
	474	}
	475	if(this.config.autoDestroy !== false && preservePanel !== true){
	476	try{panel.destroy();}catch(e){}
	477	}
	478	this.fireEvent('panelremoved', this, panel);
	479	return panel;
	480	},
	481
	482	/**
	483	* Returns the TabPanel component used by this region
	484	* @return {YAHOO.ext.TabPanel}
	485	*/
	486	getTabs : function(){
	487	return this.tabs;
	488	},
	489
	490	createTool : function(parentEl, className){
	491	var btn = YAHOO.ext.DomHelper.append(parentEl, {tag: 'div', cls: 'ylayout-tools-button',
	492	children: [{tag: 'div', cls: 'ylayout-tools-button-inner ' + className, html: ' '}]}, true);
	493	btn.addClassOnOver('ylayout-tools-button-over');
	494	return btn;
	495	}
	496	});