summaryrefslogtreecommitdiff
path: root/frontend/beta/js/YUI-extensions/layout
Side-by-side diff
Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout') (more/less context) (show whitespace changes)
-rw-r--r--frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js265
-rw-r--r--frontend/beta/js/YUI-extensions/layout/BorderLayout.js281
-rw-r--r--frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js207
-rw-r--r--frontend/beta/js/YUI-extensions/layout/ContentPanels.js325
-rw-r--r--frontend/beta/js/YUI-extensions/layout/LayoutManager.js135
-rw-r--r--frontend/beta/js/YUI-extensions/layout/LayoutRegion.js496
-rw-r--r--frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js68
-rw-r--r--frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js282
8 files changed, 2059 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js
new file mode 100644
index 0000000..b7ea273
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js
@@ -0,0 +1,265 @@
+/**
+ * @class YAHOO.ext.BasicLayoutRegion
+ * @extends YAHOO.ext.util.Observable
+ * This class represents a lightweight region in a layout manager. This region does not move dom nodes
+ * and does not have a titlebar, tabs or any other features. All it does is size and position
+ * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
+ */
+YAHOO.ext.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
+ this.mgr = mgr;
+ this.position = pos;
+ this.events = {
+ /**
+ * @event beforeremove
+ * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
+ * @param {YAHOO.ext.LayoutRegion} this
+ * @param {YAHOO.ext.ContentPanel} panel The panel
+ * @param {Object} e The cancel event object
+ */
+ 'beforeremove' : true,
+ /**
+ * @event invalidated
+ * Fires when the layout for this region is changed.
+ * @param {YAHOO.ext.LayoutRegion} this
+ */
+ 'invalidated' : true,
+ /**
+ * @event visibilitychange
+ * Fires when this region is shown or hidden
+ * @param {YAHOO.ext.LayoutRegion} this
+ * @param {Boolean} visibility true or false
+ */
+ 'visibilitychange' : true,
+ /**
+ * @event paneladded
+ * Fires when a panel is added.
+ * @param {YAHOO.ext.LayoutRegion} this
+ * @param {YAHOO.ext.ContentPanel} panel The panel
+ */
+ 'paneladded' : true,
+ /**
+ * @event panelremoved
+ * Fires when a panel is removed.
+ * @param {YAHOO.ext.LayoutRegion} this
+ * @param {YAHOO.ext.ContentPanel} panel The panel
+ */
+ 'panelremoved' : true,
+ /**
+ * @event collapsed
+ * Fires when this region is collapsed.
+ * @param {YAHOO.ext.LayoutRegion} this
+ */
+ 'collapsed' : true,
+ /**
+ * @event expanded
+ * Fires when this region is expanded.
+ * @param {YAHOO.ext.LayoutRegion} this
+ */
+ 'expanded' : true,
+ /**
+ * @event panelactivated
+ * Fires when a panel is activated.
+ * @param {YAHOO.ext.LayoutRegion} this
+ * @param {YAHOO.ext.ContentPanel} panel The activated panel
+ */
+ 'panelactivated' : true,
+ /**
+ * @event resized
+ * Fires when the user resizes this region.
+ * @param {YAHOO.ext.LayoutRegion} this
+ * @param {Number} newSize The new size (width for east/west, height for north/south)
+ */
+ 'resized' : true
+ };
+ /** A collection of panels in this region. @type YAHOO.ext.util.MixedCollection */
+ this.panels = new YAHOO.ext.util.MixedCollection();
+ this.panels.getKey = this.getPanelId.createDelegate(this);
+ this.box = null;
+ this.activePanel = null;
+ if(skipConfig !== true){
+ this.applyConfig(config);
+ }
+};
+
+YAHOO.extendX(YAHOO.ext.BasicLayoutRegion, YAHOO.ext.util.Observable, {
+ getPanelId : function(p){
+ return p.getId();
+ },
+
+ applyConfig : function(config){
+ this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+ this.config = config;
+ },
+
+ /**
+ * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
+ * the width, for horizontal (north, south) the height.
+ * @param {Number} newSize The new width or height
+ */
+ resizeTo : function(newSize){
+ if(this.activePanel){
+ var el = this.activePanel.getEl();
+ switch(this.position){
+ case 'east':
+ case 'west':
+ el.setWidth(newSize);
+ this.fireEvent('resized', this, newSize);
+ break;
+ case 'north':
+ case 'south':
+ el.setHeight(newSize);
+ this.fireEvent('resized', this, newSize);
+ break;
+ }
+ }
+ },
+
+ getBox : function(){
+ return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
+ },
+
+ getMargins : function(){
+ return this.margins;
+ },
+
+ updateBox : function(box){
+ this.box = box;
+ var el = this.activePanel.getEl();
+ el.dom.style.left = box.x + 'px';
+ el.dom.style.top = box.y + 'px';
+ el.setSize(box.width, box.height);
+ },
+
+ /**
+ * Returns the container element for this region.
+ * @return {YAHOO.ext.Element}
+ */
+ getEl : function(){
+ return this.activePanel;
+ },
+
+ /**
+ * Returns true if this region is currently visible.
+ * @return {Boolean}
+ */
+ isVisible : function(){
+ return this.activePanel ? true : false;
+ },
+
+ setActivePanel : function(panel){
+ panel = this.getPanel(panel);
+ if(this.activePanel && this.activePanel != panel){
+ this.activePanel.setActiveState(false);
+ this.activePanel.getEl().setStyle({left:-10000,right:-10000});
+ }
+ this.activePanel = panel;
+ panel.setActiveState(true);
+ if(this.box){
+ panel.setSize(this.box.width, this.box.height);
+ }
+ this.fireEvent('panelactivated', this, panel);
+ this.fireEvent('invalidated');
+ },
+
+ /**
+ * 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)){
+ 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;
+ },
+
+ /**
+ * 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);
+ panel.getEl().setStyle('position', 'absolute');
+ if(!panel.background){
+ this.setActivePanel(panel);
+ if(this.config.initialSize && this.panels.getCount()==1){
+ this.resizeTo(this.config.initialSize);
+ }
+ }
+ this.fireEvent('paneladded', this, panel);
+ return panel;
+ },
+
+ /**
+ * Returns true if the panel is in this region.
+ * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+ * @return {Boolean}
+ */
+ hasPanel : function(panel){
+ if(typeof panel == 'object'){ // must be panel obj
+ panel = panel.getId();
+ }
+ return this.getPanel(panel) ? true : false;
+ },
+
+ /**
+ * 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;
+ }
+ var panelId = panel.getId();
+ this.panels.removeKey(panelId);
+ return panel;
+ },
+
+ /**
+ * Returns the panel specified or null if it's not in this region.
+ * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+ * @return {YAHOO.ext.ContentPanel}
+ */
+ getPanel : function(id){
+ if(typeof id == 'object'){ // must be panel obj
+ return id;
+ }
+ return this.panels.get(id);
+ },
+
+ /**
+ * Returns this regions position (north/south/east/west/center).
+ * @return {String}
+ */
+ getPosition: function(){
+ return this.position;
+ }
+});
diff --git a/frontend/beta/js/YUI-extensions/layout/BorderLayout.js b/frontend/beta/js/YUI-extensions/layout/BorderLayout.js
new file mode 100644
index 0000000..0529c24
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/BorderLayout.js
@@ -0,0 +1,281 @@
+/**
+ * @class YAHOO.ext.BorderLayout
+ * @extends YAHOO.ext.LayoutManager
+ * This class represents a common layout manager used in desktop applications. For screenshots and more details,
+ * please see: <br><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
+ * Example:
+ <pre><code>
+ var layout = new YAHOO.ext.BorderLayout(document.body, {
+ north: {
+ initialSize: 25,
+ titlebar: false
+ },
+ west: {
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true
+ },
+ east: {
+ split:true,
+ initialSize: 202,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true
+ },
+ south: {
+ split:true,
+ initialSize: 100,
+ minSize: 100,
+ maxSize: 200,
+ titlebar: true,
+ collapsible: true
+ },
+ center: {
+ titlebar: true,
+ autoScroll:true,
+ resizeTabs: true,
+ minTabWidth: 50,
+ preferredTabWidth: 150
+ }
+});
+
+// shorthand
+var CP = YAHOO.ext.ContentPanel;
+
+layout.beginUpdate();
+layout.add('north', new CP('north', 'North'));
+layout.add('south', new CP('south', {title: 'South', closable: true}));
+layout.add('west', new CP('west', {title: 'West'}));
+layout.add('east', new CP('autoTabs', {title: 'Auto Tabs', closable: true}));
+layout.add('center', new CP('center1', {title: 'Close Me', closable: true}));
+layout.add('center', new CP('center2', {title: 'Center Panel', closable: false}));
+layout.getRegion('center').showPanel('center1');
+layout.endUpdate();
+</code></pre>
+* @constructor
+* Create a new BorderLayout
+* @param {String/HTMLElement/Element} container The container this layout is bound to
+* @param {Object} config Configuration options
+ */
+YAHOO.ext.BorderLayout = function(container, config){
+ config = config || {};
+ YAHOO.ext.BorderLayout.superclass.constructor.call(this, container);
+ this.factory = config.factory || YAHOO.ext.BorderLayout.RegionFactory;
+ /**
+ * True to hide the center panel while performing layouts. This helps when the center region contains
+ * heavy components such as a yui-ext grid.
+ * @type Boolean
+ */
+ this.hideOnLayout = config.hideOnLayout || false;
+ for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
+ var target = this.factory.validRegions[i];
+ if(config[target]){
+ this.addRegion(target, config[target]);
+ }
+ }
+ //this.dragOverDelegate = YAHOO.ext.EventManager.wrap(this.onDragOver, this, true);
+};
+
+YAHOO.extendX(YAHOO.ext.BorderLayout, YAHOO.ext.LayoutManager, {
+ /**
+ * Creates and adds a new region if it doesn't already exist.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Object} config The regions config object
+ * @return {BorderLayoutRegion} The new region
+ */
+ addRegion : function(target, config){
+ if(!this.regions[target]){
+ var r = this.factory.create(target, this, config);
+ this.regions[target] = r;
+ r.on('visibilitychange', this.layout, this, true);
+ r.on('paneladded', this.layout, this, true);
+ r.on('panelremoved', this.layout, this, true);
+ r.on('invalidated', this.layout, this, true);
+ r.on('resized', this.onRegionResized, this, true);
+ r.on('collapsed', this.onRegionCollapsed, this, true);
+ r.on('expanded', this.onRegionExpanded, this, true);
+ }
+ return this.regions[target];
+ },
+
+ /**
+ * Performs a layout update.
+ */
+ layout : function(){
+ if(this.updating) return;
+ //var bench = new YAHOO.ext.util.Bench();
+ //bench.start('Layout...');
+ var size = this.getViewSize();
+ var w = size.width, h = size.height;
+ var centerW = w, centerH = h, centerY = 0, centerX = 0;
+ var x = 0, y = 0;
+
+ var rs = this.regions;
+ var n = rs['north'], s = rs['south'], west = rs['west'], e = rs['east'], c = rs['center'];
+ if(this.hideOnLayout){
+ c.el.setStyle('display', 'none');
+ }
+ if(n && n.isVisible()){
+ var b = n.getBox();
+ var m = n.getMargins();
+ b.width = w - (m.left+m.right);
+ b.x = m.left;
+ b.y = m.top;
+ centerY = b.height + b.y + m.bottom;
+ centerH -= centerY;
+ n.updateBox(this.safeBox(b));
+ }
+ if(s && s.isVisible()){
+ var b = s.getBox();
+ var m = s.getMargins();
+ b.width = w - (m.left+m.right);
+ b.x = m.left;
+ var totalHeight = (b.height + m.top + m.bottom);
+ b.y = h - totalHeight + m.top;
+ centerH -= totalHeight;
+ s.updateBox(this.safeBox(b));
+ }
+ if(west && west.isVisible()){
+ var b = west.getBox();
+ var m = west.getMargins();
+ b.height = centerH - (m.top+m.bottom);
+ b.x = m.left;
+ b.y = centerY + m.top;
+ var totalWidth = (b.width + m.left + m.right);
+ centerX += totalWidth;
+ centerW -= totalWidth;
+ west.updateBox(this.safeBox(b));
+ }
+ if(e && e.isVisible()){
+ var b = e.getBox();
+ var m = e.getMargins();
+ b.height = centerH - (m.top+m.bottom);
+ var totalWidth = (b.width + m.left + m.right);
+ b.x = w - totalWidth + m.left;
+ b.y = centerY + m.top;
+ centerW -= totalWidth;
+ e.updateBox(this.safeBox(b));
+ }
+ if(c){
+ var m = c.getMargins();
+ var centerBox = {
+ x: centerX + m.left,
+ y: centerY + m.top,
+ width: centerW - (m.left+m.right),
+ height: centerH - (m.top+m.bottom)
+ };
+ if(this.hideOnLayout){
+ c.el.setStyle('display', 'block');
+ }
+ c.updateBox(this.safeBox(centerBox));
+ }
+ this.el.repaint();
+ this.fireEvent('layout', this);
+ //bench.stop();
+ //alert(bench.toString());
+ },
+
+ safeBox : function(box){
+ box.width = Math.max(0, box.width);
+ box.height = Math.max(0, box.height);
+ return box;
+ },
+
+ /**
+ * Adds a ContentPanel (or subclass) to this layout.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {YAHOO.ext.ContentPanel} panel The panel to add
+ * @return {YAHOO.ext.ContentPanel} The added panel
+ */
+ add : function(target, panel){
+ target = target.toLowerCase();
+ return this.regions[target].add(panel);
+ },
+
+ /**
+ * Adds a ContentPanel (or subclass) to this layout.
+ * @param {String} target The target region key (north, south, east, west or center).
+ * @param {Number/String/YAHOO.ext.ContentPanel} panel The index, id or panel to remove
+ * @return {YAHOO.ext.ContentPanel} The removed panel
+ */
+ remove : function(target, panel){
+ target = target.toLowerCase();
+ return this.regions[target].remove(panel);
+ },
+
+ /**
+ * Searches all regions for a panel with the specified id
+ * @param {String} panelId
+ * @return {YAHOO.ext.ContentPanel} The panel or null if it wasn't found
+ */
+ findPanel : function(panelId){
+ var rs = this.regions;
+ for(var target in rs){
+ if(typeof rs[target] != 'function'){
+ var p = rs[target].getPanel(panelId);
+ if(p){
+ return p;
+ }
+ }
+ }
+ return null;
+ },
+
+ /**
+ * Searches all regions for a panel with the specified id and activates (shows) it.
+ * @param {String/ContentPanel} panelId The panels id or the panel itself
+ * @return {YAHOO.ext.ContentPanel} The shown panel or null
+ */
+ showPanel : function(panelId) {
+ var rs = this.regions;
+ for(var target in rs){
+ var r = rs[target];
+ if(typeof r != 'function'){
+ if(r.hasPanel(panelId)){
+ return r.showPanel(panelId);
+ }
+ }
+ }
+ return null;
+ },
+
+ /**
+ * Restores this layouts state using YAHOO.ext.state.Manager or the state provided by the passed provider.
+ * @param {YAHOO.ext.state.Provider} provider (optional) An alternate state provider
+ */
+ restoreState : function(provider){
+ if(!provider){
+ provider = YAHOO.ext.state.Manager;
+ }
+ var sm = new YAHOO.ext.LayoutStateManager();
+ sm.init(this, provider);
+ }
+});
+
+YAHOO.ext.BorderLayout.RegionFactory = {};
+YAHOO.ext.BorderLayout.RegionFactory.validRegions = ['north','south','east','west','center'];
+YAHOO.ext.BorderLayout.RegionFactory.create = function(target, mgr, config){
+ target = target.toLowerCase();
+ if(config.lightweight || config.basic){
+ return new YAHOO.ext.BasicLayoutRegion(mgr, config, target);
+ }
+ switch(target){
+ case 'north':
+ return new YAHOO.ext.NorthLayoutRegion(mgr, config);
+ case 'south':
+ return new YAHOO.ext.SouthLayoutRegion(mgr, config);
+ case 'east':
+ return new YAHOO.ext.EastLayoutRegion(mgr, config);
+ case 'west':
+ return new YAHOO.ext.WestLayoutRegion(mgr, config);
+ case 'center':
+ return new YAHOO.ext.CenterLayoutRegion(mgr, config);
+ }
+ throw 'Layout region "'+target+'" not supported.';
+};
diff --git a/frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js b/frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js
new file mode 100644
index 0000000..9b4a09f
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js
@@ -0,0 +1,207 @@
+/*
+ * These classes are private internal classes
+ */
+YAHOO.ext.CenterLayoutRegion = function(mgr, config){
+ YAHOO.ext.CenterLayoutRegion.superclass.constructor.call(this, mgr, config, 'center');
+ this.visible = true;
+ this.minWidth = config.minWidth || 20;
+ this.minHeight = config.minHeight || 20;
+};
+
+YAHOO.extendX(YAHOO.ext.CenterLayoutRegion, YAHOO.ext.LayoutRegion, {
+ hide : function(){
+ // center panel can't be hidden
+ },
+
+ show : function(){
+ // center panel can't be hidden
+ },
+
+ getMinWidth: function(){
+ return this.minWidth;
+ },
+
+ getMinHeight: function(){
+ return this.minHeight;
+ }
+});
+
+
+YAHOO.ext.NorthLayoutRegion = function(mgr, config){
+ YAHOO.ext.NorthLayoutRegion.superclass.constructor.call(this, mgr, config, 'north', 'n-resize');
+ if(this.split){
+ this.split.placement = YAHOO.ext.SplitBar.TOP;
+ this.split.orientation = YAHOO.ext.SplitBar.VERTICAL;
+ this.split.el.addClass('ylayout-split-v');
+ }
+ if(typeof config.initialSize != 'undefined'){
+ this.el.setHeight(config.initialSize);
+ }
+};
+YAHOO.extendX(YAHOO.ext.NorthLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ box.height += this.split.el.getHeight();
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ box.height -= this.split.el.getHeight();
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y+box.height);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.el.setWidth(box.width);
+ var bodyWidth = box.width - this.el.getBorderWidth('rl');
+ this.bodyEl.setWidth(bodyWidth);
+ if(this.activePanel && this.panelSize){
+ this.activePanel.setSize(bodyWidth, this.panelSize.height);
+ }
+ }
+ YAHOO.ext.NorthLayoutRegion.superclass.updateBox.call(this, box);
+ }
+});
+
+YAHOO.ext.SouthLayoutRegion = function(mgr, config){
+ YAHOO.ext.SouthLayoutRegion.superclass.constructor.call(this, mgr, config, 'south', 's-resize');
+ if(this.split){
+ this.split.placement = YAHOO.ext.SplitBar.BOTTOM;
+ this.split.orientation = YAHOO.ext.SplitBar.VERTICAL;
+ this.split.el.addClass('ylayout-split-v');
+ }
+ if(typeof config.initialSize != 'undefined'){
+ this.el.setHeight(config.initialSize);
+ }
+};
+YAHOO.extendX(YAHOO.ext.SouthLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sh = this.split.el.getHeight();
+ box.height += sh;
+ box.y -= sh;
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sh = this.split.el.getHeight();
+ box.height -= sh;
+ box.y += sh;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y-sh);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.el.setWidth(box.width);
+ var bodyWidth = box.width - this.el.getBorderWidth('rl');
+ this.bodyEl.setWidth(bodyWidth);
+ if(this.activePanel && this.panelSize){
+ this.activePanel.setSize(bodyWidth, this.panelSize.height);
+ }
+ }
+ YAHOO.ext.SouthLayoutRegion.superclass.updateBox.call(this, box);
+ }
+});
+
+YAHOO.ext.EastLayoutRegion = function(mgr, config){
+ YAHOO.ext.EastLayoutRegion.superclass.constructor.call(this, mgr, config, 'east', 'e-resize');
+ if(this.split){
+ this.split.placement = YAHOO.ext.SplitBar.RIGHT;
+ this.split.orientation = YAHOO.ext.SplitBar.HORIZONTAL;
+ this.split.el.addClass('ylayout-split-h');
+ }
+ if(typeof config.initialSize != 'undefined'){
+ this.el.setWidth(config.initialSize);
+ }
+};
+YAHOO.extendX(YAHOO.ext.EastLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sw = this.split.el.getWidth();
+ box.width += sw;
+ box.x -= sw;
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ box.x += sw;
+ }
+ if(this.collapsed){
+ this.el.setHeight(box.height);
+ var bodyHeight = this.config.titlebar ? box.height - (this.titleEl.getHeight()||0) : box.height;
+ bodyHeight -= this.el.getBorderWidth('tb');
+ this.bodyEl.setHeight(bodyHeight);
+ if(this.activePanel && this.panelSize){
+ this.activePanel.setSize(this.panelSize.width, bodyHeight);
+ }
+ }
+ YAHOO.ext.EastLayoutRegion.superclass.updateBox.call(this, box);
+ }
+});
+
+YAHOO.ext.WestLayoutRegion = function(mgr, config){
+ YAHOO.ext.WestLayoutRegion.superclass.constructor.call(this, mgr, config, 'west', 'w-resize');
+ if(this.split){
+ this.split.placement = YAHOO.ext.SplitBar.LEFT;
+ this.split.orientation = YAHOO.ext.SplitBar.HORIZONTAL;
+ this.split.el.addClass('ylayout-split-h');
+ }
+ if(typeof config.initialSize != 'undefined'){
+ this.el.setWidth(config.initialSize);
+ }
+};
+YAHOO.extendX(YAHOO.ext.WestLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ box.width += this.split.el.getWidth();
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x+box.width);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ }
+ if(this.collapsed){
+ this.el.setHeight(box.height);
+ var bodyHeight = this.config.titlebar ? box.height - (this.titleEl.getHeight()||0) : box.height;
+ bodyHeight -= this.el.getBorderWidth('tb');
+ this.bodyEl.setHeight(bodyHeight);
+ if(this.activePanel && this.panelSize){
+ this.activePanel.setSize(this.panelSize.width, bodyHeight);
+ }
+ }
+ YAHOO.ext.WestLayoutRegion.superclass.updateBox.call(this, box);
+ }
+});
diff --git a/frontend/beta/js/YUI-extensions/layout/ContentPanels.js b/frontend/beta/js/YUI-extensions/layout/ContentPanels.js
new file mode 100644
index 0000000..7cfdde7
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/ContentPanels.js
@@ -0,0 +1,325 @@
+/**
+ * @class YAHOO.ext.ContentPanel
+ * @extends YAHOO.ext.util.Observable
+ * A basic ContentPanel element.
+ * @cfg {Boolean} fitToFrame True for this panel to manually adjust it's size when the region resizes (defaults to false)
+ * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a DomHelper config of the element to create
+ * @cfg {Boolean} closable True if the panel can be closed/removed
+ * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {String/HTMLElement/Element} resizeEl An element to resize if fitToFrame is true (instead of this panel's element)
+ * @cfg {Toolbar} toolbar A toolbar for this panel
+ * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with fitToFrame)
+ * @cfg {String} title The title for this panel
+ * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a fitToFrame (default is [0, 0])
+ * @constructor
+ * Create a new ContentPanel.
+ * @param {String/HTMLElement/Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ */
+YAHOO.ext.ContentPanel = function(el, config, content){
+ YAHOO.ext.ContentPanel.superclass.constructor.call(this);
+ this.el = getEl(el, true);
+ if(!this.el && config && config.autoCreate){
+ if(typeof config.autoCreate == 'object'){
+ if(!config.autoCreate.id){
+ config.autoCreate.id = el;
+ }
+ this.el = YAHOO.ext.DomHelper.append(document.body,
+ config.autoCreate, true);
+ }else{
+ this.el = YAHOO.ext.DomHelper.append(document.body,
+ {tag: 'div', cls: 'ylayout-inactive-content', id: el}, true);
+ }
+ }
+ this.closable = false;
+ this.loaded = false;
+ this.active = false;
+ if(typeof config == 'string'){
+ this.title = config;
+ }else{
+ YAHOO.ext.util.Config.apply(this, config);
+ }
+ if(this.resizeEl){
+ this.resizeEl = getEl(this.resizeEl, true);
+ }else{
+ this.resizeEl = this.el;
+ }
+ this.events = {
+ /**
+ * @event activate
+ * Fires when this panel is activated.
+ * @param {YAHOO.ext.ContentPanel} this
+ */
+ 'activate' : new YAHOO.util.CustomEvent('activate'),
+ /**
+ * @event deactivate
+ * Fires when this panel is activated.
+ * @param {YAHOO.ext.ContentPanel} this
+ */
+ 'deactivate' : new YAHOO.util.CustomEvent('deactivate')
+ };
+ if(this.autoScroll){
+ this.resizeEl.setStyle('overflow', 'auto');
+ }
+ if(content){
+ this.setContent(content);
+ }
+};
+
+YAHOO.extendX(YAHOO.ext.ContentPanel, YAHOO.ext.util.Observable, {
+ setRegion : function(region){
+ this.region = region;
+ if(region){
+ this.el.replaceClass('ylayout-inactive-content', 'ylayout-active-content');
+ }else{
+ this.el.replaceClass('ylayout-active-content', 'ylayout-inactive-content');
+ }
+ },
+
+ /**
+ * Returns the toolbar for this Panel if one was configured
+ * @return {YAHOO.ext.Toolbar}
+ */
+ getToolbar : function(){
+ return this.toolbar;
+ },
+
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent('deactivate', this);
+ }else{
+ this.fireEvent('activate', this);
+ }
+ },
+ /**
+ * Updates this panel's element
+ * @param {String} content The new content
+ * @param {<i>Boolean</i>} loadScripts (optional) true to look for and process scripts
+ */
+ setContent : function(content, loadScripts){
+ this.el.update(content, loadScripts);
+ },
+
+ /**
+ * Get the {@link YAHOO.ext.UpdateManager} for this panel. Enables you to perform Ajax updates.
+ * @return {YAHOO.ext.UpdateManager} The UpdateManager
+ */
+ getUpdateManager : function(){
+ return this.el.getUpdateManager();
+ },
+
+ /**
+ * Set a URL to be used to load the content for this panel.
+ * @param {String/Function} url The url to load the content from or a function to call to get the url
+ * @param {<i>String/Object</i>} params (optional) The string params for the update call or an object of the params. See {@link YAHOO.ext.UpdateManager#update} for more details. (Defaults to null)
+ * @param {<i>Boolean</i>} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+ * @return {YAHOO.ext.UpdateManager} The UpdateManager
+ */
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.removeListener('activate', this.refreshDelegate);
+ }
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on('activate', this._handleRefresh.createDelegate(this, [url, params, loadOnce]));
+ return this.el.getUpdateManager();
+ },
+
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.el.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
+ }
+ },
+
+ _setLoaded : function(){
+ this.loaded = true;
+ },
+
+ /**
+ * Returns this panel's id
+ * @return {String}
+ */
+ getId : function(){
+ return this.el.id;
+ },
+
+ /**
+ * Returns this panel's element
+ * @return {YAHOO.ext.Element}
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+ adjustForComponents : function(width, height){
+ if(this.toolbar){
+ var te = this.toolbar.getEl();
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+ if(this.adjustments){
+ width += this.adjustments[0];
+ height += this.adjustments[1];
+ }
+ return {'width': width, 'height': height};
+ },
+
+ setSize : function(width, height){
+ if(this.fitToFrame){
+ var size = this.adjustForComponents(width, height);
+ this.resizeEl.setSize(this.autoWidth ? 'auto' : size.width, size.height);
+ }
+ },
+
+ /**
+ * Returns this panel's title
+ * @return {String}
+ */
+ getTitle : function(){
+ return this.title;
+ },
+
+ /**
+ * Set this panel's title
+ * @param {String} title
+ */
+ setTitle : function(title){
+ this.title = title;
+ if(this.region){
+ this.region.updatePanelTitle(this, title);
+ }
+ },
+
+ /**
+ * Returns true is this panel was configured to be closable
+ * @return {Boolean}
+ */
+ isClosable : function(){
+ return this.closable;
+ },
+
+ beforeSlide : function(){
+ this.el.clip();
+ this.resizeEl.clip();
+ },
+
+ afterSlide : function(){
+ this.el.unclip();
+ this.resizeEl.unclip();
+ },
+
+ /**
+ * Force a content refresh from the URL specified in the setUrl() method.
+ * Will fail silently if the setUrl method has not been called.
+ * This does not activate the panel, just updates its content.
+ */
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
+ }
+ },
+
+ /**
+ * Destroys this panel
+ */
+ destroy : function(){
+ this.el.removeAllListeners();
+ var tempEl = document.createElement('span');
+ tempEl.appendChild(this.el.dom);
+ tempEl.innerHTML = '';
+ this.el = null;
+ }
+});
+
+/**
+ * @class YAHOO.ext.GridPanel
+ * @extends YAHOO.ext.ContentPanel
+ * @constructor
+ * Create a new GridPanel.
+ * @param {YAHOO.ext.grid.Grid} grid The grid for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ */
+YAHOO.ext.GridPanel = function(grid, config){
+ this.wrapper = YAHOO.ext.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
+ {tag: 'div', cls: 'ylayout-grid-wrapper ylayout-inactive-content'}, true);
+ this.wrapper.dom.appendChild(grid.container.dom);
+ YAHOO.ext.GridPanel.superclass.constructor.call(this, this.wrapper, config);
+ if(this.toolbar){
+ this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
+ }
+ grid.monitorWindowResize = false; // turn off autosizing
+ grid.autoHeight = false;
+ grid.autoWidth = false;
+ this.grid = grid;
+ this.grid.container.replaceClass('ylayout-inactive-content', 'ylayout-component-panel');
+};
+
+YAHOO.extendX(YAHOO.ext.GridPanel, YAHOO.ext.ContentPanel, {
+ getId : function(){
+ return this.grid.id;
+ },
+
+ /**
+ * Returns the grid for this panel
+ * @return {YAHOO.ext.grid.Grid}
+ */
+ getGrid : function(){
+ return this.grid;
+ },
+
+ setSize : function(width, height){
+ var grid = this.grid;
+ var size = this.adjustForComponents(width, height);
+ grid.container.setSize(size.width, size.height);
+ grid.autoSize();
+ },
+
+ beforeSlide : function(){
+ this.grid.getView().wrapEl.clip();
+ },
+
+ afterSlide : function(){
+ this.grid.getView().wrapEl.unclip();
+ },
+
+ destroy : function(){
+ this.grid.getView().unplugDataModel(this.grid.getDataModel());
+ this.grid.container.removeAllListeners();
+ YAHOO.ext.GridPanel.superclass.destroy.call(this);
+ }
+});
+
+
+/**
+ * @class YAHOO.ext.NestedLayoutPanel
+ * @extends YAHOO.ext.ContentPanel
+ * @constructor
+ * Create a new NestedLayoutPanel.
+ * @param {YAHOO.ext.BorderLayout} layout The layout for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ */
+YAHOO.ext.NestedLayoutPanel = function(layout, config){
+ YAHOO.ext.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
+ layout.monitorWindowResize = false; // turn off autosizing
+ this.layout = layout;
+ this.layout.getEl().addClass('ylayout-nested-layout');
+};
+
+YAHOO.extendX(YAHOO.ext.NestedLayoutPanel, YAHOO.ext.ContentPanel, {
+ setSize : function(width, height){
+ var size = this.adjustForComponents(width, height);
+ this.layout.getEl().setSize(size.width, size.height);
+ this.layout.layout();
+ },
+
+ /**
+ * Returns the nested BorderLayout for this panel
+ * @return {YAHOO.ext.BorderLayout}
+ */
+ getLayout : function(){
+ return this.layout;
+ }
+});
diff --git a/frontend/beta/js/YUI-extensions/layout/LayoutManager.js b/frontend/beta/js/YUI-extensions/layout/LayoutManager.js
new file mode 100644
index 0000000..c59bf0e
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/LayoutManager.js
@@ -0,0 +1,135 @@
+/**
+ * @class YAHOO.ext.LayoutManager
+ * @extends YAHOO.ext.util.Observable
+ * Base class for layout managers.
+ */
+YAHOO.ext.LayoutManager = function(container){
+ YAHOO.ext.LayoutManager.superclass.constructor.call(this);
+ this.el = getEl(container, true);
+ // ie scrollbar fix
+ if(this.el.dom == document.body && YAHOO.ext.util.Browser.isIE){
+ document.body.scroll = 'no';
+ }
+ this.id = this.el.id;
+ this.el.addClass('ylayout-container');
+ /** false to disable window resize monitoring @type Boolean */
+ this.monitorWindowResize = true;
+ this.regions = {};
+ this.events = {
+ /**
+ * @event layout
+ * Fires when a layout is performed.
+ * @param {YAHOO.ext.LayoutManager} this
+ */
+ 'layout' : new YAHOO.util.CustomEvent(),
+ /**
+ * @event regionresized
+ * Fires when the user resizes a region.
+ * @param {YAHOO.ext.LayoutRegion} region
+ * @param {Number} newSize The new size (width for east/west, height for north/south)
+ */
+ 'regionresized' : new YAHOO.util.CustomEvent(),
+ /**
+ * @event regioncollapsed
+ * Fires when a region is collapsed.
+ * @param {YAHOO.ext.LayoutRegion} region
+ */
+ 'regioncollapsed' : new YAHOO.util.CustomEvent(),
+ /**
+ * @event regionexpanded
+ * Fires when a region is expanded.
+ * @param {YAHOO.ext.LayoutRegion} region
+ */
+ 'regionexpanded' : new YAHOO.util.CustomEvent()
+ };
+ this.updating = false;
+ YAHOO.ext.EventManager.onWindowResize(this.onWindowResize, this, true);
+};
+
+YAHOO.extendX(YAHOO.ext.LayoutManager, YAHOO.ext.util.Observable, {
+ /**
+ * Returns true if this layout is currently being updated
+ * @return {Boolean}
+ */
+ isUpdating : function(){
+ return this.updating;
+ },
+
+ /**
+ * Suspend the LayoutManager from doing auto-layouts while
+ * making multiple add or remove calls
+ */
+ beginUpdate : function(){
+ this.updating = true;
+ },
+
+ /**
+ * Restore auto-layouts and optionally disable the manager from performing a layout
+ * @param {Boolean} noLayout true to disable a layout update
+ */
+ endUpdate : function(noLayout){
+ this.updating = false;
+ if(!noLayout){
+ this.layout();
+ }
+ },
+
+ layout: function(){
+
+ },
+
+ onRegionResized : function(region, newSize){
+ this.fireEvent('regionresized', region, newSize);
+ this.layout();
+ },
+
+ onRegionCollapsed : function(region){
+ this.fireEvent('regioncollapsed', region);
+ },
+
+ onRegionExpanded : function(region){
+ this.fireEvent('regionexpanded', region);
+ },
+
+ /**
+ * Returns the size of the current view, This method normalizes document.body and element embedded layouts and
+ * performs box-model adjustments.
+ * @return {Object} The size as an object {width: (the width), height: (the height)}
+ */
+ getViewSize : function(){
+ var size;
+ if(this.el.dom != document.body){
+ this.el.beginMeasure();
+ size = this.el.getSize();
+ this.el.endMeasure();
+ }else{
+ size = {width: YAHOO.util.Dom.getViewportWidth(), height: YAHOO.util.Dom.getViewportHeight()};
+ }
+ size.width -= this.el.getBorderWidth('lr')-this.el.getPadding('lr');
+ size.height -= this.el.getBorderWidth('tb')-this.el.getPadding('tb');
+ return size;
+ },
+
+ /**
+ * Returns the element this layout is bound to.
+ * @return {YAHOO.ext.Element}
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+ /**
+ * Returns the specified region.
+ * @param {String} target The region key
+ * @return {YAHOO.ext.LayoutRegion}
+ */
+ getRegion : function(target){
+ return this.regions[target.toLowerCase()];
+ },
+
+ onWindowResize : function(){
+ if(this.monitorWindowResize){
+ this.layout();
+ }
+ }
+});
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/LayoutStateManager.js b/frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js
new file mode 100644
index 0000000..ea22235
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js
@@ -0,0 +1,68 @@
+/*
+ * Private internal class for reading and applying state
+ */
+YAHOO.ext.LayoutStateManager = function(layout){
+ // default empty state
+ this.state = {
+ north: {},
+ south: {},
+ east: {},
+ west: {}
+ };
+};
+
+YAHOO.ext.LayoutStateManager.prototype = {
+ init : function(layout, provider){
+ this.provider = provider;
+ var state = provider.get(layout.id+'-layout-state');
+ if(state){
+ var wasUpdating = layout.isUpdating();
+ if(!wasUpdating){
+ layout.beginUpdate();
+ }
+ for(var key in state){
+ if(typeof state[key] != 'function'){
+ var rstate = state[key];
+ var r = layout.getRegion(key);
+ if(r && rstate){
+ if(rstate.size){
+ r.resizeTo(rstate.size);
+ }
+ if(rstate.collapsed == true){
+ r.collapse(true);
+ }else{
+ r.expand(null, true);
+ }
+ }
+ }
+ }
+ if(!wasUpdating){
+ layout.endUpdate();
+ }
+ this.state = state;
+ }
+ this.layout = layout;
+ layout.on('regionresized', this.onRegionResized, this, true);
+ layout.on('regioncollapsed', this.onRegionCollapsed, this, true);
+ layout.on('regionexpanded', this.onRegionExpanded, this, true);
+ },
+
+ storeState : function(){
+ this.provider.set(this.layout.id+'-layout-state', this.state);
+ },
+
+ onRegionResized : function(region, newSize){
+ this.state[region.getPosition()].size = newSize;
+ this.storeState();
+ },
+
+ onRegionCollapsed : function(region){
+ this.state[region.getPosition()].collapsed = true;
+ this.storeState();
+ },
+
+ onRegionExpanded : function(region){
+ this.state[region.getPosition()].collapsed = false;
+ this.storeState();
+ }
+};
diff --git a/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js
new file mode 100644
index 0000000..6b8ce9e
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js
@@ -0,0 +1,282 @@
+/**
+ * @class YAHOO.ext.SplitLayoutRegion
+ * @extends YAHOO.ext.LayoutRegion
+ * Adds a splitbar and other (private) useful functionality to a LayoutRegion
+ */
+YAHOO.ext.SplitLayoutRegion = function(mgr, config, pos, cursor){
+ this.cursor = cursor;
+ YAHOO.ext.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+ if(config.split){
+ this.hide();
+ }
+};
+
+YAHOO.extendX(YAHOO.ext.SplitLayoutRegion, YAHOO.ext.LayoutRegion, {
+ applyConfig : function(config){
+ YAHOO.ext.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+ if(config.split){
+ if(!this.split){
+ var splitEl = YAHOO.ext.DomHelper.append(this.mgr.el.dom,
+ {tag: 'div', id: this.el.id + '-split', cls: 'ylayout-split ylayout-split-'+this.position, html: '&#160;'});
+ /** The SplitBar for this region @type YAHOO.ext.SplitBar */
+ this.split = new YAHOO.ext.SplitBar(splitEl, this.el);
+ this.split.onMoved.subscribe(this.onSplitMove, this, true);
+ this.split.useShim = config.useShim === true;
+ YAHOO.util.Dom.setStyle([this.split.el.dom, this.split.proxy], 'cursor', this.cursor);
+ this.split.getMaximumSize = this.getMaxSize.createDelegate(this);
+ }
+ if(typeof config.minSize != 'undefined'){
+ this.split.minSize = config.minSize;
+ }
+ if(typeof config.maxSize != 'undefined'){
+ this.split.maxSize = config.maxSize;
+ }
+ }
+ },
+
+ getMaxSize : function(){
+ var cmax = this.config.maxSize || 10000;
+ var center = this.mgr.getRegion('center');
+ return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+ },
+
+ onSplitMove : function(split, newSize){
+ this.fireEvent('resized', this, newSize);
+ },
+
+ /**
+ * Returns the SplitBar for this region.
+ * @return {YAHOO.ext.SplitBar}
+ */
+ getSplitBar : function(){
+ return this.split;
+ },
+
+ hide : function(){
+ if(this.split){
+ this.split.el.setLocation(-2000,-2000);
+ this.split.el.hide();
+ }
+ YAHOO.ext.SplitLayoutRegion.superclass.hide.call(this);
+ },
+
+ show : function(){
+ if(this.split){
+ this.split.el.show();
+ }
+ YAHOO.ext.SplitLayoutRegion.superclass.show.call(this);
+ },
+
+ beforeSlide: function(){
+ if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.clip();
+ if(this.tabs) this.tabs.bodyEl.clip();
+ if(this.activePanel){
+ this.activePanel.getEl().clip();
+
+ if(this.activePanel.beforeSlide){
+ this.activePanel.beforeSlide();
+ }
+ }
+ }
+ },
+
+ afterSlide : function(){
+ if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.unclip();
+ if(this.tabs) this.tabs.bodyEl.unclip();
+ if(this.activePanel){
+ this.activePanel.getEl().unclip();
+ if(this.activePanel.afterSlide){
+ this.activePanel.afterSlide();
+ }
+ }
+ }
+ },
+
+ slideOut : function(){
+ if(!this.slideEl){
+ this.slideEl = new YAHOO.ext.Actor(
+ YAHOO.ext.DomHelper.append(this.mgr.el.dom, {tag: 'div', cls:'ylayout-slider'}));
+ if(this.config.autoHide !== false){
+ var slideInTask = new YAHOO.ext.util.DelayedTask(this.slideIn, this);
+ this.slideEl.mon('mouseout', function(e){
+ var to = e.getRelatedTarget();
+ if(to && to != this.slideEl.dom && !YAHOO.util.Dom.isAncestor(this.slideEl.dom, to)){
+ slideInTask.delay(500);
+ }
+ }, this, true);
+ this.slideEl.mon('mouseover', function(e){
+ slideInTask.cancel();
+ }, this, true);
+ }
+ }
+ var sl = this.slideEl, c = this.collapsedEl, cm = this.cmargins;
+ this.isSlid = true;
+ this.snapshot = {
+ 'left': this.el.getLeft(true),
+ 'top': this.el.getTop(true),
+ 'colbtn': this.collapseBtn.isVisible(),
+ 'closebtn': this.closeBtn.isVisible()
+ };
+ this.collapseBtn.hide();
+ this.closeBtn.hide();
+ this.el.show();
+ this.el.setLeftTop(0,0);
+ sl.startCapture(true);
+ var size;
+ switch(this.position){
+ case 'west':
+ sl.setLeft(c.getRight(true));
+ sl.setTop(c.getTop(true));
+ size = this.el.getWidth();
+ break;
+ case 'east':
+ sl.setRight(this.mgr.getViewSize().width-c.getLeft(true));
+ sl.setTop(c.getTop(true));
+ size = this.el.getWidth();
+ break;
+ case 'north':
+ sl.setLeft(c.getLeft(true));
+ sl.setTop(c.getBottom(true));
+ size = this.el.getHeight();
+ break;
+ case 'south':
+ sl.setLeft(c.getLeft(true));
+ sl.setBottom(this.mgr.getViewSize().height-c.getTop(true));
+ size = this.el.getHeight();
+ break;
+ }
+ sl.dom.appendChild(this.el.dom);
+ YAHOO.util.Event.on(document.body, 'click', this.slideInIf, this, true);
+ sl.setSize(this.el.getWidth(), this.el.getHeight());
+ this.beforeSlide();
+ if(this.activePanel){
+ this.activePanel.setSize(this.bodyEl.getWidth(), this.bodyEl.getHeight());
+ }
+ sl.slideShow(this.getAnchor(), size, this.slideDuration, null, false);
+ sl.play(function(){
+ this.afterSlide();
+ }.createDelegate(this));
+ },
+
+ slideInIf : function(e){
+ var t = YAHOO.util.Event.getTarget(e);
+ if(!YAHOO.util.Dom.isAncestor(this.el.dom, t)){
+ this.slideIn();
+ }
+ },
+
+ slideIn : function(callback){
+ if(this.isSlid && !this.slideEl.playlist.isPlaying()){
+ YAHOO.util.Event.removeListener(document.body, 'click', this.slideInIf, this, true);
+ this.slideEl.startCapture(true);
+ this.slideEl.slideHide(this.getAnchor(), this.slideDuration, null);
+ this.beforeSlide();
+ this.slideEl.play(function(){
+ this.isSlid = false;
+ this.el.setPositioning(this.snapshot);
+ this.collapseBtn.setVisible(this.snapshot.colbtn);
+ this.closeBtn.setVisible(this.snapshot.closebtn);
+ this.afterSlide();
+ this.mgr.el.dom.appendChild(this.el.dom);
+ if(typeof callback == 'function'){
+ callback();
+ }
+ }.createDelegate(this));
+ }
+ },
+
+ animateExpand : function(){
+ var em = this.margins, cm = this.cmargins;
+ var c = this.collapsedEl, el = this.el;
+ var direction, distance;
+ switch(this.position){
+ case 'west':
+ direction = 'right';
+ el.setLeft(-(el.getWidth() + (em.right+em.left)));
+ el.setTop(c.getTop(true)-cm.top+em.top);
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'east':
+ direction = 'left';
+ el.setLeft(this.mgr.getViewSize().width + em.left);
+ el.setTop(c.getTop(true)-cm.top+em.top);
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'north':
+ direction = 'down';
+ el.setLeft(em.left);
+ el.setTop(-(el.getHeight() + (em.top+em.bottom)));
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ case 'south':
+ direction = 'up';
+ el.setLeft(em.left);
+ el.setTop(this.mgr.getViewSize().height + em.top);
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ }
+ this.beforeSlide();
+ el.setStyle('z-index', '100');
+ el.show();
+ c.setLocation(-2000,-2000);
+ c.hide();
+ el.move(direction, distance, true, this.duration, function(){
+ this.afterSlide();
+ el.setStyle('z-index', '');
+ if(this.split){
+ this.split.el.show();
+ }
+ this.fireEvent('invalidated', this);
+ this.fireEvent('expanded', this);
+ }.createDelegate(this), this.config.easing || YAHOO.util.Easing.easeOut);
+ },
+
+ animateCollapse : function(){
+ var em = this.margins, cm = this.cmargins;
+ var c = this.collapsedEl, el = this.el;
+ var direction, distance;
+ switch(this.position){
+ case 'west':
+ direction = 'left';
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'east':
+ direction = 'right';
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'north':
+ direction = 'up';
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ case 'south':
+ direction = 'down';
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ }
+ this.el.setStyle('z-index', '100');
+ this.beforeSlide();
+ this.el.move(direction, distance, true, this.duration, function(){
+ this.afterSlide();
+ this.el.setStyle('z-index', '');
+ this.el.setLocation(-20000,-20000);
+ this.el.hide();
+ this.collapsedEl.show();
+ this.fireEvent('collapsed', this);
+ }.createDelegate(this), YAHOO.util.Easing.easeIn);
+ },
+
+ getAnchor : function(){
+ switch(this.position){
+ case 'west':
+ return 'left';
+ case 'east':
+ return 'right';
+ case 'north':
+ return 'top';
+ case 'south':
+ return 'bottom';
+ }
+ }
+});