upgrading to YUI 2.6

data tables are going to need some work yet, but the other stuff seems to be working 100%
2008-10-22 23:53:29 +00:00 · 2008-10-22 23:53:29 +00:00 · 20f8df1291
commit 20f8df1291
parent a041e93da8
2106 changed files with 993560 additions and 237 deletions
--- a/www/extras/yui/examples/container/assets/containerariaplugin-min.js
+++ b/www/extras/yui/examples/container/assets/containerariaplugin-min.js
@ -0,0 +1 @@
+(function(){var q=YAHOO.util.Event,s=YAHOO.util.Dom,AJ=YAHOO.lang,e=YAHOO.env.ua,D=YAHOO.widget.Panel,g=YAHOO.widget.Tooltip,F=YAHOO.widget.Module.prototype,AH=F.initDefaultConfig,w=F._initResizeMonitor,G=YAHOO.widget.Overlay.prototype,j=G.showIframe,y,A,m=false,X,p,B=false,z={},AB={},T="aria-",AI="role",u="presentation",i="usearia",l="blur",AF="focus",b="visible",W="beforeHide",o="dialog",Z="describedby",AA="context",I="hidden",J="container-close",R="a",v="href",M="button",AK="keydown",L="beforeShow",AE="close",V="alertdialog",Y="labelledby",U="xy",f="tooltip",t="destroy";var O=function(AL,AM){AL.setAttribute(AI,AM);};var Q=function(AL,AN,AM){AL.setAttribute((T+AN),AM);};AJ.augmentObject(F,{_initResizeMonitor:function(){w.call(this);var AL=this.resizeMonitor;if(AL){O(AL,u);AL.tabIndex=-1;}},configUseARIA:function(AM,AL){},configDescribedBy:function(AN,AM){var AL=AM[0];if(this.cfg.getProperty(i)&&AL){Q(this.element,Z,AL);}},configLabelledBy:function(AN,AM){var AL=AM[0];if(this.cfg.getProperty(i)&&AL){Q(this.element,Y,AL);}},initDefaultConfig:function(){this.cfg.addProperty(i,{handler:this.configUseARIA,value:(e.gecko&&e.gecko>=1.9)||(e.ie&&e.ie>=8),validator:AJ.isBoolean});this.cfg.addProperty(Y,{handler:this.configLabelledBy,validator:AJ.isString});this.cfg.addProperty(Z,{handler:this.configDescribedBy,validator:AJ.isString});AH.call(this);}},"initDefaultConfig","configUseARIA","configLabelledBy","configDescribedBy","_initResizeMonitor");G.showIframe=function(){j.call(this);var AL=this.iframe;if(this.cfg.getProperty(i)&&AL&&!AL.getAttribute(AI)){O(AL,u);AL.tabIndex=-1;}};var H=function(AM){var AL=q.getCharCode(AM);if(AL===27){if(this.cancel){this.cancel();}else{this.hide();}}};var N=function(AL){this.fireEvent(AF,AL);};var AD=function(AL){this.fireEvent(l,AL);};var AG=function(AN,AM){var AL=AM[0];if(p._manageFocus(this)){if(this.cfg.getProperty(b)&&this.focusFirst){if(!AL){this.focusFirst();}}}};var C=function(AN,AM){var AL=AM[0];if(p._manageBlur(this)&&!AL){this.fireEvent(l);}};var d=function(AN,AL,AM){this.blur();if(AM&&AM.focus){try{AM.focus();}catch(AO){}}this.unsubscribe(W,d,AM);};var P=function(){this.subscribe(W,d,X);};var E=function(){var AL=this.cfg.getProperty(AI)===o?this.innerElement:this.body;Q(AL,I,!this.cfg.getProperty(b));};var S=function(){s.getElementsByClassName(J,R,this.element,function(AL){AL.removeAttribute(v);O(AL,M);AL.tabIndex=0;});};var x=function(AM,AL){var AN=AL[0];if(AN){S.call(this);}};if(D){y=D.prototype;A=y.initDefaultConfig;AJ.augmentObject(y,{hasFocus:function(){return(p&&this===p.getActive());},configUseARIA:function(AN,AM){var AL=AM[0];if(AL){if(!p){p=new YAHOO.widget.OverlayManager();}p.register(this);this.focus=function(){if(!this.hasFocus()){this.fireEvent(AF);}};this.blur=function(){if(this.hasFocus()){this.fireEvent(l);}};q.onFocus(this.element,N,null,this);q.onBlur(this.element,AD,null,this);this.subscribe(AF,AG);this.subscribe(l,C);q.on(this.element,AK,H,null,this);this.subscribe(L,P);E.call(this);this.cfg.subscribeToConfigEvent(b,E);this.cfg.subscribeToConfigEvent(AE,x);if(!m){q.onFocus(document,function(AO){X=q.getTarget(AO);});m=true;}}},configDescribedBy:function(AO,AM){var AL=AM[0],AN;if(this.cfg.getProperty(i)&&AL){AN=this.cfg.getProperty(AI)===o?this.innerElement:this.body;Q(AN,Z,AL);}},configLabelledBy:function(AO,AM){var AL=AM[0],AN;if(this.cfg.getProperty(i)&&AL){AN=this.cfg.getProperty(AI)===o?this.innerElement:this.body;Q(AN,Y,AL);}},configRole:function(AQ,AN){var AP=AN[0],AO,AL,AM;if(AP){switch(AP){case o:AO=this.innerElement;break;case V:AO=this.body;break;}if(AO){O(AO,AP);AL=this.header;AM=AL.id||s.generateId(AL);this.cfg.setProperty(Y,AM);S.call(this);}}},initDefaultConfig:function(){A.call(this);this.cfg.addProperty(AI,{handler:this.configRole,value:o,validator:AJ.isString});}},"initDefaultConfig","configRole","configUseARIA","configLabelledBy","configDescribedBy","hasFocus");}var K=function(AN){var AL=q.getTarget(AN),AO=AB[AL.id],AM;if(AO){AM=s.getXY(AL);AO.cfg.setProperty(U,[AM[0],(AM[1]+AL.offsetHeight+5)]);AO.show();}};var h=function(AM){var AL=q.getTarget(AM),AN=AB[AL.id];if(AN&&AN.cfg.getProperty(b)){AN.hide();}};var r=function(AM){var AL=AM.id,AN=AB[AL];if(AN===this){delete AB[AL];AM.removeAttribute(Z);}};var c=function(){var AM=this.element.id,AL=z[AM];s.batch(AL,r,this,true);z[AM]=null;};var k=function(AM){var AL=AM.id||s.generateId(AM);AB[AL]=this;Q(AM,Z,this.element.id);};var a=function(){var AL=this.cfg.getProperty(AA);s.batch(AL,k,this,true);z[this.element.id]=AL;};var n=function(AN,AL){c.call(this);var AM=AL[0];if(AM){a.call(this);}};var AC=function(){Q(this.body,I,!this.cfg.getProperty(b));};if(g){g.prototype.configUseARIA=function(AN,AM){var AL=AM[0];if(AL){O(this.body,f);this.cfg.subscribeToConfigEvent(AA,n);AC.call(this);this.cfg.subscribeToConfigEvent(b,AC);this.subscribe(t,c);if(!B){q.onFocus(document,K);q.onBlur(document,h);B=true;}}};}}());
--- a/www/extras/yui/examples/container/assets/containerariaplugin.js
+++ b/www/extras/yui/examples/container/assets/containerariaplugin.js
@ -0,0 +1,633 @@
+(function () {
+
+	var Event = YAHOO.util.Event,
+		Dom = YAHOO.util.Dom,
+		Lang = YAHOO.lang,
+		UA = YAHOO.env.ua,
+		Panel = YAHOO.widget.Panel,
+		Tooltip = YAHOO.widget.Tooltip,
+		
+		ModulePrototype = YAHOO.widget.Module.prototype,
+		fnModuleInitDefaultConfig = ModulePrototype.initDefaultConfig,
+		fnModuleInitResizeMonitor = ModulePrototype._initResizeMonitor,
+		
+		OverlayPrototype = YAHOO.widget.Overlay.prototype,
+		fnOverlayShowIframe = OverlayPrototype.showIframe,
+
+		PanelPrototype,
+		fnPanelInitDefaultConfig,
+
+		m_bPanelDocumentListenersAdded = false,
+		m_oFocusedElement,	// Currently focused element in the DOM
+		m_oOverlayManager,	// An OverlayManager instance
+
+		m_bToolTipDocumentListenersAdded = false,
+		m_oContextElements = {},	// Hash of Tooltip context elements, indexed by Tooltip id
+		m_oTooltips = {},	// Hash of Tooltips indexed by context element id
+
+
+		// Private constants for strings
+
+		_ARIA_PREFIX = "aria-",
+		_ROLE = "role",
+		_PRESENTATION = "presentation",
+		_USE_ARIA = "usearia",
+		_BLUR = "blur",
+		_FOCUS = "focus",
+		_VISIBLE = "visible",
+		_BEFORE_HIDE = "beforeHide",
+		_DIALOG = "dialog",
+		_DESCRIBED_BY = "describedby",
+		_CONTEXT = "context",
+		_HIDDEN = "hidden",
+		_CONTAINER_CLOSE = "container-close",
+		_A = "a",
+		_HREF = "href",
+		_BUTTON = "button",
+		_KEY_DOWN = "keydown",
+		_BEFORE_SHOW = "beforeShow",
+		_CLOSE = "close",
+		_ALERT_DIALOG = "alertdialog",
+		_LABELLED_BY = "labelledby",
+		_XY = "xy",
+		_TOOLTIP = "tooltip",
+		_DESTROY = "destroy";
+		
+		
+	var setARIARole = function (element, role) {
+	
+		element.setAttribute(_ROLE, role);
+	
+	};
+
+
+	var setARIAProperty = function (element, property, value) {
+
+		element.setAttribute((_ARIA_PREFIX + property), value);
+	
+	};		
+
+
+	// Module ARIA plugin - augments YAHOO.widget.Module
+
+	Lang.augmentObject(ModulePrototype, {
+
+		_initResizeMonitor: function () {
+		
+			fnModuleInitResizeMonitor.call(this);
+
+			var oIFrame = this.resizeMonitor;
+
+			if (oIFrame) {
+				setARIARole(oIFrame, _PRESENTATION);
+				oIFrame.tabIndex = -1;
+			}		
+		
+		},
+		
+
+		configUseARIA: function (type, args) {
+			// Stub for subclasses
+		},
+
+		configDescribedBy: function (type, args) {
+		
+			var sID = args[0];
+		
+			if (this.cfg.getProperty(_USE_ARIA) && sID) {
+				setARIAProperty(this.element, _DESCRIBED_BY, sID);
+			}
+		
+		},
+		
+		configLabelledBy: function (type, args) {
+
+			var sID = args[0];
+		
+			if (this.cfg.getProperty(_USE_ARIA) && sID) {
+				setARIAProperty(this.element, _LABELLED_BY, sID);			
+			}
+		
+		},
+
+		initDefaultConfig: function () {
+
+            /**
+            * @config usearia
+            * @description Boolean indicating if use of the WAI-ARIA Roles and States should 
+            * be enabled.
+            * @type Boolean
+            * @default true for Firefox 3 and IE 8, false for all other browsers.
+            */
+			this.cfg.addProperty(
+				_USE_ARIA, 
+				{
+					handler: this.configUseARIA, 
+					value: (UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8), 
+					validator: Lang.isBoolean
+				}
+			 );
+
+
+            /**
+            * @config labelledby
+            * @description String representing the id of the element that labels the Module.
+            * Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#labelledby">
+            * <code>aria-labelledby</code></a> attribute.
+            * @type String
+            * @default null
+            */
+			this.cfg.addProperty(
+				_LABELLED_BY, 
+				{
+					handler: this.configLabelledBy, 
+					validator: Lang.isString
+				}
+			 );
+
+
+            /**
+            * @attribute describedby
+            * @description String representing the id of the element that describes the Module.
+            * Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#describedby">
+            * <code>aria-describedby</code></a> attribute.
+            * @type String
+            * @default null
+            */
+			this.cfg.addProperty(
+				_DESCRIBED_BY, 
+				{
+					handler: this.configDescribedBy, 
+					validator: Lang.isString
+				}
+			 );
+			 
+			fnModuleInitDefaultConfig.call(this);			 
+	
+		}
+	
+	}, "initDefaultConfig", "configUseARIA", "configLabelledBy", 
+		"configDescribedBy", "_initResizeMonitor");
+
+
+
+	// Overlay ARIA plugin - augments YAHOO.widget.Overlay
+
+	OverlayPrototype.showIframe = function () {
+
+		fnOverlayShowIframe.call(this);
+		
+		var oIFrame = this.iframe;
+
+		if (this.cfg.getProperty(_USE_ARIA) && oIFrame && !oIFrame.getAttribute(_ROLE)) {
+			setARIARole(oIFrame, _PRESENTATION);
+			oIFrame.tabIndex = -1;			
+		}
+
+	};
+
+
+
+	// Panel ARIA plugin - augments YAHOO.widget.Panel
+
+
+	var onPanelKeyDown = function (event) {
+
+		var nCharCode = Event.getCharCode(event);
+		
+		if (nCharCode === 27) {
+
+			if (this.cancel) {	// Dialog
+				this.cancel();
+			}
+			else {	// Panel
+				this.hide();			
+			}
+
+		}
+		
+	};
+
+
+	var onPanelDOMFocus = function (event) {
+
+		this.fireEvent(_FOCUS, event);
+	
+	};
+
+
+	var onPanelDOMBlur = function (event) {
+	
+		this.fireEvent(_BLUR, event);
+	
+	};
+
+
+	var onPanelFocus = function (type, args) {
+
+		var oEvent = args[0];  // DOM event
+
+		if (m_oOverlayManager._manageFocus(this)) {
+
+			if (this.cfg.getProperty(_VISIBLE) && this.focusFirst) {
+
+				// If the event was not sourced from the UI, focus the first element in the Panel
+		
+				if (!oEvent) {
+					this.focusFirst();
+				}
+
+			}
+
+		}
+
+	};
+
+
+	var onPanelBlur = function (type, args) {
+
+		var oEvent = args[0];	// DOM event
+
+		// If the event was not sourced from the UI fire the blur event
+
+		if (m_oOverlayManager._manageBlur(this) && !oEvent) {
+			this.fireEvent(_BLUR);
+		}
+	
+	};
+
+
+	var onPanelBeforeHide = function (type, args, element) {
+	
+		this.blur();
+
+		if (element && element.focus) {
+
+			try {
+				element.focus();				
+			}
+			catch(e) {
+			
+			}
+			
+		}
+
+		this.unsubscribe(_BEFORE_HIDE, onPanelBeforeHide, element);
+	
+	};
+
+
+	var onPanelBeforeShow = function () {
+	
+		this.subscribe(_BEFORE_HIDE, onPanelBeforeHide, m_oFocusedElement);
+	
+	};
+
+
+	var setPanelHiddenRole = function () {
+	
+		var oElement = this.cfg.getProperty(_ROLE) === _DIALOG ? this.innerElement : this.body;
+	
+		setARIAProperty(oElement, _HIDDEN, !this.cfg.getProperty(_VISIBLE));
+	
+	};
+
+
+	var setRoleForCloseButton = function () {
+
+		Dom.getElementsByClassName(_CONTAINER_CLOSE, _A, this.element, function (element) {
+		
+			element.removeAttribute(_HREF);
+			setARIARole(element, _BUTTON);
+			element.tabIndex = 0;
+		
+		});
+	
+	};
+	
+
+	var onPanelConfigClose = function (type, args) {
+	
+		var bClose = args[0];
+	
+		if (bClose) {
+
+			setRoleForCloseButton.call(this);
+		
+		}
+	
+	};
+
+
+	if (Panel) {
+
+		PanelPrototype = Panel.prototype;
+		fnPanelInitDefaultConfig = PanelPrototype.initDefaultConfig;
+	
+	
+		Lang.augmentObject(PanelPrototype, {
+			
+			hasFocus: function () {
+		
+				return (m_oOverlayManager && this === m_oOverlayManager.getActive());
+			
+			},
+		
+		
+			configUseARIA: function (type, args) {
+		
+				var bUseARIA = args[0];
+				
+				if (bUseARIA) {
+		
+					if (!m_oOverlayManager) {
+						m_oOverlayManager = new YAHOO.widget.OverlayManager();
+					}
+					
+					m_oOverlayManager.register(this);
+					
+		
+					this.focus = function () {
+					
+						if (!this.hasFocus()) {
+							this.fireEvent(_FOCUS);			
+						}
+					
+					};
+					
+				
+					this.blur = function () {
+				
+						if (this.hasFocus()) {
+							this.fireEvent(_BLUR);
+						}
+					
+					};			
+			
+		
+					Event.onFocus(this.element, onPanelDOMFocus, null, this);
+					Event.onBlur(this.element, onPanelDOMBlur, null, this);
+		
+					this.subscribe(_FOCUS, onPanelFocus);
+					this.subscribe(_BLUR, onPanelBlur);
+					
+					Event.on(this.element, _KEY_DOWN, onPanelKeyDown, null, this);
+				
+					this.subscribe(_BEFORE_SHOW, onPanelBeforeShow);
+	
+					setPanelHiddenRole.call(this);
+	
+					this.cfg.subscribeToConfigEvent(_VISIBLE, setPanelHiddenRole);
+					this.cfg.subscribeToConfigEvent(_CLOSE, onPanelConfigClose);
+		
+					if (!m_bPanelDocumentListenersAdded) {
+					
+						Event.onFocus(document, function (event) {
+						
+							m_oFocusedElement = Event.getTarget(event);
+						
+						});
+						
+		
+						m_bPanelDocumentListenersAdded = true;
+		
+					}
+		
+				}
+			
+			},
+
+			configDescribedBy: function (type, args) {
+			
+				var sID = args[0],
+					oElement;
+			
+				if (this.cfg.getProperty(_USE_ARIA) && sID) {
+
+					oElement = this.cfg.getProperty(_ROLE) === _DIALOG ? 
+						this.innerElement : this.body;
+
+					setARIAProperty(oElement, _DESCRIBED_BY, sID);
+
+				}
+			
+			},
+			
+			configLabelledBy: function (type, args) {
+	
+				var sID = args[0],
+					oElement;
+			
+				if (this.cfg.getProperty(_USE_ARIA) && sID) {
+
+					oElement = this.cfg.getProperty(_ROLE) === _DIALOG ? 
+						this.innerElement : this.body;
+
+					setARIAProperty(oElement, _LABELLED_BY, sID);			
+
+				}
+			
+			},			
+			
+			configRole: function (type, args) {
+			
+				var sRole = args[0],
+					oElement,
+					oHeader,
+					sHeaderId;
+		
+	
+				if (sRole) {
+		
+	
+					switch (sRole) {
+		
+						case _DIALOG:
+		
+							oElement = this.innerElement;						
+								
+						break;
+						
+						case _ALERT_DIALOG:
+		
+							oElement = this.body;
+						
+						break;
+					
+					}
+					
+					
+					if (oElement) {
+	
+						setARIARole(oElement, sRole);
+						
+						oHeader = this.header;
+						
+						sHeaderId = oHeader.id || Dom.generateId(oHeader);
+						
+						this.cfg.setProperty(_LABELLED_BY, sHeaderId);
+						
+						setRoleForCloseButton.call(this);
+	
+					}
+		
+				}
+			
+			},
+		
+		
+			initDefaultConfig: function () {
+			
+				fnPanelInitDefaultConfig.call(this);
+		
+				this.cfg.addProperty(
+					_ROLE, 
+					{
+						handler: this.configRole, 
+						value: _DIALOG, 
+						validator: Lang.isString
+					}
+				 );
+		
+			}
+		
+		}, "initDefaultConfig", "configRole", "configUseARIA", "configLabelledBy", 
+			"configDescribedBy", "hasFocus");
+
+	}
+
+
+	// Tooltip ARIA plugin - augments YAHOO.widget.Tooltip
+
+	var onDocumentFocus = function (event) {
+	
+		var oTarget = Event.getTarget(event),
+			oTooltip = m_oTooltips[oTarget.id],
+			aXY;
+		
+		if (oTooltip) {
+		
+			aXY = Dom.getXY(oTarget);
+
+			oTooltip.cfg.setProperty(_XY, [aXY[0], (aXY[1] + oTarget.offsetHeight + 5)]);
+			oTooltip.show();
+
+		}
+	
+	};
+
+
+	var onDocumentBlur = function (event) {
+
+		var oTarget = Event.getTarget(event),
+			oTooltip = m_oTooltips[oTarget.id];
+		
+		if (oTooltip && oTooltip.cfg.getProperty(_VISIBLE)) {
+			oTooltip.hide();
+		}
+		
+	};
+
+
+	var unregisterContextElement = function (element) {
+
+		var sContextElId = element.id,
+			oTooltip = m_oTooltips[sContextElId];
+
+		if (oTooltip === this) {
+			delete m_oTooltips[sContextElId];
+			element.removeAttribute(_DESCRIBED_BY);
+		}
+	
+	};
+
+
+	var unregisterContextElements = function () {
+
+		var sId = this.element.id,
+			aContextElements = m_oContextElements[sId];
+
+		Dom.batch(aContextElements, unregisterContextElement, this, true);
+
+		m_oContextElements[sId] = null;
+
+	};
+
+
+	var registerContextElement = function (element) {
+
+		var sContextElId = element.id || Dom.generateId(element);
+	
+		m_oTooltips[sContextElId] = this;
+		
+		setARIAProperty(element, _DESCRIBED_BY, this.element.id);
+	
+	};
+
+
+	var registerContextElements = function () {
+
+		var aContextElements = this.cfg.getProperty(_CONTEXT);
+
+		Dom.batch(aContextElements, registerContextElement, this, true);
+
+		m_oContextElements[this.element.id] = aContextElements;
+
+	};
+
+
+	var onTooltipContextChange = function (type, args) {
+	
+		unregisterContextElements.call(this);
+
+		var context = args[0];
+		
+		if (context) {
+			registerContextElements.call(this);
+		}
+	
+	};
+
+
+	var setTooltipHiddenRole = function () {
+	
+		setARIAProperty(this.body, _HIDDEN, !this.cfg.getProperty(_VISIBLE));
+	
+	};
+
+
+	if (Tooltip) {
+
+		Tooltip.prototype.configUseARIA = function (type, args) {
+		
+			var bUseARIA = args[0];
+			
+			if (bUseARIA) {
+				
+				setARIARole(this.body, _TOOLTIP);
+	
+				this.cfg.subscribeToConfigEvent(_CONTEXT, onTooltipContextChange);
+				
+				setTooltipHiddenRole.call(this);
+				
+				this.cfg.subscribeToConfigEvent(_VISIBLE, setTooltipHiddenRole);
+				
+				this.subscribe(_DESTROY, unregisterContextElements);
+	
+	
+				if (!m_bToolTipDocumentListenersAdded) {
+				
+					Event.onFocus(document, onDocumentFocus);
+					Event.onBlur(document, onDocumentBlur);
+	
+					m_bToolTipDocumentListenersAdded = true;
+				
+				}
+	
+			}
+		
+		};
+	
+	}
+	
+}());
--- a/www/extras/yui/examples/container/assets/get.php
+++ b/www/extras/yui/examples/container/assets/get.php
@ -0,0 +1,33 @@
+<?php
+
+print "data = { ";
+
+$index = 0;
+
+foreach($_GET as $key => $value) {
+	
+    print htmlspecialchars("$key:", ENT_QUOTES);
+    
+	if (gettype($value) == "array") {
+		print "[";
+		for ($i = 0;$i < count($_GET[$key]);$i++) { 
+		   $v = $_GET[$key][$i]; 
+		   print "\"$v\"";
+		   if ($i < count($_GET[$key])-1) {
+				print ",";
+		   }
+		} 
+		print "]";
+	} else {
+		print "\"$value\"";
+	}
+
+	$index++;
+
+	if ( ($index) < count($_GET) ) {
+		print ", ";
+	}
+}
+
+print " };";
+?> 
--- a/www/extras/yui/examples/container/assets/img/aqua-bg.gif
+++ b/www/extras/yui/examples/container/assets/img/aqua-bg.gif
--- a/www/extras/yui/examples/container/assets/img/aqua-hd-bg.gif
+++ b/www/extras/yui/examples/container/assets/img/aqua-hd-bg.gif
--- a/www/extras/yui/examples/container/assets/img/aqua-hd-close-over.gif
+++ b/www/extras/yui/examples/container/assets/img/aqua-hd-close-over.gif
--- a/www/extras/yui/examples/container/assets/img/aqua-hd-close.gif
+++ b/www/extras/yui/examples/container/assets/img/aqua-hd-close.gif
--- a/www/extras/yui/examples/container/assets/img/aqua-hd-lt.gif
+++ b/www/extras/yui/examples/container/assets/img/aqua-hd-lt.gif
--- a/www/extras/yui/examples/container/assets/img/aqua-hd-rt.gif
+++ b/www/extras/yui/examples/container/assets/img/aqua-hd-rt.gif
--- a/www/extras/yui/examples/container/assets/img/bg.png
+++ b/www/extras/yui/examples/container/assets/img/bg.png
--- a/www/extras/yui/examples/container/assets/img/corner_resize.gif
+++ b/www/extras/yui/examples/container/assets/img/corner_resize.gif
--- a/www/extras/yui/examples/container/assets/img/ctx.gif
+++ b/www/extras/yui/examples/container/assets/img/ctx.gif
--- a/www/extras/yui/examples/container/assets/img/skin-chart.gif
+++ b/www/extras/yui/examples/container/assets/img/skin-chart.gif
--- a/www/extras/yui/examples/container/assets/img/skin-chart2.gif
+++ b/www/extras/yui/examples/container/assets/img/skin-chart2.gif
--- a/www/extras/yui/examples/container/assets/img/skin-close.gif
+++ b/www/extras/yui/examples/container/assets/img/skin-close.gif
--- a/www/extras/yui/examples/container/assets/img/skin-corners.gif
+++ b/www/extras/yui/examples/container/assets/img/skin-corners.gif
--- a/www/extras/yui/examples/container/assets/img/skin-final.gif
+++ b/www/extras/yui/examples/container/assets/img/skin-final.gif
--- a/www/extras/yui/examples/container/assets/img/skin-module.gif
+++ b/www/extras/yui/examples/container/assets/img/skin-module.gif
--- a/www/extras/yui/examples/container/assets/img/xp-bl.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-bl.gif
--- a/www/extras/yui/examples/container/assets/img/xp-border-rt.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-border-rt.gif
--- a/www/extras/yui/examples/container/assets/img/xp-br.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-br.gif
--- a/www/extras/yui/examples/container/assets/img/xp-brdr-lt.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-brdr-lt.gif
--- a/www/extras/yui/examples/container/assets/img/xp-brdr-rt.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-brdr-rt.gif
--- a/www/extras/yui/examples/container/assets/img/xp-close.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-close.gif
--- a/www/extras/yui/examples/container/assets/img/xp-ft.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-ft.gif
--- a/www/extras/yui/examples/container/assets/img/xp-hd.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-hd.gif
--- a/www/extras/yui/examples/container/assets/img/xp-tl.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-tl.gif
--- a/www/extras/yui/examples/container/assets/img/xp-tr.gif
+++ b/www/extras/yui/examples/container/assets/img/xp-tr.gif
--- a/www/extras/yui/examples/container/assets/img/ybox-back.gif
+++ b/www/extras/yui/examples/container/assets/img/ybox-back.gif
--- a/www/extras/yui/examples/container/assets/img/ybox-close.gif
+++ b/www/extras/yui/examples/container/assets/img/ybox-close.gif
--- a/www/extras/yui/examples/container/assets/img/ybox-next.gif
+++ b/www/extras/yui/examples/container/assets/img/ybox-next.gif
--- a/www/extras/yui/examples/container/assets/post.php
+++ b/www/extras/yui/examples/container/assets/post.php
@ -0,0 +1,25 @@
+<?php
+
+print "<strong>Submitted Data</strong>";
+print "<ul>";
+
+foreach($_POST as $key => $value) {
+  	print "<li>";
+	print htmlspecialchars("$key: ", ENT_QUOTES);
+
+	if (gettype($value) == "array") {
+		for ($i = 0;$i < count($_POST[$key]);$i++) { 
+		   $v = $_POST[$key][$i]; 
+		   print "$v";
+		   if ($i < count($_POST[$key])-1) {
+				print ", ";
+		   }
+		} 
+	} else {
+		print "$value";
+	}
+
+	print "</li>";
+}
+print "</ul>";
+?> 
--- a/www/extras/yui/examples/container/assets/somedata.php
+++ b/www/extras/yui/examples/container/assets/somedata.php
@ -0,0 +1,8 @@
+<?php
+
+print "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis faucibus laoreet lectus. Aliquam erat volutpat. Nulla faucibus ultrices justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi pulvinar pharetra ante. Duis gravida nisi id ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum fermentum odio. In hac habitasse platea dictumst. Mauris semper. Aliquam vitae urna. Duis metus. Phasellus pede nisi, vulputate et, volutpat at, suscipit nec, arcu.";
+
+print "Nam non est a diam faucibus porta. Donec velit nisl, nonummy et, auctor vel, sollicitudin nec, justo. Nulla elementum convallis leo. Vivamus diam ligula, elementum in, consequat eget, luctus nec, tortor. Curabitur sollicitudin nibh sed augue. Aliquam nulla est, tempus eget, vulputate non, consectetuer feugiat, lorem. Quisque in leo. Donec dolor leo, blandit sit amet, cursus et, vehicula nec, diam. Proin massa leo, cursus eget, blandit eget, nonummy in, dolor. Aliquam erat volutpat. Nunc fermentum. Morbi consectetuer.";
+
+sleep(3);
+?> 
--- a/www/extras/yui/examples/container/assets/style.css
+++ b/www/extras/yui/examples/container/assets/style.css
@ -0,0 +1,62 @@
+body { padding:0 }
+a {color:#0000de;} 
+a:visited {color:#639}
+a:active {color: #f00;}
+p {color:#000; margin-bottom:1em }
+
+strong { font-weight:bold }
+em { font-style:italic }
+
+#hd a#logo { display:block;margin:10px;width:378px; }
+#hd a#logo div { background:url(../assets/yui.gif) no-repeat;height:34px; }
+#hd h1 { font-weight:bold;text-indent:15px; background: url(http://us.i1.yimg.com/us.yimg.com/i/ydn/bg_hd.gif) 0 0 repeat-x #B6CDE1; border:1px solid #93B2CC; position:relative;font-size:110%;padding:5px 0;margin:0 auto;}
+#hd { margin-bottom:10px; }
+
+#toc { background-color:#ecf5fa; padding:0; border:1px solid #89d;overflow:hidden;zoom:1}
+#toc ul {list-style:none; margin:0; padding:0; font-size:90%;}
+#toc ul li { height:100%;padding:0;margin:0;*margin:0 0 -3px;*zoom:1; }
+
+#toc ul li a { margin:0;display:block;padding:5px 2px 5px 5px; text-decoration:none; }
+#toc ul li a:hover { color:#fff; background-color:#3c3cb7; }
+
+#toc ul li.selected { font-weight:bold; color:#fff; background:#666; padding:0; }
+#toc ul li.selected a { color:#fff; }
+#toc ul li.selected a:hover { font-weight:bold; color:#fff; background:#3c3cb7; }
+
+#toc ul li.child { background-color:#ddd }
+#toc ul li.child a { margin:0;display:block; padding:5px 2px 5px 20px; text-decoration:none; }
+
+#toc ul li.active { font-weight:bold; color:#000; }
+#toc ul li.active a { color:#000; }
+
+#toc ul li a.printer { padding:0;margin-right:2px;margin-top:-1.5em;display:none;float:right;height:12px;width:12px; }
+#toc ul li.selected a.printer { display:block;background:url(http://us.i1.yimg.com/us.yimg.com/i/us/aut/pltfrm/ic/print_12.gif) no-repeat;cursor:pointer;  }
+#toc ul li.selected a.printer:hover { background:url(http://us.i1.yimg.com/us.yimg.com/i/us/aut/pltfrm/ic/print_12.gif) no-repeat;cursor:pointer;  }
+
+#toc ul li em { display:none; }
+#toc ul li.sect { font-weight:bold; color:#fff; background:#ccc; }
+#toc ul li.sect a { color:#333 }
+#toc ul li.sect a:hover { color:#fff }
+
+#bd { margin-left:15px; }
+#bd .dp-highlighter { margin:10px 0 15px }
+#bd h1 { line-height:1.2em; color:#E76300; font-size:120%; margin:0 0 12px;}
+#bd h2 { line-height:1.2em; color:#E76300; font-size:110%; margin:0 0 10px;}
+
+#bd ul.properties { width:85%;margin:20px auto; }
+#bd ul.properties li { margin:1em 0; }
+
+#stepnav { font-size:100%; margin:25px 0 0 15px }
+#stepnav .back { margin-right:15px }
+
+#solution { margin-left:15px; }
+#solution a { display:block;margin-top:7px;margin-bottom:20px }
+#solution { zoom:1 }
+
+#ft { height:2px;line-height:2px;text-indent:15px; background:#B6CDE1;margin:10px auto;clear:both}
+
+#landing { margin-left:1em }
+#landing h3 { font-size:105%;margin-bottom:.5em }
+#landing p { margin-left:1em }
+
+.dp-highlighter { width:96% }
--- a/www/extras/yui/examples/container/container-ariaplugin.html
+++ b/www/extras/yui/examples/container/container-ariaplugin.html
--- a/www/extras/yui/examples/container/container-ariaplugin_clean.html
+++ b/www/extras/yui/examples/container/container-ariaplugin_clean.html
@ -0,0 +1,233 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Using the Container ARIA Plugin</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+
+	/* Default/unfocused Panel style */
+	.yui-skin-sam div[role=panel].yui-panel .hd {
+		background: #F2F2F2;
+	}
+
+	/* Focused Panel style */	
+	.yui-skin-sam .yui-panel-container.focused div[role=panel].yui-panel .hd {
+		background: url(http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/sprite.png) repeat-x 0 -200px;
+	}
+	
+	/*
+		The Container ARIA Plugin removes the "href" attribute from the <A> used to create the 
+		close button for a Panel, resulting in the focus outline no longer be rendered in 
+		Gecko-based browsers when the <A> element is focused.  For this reason, it is necessary to 
+		restore the focus outline for the <A>.
+	*/	
+	a.container-close[role=button]:focus {
+		outline: dotted 1px #000;
+	}
+
+	/*
+		Necessary to explicitly set the text-align property so the content of the Panels 
+		is aligned properly when viewed inside the YUI Examples chrome.
+	*/
+	#panel-2,
+	#panel-3 {
+		text-align: left;
+	}
+	
+</style>
+
+<script type="text/javascript" src="../container/assets/containerariaplugin.js"></script>
+<!--end custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Using the Container ARIA Plugin</h1>
+
+<div class="exampleIntro">
+	<p>
+The Container ARIA Plugin makes it easy to use the 
+<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> with the Container
+family of controls.
+Using the ARIA plugin, Dialogs, Alerts and Tooltips created using the Container family are 
+more interoperable with assistive technologies (AT), such as screen readers, making them more 
+accessible to users with disabilities.
+</p>
+<p>
+<a href="http://video.yahoo.com/watch/3608783/9955344">Watch a screen cast of this example 
+running in Firefox 3 with the NVDA screen reader</a>, to see immediately the benefits that 
+ARIA provides, or 
+<a href="http://www.nvda-project.org/wiki/Snapshots">download the latest development snapshot of 
+NVDA</a> to test this example for yourself.
+</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<script type="text/javascript">
+
+	(function () {
+	
+		var Event = YAHOO.util.Event,
+			Dom = YAHOO.util.Dom;
+
+
+		Event.onDOMReady(function () {
+
+			var oPanel1 = new YAHOO.widget.Panel("panel-1", {
+				
+				visible: false,
+				fixedcenter: true,
+				constraintoviewport: true,
+				width: "300px"
+			
+			});
+			
+			oPanel1.render();
+			
+			Event.on("show-dialog-1", "click", oPanel1.show, null, oPanel1);
+
+
+			var oTooltip1 = new YAHOO.widget.Tooltip("tooltip-1", { 
+				context:"show-dialog-1", 
+				text:"Shows a Dialog built using Panel from existing markup.",
+				iframe: true,
+				showDelay:500 } );
+
+
+			var oPanel2 = new YAHOO.widget.Dialog("panel-2", {
+				
+				modal: true,
+				visible: false,
+				fixedcenter: true,
+				constraintoviewport: true,
+				width: "300px",
+				postmethod: "form"
+			
+			});	
+
+			oPanel2.render(document.body);
+
+			Event.on("show-dialog-2", "click", oPanel2.show, null, oPanel2);	
+
+
+			var oTooltip2 = new YAHOO.widget.Tooltip("tooltip-2", { 
+				context:"show-dialog-2", 
+				text:"Shows a Modal Dialog built using Dialog from existing markup.",
+				iframe: true,
+				showDelay:500 } );
+
+
+			var handleOK = function() {
+				this.cancel();
+			};
+			
+			var oPanel3 = new YAHOO.widget.SimpleDialog("panel-3", {
+				
+				modal: true,
+				icon: YAHOO.widget.SimpleDialog.ICON_INFO,
+				visible: false,
+				fixedcenter: true,
+				constraintoviewport: true,
+				width: "300px",
+				role: "alertdialog",
+				buttons: [ { text:"OK", handler:handleOK, isDefault:true } ],
+				text: "Your changes have been saved."
+			
+			});	
+
+			oPanel3.setHeader("Info");
+			oPanel3.render(document.body);
+
+			var oTooltip3 = new YAHOO.widget.Tooltip("tooltip-3", { 
+				context:"show-dialog-3", 
+				text:"Shows a Modal Dialog built using SimpleDialog using the ARIA role of alertdialog.",
+				iframe: true,
+				showDelay:500 } );
+			
+			Event.on("show-dialog-3", "click", oPanel3.show, null, oPanel3);					
+
+		});
+	
+	}());
+
+</script>
+
+<button id="show-dialog-1">Show Dialog 1</button>
+<button id="show-dialog-2">Show Dialog 2</button>
+<button id="show-dialog-3">Show Dialog 3</button>
+
+<form name="panel-1-form" id="panel-1-form" method="post">
+<div id="panel-1">
+	<div class="hd">Personal Information</div>
+	<div class="bd">
+		<div>
+			<label for="panel-1-first-name" id="panel-1-first-name-label">First Name</label>
+			<input type="text" id="panel-1-first-name" name="first-name">
+		</div>
+		<div>
+			<label for="panel-1-last-name">Last Name</label>
+			<input type="text" id="panel-1-last-name" name="last-name">
+		</div>	
+		<div>
+			<label for="panel-1-email">Email</label>
+			<input type="text" id="panel-1-email" name="email">
+		</div>		
+		<div>
+			<input type="submit" id="panel-1-button-1" name="button-1" value="Submit">
+		</div>
+	</div>
+</div>
+</form>
+
+
+<div id="panel-2">
+	<div class="hd">Personal Information</div>
+	<div class="bd">
+		<form name="panel-2-form" id="panel-2-form" method="post">
+			<div>
+				<label for="panel-2-first-name" id="panel-2-first-name-label">First Name</label>
+				<input type="text" id="panel-2-first-name" name="first-name">
+			</div>
+			<div>
+				<label for="panel-2-last-name">Last Name</label>
+				<input type="text" id="panel-2-last-name" name="last-name">
+			</div>	
+			<div>
+				<label for="panel-2-email">Email</label>
+				<input type="text" id="panel-2-email" name="email">
+			</div>
+			<div>
+				<input type="submit" id="panel-2-button-1" name="button-1" value="Submit">
+			</div>
+		</form>
+	</div>
+</div>
+	
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/container-ariaplugin_log.html
+++ b/www/extras/yui/examples/container/container-ariaplugin_log.html
--- a/www/extras/yui/examples/container/container-effect.html
+++ b/www/extras/yui/examples/container/container-effect.html
--- a/www/extras/yui/examples/container/container-effect_clean.html
+++ b/www/extras/yui/examples/container/container-effect_clean.html
@ -0,0 +1,129 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Using ContainerEffect Transitions</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Using ContainerEffect Transitions</h1>
+
+<div class="exampleIntro">
+	<p>The <a href="http://developer.yahoo.com/yui/container/">Container Family</a> of controls, including <a href="http://developer.yahoo.com/yui/container/overlay/">Overlay</a> and all of its subclasses (<a href="http://developer.yahoo.com/yui/container/panel/">Panel</a>, <a href="http://developer.yahoo.com/yui/container/tooltip/">Tooltip</a>, <a href="http://developer.yahoo.com/yui/container/dialog/">Dialog</a>, <a href="http://developer.yahoo.com/yui/container/simpledialog/">SimpleDialog</a>), can implement built-in transition effects using the <code>effect</code> property and the <a href="http://developer.yahoo.com/yui/docs/YAHOO.widget.ContainerEffect.html">ContainerEffect</a> object.  This example demonstrates the fade and slide transitions provided with Container.</p>
+
+<p>Use the buttons below to show and hide Overlays, noting their transition treatments as they appear and disappear.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+.yui-overlay { position:absolute;border:1px dotted black;padding:5px;margin:10px;background:#fff; }
+.yui-overlay .hd { border:1px solid red;padding:5px; }
+.yui-overlay .bd { border:1px solid green;padding:5px; }
+.yui-overlay .ft { border:1px solid blue;padding:5px; }
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	// Build overlay1 based on markup
+	YAHOO.example.container.overlay1 = new YAHOO.widget.Overlay("overlay1", { xy:[350,100],
+																			  visible:false,
+																			  width:"300px",
+																			  zIndex:1000,
+																			  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
+	YAHOO.example.container.overlay1.render("example");
+
+	// Build overlay2 based on markup
+	YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[350,100],
+																			  visible:false,
+																			  width:"300px",
+																			  zIndex:1000,
+																			  effect:{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25} } );
+	YAHOO.example.container.overlay2.render("example");
+
+	// Build overlay3 based on markup
+	YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3", { xy:[350,100],
+																			  visible:false,
+																			  width:"300px",
+																			  zIndex:1000,
+																			  effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
+																					  {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );
+	YAHOO.example.container.overlay3.render("example");
+
+	YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.overlay1.show, YAHOO.example.container.overlay1, true);
+	YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.overlay1.hide, YAHOO.example.container.overlay1, true);
+
+	YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.overlay2.show, YAHOO.example.container.overlay2, true);
+	YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.overlay2.hide, YAHOO.example.container.overlay2, true);
+
+	YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, YAHOO.example.container.overlay3, true);
+	YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, YAHOO.example.container.overlay3, true);
+
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+overlay1 (fade in):
+<button id="show1">Show</button>
+<button id="hide1">Hide</button>
+</div>
+<div>
+overlay2 (slide in):
+<button id="show2">Show</button>
+<button id="hide2">Hide</button>
+</div>
+<div>
+overlay3 (fade and slide):
+<button id="show3">Show</button>
+<button id="hide3">Hide</button>
+</div>
+
+<div id="overlay1" style="visibility:hidden;">
+<div class="hd">Overlay #1 from Markup</div>
+<div class="bd">This is a Overlay that was marked up in the document.</div>
+<div class="ft">End of Overlay #1</div>
+</div>
+
+<div id="overlay2" style="visibility:hidden;">
+<div class="hd">Overlay #2 from Markup</div>
+<div class="bd">This is a Overlay that was marked up in the document.</div>
+<div class="ft">End of Overlay #2</div>
+</div>
+
+<div id="overlay3" style="visibility:hidden;">
+<div class="hd">Overlay #3 from Markup</div>
+<div class="bd">This is a Overlay that was marked up in the document.</div>
+<div class="ft">End of Overlay #3</div>
+</div>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/container-effect_log.html
+++ b/www/extras/yui/examples/container/container-effect_log.html
--- a/www/extras/yui/examples/container/dialog-quickstart.html
+++ b/www/extras/yui/examples/container/dialog-quickstart.html
--- a/www/extras/yui/examples/container/dialog-quickstart_clean.html
+++ b/www/extras/yui/examples/container/dialog-quickstart_clean.html
@ -0,0 +1,153 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Dialog Quickstart Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
+<script type="text/javascript" src="../../build/button/button-min.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Dialog Quickstart Example</h1>
+
+<div class="exampleIntro">
+	<p>The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page &mdash; whether interally to the page or by sending the information to the server via form post or XMLHttpRequest.  This example shows how to do the latter.  Click the button to show the Dialog instance and its form fields; fill out the form; submit the form.  Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+#example {height:30em;}
+label { display:block;float:left;width:45%;clear:left; }
+.clear { clear:both; }
+#resp { margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
+#resp li { font-family:monospace }
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	
+	// Define various event handlers for Dialog
+	var handleSubmit = function() {
+		this.submit();
+	};
+	var handleCancel = function() {
+		this.cancel();
+	};
+	var handleSuccess = function(o) {
+		var response = o.responseText;
+		response = response.split("<!")[0];
+		document.getElementById("resp").innerHTML = response;
+	};
+	var handleFailure = function(o) {
+		alert("Submission failed: " + o.status);
+	};
+
+	// Instantiate the Dialog
+	YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
+							{ width : "30em",
+							  fixedcenter : true,
+							  visible : false, 
+							  constraintoviewport : true,
+							  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
+								      { text:"Cancel", handler:handleCancel } ]
+							});
+
+	// Validate the entries in the form to require that both first and last name are entered
+	YAHOO.example.container.dialog1.validate = function() {
+		var data = this.getData();
+		if (data.firstname == "" || data.lastname == "") {
+			alert("Please enter your first and last names.");
+			return false;
+		} else {
+			return true;
+		}
+	};
+
+	// Wire up the success and failure handlers
+	YAHOO.example.container.dialog1.callback = { success: handleSuccess,
+						     failure: handleFailure };
+	
+	// Render the Dialog
+	YAHOO.example.container.dialog1.render();
+
+	YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
+	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+<button id="show">Show dialog1</button> 
+<button id="hide">Hide dialog1</button>
+</div>
+
+<div id="dialog1">
+<div class="hd">Please enter your information</div>
+<div class="bd">
+<form method="POST" action="assets/post.php">
+	<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
+	<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
+	<label for="email">E-mail:</label><input type="textbox" name="email" /> 
+
+	<label for="state[]">State:</label>
+	<select multiple name="state[]">
+		<option value="California">California</option>
+		<option value="New Jersey">New Jersey</option>
+		<option value="New York">New York</option>
+	</select> 
+
+	<div class="clear"></div>
+
+	<label for="radiobuttons">Radio buttons:</label>
+	<input type="radio" name="radiobuttons[]" value="1" checked/> 1
+	<input type="radio" name="radiobuttons[]" value="2" /> 2
+	
+	<div class="clear"></div>
+
+	<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
+	
+	<div class="clear"></div>
+		
+	<label for="textarea">Text area:</label><textarea name="textarea"></textarea>
+
+	<div class="clear"></div>
+
+	<label for="cbarray">Multi checkbox:</label>
+	<input type="checkbox" name="cbarray[]" value="1" /> 1
+	<input type="checkbox" name="cbarray[]" value="2" /> 2
+</form>
+</div>
+</div>
+
+<div id="resp">Server response will be displayed in this area</div>	
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/dialog-quickstart_log.html
+++ b/www/extras/yui/examples/container/dialog-quickstart_log.html
--- a/www/extras/yui/examples/container/index.html
+++ b/www/extras/yui/examples/container/index.html
--- a/www/extras/yui/examples/container/keylistener.html
+++ b/www/extras/yui/examples/container/keylistener.html
--- a/www/extras/yui/examples/container/keylistener_clean.html
+++ b/www/extras/yui/examples/container/keylistener_clean.html
@ -0,0 +1,90 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Implementing Container Keyboard Shortcuts with KeyListener</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Implementing Container Keyboard Shortcuts with KeyListener</h1>
+
+<div class="exampleIntro">
+	<p>The KeyListener class integrates with the Container family allowing you to specify specific keys or key combinations to show and hide your containers.</p>
+
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#example {height:20em;}
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	// Build panel1 based on markup
+	YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[350,330], width:"250px", visible: false } );
+	
+	var kl = new YAHOO.util.KeyListener(document, { keys:27 },  							
+												  { fn:YAHOO.example.container.panel1.hide,
+													scope:YAHOO.example.container.panel1,
+													correctScope:true }, "keyup" ); 
+													// keyup is used here because Safari won't recognize the ESC
+													// keydown event, which would normally be used by default
+
+	YAHOO.example.container.panel1.cfg.queueProperty("keylisteners", kl);
+	YAHOO.example.container.panel1.render();
+
+	var kl2 = new YAHOO.util.KeyListener(document, { ctrl:true, keys:89 }, 
+												   { fn:YAHOO.example.container.panel1.show, 
+													 scope:YAHOO.example.container.panel1,
+													 correctScope:true } );
+	
+	kl2.enable();
+
+	YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+panel1: 
+<button id="show">Show (Ctrl+Y)</button> 
+<button id="hide">Hide (Esc)</button>
+</div>
+
+<div id="panel1" style="visibility:hidden">
+<div class="hd">KeyListener Example Panel</div>
+<div class="bd">Press [ESC] to dismiss this Panel.</div>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/keylistener_log.html
+++ b/www/extras/yui/examples/container/keylistener_log.html
--- a/www/extras/yui/examples/container/module.html
+++ b/www/extras/yui/examples/container/module.html
--- a/www/extras/yui/examples/container/module_clean.html
+++ b/www/extras/yui/examples/container/module_clean.html
@ -0,0 +1,93 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>The Module Control</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>The Module Control</h1>
+
+<div class="exampleIntro">
+	<p>This example looks at the "standard module format" used by many components in YUI to represent modular content on the page.  The Module Control is a JavaScript representation of a standard module, one that provides some basic plumbing for interacting with the head, body and foot sections of a standard module.  Convenience methods for showing, hinding and rendering the module are also included in the Module Control.</p>
+
+<p>You're most likely to use the Module Control when building a custom widget; its importance in the YUI Library is as a foundation rather than as a UI control in its own right.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style type="text/css">
+	.yui-module { border:1px dotted black;padding:5px;margin:10px; display:none; }
+	.yui-module .hd { border:1px solid red;padding:5px; }
+	.yui-module .bd { border:1px solid green;padding:5px; }
+	.yui-module .ft { border:1px solid blue;padding:5px; }
+</style>
+
+<script type="text/javascript">
+
+    YAHOO.namespace("example.container");
+
+    YAHOO.util.Event.onDOMReady(function () {
+
+        YAHOO.example.container.module1 = new YAHOO.widget.Module("module1", { visible: false });
+        YAHOO.example.container.module1.render();
+
+        YAHOO.example.container.module2 = new YAHOO.widget.Module("module2", { visible: false });
+        YAHOO.example.container.module2.setHeader("Module #2 from Script");
+        YAHOO.example.container.module2.setBody("This is a dynamically generated Module.");
+        YAHOO.example.container.module2.setFooter("End of Module #2");
+        YAHOO.example.container.module2.render();
+
+        YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.module1.show, YAHOO.example.container.module1, true);
+        YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.module1.hide, YAHOO.example.container.module1, true);
+
+        YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.module2.show, YAHOO.example.container.module2, true);
+        YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.module2.hide, YAHOO.example.container.module2, true);
+
+    });
+
+</script>
+
+<div>
+	<button id="show1">Show module1</button> 
+	<button id="hide1">Hide module1</button>
+</div>
+
+<div id="module1">
+	<div class="hd">Module #1 from Markup</div>
+	<div class="bd">This is a Module that was marked up in the document.</div>
+	<div class="ft">End of Module #1</div>
+</div>
+
+<div id="module2"></div>
+
+<div>
+	<button id="show2">Show module2</button> 
+	<button id="hide2">Hide module2</button>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/module_log.html
+++ b/www/extras/yui/examples/container/module_log.html
--- a/www/extras/yui/examples/container/overlay.html
+++ b/www/extras/yui/examples/container/overlay.html
--- a/www/extras/yui/examples/container/overlay_clean.html
+++ b/www/extras/yui/examples/container/overlay_clean.html
@ -0,0 +1,127 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Creating and Positioning an Overlay</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Creating and Positioning an Overlay</h1>
+
+<div class="exampleIntro">
+	<p>Overlays are extensions of Modules and differ in the sense that the float <em>above</em> the normal page flow.  They can be positioned in three different ways: By fixing them to the center of the viewport (overlay1 below), by specifying a position (overlay2), and by positioning them relative to a context element (overlay3).</p>
+
+<p>Use the buttons in the example below to show and hide the three Overlay instances.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	.yui-overlay { position:absolute;background:#fff;border:1px dotted black;padding:5px;margin:10px; }
+	.yui-overlay .hd { border:1px solid red;padding:5px; }
+	.yui-overlay .bd { border:1px solid green;padding:5px; }
+	.yui-overlay .ft { border:1px solid blue;padding:5px; }
+
+	#ctx { background:orange;width:100px;height:25px; }
+	
+	#example {height:15em;}
+</style>
+
+<script>
+		YAHOO.namespace("example.container");
+
+		function init() {
+			// Build overlay1 based on markup, initially hidden, fixed to the center of the viewport, and 300px wide
+			YAHOO.example.container.overlay1 = new YAHOO.widget.Overlay("overlay1", { fixedcenter:true,
+																					  visible:false,
+																					  width:"300px" } );
+			YAHOO.example.container.overlay1.render();
+			YAHOO.log("Overlay1 rendered.", "info", "example");
+
+			// Build overlay2 dynamically, initially hidden, at position x:400,y:500, and 300px wide
+			YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[600,200],
+																					  visible:false,
+																					  width:"300px" } );
+			YAHOO.example.container.overlay2.setHeader("Overlay #2 from Script");
+			YAHOO.example.container.overlay2.setBody("This is a dynamically generated Overlay.");
+			YAHOO.example.container.overlay2.setFooter("End of Overlay #2");
+			YAHOO.example.container.overlay2.render(document.body);
+			YAHOO.log("Overlay2 rendered.", "info", "example");
+
+			// Build overlay3 dynamically, initially hidden, aligned to context element "context", and 200px wide
+
+            // Re-align just before the overlay is shown and whenever the window is resized to account for changes in the position  
+            // of the context element after the initial context alignment 
+			YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3", { context:["ctx","tl","bl", ["beforeShow", "windowResize"]],
+																					  visible:false,
+																					  width:"200px" } );
+			YAHOO.example.container.overlay3.setHeader("Overlay #3 from Script");
+			YAHOO.example.container.overlay3.setBody("This is a dynamically generated Overlay.");
+			YAHOO.example.container.overlay3.setFooter("End of Overlay #3");
+			YAHOO.example.container.overlay3.render(document.body);
+			YAHOO.log("Overlay3 rendered.", "info", "example");
+
+			YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.overlay1.show, YAHOO.example.container.overlay1, true);
+			YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.overlay1.hide, YAHOO.example.container.overlay1, true);
+
+			YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.overlay2.show, YAHOO.example.container.overlay2, true);
+			YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.overlay2.hide, YAHOO.example.container.overlay2, true);
+
+			YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, YAHOO.example.container.overlay3, true);
+			YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, YAHOO.example.container.overlay3, true);
+		}
+
+		YAHOO.util.Event.addListener(window, "load", init);
+</script>
+
+
+<div>
+	overlay1:
+	<button id="show1">Show</button>
+	<button id="hide1">Hide</button>
+</div>
+<div>
+	overlay2:
+	<button id="show2">Show</button>
+	<button id="hide2">Hide</button>
+</div>
+<div>
+	overlay3:
+	<button id="show3">Show</button>
+	<button id="hide3">Hide</button>
+</div>
+
+<div id="ctx">Align to me</div>
+
+<div id="overlay1" style="visibility:hidden">
+	<div class="hd">Overlay #1 from Markup</div>
+	<div class="bd">This is a Overlay that was marked up in the document.</div>
+	<div class="ft">End of Overlay #1</div>
+</div>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/overlay_log.html
+++ b/www/extras/yui/examples/container/overlay_log.html
--- a/www/extras/yui/examples/container/overlaymanager.html
+++ b/www/extras/yui/examples/container/overlaymanager.html
--- a/www/extras/yui/examples/container/overlaymanager_clean.html
+++ b/www/extras/yui/examples/container/overlaymanager_clean.html
@ -0,0 +1,154 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Using the Overlay Manager to Manage Multiple Panels</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Using the Overlay Manager to Manage Multiple Panels</h1>
+
+<div class="exampleIntro">
+	<p>OverlayManager allows you to manage multiple Overlays (and Overlay subclasses like Panel, Dialog, SimpleDialog and Tooltip) on the same page, giving focus and z-index supremacy to the focused overlay and providing you with event hooks to respond to focus and blur of your overlays with your own scripts.</p>
+
+<p>Use the buttons below to show and hide the overlays in this example's OverlayManager group.  Click within differnt overlays and drag them around to get a sense for how OverlayManager provides a light, operating-system-like feel to the interaction.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style type="text/css">
+
+.yui-skin-sam .yui-panel .hd {
+
+    background: #F2F2F2;
+    
+}
+
+.yui-skin-sam .yui-panel-container.focused .yui-panel .hd {
+
+    background: url(../../build/assets/skins/sam/sprite.png) repeat-x 0 -200px;
+
+}
+
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	// Build panel1 based on markup
+	YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[150,100],
+																		visible:false,
+																		width:"300px"
+																	  } );
+	YAHOO.example.container.panel1.render();
+
+	// Build panel2 based on markup
+	YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { xy:[250,200],
+																		visible:false,
+																		width:"300px"
+																	  } );
+	YAHOO.example.container.panel2.render();
+
+	// Build panel3 based on markup
+	YAHOO.example.container.panel3 = new YAHOO.widget.Panel("panel3", { xy:[350,300],
+																		visible:false,
+																		width:"300px"
+																	  } );
+	YAHOO.example.container.panel3.render();
+
+	YAHOO.example.container.manager = new YAHOO.widget.OverlayManager();
+	YAHOO.example.container.manager.register([YAHOO.example.container.panel1,
+											  YAHOO.example.container.panel2,
+											  YAHOO.example.container.panel3]);
+
+	YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+	YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+	YAHOO.util.Event.addListener("focus1", "click", YAHOO.example.container.panel1.focus, YAHOO.example.container.panel1, true);
+
+	YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
+	YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
+	YAHOO.util.Event.addListener("focus2", "click", YAHOO.example.container.panel2.focus, YAHOO.example.container.panel2, true);
+
+	YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.panel3.show, YAHOO.example.container.panel3, true);
+	YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.panel3.hide, YAHOO.example.container.panel3, true);
+	YAHOO.util.Event.addListener("focus3", "click", YAHOO.example.container.panel3.focus, YAHOO.example.container.panel3, true);
+
+	YAHOO.util.Event.addListener("showAll", "click", YAHOO.example.container.manager.showAll, YAHOO.example.container.manager, true);
+	YAHOO.util.Event.addListener("hideAll", "click", YAHOO.example.container.manager.hideAll, YAHOO.example.container.manager, true);
+	YAHOO.util.Event.addListener("blurAll", "click", YAHOO.example.container.manager.blurAll, YAHOO.example.container.manager, true);
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+panel1:
+<button id="show1">Show</button>
+<button id="hide1">Hide</button>
+<button id="focus1">Focus</button>
+</div>
+<div>
+panel2:
+<button id="show2">Show</button>
+<button id="hide2">Hide</button>
+<button id="focus2">Focus</button>
+</div>
+<div>
+panel3:
+<button id="show3">Show</button>
+<button id="hide3">Hide</button>
+<button id="focus3">Focus</button>
+</div>
+<div>
+All Panels:
+<button id="showAll">Show All</button>
+<button id="hideAll">Hide All</button>
+<button id="blurAll">Blur All</button>
+</div>
+
+<div id="panel1" style="visibility:hidden">
+<div class="hd">Panel #1 from Markup</div>
+<div class="bd">This is a Panel that was marked up in the document.</div>
+<div class="ft">End of Panel #1</div>
+</div>
+
+<div id="panel2" style="visibility:hidden">
+<div class="hd">Panel #2 from Markup</div>
+<div class="bd">This is a Panel that was marked up in the document.</div>
+<div class="ft">End of Panel #2</div>
+</div>
+
+<div id="panel3" style="visibility:hidden">
+<div class="hd">Panel #3 from Markup</div>
+<div class="bd">This is a Panel that was marked up in the document.</div>
+<div class="ft">End of Panel #3</div>
+</div>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/overlaymanager_log.html
+++ b/www/extras/yui/examples/container/overlaymanager_log.html
--- a/www/extras/yui/examples/container/panel-loading.html
+++ b/www/extras/yui/examples/container/panel-loading.html
--- a/www/extras/yui/examples/container/panel-loading_clean.html
+++ b/www/extras/yui/examples/container/panel-loading_clean.html
@ -0,0 +1,106 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Creating a Modal "Loading" Panel</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Creating a Modal "Loading" Panel</h1>
+
+<div class="exampleIntro">
+	<p>A common use case for the Panel Control involves using it to display "please wait" text and images to indicate that the application is busy doing something.  As this page loads, a modal "please wait"-style Panel Control instance appears and the remainder of the page dims.  When the content for the container is loaded (consisting of lorem ipsum text), the panel and its modaliy mask fade away and the page returns to a normal interactive state.</p>
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<div id="content"></div>
+
+<script type="text/javascript">
+
+    YAHOO.namespace("example.container");
+
+    function init() {
+
+        var content = document.getElementById("content");
+        
+        content.innerHTML = "";
+
+        if (!YAHOO.example.container.wait) {
+
+            // Initialize the temporary Panel to display while waiting for external content to load
+
+            YAHOO.example.container.wait = 
+                    new YAHOO.widget.Panel("wait",  
+                                                    { width: "240px", 
+                                                      fixedcenter: true, 
+                                                      close: false, 
+                                                      draggable: false, 
+                                                      zindex:4,
+                                                      modal: true,
+                                                      visible: false
+                                                    } 
+                                                );
+    
+            YAHOO.example.container.wait.setHeader("Loading, please wait...");
+            YAHOO.example.container.wait.setBody("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
+            YAHOO.example.container.wait.render(document.body);
+
+        }
+
+        // Define the callback object for Connection Manager that will set the body of our content area when the content has loaded
+
+
+
+        var callback = {
+            success : function(o) {
+                content.innerHTML = o.responseText;
+                content.style.visibility = "visible";
+                YAHOO.example.container.wait.hide();
+            },
+            failure : function(o) {
+                content.innerHTML = o.responseText;
+                content.style.visibility = "visible";
+                content.innerHTML = "CONNECTION FAILED!";
+                YAHOO.example.container.wait.hide();
+            }
+        }
+    
+        // Show the Panel
+        YAHOO.example.container.wait.show();
+        
+        // Connect to our data source and load the data
+        var conn = YAHOO.util.Connect.asyncRequest("GET", "assets/somedata.php?r=" + new Date().getTime(), callback);
+    }
+    
+    YAHOO.util.Event.on("panelbutton", "click", init);
+		
+</script>
+<button id="panelbutton">Show Panel</button>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/panel-loading_log.html
+++ b/www/extras/yui/examples/container/panel-loading_log.html
--- a/www/extras/yui/examples/container/panel-resize.html
+++ b/www/extras/yui/examples/container/panel-resize.html
--- a/www/extras/yui/examples/container/panel-resize_source.html
+++ b/www/extras/yui/examples/container/panel-resize_source.html
@ -0,0 +1,172 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Creating a Resizable Panel</title>
+
+    <style type="text/css">
+    /*
+      margin and padding on body element
+      can introduce errors in determining
+      element position and are not recommended;
+      we turn them off as a foundation for YUI
+      CSS treatments. 
+    */
+    body {
+        margin:0;
+        padding:0;
+    }
+    </style>
+
+    <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+    <link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+    <link rel="stylesheet" type="text/css" href="../../build/resize/assets/skins/sam/resize.css" />
+    <script type="text/javascript" src="../../build/utilities/utilities.js"></script>
+    <script type="text/javascript" src="../../build/container/container.js"></script>
+    <script type="text/javascript" src="../../build/resize/resize.js"></script>
+
+    <style type="text/css">
+    #examplecontainer {
+        padding:10px;
+    }
+
+    #resizablepanel .bd {
+        overflow:auto;
+        background-color:#fff;
+        padding:10px;
+    }
+
+    #resizablepanel .ft {
+        height:15px;
+        padding:0;
+    }
+
+    #resizablepanel .yui-resize-handle-br {
+        right:0;
+        bottom:0;
+        height: 8px;
+        width: 8px;
+        position:absolute;
+    }
+
+    /*  
+        The following CSS is added to prevent scrollbar bleedthrough on
+        Gecko browsers (e.g. Firefox) on MacOS.
+    */
+
+    /*
+        PLEASE NOTE: It is necessary to toggle the "overflow" property 
+        of the body element between "hidden" and "auto" in order to 
+        prevent the scrollbars from remaining visible after the the 
+        Resizable Panel is hidden.  For more information on this issue, 
+        read the comments in the "container-core.css" file.
+       
+        We use the #reziablepanel_c id based specifier, so that the rule
+        is specific enough to over-ride the .bd overflow rule above.
+    */
+
+    #resizablepanel_c.hide-scrollbars .yui-resize .bd {
+        overflow: hidden;
+    }
+
+    #resizablepanel_c.show-scrollbars .yui-resize .bd {
+        overflow: auto;
+    }
+
+    /*
+        PLEASE NOTE: It is necessary to set the "overflow" property of
+        the underlay element to "visible" in order for the 
+        scrollbars on the body of a Resizable Panel instance to be 
+        visible.  By default the "overflow" property of the underlay 
+        element is set to "auto" when a Panel is made visible on
+        Gecko for Mac OS X to prevent scrollbars from poking through
+        it on that browser + platform combintation.  For more 
+        information on this issue, read the comments in the 
+        "container-core.css" file.
+    */
+
+    #resizablepanel_c.show-scrollbars .underlay {
+        overflow: visible;
+    }
+    </style>
+
+    <script type="text/javascript">
+    YAHOO.util.Event.onDOMReady(
+
+        function() {
+
+            // Create a panel Instance, from the 'resizablepanel' DIV standard module markup
+            var panel = new YAHOO.widget.Panel("resizablepanel", {
+                draggable: true,
+                width: "500px",
+                height: "150px",
+                autofillheight: "body", // default value, specified here to highlight its use in the example
+                constraintoviewport:true,
+                context: ["showbtn", "tl", "bl"]
+            });
+            panel.render();
+
+            // Create Resize instance, binding it to the 'resizablepanel' DIV 
+            var resize = new YAHOO.util.Resize("resizablepanel", {
+                handles: ["br"],
+                autoRatio: false,
+                minWidth: 300,
+                minHeight: 100,
+                status: false 
+            });
+
+            // Setup startResize handler, to constrain the resize width/height
+            // if the constraintoviewport configuration property is enabled.
+            resize.on("startResize", function(args) {
+
+    		    if (this.cfg.getProperty("constraintoviewport")) {
+                    var D = YAHOO.util.Dom;
+
+                    var clientRegion = D.getClientRegion();
+                    var elRegion = D.getRegion(this.element);
+
+                    resize.set("maxWidth", clientRegion.right - elRegion.left - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
+                    resize.set("maxHeight", clientRegion.bottom - elRegion.top - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
+	            } else {
+                    resize.set("maxWidth", null);
+                    resize.set("maxHeight", null);
+	        	}
+
+            }, panel, true);
+
+            // Setup resize handler to update the Panel's 'height' configuration property 
+            // whenever the size of the 'resizablepanel' DIV changes.
+
+            // Setting the height configuration property will result in the 
+            // body of the Panel being resized to fill the new height (based on the
+            // autofillheight property introduced in 2.6.0) and the iframe shim and 
+            // shadow being resized also if required (for IE6 and IE7 quirks mode).
+            resize.on("resize", function(args) {
+                var panelHeight = args.height;
+                this.cfg.setProperty("height", panelHeight + "px");
+            }, panel, true);
+
+            YAHOO.util.Event.on("showbtn", "click", panel.show, panel, true);
+        }
+    );
+    </script>
+</head>
+<body class="yui-skin-sam">
+    <h1>Creating a Resizable Panel</h1>
+    <div class="exampleIntro">
+        <p>Operating systems offer windows that can be resized, often by dragging from the lower right-hand corner (and, on Microsoft Windows, from the window edges). This example implements resizability for the Panel control, by leveraging YAHOO.util.Resize to introduce a resize handle to the bottom-right corner of the footer. Resize events are listened for, and the height configuration property of the Panel is set to reflect the new height of Panel's containing element.</p>
+    </div>
+
+    <div id="examplecontainer">
+        <button id="showbtn">Show Resizable Panel</button>
+        <div id="resizablepanel">
+            <div class="hd">Resizable Panel</div>
+            <div class="bd">
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nulla. Fusce mauris massa, rutrum eu, imperdiet ut, placerat at, nunc. Vestibulum consequat ligula ut lacus. Nulla nec pede. Fusce consequat, augue et eleifend ornare, nibh mi dapibus lorem, ut lacinia turpis eros at eros. Proin laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla velit. Fusce id sem sit amet felis porta mollis. Aliquam erat volutpat. Etiam tortor. Donec dui felis, pretium quis, vulputate et, molestie non, nisi.</p>
+            </div>
+            <div class="ft"></div>
+        </div>
+    </div>
+</body>
+</html>
+
--- a/www/extras/yui/examples/container/panel.html
+++ b/www/extras/yui/examples/container/panel.html
--- a/www/extras/yui/examples/container/panel_clean.html
+++ b/www/extras/yui/examples/container/panel_clean.html
@ -0,0 +1,89 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Simple Panel Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Simple Panel Example</h1>
+
+<div class="exampleIntro">
+	<p>Use the show/hide buttons below to show and hide two simple panels.  The first panel is created based on markup on the page and its <code>draggable</code> configuration is set to <code>true</code>; it can be dragged around the screen.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#container {height:15em;}
+</style>
+
+<script>
+		YAHOO.namespace("example.container");
+
+		function init() {
+			// Instantiate a Panel from markup
+			YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"320px", visible:false, constraintoviewport:true } );
+			YAHOO.example.container.panel1.render();
+
+			// Instantiate a Panel from script
+			YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"320px", visible:false, draggable:false, close:false } );
+			YAHOO.example.container.panel2.setHeader("Panel #2 from Script &mdash; This Panel Isn't Draggable");
+			YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
+			YAHOO.example.container.panel2.setFooter("End of Panel #2");
+			YAHOO.example.container.panel2.render("container");
+
+			YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+			YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+
+			YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
+			YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
+		}
+
+		YAHOO.util.Event.addListener(window, "load", init);
+</script>
+
+<div id="container">
+	<div>
+		<button id="show1">Show panel1</button> 
+		<button id="hide1">Hide panel1</button>
+	</div>
+	
+	<div id="panel1">
+		<div class="hd">Panel #1 from Markup &mdash; This Panel is Draggable</div>
+		<div class="bd">This is a Panel that was marked up in the document.</div>
+		<div class="ft">End of Panel #1</div>
+	</div>
+	
+	<div>
+		<button id="show2">Show panel2</button> 
+		<button id="hide2">Hide panel2</button>
+	</div>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/panel_log.html
+++ b/www/extras/yui/examples/container/panel_log.html
--- a/www/extras/yui/examples/container/panelskin1.html
+++ b/www/extras/yui/examples/container/panelskin1.html
--- a/www/extras/yui/examples/container/panelskin1_source.html
+++ b/www/extras/yui/examples/container/panelskin1_source.html
@ -0,0 +1,152 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8">
+	<title>Skinning a Panel with Custom CSS: Introduction</title>
+
+	<style type="text/css">
+	/*margin and padding on body element
+	  can introduce errors in determining
+	  element position and are not recommended;
+	  we turn them off as a foundation for YUI
+	  CSS treatments. */
+	body {
+		margin:0;
+		padding:0;
+	}
+	</style>
+
+	<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+
+	<!-- 
+             Since we're completely re-doing the skin, start with container-core.css as the base, so we 
+             don't need to reverse rules introduced by container-skin.css 
+        -->
+	<link rel="stylesheet" type="text/css" href="../../build/container/assets/container-core.css" />
+
+	<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+	<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
+	<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+	<style tyle="text/css">
+	#example {height:20em;}
+
+	/* Aqua Panel Skin CSS */
+
+	/* Provide skin for default Panel elements, ontop of container-core.css */
+	#myPanel_c.yui-panel-container.shadow .underlay { 
+		position:absolute;
+             	left:3px;
+		right:-3px;
+		top:3px;
+		bottom:-3px;
+		background-color:#000;
+		opacity:0.12;
+		filter:alpha(opacity=12);
+	}
+	#myPanel.yui-panel {
+		position:relative;
+		border:none;
+		overflow:visible;
+		background-color:transparent;
+	}
+	#myPanel.yui-panel .container-close {
+		position:absolute;
+		top:3px;
+		left:4px;
+		height:18px;
+		width:17px;
+		background:url(assets/img/aqua-hd-close.gif) no-repeat; 
+	}
+
+	/* span:hover not supported on IE6 */
+	#myPanel.yui-panel .container-close:hover {
+		background:url(assets/img/aqua-hd-close-over.gif) no-repeat; 
+	}
+	#myPanel.yui-panel .hd { 
+		padding:0;
+		border:none;
+		background:url(assets/img/aqua-hd-bg.gif) repeat-x;
+		color:#000;
+		height:22px;
+		margin-left:6px;
+		margin-right:6px;
+		text-align:center;
+		overflow:visible;
+	}
+	#myPanel.yui-panel .bd {
+		overflow:hidden;
+		padding:4px;
+		border:1px solid #aeaeae;
+		background-color:#FFF;
+	}
+	#myPanel.yui-panel .ft {
+		font-size:75%;
+		color:#666;
+		padding:2px;
+		overflow:hidden;
+		border:1px solid #aeaeae;
+		border-top:none;
+		background-color:#dfdfdf;
+	}
+
+	/* Provide skin for custom elements */
+	#myPanel.yui-panel .hd span {
+		vertical-align:middle;
+		line-height:22px;
+		font-weight:bold;
+	}
+	#myPanel.yui-panel .hd .tl {
+		width:7px;
+		height:22px;
+		top:0;
+		left:0px;
+		background:url(assets/img/aqua-hd-lt.gif) no-repeat;
+		position:absolute;
+	}
+	#myPanel.yui-panel .hd .tr {
+		width:7px;
+		height:22px;
+		top:0;
+		right:0px;
+		background:url(assets/img/aqua-hd-rt.gif) no-repeat;
+		position:absolute;
+	}
+	</style>
+
+	<script type="text/javascript">
+	YAHOO.namespace("example.container");
+
+	YAHOO.util.Event.onDOMReady(function () {
+		YAHOO.example.container.myPanel = new YAHOO.widget.Panel("myPanel", { 
+			width:"300px", 
+			visible:false, 
+			constraintoviewport:true, 
+			draggable:true 
+		});
+		YAHOO.example.container.myPanel.render();
+	});
+	</script>
+
+</head>
+<body>
+	<h1>Skinning a Panel with Custom CSS: Introduction</h1>
+
+	<div class="exampleIntro">
+		<p>In this example, custom CSS and images are applied to the appearance of a Panel instance to stylize it similar 
+                   to a Mac OS X document window.  Use the buttons below to show and hide the Panel.
+                </p>			
+	</div>
+
+	<div id="myPanel">
+		<div class="hd"><div class="tl"></div><span>Panel from Markup</span><div class="tr"></div></div>
+		<div class="bd">This is a Panel that was marked up in the document.</div>
+		<div class="ft">End of Panel</div>
+	</div>
+
+	<div>
+		<button onclick="YAHOO.example.container.myPanel.show()">Show panel</button>
+		<button onclick="YAHOO.example.container.myPanel.hide()">Hide panel</button>
+	</div>
+</body>
+</html>
--- a/www/extras/yui/examples/container/panelskin2.html
+++ b/www/extras/yui/examples/container/panelskin2.html
--- a/www/extras/yui/examples/container/panelskin2_source.html
+++ b/www/extras/yui/examples/container/panelskin2_source.html
@ -0,0 +1,278 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8">
+	<title>Skinning a Panel with Custom CSS: Advanced</title>
+
+	<style type="text/css">
+	/*margin and padding on body element
+	  can introduce errors in determining
+	  element position and are not recommended;
+	  we turn them off as a foundation for YUI
+	  CSS treatments. */
+	body {
+		margin:0;
+		padding:0;
+	}
+	</style>
+
+	<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+
+	<!-- 
+             Since we're completely re-doing the skin, start with container-core.css as the base, so we 
+             don't need to reverse rules introduced by container-skin.css 
+        -->
+	<link rel="stylesheet" type="text/css" href="../../build/container/assets/container-core.css" />
+
+	<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+	<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
+	<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+	<style type="text/css">
+	#example {height:20em;}
+
+	/* XP Panel Skin CSS */
+
+	/* Skin default elements */
+	#panel1_c.yui-panel-container.shadow .underlay {
+		left:3px;
+		right:-3px;
+		top:3px;
+		bottom:-3px;
+		position:absolute;
+		background-color:#000;
+		opacity:0.12;
+		filter:alpha(opacity=12);
+	}
+
+	/* Apply the border to the right side */
+	#panel1.yui-panel {
+		position:relative;
+		border:none;
+		overflow:visible;
+		background:transparent url(assets/img/xp-brdr-rt.gif) no-repeat top right;
+	}
+
+	/* Style the close icon */
+	#panel1.yui-panel .container-close {
+		position:absolute;
+		top:5px;
+		right:8px;
+		height:21px;
+		width:21px;
+		background:url(assets/img/xp-close.gif) no-repeat;
+	}
+
+	/* Style the header with its associated corners */
+	#panel1.yui-panel .hd {
+		padding:0;
+		border:none;
+		background:url(assets/img/xp-hd.gif) repeat-x;
+		color:#FFF;
+		height:30px;
+		margin-left:8px;
+		margin-right:8px;
+		text-align:left;
+		vertical-align:middle;
+		overflow:visible;
+	}
+
+	/* Style the body with the left border */
+	#panel1.yui-panel .bd {
+		overflow:hidden;
+		padding:10px;
+		border:none;
+		background:#FFF url(assets/img/xp-brdr-lt.gif) repeat-y; 
+		margin:0 4px 0 0;
+	}
+
+	/* Style the footer with the bottom corner images */
+	#panel1.yui-panel .ft {
+		background:url(assets/img/xp-ft.gif) repeat-x;
+		font-size:11px;
+		height:26px;
+		padding:0px 10px;
+		border:none
+	}
+
+	/* Skin custom elements */
+	#panel1.yui-panel .hd span {
+		line-height:30px;
+		vertical-align:middle;
+		font-weight:bold;
+	}
+	#panel1.yui-panel .hd .tl {
+		width:8px;
+		height:29px;
+		top:1px;
+		left:0;
+		background:url(assets/img/xp-tl.gif) no-repeat;
+		position:absolute;
+	}
+	#panel1.yui-panel .hd .tr {
+		width:8px;
+		height:29px;
+		top:1px;
+		right:0;
+		background:url(assets/img/xp-tr.gif) no-repeat; 
+		position:absolute;
+	}
+
+	#panel1.yui-panel .ft span {
+		line-height:22px;
+		vertical-align:middle;
+	}
+	#panel1.yui-panel .ft .bl {
+		width:8px;
+		height:26px;
+		bottom:0;
+		left:0;
+		background:url(assets/img/xp-bl.gif) no-repeat;
+		position:absolute;
+	}
+	#panel1.yui-panel .ft .br {
+		width:8px;
+		height:26px;
+		bottom:0;
+		right:0;
+		background:url(assets/img/xp-br.gif) no-repeat;
+		position:absolute;
+	}
+
+	/* Aqua Panel Skin CSS */
+
+	/* Skin default Panel elements */
+	#panel2_c.yui-panel-container.shadow .underlay {
+		position:absolute;
+		background-color:#000;
+		opacity:0.12;
+		filter:alpha(opacity=12);
+		left:3px;
+		right:-3px;
+		bottom:-3px;
+		top:3px;
+	}
+	#panel2.yui-panel {
+		position:relative;
+		border:none;
+		overflow:visible;
+		background-color:transparent;
+	}
+
+	/* Apply styles to the close icon to anchor it to the left side of the header */
+	#panel2.yui-panel .container-close {
+		position:absolute;
+		top:3px;
+		left:4px;
+		height:18px;
+		width:17px;
+		background:url(assets/img/aqua-hd-close.gif) no-repeat;
+	}
+	/* span:hover not supported on IE6 */
+	#panel2.yui-panel .container-close:hover {
+		background:url(assets/img/aqua-hd-close-over.gif) no-repeat;
+	}
+
+	/* Style the header and apply the rounded corners, center the text */
+	#panel2.yui-panel .hd {
+		padding:0;
+		border:none;
+		background:url(assets/img/aqua-hd-bg.gif) repeat-x;
+		color:#000;
+		height:22px;
+		margin-left:7px;
+		margin-right:7px;
+		text-align:center;
+		overflow:visible;
+	}
+	/* Style the body and footer */
+	#panel2.yui-panel .bd {
+		overflow:hidden;
+		padding:4px;
+		border:1px solid #aeaeae;
+		background-color:#FFF;
+	}
+	#panel2.yui-panel .ft {
+		font-size:75%;
+		color:#666;
+		padding:2px;
+		overflow:hidden;
+		border:1px solid #aeaeae;
+		border-top:none;
+		background-color:#dfdfdf;
+	}
+
+	/* Skin custom elements */
+	#panel2.yui-panel .hd span {
+		vertical-align:middle;
+		line-height:22px;
+		font-weight:bold;
+	}
+	#panel2.yui-panel .hd .tl {
+		width:7px;
+		height:22px;
+		top:0;
+		left:0;
+		background:url(assets/img/aqua-hd-lt.gif) no-repeat;
+		position:absolute;
+	}
+	#panel2.yui-panel .hd .tr {
+		width:7px;
+		height:22px;
+		top:0;
+		right:0;
+		background:url(assets/img/aqua-hd-rt.gif) no-repeat;
+		position:absolute;
+	}
+	</style>
+
+	<script>
+	YAHOO.namespace("example.container");
+
+	YAHOO.util.Event.onDOMReady(function () {
+		YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
+		YAHOO.example.container.panel1.render();
+
+		YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, constraintoviewport:true } );
+		YAHOO.example.container.panel2.setHeader("<div class='tl'></div><span>Panel #2 from Script</span><div class='tr'></div>");
+		YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
+		YAHOO.example.container.panel2.setFooter("<span>End of Panel #2</span>");
+		YAHOO.example.container.panel2.render("container");
+
+		YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+		YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+
+		YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
+		YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
+
+	});
+</script>
+</head>
+<body>
+	<h1>Skinning a Panel with Custom CSS: Advanced</h1>
+
+	<div class="exampleIntro">
+		<p>In this example, we move beyond the basic skinning steps demonstrated in <a href="panelskin1">the introductory skinning example</a> 
+		and show more advanced techniques 	with multiple styled Panel Control instances on the same page.  Use the buttons below to show and hide the styled panels.
+		</p>			
+	</div>
+
+	<div id="container"></div>
+
+	<div>
+		<button id="show1">Show panel1</button>
+		<button id="hide1">Hide panel1</button>
+	</div>
+
+	<div id="panel1">
+		<div class="hd"><div class="tl"></div><span>Panel #1 from Markup</span><div class="tr"></div></div>
+		<div class="bd">This is a Panel that was marked up in the document.</div>
+		<div class="ft"><div class="bl"></div><span>End of Panel #1</span><div class="br"></div></div>
+	</div>
+
+	<div>
+		<button id="show2">Show panel2</button>
+		<button id="hide2">Hide panel2</button>
+	</div>
+</body>
+</html>
--- a/www/extras/yui/examples/container/simpledialog-quickstart.html
+++ b/www/extras/yui/examples/container/simpledialog-quickstart.html
--- a/www/extras/yui/examples/container/simpledialog-quickstart_clean.html
+++ b/www/extras/yui/examples/container/simpledialog-quickstart_clean.html
@ -0,0 +1,94 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>SimpleDialog Quickstart Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
+<script type="text/javascript" src="../../build/button/button-min.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>SimpleDialog Quickstart Example</h1>
+
+<div class="exampleIntro">
+	<p>Use the SimpleDialog Control when you want to solicit very simple (usually binary) information from your users &mdash; ok/cancel, yes/no are the classic examples of this sort of interaction.  Use the button below to show a SimpleDialog instance; if you click "yes", that choice will be echoed back to you by script.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+#container { height:12em; }
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	
+	// Define various event handlers for Dialog
+	var handleYes = function() {
+		alert("You clicked yes!");
+		this.hide();
+	};
+	var handleNo = function() {
+		this.hide();
+	};
+
+	// Instantiate the Dialog
+	YAHOO.example.container.simpledialog1 = new YAHOO.widget.SimpleDialog("simpledialog1", 
+																			 { width: "300px",
+																			   fixedcenter: true,
+																			   visible: false,
+																			   draggable: false,
+																			   close: true,
+																			   text: "Do you want to continue?",
+																			   icon: YAHOO.widget.SimpleDialog.ICON_HELP,
+																			   constraintoviewport: true,
+																			   buttons: [ { text:"Yes", handler:handleYes, isDefault:true },
+																						  { text:"No",  handler:handleNo } ]
+																			 } );
+	YAHOO.example.container.simpledialog1.setHeader("Are you sure?");
+	
+	// Render the Dialog
+	YAHOO.example.container.simpledialog1.render("container");
+
+	YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.simpledialog1.show, YAHOO.example.container.simpledialog1, true);
+	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.simpledialog1.hide, YAHOO.example.container.simpledialog1, true);
+
+}
+
+YAHOO.util.Event.addListener(window, "load", init);
+</script>
+
+
+<div id="container">
+<button id="show">Show simpledialog1</button> 
+<button id="hide">Hide simpledialog1</button>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/simpledialog-quickstart_log.html
+++ b/www/extras/yui/examples/container/simpledialog-quickstart_log.html
--- a/www/extras/yui/examples/container/tooltip-multi.html
+++ b/www/extras/yui/examples/container/tooltip-multi.html
--- a/www/extras/yui/examples/container/tooltip-multi_clean.html
+++ b/www/extras/yui/examples/container/tooltip-multi_clean.html
@ -0,0 +1,183 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>One Tooltip, Many Context Elements</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+	.ttGroup {
+		float:left;
+		margin:10px;
+	}
+
+	.ttGroup .grphd  {
+		font-weight:bold;
+		background-color:#ccc;
+		border:1px solid #000;
+		padding:2px;
+	}
+
+	.ttGroup .grpbd {
+		padding:10px;
+	}
+
+	#ttGroupB:after {
+		content:".";
+		display:block;
+		clear:left;
+		visibilty:hidden
+	 	height:0;
+		width:0;	
+	}
+</style>
+
+<!--end custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>One Tooltip, Many Context Elements</h1>
+
+<div class="exampleIntro">
+	<p>In the example below, a single Tooltip instance is used to display tooltips for multiple context elements.</p>
+<ol>
+	<li>For one set of links <em>(Group A)</em>, the Tooltip text is provided by the title attribute of the link</li>
+	<li>For the other set <em>(Group B)</em>, we'll use context related events to set the text property
+	    just before the the tooltip is displayed for each link</li> 
+</ol>
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<div class="ttGroup" id="ttGroupA">
+	<div class="grphd">Group A: Single Tooltip, text set using title</div>
+	<div class="grpbd" id="containerA"></div>
+</div>
+<div class="ttGroup" id="ttGroupB">
+	<div class="grphd">Group B: Single Tootip, text set using events</div>
+	<div class="grpbd" id="containerB"></div>
+</div>
+
+<script type="text/javascript">
+	YAHOO.namespace("example.container");
+
+	YAHOO.example.container.init = function() {
+
+		// CREATE LINKS FOR EXAMPLE
+
+		function createLink(i, container, title) {
+			var a = document.createElement("a");
+			a.href = "http://www.yahoo.com/";
+			a.innerHTML = i + ".  Hover over me to see my Tooltip";
+
+			if (title) {
+			    a.title = title;
+			}
+
+			container.appendChild(a);
+			container.appendChild(document.createElement("br"));
+			container.appendChild(document.createElement("br"));
+			return a;
+		}
+
+		function createTitledLinks() {
+			var ids = [];
+			var container = YAHOO.util.Dom.get("containerA");
+			for (var i = 1; i <= 5; i++) {
+				// NOTE: We're setting up titles for these links
+				var a = createLink(i, container, "Tooltip for link A" + i + ", set through title");
+				a.id = "A" + i;
+				ids.push(a.id);
+			}
+			return ids;
+		}
+
+		function createUntitledLinks() {
+			var ids = [];
+			var container = YAHOO.util.Dom.get("containerB");
+			for (var i = 1; i <= 5; i++) {
+
+				// NOTE: We're not setting up titles for these links
+				var a = createLink(i, container, null);
+				a.id = "B" + i;
+				ids.push(a.id);
+
+				// Change standard text for the 3rd link, to reflect
+				// that we'll disable the tooltip for it.
+				if ( i == 3 ) {
+					a.innerHTML = i + ". Tooltip display prevented";
+				} 
+			}
+			return ids;
+		}
+
+		var groupAIds = createTitledLinks();
+		var groupBIds = createUntitledLinks();
+
+		// TOOLTIP CODE
+
+		// For links in group A which all have titles, this is all we need.
+		// The tooltip text for each context element will be set from the title attribute
+
+		var ttA = new YAHOO.widget.Tooltip("ttA", { 
+			context:groupAIds
+		});
+
+		// For links in group B, we'll set the tooltip text dynamically, 
+		// right before the tooltip is triggered, using the id of the triggering context.
+		// We'll also prevent the tooltip from being displayed for link B3.
+
+		var ttB = new YAHOO.widget.Tooltip("ttB", { 
+			context:groupBIds
+		});
+
+		// Stop the tooltip from being displayed for link B3.
+		ttB.contextMouseOverEvent.subscribe(
+			function(type, args) {
+				var context = args[0];
+				if (context && context.id == "B3") {
+					return false;
+				} else {
+					return true;
+				}	
+			}
+		);
+
+		// Set the text for the tooltip just before we display it.
+		ttB.contextTriggerEvent.subscribe(
+			function(type, args) {
+				var context = args[0];
+				this.cfg.setProperty("text", "Tooltip for " + context.id + ", set using contextTriggerEvent");
+			}
+		);
+	};
+
+	YAHOO.util.Event.addListener(window, "load", YAHOO.example.container.init);
+</script>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/tooltip-multi_log.html
+++ b/www/extras/yui/examples/container/tooltip-multi_log.html
--- a/www/extras/yui/examples/container/tooltip.html
+++ b/www/extras/yui/examples/container/tooltip.html
--- a/www/extras/yui/examples/container/tooltip_clean.html
+++ b/www/extras/yui/examples/container/tooltip_clean.html
@ -0,0 +1,57 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Simple Tooltip Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container-min.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Simple Tooltip Example</h1>
+
+<div class="exampleIntro">
+	<p>Hover over the orange box and the link to see their Tooltips.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#ctx { background:orange;width:200px;height:200px; }
+</style>
+
+<p id="ctx">Hover over me to see a Tooltip!</p>
+
+<p><a id="link" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!</a></p>
+
+<script type="text/javascript">
+	YAHOO.namespace("example.container");
+	YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", { context:"ctx", text:"My text was set using the 'text' configuration property" });
+	YAHOO.example.container.tt1.beforeShowEvent.subscribe(function(){YAHOO.log("Tooltip one is appearing.","info","example");});
+	YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", { context:"link" });
+</script>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/container/tooltip_log.html
+++ b/www/extras/yui/examples/container/tooltip_log.html
				`@ -0,0 +1 @@`
				(function(){var q=YAHOO.util.Event,s=YAHOO.util.Dom,AJ=YAHOO.lang,e=YAHOO.env.ua,D=YAHOO.widget.Panel,g=YAHOO.widget.Tooltip,F=YAHOO.widget.Module.prototype,AH=F.initDefaultConfig,w=F._initResizeMonitor,G=YAHOO.widget.Overlay.prototype,j=G.showIframe,y,A,m=false,X,p,B=false,z={},AB={},T="aria-",AI="role",u="presentation",i="usearia",l="blur",AF="focus",b="visible",W="beforeHide",o="dialog",Z="describedby",AA="context",I="hidden",J="container-close",R="a",v="href",M="button",AK="keydown",L="beforeShow",AE="close",V="alertdialog",Y="labelledby",U="xy",f="tooltip",t="destroy";var O=function(AL,AM){AL.setAttribute(AI,AM);};var Q=function(AL,AN,AM){AL.setAttribute((T+AN),AM);};AJ.augmentObject(F,{_initResizeMonitor:function(){w.call(this);var AL=this.resizeMonitor;if(AL){O(AL,u);AL.tabIndex=-1;}},configUseARIA:function(AM,AL){},configDescribedBy:function(AN,AM){var AL=AM[0];if(this.cfg.getProperty(i)&&AL){Q(this.element,Z,AL);}},configLabelledBy:function(AN,AM){var AL=AM[0];if(this.cfg.getProperty(i)&&AL){Q(this.element,Y,AL);}},initDefaultConfig:function(){this.cfg.addProperty(i,{handler:this.configUseARIA,value:(e.gecko&&e.gecko>=1.9)\|\|(e.ie&&e.ie>=8),validator:AJ.isBoolean});this.cfg.addProperty(Y,{handler:this.configLabelledBy,validator:AJ.isString});this.cfg.addProperty(Z,{handler:this.configDescribedBy,validator:AJ.isString});AH.call(this);}},"initDefaultConfig","configUseARIA","configLabelledBy","configDescribedBy","_initResizeMonitor");G.showIframe=function(){j.call(this);var AL=this.iframe;if(this.cfg.getProperty(i)&&AL&&!AL.getAttribute(AI)){O(AL,u);AL.tabIndex=-1;}};var H=function(AM){var AL=q.getCharCode(AM);if(AL===27){if(this.cancel){this.cancel();}else{this.hide();}}};var N=function(AL){this.fireEvent(AF,AL);};var AD=function(AL){this.fireEvent(l,AL);};var AG=function(AN,AM){var AL=AM[0];if(p._manageFocus(this)){if(this.cfg.getProperty(b)&&this.focusFirst){if(!AL){this.focusFirst();}}}};var C=function(AN,AM){var AL=AM[0];if(p._manageBlur(this)&&!AL){this.fireEvent(l);}};var d=function(AN,AL,AM){this.blur();if(AM&&AM.focus){try{AM.focus();}catch(AO){}}this.unsubscribe(W,d,AM);};var P=function(){this.subscribe(W,d,X);};var E=function(){var AL=this.cfg.getProperty(AI)===o?this.innerElement:this.body;Q(AL,I,!this.cfg.getProperty(b));};var S=function(){s.getElementsByClassName(J,R,this.element,function(AL){AL.removeAttribute(v);O(AL,M);AL.tabIndex=0;});};var x=function(AM,AL){var AN=AL[0];if(AN){S.call(this);}};if(D){y=D.prototype;A=y.initDefaultConfig;AJ.augmentObject(y,{hasFocus:function(){return(p&&this===p.getActive());},configUseARIA:function(AN,AM){var AL=AM[0];if(AL){if(!p){p=new YAHOO.widget.OverlayManager();}p.register(this);this.focus=function(){if(!this.hasFocus()){this.fireEvent(AF);}};this.blur=function(){if(this.hasFocus()){this.fireEvent(l);}};q.onFocus(this.element,N,null,this);q.onBlur(this.element,AD,null,this);this.subscribe(AF,AG);this.subscribe(l,C);q.on(this.element,AK,H,null,this);this.subscribe(L,P);E.call(this);this.cfg.subscribeToConfigEvent(b,E);this.cfg.subscribeToConfigEvent(AE,x);if(!m){q.onFocus(document,function(AO){X=q.getTarget(AO);});m=true;}}},configDescribedBy:function(AO,AM){var AL=AM[0],AN;if(this.cfg.getProperty(i)&&AL){AN=this.cfg.getProperty(AI)===o?this.innerElement:this.body;Q(AN,Z,AL);}},configLabelledBy:function(AO,AM){var AL=AM[0],AN;if(this.cfg.getProperty(i)&&AL){AN=this.cfg.getProperty(AI)===o?this.innerElement:this.body;Q(AN,Y,AL);}},configRole:function(AQ,AN){var AP=AN[0],AO,AL,AM;if(AP){switch(AP){case o:AO=this.innerElement;break;case V:AO=this.body;break;}if(AO){O(AO,AP);AL=this.header;AM=AL.id\|\|s.generateId(AL);this.cfg.setProperty(Y,AM);S.call(this);}}},initDefaultConfig:function(){A.call(this);this.cfg.addProperty(AI,{handler:this.configRole,value:o,validator:AJ.isString});}},"initDefaultConfig","configRole","configUseARIA","configLabelledBy","configDescribedBy","hasFocus");}var K=function(AN){var AL=q.getTarget(AN),AO=AB[AL.id],AM;if(AO){AM=s.getXY(AL);AO.cfg.setProperty(U,[AM[0],(AM[1]+AL.offsetHeight+5)]);AO.show();}};var h=function(AM){var AL=q.getTarget(AM),AN=AB[AL.id];if(AN&&AN.cfg.getProperty(b)){AN.hide();}};var r=function(AM){var AL=AM.id,AN=AB[AL];if(AN===this){delete AB[AL];AM.removeAttribute(Z);}};var c=function(){var AM=this.element.id,AL=z[AM];s.batch(AL,r,this,true);z[AM]=null;};var k=function(AM){var AL=AM.id\|\|s.generateId(AM);AB[AL]=this;Q(AM,Z,this.element.id);};var a=function(){var AL=this.cfg.getProperty(AA);s.batch(AL,k,this,true);z[this.element.id]=AL;};var n=function(AN,AL){c.call(this);var AM=AL[0];if(AM){a.call(this);}};var AC=function(){Q(this.body,I,!this.cfg.getProperty(b));};if(g){g.prototype.configUseARIA=function(AN,AM){var AL=AM[0];if(AL){O(this.body,f);this.cfg.subscribeToConfigEvent(AA,n);AC.call(this);this.cfg.subscribeToConfigEvent(b,AC);this.subscribe(t,c);if(!B){q.onFocus(document,K);q.onBlur(document,h);B=true;}}};}}());