jquery-layout-rails 0.0.1 → 0.1.0

data/README.md

@@ -22,4 +22,4 @@ Alternatively you can add both dependencies at once:
 If you have multiple requires in your application, you shouldn't include jquery in more
 than one of them or it will be included more than once. This means it will remove all prior
 registered plugins on each inclusion. So, if that is your case you should include
-`jquery/layout` instead of `jquery-layou` for better control over jQuery inclusion.
+`jquery/layout` instead of `jquery-layout` for better control over jQuery inclusion.

data/lib/jquery-layout-rails/version.rb

@@ -1,3 +1,3 @@
 module JqueryLayoutRails
-  VERSION = "0.0.1"
+  VERSION = "0.1.0"
 end

data/vendor/assets/javascripts/jquery/layout.js

@@ -1,7 +1,8 @@
 /**
- * @preserve jquery.layout 1.3.0 - Release Candidate 30.51
- * $Date: 2012-05-12 08:00:00 (Sat, 12 May 2012) $
- * $Rev: 303005 $
+ * @preserve
+ * jquery.layout 1.3.0 - Release Candidate 30.79
+ * $Date: 2013-01-12 08:00:00 (Sat, 12 Jan 2013) $
+ * $Rev: 303007 $
  *
  * Copyright (c) 2012 
  *   Fabrizio Balliano (http://www.fabrizioballiano.net)
@@ -10,7 +11,7 @@
  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  *
- * Changelog: http://layout.jquery-dev.net/changelog.cfm#1.3.0.rc30.5
+ * Changelog: http://layout.jquery-dev.net/changelog.cfm#1.3.0.rc30.79
  *
  * Docs: http://layout.jquery-dev.net/documentation.html
  * Tips: http://layout.jquery-dev.net/tips.html
@@ -23,6 +24,10 @@
  * {number=}	optional parameter
  * {*}			ALL types
  */
+/*	TODO for jQ 2.0 
+ *	change .andSelf() to .addBack()
+ *	$.fn.disableSelection won't work
+ */
 
 // NOTE: For best readability, view with a fixed-width font and tabs equal to 4-chars
 
@@ -32,61 +37,38 @@
 var	min		= Math.min
 ,	max		= Math.max
 ,	round	= Math.floor
-;
-function isStr (v) { return $.type(v) === "string"; }
-
-function runPluginCallbacks (Instance, a_fn) {
-	if ($.isArray(a_fn)) 
-		for (var i=0, c=a_fn.length; i<c; i++) {
-			var fn = a_fn[i];
-			try {
-				if (isStr(fn)) // 'name' of a function
-					fn = eval(fn);
-				if ($.isFunction(fn))
-					fn( Instance );
-			} catch (ex) {}
-		}
-};
 
+,	isStr	=  function (v) { return $.type(v) === "string"; }
 
+	/**
+	* @param {!Object}			Instance
+	* @param {Array.<string>}	a_fn
+	*/
+,	runPluginCallbacks = function (Instance, a_fn) {
+		if ($.isArray(a_fn))
+			for (var i=0, c=a_fn.length; i<c; i++) {
+				var fn = a_fn[i];
+				try {
+					if (isStr(fn)) // 'name' of a function
+						fn = eval(fn);
+					if ($.isFunction(fn))
+						g(fn)( Instance );
+				} catch (ex) {}
+			}
+		function g (f) { return f; }; // compiler hack
+	}
+;
 
 /*
  *	GENERIC $.layout METHODS - used by all layouts
  */
 $.layout = {
 
-	version:	"1.3.rc30.51"
-,	revision:	0.033005 // 1.3.0 final = 1.0300 - major(n+).minor(nn)+patch(nn+)
-
-	// LANGUAGE CUSTOMIZATION
-,	language: {
-	//	Tips and messages for resizers, togglers, custom buttons, etc.
-		Open:			"Open"	// eg: "Open Pane"
-	,	Close:			"Close"
-	,	Resize:			"Resize"
-	,	Slide:			"Slide Open"
-	,	Pin:			"Pin"
-	,	Unpin:			"Un-Pin"
-	,	noRoomToOpenTip: "Not enough room to show this pane."
-	,	minSizeWarning:	"Panel has reached its minimum size"
-	,	maxSizeWarning:	"Panel has reached its maximum size"
-	//	Developer error messages
-	,	pane:					"pane"		// description of "layout pane element"
-	,	selector:				"selector"	// description of "jQuery-selector"
-	,	errButton:				"Error Adding Button \n\nInvalid "
-	,	errContainerMissing:	"UI Layout Initialization Error\n\nThe specified layout-container does not exist."
-	,	errCenterPaneMissing:	"UI Layout Initialization Error\n\nThe center-pane element does not exist.\n\nThe center-pane is a required element."
-	,	errContainerHeight:		"UI Layout Initialization Warning\n\nThe layout-container \"CONTAINER\" has no height.\n\nTherefore the layout is 0-height and hence 'invisible'!"
-	}
-
-	// can update code here if $.browser is phased out
-,	browser: {
-		mozilla:	!!$.browser.mozilla
-	,	webkit:		!!$.browser.webkit || !!$.browser.safari // webkit = jQ 1.4
-	,	msie:		!!$.browser.msie
-	,	isIE6:		!!$.browser.msie && $.browser.version == 6
-	,	version:	$.browser.version // not used in Layout core, but may be used by plugins
-	}
+	version:	"1.3.rc30.79"
+,	revision:	0.033007 // 1.3.0 final = 1.0300 - major(n+).minor(nn)+patch(nn+)
+
+	// $.layout.browser REPLACES $.browser
+,	browser:	{} // set below
 
 	// *PREDEFINED* EFFECTS & DEFAULTS 
 	// MUST list effect here - OR MUST set an fxSettings option (can be an empty hash: {})
@@ -200,7 +182,7 @@ $.layout = {
 			}
 		}
 	,	north: {
-			side:			"Top"
+			side:			"top"
 		,	sizeType:		"Height"
 		,	dir:			"horz"
 		,	cssReq: {
@@ -213,7 +195,7 @@ $.layout = {
 			}
 		}
 	,	south: {
-			side:			"Bottom"
+			side:			"bottom"
 		,	sizeType:		"Height"
 		,	dir:			"horz"
 		,	cssReq: {
@@ -226,7 +208,7 @@ $.layout = {
 			}
 		}
 	,	east: {
-			side:			"Right"
+			side:			"right"
 		,	sizeType:		"Width"
 		,	dir:			"vert"
 		,	cssReq: {
@@ -239,7 +221,7 @@ $.layout = {
 			}
 		}
 	,	west: {
-			side:			"Left"
+			side:			"left"
 		,	sizeType:		"Width"
 		,	dir:			"vert"
 		,	cssReq: {
@@ -298,15 +280,18 @@ $.layout = {
 		return typeof evt === "object" && evt.stopPropagation ? evt : null;
 	}
 ,	parsePaneName: function (evt_or_pane) {
-		// getEventObject() automatically calls .stopPropagation(), WHICH MUST BE DONE!
-		var evt = $.layout.getEventObject( evt_or_pane );
+		var evt = $.layout.getEventObject( evt_or_pane )
+		,	pane = evt_or_pane;
 		if (evt) {
 			// ALWAYS stop propagation of events triggered in Layout!
 			evt.stopPropagation();
-			return $(this).data("layoutEdge");
+			pane = $(this).data("layoutEdge");
 		}
-		else
-			return evt_or_pane;
+		if (pane && !/^(west|east|north|south|center)$/.test(pane)) {
+			$.layout.msg('LAYOUT ERROR - Invalid pane-name: "'+ pane +'"');
+			pane = "error";
+		}
+		return pane;
 	}
 
 
@@ -316,7 +301,7 @@ $.layout = {
 		draggable:		!!$.fn.draggable // resizing
 	,	effects: {
 			core:		!!$.effects		// animimations (specific effects tested by initOptions)
-		,	slide:		$.effects && $.effects.slide // default effect
+		,	slide:		$.effects && ($.effects.slide || ($.effects.effect && $.effects.effect.slide)) // default effect
 		}
 	}
 
@@ -338,7 +323,7 @@ $.layout = {
 ,	scrollbarHeight:	function () { return window.scrollbarHeight || $.layout.getScrollbarSize('height'); }
 ,	getScrollbarSize:	function (dim) {
 		var $c	= $('<div style="position: absolute; top: -10000px; left: -10000px; width: 100px; height: 100px; overflow: scroll;"></div>').appendTo("body");
-		var d	= { width: $c.width() - $c[0].clientWidth, height: $c.height() - $c[0].clientHeight };
+		var d	= { width: $c.css("width") - $c[0].clientWidth, height: $c.height() - $c[0].clientHeight };
 		$c.remove();
 		window.scrollbarWidth	= d.width;
 		window.scrollbarHeight	= d.height;
@@ -350,19 +335,20 @@ $.layout = {
 	* Returns hash container 'display' and 'visibility'
 	*
 	* @see	$.swap() - swaps CSS, runs callback, resets CSS
+	* @param  {!Object}		$E				jQuery element
+	* @param  {boolean=}	[force=false]	Run even if display != none
+	* @return {!Object}						Returns current style props, if applicable
 	*/
 ,	showInvisibly: function ($E, force) {
-		if (!$E) return {};
-		if (!$E.jquery) $E = $($E);
-		var CSS = {
-			display:	$E.css('display')
-		,	visibility:	$E.css('visibility')
-		};
-		if (force || CSS.display === "none") { // only if not *already hidden*
-			$E.css({ display: "block", visibility: "hidden" }); // show element 'invisibly' so can be measured
+		if ($E && $E.length && (force || $E.css("display") === "none")) { // only if not *already hidden*
+			var s = $E[0].style
+				// save ONLY the 'style' props because that is what we must restore
+			,	CSS = { display: s.display || '', visibility: s.visibility || '' };
+			// show element 'invisibly' so can be measured
+			$E.css({ display: "block", visibility: "hidden" });
 			return CSS;
 		}
-		else return {};
+		return {};
 	}
 
 	/**
@@ -371,32 +357,29 @@ $.layout = {
 	* @see  _create(), onWindowResize() for container, plus others for pane
 	* @return JSON  Returns a hash of all dimensions: top, bottom, left, right, outerWidth, innerHeight, etc
 	*/
-,	getElementDimensions: function ($E) {
+,	getElementDimensions: function ($E, inset) {
 		var
-			d	= {}			// dimensions hash
-		,	x	= d.css = {}	// CSS hash
-		,	i	= {}			// TEMP insets
-		,	b, p				// TEMP border, padding
+		//	dimensions hash - start with current data IF passed
+			d	= { css: {}, inset: {} }
+		,	x	= d.css			// CSS hash
+		,	i	= { bottom: 0 }	// TEMP insets (bottom = complier hack)
 		,	N	= $.layout.cssNum
 		,	off = $E.offset()
+		,	b, p, ei			// TEMP border, padding
 		;
 		d.offsetLeft = off.left;
 		d.offsetTop  = off.top;
 
+		if (!inset) inset = {}; // simplify logic below
+
 		$.each("Left,Right,Top,Bottom".split(","), function (idx, e) { // e = edge
 			b = x["border" + e] = $.layout.borderWidth($E, e);
 			p = x["padding"+ e] = $.layout.cssNum($E, "padding"+e);
-			i[e] = b + p; // total offset of content from outer side
-			d["inset"+ e] = p;
+			ei = e.toLowerCase();
+			d.inset[ei] = inset[ei] >= 0 ? inset[ei] : p; // any missing insetX value = paddingX
+			i[ei] = d.inset[ei] + b; // total offset of content from outer side
 		});
 
-		d.offsetWidth	= $E.innerWidth();	// offsetWidth is used in calc when doing manual resize
-		d.offsetHeight	= $E.innerHeight();	// ditto
-		d.outerWidth	= $E.outerWidth();
-		d.outerHeight	= $E.outerHeight();
-		d.innerWidth	= max(0, d.outerWidth  - i.Left - i.Right);
-		d.innerHeight	= max(0, d.outerHeight - i.Top  - i.Bottom);
-
 		x.width		= $E.width();
 		x.height	= $E.height();
 		x.top		= N($E,"top",true);
@@ -404,12 +387,24 @@ $.layout = {
 		x.left		= N($E,"left",true);
 		x.right		= N($E,"right",true);
 
+		d.outerWidth	= $E.outerWidth();
+		d.outerHeight	= $E.outerHeight();
+		// calc the TRUE inner-dimensions, even in quirks-mode!
+		d.innerWidth	= max(0, d.outerWidth  - i.left - i.right);
+		d.innerHeight	= max(0, d.outerHeight - i.top  - i.bottom);
+		// layoutWidth/Height is used in calcs for manual resizing
+		// layoutW/H only differs from innerW/H when in quirks-mode - then is like outerW/H
+		d.layoutWidth	= $E.innerWidth();
+		d.layoutHeight	= $E.innerHeight();
+
+		//if ($E.prop('tagName') === 'BODY') { debugData( d, $E.prop('tagName') ); } // DEBUG
+
 		//d.visible	= $E.is(":visible");// && x.width > 0 && x.height > 0;
 
 		return d;
 	}
 
-,	getElementCSS: function ($E, list) {
+,	getElementStyles: function ($E, list) {
 		var
 			CSS	= {}
 		,	style	= $E[0].style
@@ -446,23 +441,19 @@ $.layout = {
 	* @return {number}			Returns the innerWidth of the elem by subtracting padding and borders
 	*/
 ,	cssWidth: function ($E, outerWidth) {
-		var
-			b = $.layout.borderWidth
-		,	n = $.layout.cssNum
-		;
 		// a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed
 		if (outerWidth <= 0) return 0;
 
-		if (!$.support.boxModel) return outerWidth;
-
-		// strip border and padding from outerWidth to get CSS Width
-		var W = outerWidth
-			- b($E, "Left")
-			- b($E, "Right")
-			- n($E, "paddingLeft")		
-			- n($E, "paddingRight")
+		var bs	= !$.layout.browser.boxModel ? "border-box" : $.support.boxSizing ? $E.css("boxSizing") : "content-box"
+		,	b	= $.layout.borderWidth
+		,	n	= $.layout.cssNum
+		,	W	= outerWidth
 		;
-
+		// strip border and/or padding from outerWidth to get CSS Width
+		if (bs !== "border-box")
+			W -= (b($E, "Left") + b($E, "Right"));
+		if (bs === "content-box")
+			W -= (n($E, "paddingLeft") + n($E, "paddingRight"));
 		return max(0,W);
 	}
 
@@ -475,23 +466,19 @@ $.layout = {
 	* @return {number}			Returns the innerHeight of the elem by subtracting padding and borders
 	*/
 ,	cssHeight: function ($E, outerHeight) {
-		var
-			b = $.layout.borderWidth
-		,	n = $.layout.cssNum
-		;
 		// a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed
 		if (outerHeight <= 0) return 0;
 
-		if (!$.support.boxModel) return outerHeight;
-
-		// strip border and padding from outerHeight to get CSS Height
-		var H = outerHeight
-			- b($E, "Top")
-			- b($E, "Bottom")
-			- n($E, "paddingTop")
-			- n($E, "paddingBottom")
+		var bs	= !$.layout.browser.boxModel ? "border-box" : $.support.boxSizing ? $E.css("boxSizing") : "content-box"
+		,	b	= $.layout.borderWidth
+		,	n	= $.layout.cssNum
+		,	H	= outerHeight
 		;
-
+		// strip border and/or padding from outerHeight to get CSS Height
+		if (bs !== "border-box")
+			H -= (b($E, "Top") + b($E, "Bottom"));
+		if (bs === "content-box")
+			H -= (n($E, "paddingTop") + n($E, "paddingBottom"));
 		return max(0,H);
 	}
 
@@ -507,8 +494,8 @@ $.layout = {
 ,	cssNum: function ($E, prop, allowAuto) {
 		if (!$E.jquery) $E = $($E);
 		var CSS = $.layout.showInvisibly($E)
-		,	p	= $.curCSS($E[0], prop, true)
-		,	v	= allowAuto && p=="auto" ? p : (parseInt(p, 10) || 0);
+		,	p	= $.css($E[0], prop, true)
+		,	v	= allowAuto && p=="auto" ? p : Math.round(parseFloat(p) || 0);
 		$E.css( CSS ); // RESET
 		return v;
 	}
@@ -516,7 +503,7 @@ $.layout = {
 ,	borderWidth: function (el, side) {
 		if (el.jquery) el = el[0];
 		var b = "border"+ side.substr(0,1).toUpperCase() + side.substr(1); // left => Left
-		return $.curCSS(el, b+"Style", true) === "none" ? 0 : (parseInt($.curCSS(el, b+"Width", true), 10) || 0);
+		return $.css(el, b+"Style", true) === "none" ? 0 : Math.round(parseFloat($.css(el, b+"Width", true)) || 0);
 	}
 
 	/**
@@ -567,7 +554,7 @@ $.layout = {
 	* @param {(Object|string)}			info			String message OR Hash/Array
 	* @param {(Boolean|string|Object)=}	[popup=false]	True means alert-box - can be skipped
 	* @param {(Object|string)=}			[debugTitle=""]	Title for Hash data - can be skipped
-	* @param {Object=}					[debutOpts={}]	Extra options for debug output
+	* @param {Object=}					[debugOpts]		Extra options for debug output
 	*/
 ,	msg: function (info, popup, debugTitle, debugOpts) {
 		if ($.isPlainObject(info) && window.debugData) {
@@ -614,28 +601,57 @@ $.layout = {
 
 };
 
-var	lang = $.layout.language; // alias used in defaults...
 
-// DEFAULT OPTIONS - CHANGE IF DESIRED
+/*
+ *	$.layout.browser REPLACES removed $.browser, with extra data
+ *	Parsing code here adapted from jQuery 1.8 $.browse
+ */
+var u = navigator.userAgent.toLowerCase()
+,	m = /(chrome)[ \/]([\w.]+)/.exec( u )
+	||	/(webkit)[ \/]([\w.]+)/.exec( u )
+	||	/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( u )
+	||	/(msie) ([\w.]+)/.exec( u )
+	||	u.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( u )
+	||	[]
+,	b = m[1] || ""
+,	v = m[2] || 0
+,	ie = b === "msie"
+;
+$.layout.browser = {
+	version:	v
+,	safari:		b === "webkit"	// webkit (NOT chrome) = safari
+,	webkit:		b === "chrome"	// chrome = webkit
+,	msie:		ie
+,	isIE6:		ie && v == 6
+	// ONLY IE reverts to old box-model - update for older jQ onReady
+,	boxModel:	!ie || $.support.boxModel !== false
+};
+if (b) $.layout.browser[b] = true; // set CURRENT browser
+/*	OLD versions of jQuery only set $.support.boxModel after page is loaded
+ *	so if this is IE, use support.boxModel to test for quirks-mode (ONLY IE changes boxModel) */
+if (ie) $(function(){ $.layout.browser.boxModel = $.support.boxModel; });
+
+
+// DEFAULT OPTIONS
 $.layout.defaults = {
 /*
  *	LAYOUT & LAYOUT-CONTAINER OPTIONS
  *	- none of these options are applicable to individual panes
  */
 	name:						""			// Not required, but useful for buttons and used for the state-cookie
-,	containerSelector:			""			// ONLY used when specifying a childOptions - to find container-element that is NOT directly-nested
 ,	containerClass:				"ui-layout-container" // layout-container element
+,	inset:						null		// custom container-inset values (override padding)
 ,	scrollToBookmarkOnLoad:		true		// after creating a layout, scroll to bookmark in URL (.../page.htm#myBookmark)
 ,	resizeWithWindow:			true		// bind thisLayout.resizeAll() to the window.resize event
 ,	resizeWithWindowDelay:		200			// delay calling resizeAll because makes window resizing very jerky
 ,	resizeWithWindowMaxDelay:	0			// 0 = none - force resize every XX ms while window is being resized
+,	maskPanesEarly:				false		// true = create pane-masks on resizer.mouseDown instead of waiting for resizer.dragstart
 ,	onresizeall_start:			null		// CALLBACK when resizeAll() STARTS	- NOT pane-specific
 ,	onresizeall_end:			null		// CALLBACK when resizeAll() ENDS	- NOT pane-specific
 ,	onload_start:				null		// CALLBACK when Layout inits - after options initialized, but before elements
 ,	onload_end:					null		// CALLBACK when Layout inits - after EVERYTHING has been initialized
 ,	onunload_start:				null		// CALLBACK when Layout is destroyed OR onWindowUnload
 ,	onunload_end:				null		// CALLBACK when Layout is destroyed OR onWindowUnload
-,	autoBindCustomButtons:		false		// search for buttons with ui-layout-button class and auto-bind them
 ,	initPanes:					true		// false = DO NOT initialize the panes onLoad - will init later
 ,	showErrorMessages:			true		// enables fatal error messages to warn developers of common errors
 ,	showDebugMessages:			false		// display console-and-alert debug msgs - IF this Layout version _has_ debugging code!
@@ -650,6 +666,15 @@ $.layout.defaults = {
 	,	pane_animate:			1000		// applied to the pane when being animated - not applied to the resizer
 	,	resizer_drag:			10000		// applied to the CLONED resizer-bar when being 'dragged'
 	}
+,	errors: {
+		pane:					"pane"		// description of "layout pane element" - used only in error messages
+	,	selector:				"selector"	// description of "jQuery-selector" - used only in error messages
+	,	addButtonError:			"Error Adding Button\nInvalid "
+	,	containerMissing:		"UI Layout Initialization Error\nThe specified layout-container does not exist."
+	,	centerPaneMissing:		"UI Layout Initialization Error\nThe center-pane element does not exist.\nThe center-pane is a required element."
+	,	noContainerHeight:		"UI Layout Initialization Warning\nThe layout-container \"CONTAINER\" has no height.\nTherefore the layout is 0-height and hence 'invisible'!"
+	,	callbackError:			"UI Layout Callback Error\nThe EVENT callback is not a valid function."
+	}
 /*
  *	PANE DEFAULT SETTINGS
  *	- settings under the 'panes' key become the default settings for *all panes*
@@ -682,8 +707,6 @@ $.layout.defaults = {
 	,	togglerLength_closed: 	50			// 100% OR -1 means 'full height/width of resizer bar' - 0 means 'hidden'
 	,	togglerAlign_open:		"center"	// top/left, bottom/right, center, OR...
 	,	togglerAlign_closed:	"center"	// 1 => nn = offset from top/left, -1 => -nn == offset from bottom/right
-	,	togglerTip_open:		lang.Close	// Toggler tool-tip (title)
-	,	togglerTip_closed:		lang.Open	// ditto
 	,	togglerContent_open:	""			// text or HTML to put INSIDE the toggler
 	,	togglerContent_closed:	""			// ditto
 	//	RESIZING OPTIONS
@@ -699,10 +722,7 @@ $.layout.defaults = {
 	,	livePaneResizing:		false		// true = LIVE Resizing as resizer is dragged
 	,	liveContentResizing:	false		// true = re-measure header/footer heights as resizer is dragged
 	,	liveResizingTolerance:	1			// how many px change before pane resizes, to control performance
-	//	TIPS & MESSAGES - also see lang object
-	,	noRoomToOpenTip:		lang.noRoomToOpenTip
-	,	resizerTip:				lang.Resize	// Resizer tool-tip (title)
-	,	sliderTip:				lang.Slide	// resizer-bar triggers 'sliding' when pane is closed
+	//	SLIDING OPTIONS
 	,	sliderCursor:			"pointer"	// cursor when resizer-bar will trigger 'sliding'
 	,	slideTrigger_open:		"click"		// click, dblclick, mouseenter
 	,	slideTrigger_close:		"mouseleave"// click, mouseleave
@@ -711,6 +731,18 @@ $.layout.defaults = {
 	,	hideTogglerOnSlide:		false		// when pane is slid-open, should the toggler show?
 	,	preventQuickSlideClose:	$.layout.browser.webkit // Chrome triggers slideClosed as it is opening
 	,	preventPrematureSlideClose: false	// handle incorrect mouseleave trigger, like when over a SELECT-list in IE
+	//	PANE-SPECIFIC TIPS & MESSAGES
+	,	tips: {
+			Open:				"Open"		// eg: "Open Pane"
+		,	Close:				"Close"
+		,	Resize:				"Resize"
+		,	Slide:				"Slide Open"
+		,	Pin:				"Pin"
+		,	Unpin:				"Un-Pin"
+		,	noRoomToOpen:		"Not enough room to show this panel."	// alert if user tries to open a pane that cannot
+		,	minSizeWarning:		"Panel has reached its minimum size"	// displays in browser statusbar
+		,	maxSizeWarning:		"Panel has reached its maximum size"	// ditto
+		}
 	//	HOT-KEYS & MISC
 	,	showOverflowOnHover:	false		// will bind allowOverflow() utility to pane.onMouseOver
 	,	enableCursorHotkey:		true		// enabled 'cursor' hotkeys
@@ -723,7 +755,7 @@ $.layout.defaults = {
 	,	fxSettings:				{}			// can be passed, eg: { easing: "easeOutBounce", duration: 1500 }
 	,	fxOpacityFix:			true		// tries to fix opacity in IE to restore anti-aliasing after animation
 	,	animatePaneSizing:		false		// true = animate resizing after dragging resizer-bar OR sizePane() is called
-    /*  NOTE: Action-specific FX options are auto-generated from the options above if not specifically set:
+	/*  NOTE: Action-specific FX options are auto-generated from the options above if not specifically set:
 		fxName_open:			"slide"		// 'Open' pane animation
 		fnName_close:			"slide"		// 'Close' pane animation
 		fxName_size:			"slide"		// 'Size' pane animation - when animatePaneSizing = true
@@ -735,13 +767,15 @@ $.layout.defaults = {
 		fxSettings_size:		{}
 	*/
 	//	CHILD/NESTED LAYOUTS
-	,	childOptions:			null		// Layout-options for nested/child layout - even {} is valid as options
-	,	initChildLayout:		true		// true = child layout will be created as soon as _this_ layout completes initialization
-	,	destroyChildLayout:		true		// true = destroy child-layout if this pane is destroyed
-	,	resizeChildLayout:		true		// true = trigger child-layout.resizeAll() when this pane is resized
-	//	PANE CALLBACKS
+	,	children:				null		// Layout-options for nested/child layout - even {} is valid as options
+	,	containerSelector:		''			// if child is NOT 'directly nested', a selector to find it/them (can have more than one child layout!)
+	,	initChildren:			true		// true = child layout will be created as soon as _this_ layout completes initialization
+	,	destroyChildren:		true		// true = destroy child-layout if this pane is destroyed
+	,	resizeChildren:			true		// true = trigger child-layout.resizeAll() when this pane is resized
+	//	EVENT TRIGGERING
 	,	triggerEventsOnLoad:	false		// true = trigger onopen OR onclose callbacks when layout initializes
 	,	triggerEventsDuringLiveResize: true	// true = trigger onresize callback REPEATEDLY if livePaneResizing==true
+	//	PANE CALLBACKS
 	,	onshow_start:			null		// CALLBACK when pane STARTS to Show	- BEFORE onopen/onhide_start
 	,	onshow_end:				null		// CALLBACK when pane ENDS being Shown	- AFTER  onopen/onhide_end
 	,	onhide_start:			null		// CALLBACK when pane STARTS to Close	- BEFORE onclose_start
@@ -798,15 +832,15 @@ $.layout.defaults = {
 
 $.layout.optionsMap = {
 	// layout/global options - NOT pane-options
-	layout: ("stateManagement,effects,zIndexes,"
-	+	"name,zIndex,scrollToBookmarkOnLoad,showErrorMessages,"
-	+	"resizeWithWindow,resizeWithWindowDelay,resizeWithWindowMaxDelay,"
-	+	"onresizeall,onresizeall_start,onresizeall_end,onload,onunload,autoBindCustomButtons").split(",")
+	layout: ("name,instanceKey,stateManagement,effects,inset,zIndexes,errors,"
+	+	"zIndex,scrollToBookmarkOnLoad,showErrorMessages,maskPanesEarly,"
+	+	"outset,resizeWithWindow,resizeWithWindowDelay,resizeWithWindowMaxDelay,"
+	+	"onresizeall,onresizeall_start,onresizeall_end,onload,onload_start,onload_end,onunload,onunload_start,onunload_end").split(",")
 //	borderPanes: [ ALL options that are NOT specified as 'layout' ]
 	// default.panes options that apply to the center-pane (most options apply _only_ to border-panes)
 ,	center: ("paneClass,contentSelector,contentIgnoreSelector,findNestedContent,applyDemoStyles,triggerEventsOnLoad,"
 	+	"showOverflowOnHover,maskContents,maskObjects,liveContentResizing,"
-	+	"childOptions,initChildLayout,resizeChildLayout,destroyChildLayout,"
+	+	"containerSelector,children,initChildren,resizeChildren,destroyChildren,"
 	+	"onresize,onresize_start,onresize_end,onsizecontent,onsizecontent_start,onsizecontent_end").split(",")
 	// options that MUST be specifically set 'per-pane' - CANNOT set in the panes (defaults) key
 ,	noDefault: ("paneSelector,resizerCursor,customHotkey").split(",")
@@ -817,36 +851,41 @@ $.layout.optionsMap = {
  * In flat-format, subkeys are _currently_ separated with 2 underscores, like north__optName
  * Plugins may also call this method so they can transform their own data
  *
- * @param  {!Object}	hash	Data/options passed by user - may be a single level or nested levels
- * @return {Object}				Returns hash of minWidth & minHeight
+ * @param  {!Object}	hash			Data/options passed by user - may be a single level or nested levels
+ * @param  {boolean=}	[addKeys=false]	Should the primary layout.options keys be added if they do not exist?
+ * @return {Object}						Returns hash of minWidth & minHeight
  */
-$.layout.transformData = function (hash) {
-	var	json = { panes: {}, center: {} } // init return object
-	,	data, branch, optKey, keys, key, val, i, c;
+$.layout.transformData = function (hash, addKeys) {
+	var	json = addKeys ? { panes: {}, center: {} } : {} // init return object
+	,	branch, optKey, keys, key, val, i, c;
 
 	if (typeof hash !== "object") return json; // no options passed
 
 	// convert all 'flat-keys' to 'sub-key' format
 	for (optKey in hash) {
 		branch	= json;
-		data	= $.layout.optionsMap.layout;
 		val		= hash[ optKey ];
 		keys	= optKey.split("__"); // eg: west__size or north__fxSettings__duration
 		c		= keys.length - 1;
 		// convert underscore-delimited to subkeys
 		for (i=0; i <= c; i++) {
 			key = keys[i];
-			if (i === c)
-				branch[key] = val;
-			else if (!branch[key])
-				branch[key] = {}; // create the subkey
-			// recurse to sub-key for next loop - if not done
-			branch = branch[key];
+			if (i === c) {	// last key = value
+				if ($.isPlainObject( val ))
+					branch[key] = $.layout.transformData( val ); // RECURSE
+				else
+					branch[key] = val;
+			}
+			else {
+				if (!branch[key])
+					branch[key] = {}; // create the subkey
+				// recurse to sub-key for next loop - if not done
+				branch = branch[key];
+			}
 		}
 	}
-
 	return json;
-}
+};
 
 // INTERNAL CONFIG DATA - DO NOT CHANGE THIS!
 $.layout.backwardCompatibility = {
@@ -854,11 +893,18 @@ $.layout.backwardCompatibility = {
 	map: {
 	//	OLD Option Name:			NEW Option Name
 		applyDefaultStyles:			"applyDemoStyles"
-	,	resizeNestedLayout:			"resizeChildLayout"
+	//	CHILD/NESTED LAYOUTS
+	,	childOptions:				"children"
+	,	initChildLayout:			"initChildren"
+	,	destroyChildLayout:			"destroyChildren"
+	,	resizeChildLayout:			"resizeChildren"
+	,	resizeNestedLayout:			"resizeChildren"
+	//	MISC Options
 	,	resizeWhileDragging:		"livePaneResizing"
 	,	resizeContentWhileDragging:	"liveContentResizing"
 	,	triggerEventsWhileDragging:	"triggerEventsDuringLiveResize"
 	,	maskIframesOnResize:		"maskContents"
+	//	STATE MANAGEMENT
 	,	useStateCookie:				"stateManagement.enabled"
 	,	"cookie.autoLoad":			"stateManagement.autoLoad"
 	,	"cookie.autoSave":			"stateManagement.autoSave"
@@ -868,19 +914,26 @@ $.layout.backwardCompatibility = {
 	,	"cookie.path":				"stateManagement.cookie.path"
 	,	"cookie.expires":			"stateManagement.cookie.expires"
 	,	"cookie.secure":			"stateManagement.cookie.secure"
+	//	OLD Language options
+	,	noRoomToOpenTip:			"tips.noRoomToOpen"
+	,	togglerTip_open:			"tips.Close"	// open   = Close
+	,	togglerTip_closed:			"tips.Open"		// closed = Open
+	,	resizerTip:					"tips.Resize"
+	,	sliderTip:					"tips.Slide"
 	}
-	/**
-	* @param {Object}	opts
-	*/
+
+/**
+* @param {Object}	opts
+*/
 ,	renameOptions: function (opts) {
 		var map = $.layout.backwardCompatibility.map
 		,	oldData, newData, value
 		;
 		for (var itemPath in map) {
 			oldData	= getBranch( itemPath );
-			value	= oldData.branch[ oldData.key ]
+			value	= oldData.branch[ oldData.key ];
 			if (value !== undefined) {
-				newData = getBranch( map[itemPath], true )
+				newData = getBranch( map[itemPath], true );
 				newData.branch[ newData.key ] = value;
 				delete oldData.branch[ oldData.key ];
 			}
@@ -910,9 +963,10 @@ $.layout.backwardCompatibility = {
 			return D;
 		};
 	}
-	/**
-	* @param {Object}	opts
-	*/
+
+/**
+* @param {Object}	opts
+*/
 ,	renameAllOptions: function (opts) {
 		var ren = $.layout.backwardCompatibility.renameOptions;
 		// rename root (layout) options
@@ -936,6 +990,7 @@ $.layout.backwardCompatibility = {
 
 
 
+
 /*	============================================================
  *	BEGIN WIDGET: $( selector ).layout( {options} );
  *	============================================================
@@ -945,14 +1000,13 @@ $.fn.layout = function (opts) {
 
 	// local aliases to global data
 	browser	= $.layout.browser
-,	lang	= $.layout.language // internal alias
 ,	_c		= $.layout.config
 
 	// local aliases to utlity methods
 ,	cssW	= $.layout.cssWidth
 ,	cssH	= $.layout.cssHeight
 ,	elDims	= $.layout.getElementDimensions
-,	elCSS	= $.layout.getElementCSS
+,	styles	= $.layout.getElementStyles
 ,	evtObj	= $.layout.getEventObject
 ,	evtPane	= $.layout.parsePaneName
 
@@ -967,14 +1021,23 @@ $.fn.layout = function (opts) {
  */
 ,	state = {
 		// generate unique ID to use for event.namespace so can unbind only events added by 'this layout'
-		id:			"layout"+ $.now()	// code uses alias: sID
-	,	initialized: false
-	,	container:	{} // init all keys
-	,	north:		{}
-	,	south:		{}
-	,	east:		{}
-	,	west:		{}
-	,	center:		{}
+		id:				"layout"+ $.now()	// code uses alias: sID
+	,	initialized:	false
+	,	paneResizing:	false
+	,	panesSliding:	{}
+	,	container:	{ 	// list all keys referenced in code to avoid compiler error msgs
+			innerWidth:		0
+		,	innerHeight:	0
+		,	outerWidth:		0
+		,	outerHeight:	0
+		,	layoutWidth:	0
+		,	layoutHeight:	0
+		}
+	,	north:		{ childIdx: 0 }
+	,	south:		{ childIdx: 0 }
+	,	east:		{ childIdx: 0 }
+	,	west:		{ childIdx: 0 }
+	,	center:		{ childIdx: 0 }
 	}
 
 /**
@@ -1004,32 +1067,48 @@ $.fn.layout = function (opts) {
 	,	clear:	function (s) { var t=timer.data; if (t[s]) {clearTimeout(t[s]); delete t[s];} }
 	}
 
-,	_log = function (msg, popup) {
-		$.layout.msg( options.name +' / '+ msg, (popup && options.showErrorMessages) );
+	/**
+	* Alert or console.log a message - IF option is enabled.
+	*
+	* @param {(string|!Object)}	msg				Message (or debug-data) to display
+	* @param {boolean=}			[popup=false]	True by default, means 'alert', false means use console.log
+	* @param {boolean=}			[debug=false]	True means is a widget debugging message
+	*/
+,	_log = function (msg, popup, debug) {
+		var o = options;
+		if ((o.showErrorMessages && !debug) || (debug && o.showDebugMessages))
+			$.layout.msg( o.name +' / '+ msg, (popup !== false) );
+		return false;
 	}
 
 	/**
 	* Executes a Callback function after a trigger event, like resize, open or close
 	*
-	* @param {string}	evtName			Name of the layout callback, eg "onresize_start"
-	* @param {?string}	pane			This is passed only so we can pass the 'pane object' to the callback
-	* @param {?boolean}	skipBoundEvents	Accepts a function name, OR a comma-delimited array: [0]=function name, [1]=argument
+	* @param {string}				evtName					Name of the layout callback, eg "onresize_start"
+	* @param {(string|boolean)=}	[pane=""]				This is passed only so we can pass the 'pane object' to the callback
+	* @param {(string|boolean)=}	[skipBoundEvents=false]	True = do not run events bound to the elements - only the callbacks set in options
 	*/
 ,	_runCallbacks = function (evtName, pane, skipBoundEvents) {
-		var	o		= pane ? options[pane] : options
+		var	hasPane	= pane && isStr(pane)
+		,	s		= hasPane ? state[pane] : state
+		,	o		= hasPane ? options[pane] : options
+		,	lName	= options.name
 			// names like onopen and onopen_end separate are interchangeable in options...
-		,	lng	= evtName + (evtName.match(/_/) ? "" : "_end")
+		,	lng		= evtName + (evtName.match(/_/) ? "" : "_end")
 		,	shrt	= lng.match(/_end$/) ? lng.substr(0, lng.length - 4) : ""
-		,	fn		= o[lng]
+		,	fn		= o[lng] || o[shrt]
 		,	retVal	= "NC" // NC = No Callback
 		,	args	= []
+		,	$P
 		;
-		if (!fn && shrt)
-			fn = o[shrt];
+		if ( !hasPane && $.type(pane) === 'boolean' ) {
+			skipBoundEvents = pane; // allow pane param to be skipped for Layout callback
+			pane = "";
+		}
 
 		// first trigger the callback set in the options
 		if (fn) {
-			//try {
+			try {
 				// convert function name (string) to function object
 				if (isStr( fn )) {
 					if (fn.match(/,/)) {
@@ -1044,33 +1123,46 @@ $.fn.layout = function (opts) {
 				// execute the callback, if exists
 				if ($.isFunction( fn )) {
 					if (args.length)
-						retVal = fn(args[1]); // pass the argument parsed from 'list'
-					else if (pane && $Ps[pane])
+						retVal = g(fn)(args[1]); // pass the argument parsed from 'list'
+					else if ( hasPane )
 						// pass data: pane-name, pane-element, pane-state, pane-options, and layout-name
-						retVal = fn( pane, $Ps[pane], state[pane], options[pane], options.name );
+						retVal = g(fn)( pane, $Ps[pane], s, o, lName );
 					else // must be a layout/container callback - pass suitable info
-						retVal = fn( Instance, state, options, options.name );
+						retVal = g(fn)( Instance, s, o, lName );
 				}
-			//}
-			//catch (ex) {}
+			}
+			catch (ex) {
+				_log( options.errors.callbackError.replace(/EVENT/, $.trim((pane || "") +" "+ lng)), false );
+				if ($.type(ex) === 'string' && string.length)
+					_log('Exception:  '+ ex, false );
+			}
 		}
 
 		// trigger additional events bound directly to the pane
 		if (!skipBoundEvents && retVal !== false) {
-			if (pane) { // PANE events can be bound to each pane-elements
-				$Ps[pane].triggerHandler('layoutpane'+ lng, [ pane, $Ps[pane], state[pane], options[pane], options.name ]);
+			if ( hasPane ) { // PANE events can be bound to each pane-elements
+				$P	= $Ps[pane];
+				o	= options[pane];
+				s	= state[pane];
+				$P.triggerHandler('layoutpane'+ lng, [ pane, $P, s, o, lName ]);
+				if (shrt)
+					$P.triggerHandler('layoutpane'+ shrt, [ pane, $P, s, o, lName ]);
+			}
+			else { // LAYOUT events can be bound to the container-element
+				$N.triggerHandler('layout'+ lng, [ Instance, s, o, lName ]);
 				if (shrt)
-					$Ps[pane].triggerHandler('layoutpane'+ shrt, [ pane, $Ps[pane], state[pane], options[pane], options.name ]);
+					$N.triggerHandler('layout'+ shrt, [ Instance, s, o, lName ]);
 			}
-			else // LAYOUT events can be bound to the container-element
-				$N.triggerHandler('layout'+ lng, [ pane, $Ps[pane], state[pane], options[pane], options.name ]);
 		}
 
-		// ALWAYS resizeChildLayout after a resize event - even during initialization
-		if (evtName === "onresize_end" || evtName === "onsizecontent_end")
-			resizeChildLayout(pane); 
+		// ALWAYS resizeChildren after an onresize_end event - even during initialization
+		// IGNORE onsizecontent_end event because causes child-layouts to resize TWICE
+		if (hasPane && evtName === "onresize_end") // BAD: || evtName === "onsizecontent_end"
+			resizeChildren(pane+"", true); // compiler hack -force string
 
 		return retVal;
+
+		function g (f) { return f; }; // compiler hack
 	}
 
 
@@ -1163,18 +1255,6 @@ $.fn.layout = function (opts) {
 			$E.hide().data('autoHidden', true);
 	}
 
-	/**
-	* @param {(string|!Object)}		el
-	* @param {number=}				outerSize
-	* @param {boolean=}				[autoHide=false]
-	*/
-,	setOuterSize = function (el, outerSize, autoHide) {
-		if (_c[pane].dir=="horz") // pane = north or south
-			setOuterHeight(el, outerSize, autoHide);
-		else // pane = east or west
-			setOuterWidth(el, outerSize, autoHide);
-	}
-
 
 	/**
 	* Converts any 'size' params to a pixel/integer size, if not already
@@ -1232,7 +1312,7 @@ $.fn.layout = function (opts) {
 	*
 	* @param  {(string|!Object)}	pane
 	* @param  {boolean=}			[inclSpace=false]
-	* @return {number}				Returns EITHER Width for east/west panes OR Height for north/south panes - adjusted for boxModel & browser
+	* @return {number}				Returns EITHER Width for east/west panes OR Height for north/south panes
 	*/
 ,	getPaneSize = function (pane, inclSpace) {
 		var 
@@ -1265,7 +1345,6 @@ $.fn.layout = function (opts) {
 		,	s				= state[pane]
 		,	c				= _c[pane]
 		,	dir				= c.dir
-		,	side			= c.side.toLowerCase()
 		,	type			= c.sizeType.toLowerCase()
 		,	isSliding		= (slide != undefined ? slide : s.isSliding) // only open() passes 'slide' param
 		,	$P				= $Ps[pane]
@@ -1285,8 +1364,8 @@ $.fn.layout = function (opts) {
 		,	minSize			= s.minSize = max( _parseSize(pane, o.minSize), cssMinDims(pane).minSize )
 		,	maxSize			= s.maxSize = min( (o.maxSize ? _parseSize(pane, o.maxSize) : 100000), limitSize )
 		,	r				= s.resizerPosition = {} // used to set resizing limits
-		,	top				= sC.insetTop
-		,	left			= sC.insetLeft
+		,	top				= sC.inset.top
+		,	left			= sC.inset.left
 		,	W				= sC.innerWidth
 		,	H				= sC.innerHeight
 		,	rW				= o.spacing_open // subtract resizer-width to get top/left position for south/east
@@ -1327,10 +1406,10 @@ $.fn.layout = function (opts) {
 		d.width		= sC.innerWidth - d.left - d.right;  // outerWidth
 		d.height	= sC.innerHeight - d.bottom - d.top; // outerHeight
 		// add the 'container border/padding' to get final positions relative to the container
-		d.top		+= sC.insetTop;
-		d.bottom	+= sC.insetBottom;
-		d.left		+= sC.insetLeft;
-		d.right		+= sC.insetRight;
+		d.top		+= sC.inset.top;
+		d.bottom	+= sC.inset.bottom;
+		d.left		+= sC.inset.left;
+		d.right		+= sC.inset.right;
 
 		return d;
 	}
@@ -1376,14 +1455,22 @@ $.fn.layout = function (opts) {
 	}
 
 ,	onResizerEnter	= function (evt) { // ALSO called by toggler.mouseenter
+		var pane	= $(this).data("layoutEdge")
+		,	s		= state[pane]
+		;
+		// ignore closed-panes and mouse moving back & forth over resizer!
+		// also ignore if ANY pane is currently resizing
+		if ( s.isClosed || s.isResizing || state.paneResizing ) return;
+
 		if ($.fn.disableSelection)
 			$("body").disableSelection();
+		if (options.maskPanesEarly)
+			showMasks( pane, { resizing: true });
 	}
 ,	onResizerLeave	= function (evt, el) {
-		var
-			e = el || this // el is only passed when called by the timer
-		,	pane = $(e).data("layoutEdge")
-		,	name = pane +"ResizerLeave"
+		var	e		= el || this // el is only passed when called by the timer
+		,	pane	= $(e).data("layoutEdge")
+		,	name	= pane +"ResizerLeave"
 		;
 		timer.clear(pane+"_openSlider"); // cancel slideOpen timer, if set
 		timer.clear(name); // cancel enableSelection timer - may re/set below
@@ -1393,8 +1480,12 @@ $.fn.layout = function (opts) {
 		if (!el) // 1st call - mouseleave event
 			timer.set(name, function(){ onResizerLeave(evt, e); }, 200);
 		// if user is resizing, then dragStop will enableSelection(), so can skip it here
-		else if (!state[pane].isResizing && $.fn.enableSelection) // 2nd call - by timer
-			$("body").enableSelection();
+		else if ( !state.paneResizing ) { // 2nd call - by timer
+			if ($.fn.enableSelection)
+				$("body").enableSelection();
+			if (options.maskPanesEarly)
+				hideMasks();
+		}
 	}
 
 /*
@@ -1412,10 +1503,11 @@ $.fn.layout = function (opts) {
 ,	_create = function () {
 		// initialize config/options
 		initOptions();
-		var o = options;
+		var o = options
+		,	s = state;
 
 		// TEMP state so isInitialized returns true during init process
-		state.creatingLayout = true;
+		s.creatingLayout = true;
 
 		// init plugins for this layout, if there are any (eg: stateManagement)
 		runPluginCallbacks( Instance, $.layout.onCreate );
@@ -1441,7 +1533,7 @@ $.fn.layout = function (opts) {
 		// initLayoutElements will set initialized=true and run the onload callback IF successful
 		if (o.initPanes) _initLayoutElements();
 
-		delete state.creatingLayout;
+		delete s.creatingLayout;
 
 		return state.initialized;
 	}
@@ -1461,12 +1553,12 @@ $.fn.layout = function (opts) {
 	* Initialize the layout - called automatically whenever an instance of layout is created
 	*
 	* @see  _create() & isInitialized
+	* @param {boolean=}		[retry=false]	// indicates this is a 2nd try
 	* @return  An object pointer to the instance created
 	*/
 ,	_initLayoutElements = function (retry) {
 		// initialize config/options
 		var o = options;
-
 		// CANNOT init panes inside a hidden container!
 		if (!$N.is(":visible")) {
 			// handle Chrome bug where popup window 'has no height'
@@ -1479,16 +1571,14 @@ $.fn.layout = function (opts) {
 
 		// a center pane is required, so make sure it exists
 		if (!getPane("center").length) {
-			if (options.showErrorMessages)
-				_log( lang.errCenterPaneMissing, true );
-			return false;
+			return _log( o.errors.centerPaneMissing );
 		}
 
 		// TEMP state so isInitialized returns true during init process
 		state.creatingLayout = true;
 
 		// update Container dims
-		$.extend(sC, elDims( $N ));
+		$.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values
 
 		// initialize all layout elements
 		initPanes();	// size & position panes - calls initHandles() - which calls initResizable()
@@ -1518,62 +1608,148 @@ $.fn.layout = function (opts) {
 	}
 
 	/**
-	* Initialize nested layouts - called when _initLayoutElements completes
-	*
-	* NOT CURRENTLY USED
+	* Initialize nested layouts for a specific pane - can optionally pass layout-options
 	*
-	* @see _initLayoutElements
-	* @return  An object pointer to the instance created
+	* @param {(string|Object)}	evt_or_pane	The pane being opened, ie: north, south, east, or west
+	* @param {Object=}			[opts]		Layout-options - if passed, will OVERRRIDE options[pane].children
+	* @return  An object pointer to the layout instance created - or null
 	*/
-,	_initChildLayouts = function () {
-		$.each(_c.allPanes, function (idx, pane) {
-			if (options[pane].initChildLayout)
-				createChildLayout( pane );
+,	createChildren = function (evt_or_pane, opts) {
+		var	pane = evtPane.call(this, evt_or_pane)
+		,	$P	= $Ps[pane]
+		;
+		if (!$P) return;
+		var	$C	= $Cs[pane]
+		,	s	= state[pane]
+		,	o	= options[pane]
+		,	sm	= options.stateManagement || {}
+		,	cos = opts ? (o.children = opts) : o.children
+		;
+		if ( $.isPlainObject( cos ) )
+			cos = [ cos ]; // convert a hash to a 1-elem array
+		else if (!cos || !$.isArray( cos ))
+			return;
+
+		$.each( cos, function (idx, co) {
+			if ( !$.isPlainObject( co ) ) return;
+
+			// determine which element is supposed to be the 'child container'
+			// if pane has a 'containerSelector' OR a 'content-div', use those instead of the pane
+			var $containers = co.containerSelector ? $P.find( co.containerSelector ) : ($C || $P);
+
+			$containers.each(function(){
+				var $cont	= $(this)
+				,	child	= $cont.data("layout") //	see if a child-layout ALREADY exists on this element
+				;
+				// if no layout exists, but children are set, try to create the layout now
+				if (!child) {
+					// TODO: see about moving this to the stateManagement plugin, as a method
+					// set a unique child-instance key for this layout, if not already set
+					setInstanceKey({ container: $cont, options: co }, s );
+					// If THIS layout has a hash in stateManagement.autoLoad,
+					// then see if it also contains state-data for this child-layout
+					// If so, copy the stateData to child.options.stateManagement.autoLoad
+					if ( sm.includeChildren && state.stateData[pane] ) {
+						//	THIS layout's state was cached when its state was loaded
+						var	paneChildren = state.stateData[pane].children || {}
+						,	childState	= paneChildren[ co.instanceKey ]
+						,	co_sm		= co.stateManagement || (co.stateManagement = { autoLoad: true })
+						;
+						// COPY the stateData into the autoLoad key
+						if ( co_sm.autoLoad === true && childState ) {
+							co_sm.autoSave			= false; // disable autoSave because saving handled by parent-layout
+							co_sm.includeChildren	= true;  // cascade option - FOR NOW
+							co_sm.autoLoad = $.extend(true, {}, childState); // COPY the state-hash
+						}
+					}
+
+					// create the layout
+					child = $cont.layout( co );
+
+					// if successful, update data
+					if (child) {
+						// add the child and update all layout-pointers
+						// MAY have already been done by child-layout calling parent.refreshChildren()
+						refreshChildren( pane, child );
+					}
+				}
+			});
 		});
 	}
 
+,	setInstanceKey = function (child, parentPaneState) {
+		// create a named key for use in state and instance branches
+		var	$c	= child.container
+		,	o	= child.options
+		,	sm	= o.stateManagement
+		,	key	= o.instanceKey || $c.data("layoutInstanceKey")
+		;
+		if (!key) key = (sm && sm.cookie ? sm.cookie.name : '') || o.name; // look for a name/key
+		if (!key) key = "layout"+ (++parentPaneState.childIdx);	// if no name/key found, generate one
+		else key = key.replace(/[^\w-]/gi, '_').replace(/_{2,}/g, '_');	 // ensure is valid as a hash key
+		o.instanceKey = key;
+		$c.data("layoutInstanceKey", key); // useful if layout is destroyed and then recreated
+		return key;
+	}
+
 	/**
-	* Initialize nested layouts for a specific pane - can optionally pass layout-options
-	*
-	* @see _initChildLayouts
-	* @param {string}	pane		The pane being opened, ie: north, south, east, or west
-	* @param {Object=}	[opts]		Layout-options - if passed, will OVERRRIDE options[pane].childOptions
-	* @return  An object pointer to the layout instance created - or null
+	* @param {string}		pane		The pane being opened, ie: north, south, east, or west
+	* @param {Object=}		newChild	New child-layout Instance to add to this pane
 	*/
-,	createChildLayout = function (evt_or_pane, opts) {
-		var	pane = evtPane.call(this, evt_or_pane)
-		,	$P	= $Ps[pane]
-		,	C	= children
+,	refreshChildren = function (pane, newChild) {
+		var	$P	= $Ps[pane]
+		,	pC	= children[pane]
+		,	s	= state[pane]
+		,	o
 		;
-		if ($P) {
-			var	$C	= $Cs[pane]
-			,	o	= opts || options[pane].childOptions
-			,	d	= "layout"
-			//	determine which element is supposed to be the 'child container'
-			//	if pane has a 'containerSelector' OR a 'content-div', use those instead of the pane
-			,	$Cont = o.containerSelector ? $P.find( o.containerSelector ) : ($C || $P)
-			,	containerFound = $Cont.length
-			//	see if a child-layout ALREADY exists on this element
-			,	child = containerFound ? (C[pane] = $Cont.data(d) || null) : null
-			;
-			// if no layout exists, but childOptions are set, try to create the layout now
-			if (!child && containerFound && o)
-				child = C[pane] = $Cont.eq(0).layout(o) || null;
-			if (child)
-				child.hasParentLayout = true;	// set parent-flag in child
+		// check for destroy()ed layouts and update the child pointers & arrays
+		if ($.isPlainObject( pC )) {
+			$.each( pC, function (key, child) {
+				if (child.destroyed) delete pC[key]
+			});
+			// if no more children, remove the children hash
+			if ($.isEmptyObject( pC ))
+				pC = children[pane] = null; // clear children hash
+		}
+
+		// see if there is a directly-nested layout inside this pane
+		// if there is, then there can be only ONE child-layout, so check that...
+		if (!newChild && !pC) {
+			newChild = $P.data("layout");
+		}
+
+		// if a newChild instance was passed, add it to children[pane]
+		if (newChild) {
+			// update child.state
+			newChild.hasParentLayout = true; // set parent-flag in child
+			// instanceKey is a key-name used in both state and children
+			o = newChild.options;
+			// set a unique child-instance key for this layout, if not already set
+			setInstanceKey( newChild, s );
+			// add pointer to pane.children hash
+			if (!pC) pC = children[pane] = {}; // create an empty children hash
+			pC[ o.instanceKey ] = newChild.container.data("layout"); // add childLayout instance
+		}
+
+		// ALWAYS refresh the pane.children alias, even if null
+		Instance[pane].children = children[pane];
+
+		// if newChild was NOT passed - see if there is a child layout NOW
+		if (!newChild) {
+			createChildren(pane); // MAY create a child and re-call this method
 		}
-		Instance[pane].child = C[pane]; // ALWAYS set pane-object pointer, even if null
 	}
 
 ,	windowResize = function () {
-		var delay = Number(options.resizeWithWindowDelay);
+		var	o = options
+		,	delay = Number(o.resizeWithWindowDelay);
 		if (delay < 10) delay = 100; // MUST have a delay!
 		// resizing uses a delay-loop because the resize event fires repeatly - except in FF, but delay anyway
 		timer.clear("winResize"); // if already running
 		timer.set("winResize", function(){
 			timer.clear("winResize");
 			timer.clear("winResizeRepeater");
-			var dims = elDims( $N );
+			var dims = elDims( $N, o.inset );
 			// only trigger resizeAll() if container has changed size
 			if (dims.innerWidth !== sC.innerWidth || dims.innerHeight !== sC.innerHeight)
 				resizeAll();
@@ -1606,14 +1782,14 @@ $.fn.layout = function (opts) {
 	*/
 ,	_initContainer = function () {
 		var
-			N		= $N[0]
+			N		= $N[0]	
+		,	$H		= $("html")
 		,	tag		= sC.tagName = N.tagName
 		,	id		= sC.id = N.id
 		,	cls		= sC.className = N.className
 		,	o		= options
 		,	name	= o.name
-		,	fullPage= (tag === "BODY")
-		,	props	= "overflow,position,margin,padding,border"
+		,	props	= "position,margin,padding,border"
 		,	css		= "layoutCSS"
 		,	CSS		= {}
 		,	hid		= "hidden" // used A LOT!
@@ -1621,10 +1797,21 @@ $.fn.layout = function (opts) {
 		,	parent	= $N.data("parentLayout")	// parent-layout Instance
 		,	pane	= $N.data("layoutEdge")		// pane-name in parent-layout
 		,	isChild	= parent && pane
+		,	num		= $.layout.cssNum
+		,	$parent, n
 		;
-		// sC -> state.container
+		// sC = state.container
 		sC.selector = $N.selector.split(".slice")[0];
 		sC.ref		= (o.name ? o.name +' layout / ' : '') + tag + (id ? "#"+id : cls ? '.['+cls+']' : ''); // used in messages
+		sC.isBody	= (tag === "BODY");
+
+		// try to find a parent-layout
+		if (!isChild && !sC.isBody) {
+			$parent = $N.closest("."+ $.layout.defaults.panes.paneClass);
+			parent	= $parent.data("parentLayout");
+			pane	= $parent.data("layoutEdge");
+			isChild	= parent && pane;
+		}
 
 		$N	.data({
 				layout: Instance
@@ -1633,12 +1820,11 @@ $.fn.layout = function (opts) {
 			.addClass(o.containerClass)
 		;
 		var layoutMethods = {
-				destroy:	''
-			,	initPanes:	''
-			,	resizeAll:	'resizeAll'
-			,	resize:		'resizeAll'
-			}
-		,	name;
+			destroy:	''
+		,	initPanes:	''
+		,	resizeAll:	'resizeAll'
+		,	resize:		'resizeAll'
+		};
 		// loop hash and bind all methods - include layoutID namespacing
 		for (name in layoutMethods) {
 			$N.bind("layout"+ name.toLowerCase() +"."+ sID, Instance[ layoutMethods[name] || name ]);
@@ -1649,82 +1835,126 @@ $.fn.layout = function (opts) {
 			// update parent flag
 			Instance.hasParentLayout = true;
 			// set pointers to THIS child-layout (Instance) in parent-layout
-			// NOTE: parent.PANE.child is an ALIAS to parent.children.PANE
-			parent[pane].child = parent.children[pane] = $N.data("layout");
+			parent.refreshChildren( pane, Instance );
 		}
 
 		// SAVE original container CSS for use in destroy()
 		if (!$N.data(css)) {
 			// handle props like overflow different for BODY & HTML - has 'system default' values
-			if (fullPage) {
-				CSS = $.extend( elCSS($N, props), {
+			if (sC.isBody) {
+				// SAVE <BODY> CSS
+				$N.data(css, $.extend( styles($N, props), {
 					height:		$N.css("height")
 				,	overflow:	$N.css("overflow")
 				,	overflowX:	$N.css("overflowX")
 				,	overflowY:	$N.css("overflowY")
-				});
+				}));
 				// ALSO SAVE <HTML> CSS
-				var $H = $("html");
-				$H.data(css, {
+				$H.data(css, $.extend( styles($H, 'padding'), {
 					height:		"auto" // FF would return a fixed px-size!
 				,	overflow:	$H.css("overflow")
 				,	overflowX:	$H.css("overflowX")
 				,	overflowY:	$H.css("overflowY")
-				});
+				}));
 			}
 			else // handle props normally for non-body elements
-				CSS = elCSS($N, props+",top,bottom,left,right,width,height,overflow,overflowX,overflowY");
-
-			$N.data(css, CSS);
+				$N.data(css, styles($N, props+",top,bottom,left,right,width,height,overflow,overflowX,overflowY") );
 		}
 
-		try { // format html/body if this is a full page layout
-			if (fullPage) {
-				$("html").css({
+		try {
+			// common container CSS
+			CSS = {
+				overflow:	hid
+			,	overflowX:	hid
+			,	overflowY:	hid
+			};
+			$N.css( CSS );
+
+			if (o.inset && !$.isPlainObject(o.inset)) {
+				// can specify a single number for equal outset all-around
+				n = parseInt(o.inset, 10) || 0
+				o.inset = {
+					top:	n
+				,	bottom:	n
+				,	left:	n
+				,	right:	n
+				};
+			}
+
+			// format html & body if this is a full page layout
+			if (sC.isBody) {
+				// if HTML has padding, use this as an outer-spacing around BODY
+				if (!o.outset) {
+					// use padding from parent-elem (HTML) as outset
+					o.outset = {
+						top:	num($H, "paddingTop")
+					,	bottom:	num($H, "paddingBottom")
+					,	left:	num($H, "paddingLeft")
+					,	right:	num($H, "paddingRight")
+					};
+				}
+				else if (!$.isPlainObject(o.outset)) {
+					// can specify a single number for equal outset all-around
+					n = parseInt(o.outset, 10) || 0
+					o.outset = {
+						top:	n
+					,	bottom:	n
+					,	left:	n
+					,	right:	n
+					};
+				}
+				// HTML
+				$H.css( CSS ).css({
 					height:		"100%"
-				,	overflow:	hid
-				,	overflowX:	hid
-				,	overflowY:	hid
-				});
-				$("body").css({
-					position:	"relative"
-				,	height:		"100%"
-				,	overflow:	hid
-				,	overflowX:	hid
-				,	overflowY:	hid
+				,	border:		"none"	// no border or padding allowed when using height = 100%
+				,	padding:	0		// ditto
 				,	margin:		0
-				,	padding:	0		// TODO: test whether body-padding could be handled?
-				,	border:		"none"	// a body-border creates problems because it cannot be measured!
 				});
-
+				// BODY
+				if (browser.isIE6) {
+					// IE6 CANNOT use the trick of setting absolute positioning on all 4 sides - must have 'height'
+					$N.css({
+						width:		"100%"
+					,	height:		"100%"
+					,	border:		"none"	// no border or padding allowed when using height = 100%
+					,	padding:	0		// ditto
+					,	margin:		0
+					,	position:	"relative"
+					});
+					// convert body padding to an inset option - the border cannot be measured in IE6!
+					if (!o.inset) o.inset = elDims( $N ).inset;
+				}
+				else { // use absolute positioning for BODY to allow borders & padding without overflow
+					$N.css({
+						width:		"auto"
+					,	height:		"auto"
+					,	margin:		0
+					,	position:	"absolute"	// allows for border and padding on BODY
+					});
+					// apply edge-positioning created above
+					$N.css( o.outset );
+				}
 				// set current layout-container dimensions
-				$.extend(sC, elDims( $N ));
+				$.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values
 			}
-			else { // set required CSS for overflow and position
-				// ENSURE container will not 'scroll'
-				CSS = { overflow: hid, overflowX: hid, overflowY: hid }
-				var
-					p = $N.css("position")
-				,	h = $N.css("height")
-				;
-				// if this is a NESTED layout, then container/outer-pane ALREADY has position and height
-				if (!isChild) {
-					if (!p || !p.match(/fixed|absolute|relative/))
-						CSS.position = "relative"; // container MUST have a 'position'
-					/*
-					if (!h || h=="auto")
-						CSS.height = "100%"; // container MUST have a 'height'
-					*/
-				}
-				$N.css( CSS );
+			else {
+				// container MUST have 'position'
+				var	p = $N.css("position");
+				if (!p || !p.match(/(fixed|absolute|relative)/))
+					$N.css("position","relative");
 
 				// set current layout-container dimensions
 				if ( $N.is(":visible") ) {
-					$.extend(sC, elDims( $N ));
-					if (o.showErrorMessages && sC.innerHeight < 1)
-						_log( lang.errContainerHeight.replace(/CONTAINER/, sC.ref), true );
+					$.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT change insetX (padding) values
+					if (sC.innerHeight < 1) // container has no 'height' - warn developer
+						_log( o.errors.noContainerHeight.replace(/CONTAINER/, sC.ref) );
 				}
 			}
+
+			// if container has min-width/height, then enable scrollbar(s)
+			if ( num($N, "minWidth")  ) $N.parent().css("overflowX","auto");
+			if ( num($N, "minHeight") ) $N.parent().css("overflowY","auto");
+
 		} catch (ex) {}
 	}
 
@@ -1755,12 +1985,12 @@ $.fn.layout = function (opts) {
 		var data, d, pane, key, val, i, c, o;
 
 		// reprocess user's layout-options to have correct options sub-key structure
-		opts = $.layout.transformData( opts ); // panes = default subkey
+		opts = $.layout.transformData( opts, true ); // panes = default subkey
 
 		// auto-rename old options for backward compatibility
 		opts = $.layout.backwardCompatibility.renameAllOptions( opts );
 
-		// if user-options has 'panes' key (pane-defaults), process it...
+		// if user-options has 'panes' key (pane-defaults), clean it...
 		if (!$.isEmptyObject(opts.panes)) {
 			// REMOVE any pane-defaults that MUST be set per-pane
 			data = $.layout.optionsMap.noDefault;
@@ -1776,7 +2006,7 @@ $.fn.layout = function (opts) {
 			}
 		}
 
-		// MOVE any NON-layout-options to opts.panes
+		// MOVE any NON-layout-options from opts-root to opts.panes
 		data = $.layout.optionsMap.layout;
 		var rootKeys = $.layout.config.optionRootKeys;
 		for (key in opts) {
@@ -1795,7 +2025,7 @@ $.fn.layout = function (opts) {
 		$.each(_c.allPanes, function (i, pane) {
 
 			// apply 'pane-defaults' to CONFIG.[PANE]
-			_c[pane] = $.extend( true, {}, _c.panes, _c[pane] );
+			_c[pane] = $.extend(true, {}, _c.panes, _c[pane]);
 
 			d = options.panes;
 			o = options[pane];
@@ -1813,7 +2043,7 @@ $.fn.layout = function (opts) {
 			}
 			else {
 				// border-panes use ALL keys in defaults.panes branch
-				o = options[pane] = $.extend({}, d, o); // re-apply pane-specific opts AFTER pane-defaults
+				o = options[pane] = $.extend(true, {}, d, o); // re-apply pane-specific opts AFTER pane-defaults
 				createFxOptions( pane );
 				// ensure all border-pane-specific base-classes exist
 				if (!o.resizerClass)	o.resizerClass	= "ui-layout-resizer";
@@ -1832,6 +2062,10 @@ $.fn.layout = function (opts) {
 			z.resizer_normal	= max(zo+2, z.resizer_normal);	// MIN = +2
 		}
 
+		// DELETE 'panes' key now that we are done - values were copied to EACH pane
+		delete options.panes;
+
+
 		function createFxOptions ( pane ) {
 			var	o = options[pane]
 			,	d = options.panes;
@@ -1851,9 +2085,10 @@ $.fn.layout = function (opts) {
 					||	o.fxName	// options.west.fxName
 					||	d.fxName	// options.panes.fxName
 					||	"none"		// MEANS $.layout.defaults.panes.fxName == "" || false || null || 0
+				,	fxExists	= $.effects && ($.effects[fxName] || ($.effects.effect && $.effects.effect[fxName]))
 				;
 				// validate fxName to ensure is valid effect - MUST have effect-config data in options.effects
-				if (fxName === "none" || !$.effects || !$.effects[fxName] || !options.effects[fxName])
+				if (fxName === "none" || !options.effects[fxName] || !fxExists)
 					fxName = o[sName] = "none"; // effect not loaded OR unrecognized fxName
 
 				// set vars for effects subkeys to simplify logic
@@ -1871,7 +2106,8 @@ $.fn.layout = function (opts) {
 				;
 				// create fxSettings[_open|_close|_size]
 				o[sSettings] = $.extend(
-					{}
+					true
+				,	{}
 				,	fx_all					// effects.slide.all
 				,	fx_pane					// effects.slide.west
 				,	d.fxSettings			// options.panes.fxSettings
@@ -1887,9 +2123,6 @@ $.fn.layout = function (opts) {
 			delete o.fxSpeed;
 			delete o.fxSettings;
 		}
-
-		// DELETE 'panes' key now that we are done - values were copied to EACH pane
-		delete options.panes;
 	}
 
 	/**
@@ -1910,7 +2143,13 @@ $.fn.layout = function (opts) {
 		}
 	}
 
-,	initPanes = function () {
+	/**
+	* @param {Object=}		evt
+	*/
+,	initPanes = function (evt) {
+		// stopPropagation if called by trigger("layoutinitpanes") - use evtPane utility 
+		evtPane(evt);
+
 		// NOTE: do north & south FIRST so we can measure their height - do center LAST
 		$.each(_c.allPanes, function (idx, pane) {
 			addPane( pane, true );
@@ -1935,22 +2174,8 @@ $.fn.layout = function (opts) {
 		//	to load asynchrously, which is BAD, so try skipping delay for now
 
 		// process pane contents and callbacks, and init/resize child-layout if exists
-		$.each(_c.allPanes, function (i, pane) {
-			var o = options[pane];
-			if ($Ps[pane]) {
-				if (state[pane].isVisible) { // pane is OPEN
-					sizeContent(pane);
-					// trigger pane.onResize if triggerEventsOnLoad = true
-					if (o.triggerEventsOnLoad)
-						_runCallbacks("onresize_end", pane);
-				else // automatic if onresize called, otherwise call it specifically
-					// resize child - IF inner-layout already exists (created before this layout)
-					resizeChildLayout(pane);
-				}
-				// init childLayout - even if pane is not visible
-				if (o.initChildLayout && o.childOptions)
-					createChildLayout(pane);
-			}
+		$.each(_c.allPanes, function (idx, pane) {
+			afterInitPane(pane);
 		});
 	}
 
@@ -1967,13 +2192,13 @@ $.fn.layout = function (opts) {
 			o		= options[pane]
 		,	s		= state[pane]
 		,	c		= _c[pane]
-		,	fx		= s.fx
 		,	dir		= c.dir
+		,	fx		= s.fx
 		,	spacing	= o.spacing_open || 0
 		,	isCenter = (pane === "center")
 		,	CSS		= {}
 		,	$P		= $Ps[pane]
-		,	size, minSize, maxSize
+		,	size, minSize, maxSize, child
 		;
 		// if pane-pointer already exists, remove the old one first
 		if ($P)
@@ -1990,11 +2215,18 @@ $.fn.layout = function (opts) {
 		// SAVE original Pane CSS
 		if (!$P.data("layoutCSS")) {
 			var props = "position,top,left,bottom,right,width,height,overflow,zIndex,display,backgroundColor,padding,margin,border";
-			$P.data("layoutCSS", elCSS($P, props));
+			$P.data("layoutCSS", styles($P, props));
 		}
 
 		// create alias for pane data in Instance - initHandles will add more
-		Instance[pane] = { name: pane, pane: $Ps[pane], content: $Cs[pane], options: options[pane], state: state[pane], child: children[pane] };
+		Instance[pane] = {
+			name:		pane
+		,	pane:		$Ps[pane]
+		,	content:	$Cs[pane]
+		,	options:	options[pane]
+		,	state:		state[pane]
+		,	children:	children[pane]
+		};
 
 		// add classes, attributes & events
 		$P	.data({
@@ -2018,8 +2250,8 @@ $.fn.layout = function (opts) {
 			,	slideOpen:			''
 			,	slideClose:			''
 			,	slideToggle:		''
-			,	size:				'manualSizePane'
-			,	sizePane:			'manualSizePane'
+			,	size:				'sizePane'
+			,	sizePane:			'sizePane'
 			,	sizeContent:		''
 			,	sizeHandles:		''
 			,	enableClosable:		''
@@ -2033,8 +2265,8 @@ $.fn.layout = function (opts) {
 			,	move:				'swapPanes'
 			,	removePane:			'removePane'
 			,	remove:				'removePane'
-			,	createChildLayout:	''
-			,	resizeChildLayout:	''
+			,	createChildren:		''
+			,	resizeChildren:		''
 			,	resizeAll:			'resizeAll'
 			,	resizeLayout:		'resizeAll'
 			}
@@ -2054,6 +2286,7 @@ $.fn.layout = function (opts) {
 			minSize	= _parseSize(pane,o.minSize) || 1;
 			maxSize	= _parseSize(pane,o.maxSize) || 100000;
 			if (size > 0) size = max(min(size, maxSize), minSize);
+			s.autoResize = o.autoResize; // used with percentage sizes
 
 			// state for border-panes
 			s.isClosed  = false; // true = pane is closed
@@ -2070,23 +2303,10 @@ $.fn.layout = function (opts) {
 		s.noRoom	= false;	// true = pane 'automatically' hidden due to insufficient room - will unhide automatically
 		s.isVisible	= true;		// false = pane is invisible - closed OR hidden - simplify logic
 
-		// set css-position to account for container borders & padding
-		switch (pane) {
-			case "north": 	CSS.top 	= sC.insetTop;
-							CSS.left 	= sC.insetLeft;
-							CSS.right	= sC.insetRight;
-							break;
-			case "south": 	CSS.bottom	= sC.insetBottom;
-							CSS.left 	= sC.insetLeft;
-							CSS.right 	= sC.insetRight;
-							break;
-			case "west": 	CSS.left 	= sC.insetLeft; // top, bottom & height set by sizeMidPanes()
-							break;
-			case "east": 	CSS.right 	= sC.insetRight; // ditto
-							break;
-			case "center":	// top, left, width & height set by sizeMidPanes()
-		}
+		// init pane positioning
+		setPanePosition( pane );
 
+		// if pane is not visible, 
 		if (dir === "horz") // north or south pane
 			CSS.height = cssH($P, size);
 		else if (dir === "vert") // east or west pane
@@ -2096,6 +2316,12 @@ $.fn.layout = function (opts) {
 		$P.css(CSS); // apply size -- top, bottom & height will be set by sizeMidPanes
 		if (dir != "horz") sizeMidPanes(pane, true); // true = skipCallback
 
+		// if manually adding a pane AFTER layout initialization, then...
+		if (state.initialized) {
+			initHandles( pane );
+			initHotkeys( pane );
+		}
+
 		// close or hide the pane if specified in settings
 		if (o.initClosed && o.closable && !o.initHidden)
 			close(pane, true, true); // true, true = force, noAnimation
@@ -2115,21 +2341,84 @@ $.fn.layout = function (opts) {
 
 		// if manually adding a pane AFTER layout initialization, then...
 		if (state.initialized) {
-			initHandles( pane );
-			initHotkeys( pane );
-			resizeAll(); // will sizeContent if pane is visible
-			if (s.isVisible) { // pane is OPEN
-				if (o.triggerEventsOnLoad)
-					_runCallbacks("onresize_end", pane);
-				else // automatic if onresize called, otherwise call it specifically
-					// resize child - IF inner-layout already exists (created before this layout)
-					resizeChildLayout(pane); // a previously existing childLayout
-			}
-			if (o.initChildLayout && o.childOptions)
-				createChildLayout(pane);
+			afterInitPane( pane );
 		}
 	}
 
+,	afterInitPane = function (pane) {
+		var	$P	= $Ps[pane]
+		,	s	= state[pane]
+		,	o	= options[pane]
+		;
+		if (!$P) return;
+
+		// see if there is a directly-nested layout inside this pane
+		if ($P.data("layout"))
+			refreshChildren( pane, $P.data("layout") );
+
+		// process pane contents and callbacks, and init/resize child-layout if exists
+		if (s.isVisible) { // pane is OPEN
+			if (state.initialized) // this pane was added AFTER layout was created
+				resizeAll(); // will also sizeContent
+			else
+				sizeContent(pane);
+
+			if (o.triggerEventsOnLoad)
+				_runCallbacks("onresize_end", pane);
+			else // automatic if onresize called, otherwise call it specifically
+				// resize child - IF inner-layout already exists (created before this layout)
+				resizeChildren(pane, true); // a previously existing childLayout
+		}
+
+		// init childLayouts - even if pane is not visible
+		if (o.initChildren && o.children)
+			createChildren(pane);
+	}
+
+	/**
+	* @param {string=}	panes		The pane(s) to process
+	*/
+,	setPanePosition = function (panes) {
+		panes = panes ? panes.split(",") : _c.borderPanes;
+
+		// create toggler DIVs for each pane, and set object pointers for them, eg: $R.north = north toggler DIV
+		$.each(panes, function (i, pane) {
+			var $P	= $Ps[pane]
+			,	$R	= $Rs[pane]
+			,	o	= options[pane]
+			,	s	= state[pane]
+			,	side =  _c[pane].side
+			,	CSS	= {}
+			;
+			if (!$P) return; // pane does not exist - skip
+
+			// set css-position to account for container borders & padding
+			switch (pane) {
+				case "north": 	CSS.top 	= sC.inset.top;
+								CSS.left 	= sC.inset.left;
+								CSS.right	= sC.inset.right;
+								break;
+				case "south": 	CSS.bottom	= sC.inset.bottom;
+								CSS.left 	= sC.inset.left;
+								CSS.right 	= sC.inset.right;
+								break;
+				case "west": 	CSS.left 	= sC.inset.left; // top, bottom & height set by sizeMidPanes()
+								break;
+				case "east": 	CSS.right 	= sC.inset.right; // ditto
+								break;
+				case "center":	// top, left, width & height set by sizeMidPanes()
+			}
+			// apply position
+			$P.css(CSS); 
+
+			// update resizer position
+			if ($R && s.isClosed)
+				$R.css(side, sC.inset[side]);
+			else if ($R && !s.isHidden)
+				$R.css(side, sC.inset[side] + getPaneSize(pane));
+		});
+	}
+
 	/**
 	* Initialize module objects, styling, size and position for all resize bars and toggler buttons
 	*
@@ -2146,13 +2435,12 @@ $.fn.layout = function (opts) {
 			$Ts[pane]	= false;
 			if (!$P) return; // pane does not exist - skip
 
-			var 
-				o		= options[pane]
+			var	o		= options[pane]
 			,	s		= state[pane]
 			,	c		= _c[pane]
+			,	paneId	= o.paneSelector.substr(0,1) === "#" ? o.paneSelector.substr(1) : ""
 			,	rClass	= o.resizerClass
 			,	tClass	= o.togglerClass
-			,	side	= c.side.toLowerCase()
 			,	spacing	= (s.isVisible ? o.spacing_open : o.spacing_closed)
 			,	_pane	= "-"+ pane // used for classNames
 			,	_state	= (s.isVisible ? "-open" : "-closed") // used for classNames
@@ -2165,10 +2453,10 @@ $.fn.layout = function (opts) {
 
 			//if (s.isVisible && o.resizable) ... handled by initResizable
 			if (!s.isVisible && o.slidable)
-				$R.attr("title", o.sliderTip).css("cursor", o.sliderCursor);
+				$R.attr("title", o.tips.Slide).css("cursor", o.sliderCursor);
 
 			$R	// if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "paneLeft-resizer"
-				.attr("id", (o.paneSelector.substr(0,1)=="#" ? o.paneSelector.substr(1) + "-resizer" : ""))
+				.attr("id", paneId ? paneId +"-resizer" : "" )
 				.data({
 					parentLayout:	Instance
 				,	layoutPane:		Instance[pane]	// NEW pointer to pane-alias-object
@@ -2182,10 +2470,12 @@ $.fn.layout = function (opts) {
 				.hover(onResizerEnter, onResizerLeave) // ALWAYS NEED resizer.mouseleave to balance toggler.mouseenter
 				.appendTo($N) // append DIV to container
 			;
+			if (o.resizerDblClickToggle)
+				$R.bind("dblclick."+ sID, toggle );
 
 			if ($T) {
 				$T	// if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "#paneLeft-toggler"
-					.attr("id", (o.paneSelector.substr(0,1)=="#" ? o.paneSelector.substr(1) + "-toggler" : ""))
+					.attr("id", paneId ? paneId +"-toggler" : "" )
 					.data({
 						parentLayout:	Instance
 					,	layoutPane:		Instance[pane]	// NEW pointer to pane-alias-object
@@ -2236,7 +2526,7 @@ $.fn.layout = function (opts) {
 				setAsOpen(pane);	// onOpen will be called, but NOT onResize
 			else {
 				setAsClosed(pane);	// onClose will be called
-				bindStartSlidingEvent(pane, true); // will enable events IF option is set
+				bindStartSlidingEvents(pane, true); // will enable events IF option is set
 			}
 
 		});
@@ -2250,7 +2540,7 @@ $.fn.layout = function (opts) {
 	* Initialize scrolling ui-layout-content div - if exists
 	*
 	* @see  initPane() - or externally after an Ajax injection
-	* @param {string}	[pane]			The pane to process
+	* @param {string}	pane			The pane to process
 	* @param {boolean=}	[resize=true]	Size content after init
 	*/
 ,	initContent = function (pane, resize) {
@@ -2268,14 +2558,18 @@ $.fn.layout = function (opts) {
 		;
 		if ($C && $C.length) {
 			$C.data("layoutRole", "content");
-			// SAVE original Pane CSS
+			// SAVE original Content CSS
 			if (!$C.data("layoutCSS"))
-				$C.data("layoutCSS", elCSS($C, "height"));
+				$C.data("layoutCSS", styles($C, "height"));
 			$C.css( _c.content.cssReq );
 			if (o.applyDemoStyles) {
 				$C.css( _c.content.cssDemo ); // add padding & overflow: auto to content-div
 				$P.css( _c.content.cssDemoPane ); // REMOVE padding/scrolling from pane
 			}
+			// ensure no vertical scrollbar on pane - will mess up measurements
+			if ($P.css("overflowX").match(/(scroll|auto)/)) {
+				$P.css("overflow", "hidden");
+			}
 			state[pane].content = {}; // init content state
 			if (resize !== false) sizeContent(pane);
 			// sizeContent() is called AFTER init of all elements
@@ -2309,8 +2603,6 @@ $.fn.layout = function (opts) {
 			,	z		= options.zIndexes
 			,	c		= _c[pane]
 			,	side	= c.dir=="horz" ? "top" : "left"
-			,	opEdge	= _c.oppositeEdge[pane]
-			,	masks	=  pane +",center,"+ opEdge + (c.dir=="horz" ? ",west,east" : "")
 			,	$P 		= $Ps[pane]
 			,	$R		= $Rs[pane]
 			,	base	= o.resizerClass
@@ -2328,7 +2620,7 @@ $.fn.layout = function (opts) {
 			;
 
 			if (!s.isClosed)
-				$R.attr("title", o.resizerTip)
+				$R.attr("title", o.tips.Resize)
 				  .css("cursor", o.resizerCursor); // n-resize, s-resize, etc
 
 			$R.draggable({
@@ -2355,7 +2647,8 @@ $.fn.layout = function (opts) {
 					// TODO: dragging CANNOT be cancelled like this, so see if there is a way?
 					if (false === _runCallbacks("ondrag_start", pane)) return false;
 
-					s.isResizing	= true; // prevent pane from closing while resizing
+					s.isResizing		= true; // prevent pane from closing while resizing
+					state.paneResizing	= pane; // easy to see if ANY pane is resizing
 					timer.clear(pane+"_closeSlider"); // just in case already triggered
 
 					// SET RESIZER LIMITS - used in drag()
@@ -2370,7 +2663,7 @@ $.fn.layout = function (opts) {
 					$('body').disableSelection(); 
 
 					// MASK PANES CONTAINING IFRAMES, APPLETS OR OTHER TROUBLESOME ELEMENTS
-					showMasks( masks );
+					showMasks( pane, { resizing: true });
 				}
 
 			,	drag: function (e, ui) {
@@ -2398,7 +2691,7 @@ $.fn.layout = function (opts) {
 					// ADD/REMOVE dragging-limit CLASS
 					if (limit) {
 						ui.helper.addClass( helperLimitClass +" "+ helperPaneLimitClass ); // at dragging-limit
-						window.defaultStatus = (limit>0 && pane.match(/north|west/)) || (limit<0 && pane.match(/south|east/)) ? lang.maxSizeWarning : lang.minSizeWarning;
+						window.defaultStatus = (limit>0 && pane.match(/(north|west)/)) || (limit<0 && pane.match(/(south|east)/)) ? o.tips.maxSizeWarning : o.tips.minSizeWarning;
 					}
 					else {
 						ui.helper.removeClass( helperLimitClass +" "+ helperPaneLimitClass ); // not at dragging-limit
@@ -2416,8 +2709,9 @@ $.fn.layout = function (opts) {
 					$('body').enableSelection(); // RE-ENABLE TEXT SELECTION
 					window.defaultStatus = ""; // clear 'resizing limit' message from statusbar
 					$R.removeClass( resizerClass +" "+ resizerPaneClass ); // remove drag classes from Resizer
-					s.isResizing = false;
-					resizePanes(e, ui, pane, true, masks); // true = resizingDone
+					s.isResizing		= false;
+					state.paneResizing	= false; // easy to see if ANY pane is resizing
+					resizePanes(e, ui, pane, true); // true = resizingDone
 				}
 
 			});
@@ -2433,7 +2727,7 @@ $.fn.layout = function (opts) {
 		* @param {string}		pane
 		* @param {boolean=}		[resizingDone=false]
 		*/
-		var resizePanes = function (evt, ui, pane, resizingDone, masks) {
+		var resizePanes = function (evt, ui, pane, resizingDone) {
 			var	dragPos	= ui.position
 			,	c		= _c[pane]
 			,	o		= options[pane]
@@ -2443,11 +2737,11 @@ $.fn.layout = function (opts) {
 			switch (pane) {
 				case "north":	resizerPos = dragPos.top; break;
 				case "west":	resizerPos = dragPos.left; break;
-				case "south":	resizerPos = sC.offsetHeight - dragPos.top  - o.spacing_open; break;
-				case "east":	resizerPos = sC.offsetWidth  - dragPos.left - o.spacing_open; break;
+				case "south":	resizerPos = sC.layoutHeight - dragPos.top  - o.spacing_open; break;
+				case "east":	resizerPos = sC.layoutWidth  - dragPos.left - o.spacing_open; break;
 			};
 			// remove container margin from resizer position to get the pane size
-			var newSize = resizerPos - sC["inset"+ c.side];
+			var newSize = resizerPos - sC.inset[c.side];
 
 			// Disable OR Resize Mask(s) created in drag.start
 			if (!resizingDone) {
@@ -2462,19 +2756,19 @@ $.fn.layout = function (opts) {
 				// ondrag_end callback
 				if (false !== _runCallbacks("ondrag_end", pane))
 					manualSizePane(pane, newSize, false, true); // true = noAnimation
-				hideMasks(); // hide all masks, which include panes with 'content/iframe-masks'
-				if (s.isSliding && masks) // RE-SHOW only 'object-masks' so objects won't show through sliding pane
-					showMasks( masks, true ); // true = onlyForObjects
+				hideMasks(true); // true = force hiding all masks even if one is 'sliding'
+				if (s.isSliding) // RE-SHOW 'object-masks' so objects won't show through sliding pane
+					showMasks( pane, { resizing: true });
 			}
 		};
 	}
 
 	/**
-	 *	sizeMask
-	 *
-	 *	Needed to overlay a DIV over an IFRAME-pane because mask CANNOT be *inside* the pane
-	 *	Called when mask created, and during livePaneResizing
-	 */
+	*	sizeMask
+	*
+	*	Needed to overlay a DIV over an IFRAME-pane because mask CANNOT be *inside* the pane
+	*	Called when mask created, and during livePaneResizing
+	*/
 ,	sizeMask = function () {
 		var $M		= $(this)
 		,	pane	= $M.data("layoutMask") // eg: "west"
@@ -2497,14 +2791,36 @@ $.fn.layout = function (opts) {
 		$Ms.each( sizeMask ); // resize all 'visible' masks
 	}
 
-,	showMasks = function (panes, onlyForObjects) {
-		var a	= panes ? panes.split(",") : $.layout.config.allPanes
-		,	z	= options.zIndexes
-		,	o, s;
-		$.each(a, function(i,p){
+	/**
+	* @param {string}	pane		The pane being resized, animated or isSliding
+	* @param {Object=}	[args]		(optional) Options: which masks to apply, and to which panes
+	*/
+,	showMasks = function (pane, args) {
+		var	c		= _c[pane]
+		,	panes	=  ["center"]
+		,	z		= options.zIndexes
+		,	a		= $.extend({
+						objectsOnly:	false
+					,	animation:		false
+					,	resizing:		true
+					,	sliding:		state[pane].isSliding
+					},	args )
+		,	o, s
+		;
+		if (a.resizing)
+			panes.push( pane );
+		if (a.sliding)
+			panes.push( _c.oppositeEdge[pane] ); // ADD the oppositeEdge-pane
+
+		if (c.dir === "horz") {
+			panes.push("west");
+			panes.push("east");
+		}
+
+		$.each(panes, function(i,p){
 			s = state[p];
 			o = options[p];
-			if (s.isVisible && ( (!onlyForObjects && o.maskContents) || o.maskObjects )) {
+			if (s.isVisible && ( o.maskObjects || (!a.objectsOnly && o.maskContents) )) {
 				getMasks(p).each(function(){
 					sizeMask.call(this);
 					this.style.zIndex = s.isSliding ? z.pane_sliding+1 : z.pane_normal+1
@@ -2514,19 +2830,31 @@ $.fn.layout = function (opts) {
 		});
 	}
 
-,	hideMasks = function () {
+	/**
+	* @param {boolean=}	force		Hide masks even if a pane is sliding
+	*/
+,	hideMasks = function (force) {
 		// ensure no pane is resizing - could be a timing issue
-		var skip;
-		$.each( $.layout.config.borderPanes, function(i,p){
-			if (state[p].isResizing) {
-				skip = true;
-				return false; // BREAK
-			}
-		});
-		if (!skip)
+		if (force || !state.paneResizing) {
 			$Ms.hide(); // hide ALL masks
+		}
+		// if ANY pane is sliding, then DO NOT remove masks from panes with maskObjects enabled
+		else if (!force && !$.isEmptyObject( state.panesSliding )) {
+			var	i = $Ms.length - 1
+			,	p, $M;
+			for (; i >= 0; i--) {
+				$M	= $Ms.eq(i);
+				p	= $M.data("layoutMask");
+				if (!options[p].maskObjects) {
+					$M.hide();
+				}
+			}
+		}
 	}
 
+	/**
+	* @param {string}	pane
+	*/
 ,	getMasks = function (pane) {
 		var $Masks	= $([])
 		,	$M, i = 0, c = $Ms.length
@@ -2543,11 +2871,13 @@ $.fn.layout = function (opts) {
 	}
 
 	/**
-	 *	createMasks
-	 *
-	 *	Generates both DIV (ALWAYS used) and IFRAME (optional) elements as masks
-	 *	An IFRAME mask is created *under* the DIV when maskObjects=true, because a DIV cannot mask an applet
-	 */
+	* createMasks
+	*
+	* Generates both DIV (ALWAYS used) and IFRAME (optional) elements as masks
+	* An IFRAME mask is created *under* the DIV when maskObjects=true, because a DIV cannot mask an applet
+	*
+	* @param {string}	pane
+	*/
 ,	createMasks = function (pane) {
 		var
 			$P		= $Ps[pane]
@@ -2569,9 +2899,11 @@ $.fn.layout = function (opts) {
 			// styles common to both DIVs and IFRAMES
 			css.display		= "block";
 			css.position	= "absolute";
+			css.background	= "#FFF";
 			if (isIframe) { // IFRAME-only props
 				el.frameborder = 0;
 				el.src		= "about:blank";
+				//el.allowTransparency = true; - for IE, but breaks masking ability!
 				css.opacity	= 0;
 				css.filter	= "Alpha(Opacity='0')";
 				css.border	= 0;
@@ -2606,11 +2938,17 @@ $.fn.layout = function (opts) {
 	*
 	* @param {boolean=}	[destroyChildren=false]		Destory Child-Layouts first?
 	*/
-,	destroy = function (destroyChildren) {
+,	destroy = function (evt_or_destroyChildren, destroyChildren) {
 		// UNBIND layout events and remove global object
 		$(window).unbind("."+ sID);		// resize & unload
 		$(document).unbind("."+ sID);	// keyDown (hotkeys)
 
+		if (typeof evt_or_destroyChildren === "object")
+			// stopPropagation if called by trigger("layoutdestroy") - use evtPane utility 
+			evtPane(evt_or_destroyChildren);
+		else // no event, so transfer 1st param to destroyChildren param
+			destroyChildren = evt_or_destroyChildren;
+
 		// need to look for parent layout BEFORE we remove the container data, else skips a level
 		//var parentPane = Instance.hasParentLayout ? $.layout.getParentPaneInstance( $N ) : null;
 
@@ -2647,7 +2985,7 @@ $.fn.layout = function (opts) {
 
 		// clear the Instance of everything except for container & options (so could recreate)
 		// RE-CREATE: myLayout = myLayout.container.layout( myLayout.options );
-		for (n in Instance)
+		for (var n in Instance)
 			if (!n.match(/^(container|options)$/)) delete Instance[ n ];
 		// add a 'destroyed' flag to make it easy to check
 		Instance.destroyed = true;
@@ -2655,8 +2993,10 @@ $.fn.layout = function (opts) {
 		// if this is a child layout, CLEAR the child-pointer in the parent
 		/* for now the pointer REMAINS, but with only container, options and destroyed keys
 		if (parentPane) {
-			var layout = parentPane.pane.data("parentLayout");
-			parentPane.child = layout.children[ parentPane.name ] = null;
+			var layout	= parentPane.pane.data("parentLayout")
+			,	key		= layout.options.instanceKey || 'error';
+			// THIS SYNTAX MAY BE WRONG!
+			parentPane.children[key] = layout.children[ parentPane.name ].children[key] = null;
 		}
 		*/
 
@@ -2667,9 +3007,10 @@ $.fn.layout = function (opts) {
 	* Remove a pane from the layout - subroutine of destroy()
 	*
 	* @see  destroy()
-	* @param {string}	pane				The pane to process
-	* @param {boolean=}	[remove=false]		Remove the DOM element?
-	* @param {boolean=}	[skipResize=false]	Skip calling resizeAll()?
+	* @param {(string|Object)}	evt_or_pane			The pane to process
+	* @param {boolean=}			[remove=false]		Remove the DOM element?
+	* @param {boolean=}			[skipResize=false]	Skip calling resizeAll()?
+	* @param {boolean=}			[destroyChild=true]	Destroy Child-layouts? If not passed, obeys options setting
 	*/
 ,	removePane = function (evt_or_pane, remove, skipResize, destroyChild) {
 		if (!isInitialized()) return;
@@ -2679,7 +3020,6 @@ $.fn.layout = function (opts) {
 		,	$R	= $Rs[pane]
 		,	$T	= $Ts[pane]
 		;
-		//alert( '$P.length = '+ $P.length );
 		// NOTE: elements can still exist even after remove()
 		//		so check for missing data(), which is cleared by removed()
 		if ($P && $.isEmptyObject( $P.data() )) $P = false;
@@ -2689,24 +3029,32 @@ $.fn.layout = function (opts) {
 
 		if ($P) $P.stop(true, true);
 
-		//	check for a child layout
 		var	o	= options[pane]
 		,	s	= state[pane]
 		,	d	= "layout"
 		,	css	= "layoutCSS"
-		,	child	= children[pane] || ($P ? $P.data(d) : 0) || ($C ? $C.data(d) : 0) || null
-		,	destroy	= destroyChild !== undefined ? destroyChild : o.destroyChildLayout
+		,	pC	= children[pane]
+		,	hasChildren	= $.isPlainObject( pC ) && !$.isEmptyObject( pC )
+		,	destroy		= destroyChild !== undefined ? destroyChild : o.destroyChildren
 		;
-
 		// FIRST destroy the child-layout(s)
-		if (destroy && child && !child.destroyed) {
-			child.destroy(true);	// tell child-layout to destroy ALL its child-layouts too
-			if (child.destroyed)	// destroy was successful
-				child = null;		// clear pointer for logic below 
+		if (hasChildren && destroy) {
+			$.each( pC, function (key, child) {
+				if (!child.destroyed)
+					child.destroy(true);// tell child-layout to destroy ALL its child-layouts too
+				if (child.destroyed)	// destroy was successful
+					delete pC[key];
+			});
+			// if no more children, remove the children hash
+			if ($.isEmptyObject( pC )) {
+				pC = children[pane] = null; // clear children hash
+				hasChildren = false;
+			}
 		}
 
-		if ($P && remove && !child)
-			$P.remove();
+		// Note: can't 'remove' a pane element with non-destroyed children
+		if ($P && remove && !hasChildren)
+			$P.remove(); // remove the pane-element and everything inside it
 		else if ($P && $P[0]) {
 			//	create list of ALL pane-classes that need to be removed
 			var	root	= o.paneClass // default="ui-layout-pane"
@@ -2732,10 +3080,12 @@ $.fn.layout = function (opts) {
 			;
 			// do NOT reset CSS if this pane/content is STILL the container of a nested layout!
 			// the nested layout will reset its 'container' CSS when/if it is destroyed
-			if ($C && $C.data(d)) {
+			if (hasChildren && $C) {
 				// a content-div may not have a specific width, so give it one to contain the Layout
 				$C.width( $C.width() );
-				child.resizeAll(); // now resize the Layout
+				$.each( pC, function (key, child) {
+					child.resizeAll(); // resize the Layout
+				});
 			}
 			else if ($C)
 				$C.css( $C.data(css) ).removeData(css).removeData("layoutRole");
@@ -2749,7 +3099,7 @@ $.fn.layout = function (opts) {
 		if ($R) $R.remove();
 
 		// CLEAR all pointers and state data
-		Instance[pane] = $Ps[pane] = $Cs[pane] = $Rs[pane] = $Ts[pane] = children[pane] = false;
+		Instance[pane] = $Ps[pane] = $Cs[pane] = $Rs[pane] = $Ts[pane] = false;
 		s = { removed: true };
 
 		if (!skipResize)
@@ -2763,6 +3113,9 @@ $.fn.layout = function (opts) {
  * ###########################
  */
 
+	/**
+	* @param {string}	pane
+	*/
 ,	_hidePane = function (pane) {
 		var $P	= $Ps[pane]
 		,	o	= options[pane]
@@ -2777,6 +3130,9 @@ $.fn.layout = function (opts) {
 			$P.hide().removeData(_c.offscreenReset);
 	}
 
+	/**
+	* @param {string}	pane
+	*/
 ,	_showPane = function (pane) {
 		var $P	= $Ps[pane]
 		,	o	= options[pane]
@@ -2799,8 +3155,8 @@ $.fn.layout = function (opts) {
 	* Completely 'hides' a pane, including its spacing - as if it does not exist
 	* The pane is not actually 'removed' from the source, so can use 'show' to un-hide it
 	*
-	* @param {string}	pane		The pane being hidden, ie: north, south, east, or west
-	* @param {boolean=}	[noAnimation=false]	
+	* @param {(string|Object)}	evt_or_pane			The pane being hidden, ie: north, south, east, or west
+	* @param {boolean=}			[noAnimation=false]	
 	*/
 ,	hide = function (evt_or_pane, noAnimation) {
 		if (!isInitialized()) return;
@@ -2816,6 +3172,7 @@ $.fn.layout = function (opts) {
 		if (state.initialized && false === _runCallbacks("onhide_start", pane)) return;
 
 		s.isSliding = false; // just in case
+		delete state.panesSliding[pane];
 
 		// now hide the elements
 		if ($R) $R.hide(); // hide resizer-bar
@@ -2838,10 +3195,10 @@ $.fn.layout = function (opts) {
 	/**
 	* Show a hidden pane - show as 'closed' by default unless openPane = true
 	*
-	* @param {string}	pane		The pane being opened, ie: north, south, east, or west
-	* @param {boolean=}	[openPane=false]
-	* @param {boolean=}	[noAnimation=false]
-	* @param {boolean=}	[noAlert=false]
+	* @param {(string|Object)}	evt_or_pane			The pane being opened, ie: north, south, east, or west
+	* @param {boolean=}			[openPane=false]
+	* @param {boolean=}			[noAnimation=false]
+	* @param {boolean=}			[noAlert=false]
 	*/
 ,	show = function (evt_or_pane, openPane, noAnimation, noAlert) {
 		if (!isInitialized()) return;
@@ -2856,9 +3213,10 @@ $.fn.layout = function (opts) {
 		// onshow_start callback - will CANCEL show if returns false
 		if (false === _runCallbacks("onshow_start", pane)) return;
 
-		s.isSliding = false; // just in case
 		s.isShowing = true; // used by onopen/onclose
 		//s.isHidden  = false; - will be set by open/close - if not cancelled
+		s.isSliding = false; // just in case
+		delete state.panesSliding[pane];
 
 		// now show the elements
 		//if ($R) $R.show(); - will be shown by open/close
@@ -2872,8 +3230,8 @@ $.fn.layout = function (opts) {
 	/**
 	* Toggles a pane open/closed by calling either open or close
 	*
-	* @param {string}	pane   The pane being toggled, ie: north, south, east, or west
-	* @param {boolean=}	[slide=false]
+	* @param {(string|Object)}	evt_or_pane		The pane being toggled, ie: north, south, east, or west
+	* @param {boolean=}			[slide=false]
 	*/
 ,	toggle = function (evt_or_pane, slide) {
 		if (!isInitialized()) return;
@@ -2906,22 +3264,22 @@ $.fn.layout = function (opts) {
 		_hidePane(pane);
 		s.isClosed = true;
 		s.isVisible = false;
-		// UNUSED: if (setHandles) setAsClosed(pane, true); // true = force
+		if (setHandles) setAsClosed(pane);
 	}
 
 	/**
 	* Close the specified pane (animation optional), and resize all other panes as needed
 	*
-	* @param {string}	pane		The pane being closed, ie: north, south, east, or west
-	* @param {boolean=}	[force=false]
-	* @param {boolean=}	[noAnimation=false]
-	* @param {boolean=}	[skipCallback=false]
+	* @param {(string|Object)}	evt_or_pane			The pane being closed, ie: north, south, east, or west
+	* @param {boolean=}			[force=false]
+	* @param {boolean=}			[noAnimation=false]
+	* @param {boolean=}			[skipCallback=false]
 	*/
 ,	close = function (evt_or_pane, force, noAnimation, skipCallback) {
 		var	pane = evtPane.call(this, evt_or_pane);
 		// if pane has been initialized, but NOT the complete layout, close pane instantly
 		if (!state.initialized && $Ps[pane]) {
-			_closePane(pane); // INIT pane as closed
+			_closePane(pane, true); // INIT pane as closed
 			return;
 		}
 		if (!isInitialized()) return;
@@ -2937,7 +3295,7 @@ $.fn.layout = function (opts) {
 
 		// QUEUE in case another action/animation is in progress
 		$N.queue(function( queueNext ){
-	
+
 			if ( !$P
 			||	(!o.closable && !s.isShowing && !s.isHiding)	// invalid request // (!o.resizable && !o.closable) ???
 			||	(!force && s.isClosed && !s.isShowing)			// already closed
@@ -2975,9 +3333,6 @@ $.fn.layout = function (opts) {
 
 			// CLOSE THE PANE
 			if (doFX) { // animate the close
-				// mask panes with objects
-				var masks = "center"+ (c.dir=="horz" ? ",west,east" : "");
-				showMasks( masks, true );	// true = ONLY mask panes with maskObjects=true
 				lockPaneForFX(pane, true);	// need to set left/top so animation will work
 				$P.hide( o.fxName_close, o.fxSettings_close, o.fxSpeed_close, function () {
 					lockPaneForFX(pane, false); // undo
@@ -2995,7 +3350,7 @@ $.fn.layout = function (opts) {
 		// SUBROUTINE
 		function close_2 () {
 			s.isMoving	= false;
-			bindStartSlidingEvent(pane, true); // will enable if o.slidable = true
+			bindStartSlidingEvents(pane, true); // will enable if o.slidable = true
 
 			// if opposite-pane was autoClosed, see if it can be autoOpened now
 			var altPane = _c.oppositeEdge[pane];
@@ -3004,9 +3359,6 @@ $.fn.layout = function (opts) {
 				makePaneFit( altPane );
 			}
 
-			// hide any masks shown while closing
-			hideMasks();
-
 			if (!skipCallback && (state.initialized || o.triggerEventsOnLoad)) {
 				// onclose callback - UNLESS just 'showing' a hidden pane as 'closed'
 				if (!isShowing)	_runCallbacks("onclose_end", pane);
@@ -3021,14 +3373,14 @@ $.fn.layout = function (opts) {
 	* @param {string}	pane	The pane just closed, ie: north, south, east, or west
 	*/
 ,	setAsClosed = function (pane) {
+		if (!$Rs[pane]) return; // handles not initialized yet!
 		var
 			$P		= $Ps[pane]
 		,	$R		= $Rs[pane]
 		,	$T		= $Ts[pane]
 		,	o		= options[pane]
 		,	s		= state[pane]
-		,	side	= _c[pane].side.toLowerCase()
-		,	inset	= "inset"+ _c[pane].side
+		,	side	= _c[pane].side
 		,	rClass	= o.resizerClass
 		,	tClass	= o.togglerClass
 		,	_pane	= "-"+ pane // used for classNames
@@ -3037,13 +3389,12 @@ $.fn.layout = function (opts) {
 		,	_closed	= "-closed"
 		;
 		$R
-			.css(side, sC[inset]) // move the resizer
+			.css(side, sC.inset[side]) // move the resizer
 			.removeClass( rClass+_open +" "+ rClass+_pane+_open )
 			.removeClass( rClass+_sliding +" "+ rClass+_pane+_sliding )
 			.addClass( rClass+_closed +" "+ rClass+_pane+_closed )
-			.unbind("dblclick."+ sID)
 		;
-		// DISABLE 'resizing' when closed - do this BEFORE bindStartSlidingEvent?
+		// DISABLE 'resizing' when closed - do this BEFORE bindStartSlidingEvents?
 		if (o.resizable && $.layout.plugins.draggable)
 			$R
 				.draggable("disable")
@@ -3057,7 +3408,7 @@ $.fn.layout = function (opts) {
 			$T
 				.removeClass( tClass+_open +" "+ tClass+_pane+_open )
 				.addClass( tClass+_closed +" "+ tClass+_pane+_closed )
-				.attr("title", o.togglerTip_closed) // may be blank
+				.attr("title", o.tips.Open) // may be blank
 			;
 			// toggler-content - if exists
 			$T.children(".content-open").hide();
@@ -3076,10 +3427,10 @@ $.fn.layout = function (opts) {
 	/**
 	* Open the specified pane (animation optional), and resize all other panes as needed
 	*
-	* @param {string}	pane		The pane being opened, ie: north, south, east, or west
-	* @param {boolean=}	[slide=false]
-	* @param {boolean=}	[noAnimation=false]
-	* @param {boolean=}	[noAlert=false]
+	* @param {(string|Object)}	evt_or_pane			The pane being opened, ie: north, south, east, or west
+	* @param {boolean=}			[slide=false]
+	* @param {boolean=}			[noAnimation=false]
+	* @param {boolean=}			[noAlert=false]
 	*/
 ,	open = function (evt_or_pane, slide, noAnimation, noAlert) {
 		if (!isInitialized()) return;
@@ -3107,8 +3458,8 @@ $.fn.layout = function (opts) {
 				return;
 			}
 
-			if (o.autoResize && s.size != o.size) // resize pane to original size set in options
-				sizePane(pane, o.size, true, true, true); // true=skipCallback/forceResize/noAnimation
+			if (s.autoResize && s.size != o.size) // resize pane to original size set in options
+				sizePane(pane, o.size, true, true, true); // true=skipCallback/noAnimation/forceResize
 			else
 				// make sure there is enough space available to open the pane
 				setSizeLimits(pane, slide);
@@ -3125,8 +3476,8 @@ $.fn.layout = function (opts) {
 
 			if (s.minSize > s.maxSize) { // INSUFFICIENT ROOM FOR PANE TO OPEN!
 				syncPinBtns(pane, false); // make sure pin-buttons are reset
-				if (!noAlert && o.noRoomToOpenTip)
-					alert(o.noRoomToOpenTip);
+				if (!noAlert && o.tips.noRoomToOpen)
+					alert(o.tips.noRoomToOpen);
 				return queueNext(); // ABORT
 			}
 
@@ -3135,7 +3486,7 @@ $.fn.layout = function (opts) {
 			else if (s.isSliding) // PIN PANE (stop sliding) - open pane 'normally' instead
 				bindStopSlidingEvents(pane, false); // UNBIND trigger events - will set isSliding=false
 			else if (o.slidable)
-				bindStartSlidingEvent(pane, false); // UNBIND trigger events
+				bindStartSlidingEvents(pane, false); // UNBIND trigger events
 
 			s.noRoom = false; // will be reset by makePaneFit if 'noRoom'
 			makePaneFit(pane);
@@ -3153,12 +3504,9 @@ $.fn.layout = function (opts) {
 			if (isShowing) s.isHidden = false;
 
 			if (doFX) { // ANIMATE
-				// mask panes with objects
-				var masks = "center"+ (c.dir=="horz" ? ",west,east" : "");
-				if (s.isSliding) masks += ","+ _c.oppositeEdge[pane];
-				showMasks( masks, true );	// true = ONLY mask panes with maskObjects=true
+				// mask adjacent panes with objects
 				lockPaneForFX(pane, true);	// need to set left/top so animation will work
-				$P.show( o.fxName_open, o.fxSettings_open, o.fxSpeed_open, function() {
+					$P.show( o.fxName_open, o.fxSettings_open, o.fxSpeed_open, function() {
 					lockPaneForFX(pane, false); // undo
 					if (s.isVisible) open_2(); // continue
 					queueNext();
@@ -3180,7 +3528,6 @@ $.fn.layout = function (opts) {
 
 			// NOTE: if isSliding, then other panes are NOT 'resized'
 			if (!s.isSliding) { // resize all panes adjacent to this one
-				hideMasks(); // remove any masks shown while opening
 				sizeMidPanes(_c[pane].dir=="vert" ? "center" : "", false); // false = NOT skipCallback
 			}
 
@@ -3201,8 +3548,7 @@ $.fn.layout = function (opts) {
 		,	$T		= $Ts[pane]
 		,	o		= options[pane]
 		,	s		= state[pane]
-		,	side	= _c[pane].side.toLowerCase()
-		,	inset	= "inset"+ _c[pane].side
+		,	side	= _c[pane].side
 		,	rClass	= o.resizerClass
 		,	tClass	= o.togglerClass
 		,	_pane	= "-"+ pane // used for classNames
@@ -3211,7 +3557,7 @@ $.fn.layout = function (opts) {
 		,	_sliding= "-sliding"
 		;
 		$R
-			.css(side, sC[inset] + getPaneSize(pane)) // move the resizer
+			.css(side, sC.inset[side] + getPaneSize(pane)) // move the resizer
 			.removeClass( rClass+_closed +" "+ rClass+_pane+_closed )
 			.addClass( rClass+_open +" "+ rClass+_pane+_open )
 		;
@@ -3220,13 +3566,11 @@ $.fn.layout = function (opts) {
 		else // in case 'was sliding'
 			$R.removeClass( rClass+_sliding +" "+ rClass+_pane+_sliding )
 
-		if (o.resizerDblClickToggle)
-			$R.bind("dblclick", toggle );
 		removeHover( 0, $R ); // remove hover classes
 		if (o.resizable && $.layout.plugins.draggable)
 			$R	.draggable("enable")
 				.css("cursor", o.resizerCursor)
-				.attr("title", o.resizerTip);
+				.attr("title", o.tips.Resize);
 		else if (!s.isSliding)
 			$R.css("cursor", "default"); // n-resize, s-resize, etc
 
@@ -3234,7 +3578,7 @@ $.fn.layout = function (opts) {
 		if ($T) {
 			$T	.removeClass( tClass+_closed +" "+ tClass+_pane+_closed )
 				.addClass( tClass+_open +" "+ tClass+_pane+_open )
-				.attr("title", o.togglerTip_open); // may be blank
+				.attr("title", o.tips.Close); // may be blank
 			removeHover( 0, $T ); // remove hover classes
 			// toggler-content - if exists
 			$T.children(".content-closed").hide();
@@ -3335,7 +3679,7 @@ $.fn.layout = function (opts) {
 	}
 
 	/**
-	* @param {string}	pane		The pane being opened, ie: north, south, east, or west
+	* @param {(string|Object)}	evt_or_pane		The pane being opened, ie: north, south, east, or west
 	*/
 ,	slideToggle = function (evt_or_pane) {
 		var pane = evtPane.call(this, evt_or_pane);
@@ -3356,14 +3700,15 @@ $.fn.layout = function (opts) {
 		,	z	= options.zIndexes
 		;
 		if (doLock) {
+			showMasks( pane, { animation: true, objectsOnly: true });
 			$P.css({ zIndex: z.pane_animate }); // overlay all elements during animation
 			if (pane=="south")
-				$P.css({ top: sC.insetTop + sC.innerHeight - $P.outerHeight() });
+				$P.css({ top: sC.inset.top + sC.innerHeight - $P.outerHeight() });
 			else if (pane=="east")
-				$P.css({ left: sC.insetLeft + sC.innerWidth - $P.outerWidth() });
+				$P.css({ left: sC.inset.left + sC.innerWidth - $P.outerWidth() });
 		}
 		else { // animation DONE - RESET CSS
-			// TODO: see if this can be deleted. It causes a quick-close when sliding in Chrome
+			hideMasks();
 			$P.css({ zIndex: (s.isSliding ? z.pane_sliding : z.pane_normal) });
 			if (pane=="south")
 				$P.css({ top: "auto" });
@@ -3384,7 +3729,7 @@ $.fn.layout = function (opts) {
 	* @param {string}	pane	The pane to enable/disable, 'north', 'south', etc.
 	* @param {boolean}	enable	Enable or Disable sliding?
 	*/
-,	bindStartSlidingEvent = function (pane, enable) {
+,	bindStartSlidingEvents = function (pane, enable) {
 		var o		= options[pane]
 		,	$P		= $Ps[pane]
 		,	$R		= $Rs[pane]
@@ -3395,22 +3740,27 @@ $.fn.layout = function (opts) {
 		// make sure we have a valid event
 		if (evtName.match(/mouseover/))
 			evtName = o.slideTrigger_open = "mouseenter";
-		else if (!evtName.match(/click|dblclick|mouseenter/)) 
+		else if (!evtName.match(/(click|dblclick|mouseenter)/)) 
 			evtName = o.slideTrigger_open = "click";
 
+		// must remove double-click-toggle when using dblclick-slide
+		if (o.resizerDblClickToggle && evtName.match(/click/)) {
+			$R[enable ? "unbind" : "bind"]('dblclick.'+ sID, toggle)
+		}
+
 		$R
 			// add or remove event
 			[enable ? "bind" : "unbind"](evtName +'.'+ sID, slideOpen)
 			// set the appropriate cursor & title/tip
 			.css("cursor", enable ? o.sliderCursor : "default")
-			.attr("title", enable ? o.sliderTip : "")
+			.attr("title", enable ? o.tips.Slide : "")
 		;
 	}
 
 	/**
 	* Add or remove 'mouseleave' events to 'slide close' when pane is 'sliding' open or closed
 	* Also increases zIndex when pane is sliding open
-	* See bindStartSlidingEvent for code to control 'slide open'
+	* See bindStartSlidingEvents for code to control 'slide open'
 	*
 	* @see  slideOpen(), slideClose()
 	* @param {string}	pane	The pane to process, 'north', 'south', etc.
@@ -3426,19 +3776,26 @@ $.fn.layout = function (opts) {
 		,	$P		= $Ps[pane]
 		,	$R		= $Rs[pane]
 		;
-		s.isSliding = enable; // logic
 		timer.clear(pane+"_closeSlider"); // just in case
 
-		// remove 'slideOpen' event from resizer
-		// ALSO will raise the zIndex of the pane & resizer
-		if (enable) bindStartSlidingEvent(pane, false);
+		if (enable) {
+			s.isSliding = true;
+			state.panesSliding[pane] = true;
+			// remove 'slideOpen' event from resizer
+			// ALSO will raise the zIndex of the pane & resizer
+			bindStartSlidingEvents(pane, false);
+		}
+		else {
+			s.isSliding = false;
+			delete state.panesSliding[pane];
+		}
 
 		// RE/SET zIndex - increases when pane is sliding-open, resets to normal when not
 		$P.css("zIndex", enable ? z.pane_sliding : z.pane_normal);
 		$R.css("zIndex", enable ? z.pane_sliding+2 : z.resizer_normal); // NOTE: mask = pane_sliding+1
 
 		// make sure we have a valid event
-		if (!evtName.match(/click|mouseleave/))
+		if (!evtName.match(/(click|mouseleave)/))
 			evtName = o.slideTrigger_close = "mouseleave"; // also catches 'mouseout'
 
 		// add/remove slide triggers
@@ -3458,7 +3815,7 @@ $.fn.layout = function (opts) {
 			// IF pane is not resizable (which already has a cursor and tip) 
 			// then set the a cursor & title/tip on resizer when sliding
 			$R.css("cursor", enable ? o.sliderCursor : "default");
-			$R.attr("title", enable ? o.togglerTip_open : ""); // use Toggler-tip, eg: "Close Pane"
+			$R.attr("title", enable ? o.tips.Close : ""); // use Toggler-tip, eg: "Close Pane"
 		}
 
 		// SUBROUTINE for mouseleave timer clearing
@@ -3479,8 +3836,7 @@ $.fn.layout = function (opts) {
 	* @param {boolean=}	[force=false]
 	*/
 ,	makePaneFit = function (pane, isOpening, skipCallback, force) {
-		var
-			o	= options[pane]
+		var	o	= options[pane]
 		,	s	= state[pane]
 		,	c	= _c[pane]
 		,	$P	= $Ps[pane]
@@ -3516,17 +3872,15 @@ $.fn.layout = function (opts) {
 		else if (s.minSize <= s.maxSize) { // pane CAN fit
 			hasRoom = true;
 			if (s.size > s.maxSize) // pane is too big - shrink it
-				sizePane(pane, s.maxSize, skipCallback, force, true); // true = noAnimation
+				sizePane(pane, s.maxSize, skipCallback, true, force); // true = noAnimation
 			else if (s.size < s.minSize) // pane is too small - enlarge it
-				sizePane(pane, s.minSize, skipCallback, force, true);
+				sizePane(pane, s.minSize, skipCallback, true, force); // true = noAnimation
 			// need s.isVisible because new pseudoClose method keeps pane visible, but off-screen
 			else if ($R && s.isVisible && $P.is(":visible")) {
 				// make sure resizer-bar is positioned correctly
 				// handles situation where nested layout was 'hidden' when initialized
-				var	side = c.side.toLowerCase()
-				,	pos  = s.size + sC["inset"+ c.side]
-				;
-				if ($.layout.cssNum($R, side) != pos) $R.css( side, pos );
+				var	pos = s.size + sC.inset[c.side];
+				if ($.layout.cssNum( $R, c.side ) != pos) $R.css( c.side, pos );
 			}
 
 			// if was previously hidden due to noRoom, then RESET because NOW there is room
@@ -3557,46 +3911,46 @@ $.fn.layout = function (opts) {
 
 
 	/**
-	* sizePane / manualSizePane
-	* sizePane is called only by internal methods whenever a pane needs to be resized
 	* manualSizePane is an exposed flow-through method allowing extra code when pane is 'manually resized'
 	*
-	* @param {string}	pane					The pane being resized
-	* @param {number}	size					The *desired* new size for this pane - will be validated
-	* @param {boolean=}	[skipCallback=false]	Should the onresize callback be run?
-	* @param {boolean=}	[noAnimation=false]
+	* @param {(string|Object)}	evt_or_pane				The pane being resized
+	* @param {number}			size					The *desired* new size for this pane - will be validated
+	* @param {boolean=}			[skipCallback=false]	Should the onresize callback be run?
+	* @param {boolean=}			[noAnimation=false]
+	* @param {boolean=}			[force=false]			Force resizing even if does not seem necessary
 	*/
-,	manualSizePane = function (evt_or_pane, size, skipCallback, noAnimation) {
+,	manualSizePane = function (evt_or_pane, size, skipCallback, noAnimation, force) {
 		if (!isInitialized()) return;
 		var	pane = evtPane.call(this, evt_or_pane)
 		,	o	= options[pane]
 		,	s	= state[pane]
 		//	if resizing callbacks have been delayed and resizing is now DONE, force resizing to complete...
-		,	forceResize = o.livePaneResizing && !s.isResizing
+		,	forceResize = force || (o.livePaneResizing && !s.isResizing)
 		;
 		// ANY call to manualSizePane disables autoResize - ie, percentage sizing
-		o.autoResize = false;
+		s.autoResize = false;
 		// flow-through...
-		sizePane(pane, size, skipCallback, forceResize, noAnimation); // will animate resize if option enabled
+		sizePane(pane, size, skipCallback, noAnimation, forceResize); // will animate resize if option enabled
 	}
 
 	/**
-	* @param {string}	pane					The pane being resized
-	* @param {number}	size					The *desired* new size for this pane - will be validated
-	* @param {boolean=}	[skipCallback=false]	Should the onresize callback be run?
-	* @param {boolean=}	[force=false]			Force resizing even if does not seem necessary
-	* @param {boolean=}	[noAnimation=false]
+	* sizePane is called only by internal methods whenever a pane needs to be resized
+	*
+	* @param {(string|Object)}	evt_or_pane				The pane being resized
+	* @param {number}			size					The *desired* new size for this pane - will be validated
+	* @param {boolean=}			[skipCallback=false]	Should the onresize callback be run?
+	* @param {boolean=}			[noAnimation=false]
+	* @param {boolean=}			[force=false]			Force resizing even if does not seem necessary
 	*/
-,	sizePane = function (evt_or_pane, size, skipCallback, force, noAnimation) {
+,	sizePane = function (evt_or_pane, size, skipCallback, noAnimation, force) {
 		if (!isInitialized()) return;
 		var	pane	= evtPane.call(this, evt_or_pane) // probably NEVER called from event?
 		,	o		= options[pane]
 		,	s		= state[pane]
 		,	$P		= $Ps[pane]
 		,	$R		= $Rs[pane]
-		,	side	= _c[pane].side.toLowerCase()
+		,	side	= _c[pane].side
 		,	dimName	= _c[pane].sizeType.toLowerCase()
-		,	inset	= "inset"+ _c[pane].side
 		,	skipResizeWhileDragging = s.isResizing && !o.triggerEventsDuringLiveResize
 		,	doFX	= noAnimation !== true && o.animatePaneSizing
 		,	oldSize, newSize
@@ -3619,6 +3973,8 @@ $.fn.layout = function (opts) {
 			if (!force && size === oldSize)
 				return queueNext();
 
+			s.newSize = size;
+
 			// onresize_start callback CANNOT cancel resizing because this would break the layout!
 			if (!skipCallback && state.initialized && s.isVisible)
 				_runCallbacks("onresize_start", pane);
@@ -3639,12 +3995,14 @@ $.fn.layout = function (opts) {
 					// reset zIndex after animation
 					$P.css({ zIndex: (s.isSliding ? z.pane_sliding : z.pane_normal) });
 					s.isMoving = false;
+					delete s.newSize;
 					sizePane_2(); // continue
 					queueNext();
 				});
 			}
 			else { // no animation
 				$P.css( dimName, newSize );	// resize pane
+				delete s.newSize;
 				// if pane is visible, then 
 				if ($P.is(":visible"))
 					sizePane_2(); // continue
@@ -3675,6 +4033,7 @@ $.fn.layout = function (opts) {
 						,	cssSize:	newSize
 						}]
 			,	lastTry = tries[0]
+			,	thisTry	= {}
 			,	msg		= 'Inaccurate size after resizing the '+ pane +'-pane.'
 			;
 			while ( !lastTry.correct ) {
@@ -3691,15 +4050,12 @@ $.fn.layout = function (opts) {
 				thisTry.actual	= dimName=='width' ? $P.outerWidth() : $P.outerHeight();
 				thisTry.correct	= (size === thisTry.actual);
 
-				// if showDebugMessages, log attempts and alert the user of this *non-fatal error*
-				if (options.showDebugMessages) {
-					if ( tries.length === 1) {
-						_log(msg, false);
-						_log(lastTry, false);
-					}
-					_log(thisTry, false);
+				// log attempts and alert the user of this *non-fatal error* (if showDebugMessages)
+				if ( tries.length === 1) {
+					_log(msg, false, true);
+					_log(lastTry, false, true);
 				}
-
+				_log(thisTry, false, true);
 				// after 4 tries, is as close as its gonna get!
 				if (tries.length > 3) break;
 
@@ -3714,7 +4070,7 @@ $.fn.layout = function (opts) {
 
 			if (s.isVisible && $P.is(":visible")) {
 				// reposition the resizer-bar
-				if ($R) $R.css( side, size + sC[inset] );
+				if ($R) $R.css( side, size + sC.inset[side] );
 				// resize the content-div
 				sizeContent(pane);
 			}
@@ -3738,16 +4094,16 @@ $.fn.layout = function (opts) {
 			}
 
 			// DEBUG - ALERT user/developer so they know there was a sizing problem
-			if (options.showDebugMessages && tries.length > 1)
-				_log(msg +'\nSee the Error Console for details.', true);
+			if (tries.length > 1)
+				_log(msg +'\nSee the Error Console for details.', true, true);
 		}
 	}
 
 	/**
-	* @see  initPanes(), sizePane(), resizeAll(), open(), close(), hide()
-	* @param {string}	panes					The pane(s) being resized, comma-delmited string
-	* @param {boolean=}	[skipCallback=false]	Should the onresize callback be run?
-	* @param {boolean=}	[force=false]
+	* @see  initPanes(), sizePane(), 	resizeAll(), open(), close(), hide()
+	* @param {(Array.<string>|string)}	panes					The pane(s) being resized, comma-delmited string
+	* @param {boolean=}					[skipCallback=false]	Should the onresize callback be run?
+	* @param {boolean=}					[force=false]
 	*/
 ,	sizeMidPanes = function (panes, skipCallback, force) {
 		panes = (panes ? panes : "east,west,center").split(",");
@@ -3762,27 +4118,36 @@ $.fn.layout = function (opts) {
 			,	isCenter= (pane=="center")
 			,	hasRoom	= true
 			,	CSS		= {}
+			//	if pane is not visible, show it invisibly NOW rather than for *each call* in this script
+			,	visCSS	= $.layout.showInvisibly($P)
+
 			,	newCenter	= calcNewCenterPaneDims()
 			;
+
 			// update pane-state dimensions
 			$.extend(s, elDims($P));
 
 			if (pane === "center") {
-				if (!force && s.isVisible && newCenter.width === s.outerWidth && newCenter.height === s.outerHeight)
+				if (!force && s.isVisible && newCenter.width === s.outerWidth && newCenter.height === s.outerHeight) {
+					$P.css(visCSS);
 					return true; // SKIP - pane already the correct size
+				}
 				// set state for makePaneFit() logic
 				$.extend(s, cssMinDims(pane), {
 					maxWidth:	newCenter.width
 				,	maxHeight:	newCenter.height
 				});
 				CSS = newCenter;
+				s.newWidth	= CSS.width;
+				s.newHeight	= CSS.height;
 				// convert OUTER width/height to CSS width/height 
 				CSS.width	= cssW($P, CSS.width);
 				// NEW - allow pane to extend 'below' visible area rather than hide it
 				CSS.height	= cssH($P, CSS.height);
 				hasRoom		= CSS.width >= 0 && CSS.height >= 0; // height >= 0 = ALWAYS TRUE NOW
+
 				// during layout init, try to shrink east/west panes to make room for center
-				if (!state.initialized && o.minWidth > s.outerWidth) {
+				if (!state.initialized && o.minWidth > newCenter.width) {
 					var
 						reqPx	= o.minWidth - s.outerWidth
 					,	minE	= options.east.minSize || 0
@@ -3802,12 +4167,13 @@ $.fn.layout = function (opts) {
 					}
 					// IF we found enough extra space, then resize the border panes as calculated
 					if (reqPx === 0) {
-						if (sizeE != minE)
-							sizePane('east', newE, true, force, true); // true = skipCallback/noAnimation - initPanes will handle when done
-						if (sizeW != minW)
-							sizePane('west', newW, true, force, true);
+						if (sizeE && sizeE != minE)
+							sizePane('east', newE, true, true, force); // true = skipCallback/noAnimation - initPanes will handle when done
+						if (sizeW && sizeW != minW)
+							sizePane('west', newW, true, true, force); // true = skipCallback/noAnimation
 						// now start over!
 						sizeMidPanes('center', skipCallback, force);
+						$P.css(visCSS);
 						return; // abort this loop
 					}
 				}
@@ -3816,11 +4182,14 @@ $.fn.layout = function (opts) {
 				// set state.min/maxWidth/Height for makePaneFit() logic
 				if (s.isVisible && !s.noVerticalRoom)
 					$.extend(s, elDims($P), cssMinDims(pane))
-				if (!force && !s.noVerticalRoom && newCenter.height === s.outerHeight)
+				if (!force && !s.noVerticalRoom && newCenter.height === s.outerHeight) {
+					$P.css(visCSS);
 					return true; // SKIP - pane already the correct size
+				}
 				// east/west have same top, bottom & height as center
 				CSS.top		= newCenter.top;
 				CSS.bottom	= newCenter.bottom;
+				s.newSize	= newCenter.height
 				// NEW - allow pane to extend 'below' visible area rather than hide it
 				CSS.height	= cssH($P, newCenter.height);
 				s.maxHeight	= CSS.height;
@@ -3834,7 +4203,8 @@ $.fn.layout = function (opts) {
 					_runCallbacks("onresize_start", pane);
 
 				$P.css(CSS); // apply the CSS to pane
-				sizeHandles(pane); // also update resizer length
+				if (pane !== "center")
+					sizeHandles(pane); // also update resizer length
 				if (s.noRoom && !s.isClosed && !s.isHidden)
 					makePaneFit(pane); // will re-open/show auto-closed/hidden pane
 				if (s.isVisible) {
@@ -3845,6 +4215,13 @@ $.fn.layout = function (opts) {
 			else if (!s.noRoom && s.isVisible) // no room for pane
 				makePaneFit(pane); // will hide or close pane
 
+			// reset visibility, if necessary
+			$P.css(visCSS);
+
+			delete s.newSize;
+			delete s.newWidth;
+			delete s.newHeight;
+
 			if (!s.isVisible)
 				return true; // DONE - next pane
 
@@ -3852,10 +4229,11 @@ $.fn.layout = function (opts) {
 			* Extra CSS for IE6 or IE7 in Quirks-mode - add 'width' to NORTH/SOUTH panes
 			* Normally these panes have only 'left' & 'right' positions so pane auto-sizes
 			* ALSO required when pane is an IFRAME because will NOT default to 'full width'
+			*	TODO: Can I use width:100% for a north/south iframe?
+			*	TODO: Sounds like a job for $P.outerWidth( sC.innerWidth ) SETTER METHOD
 			*/
 			if (pane === "center") { // finished processing midPanes
-				var b = $.layout.browser;
-				var fix = b.isIE6 || (b.msie && !$.support.boxModel);
+				var fix = browser.isIE6 || !browser.boxModel;
 				if ($Ps.north && (fix || state.north.tagName=="IFRAME")) 
 					$Ps.north.css("width", cssW($Ps.north, sC.innerWidth));
 				if ($Ps.south && (fix || state.south.tagName=="IFRAME"))
@@ -3871,20 +4249,36 @@ $.fn.layout = function (opts) {
 
 	/**
 	* @see  window.onresize(), callbacks or custom code
+	* @param {(Object|boolean)=}	evt_or_refresh	If 'true', then also reset pane-positioning
 	*/
-,	resizeAll = function () {
-		if (!state.initialized) {
-			_initLayoutElements();
-			return; // no need to resize since we just initialized!
-		}
+,	resizeAll = function (evt_or_refresh) {
 		var	oldW	= sC.innerWidth
 		,	oldH	= sC.innerHeight
 		;
+		// stopPropagation if called by trigger("layoutdestroy") - use evtPane utility 
+		evtPane(evt_or_refresh);
+
 		// cannot size layout when 'container' is hidden or collapsed
-		if (!$N.is(":visible:") ) return;
-		$.extend( state.container, elDims( $N ) ); // UPDATE container dimensions
+		if (!$N.is(":visible")) return;
+
+		if (!state.initialized) {
+			_initLayoutElements();
+			return; // no need to resize since we just initialized!
+		}
+
+		if (evt_or_refresh === true && $.isPlainObject(options.outset)) {
+			// update container CSS in case outset option has changed
+			$N.css( options.outset );
+		}
+		// UPDATE container dimensions
+		$.extend(sC, elDims( $N, options.inset ));
 		if (!sC.outerHeight) return;
 
+		// if 'true' passed, refresh pane & handle positioning too
+		if (evt_or_refresh === true) {
+			setPanePosition();
+		}
+
 		// onresizeall_start will CANCEL resizing if returns false
 		// state.container has already been set, so user can access this info for calcuations
 		if (false === _runCallbacks("onresizeall_start")) return false;
@@ -3892,28 +4286,25 @@ $.fn.layout = function (opts) {
 		var	// see if container is now 'smaller' than before
 			shrunkH	= (sC.innerHeight < oldH)
 		,	shrunkW	= (sC.innerWidth < oldW)
-		,	$P, o, s, dir
+		,	$P, o, s
 		;
 		// NOTE special order for sizing: S-N-E-W
 		$.each(["south","north","east","west"], function (i, pane) {
 			if (!$Ps[pane]) return; // no pane - SKIP
-			s	= state[pane];
-			o	= options[pane];
-			dir	= _c[pane].dir;
-
-			if (o.autoResize && s.size != o.size) // resize pane to original size set in options
-				sizePane(pane, o.size, true, true, true); // true=skipCallback/forceResize/noAnimation
+			o = options[pane];
+			s = state[pane];
+			if (s.autoResize && s.size != o.size) // resize pane to original size set in options
+				sizePane(pane, o.size, true, true, true); // true=skipCallback/noAnimation/forceResize
 			else {
 				setSizeLimits(pane);
 				makePaneFit(pane, false, true, true); // true=skipCallback/forceResize
 			}
 		});
 
-		sizeMidPanes("", true, true); // true=skipCallback, true=forceResize
+		sizeMidPanes("", true, true); // true=skipCallback/forceResize
 		sizeHandles(); // reposition the toggler elements
 
 		// trigger all individual pane callbacks AFTER layout has finished resizing
-		o = options; // reuse alias
 		$.each(_c.allPanes, function (i, pane) {
 			$P = $Ps[pane];
 			if (!$P) return; // SKIP
@@ -3928,42 +4319,29 @@ $.fn.layout = function (opts) {
 	/**
 	* Whenever a pane resizes or opens that has a nested layout, trigger resizeAll
 	*
-	* @param {string}	pane		The pane just resized or opened
+	* @param {(string|Object)}	evt_or_pane		The pane just resized or opened
 	*/
-,	resizeChildLayout = function (evt_or_pane) {
+,	resizeChildren = function (evt_or_pane, skipRefresh) {
 		var	pane = evtPane.call(this, evt_or_pane);
-		if (!options[pane].resizeChildLayout) return;
-		var	$P	= $Ps[pane]
-		,	$C	= $Cs[pane]
-		,	d	= "layout"
-		,	P	= Instance[pane]
-		,	L	= children[pane]
-		;
-		// user may have manually set EITHER instance pointer, so handle that
-		if (P.child && !L) {
-			// have to reverse the pointers!
-			var el = P.child.container;
-			L = children[pane] = (el ? el.data(d) : 0) || null; // set pointer _directly_ to layout instance
-		}
-
-		// if a layout-pointer exists, see if child has been destroyed
-		if (L && L.destroyed)
-			L = children[pane] = null; // clear child pointers
-		// no child layout pointer is set - see if there is a child layout NOW
-		if (!L)	L = children[pane] = $P.data(d) || ($C ? $C.data(d) : 0) || null; // set/update child pointers
 
-		// ALWAYS refresh the pane.child alias
-		P.child = children[pane];
+		if (!options[pane].resizeChildren) return;
 
-		if (L) L.resizeAll();
+		// ensure the pane-children are up-to-date
+		if (!skipRefresh) refreshChildren( pane );
+		var pC = children[pane];
+		if ($.isPlainObject( pC )) {
+			// resize one or more children
+			$.each( pC, function (key, child) {
+				if (!child.destroyed) child.resizeAll();
+			});
+		}
 	}
 
-
 	/**
 	* IF pane has a content-div, then resize all elements inside pane to fit pane-height
 	*
-	* @param {string=}	[panes=""]		The pane(s) being resized
-	* @param {boolean=}	[remeasure=false]	Should the content (header/footer) be remeasured?
+	* @param {(string|Object)}	evt_or_panes		The pane(s) being resized
+	* @param {boolean=}			[remeasure=false]	Should the content (header/footer) be remeasured?
 	*/
 ,	sizeContent = function (evt_or_panes, remeasure) {
 		if (!isInitialized()) return;
@@ -4020,7 +4398,7 @@ $.fn.layout = function (opts) {
 			function _measure () {
 				var
 					ignore	= options[pane].contentIgnoreSelector
-				,	$Fs		= $C.nextAll().not(ignore || ':lt(0)') // not :lt(0) = ALL
+				,	$Fs		= $C.nextAll().not(".ui-layout-mask").not(ignore || ":lt(0)") // not :lt(0) = ALL
 				,	$Fs_vis	= $Fs.filter(':visible')
 				,	$F		= $Fs_vis.filter(':last')
 				;
@@ -4047,7 +4425,7 @@ $.fn.layout = function (opts) {
 	* Called every time a pane is opened, closed, or resized to slide the togglers to 'center' and adjust their length if necessary
 	*
 	* @see  initHandles(), open(), close(), resizeAll()
-	* @param {string=}	[panes=""]		The pane(s) being resized
+	* @param {(string|Object)=}		evt_or_panes	The pane(s) being resized
 	*/
 ,	sizeHandles = function (evt_or_panes) {
 		var panes = evtPane.call(this, evt_or_panes)
@@ -4092,7 +4470,7 @@ $.fn.layout = function (opts) {
 				$R.css({
 					width:	cssW($R, paneLen) // account for borders & padding
 				,	height:	cssH($R, spacing) // ditto
-				,	left:	left > -9999 ? left : sC.insetLeft // handle offscreen-panes
+				,	left:	left > -9999 ? left : sC.inset.left // handle offscreen-panes
 				});
 			}
 			else { // east/west
@@ -4101,7 +4479,7 @@ $.fn.layout = function (opts) {
 				$R.css({
 					height:	cssH($R, paneLen) // account for borders & padding
 				,	width:	cssW($R, spacing) // ditto
-				,	top:	sC.insetTop + getPaneSize("north", true) // TODO: what if no North pane?
+				,	top:	sC.inset.top + getPaneSize("north", true) // TODO: what if no North pane?
 				//,	top:	$.layout.cssNum($Ps["center"], "top")
 				});
 			}
@@ -4176,7 +4554,7 @@ $.fn.layout = function (opts) {
 			}
 
 			// DONE measuring and sizing this resizer/toggler, so can be 'hidden' now
-			if (!state.initialized && (o.initHidden || s.noRoom)) {
+			if (!state.initialized && (o.initHidden || s.isHidden)) {
 				$R.hide();
 				if ($T) $T.hide();
 			}
@@ -4185,7 +4563,7 @@ $.fn.layout = function (opts) {
 
 
 	/**
-	* @param {string}	pane
+	* @param {(string|Object)}	evt_or_pane
 	*/
 ,	enableClosable = function (evt_or_pane) {
 		if (!isInitialized()) return;
@@ -4198,12 +4576,12 @@ $.fn.layout = function (opts) {
 		$T	.bind("click."+ sID, function(evt){ evt.stopPropagation(); toggle(pane); })
 			.css("visibility", "visible")
 			.css("cursor", "pointer")
-			.attr("title", state[pane].isClosed ? o.togglerTip_closed : o.togglerTip_open) // may be blank
+			.attr("title", state[pane].isClosed ? o.tips.Open : o.tips.Close) // may be blank
 			.show();
 	}
 	/**
-	* @param {string}	pane
-	* @param {boolean=}	[hide=false]
+	* @param {(string|Object)}	evt_or_pane
+	* @param {boolean=}			[hide=false]
 	*/
 ,	disableClosable = function (evt_or_pane, hide) {
 		if (!isInitialized()) return;
@@ -4222,7 +4600,7 @@ $.fn.layout = function (opts) {
 
 
 	/**
-	* @param {string}	pane
+	* @param {(string|Object)}	evt_or_pane
 	*/
 ,	enableSlidable = function (evt_or_pane) {
 		if (!isInitialized()) return;
@@ -4231,11 +4609,11 @@ $.fn.layout = function (opts) {
 		;
 		if (!$R || !$R.data('draggable')) return;
 		options[pane].slidable = true; 
-		if (s.isClosed)
-			bindStartSlidingEvent(pane, true);
+		if (state[pane].isClosed)
+			bindStartSlidingEvents(pane, true);
 	}
 	/**
-	* @param {string}	pane
+	* @param {(string|Object)}	evt_or_pane
 	*/
 ,	disableSlidable = function (evt_or_pane) {
 		if (!isInitialized()) return;
@@ -4247,7 +4625,7 @@ $.fn.layout = function (opts) {
 		if (state[pane].isSliding)
 			close(pane, false, true);
 		else {
-			bindStartSlidingEvent(pane, false);
+			bindStartSlidingEvents(pane, false);
 			$R	.css("cursor", "default")
 				.attr("title", "");
 			removeHover(null, $R[0]); // in case currently hovered
@@ -4256,7 +4634,7 @@ $.fn.layout = function (opts) {
 
 
 	/**
-	* @param {string}	pane
+	* @param {(string|Object)}	evt_or_pane
 	*/
 ,	enableResizable = function (evt_or_pane) {
 		if (!isInitialized()) return;
@@ -4269,10 +4647,10 @@ $.fn.layout = function (opts) {
 		$R.draggable("enable");
 		if (!state[pane].isClosed)
 			$R	.css("cursor", o.resizerCursor)
-			 	.attr("title", o.resizerTip);
+			 	.attr("title", o.tips.Resize);
 	}
 	/**
-	* @param {string}	pane
+	* @param {(string|Object)}	evt_or_pane
 	*/
 ,	disableResizable = function (evt_or_pane) {
 		if (!isInitialized()) return;
@@ -4292,8 +4670,8 @@ $.fn.layout = function (opts) {
 	* Move a pane from source-side (eg, west) to target-side (eg, east)
 	* If pane exists on target-side, move that to source-side, ie, 'swap' the panes
 	*
-	* @param {string}	pane1		The pane/edge being swapped
-	* @param {string}	pane2		ditto
+	* @param {(string|Object)}	evt_or_pane1	The pane/edge being swapped
+	* @param {string}			pane2			ditto
 	*/
 ,	swapPanes = function (evt_or_pane1, pane2) {
 		if (!isInitialized()) return;
@@ -4372,10 +4750,8 @@ $.fn.layout = function (opts) {
 			,	C		= oPane.C
 			,	oldPane = oPane.pane
 			,	c		= _c[pane]
-			,	side	= c.side.toLowerCase()
-			,	inset	= "inset"+ c.side
 			//	save pane-options that should be retained
-			,	s		= $.extend({}, state[pane])
+			,	s		= $.extend(true, {}, state[pane])
 			,	o		= options[pane]
 			//	RETAIN side-specific FX Settings - more below
 			,	fx		= { resizerCursor: o.resizerCursor }
@@ -4399,8 +4775,8 @@ $.fn.layout = function (opts) {
 			$Cs[pane] = C ? $(C) : false;
 
 			// set options and state
-			options[pane]	= $.extend({}, oPane.options, fx);
-			state[pane]		= $.extend({}, oPane.state);
+			options[pane]	= $.extend(true, {}, oPane.options, fx);
+			state[pane]		= $.extend(true, {}, oPane.state);
 
 			// change classNames on the pane, eg: ui-layout-pane-east ==> ui-layout-pane-west
 			re = new RegExp(o.paneClass +"-"+ oldPane, "g");
@@ -4418,7 +4794,7 @@ $.fn.layout = function (opts) {
 				manualSizePane(pane, size, true, true); // true/true = skipCallback/noAnimation
 			}
 			else // move the resizer here
-				$Rs[pane].css(side, sC[inset] + (state[pane].isVisible ? getPaneSize(pane) : 0));
+				$Rs[pane].css(c.side, sC.inset[c.side] + (state[pane].isVisible ? getPaneSize(pane) : 0));
 
 
 			// ADD CLASSNAMES & SLIDE-BINDINGS
@@ -4426,7 +4802,7 @@ $.fn.layout = function (opts) {
 				setAsOpen(pane, true); // true = skipCallback
 			else {
 				setAsClosed(pane);
-				bindStartSlidingEvent(pane, true); // will enable events IF option is set
+				bindStartSlidingEvents(pane, true); // will enable events IF option is set
 			}
 
 			// DESTROY the object
@@ -4560,11 +4936,11 @@ $.fn.layout = function (opts) {
 			curCSS.overflow = of;
 			newCSS.overflow = "visible";
 		}
-		if (ofX && !ofX.match(/visible|auto/)) {
+		if (ofX && !ofX.match(/(visible|auto)/)) {
 			curCSS.overflowX = ofX;
 			newCSS.overflowX = "visible";
 		}
-		if (ofY && !ofY.match(/visible|auto/)) {
+		if (ofY && !ofY.match(/(visible|auto)/)) {
 			curCSS.overflowY = ofX;
 			newCSS.overflowY = "visible";
 		}
@@ -4626,9 +5002,7 @@ $.fn.layout = function (opts) {
 	// validate that container exists
 	var $N = $(this).eq(0); // FIRST matching Container element
 	if (!$N.length) {
-		if (options.showErrorMessages)
-			_log( lang.errContainerMissing, true );
-		return null;
+		return _log( options.errors.containerMissing );
 	};
 
 	// Users retrieve Instance of a layout with: $N.layout() OR $N.data("layout")
@@ -4674,11 +5048,14 @@ $.fn.layout = function (opts) {
 	,	sizePane:			manualSizePane	// method - pass a 'pane' AND an 'outer-size' in pixels or percent, or 'auto'
 	,	sizeContent:		sizeContent		// method - pass a 'pane'
 	,	swapPanes:			swapPanes		// method - pass TWO 'panes' - will swap them
+	,	showMasks:			showMasks		// method - pass a 'pane' OR list of panes - default = all panes with mask option set
+	,	hideMasks:			hideMasks		// method - ditto'
 	//	pane element methods
 	,	initContent:		initContent		// method - ditto
 	,	addPane:			addPane			// method - pass a 'pane'
 	,	removePane:			removePane		// method - pass a 'pane' to remove from layout, add 'true' to delete the pane-elem
-	,	createChildLayout:	createChildLayout// method - pass a 'pane' and (optional) layout-options (OVERRIDES options[pane].childOptions
+	,	createChildren:		createChildren	// method - pass a 'pane' and (optional) layout-options (OVERRIDES options[pane].children
+	,	refreshChildren:	refreshChildren	// method - pass a 'pane' and a layout-instance
 	//	special pane option setting
 	,	enableClosable:		enableClosable	// method - pass a 'pane'
 	,	disableClosable:	disableClosable	// method - ditto
@@ -4697,8 +5074,8 @@ $.fn.layout = function (opts) {
 	,	runCallbacks:		_runCallbacks	// method - pass evtName & pane (if a pane-event), eg: trigger("onopen", "west")
 	//	alias collections of options, state and children - created in addPane and extended elsewhere
 	,	hasParentLayout:	false			// set by initContainer()
-	,	children:			children		// pointers to child-layouts, eg: Instance.children["west"]
-	,	north:				false			// alias group: { name: pane, pane: $Ps[pane], options: options[pane], state: state[pane], child: children[pane] }
+	,	children:			children		// pointers to child-layouts, eg: Instance.children.west.layoutName
+	,	north:				false			// alias group: { name: pane, pane: $Ps[pane], options: options[pane], state: state[pane], children: children[pane] }
 	,	south:				false			// ditto
 	,	west:				false			// ditto
 	,	east:				false			// ditto
@@ -4714,22 +5091,29 @@ $.fn.layout = function (opts) {
 }
 
 
+})( jQuery );
+// END Layout - keep internal vars internal!
+
+
+
+// START Plugins - shared wrapper, no global vars
+(function ($) {
 
 
 /**
  * jquery.layout.state 1.0
  * $Date: 2011-07-16 08:00:00 (Sat, 16 July 2011) $
  *
- * Copyright (c) 2010 
+ * Copyright (c) 2012 
  *   Kevin Dalman (http://allpro.net)
  *
  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  *
- * @dependancies: UI Layout 1.3.0.rc30.1 or higher
- * @dependancies: $.ui.cookie (above)
+ * @requires: UI Layout 1.3.0.rc30.1 or higher
+ * @requires: $.ui.cookie (above)
  *
- * @support: http://groups.google.com/group/jquery-ui-layout
+ * @see: http://groups.google.com/group/jquery-ui-layout
  */
 /*
  *	State-management options stored in options.stateManagement, which includes a .cookie hash
@@ -4776,8 +5160,7 @@ $.ui.cookie = {
 	acceptsCookies: !!navigator.cookieEnabled
 
 ,	read: function (name) {
-		var
-			c		= document.cookie
+		var	c		= document.cookie
 		,	cs		= c ? c.split(';') : []
 		,	pair	// loop var
 		;
@@ -4785,22 +5168,25 @@ $.ui.cookie = {
 			pair = $.trim(cs[i]).split('='); // name=value pair
 			if (pair[0] == name) // found the layout cookie
 				return decodeURIComponent(pair[1]);
-
 		}
 		return null;
 	}
 
 ,	write: function (name, val, cookieOpts) {
-		var
-			params	= ''
-		,	date	= ''
+		var	params	= ""
+		,	date	= ""
 		,	clear	= false
 		,	o		= cookieOpts || {}
-		,	x		= o.expires
+		,	x		= o.expires  || null
+		,	t		= $.type(x)
 		;
-		if (x && x.toUTCString)
+		if (t === "date")
 			date = x;
-		else if (x === null || typeof x === 'number') {
+		else if (t === "string" && x > 0) {
+			x = parseInt(x,10);
+			t = "number";
+		}
+		if (t === "number") {
 			date = new Date();
 			if (x > 0)
 				date.setDate(date.getDate() + x);
@@ -4809,15 +5195,15 @@ $.ui.cookie = {
 				clear = true;
 			}
 		}
-		if (date)		params += ';expires='+ date.toUTCString();
-		if (o.path)		params += ';path='+ o.path;
-		if (o.domain)	params += ';domain='+ o.domain;
-		if (o.secure)	params += ';secure';
-		document.cookie = name +'='+ (clear ? "" : encodeURIComponent( val )) + params; // write or clear cookie
+		if (date)		params += ";expires="+ date.toUTCString();
+		if (o.path)		params += ";path="+ o.path;
+		if (o.domain)	params += ";domain="+ o.domain;
+		if (o.secure)	params += ";secure";
+		document.cookie = name +"="+ (clear ? "" : encodeURIComponent( val )) + params; // write or clear cookie
 	}
 
 ,	clear: function (name) {
-		$.ui.cookie.write(name, '', {expires: -1});
+		$.ui.cookie.write(name, "", {expires: -1});
 	}
 
 };
@@ -4840,9 +5226,11 @@ $.layout.plugins.stateManagement = true;
 //	Add State-Management options to layout.defaults
 $.layout.config.optionRootKeys.push("stateManagement");
 $.layout.defaults.stateManagement = {
-	enabled:	false	// true = enable state-management, even if not using cookies
-,	autoSave:	true	// Save a state-cookie when page exits?
-,	autoLoad:	true	// Load the state-cookie when Layout inits?
+	enabled:		false	// true = enable state-management, even if not using cookies
+,	autoSave:		true	// Save a state-cookie when page exits?
+,	autoLoad:		true	// Load the state-cookie when Layout inits?
+,	animateLoad:	true	// animate panes when loading state into an active layout
+,	includeChildren: true	// recurse into child layouts to include their state as well
 	// List state-data to save - must be pane-specific
 ,	stateKeys:	"north.size,south.size,east.size,west.size,"+
 				"north.isClosed,south.isClosed,east.isClosed,west.isClosed,"+
@@ -4850,7 +5238,7 @@ $.layout.defaults.stateManagement = {
 ,	cookie: {
 		name:	""	// If not specified, will use Layout.name, else just "Layout"
 	,	domain:	""	// blank = current domain
-	,	path:	""	// blank = current page, '/' = entire website
+	,	path:	""	// blank = current page, "/" = entire website
 	,	expires: ""	// 'days' to keep cookie - leave blank for 'session cookie'
 	,	secure:	false
 	}
@@ -4870,13 +5258,13 @@ $.layout.state = {
 	 *
 	 * @param {Object}			inst
 	 * @param {(string|Array)=}	keys
-	 * @param {Object=}			opts
+	 * @param {Object=}			cookieOpts
 	 */
 	saveCookie: function (inst, keys, cookieOpts) {
 		var o	= inst.options
-		,	oS	= o.stateManagement
-		,	oC	= $.extend(true, {}, oS.cookie, cookieOpts || null)
-		,	data = inst.state.stateData = inst.readState( keys || oS.stateKeys ) // read current panes-state
+		,	sm	= o.stateManagement
+		,	oC	= $.extend(true, {}, sm.cookie, cookieOpts || null)
+		,	data = inst.state.stateData = inst.readState( keys || sm.stateKeys ) // read current panes-state
 		;
 		$.ui.cookie.write( oC.name || o.name || "Layout", $.layout.state.encodeJSON(data), oC );
 		return $.extend(true, {}, data); // return COPY of state.stateData data
@@ -4917,7 +5305,7 @@ $.layout.state = {
 		}
 		return c;
 	}
-	
+
 	/**
 	 * Update layout options from the cookie, if one exists
 	 *
@@ -4925,52 +5313,107 @@ $.layout.state = {
 	 * @param {Object=}		stateData
 	 * @param {boolean=}	animate
 	 */
-,	loadState: function (inst, stateData, animate) {
-		stateData = $.layout.transformData( stateData ); // panes = default subkey
-		if ($.isEmptyObject( stateData )) return;
-		$.extend(true, inst.options, stateData); // update layout options
-		// if layout has already been initialized, then UPDATE layout state
-		if (inst.state.initialized) {
-			var pane, vis, o, s, h, c
-			,	noAnimate = (animate===false)
+,	loadState: function (inst, data, opts) {
+		if (!$.isPlainObject( data ) || $.isEmptyObject( data )) return;
+
+		// normalize data & cache in the state object
+		data = inst.state.stateData = $.layout.transformData( data ); // panes = default subkey
+
+		// add missing/default state-restore options
+		var smo = inst.options.stateManagement;
+		opts = $.extend({
+			animateLoad:		false //smo.animateLoad
+		,	includeChildren:	smo.includeChildren
+		}, opts );
+
+		if (!inst.state.initialized) {
+			/*
+			 *	layout NOT initialized, so just update its options
+			 */
+			// MUST remove pane.children keys before applying to options
+			// use a copy so we don't remove keys from original data
+			var o = $.extend(true, {}, data);
+			//delete o.center; // center has no state-data - only children
+			$.each($.layout.config.allPanes, function (idx, pane) {
+				if (o[pane]) delete o[pane].children;		   
+			 });
+			// update CURRENT layout-options with saved state data
+			$.extend(true, inst.options, o);
+		}
+		else {
+			/*
+			 *	layout already initialized, so modify layout's configuration
+			 */
+			var noAnimate = !opts.animateLoad
+			,	o, c, h, state, open
 			;
 			$.each($.layout.config.borderPanes, function (idx, pane) {
-				state = inst.state[pane];
-				o = stateData[ pane ];
-				if (typeof o != 'object') return; // no key, continue
+				o = data[ pane ];
+				if (!$.isPlainObject( o )) return; // no key, skip pane
+
 				s	= o.size;
 				c	= o.initClosed;
 				h	= o.initHidden;
-				vis	= state.isVisible;
+				ar	= o.autoResize
+				state	= inst.state[pane];
+				open	= state.isVisible;
+
+				// reset autoResize
+				if (ar)
+					state.autoResize = ar;
 				// resize BEFORE opening
-				if (!vis)
-					inst.sizePane(pane, s, false, false);
+				if (!open)
+					inst._sizePane(pane, s, false, false, false); // false=skipCallback/noAnimation/forceResize
+				// open/close as necessary - DO NOT CHANGE THIS ORDER!
 				if (h === true)			inst.hide(pane, noAnimate);
-				else if (c === false)	inst.open (pane, false, noAnimate);
 				else if (c === true)	inst.close(pane, false, noAnimate);
+				else if (c === false)	inst.open (pane, false, noAnimate);
 				else if (h === false)	inst.show (pane, false, noAnimate);
 				// resize AFTER any other actions
-				if (vis)
-					inst.sizePane(pane, s, false, noAnimate); // animate resize if option passed
+				if (open)
+					inst._sizePane(pane, s, false, false, noAnimate); // animate resize if option passed
 			});
-		};
+
+			/*
+			 *	RECURSE INTO CHILD-LAYOUTS
+			 */
+			if (opts.includeChildren) {
+				var paneStateChildren, childState;
+				$.each(inst.children, function (pane, paneChildren) {
+					paneStateChildren = data[pane] ? data[pane].children : 0;
+					if (paneStateChildren && paneChildren) {
+						$.each(paneChildren, function (stateKey, child) {
+							childState = paneStateChildren[stateKey];
+							if (child && childState)
+								child.loadState( childState );
+						});
+					}
+				});
+			}
+		}
 	}
 
 	/**
 	 * Get the *current layout state* and return it as a hash
 	 *
-	 * @param {Object=}			inst
-	 * @param {(string|Array)=}	keys
+	 * @param {Object=}		inst	// Layout instance to get state for
+	 * @param {object=}		[opts]	// State-Managements override options
 	 */
-,	readState: function (inst, keys) {
-		var
-			data	= {}
+,	readState: function (inst, opts) {
+		// backward compatility
+		if ($.type(opts) === 'string') opts = { keys: opts };
+		if (!opts) opts = {};
+		var	sm		= inst.options.stateManagement
+		,	ic		= opts.includeChildren
+		,	recurse	= ic !== undefined ? ic : sm.includeChildren
+		,	keys	= opts.stateKeys || sm.stateKeys
 		,	alt		= { isClosed: 'initClosed', isHidden: 'initHidden' }
 		,	state	= inst.state
 		,	panes	= $.layout.config.allPanes
+		,	data	= {}
 		,	pair, pane, key, val
+		,	ps, pC, child, array, count, branch
 		;
-		if (!keys) keys = inst.options.stateManagement.stateKeys; // if called by user
 		if ($.isArray(keys)) keys = keys.join(",");
 		// convert keys to an array and change delimiters from '__' to '.'
 		keys = keys.replace(/__/g, ".").split(',');
@@ -4986,6 +5429,29 @@ $.layout.state = {
 				val = true; // if sliding, then *really* isClosed
 			( data[pane] || (data[pane]={}) )[ alt[key] ? alt[key] : key ] = val;
 		}
+
+		// recurse into the child-layouts for each pane
+		if (recurse) {
+			$.each(panes, function (idx, pane) {
+				pC = inst.children[pane];
+				ps = state.stateData[pane];
+				if ($.isPlainObject( pC ) && !$.isEmptyObject( pC )) {
+					// ensure a key exists for this 'pane', eg: branch = data.center
+					branch = data[pane] || (data[pane] = {});
+					if (!branch.children) branch.children = {};
+					$.each( pC, function (key, child) {
+						// ONLY read state from an initialize layout
+						if ( child.state.initialized )
+							branch.children[ key ] = $.layout.state.readState( child );
+						// if we have PREVIOUS (onLoad) state for this child-layout, KEEP IT!
+						else if ( ps && ps.children && ps.children[ key ] ) {
+							branch.children[ key ] = $.extend(true, {}, ps.children[ key ] );
+						}
+					});
+				}
+			});
+		}
+
 		return data;
 	}
 
@@ -4995,7 +5461,9 @@ $.layout.state = {
 ,	encodeJSON: function (JSON) {
 		return parse(JSON);
 		function parse (h) {
-			var D=[], i=0, k, v, t; // k = key, v = value
+			var D=[], i=0, k, v, t // k = key, v = value
+			,	a = $.isArray(h)
+			;
 			for (k in h) {
 				v = h[k];
 				t = typeof v;
@@ -5003,9 +5471,9 @@ $.layout.state = {
 					v = '"'+ v +'"';
 				else if (t == 'object')	// SUB-KEY - recurse into it
 					v = parse(v);
-				D[i++] = '"'+ k +'":'+ v;
+				D[i++] = (!a ? '"'+ k +'":' : '') + v;
 			}
-			return '{'+ D.join(',') +'}';
+			return (a ? '[' : '{') + D.join(',') + (a ? ']' : '}');
 		};
 	}
 
@@ -5020,7 +5488,10 @@ $.layout.state = {
 
 
 ,	_create: function (inst) {
-		var _	= $.layout.state;
+		var _	= $.layout.state
+		,	o	= inst.options
+		,	sm	= o.stateManagement
+		;
 		//	ADD State-Management plugin methods to inst
 		 $.extend( inst, {
 		//	readCookie - update options from cookie - returns hash of cookie data
@@ -5032,7 +5503,7 @@ $.layout.state = {
 		//	loadCookie - readCookie and use to loadState() - returns hash of cookie data
 		,	loadCookie:		function () { return _.loadCookie(inst); }
 		//	loadState - pass a hash of state to use to update options
-		,	loadState:		function (stateData, animate) { _.loadState(inst, stateData, animate); }
+		,	loadState:		function (stateData, opts) { _.loadState(inst, stateData, opts); }
 		//	readState - returns hash of current layout-state
 		,	readState:		function (keys) { return _.readState(inst, keys); }
 		//	add JSON utility methods too...
@@ -5043,23 +5514,43 @@ $.layout.state = {
 		// init state.stateData key, even if plugin is initially disabled
 		inst.state.stateData = {};
 
-		// read and load cookie-data per options
-		var oS = inst.options.stateManagement;
-		if (oS.enabled) {
-			if (oS.autoLoad) // update the options from the cookie
+		// autoLoad MUST BE one of: data-array, data-hash, callback-function, or TRUE
+		if ( !sm.autoLoad ) return;
+
+		//	When state-data exists in the autoLoad key USE IT,
+		//	even if stateManagement.enabled == false
+		if ($.isPlainObject( sm.autoLoad )) {
+			if (!$.isEmptyObject( sm.autoLoad )) {
+				inst.loadState( sm.autoLoad );
+			}
+		}
+		else if ( sm.enabled ) {
+			// update the options from cookie or callback
+			// if options is a function, call it to get stateData
+			if ($.isFunction( sm.autoLoad )) {
+				var d = {};
+				try {
+					d = sm.autoLoad( inst, inst.state, inst.options, inst.options.name || '' ); // try to get data from fn
+				} catch (e) {}
+				if (d && $.isPlainObject( d ) && !$.isEmptyObject( d ))
+					inst.loadState(d);
+			}
+			else // any other truthy value will trigger loadCookie
 				inst.loadCookie();
-			else // don't modify options - just store cookie data in state.stateData
-				inst.state.stateData = inst.readCookie();
 		}
 	}
 
 ,	_unload: function (inst) {
-		var oS = inst.options.stateManagement;
-		if (oS.enabled) {
-			if (oS.autoSave) // save a state-cookie automatically
+		var sm = inst.options.stateManagement;
+		if (sm.enabled && sm.autoSave) {
+			// if options is a function, call it to save the stateData
+			if ($.isFunction( sm.autoSave )) {
+				try {
+					sm.autoSave( inst, inst.state, inst.options, inst.options.name || '' ); // try to get data from fn
+				} catch (e) {}
+			}
+			else // any truthy value will trigger saveCookie
 				inst.saveCookie();
-			else // don't save a cookie, but do store state-data in state.stateData key
-				inst.state.stateData = inst.readState();
 		}
 	}
 
@@ -5076,15 +5567,15 @@ $.layout.onUnload.push( $.layout.state._unload );
  * jquery.layout.buttons 1.0
  * $Date: 2011-07-16 08:00:00 (Sat, 16 July 2011) $
  *
- * Copyright (c) 2010 
+ * Copyright (c) 2012 
  *   Kevin Dalman (http://allpro.net)
  *
  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  *
- * @dependancies: UI Layout 1.3.0.rc30.1 or higher
+ * @requires: UI Layout 1.3.0.rc30.1 or higher
  *
- * @support: http://groups.google.com/group/jquery-ui-layout
+ * @see: http://groups.google.com/group/jquery-ui-layout
  *
  * Docs: [ to come ]
  * Tips: [ to come ]
@@ -5098,8 +5589,6 @@ $.layout.defaults.autoBindCustomButtons = false;
 // Specify autoBindCustomButtons as a layout-option, NOT a pane-option
 $.layout.optionsMap.layout.push("autoBindCustomButtons");
 
-var lang = $.layout.language;
-
 /*
  *	Button methods
  */
@@ -5148,13 +5637,13 @@ $.layout.buttons = {
 ,	get: function (inst, selector, pane, action) {
 		var $E	= $(selector)
 		,	o	= inst.options
-		,	err	= o.showErrorMessages
+		,	err	= o.errors.addButtonError
 		;
 		if (!$E.length) { // element not found
-			if (err) $.layout.msg(lang.errButton + lang.selector +": "+ selector, true);
+			$.layout.msg(err +" "+ o.errors.selector +": "+ selector, true);
 		}
 		else if ($.inArray(pane, $.layout.config.borderPanes) < 0) { // invalid 'pane' sepecified
-			if (err) $.layout.msg(lang.errButton + lang.pane +": "+ pane, true);
+			$.layout.msg(err +" "+ o.errors.pane +": "+ pane, true);
 			$E = $("");  // NO BUTTON
 		}
 		else { // VALID
@@ -5214,7 +5703,7 @@ $.layout.buttons = {
 	*/
 ,	addOpen: function (inst, selector, pane, slide) {
 		$.layout.buttons.get(inst, selector, pane, "open")
-			.attr("title", lang.Open)
+			.attr("title", inst.options[pane].tips.Open)
 			.click(function (evt) {
 				inst.open(pane, !!slide);
 				evt.stopPropagation();
@@ -5231,7 +5720,7 @@ $.layout.buttons = {
 	*/
 ,	addClose: function (inst, selector, pane) {
 		$.layout.buttons.get(inst, selector, pane, "close")
-			.attr("title", lang.Close)
+			.attr("title", inst.options[pane].tips.Close)
 			.click(function (evt) {
 				inst.close(pane);
 				evt.stopPropagation();
@@ -5287,14 +5776,15 @@ $.layout.buttons = {
 		var updown = $Pin.attr("pin");
 		if (updown && doPin === (updown=="down")) return; // already in correct state
 		var
-			pin		= inst.options[pane].buttonClass +"-pin"
+			o		= inst.options[pane]
+		,	pin		= o.buttonClass +"-pin"
 		,	side	= pin +"-"+ pane
 		,	UP		= pin +"-up "+	side +"-up"
 		,	DN		= pin +"-down "+side +"-down"
 		;
 		$Pin
 			.attr("pin", doPin ? "down" : "up") // logic
-			.attr("title", doPin ? lang.Unpin : lang.Pin)
+			.attr("title", doPin ? o.tips.Unpin : o.tips.Pin)
 			.removeClass( doPin ? UP : DN ) 
 			.addClass( doPin ? DN : UP ) 
 		;
@@ -5312,7 +5802,7 @@ $.layout.buttons = {
 	*/
 ,	syncPinBtns: function (inst, pane, doPin) {
 		// REAL METHOD IS _INSIDE_ LAYOUT - THIS IS HERE JUST FOR REFERENCE
-		$.each(state[pane].pins, function (i, selector) {
+		$.each(inst.state[pane].pins, function (i, selector) {
 			$.layout.buttons.setPinState(inst, $(selector), pane, doPin);
 		});
 	}
@@ -5364,12 +5854,12 @@ $.layout.onLoad.push(  $.layout.buttons._load );
  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  *
- * @dependancies: UI Layout 1.3.0.rc30.1 or higher
+ * @requires: UI Layout 1.3.0.rc30.1 or higher
  *
- * @support: http://groups.google.com/group/jquery-ui-layout
+ * @see: http://groups.google.com/group/jquery-ui-layout
  *
- * @todo: Extend logic to handle other problematic zooming in browsers
- * @todo: Add hotkey/mousewheel bindings to _instantly_ respond to these zoom event
+ * TODO: Extend logic to handle other problematic zooming in browsers
+ * TODO: Add hotkey/mousewheel bindings to _instantly_ respond to these zoom event
  */
 
 // tell Layout that the plugin is available
@@ -5426,7 +5916,7 @@ $.layout.browserZoom = {
 		||	!b.msie
 		) return false; // don't need to track zoom
 
-		if (s.deviceXDPI)
+		if (s.deviceXDPI && s.systemXDPI) // syntax compiler hack
 			return calc(s.deviceXDPI, s.systemXDPI);
 		// everything below is just for future reference!
 		if (b.webkit && (r = d.body.getBoundingClientRect))
@@ -5445,5 +5935,4 @@ $.layout.browserZoom = {
 $.layout.onReady.push( $.layout.browserZoom._init );
 
 
-
 })( jQuery );