dot graph map
[kismet-logviewer.git] / logviewer / static / js / jquery.layout-latest.js
1 /**\r
2  * @preserve\r
3  * jquery.layout 1.4.4\r
4  * $Date: 2014-11-29 08:00:00 (Sat, 29 November 2014) $\r
5  * $Rev: 1.0404 $\r
6  *\r
7  * Copyright (c) 2014 Kevin Dalman (http://jquery-dev.com)\r
8  * Based on work by Fabrizio Balliano (http://www.fabrizioballiano.net)\r
9  *\r
10  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)\r
11  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.\r
12  *\r
13  * SEE: http://layout.jquery-dev.com/LICENSE.txt\r
14  *\r
15  * Changelog: http://layout.jquery-dev.com/changelog.cfm\r
16  *\r
17  * Docs: http://layout.jquery-dev.com/documentation.html\r
18  * Tips: http://layout.jquery-dev.com/tips.html\r
19  * Help: http://groups.google.com/group/jquery-ui-layout\r
20  */\r
21 \r
22 /* JavaDoc Info: http://code.google.com/closure/compiler/docs/js-for-compiler.html\r
23  * {!Object}    non-nullable type (never NULL)\r
24  * {?string}    nullable type (sometimes NULL) - default for {Object}\r
25  * {number=}    optional parameter\r
26  * {*}                  ALL types\r
27  */\r
28 /*      TODO for jQ 2.x \r
29  *      check $.fn.disableSelection - this is in jQuery UI 1.9.x\r
30  */\r
31 \r
32 // NOTE: For best readability, view with a fixed-width font and tabs equal to 4-chars\r
33 \r
34 ;(function ($) {\r
35 \r
36 // alias Math methods - used a lot!\r
37 var     min             = Math.min\r
38 ,       max             = Math.max\r
39 ,       round   = Math.floor\r
40 \r
41 ,       isStr   =  function (v) { return $.type(v) === "string"; }\r
42 \r
43         /**\r
44          * @param {!Object}                     Instance\r
45          * @param {Array.<string>}      a_fn\r
46          */\r
47 ,       runPluginCallbacks = function (Instance, a_fn) {\r
48                 if ($.isArray(a_fn))\r
49                         for (var i=0, c=a_fn.length; i<c; i++) {\r
50                                 var fn = a_fn[i];\r
51                                 try {\r
52                                         if (isStr(fn)) // 'name' of a function\r
53                                                 fn = eval(fn);\r
54                                         if ($.isFunction(fn))\r
55                                                 g(fn)( Instance );\r
56                                 } catch (ex) {}\r
57                         }\r
58                 function g (f) { return f; }; // compiler hack\r
59         }\r
60 ;\r
61 \r
62 /*\r
63  *      GENERIC $.layout METHODS - used by all layouts\r
64  */\r
65 $.layout = {\r
66 \r
67         version:        "1.4.4"\r
68 ,       revision:       1.0404 // eg: ver 1.4.4 = rev 1.0404 - major(n+).minor(nn)+patch(nn+)\r
69 \r
70         // $.layout.browser REPLACES $.browser\r
71 ,       browser:        {} // set below\r
72 \r
73         // *PREDEFINED* EFFECTS & DEFAULTS \r
74         // MUST list effect here - OR MUST set an fxSettings option (can be an empty hash: {})\r
75 ,       effects: {\r
76 \r
77         //      Pane Open/Close Animations\r
78                 slide: {\r
79                         all:    { duration:  "fast"     } // eg: duration: 1000, easing: "easeOutBounce"\r
80                 ,       north:  { direction: "up"       }\r
81                 ,       south:  { direction: "down"     }\r
82                 ,       east:   { direction: "right"}\r
83                 ,       west:   { direction: "left"     }\r
84                 }\r
85         ,       drop: {\r
86                         all:    { duration:  "slow"     }\r
87                 ,       north:  { direction: "up"       }\r
88                 ,       south:  { direction: "down"     }\r
89                 ,       east:   { direction: "right"}\r
90                 ,       west:   { direction: "left"     }\r
91                 }\r
92         ,       scale: {\r
93                         all:    { duration:     "fast"  }\r
94                 }\r
95         //      these are not recommended, but can be used\r
96         ,       blind:          {}\r
97         ,       clip:           {}\r
98         ,       explode:        {}\r
99         ,       fade:           {}\r
100         ,       fold:           {}\r
101         ,       puff:           {}\r
102 \r
103         //      Pane Resize Animations\r
104         ,       size: {\r
105                         all:    { easing:       "swing" }\r
106                 }\r
107         }\r
108 \r
109         // INTERNAL CONFIG DATA - DO NOT CHANGE THIS!\r
110 ,       config: {\r
111                 optionRootKeys: "effects,panes,north,south,west,east,center".split(",")\r
112         ,       allPanes:               "north,south,west,east,center".split(",")\r
113         ,       borderPanes:    "north,south,west,east".split(",")\r
114         ,       oppositeEdge: {\r
115                         north:  "south"\r
116                 ,       south:  "north"\r
117                 ,       east:   "west"\r
118                 ,       west:   "east"\r
119                 }\r
120         //      offscreen data\r
121         ,       offscreenCSS:   { left: "-99999px", right: "auto" } // used by hide/close if useOffscreenClose=true\r
122         ,       offscreenReset: "offscreenReset" // key used for data\r
123         //      CSS used in multiple places\r
124         ,       hidden:         { visibility: "hidden" }\r
125         ,       visible:        { visibility: "visible" }\r
126         //      layout element settings\r
127         ,       resizers: {\r
128                         cssReq: {\r
129                                 position:       "absolute"\r
130                         ,       padding:        0\r
131                         ,       margin:         0\r
132                         ,       fontSize:       "1px"\r
133                         ,       textAlign:      "left"  // to counter-act "center" alignment!\r
134                         ,       overflow:       "hidden" // prevent toggler-button from overflowing\r
135                         //      SEE $.layout.defaults.zIndexes.resizer_normal\r
136                         }\r
137                 ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true\r
138                                 background: "#DDD"\r
139                         ,       border:         "none"\r
140                         }\r
141                 }\r
142         ,       togglers: {\r
143                         cssReq: {\r
144                                 position:       "absolute"\r
145                         ,       display:        "block"\r
146                         ,       padding:        0\r
147                         ,       margin:         0\r
148                         ,       overflow:       "hidden"\r
149                         ,       textAlign:      "center"\r
150                         ,       fontSize:       "1px"\r
151                         ,       cursor:         "pointer"\r
152                         ,       zIndex:         1\r
153                         }\r
154                 ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true\r
155                                 background: "#AAA"\r
156                         }\r
157                 }\r
158         ,       content: {\r
159                         cssReq: {\r
160                                 position:       "relative" /* contain floated or positioned elements */\r
161                         }\r
162                 ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true\r
163                                 overflow:       "auto"\r
164                         ,       padding:        "10px"\r
165                         }\r
166                 ,       cssDemoPane: { // DEMO CSS - REMOVE scrolling from 'pane' when it has a content-div\r
167                                 overflow:       "hidden"\r
168                         ,       padding:        0\r
169                         }\r
170                 }\r
171         ,       panes: { // defaults for ALL panes - overridden by 'per-pane settings' below\r
172                         cssReq: {\r
173                                 position:       "absolute"\r
174                         ,       margin:         0\r
175                         //      $.layout.defaults.zIndexes.pane_normal\r
176                         }\r
177                 ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true\r
178                                 padding:        "10px"\r
179                         ,       background:     "#FFF"\r
180                         ,       border:         "1px solid #BBB"\r
181                         ,       overflow:       "auto"\r
182                         }\r
183                 }\r
184         ,       north: {\r
185                         side:                   "top"\r
186                 ,       sizeType:               "Height"\r
187                 ,       dir:                    "horz"\r
188                 ,       cssReq: {\r
189                                 top:            0\r
190                         ,       bottom:         "auto"\r
191                         ,       left:           0\r
192                         ,       right:          0\r
193                         ,       width:          "auto"\r
194                         //      height:         DYNAMIC\r
195                         }\r
196                 }\r
197         ,       south: {\r
198                         side:                   "bottom"\r
199                 ,       sizeType:               "Height"\r
200                 ,       dir:                    "horz"\r
201                 ,       cssReq: {\r
202                                 top:            "auto"\r
203                         ,       bottom:         0\r
204                         ,       left:           0\r
205                         ,       right:          0\r
206                         ,       width:          "auto"\r
207                         //      height:         DYNAMIC\r
208                         }\r
209                 }\r
210         ,       east: {\r
211                         side:                   "right"\r
212                 ,       sizeType:               "Width"\r
213                 ,       dir:                    "vert"\r
214                 ,       cssReq: {\r
215                                 left:           "auto"\r
216                         ,       right:          0\r
217                         ,       top:            "auto" // DYNAMIC\r
218                         ,       bottom:         "auto" // DYNAMIC\r
219                         ,       height:         "auto"\r
220                         //      width:          DYNAMIC\r
221                         }\r
222                 }\r
223         ,       west: {\r
224                         side:                   "left"\r
225                 ,       sizeType:               "Width"\r
226                 ,       dir:                    "vert"\r
227                 ,       cssReq: {\r
228                                 left:           0\r
229                         ,       right:          "auto"\r
230                         ,       top:            "auto" // DYNAMIC\r
231                         ,       bottom:         "auto" // DYNAMIC\r
232                         ,       height:         "auto"\r
233                         //      width:          DYNAMIC\r
234                         }\r
235                 }\r
236         ,       center: {\r
237                         dir:                    "center"\r
238                 ,       cssReq: {\r
239                                 left:           "auto" // DYNAMIC\r
240                         ,       right:          "auto" // DYNAMIC\r
241                         ,       top:            "auto" // DYNAMIC\r
242                         ,       bottom:         "auto" // DYNAMIC\r
243                         ,       height:         "auto"\r
244                         ,       width:          "auto"\r
245                         }\r
246                 }\r
247         }\r
248 \r
249         // CALLBACK FUNCTION NAMESPACE - used to store reusable callback functions\r
250 ,       callbacks: {}\r
251 \r
252 ,       getParentPaneElem: function (el) {\r
253                 // must pass either a container or pane element\r
254                 var $el = $(el)\r
255                 ,       layout = $el.data("layout") || $el.data("parentLayout");\r
256                 if (layout) {\r
257                         var $cont = layout.container;\r
258                         // see if this container is directly-nested inside an outer-pane\r
259                         if ($cont.data("layoutPane")) return $cont;\r
260                         var $pane = $cont.closest("."+ $.layout.defaults.panes.paneClass);\r
261                         // if a pane was found, return it\r
262                         if ($pane.data("layoutPane")) return $pane;\r
263                 }\r
264                 return null;\r
265         }\r
266 \r
267 ,       getParentPaneInstance: function (el) {\r
268                 // must pass either a container or pane element\r
269                 var $pane = $.layout.getParentPaneElem(el);\r
270                 return $pane ? $pane.data("layoutPane") : null;\r
271         }\r
272 \r
273 ,       getParentLayoutInstance: function (el) {\r
274                 // must pass either a container or pane element\r
275                 var $pane = $.layout.getParentPaneElem(el);\r
276                 return $pane ? $pane.data("parentLayout") : null;\r
277         }\r
278 \r
279 ,       getEventObject: function (evt) {\r
280                 return typeof evt === "object" && evt.stopPropagation ? evt : null;\r
281         }\r
282 ,       parsePaneName: function (evt_or_pane) {\r
283                 var evt = $.layout.getEventObject( evt_or_pane )\r
284                 ,       pane = evt_or_pane;\r
285                 if (evt) {\r
286                         // ALWAYS stop propagation of events triggered in Layout!\r
287                         evt.stopPropagation();\r
288                         pane = $(this).data("layoutEdge");\r
289                 }\r
290                 if (pane && !/^(west|east|north|south|center)$/.test(pane)) {\r
291                         $.layout.msg('LAYOUT ERROR - Invalid pane-name: "'+ pane +'"');\r
292                         pane = "error";\r
293                 }\r
294                 return pane;\r
295         }\r
296 \r
297 \r
298         // LAYOUT-PLUGIN REGISTRATION\r
299         // more plugins can added beyond this default list\r
300 ,       plugins: {\r
301                 draggable:              !!$.fn.draggable // resizing\r
302         ,       effects: {\r
303                         core:           !!$.effects             // animimations (specific effects tested by initOptions)\r
304                 ,       slide:          $.effects && ($.effects.slide || ($.effects.effect && $.effects.effect.slide)) // default effect\r
305                 }\r
306         }\r
307 \r
308 //      arrays of plugin or other methods to be triggered for events in *each layout* - will be passed 'Instance'\r
309 ,       onCreate:       []      // runs when layout is just starting to be created - right after options are set\r
310 ,       onLoad:         []      // runs after layout container and global events init, but before initPanes is called\r
311 ,       onReady:        []      // runs after initialization *completes* - ie, after initPanes completes successfully\r
312 ,       onDestroy:      []      // runs after layout is destroyed\r
313 ,       onUnload:       []      // runs after layout is destroyed OR when page unloads\r
314 ,       afterOpen:      []      // runs after setAsOpen() completes\r
315 ,       afterClose:     []      // runs after setAsClosed() completes\r
316 \r
317         /*\r
318          *      GENERIC UTILITY METHODS\r
319          */\r
320 \r
321         // calculate and return the scrollbar width, as an integer\r
322 ,       scrollbarWidth:         function () { return window.scrollbarWidth  || $.layout.getScrollbarSize('width'); }\r
323 ,       scrollbarHeight:        function () { return window.scrollbarHeight || $.layout.getScrollbarSize('height'); }\r
324 ,       getScrollbarSize:       function (dim) {\r
325                 var $c  = $('<div style="position: absolute; top: -10000px; left: -10000px; width: 100px; height: 100px; border: 0; overflow: scroll;"></div>').appendTo("body")\r
326                 ,       d       = { width: $c.outerWidth - $c[0].clientWidth, height: 100 - $c[0].clientHeight };\r
327                 $c.remove();\r
328                 window.scrollbarWidth   = d.width;\r
329                 window.scrollbarHeight  = d.height;\r
330                 return dim.match(/^(width|height)$/) ? d[dim] : d;\r
331         }\r
332 \r
333 \r
334 ,       disableTextSelection: function () {\r
335                 var $d  = $(document)\r
336                 ,       s       = 'textSelectionDisabled'\r
337                 ,       x       = 'textSelectionInitialized'\r
338                 ;\r
339                 if ($.fn.disableSelection) {\r
340                         if (!$d.data(x)) // document hasn't been initialized yet\r
341                                 $d.on('mouseup', $.layout.enableTextSelection ).data(x, true);\r
342                         if (!$d.data(s))\r
343                                 $d.disableSelection().data(s, true);\r
344                 }\r
345         }\r
346 ,       enableTextSelection: function () {\r
347                 var $d  = $(document)\r
348                 ,       s       = 'textSelectionDisabled';\r
349                 if ($.fn.enableSelection && $d.data(s))\r
350                         $d.enableSelection().data(s, false);\r
351         }\r
352 \r
353 \r
354         /**\r
355          * Returns hash container 'display' and 'visibility'\r
356          *\r
357          * @see $.swap() - swaps CSS, runs callback, resets CSS\r
358          * @param  {!Object}            $E                              jQuery element\r
359          * @param  {boolean=}   [force=false]   Run even if display != none\r
360          * @return {!Object}                                            Returns current style props, if applicable\r
361          */\r
362 ,       showInvisibly: function ($E, force) {\r
363                 if ($E && $E.length && (force || $E.css("display") === "none")) { // only if not *already hidden*\r
364                         var s = $E[0].style\r
365                                 // save ONLY the 'style' props because that is what we must restore\r
366                         ,       CSS = { display: s.display || '', visibility: s.visibility || '' };\r
367                         // show element 'invisibly' so can be measured\r
368                         $E.css({ display: "block", visibility: "hidden" });\r
369                         return CSS;\r
370                 }\r
371                 return {};\r
372         }\r
373 \r
374         /**\r
375          * Returns data for setting size of an element (container or a pane).\r
376          *\r
377          * @see  _create(), onWindowResize() for container, plus others for pane\r
378          * @return JSON  Returns a hash of all dimensions: top, bottom, left, right, outerWidth, innerHeight, etc\r
379          */\r
380 ,       getElementDimensions: function ($E, inset) {\r
381                 var\r
382                 //      dimensions hash - start with current data IF passed\r
383                         d       = { css: {}, inset: {} }\r
384                 ,       x       = d.css                 // CSS hash\r
385                 ,       i       = { bottom: 0 } // TEMP insets (bottom = complier hack)\r
386                 ,       N       = $.layout.cssNum\r
387                 ,       R       = Math.round\r
388                 ,       off = $E.offset()\r
389                 ,       b, p, ei                        // TEMP border, padding\r
390                 ;\r
391                 d.offsetLeft = off.left;\r
392                 d.offsetTop  = off.top;\r
393 \r
394                 if (!inset) inset = {}; // simplify logic below\r
395 \r
396                 $.each("Left,Right,Top,Bottom".split(","), function (idx, e) { // e = edge\r
397                         b = x["border" + e] = $.layout.borderWidth($E, e);\r
398                         p = x["padding"+ e] = $.layout.cssNum($E, "padding"+e);\r
399                         ei = e.toLowerCase();\r
400                         d.inset[ei] = inset[ei] >= 0 ? inset[ei] : p; // any missing insetX value = paddingX\r
401                         i[ei] = d.inset[ei] + b; // total offset of content from outer side\r
402                 });\r
403 \r
404                 x.width         = R($E.width());\r
405                 x.height        = R($E.height());\r
406                 x.top           = N($E,"top",true);\r
407                 x.bottom        = N($E,"bottom",true);\r
408                 x.left          = N($E,"left",true);\r
409                 x.right         = N($E,"right",true);\r
410 \r
411                 d.outerWidth    = R($E.outerWidth());\r
412                 d.outerHeight   = R($E.outerHeight());\r
413                 // calc the TRUE inner-dimensions, even in quirks-mode!\r
414                 d.innerWidth    = max(0, d.outerWidth  - i.left - i.right);\r
415                 d.innerHeight   = max(0, d.outerHeight - i.top  - i.bottom);\r
416                 // layoutWidth/Height is used in calcs for manual resizing\r
417                 // layoutW/H only differs from innerW/H when in quirks-mode - then is like outerW/H\r
418                 d.layoutWidth   = R($E.innerWidth());\r
419                 d.layoutHeight  = R($E.innerHeight());\r
420 \r
421                 //if ($E.prop('tagName') === 'BODY') { debugData( d, $E.prop('tagName') ); } // DEBUG\r
422 \r
423                 //d.visible     = $E.is(":visible");// && x.width > 0 && x.height > 0;\r
424 \r
425                 return d;\r
426         }\r
427 \r
428 ,       getElementStyles: function ($E, list) {\r
429                 var\r
430                         CSS     = {}\r
431                 ,       style   = $E[0].style\r
432                 ,       props   = list.split(",")\r
433                 ,       sides   = "Top,Bottom,Left,Right".split(",")\r
434                 ,       attrs   = "Color,Style,Width".split(",")\r
435                 ,       p, s, a, i, j, k\r
436                 ;\r
437                 for (i=0; i < props.length; i++) {\r
438                         p = props[i];\r
439                         if (p.match(/(border|padding|margin)$/))\r
440                                 for (j=0; j < 4; j++) {\r
441                                         s = sides[j];\r
442                                         if (p === "border")\r
443                                                 for (k=0; k < 3; k++) {\r
444                                                         a = attrs[k];\r
445                                                         CSS[p+s+a] = style[p+s+a];\r
446                                                 }\r
447                                         else\r
448                                                 CSS[p+s] = style[p+s];\r
449                                 }\r
450                         else\r
451                                 CSS[p] = style[p];\r
452                 };\r
453                 return CSS\r
454         }\r
455 \r
456         /**\r
457          * Return the innerWidth for the current browser/doctype\r
458          *\r
459          * @see  initPanes(), sizeMidPanes(), initHandles(), sizeHandles()\r
460          * @param  {Array.<Object>}     $E  Must pass a jQuery object - first element is processed\r
461          * @param  {number=}                    outerWidth (optional) Can pass a width, allowing calculations BEFORE element is resized\r
462          * @return {number}                     Returns the innerWidth of the elem by subtracting padding and borders\r
463          */\r
464 ,       cssWidth: function ($E, outerWidth) {\r
465                 // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed\r
466                 if (outerWidth <= 0) return 0;\r
467 \r
468                 var lb  = $.layout.browser\r
469                 ,       bs      = !lb.boxModel ? "border-box" : lb.boxSizing ? $E.css("boxSizing") : "content-box"\r
470                 ,       b       = $.layout.borderWidth\r
471                 ,       n       = $.layout.cssNum\r
472                 ,       W       = outerWidth\r
473                 ;\r
474                 // strip border and/or padding from outerWidth to get CSS Width\r
475                 if (bs !== "border-box")\r
476                         W -= (b($E, "Left") + b($E, "Right"));\r
477                 if (bs === "content-box")\r
478                         W -= (n($E, "paddingLeft") + n($E, "paddingRight"));\r
479                 return max(0,W);\r
480         }\r
481 \r
482         /**\r
483          * Return the innerHeight for the current browser/doctype\r
484          *\r
485          * @see  initPanes(), sizeMidPanes(), initHandles(), sizeHandles()\r
486          * @param  {Array.<Object>}     $E  Must pass a jQuery object - first element is processed\r
487          * @param  {number=}                    outerHeight  (optional) Can pass a width, allowing calculations BEFORE element is resized\r
488          * @return {number}                     Returns the innerHeight of the elem by subtracting padding and borders\r
489          */\r
490 ,       cssHeight: function ($E, outerHeight) {\r
491                 // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed\r
492                 if (outerHeight <= 0) return 0;\r
493 \r
494                 var lb  = $.layout.browser\r
495                 ,       bs      = !lb.boxModel ? "border-box" : lb.boxSizing ? $E.css("boxSizing") : "content-box"\r
496                 ,       b       = $.layout.borderWidth\r
497                 ,       n       = $.layout.cssNum\r
498                 ,       H       = outerHeight\r
499                 ;\r
500                 // strip border and/or padding from outerHeight to get CSS Height\r
501                 if (bs !== "border-box")\r
502                         H -= (b($E, "Top") + b($E, "Bottom"));\r
503                 if (bs === "content-box")\r
504                         H -= (n($E, "paddingTop") + n($E, "paddingBottom"));\r
505                 return max(0,H);\r
506         }\r
507 \r
508         /**\r
509          * Returns the 'current CSS numeric value' for a CSS property - 0 if property does not exist\r
510          *\r
511          * @see  Called by many methods\r
512          * @param {Array.<Object>}      $E                                      Must pass a jQuery object - first element is processed\r
513          * @param {string}                      prop                            The name of the CSS property, eg: top, width, etc.\r
514          * @param {boolean=}                    [allowAuto=false]       true = return 'auto' if that is value; false = return 0\r
515          * @return {(string|number)}                                            Usually used to get an integer value for position (top, left) or size (height, width)\r
516          */\r
517 ,       cssNum: function ($E, prop, allowAuto) {\r
518                 if (!$E.jquery) $E = $($E);\r
519                 var CSS = $.layout.showInvisibly($E)\r
520                 ,       p       = $.css($E[0], prop, true)\r
521                 ,       v       = allowAuto && p=="auto" ? p : Math.round(parseFloat(p) || 0);\r
522                 $E.css( CSS ); // RESET\r
523                 return v;\r
524         }\r
525 \r
526 ,       borderWidth: function (el, side) {\r
527                 if (el.jquery) el = el[0];\r
528                 var b = "border"+ side.substr(0,1).toUpperCase() + side.substr(1); // left => Left\r
529                 return $.css(el, b+"Style", true) === "none" ? 0 : Math.round(parseFloat($.css(el, b+"Width", true)) || 0);\r
530         }\r
531 \r
532         /**\r
533          * Mouse-tracking utility - FUTURE REFERENCE\r
534          *\r
535          * init: if (!window.mouse) {\r
536          *                      window.mouse = { x: 0, y: 0 };\r
537          *                      $(document).mousemove( $.layout.trackMouse );\r
538          *              }\r
539          *\r
540          * @param {Object}              evt\r
541          *\r
542 ,       trackMouse: function (evt) {\r
543                 window.mouse = { x: evt.clientX, y: evt.clientY };\r
544         }\r
545         */\r
546 \r
547         /**\r
548          * SUBROUTINE for preventPrematureSlideClose option\r
549          *\r
550          * @param {Object}              evt\r
551          * @param {Object=}             el\r
552          */\r
553 ,       isMouseOverElem: function (evt, el) {\r
554                 var\r
555                         $E      = $(el || this)\r
556                 ,       d       = $E.offset()\r
557                 ,       T       = d.top\r
558                 ,       L       = d.left\r
559                 ,       R       = L + $E.outerWidth()\r
560                 ,       B       = T + $E.outerHeight()\r
561                 ,       x       = evt.pageX     // evt.clientX ?\r
562                 ,       y       = evt.pageY     // evt.clientY ?\r
563                 ;\r
564                 // if X & Y are < 0, probably means is over an open SELECT\r
565                 return ($.layout.browser.msie && x < 0 && y < 0) || ((x >= L && x <= R) && (y >= T && y <= B));\r
566         }\r
567 \r
568         /**\r
569          * Message/Logging Utility\r
570          *\r
571          * @example $.layout.msg("My message");                         // log text\r
572          * @example $.layout.msg("My message", true);           // alert text\r
573          * @example $.layout.msg({ foo: "bar" }, "Title");      // log hash-data, with custom title\r
574          * @example $.layout.msg({ foo: "bar" }, true, "Title", { sort: false }); -OR-\r
575          * @example $.layout.msg({ foo: "bar" }, "Title", { sort: false, display: true }); // alert hash-data\r
576          *\r
577          * @param {(Object|string)}                     info                    String message OR Hash/Array\r
578          * @param {(Boolean|string|Object)=}    [popup=false]   True means alert-box - can be skipped\r
579          * @param {(Object|string)=}                    [debugTitle=""] Title for Hash data - can be skipped\r
580          * @param {Object=}                                     [debugOpts]             Extra options for debug output\r
581          */\r
582 ,       msg: function (info, popup, debugTitle, debugOpts) {\r
583                 if ($.isPlainObject(info) && window.debugData) {\r
584                         if (typeof popup === "string") {\r
585                                 debugOpts       = debugTitle;\r
586                                 debugTitle      = popup;\r
587                         }\r
588                         else if (typeof debugTitle === "object") {\r
589                                 debugOpts       = debugTitle;\r
590                                 debugTitle      = null;\r
591                         }\r
592                         var t = debugTitle || "log( <object> )"\r
593                         ,       o = $.extend({ sort: false, returnHTML: false, display: false }, debugOpts);\r
594                         if (popup === true || o.display)\r
595                                 debugData( info, t, o );\r
596                         else if (window.console)\r
597                                 console.log(debugData( info, t, o ));\r
598                 }\r
599                 else if (popup)\r
600                         alert(info);\r
601                 else if (window.console)\r
602                         console.log(info);\r
603                 else {\r
604                         var id  = "#layoutLogger"\r
605                         ,       $l = $(id);\r
606                         if (!$l.length)\r
607                                 $l = createLog();\r
608                         $l.children("ul").append('<li style="padding: 4px 10px; margin: 0; border-top: 1px solid #CCC;">'+ info.replace(/\</g,"&lt;").replace(/\>/g,"&gt;") +'</li>');\r
609                 }\r
610 \r
611                 function createLog () {\r
612                         var pos = $.support.fixedPosition ? 'fixed' : 'absolute'\r
613                         ,       $e = $('<div id="layoutLogger" style="position: '+ pos +'; top: 5px; z-index: 999999; max-width: 25%; overflow: hidden; border: 1px solid #000; border-radius: 5px; background: #FBFBFB; box-shadow: 0 2px 10px rgba(0,0,0,0.3);">'\r
614                                 +       '<div style="font-size: 13px; font-weight: bold; padding: 5px 10px; background: #F6F6F6; border-radius: 5px 5px 0 0; cursor: move;">'\r
615                                 +       '<span style="float: right; padding-left: 7px; cursor: pointer;" title="Remove Console" onclick="$(this).closest(\'#layoutLogger\').remove()">X</span>Layout console.log</div>'\r
616                                 +       '<ul style="font-size: 13px; font-weight: none; list-style: none; margin: 0; padding: 0 0 2px;"></ul>'\r
617                                 + '</div>'\r
618                                 ).appendTo("body");\r
619                         $e.css('left', $(window).width() - $e.outerWidth() - 5)\r
620                         if ($.ui.draggable) $e.draggable({ handle: ':first-child' });\r
621                         return $e;\r
622                 };\r
623         }\r
624 \r
625 };\r
626 \r
627 \r
628 /*\r
629  *      $.layout.browser REPLACES removed $.browser, with extra data\r
630  *      Parsing code here adapted from jQuery 1.8 $.browse\r
631  */\r
632 (function(){\r
633         var u = navigator.userAgent.toLowerCase()\r
634         ,       m = /(chrome)[ \/]([\w.]+)/.exec( u )\r
635                 ||      /(webkit)[ \/]([\w.]+)/.exec( u )\r
636                 ||      /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( u )\r
637                 ||      /(msie) ([\w.]+)/.exec( u )\r
638                 ||      u.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( u )\r
639                 ||      []\r
640         ,       b = m[1] || ""\r
641         ,       v = m[2] || 0\r
642         ,       ie = b === "msie"\r
643         ,       cm = document.compatMode\r
644         ,       $s = $.support\r
645         ,       bs = $s.boxSizing !== undefined ? $s.boxSizing : $s.boxSizingReliable\r
646         ,       bm = !ie || !cm || cm === "CSS1Compat" || $s.boxModel || false\r
647         ,       lb = $.layout.browser = {\r
648                         version:        v\r
649                 ,       safari:         b === "webkit"  // webkit (NOT chrome) = safari\r
650                 ,       webkit:         b === "chrome"  // chrome = webkit\r
651                 ,       msie:           ie\r
652                 ,       isIE6:          ie && v == 6\r
653                         // ONLY IE reverts to old box-model - Note that compatMode was deprecated as of IE8\r
654                 ,       boxModel:       bm\r
655                 ,       boxSizing:      !!(typeof bs === "function" ? bs() : bs)\r
656                 };\r
657         ;\r
658         if (b) lb[b] = true; // set CURRENT browser\r
659         /*      OLD versions of jQuery only set $.support.boxModel after page is loaded\r
660          *      so if this is IE, use support.boxModel to test for quirks-mode (ONLY IE changes boxModel) */\r
661         if (!bm && !cm) $(function(){ lb.boxModel = $s.boxModel; });\r
662 })();\r
663 \r
664 \r
665 // DEFAULT OPTIONS\r
666 $.layout.defaults = {\r
667 /*\r
668  *      LAYOUT & LAYOUT-CONTAINER OPTIONS\r
669  *      - none of these options are applicable to individual panes\r
670  */\r
671         name:                                           ""                      // Not required, but useful for buttons and used for the state-cookie\r
672 ,       containerClass:                         "ui-layout-container" // layout-container element\r
673 ,       inset:                                          null            // custom container-inset values (override padding)\r
674 ,       scrollToBookmarkOnLoad:         true            // after creating a layout, scroll to bookmark in URL (.../page.htm#myBookmark)\r
675 ,       resizeWithWindow:                       true            // bind thisLayout.resizeAll() to the window.resize event\r
676 ,       resizeWithWindowDelay:          200                     // delay calling resizeAll because makes window resizing very jerky\r
677 ,       resizeWithWindowMaxDelay:       0                       // 0 = none - force resize every XX ms while window is being resized\r
678 ,       maskPanesEarly:                         false           // true = create pane-masks on resizer.mouseDown instead of waiting for resizer.dragstart\r
679 ,       onresizeall_start:                      null            // CALLBACK when resizeAll() STARTS     - NOT pane-specific\r
680 ,       onresizeall_end:                        null            // CALLBACK when resizeAll() ENDS       - NOT pane-specific\r
681 ,       onload_start:                           null            // CALLBACK when Layout inits - after options initialized, but before elements\r
682 ,       onload_end:                                     null            // CALLBACK when Layout inits - after EVERYTHING has been initialized\r
683 ,       onunload_start:                         null            // CALLBACK when Layout is destroyed OR onWindowUnload\r
684 ,       onunload_end:                           null            // CALLBACK when Layout is destroyed OR onWindowUnload\r
685 ,       initPanes:                                      true            // false = DO NOT initialize the panes onLoad - will init later\r
686 ,       showErrorMessages:                      true            // enables fatal error messages to warn developers of common errors\r
687 ,       showDebugMessages:                      false           // display console-and-alert debug msgs - IF this Layout version _has_ debugging code!\r
688 //      Changing this zIndex value will cause other zIndex values to automatically change\r
689 ,       zIndex:                                         null            // the PANE zIndex - resizers and masks will be +1\r
690 //      DO NOT CHANGE the zIndex values below unless you clearly understand their relationships\r
691 ,       zIndexes: {                                                             // set _default_ z-index values here...\r
692                 pane_normal:                    0                       // normal z-index for panes\r
693         ,       content_mask:                   1                       // applied to overlays used to mask content INSIDE panes during resizing\r
694         ,       resizer_normal:                 2                       // normal z-index for resizer-bars\r
695         ,       pane_sliding:                   100                     // applied to *BOTH* the pane and its resizer when a pane is 'slid open'\r
696         ,       pane_animate:                   1000            // applied to the pane when being animated - not applied to the resizer\r
697         ,       resizer_drag:                   10000           // applied to the CLONED resizer-bar when being 'dragged'\r
698         }\r
699 ,       errors: {\r
700                 pane:                                   "pane"          // description of "layout pane element" - used only in error messages\r
701         ,       selector:                               "selector"      // description of "jQuery-selector" - used only in error messages\r
702         ,       addButtonError:                 "Error Adding Button\nInvalid "\r
703         ,       containerMissing:               "UI Layout Initialization Error\nThe specified layout-container does not exist."\r
704         ,       centerPaneMissing:              "UI Layout Initialization Error\nThe center-pane element does not exist.\nThe center-pane is a required element."\r
705         ,       noContainerHeight:              "UI Layout Initialization Warning\nThe layout-container \"CONTAINER\" has no height.\nTherefore the layout is 0-height and hence 'invisible'!"\r
706         ,       callbackError:                  "UI Layout Callback Error\nThe EVENT callback is not a valid function."\r
707         }\r
708 /*\r
709  *      PANE DEFAULT SETTINGS\r
710  *      - settings under the 'panes' key become the default settings for *all panes*\r
711  *      - ALL pane-options can also be set specifically for each panes, which will override these 'default values'\r
712  */\r
713 ,       panes: { // default options for 'all panes' - will be overridden by 'per-pane settings'\r
714                 applyDemoStyles:                false           // NOTE: renamed from applyDefaultStyles for clarity\r
715         ,       closable:                               true            // pane can open & close\r
716         ,       resizable:                              true            // when open, pane can be resized \r
717         ,       slidable:                               true            // when closed, pane can 'slide open' over other panes - closes on mouse-out\r
718         ,       initClosed:                             false           // true = init pane as 'closed'\r
719         ,       initHidden:                     false           // true = init pane as 'hidden' - no resizer-bar/spacing\r
720         //      SELECTORS\r
721         //,     paneSelector:                   ""                      // MUST be pane-specific - jQuery selector for pane\r
722         ,       contentSelector:                ".ui-layout-content" // INNER div/element to auto-size so only it scrolls, not the entire pane!\r
723         ,       contentIgnoreSelector:  ".ui-layout-ignore"     // element(s) to 'ignore' when measuring 'content'\r
724         ,       findNestedContent:              false           // true = $P.find(contentSelector), false = $P.children(contentSelector)\r
725         //      GENERIC ROOT-CLASSES - for auto-generated classNames\r
726         ,       paneClass:                              "ui-layout-pane"        // Layout Pane\r
727         ,       resizerClass:                   "ui-layout-resizer"     // Resizer Bar\r
728         ,       togglerClass:                   "ui-layout-toggler"     // Toggler Button\r
729         ,       buttonClass:                    "ui-layout-button"      // CUSTOM Buttons       - eg: '[ui-layout-button]-toggle/-open/-close/-pin'\r
730         //      ELEMENT SIZE & SPACING\r
731         //,     size:                                   100                     // MUST be pane-specific -initial size of pane\r
732         ,       minSize:                                0                       // when manually resizing a pane\r
733         ,       maxSize:                                0                       // ditto, 0 = no limit\r
734         ,       spacing_open:                   6                       // space between pane and adjacent panes - when pane is 'open'\r
735         ,       spacing_closed:                 6                       // ditto - when pane is 'closed'\r
736         ,       togglerLength_open:             50                      // Length = WIDTH of toggler button on north/south sides - HEIGHT on east/west sides\r
737         ,       togglerLength_closed:   50                      // 100% OR -1 means 'full height/width of resizer bar' - 0 means 'hidden'\r
738         ,       togglerAlign_open:              "center"        // top/left, bottom/right, center, OR...\r
739         ,       togglerAlign_closed:    "center"        // 1 => nn = offset from top/left, -1 => -nn == offset from bottom/right\r
740         ,       togglerContent_open:    ""                      // text or HTML to put INSIDE the toggler\r
741         ,       togglerContent_closed:  ""                      // ditto\r
742         //      RESIZING OPTIONS\r
743         ,       resizerDblClickToggle:  true            // \r
744         ,       autoResize:                             true            // IF size is 'auto' or a percentage, then recalc 'pixel size' whenever the layout resizes\r
745         ,       autoReopen:                             true            // IF a pane was auto-closed due to noRoom, reopen it when there is room? False = leave it closed\r
746         ,       resizerDragOpacity:             1                       // option for ui.draggable\r
747         //,     resizerCursor:                  ""                      // MUST be pane-specific - cursor when over resizer-bar\r
748         ,       maskContents:                   false           // true = add DIV-mask over-or-inside this pane so can 'drag' over IFRAMES\r
749         ,       maskObjects:                    false           // true = add IFRAME-mask over-or-inside this pane to cover objects/applets - content-mask will overlay this mask\r
750         ,       maskZindex:                             null            // will override zIndexes.content_mask if specified - not applicable to iframe-panes\r
751         ,       resizingGrid:                   false           // grid size that the resizers will snap-to during resizing, eg: [20,20]\r
752         ,       livePaneResizing:               false           // true = LIVE Resizing as resizer is dragged\r
753         ,       liveContentResizing:    false           // true = re-measure header/footer heights as resizer is dragged\r
754         ,       liveResizingTolerance:  1                       // how many px change before pane resizes, to control performance\r
755         //      SLIDING OPTIONS\r
756         ,       sliderCursor:                   "pointer"       // cursor when resizer-bar will trigger 'sliding'\r
757         ,       slideTrigger_open:              "click"         // click, dblclick, mouseenter\r
758         ,       slideTrigger_close:             "mouseleave"// click, mouseleave\r
759         ,       slideDelay_open:                300                     // applies only for mouseenter event - 0 = instant open\r
760         ,       slideDelay_close:               300                     // applies only for mouseleave event (300ms is the minimum!)\r
761         ,       hideTogglerOnSlide:             false           // when pane is slid-open, should the toggler show?\r
762         ,       preventQuickSlideClose: $.layout.browser.webkit // Chrome triggers slideClosed as it is opening\r
763         ,       preventPrematureSlideClose: false       // handle incorrect mouseleave trigger, like when over a SELECT-list in IE\r
764         //      PANE-SPECIFIC TIPS & MESSAGES\r
765         ,       tips: {\r
766                         Open:                           "Open"          // eg: "Open Pane"\r
767                 ,       Close:                          "Close"\r
768                 ,       Resize:                         "Resize"\r
769                 ,       Slide:                          "Slide Open"\r
770                 ,       Pin:                            "Pin"\r
771                 ,       Unpin:                          "Un-Pin"\r
772                 ,       noRoomToOpen:           "Not enough room to show this panel."   // alert if user tries to open a pane that cannot\r
773                 ,       minSizeWarning:         "Panel has reached its minimum size"    // displays in browser statusbar\r
774                 ,       maxSizeWarning:         "Panel has reached its maximum size"    // ditto\r
775                 }\r
776         //      HOT-KEYS & MISC\r
777         ,       showOverflowOnHover:    false           // will bind allowOverflow() utility to pane.onMouseOver\r
778         ,       enableCursorHotkey:             true            // enabled 'cursor' hotkeys\r
779         //,     customHotkey:                   ""                      // MUST be pane-specific - EITHER a charCode OR a character\r
780         ,       customHotkeyModifier:   "SHIFT"         // either 'SHIFT', 'CTRL' or 'CTRL+SHIFT' - NOT 'ALT'\r
781         //      PANE ANIMATION\r
782         //      NOTE: fxSss_open, fxSss_close & fxSss_size options (eg: fxName_open) are auto-generated if not passed\r
783         ,       fxName:                                 "slide"         // ('none' or blank), slide, drop, scale -- only relevant to 'open' & 'close', NOT 'size'\r
784         ,       fxSpeed:                                null            // slow, normal, fast, 200, nnn - if passed, will OVERRIDE fxSettings.duration\r
785         ,       fxSettings:                             {}                      // can be passed, eg: { easing: "easeOutBounce", duration: 1500 }\r
786         ,       fxOpacityFix:                   true            // tries to fix opacity in IE to restore anti-aliasing after animation\r
787         ,       animatePaneSizing:              false           // true = animate resizing after dragging resizer-bar OR sizePane() is called\r
788         /*  NOTE: Action-specific FX options are auto-generated from the options above if not specifically set:\r
789                 fxName_open:                    "slide"         // 'Open' pane animation\r
790                 fnName_close:                   "slide"         // 'Close' pane animation\r
791                 fxName_size:                    "slide"         // 'Size' pane animation - when animatePaneSizing = true\r
792                 fxSpeed_open:                   null\r
793                 fxSpeed_close:                  null\r
794                 fxSpeed_size:                   null\r
795                 fxSettings_open:                {}\r
796                 fxSettings_close:               {}\r
797                 fxSettings_size:                {}\r
798         */\r
799         //      CHILD/NESTED LAYOUTS\r
800         ,       children:                               null            // Layout-options for nested/child layout - even {} is valid as options\r
801         ,       containerSelector:              ''                      // if child is NOT 'directly nested', a selector to find it/them (can have more than one child layout!)\r
802         ,       initChildren:                   true            // true = child layout will be created as soon as _this_ layout completes initialization\r
803         ,       destroyChildren:                true            // true = destroy child-layout if this pane is destroyed\r
804         ,       resizeChildren:                 true            // true = trigger child-layout.resizeAll() when this pane is resized\r
805         //      EVENT TRIGGERING\r
806         ,       triggerEventsOnLoad:    false           // true = trigger onopen OR onclose callbacks when layout initializes\r
807         ,       triggerEventsDuringLiveResize: true     // true = trigger onresize callback REPEATEDLY if livePaneResizing==true\r
808         //      PANE CALLBACKS\r
809         ,       onshow_start:                   null            // CALLBACK when pane STARTS to Show    - BEFORE onopen/onhide_start\r
810         ,       onshow_end:                             null            // CALLBACK when pane ENDS being Shown  - AFTER  onopen/onhide_end\r
811         ,       onhide_start:                   null            // CALLBACK when pane STARTS to Close   - BEFORE onclose_start\r
812         ,       onhide_end:                             null            // CALLBACK when pane ENDS being Closed - AFTER  onclose_end\r
813         ,       onopen_start:                   null            // CALLBACK when pane STARTS to Open\r
814         ,       onopen_end:                             null            // CALLBACK when pane ENDS being Opened\r
815         ,       onclose_start:                  null            // CALLBACK when pane STARTS to Close\r
816         ,       onclose_end:                    null            // CALLBACK when pane ENDS being Closed\r
817         ,       onresize_start:                 null            // CALLBACK when pane STARTS being Resized ***FOR ANY REASON***\r
818         ,       onresize_end:                   null            // CALLBACK when pane ENDS being Resized ***FOR ANY REASON***\r
819         ,       onsizecontent_start:    null            // CALLBACK when sizing of content-element STARTS\r
820         ,       onsizecontent_end:              null            // CALLBACK when sizing of content-element ENDS\r
821         ,       onswap_start:                   null            // CALLBACK when pane STARTS to Swap\r
822         ,       onswap_end:                             null            // CALLBACK when pane ENDS being Swapped\r
823         ,       ondrag_start:                   null            // CALLBACK when pane STARTS being ***MANUALLY*** Resized\r
824         ,       ondrag_end:                             null            // CALLBACK when pane ENDS being ***MANUALLY*** Resized\r
825         }\r
826 /*\r
827  *      PANE-SPECIFIC SETTINGS\r
828  *      - options listed below MUST be specified per-pane - they CANNOT be set under 'panes'\r
829  *      - all options under the 'panes' key can also be set specifically for any pane\r
830  *      - most options under the 'panes' key apply only to 'border-panes' - NOT the the center-pane\r
831  */\r
832 ,       north: {\r
833                 paneSelector:                   ".ui-layout-north"\r
834         ,       size:                                   "auto"          // eg: "auto", "30%", .30, 200\r
835         ,       resizerCursor:                  "n-resize"      // custom = url(myCursor.cur)\r
836         ,       customHotkey:                   ""                      // EITHER a charCode (43) OR a character ("o")\r
837         }\r
838 ,       south: {\r
839                 paneSelector:                   ".ui-layout-south"\r
840         ,       size:                                   "auto"\r
841         ,       resizerCursor:                  "s-resize"\r
842         ,       customHotkey:                   ""\r
843         }\r
844 ,       east: {\r
845                 paneSelector:                   ".ui-layout-east"\r
846         ,       size:                                   200\r
847         ,       resizerCursor:                  "e-resize"\r
848         ,       customHotkey:                   ""\r
849         }\r
850 ,       west: {\r
851                 paneSelector:                   ".ui-layout-west"\r
852         ,       size:                                   200\r
853         ,       resizerCursor:                  "w-resize"\r
854         ,       customHotkey:                   ""\r
855         }\r
856 ,       center: {\r
857                 paneSelector:                   ".ui-layout-center"\r
858         ,       minWidth:                               0\r
859         ,       minHeight:                              0\r
860         }\r
861 };\r
862 \r
863 $.layout.optionsMap = {\r
864         // layout/global options - NOT pane-options\r
865         layout: ("name,instanceKey,stateManagement,effects,inset,zIndexes,errors,"\r
866         +       "zIndex,scrollToBookmarkOnLoad,showErrorMessages,maskPanesEarly,"\r
867         +       "outset,resizeWithWindow,resizeWithWindowDelay,resizeWithWindowMaxDelay,"\r
868         +       "onresizeall,onresizeall_start,onresizeall_end,onload,onload_start,onload_end,onunload,onunload_start,onunload_end").split(",")\r
869 //      borderPanes: [ ALL options that are NOT specified as 'layout' ]\r
870         // default.panes options that apply to the center-pane (most options apply _only_ to border-panes)\r
871 ,       center: ("paneClass,contentSelector,contentIgnoreSelector,findNestedContent,applyDemoStyles,triggerEventsOnLoad,"\r
872         +       "showOverflowOnHover,maskContents,maskObjects,liveContentResizing,"\r
873         +       "containerSelector,children,initChildren,resizeChildren,destroyChildren,"\r
874         +       "onresize,onresize_start,onresize_end,onsizecontent,onsizecontent_start,onsizecontent_end").split(",")\r
875         // options that MUST be specifically set 'per-pane' - CANNOT set in the panes (defaults) key\r
876 ,       noDefault: ("paneSelector,resizerCursor,customHotkey").split(",")\r
877 };\r
878 \r
879 /**\r
880  * Processes options passed in converts flat-format data into subkey (JSON) format\r
881  * In flat-format, subkeys are _currently_ separated with 2 underscores, like north__optName\r
882  * Plugins may also call this method so they can transform their own data\r
883  *\r
884  * @param  {!Object}    hash                    Data/options passed by user - may be a single level or nested levels\r
885  * @param  {boolean=}   [addKeys=false] Should the primary layout.options keys be added if they do not exist?\r
886  * @return {Object}                                             Returns hash of minWidth & minHeight\r
887  */\r
888 $.layout.transformData = function (hash, addKeys) {\r
889         var     json = addKeys ? { panes: {}, center: {} } : {} // init return object\r
890         ,       branch, optKey, keys, key, val, i, c;\r
891 \r
892         if (typeof hash !== "object") return json; // no options passed\r
893 \r
894         // convert all 'flat-keys' to 'sub-key' format\r
895         for (optKey in hash) {\r
896                 branch  = json;\r
897                 val             = hash[ optKey ];\r
898                 keys    = optKey.split("__"); // eg: west__size or north__fxSettings__duration\r
899                 c               = keys.length - 1;\r
900                 // convert underscore-delimited to subkeys\r
901                 for (i=0; i <= c; i++) {\r
902                         key = keys[i];\r
903                         if (i === c) {  // last key = value\r
904                                 if ($.isPlainObject( val ))\r
905                                         branch[key] = $.layout.transformData( val ); // RECURSE\r
906                                 else\r
907                                         branch[key] = val;\r
908                         }\r
909                         else {\r
910                                 if (!branch[key])\r
911                                         branch[key] = {}; // create the subkey\r
912                                 // recurse to sub-key for next loop - if not done\r
913                                 branch = branch[key];\r
914                         }\r
915                 }\r
916         }\r
917         return json;\r
918 };\r
919 \r
920 // INTERNAL CONFIG DATA - DO NOT CHANGE THIS!\r
921 $.layout.backwardCompatibility = {\r
922         // data used by renameOldOptions()\r
923         map: {\r
924         //      OLD Option Name:                        NEW Option Name\r
925                 applyDefaultStyles:                     "applyDemoStyles"\r
926         //      CHILD/NESTED LAYOUTS\r
927         ,       childOptions:                           "children"\r
928         ,       initChildLayout:                        "initChildren"\r
929         ,       destroyChildLayout:                     "destroyChildren"\r
930         ,       resizeChildLayout:                      "resizeChildren"\r
931         ,       resizeNestedLayout:                     "resizeChildren"\r
932         //      MISC Options\r
933         ,       resizeWhileDragging:            "livePaneResizing"\r
934         ,       resizeContentWhileDragging:     "liveContentResizing"\r
935         ,       triggerEventsWhileDragging:     "triggerEventsDuringLiveResize"\r
936         ,       maskIframesOnResize:            "maskContents"\r
937         //      STATE MANAGEMENT\r
938         ,       useStateCookie:                         "stateManagement.enabled"\r
939         ,       "cookie.autoLoad":                      "stateManagement.autoLoad"\r
940         ,       "cookie.autoSave":                      "stateManagement.autoSave"\r
941         ,       "cookie.keys":                          "stateManagement.stateKeys"\r
942         ,       "cookie.name":                          "stateManagement.cookie.name"\r
943         ,       "cookie.domain":                        "stateManagement.cookie.domain"\r
944         ,       "cookie.path":                          "stateManagement.cookie.path"\r
945         ,       "cookie.expires":                       "stateManagement.cookie.expires"\r
946         ,       "cookie.secure":                        "stateManagement.cookie.secure"\r
947         //      OLD Language options\r
948         ,       noRoomToOpenTip:                        "tips.noRoomToOpen"\r
949         ,       togglerTip_open:                        "tips.Close"    // open   = Close\r
950         ,       togglerTip_closed:                      "tips.Open"             // closed = Open\r
951         ,       resizerTip:                                     "tips.Resize"\r
952         ,       sliderTip:                                      "tips.Slide"\r
953         }\r
954 \r
955 /**\r
956 * @param {Object}       opts\r
957 */\r
958 ,       renameOptions: function (opts) {\r
959                 var map = $.layout.backwardCompatibility.map\r
960                 ,       oldData, newData, value\r
961                 ;\r
962                 for (var itemPath in map) {\r
963                         oldData = getBranch( itemPath );\r
964                         value   = oldData.branch[ oldData.key ];\r
965                         if (value !== undefined) {\r
966                                 newData = getBranch( map[itemPath], true );\r
967                                 newData.branch[ newData.key ] = value;\r
968                                 delete oldData.branch[ oldData.key ];\r
969                         }\r
970                 }\r
971 \r
972                 /**\r
973                  * @param {string}      path\r
974                  * @param {boolean=}    [create=false]  Create path if does not exist\r
975                  */\r
976                 function getBranch (path, create) {\r
977                         var a = path.split(".") // split keys into array\r
978                         ,       c = a.length - 1\r
979                         ,       D = { branch: opts, key: a[c] } // init branch at top & set key (last item)\r
980                         ,       i = 0, k, undef;\r
981                         for (; i<c; i++) { // skip the last key (data)\r
982                                 k = a[i];\r
983                                 if (D.branch[ k ] == undefined) { // child-key does not exist\r
984                                         if (create) {\r
985                                                 D.branch = D.branch[ k ] = {}; // create child-branch\r
986                                         }\r
987                                         else // can't go any farther\r
988                                                 D.branch = {}; // branch is undefined\r
989                                 }\r
990                                 else\r
991                                         D.branch = D.branch[ k ]; // get child-branch\r
992                         }\r
993                         return D;\r
994                 };\r
995         }\r
996 \r
997 /**\r
998 * @param {Object}       opts\r
999 */\r
1000 ,       renameAllOptions: function (opts) {\r
1001                 var ren = $.layout.backwardCompatibility.renameOptions;\r
1002                 // rename root (layout) options\r
1003                 ren( opts );\r
1004                 // rename 'defaults' to 'panes'\r
1005                 if (opts.defaults) {\r
1006                         if (typeof opts.panes !== "object")\r
1007                                 opts.panes = {};\r
1008                         $.extend(true, opts.panes, opts.defaults);\r
1009                         delete opts.defaults;\r
1010                 }\r
1011                 // rename options in the the options.panes key\r
1012                 if (opts.panes) ren( opts.panes );\r
1013                 // rename options inside *each pane key*, eg: options.west\r
1014                 $.each($.layout.config.allPanes, function (i, pane) {\r
1015                         if (opts[pane]) ren( opts[pane] );\r
1016                 });     \r
1017                 return opts;\r
1018         }\r
1019 };\r
1020 \r
1021 \r
1022 \r
1023 \r
1024 /*      ============================================================\r
1025  *      BEGIN WIDGET: $( selector ).layout( {options} );\r
1026  *      ============================================================\r
1027  */\r
1028 $.fn.layout = function (opts) {\r
1029         var\r
1030 \r
1031         // local aliases to global data\r
1032         browser = $.layout.browser\r
1033 ,       _c              = $.layout.config\r
1034 \r
1035         // local aliases to utlity methods\r
1036 ,       cssW    = $.layout.cssWidth\r
1037 ,       cssH    = $.layout.cssHeight\r
1038 ,       elDims  = $.layout.getElementDimensions\r
1039 ,       styles  = $.layout.getElementStyles\r
1040 ,       evtObj  = $.layout.getEventObject\r
1041 ,       evtPane = $.layout.parsePaneName\r
1042 \r
1043 /**\r
1044  * options - populated by initOptions()\r
1045  */\r
1046 ,       options = $.extend(true, {}, $.layout.defaults)\r
1047 ,       effects = options.effects = $.extend(true, {}, $.layout.effects)\r
1048 \r
1049 /**\r
1050  * layout-state object\r
1051  */\r
1052 ,       state = {\r
1053                 // generate unique ID to use for event.namespace so can unbind only events added by 'this layout'\r
1054                 id:                             "layout"+ $.now()       // code uses alias: sID\r
1055         ,       initialized:    false\r
1056         ,       paneResizing:   false\r
1057         ,       panesSliding:   {}\r
1058         ,       container:      {       // list all keys referenced in code to avoid compiler error msgs\r
1059                         innerWidth:             0\r
1060                 ,       innerHeight:    0\r
1061                 ,       outerWidth:             0\r
1062                 ,       outerHeight:    0\r
1063                 ,       layoutWidth:    0\r
1064                 ,       layoutHeight:   0\r
1065                 }\r
1066         ,       north:          { childIdx: 0 }\r
1067         ,       south:          { childIdx: 0 }\r
1068         ,       east:           { childIdx: 0 }\r
1069         ,       west:           { childIdx: 0 }\r
1070         ,       center:         { childIdx: 0 }\r
1071         }\r
1072 \r
1073 /**\r
1074  * parent/child-layout pointers\r
1075  */\r
1076 //,     hasParentLayout = false - exists ONLY inside Instance so can be set externally\r
1077 ,       children = {\r
1078                 north:          null\r
1079         ,       south:          null\r
1080         ,       east:           null\r
1081         ,       west:           null\r
1082         ,       center:         null\r
1083         }\r
1084 \r
1085 /*\r
1086  * ###########################\r
1087  *  INTERNAL HELPER FUNCTIONS\r
1088  * ###########################\r
1089  */\r
1090 \r
1091         /**\r
1092          * Manages all internal timers\r
1093          */\r
1094 ,       timer = {\r
1095                 data:   {}\r
1096         ,       set:    function (s, fn, ms) { timer.clear(s); timer.data[s] = setTimeout(fn, ms); }\r
1097         ,       clear:  function (s) { var t=timer.data; if (t[s]) {clearTimeout(t[s]); delete t[s];} }\r
1098         }\r
1099 \r
1100         /**\r
1101          * Alert or console.log a message - IF option is enabled.\r
1102          *\r
1103          * @param {(string|!Object)}    msg                             Message (or debug-data) to display\r
1104          * @param {boolean=}                    [popup=false]   True by default, means 'alert', false means use console.log\r
1105          * @param {boolean=}                    [debug=false]   True means is a widget debugging message\r
1106          */\r
1107 ,       _log = function (msg, popup, debug) {\r
1108                 var o = options;\r
1109                 if ((o.showErrorMessages && !debug) || (debug && o.showDebugMessages))\r
1110                         $.layout.msg( o.name +' / '+ msg, (popup !== false) );\r
1111                 return false;\r
1112         }\r
1113 \r
1114         /**\r
1115          * Executes a Callback function after a trigger event, like resize, open or close\r
1116          *\r
1117          * @param {string}                              evtName                                 Name of the layout callback, eg "onresize_start"\r
1118          * @param {(string|boolean)=}   [pane=""]                               This is passed only so we can pass the 'pane object' to the callback\r
1119          * @param {(string|boolean)=}   [skipBoundEvents=false] True = do not run events bound to the elements - only the callbacks set in options\r
1120          */\r
1121 ,       _runCallbacks = function (evtName, pane, skipBoundEvents) {\r
1122                 var     hasPane = pane && isStr(pane)\r
1123                 ,       s               = hasPane ? state[pane] : state\r
1124                 ,       o               = hasPane ? options[pane] : options\r
1125                 ,       lName   = options.name\r
1126                         // names like onopen and onopen_end separate are interchangeable in options...\r
1127                 ,       lng             = evtName + (evtName.match(/_/) ? "" : "_end")\r
1128                 ,       shrt    = lng.match(/_end$/) ? lng.substr(0, lng.length - 4) : ""\r
1129                 ,       fn              = o[lng] || o[shrt]\r
1130                 ,       retVal  = "NC" // NC = No Callback\r
1131                 ,       args    = []\r
1132                 ,       $P              = hasPane ? $Ps[pane] : 0\r
1133                 ;\r
1134                 if (hasPane && !$P) // a pane is specified, but does not exist!\r
1135                         return retVal;\r
1136                 if ( !hasPane && $.type(pane) === "boolean" ) {\r
1137                         skipBoundEvents = pane; // allow pane param to be skipped for Layout callback\r
1138                         pane = "";\r
1139                 }\r
1140 \r
1141                 // first trigger the callback set in the options\r
1142                 if (fn) {\r
1143                         try {\r
1144                                 // convert function name (string) to function object\r
1145                                 if (isStr( fn )) {\r
1146                                         if (fn.match(/,/)) {\r
1147                                                 // function name cannot contain a comma, \r
1148                                                 // so must be a function name AND a parameter to pass\r
1149                                                 args = fn.split(",")\r
1150                                                 ,       fn = eval(args[0]);\r
1151                                         }\r
1152                                         else // just the name of an external function?\r
1153                                                 fn = eval(fn);\r
1154                                 }\r
1155                                 // execute the callback, if exists\r
1156                                 if ($.isFunction( fn )) {\r
1157                                         if (args.length)\r
1158                                                 retVal = g(fn)(args[1]); // pass the argument parsed from 'list'\r
1159                                         else if ( hasPane )\r
1160                                                 // pass data: pane-name, pane-element, pane-state, pane-options, and layout-name\r
1161                                                 retVal = g(fn)( pane, $Ps[pane], s, o, lName );\r
1162                                         else // must be a layout/container callback - pass suitable info\r
1163                                                 retVal = g(fn)( Instance, s, o, lName );\r
1164                                 }\r
1165                         }\r
1166                         catch (ex) {\r
1167                                 _log( options.errors.callbackError.replace(/EVENT/, $.trim((pane || "") +" "+ lng)), false );\r
1168                                 if ($.type(ex) === "string" && string.length)\r
1169                                         _log("Exception:  "+ ex, false );\r
1170                         }\r
1171                 }\r
1172 \r
1173                 // trigger additional events bound directly to the pane\r
1174                 if (!skipBoundEvents && retVal !== false) {\r
1175                         if ( hasPane ) { // PANE events can be bound to each pane-elements\r
1176                                 o       = options[pane];\r
1177                                 s       = state[pane];\r
1178                                 $P.triggerHandler("layoutpane"+ lng, [ pane, $P, s, o, lName ]);\r
1179                                 if (shrt)\r
1180                                         $P.triggerHandler("layoutpane"+ shrt, [ pane, $P, s, o, lName ]);\r
1181                         }\r
1182                         else { // LAYOUT events can be bound to the container-element\r
1183                                 $N.triggerHandler("layout"+ lng, [ Instance, s, o, lName ]);\r
1184                                 if (shrt)\r
1185                                         $N.triggerHandler("layout"+ shrt, [ Instance, s, o, lName ]);\r
1186                         }\r
1187                 }\r
1188 \r
1189                 // ALWAYS resizeChildren after an onresize_end event - even during initialization\r
1190                 // IGNORE onsizecontent_end event because causes child-layouts to resize TWICE\r
1191                 if (hasPane && evtName === "onresize_end") // BAD: || evtName === "onsizecontent_end"\r
1192                         resizeChildren(pane+"", true); // compiler hack -force string\r
1193 \r
1194                 return retVal;\r
1195 \r
1196                 function g (f) { return f; }; // compiler hack\r
1197         }\r
1198 \r
1199 \r
1200         /**\r
1201          * cure iframe display issues in IE & other browsers\r
1202          */\r
1203 ,       _fixIframe = function (pane) {\r
1204                 if (browser.mozilla) return; // skip FireFox - it auto-refreshes iframes onShow\r
1205                 var $P = $Ps[pane];\r
1206                 // if the 'pane' is an iframe, do it\r
1207                 if (state[pane].tagName === "IFRAME")\r
1208                         $P.css(_c.hidden).css(_c.visible); \r
1209                 else // ditto for any iframes INSIDE the pane\r
1210                         $P.find('IFRAME').css(_c.hidden).css(_c.visible);\r
1211         }\r
1212 \r
1213         /**\r
1214          * @param  {string}             pane            Can accept ONLY a 'pane' (east, west, etc)\r
1215          * @param  {number=}            outerSize       (optional) Can pass a width, allowing calculations BEFORE element is resized\r
1216          * @return {number}             Returns the innerHeight/Width of el by subtracting padding and borders\r
1217          */\r
1218 ,       cssSize = function (pane, outerSize) {\r
1219                 var fn = _c[pane].dir=="horz" ? cssH : cssW;\r
1220                 return fn($Ps[pane], outerSize);\r
1221         }\r
1222 \r
1223         /**\r
1224          * @param  {string}             pane            Can accept ONLY a 'pane' (east, west, etc)\r
1225          * @return {Object}             Returns hash of minWidth & minHeight\r
1226          */\r
1227 ,       cssMinDims = function (pane) {\r
1228                 // minWidth/Height means CSS width/height = 1px\r
1229                 var     $P      = $Ps[pane]\r
1230                 ,       dir     = _c[pane].dir\r
1231                 ,       d       = {\r
1232                                 minWidth:       1001 - cssW($P, 1000)\r
1233                         ,       minHeight:      1001 - cssH($P, 1000)\r
1234                         }\r
1235                 ;\r
1236                 if (dir === "horz") d.minSize = d.minHeight;\r
1237                 if (dir === "vert") d.minSize = d.minWidth;\r
1238                 return d;\r
1239         }\r
1240 \r
1241         // TODO: see if these methods can be made more useful...\r
1242         // TODO: *maybe* return cssW/H from these so caller can use this info\r
1243 \r
1244         /**\r
1245          * @param {(string|!Object)}            el\r
1246          * @param {number=}                             outerWidth\r
1247          * @param {boolean=}                            [autoHide=false]\r
1248          */\r
1249 ,       setOuterWidth = function (el, outerWidth, autoHide) {\r
1250                 var $E = el, w;\r
1251                 if (isStr(el)) $E = $Ps[el]; // west\r
1252                 else if (!el.jquery) $E = $(el);\r
1253                 w = cssW($E, outerWidth);\r
1254                 $E.css({ width: w });\r
1255                 if (w > 0) {\r
1256                         if (autoHide && $E.data('autoHidden') && $E.innerHeight() > 0) {\r
1257                                 $E.show().data('autoHidden', false);\r
1258                                 if (!browser.mozilla) // FireFox refreshes iframes - IE does not\r
1259                                         // make hidden, then visible to 'refresh' display after animation\r
1260                                         $E.css(_c.hidden).css(_c.visible);\r
1261                         }\r
1262                 }\r
1263                 else if (autoHide && !$E.data('autoHidden'))\r
1264                         $E.hide().data('autoHidden', true);\r
1265         }\r
1266 \r
1267         /**\r
1268          * @param {(string|!Object)}            el\r
1269          * @param {number=}                             outerHeight\r
1270          * @param {boolean=}                            [autoHide=false]\r
1271          */\r
1272 ,       setOuterHeight = function (el, outerHeight, autoHide) {\r
1273                 var $E = el, h;\r
1274                 if (isStr(el)) $E = $Ps[el]; // west\r
1275                 else if (!el.jquery) $E = $(el);\r
1276                 h = cssH($E, outerHeight);\r
1277                 $E.css({ height: h, visibility: "visible" }); // may have been 'hidden' by sizeContent\r
1278                 if (h > 0 && $E.innerWidth() > 0) {\r
1279                         if (autoHide && $E.data('autoHidden')) {\r
1280                                 $E.show().data('autoHidden', false);\r
1281                                 if (!browser.mozilla) // FireFox refreshes iframes - IE does not\r
1282                                         $E.css(_c.hidden).css(_c.visible);\r
1283                         }\r
1284                 }\r
1285                 else if (autoHide && !$E.data('autoHidden'))\r
1286                         $E.hide().data('autoHidden', true);\r
1287         }\r
1288 \r
1289 \r
1290         /**\r
1291          * Converts any 'size' params to a pixel/integer size, if not already\r
1292          * If 'auto' or a decimal/percentage is passed as 'size', a pixel-size is calculated\r
1293          *\r
1294         /**\r
1295          * @param  {string}                             pane\r
1296          * @param  {(string|number)=}   size\r
1297          * @param  {string=}                            [dir]\r
1298          * @return {number}\r
1299          */\r
1300 ,       _parseSize = function (pane, size, dir) {\r
1301                 if (!dir) dir = _c[pane].dir;\r
1302 \r
1303                 if (isStr(size) && size.match(/%/))\r
1304                         size = (size === '100%') ? -1 : parseInt(size, 10) / 100; // convert % to decimal\r
1305 \r
1306                 if (size === 0)\r
1307                         return 0;\r
1308                 else if (size >= 1)\r
1309                         return parseInt(size, 10);\r
1310 \r
1311                 var o = options, avail = 0;\r
1312                 if (dir=="horz") // north or south or center.minHeight\r
1313                         avail = sC.innerHeight - ($Ps.north ? o.north.spacing_open : 0) - ($Ps.south ? o.south.spacing_open : 0);\r
1314                 else if (dir=="vert") // east or west or center.minWidth\r
1315                         avail = sC.innerWidth - ($Ps.west ? o.west.spacing_open : 0) - ($Ps.east ? o.east.spacing_open : 0);\r
1316 \r
1317                 if (size === -1) // -1 == 100%\r
1318                         return avail;\r
1319                 else if (size > 0) // percentage, eg: .25\r
1320                         return round(avail * size);\r
1321                 else if (pane=="center")\r
1322                         return 0;\r
1323                 else { // size < 0 || size=='auto' || size==Missing || size==Invalid\r
1324                         // auto-size the pane\r
1325                         var     dim     = (dir === "horz" ? "height" : "width")\r
1326                         ,       $P      = $Ps[pane]\r
1327                         ,       $C      = dim === 'height' ? $Cs[pane] : false\r
1328                         ,       vis     = $.layout.showInvisibly($P) // show pane invisibly if hidden\r
1329                         ,       szP     = $P.css(dim) // SAVE current pane size\r
1330                         ,       szC     = $C ? $C.css(dim) : 0 // SAVE current content size\r
1331                         ;\r
1332                         $P.css(dim, "auto");\r
1333                         if ($C) $C.css(dim, "auto");\r
1334                         size = (dim === "height") ? $P.outerHeight() : $P.outerWidth(); // MEASURE\r
1335                         $P.css(dim, szP).css(vis); // RESET size & visibility\r
1336                         if ($C) $C.css(dim, szC);\r
1337                         return size;\r
1338                 }\r
1339         }\r
1340 \r
1341         /**\r
1342          * Calculates current 'size' (outer-width or outer-height) of a border-pane - optionally with 'pane-spacing' added\r
1343          *\r
1344          * @param  {(string|!Object)}   pane\r
1345          * @param  {boolean=}                   [inclSpace=false]\r
1346          * @return {number}                             Returns EITHER Width for east/west panes OR Height for north/south panes\r
1347          */\r
1348 ,       getPaneSize = function (pane, inclSpace) {\r
1349                 var \r
1350                         $P      = $Ps[pane]\r
1351                 ,       o       = options[pane]\r
1352                 ,       s       = state[pane]\r
1353                 ,       oSp     = (inclSpace ? o.spacing_open : 0)\r
1354                 ,       cSp     = (inclSpace ? o.spacing_closed : 0)\r
1355                 ;\r
1356                 if (!$P || s.isHidden)\r
1357                         return 0;\r
1358                 else if (s.isClosed || (s.isSliding && inclSpace))\r
1359                         return cSp;\r
1360                 else if (_c[pane].dir === "horz")\r
1361                         return $P.outerHeight() + oSp;\r
1362                 else // dir === "vert"\r
1363                         return $P.outerWidth() + oSp;\r
1364         }\r
1365 \r
1366         /**\r
1367          * Calculate min/max pane dimensions and limits for resizing\r
1368          *\r
1369          * @param  {string}             pane\r
1370          * @param  {boolean=}   [slide=false]\r
1371          */\r
1372 ,       setSizeLimits = function (pane, slide) {\r
1373                 if (!isInitialized()) return;\r
1374                 var \r
1375                         o                               = options[pane]\r
1376                 ,       s                               = state[pane]\r
1377                 ,       c                               = _c[pane]\r
1378                 ,       dir                             = c.dir\r
1379                 ,       type                    = c.sizeType.toLowerCase()\r
1380                 ,       isSliding               = (slide != undefined ? slide : s.isSliding) // only open() passes 'slide' param\r
1381                 ,       $P                              = $Ps[pane]\r
1382                 ,       paneSpacing             = o.spacing_open\r
1383                 //      measure the pane on the *opposite side* from this pane\r
1384                 ,       altPane                 = _c.oppositeEdge[pane]\r
1385                 ,       altS                    = state[altPane]\r
1386                 ,       $altP                   = $Ps[altPane]\r
1387                 ,       altPaneSize             = (!$altP || altS.isVisible===false || altS.isSliding ? 0 : (dir=="horz" ? $altP.outerHeight() : $altP.outerWidth()))\r
1388                 ,       altPaneSpacing  = ((!$altP || altS.isHidden ? 0 : options[altPane][ altS.isClosed !== false ? "spacing_closed" : "spacing_open" ]) || 0)\r
1389                 //      limitSize prevents this pane from 'overlapping' opposite pane\r
1390                 ,       containerSize   = (dir=="horz" ? sC.innerHeight : sC.innerWidth)\r
1391                 ,       minCenterDims   = cssMinDims("center")\r
1392                 ,       minCenterSize   = dir=="horz" ? max(options.center.minHeight, minCenterDims.minHeight) : max(options.center.minWidth, minCenterDims.minWidth)\r
1393                 //      if pane is 'sliding', then ignore center and alt-pane sizes - because 'overlays' them\r
1394                 ,       limitSize               = (containerSize - paneSpacing - (isSliding ? 0 : (_parseSize("center", minCenterSize, dir) + altPaneSize + altPaneSpacing)))\r
1395                 ,       minSize                 = s.minSize = max( _parseSize(pane, o.minSize), cssMinDims(pane).minSize )\r
1396                 ,       maxSize                 = s.maxSize = min( (o.maxSize ? _parseSize(pane, o.maxSize) : 100000), limitSize )\r
1397                 ,       r                               = s.resizerPosition = {} // used to set resizing limits\r
1398                 ,       top                             = sC.inset.top\r
1399                 ,       left                    = sC.inset.left\r
1400                 ,       W                               = sC.innerWidth\r
1401                 ,       H                               = sC.innerHeight\r
1402                 ,       rW                              = o.spacing_open // subtract resizer-width to get top/left position for south/east\r
1403                 ;\r
1404                 switch (pane) {\r
1405                         case "north":   r.min = top + minSize;\r
1406                                                         r.max = top + maxSize;\r
1407                                                         break;\r
1408                         case "west":    r.min = left + minSize;\r
1409                                                         r.max = left + maxSize;\r
1410                                                         break;\r
1411                         case "south":   r.min = top + H - maxSize - rW;\r
1412                                                         r.max = top + H - minSize - rW;\r
1413                                                         break;\r
1414                         case "east":    r.min = left + W - maxSize - rW;\r
1415                                                         r.max = left + W - minSize - rW;\r
1416                                                         break;\r
1417                 };\r
1418         }\r
1419 \r
1420         /**\r
1421          * Returns data for setting the size/position of center pane. Also used to set Height for east/west panes\r
1422          *\r
1423          * @return JSON  Returns a hash of all dimensions: top, bottom, left, right, (outer) width and (outer) height\r
1424          */\r
1425 ,       calcNewCenterPaneDims = function () {\r
1426                 var d = {\r
1427                         top:    getPaneSize("north", true) // true = include 'spacing' value for pane\r
1428                 ,       bottom: getPaneSize("south", true)\r
1429                 ,       left:   getPaneSize("west", true)\r
1430                 ,       right:  getPaneSize("east", true)\r
1431                 ,       width:  0\r
1432                 ,       height: 0\r
1433                 };\r
1434 \r
1435                 // NOTE: sC = state.container\r
1436                 // calc center-pane outer dimensions\r
1437                 d.width         = sC.innerWidth - d.left - d.right;  // outerWidth\r
1438                 d.height        = sC.innerHeight - d.bottom - d.top; // outerHeight\r
1439                 // add the 'container border/padding' to get final positions relative to the container\r
1440                 d.top           += sC.inset.top;\r
1441                 d.bottom        += sC.inset.bottom;\r
1442                 d.left          += sC.inset.left;\r
1443                 d.right         += sC.inset.right;\r
1444 \r
1445                 return d;\r
1446         }\r
1447 \r
1448 \r
1449         /**\r
1450          * @param {!Object}             el\r
1451          * @param {boolean=}            [allStates=false]\r
1452          */\r
1453 ,       getHoverClasses = function (el, allStates) {\r
1454                 var\r
1455                         $El             = $(el)\r
1456                 ,       type    = $El.data("layoutRole")\r
1457                 ,       pane    = $El.data("layoutEdge")\r
1458                 ,       o               = options[pane]\r
1459                 ,       root    = o[type +"Class"]\r
1460                 ,       _pane   = "-"+ pane // eg: "-west"\r
1461                 ,       _open   = "-open"\r
1462                 ,       _closed = "-closed"\r
1463                 ,       _slide  = "-sliding"\r
1464                 ,       _hover  = "-hover " // NOTE the trailing space\r
1465                 ,       _state  = $El.hasClass(root+_closed) ? _closed : _open\r
1466                 ,       _alt    = _state === _closed ? _open : _closed\r
1467                 ,       classes = (root+_hover) + (root+_pane+_hover) + (root+_state+_hover) + (root+_pane+_state+_hover)\r
1468                 ;\r
1469                 if (allStates) // when 'removing' classes, also remove alternate-state classes\r
1470                         classes += (root+_alt+_hover) + (root+_pane+_alt+_hover);\r
1471 \r
1472                 if (type=="resizer" && $El.hasClass(root+_slide))\r
1473                         classes += (root+_slide+_hover) + (root+_pane+_slide+_hover);\r
1474 \r
1475                 return $.trim(classes);\r
1476         }\r
1477 ,       addHover        = function (evt, el) {\r
1478                 var $E = $(el || this);\r
1479                 if (evt && $E.data("layoutRole") === "toggler")\r
1480                         evt.stopPropagation(); // prevent triggering 'slide' on Resizer-bar\r
1481                 $E.addClass( getHoverClasses($E) );\r
1482         }\r
1483 ,       removeHover     = function (evt, el) {\r
1484                 var $E = $(el || this);\r
1485                 $E.removeClass( getHoverClasses($E, true) );\r
1486         }\r
1487 \r
1488 ,       onResizerEnter  = function (evt) { // ALSO called by toggler.mouseenter\r
1489                 var pane        = $(this).data("layoutEdge")\r
1490                 ,       s               = state[pane]\r
1491                 ,       $d              = $(document)\r
1492                 ;\r
1493                 // ignore closed-panes and mouse moving back & forth over resizer!\r
1494                 // also ignore if ANY pane is currently resizing\r
1495                 if ( s.isResizing || state.paneResizing ) return;\r
1496 \r
1497                 if (options.maskPanesEarly)\r
1498                         showMasks( pane, { resizing: true });\r
1499         }\r
1500 ,       onResizerLeave  = function (evt, el) {\r
1501                 var     e               = el || this // el is only passed when called by the timer\r
1502                 ,       pane    = $(e).data("layoutEdge")\r
1503                 ,       name    = pane +"ResizerLeave"\r
1504                 ,       $d              = $(document)\r
1505                 ;\r
1506                 timer.clear(pane+"_openSlider"); // cancel slideOpen timer, if set\r
1507                 timer.clear(name); // cancel enableSelection timer - may re/set below\r
1508                 // this method calls itself on a timer because it needs to allow\r
1509                 // enough time for dragging to kick-in and set the isResizing flag\r
1510                 // dragging has a 100ms delay set, so this delay must be >100\r
1511                 if (!el) // 1st call - mouseleave event\r
1512                         timer.set(name, function(){ onResizerLeave(evt, e); }, 200);\r
1513                 // if user is resizing, dragStop will reset everything, so skip it here\r
1514                 else if (options.maskPanesEarly && !state.paneResizing) // 2nd call - by timer\r
1515                         hideMasks();\r
1516         }\r
1517 \r
1518 /*\r
1519  * ###########################\r
1520  *   INITIALIZATION METHODS\r
1521  * ###########################\r
1522  */\r
1523 \r
1524         /**\r
1525          * Initialize the layout - called automatically whenever an instance of layout is created\r
1526          *\r
1527          * @see  none - triggered onInit\r
1528          * @return  mixed       true = fully initialized | false = panes not initialized (yet) | 'cancel' = abort\r
1529          */\r
1530 ,       _create = function () {\r
1531                 // initialize config/options\r
1532                 initOptions();\r
1533                 var o = options\r
1534                 ,       s = state;\r
1535 \r
1536                 // TEMP state so isInitialized returns true during init process\r
1537                 s.creatingLayout = true;\r
1538 \r
1539                 // init plugins for this layout, if there are any (eg: stateManagement)\r
1540                 runPluginCallbacks( Instance, $.layout.onCreate );\r
1541 \r
1542                 // options & state have been initialized, so now run beforeLoad callback\r
1543                 // onload will CANCEL layout creation if it returns false\r
1544                 if (false === _runCallbacks("onload_start"))\r
1545                         return 'cancel';\r
1546 \r
1547                 // initialize the container element\r
1548                 _initContainer();\r
1549 \r
1550                 // bind hotkey function - keyDown - if required\r
1551                 initHotkeys();\r
1552 \r
1553                 // bind window.onunload\r
1554                 $(window).bind("unload."+ sID, unload);\r
1555 \r
1556                 // init plugins for this layout, if there are any (eg: customButtons)\r
1557                 runPluginCallbacks( Instance, $.layout.onLoad );\r
1558 \r
1559                 // if layout elements are hidden, then layout WILL NOT complete initialization!\r
1560                 // initLayoutElements will set initialized=true and run the onload callback IF successful\r
1561                 if (o.initPanes) _initLayoutElements();\r
1562 \r
1563                 delete s.creatingLayout;\r
1564 \r
1565                 return state.initialized;\r
1566         }\r
1567 \r
1568         /**\r
1569          * Initialize the layout IF not already\r
1570          *\r
1571          * @see  All methods in Instance run this test\r
1572          * @return  boolean     true = layoutElements have been initialized | false = panes are not initialized (yet)\r
1573          */\r
1574 ,       isInitialized = function () {\r
1575                 if (state.initialized || state.creatingLayout) return true;     // already initialized\r
1576                 else return _initLayoutElements();      // try to init panes NOW\r
1577         }\r
1578 \r
1579         /**\r
1580          * Initialize the layout - called automatically whenever an instance of layout is created\r
1581          *\r
1582          * @see  _create() & isInitialized\r
1583          * @param {boolean=}            [retry=false]   // indicates this is a 2nd try\r
1584          * @return  An object pointer to the instance created\r
1585          */\r
1586 ,       _initLayoutElements = function (retry) {\r
1587                 // initialize config/options\r
1588                 var o = options;\r
1589                 // CANNOT init panes inside a hidden container!\r
1590                 if (!$N.is(":visible")) {\r
1591                         // handle Chrome bug where popup window 'has no height'\r
1592                         // if layout is BODY element, try again in 50ms\r
1593                         // SEE: http://layout.jquery-dev.com/samples/test_popup_window.html\r
1594                         if ( !retry && browser.webkit && $N[0].tagName === "BODY" )\r
1595                                 setTimeout(function(){ _initLayoutElements(true); }, 50);\r
1596                         return false;\r
1597                 }\r
1598 \r
1599                 // a center pane is required, so make sure it exists\r
1600                 if (!getPane("center").length) {\r
1601                         return _log( o.errors.centerPaneMissing );\r
1602                 }\r
1603 \r
1604                 // TEMP state so isInitialized returns true during init process\r
1605                 state.creatingLayout = true;\r
1606 \r
1607                 // update Container dims\r
1608                 $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values\r
1609 \r
1610                 // initialize all layout elements\r
1611                 initPanes();    // size & position panes - calls initHandles() - which calls initResizable()\r
1612 \r
1613                 if (o.scrollToBookmarkOnLoad) {\r
1614                         var l = self.location;\r
1615                         if (l.hash) l.replace( l.hash ); // scrollTo Bookmark\r
1616                 }\r
1617 \r
1618                 // check to see if this layout 'nested' inside a pane\r
1619                 if (Instance.hasParentLayout)\r
1620                         o.resizeWithWindow = false;\r
1621                 // bind resizeAll() for 'this layout instance' to window.resize event\r
1622                 else if (o.resizeWithWindow)\r
1623                         $(window).bind("resize."+ sID, windowResize);\r
1624 \r
1625                 delete state.creatingLayout;\r
1626                 state.initialized = true;\r
1627 \r
1628                 // init plugins for this layout, if there are any\r
1629                 runPluginCallbacks( Instance, $.layout.onReady );\r
1630 \r
1631                 // now run the onload callback, if exists\r
1632                 _runCallbacks("onload_end");\r
1633 \r
1634                 return true; // elements initialized successfully\r
1635         }\r
1636 \r
1637         /**\r
1638          * Initialize nested layouts for a specific pane - can optionally pass layout-options\r
1639          *\r
1640          * @param {(string|Object)}     evt_or_pane     The pane being opened, ie: north, south, east, or west\r
1641          * @param {Object=}                     [opts]          Layout-options - if passed, will OVERRRIDE options[pane].children\r
1642          * @return  An object pointer to the layout instance created - or null\r
1643          */\r
1644 ,       createChildren = function (evt_or_pane, opts) {\r
1645                 var     pane = evtPane.call(this, evt_or_pane)\r
1646                 ,       $P      = $Ps[pane]\r
1647                 ;\r
1648                 if (!$P) return;\r
1649                 var     $C      = $Cs[pane]\r
1650                 ,       s       = state[pane]\r
1651                 ,       o       = options[pane]\r
1652                 ,       sm      = options.stateManagement || {}\r
1653                 ,       cos = opts ? (o.children = opts) : o.children\r
1654                 ;\r
1655                 if ( $.isPlainObject( cos ) )\r
1656                         cos = [ cos ]; // convert a hash to a 1-elem array\r
1657                 else if (!cos || !$.isArray( cos ))\r
1658                         return;\r
1659 \r
1660                 $.each( cos, function (idx, co) {\r
1661                         if ( !$.isPlainObject( co ) ) return;\r
1662 \r
1663                         // determine which element is supposed to be the 'child container'\r
1664                         // if pane has a 'containerSelector' OR a 'content-div', use those instead of the pane\r
1665                         var $containers = co.containerSelector ? $P.find( co.containerSelector ) : ($C || $P);\r
1666 \r
1667                         $containers.each(function(){\r
1668                                 var $cont       = $(this)\r
1669                                 ,       child   = $cont.data("layout") //       see if a child-layout ALREADY exists on this element\r
1670                                 ;\r
1671                                 // if no layout exists, but children are set, try to create the layout now\r
1672                                 if (!child) {\r
1673                                         // TODO: see about moving this to the stateManagement plugin, as a method\r
1674                                         // set a unique child-instance key for this layout, if not already set\r
1675                                         setInstanceKey({ container: $cont, options: co }, s );\r
1676                                         // If THIS layout has a hash in stateManagement.autoLoad,\r
1677                                         // then see if it also contains state-data for this child-layout\r
1678                                         // If so, copy the stateData to child.options.stateManagement.autoLoad\r
1679                                         if ( sm.includeChildren && state.stateData[pane] ) {\r
1680                                                 //      THIS layout's state was cached when its state was loaded\r
1681                                                 var     paneChildren = state.stateData[pane].children || {}\r
1682                                                 ,       childState      = paneChildren[ co.instanceKey ]\r
1683                                                 ,       co_sm           = co.stateManagement || (co.stateManagement = { autoLoad: true })\r
1684                                                 ;\r
1685                                                 // COPY the stateData into the autoLoad key\r
1686                                                 if ( co_sm.autoLoad === true && childState ) {\r
1687                                                         co_sm.autoSave                  = false; // disable autoSave because saving handled by parent-layout\r
1688                                                         co_sm.includeChildren   = true;  // cascade option - FOR NOW\r
1689                                                         co_sm.autoLoad = $.extend(true, {}, childState); // COPY the state-hash\r
1690                                                 }\r
1691                                         }\r
1692 \r
1693                                         // create the layout\r
1694                                         child = $cont.layout( co );\r
1695 \r
1696                                         // if successful, update data\r
1697                                         if (child) {\r
1698                                                 // add the child and update all layout-pointers\r
1699                                                 // MAY have already been done by child-layout calling parent.refreshChildren()\r
1700                                                 refreshChildren( pane, child );\r
1701                                         }\r
1702                                 }\r
1703                         });\r
1704                 });\r
1705         }\r
1706 \r
1707 ,       setInstanceKey = function (child, parentPaneState) {\r
1708                 // create a named key for use in state and instance branches\r
1709                 var     $c      = child.container\r
1710                 ,       o       = child.options\r
1711                 ,       sm      = o.stateManagement\r
1712                 ,       key     = o.instanceKey || $c.data("layoutInstanceKey")\r
1713                 ;\r
1714                 if (!key) key = (sm && sm.cookie ? sm.cookie.name : '') || o.name; // look for a name/key\r
1715                 if (!key) key = "layout"+ (++parentPaneState.childIdx); // if no name/key found, generate one\r
1716                 else key = key.replace(/[^\w-]/gi, '_').replace(/_{2,}/g, '_');  // ensure is valid as a hash key\r
1717                 o.instanceKey = key;\r
1718                 $c.data("layoutInstanceKey", key); // useful if layout is destroyed and then recreated\r
1719                 return key;\r
1720         }\r
1721 \r
1722         /**\r
1723          * @param {string}              pane            The pane being opened, ie: north, south, east, or west\r
1724          * @param {Object=}             newChild        New child-layout Instance to add to this pane\r
1725          */\r
1726 ,       refreshChildren = function (pane, newChild) {\r
1727                 var     $P      = $Ps[pane]\r
1728                 ,       pC      = children[pane]\r
1729                 ,       s       = state[pane]\r
1730                 ,       o\r
1731                 ;\r
1732                 // check for destroy()ed layouts and update the child pointers & arrays\r
1733                 if ($.isPlainObject( pC )) {\r
1734                         $.each( pC, function (key, child) {\r
1735                                 if (child.destroyed) delete pC[key]\r
1736                         });\r
1737                         // if no more children, remove the children hash\r
1738                         if ($.isEmptyObject( pC ))\r
1739                                 pC = children[pane] = null; // clear children hash\r
1740                 }\r
1741 \r
1742                 // see if there is a directly-nested layout inside this pane\r
1743                 // if there is, then there can be only ONE child-layout, so check that...\r
1744                 if (!newChild && !pC) {\r
1745                         newChild = $P.data("layout");\r
1746                 }\r
1747 \r
1748                 // if a newChild instance was passed, add it to children[pane]\r
1749                 if (newChild) {\r
1750                         // update child.state\r
1751                         newChild.hasParentLayout = true; // set parent-flag in child\r
1752                         // instanceKey is a key-name used in both state and children\r
1753                         o = newChild.options;\r
1754                         // set a unique child-instance key for this layout, if not already set\r
1755                         setInstanceKey( newChild, s );\r
1756                         // add pointer to pane.children hash\r
1757                         if (!pC) pC = children[pane] = {}; // create an empty children hash\r
1758                         pC[ o.instanceKey ] = newChild.container.data("layout"); // add childLayout instance\r
1759                 }\r
1760 \r
1761                 // ALWAYS refresh the pane.children alias, even if null\r
1762                 Instance[pane].children = children[pane];\r
1763 \r
1764                 // if newChild was NOT passed - see if there is a child layout NOW\r
1765                 if (!newChild) {\r
1766                         createChildren(pane); // MAY create a child and re-call this method\r
1767                 }\r
1768         }\r
1769 \r
1770 ,       windowResize = function () {\r
1771                 var     o = options\r
1772                 ,       delay = Number(o.resizeWithWindowDelay);\r
1773                 if (delay < 10) delay = 100; // MUST have a delay!\r
1774                 // resizing uses a delay-loop because the resize event fires repeatly - except in FF, but delay anyway\r
1775                 timer.clear("winResize"); // if already running\r
1776                 timer.set("winResize", function(){\r
1777                         timer.clear("winResize");\r
1778                         timer.clear("winResizeRepeater");\r
1779                         var dims = elDims( $N, o.inset );\r
1780                         // only trigger resizeAll() if container has changed size\r
1781                         if (dims.innerWidth !== sC.innerWidth || dims.innerHeight !== sC.innerHeight)\r
1782                                 resizeAll();\r
1783                 }, delay);\r
1784                 // ALSO set fixed-delay timer, if not already running\r
1785                 if (!timer.data["winResizeRepeater"]) setWindowResizeRepeater();\r
1786         }\r
1787 \r
1788 ,       setWindowResizeRepeater = function () {\r
1789                 var delay = Number(options.resizeWithWindowMaxDelay);\r
1790                 if (delay > 0)\r
1791                         timer.set("winResizeRepeater", function(){ setWindowResizeRepeater(); resizeAll(); }, delay);\r
1792         }\r
1793 \r
1794 ,       unload = function () {\r
1795                 var o = options;\r
1796 \r
1797                 _runCallbacks("onunload_start");\r
1798 \r
1799                 // trigger plugin callabacks for this layout (eg: stateManagement)\r
1800                 runPluginCallbacks( Instance, $.layout.onUnload );\r
1801 \r
1802                 _runCallbacks("onunload_end");\r
1803         }\r
1804 \r
1805         /**\r
1806          * Validate and initialize container CSS and events\r
1807          *\r
1808          * @see  _create()\r
1809          */\r
1810 ,       _initContainer = function () {\r
1811                 var\r
1812                         N               = $N[0] \r
1813                 ,       $H              = $("html")\r
1814                 ,       tag             = sC.tagName = N.tagName\r
1815                 ,       id              = sC.id = N.id\r
1816                 ,       cls             = sC.className = N.className\r
1817                 ,       o               = options\r
1818                 ,       name    = o.name\r
1819                 ,       props   = "position,margin,padding,border"\r
1820                 ,       css             = "layoutCSS"\r
1821                 ,       CSS             = {}\r
1822                 ,       hid             = "hidden" // used A LOT!\r
1823                 //      see if this container is a 'pane' inside an outer-layout\r
1824                 ,       parent  = $N.data("parentLayout")       // parent-layout Instance\r
1825                 ,       pane    = $N.data("layoutEdge")         // pane-name in parent-layout\r
1826                 ,       isChild = parent && pane\r
1827                 ,       num             = $.layout.cssNum\r
1828                 ,       $parent, n\r
1829                 ;\r
1830                 // sC = state.container\r
1831                 //sC.selector = $N.selector.split(".slice")[0];\r
1832                 sC.ref          = (o.name ? o.name +' layout / ' : '') + tag + (id ? "#"+id : cls ? '.['+cls+']' : ''); // used in messages\r
1833                 sC.isBody       = (tag === "BODY");\r
1834 \r
1835                 // try to find a parent-layout\r
1836                 if (!isChild && !sC.isBody) {\r
1837                         $parent = $N.closest("."+ $.layout.defaults.panes.paneClass);\r
1838                         parent  = $parent.data("parentLayout");\r
1839                         pane    = $parent.data("layoutEdge");\r
1840                         isChild = parent && pane;\r
1841                 }\r
1842 \r
1843                 $N      .data({\r
1844                                 layout: Instance\r
1845                         ,       layoutContainer: sID // FLAG to indicate this is a layout-container - contains unique internal ID\r
1846                         })\r
1847                         .addClass(o.containerClass)\r
1848                 ;\r
1849                 var layoutMethods = {\r
1850                         destroy:        ''\r
1851                 ,       initPanes:      ''\r
1852                 ,       resizeAll:      'resizeAll'\r
1853                 ,       resize:         'resizeAll'\r
1854                 };\r
1855                 // loop hash and bind all methods - include layoutID namespacing\r
1856                 for (name in layoutMethods) {\r
1857                         $N.bind("layout"+ name.toLowerCase() +"."+ sID, Instance[ layoutMethods[name] || name ]);\r
1858                 }\r
1859 \r
1860                 // if this container is another layout's 'pane', then set child/parent pointers\r
1861                 if (isChild) {\r
1862                         // update parent flag\r
1863                         Instance.hasParentLayout = true;\r
1864                         // set pointers to THIS child-layout (Instance) in parent-layout\r
1865                         parent.refreshChildren( pane, Instance );\r
1866                 }\r
1867 \r
1868                 // SAVE original container CSS for use in destroy()\r
1869                 if (!$N.data(css)) {\r
1870                         // handle props like overflow different for BODY & HTML - has 'system default' values\r
1871                         if (sC.isBody) {\r
1872                                 // SAVE <BODY> CSS\r
1873                                 $N.data(css, $.extend( styles($N, props), {\r
1874                                         height:         $N.css("height")\r
1875                                 ,       overflow:       $N.css("overflow")\r
1876                                 ,       overflowX:      $N.css("overflowX")\r
1877                                 ,       overflowY:      $N.css("overflowY")\r
1878                                 }));\r
1879                                 // ALSO SAVE <HTML> CSS\r
1880                                 $H.data(css, $.extend( styles($H, 'padding'), {\r
1881                                         height:         "auto" // FF would return a fixed px-size!\r
1882                                 ,       overflow:       $H.css("overflow")\r
1883                                 ,       overflowX:      $H.css("overflowX")\r
1884                                 ,       overflowY:      $H.css("overflowY")\r
1885                                 }));\r
1886                         }\r
1887                         else // handle props normally for non-body elements\r
1888                                 $N.data(css, styles($N, props+",top,bottom,left,right,width,height,overflow,overflowX,overflowY") );\r
1889                 }\r
1890 \r
1891                 try {\r
1892                         // common container CSS\r
1893                         CSS = {\r
1894                                 overflow:       hid\r
1895                         ,       overflowX:      hid\r
1896                         ,       overflowY:      hid\r
1897                         };\r
1898                         $N.css( CSS );\r
1899 \r
1900                         if (o.inset && !$.isPlainObject(o.inset)) {\r
1901                                 // can specify a single number for equal outset all-around\r
1902                                 n = parseInt(o.inset, 10) || 0\r
1903                                 o.inset = {\r
1904                                         top:    n\r
1905                                 ,       bottom: n\r
1906                                 ,       left:   n\r
1907                                 ,       right:  n\r
1908                                 };\r
1909                         }\r
1910 \r
1911                         // format html & body if this is a full page layout\r
1912                         if (sC.isBody) {\r
1913                                 // if HTML has padding, use this as an outer-spacing around BODY\r
1914                                 if (!o.outset) {\r
1915                                         // use padding from parent-elem (HTML) as outset\r
1916                                         o.outset = {\r
1917                                                 top:    num($H, "paddingTop")\r
1918                                         ,       bottom: num($H, "paddingBottom")\r
1919                                         ,       left:   num($H, "paddingLeft")\r
1920                                         ,       right:  num($H, "paddingRight")\r
1921                                         };\r
1922                                 }\r
1923                                 else if (!$.isPlainObject(o.outset)) {\r
1924                                         // can specify a single number for equal outset all-around\r
1925                                         n = parseInt(o.outset, 10) || 0\r
1926                                         o.outset = {\r
1927                                                 top:    n\r
1928                                         ,       bottom: n\r
1929                                         ,       left:   n\r
1930                                         ,       right:  n\r
1931                                         };\r
1932                                 }\r
1933                                 // HTML\r
1934                                 $H.css( CSS ).css({\r
1935                                         height:         "100%"\r
1936                                 ,       border:         "none"  // no border or padding allowed when using height = 100%\r
1937                                 ,       padding:        0               // ditto\r
1938                                 ,       margin:         0\r
1939                                 });\r
1940                                 // BODY\r
1941                                 if (browser.isIE6) {\r
1942                                         // IE6 CANNOT use the trick of setting absolute positioning on all 4 sides - must have 'height'\r
1943                                         $N.css({\r
1944                                                 width:          "100%"\r
1945                                         ,       height:         "100%"\r
1946                                         ,       border:         "none"  // no border or padding allowed when using height = 100%\r
1947                                         ,       padding:        0               // ditto\r
1948                                         ,       margin:         0\r
1949                                         ,       position:       "relative"\r
1950                                         });\r
1951                                         // convert body padding to an inset option - the border cannot be measured in IE6!\r
1952                                         if (!o.inset) o.inset = elDims( $N ).inset;\r
1953                                 }\r
1954                                 else { // use absolute positioning for BODY to allow borders & padding without overflow\r
1955                                         $N.css({\r
1956                                                 width:          "auto"\r
1957                                         ,       height:         "auto"\r
1958                                         ,       margin:         0\r
1959                                         ,       position:       "absolute"      // allows for border and padding on BODY\r
1960                                         });\r
1961                                         // apply edge-positioning created above\r
1962                                         $N.css( o.outset );\r
1963                                 }\r
1964                                 // set current layout-container dimensions\r
1965                                 $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values\r
1966                         }\r
1967                         else {\r
1968                                 // container MUST have 'position'\r
1969                                 var     p = $N.css("position");\r
1970                                 if (!p || !p.match(/(fixed|absolute|relative)/))\r
1971                                         $N.css("position","relative");\r
1972 \r
1973                                 // set current layout-container dimensions\r
1974                                 if ( $N.is(":visible") ) {\r
1975                                         $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT change insetX (padding) values\r
1976                                         if (sC.innerHeight < 1) // container has no 'height' - warn developer\r
1977                                                 _log( o.errors.noContainerHeight.replace(/CONTAINER/, sC.ref) );\r
1978                                 }\r
1979                         }\r
1980 \r
1981                         // if container has min-width/height, then enable scrollbar(s)\r
1982                         if ( num($N, "minWidth")  ) $N.parent().css("overflowX","auto");\r
1983                         if ( num($N, "minHeight") ) $N.parent().css("overflowY","auto");\r
1984 \r
1985                 } catch (ex) {}\r
1986         }\r
1987 \r
1988         /**\r
1989          * Bind layout hotkeys - if options enabled\r
1990          *\r
1991          * @see  _create() and addPane()\r
1992          * @param {string=}     [panes=""]      The edge(s) to process\r
1993          */\r
1994 ,       initHotkeys = function (panes) {\r
1995                 panes = panes ? panes.split(",") : _c.borderPanes;\r
1996                 // bind keyDown to capture hotkeys, if option enabled for ANY pane\r
1997                 $.each(panes, function (i, pane) {\r
1998                         var o = options[pane];\r
1999                         if (o.enableCursorHotkey || o.customHotkey) {\r
2000                                 $(document).bind("keydown."+ sID, keyDown); // only need to bind this ONCE\r
2001                                 return false; // BREAK - binding was done\r
2002                         }\r
2003                 });\r
2004         }\r
2005 \r
2006         /**\r
2007          * Build final OPTIONS data\r
2008          *\r
2009          * @see  _create()\r
2010          */\r
2011 ,       initOptions = function () {\r
2012                 var data, d, pane, key, val, i, c, o;\r
2013 \r
2014                 // reprocess user's layout-options to have correct options sub-key structure\r
2015                 opts = $.layout.transformData( opts, true ); // panes = default subkey\r
2016 \r
2017                 // auto-rename old options for backward compatibility\r
2018                 opts = $.layout.backwardCompatibility.renameAllOptions( opts );\r
2019 \r
2020                 // if user-options has 'panes' key (pane-defaults), clean it...\r
2021                 if (!$.isEmptyObject(opts.panes)) {\r
2022                         // REMOVE any pane-defaults that MUST be set per-pane\r
2023                         data = $.layout.optionsMap.noDefault;\r
2024                         for (i=0, c=data.length; i<c; i++) {\r
2025                                 key = data[i];\r
2026                                 delete opts.panes[key]; // OK if does not exist\r
2027                         }\r
2028                         // REMOVE any layout-options specified under opts.panes\r
2029                         data = $.layout.optionsMap.layout;\r
2030                         for (i=0, c=data.length; i<c; i++) {\r
2031                                 key = data[i];\r
2032                                 delete opts.panes[key]; // OK if does not exist\r
2033                         }\r
2034                 }\r
2035 \r
2036                 // MOVE any NON-layout-options from opts-root to opts.panes\r
2037                 data = $.layout.optionsMap.layout;\r
2038                 var rootKeys = $.layout.config.optionRootKeys;\r
2039                 for (key in opts) {\r
2040                         val = opts[key];\r
2041                         if ($.inArray(key, rootKeys) < 0 && $.inArray(key, data) < 0) {\r
2042                                 if (!opts.panes[key])\r
2043                                         opts.panes[key] = $.isPlainObject(val) ? $.extend(true, {}, val) : val;\r
2044                                 delete opts[key]\r
2045                         }\r
2046                 }\r
2047 \r
2048                 // START by updating ALL options from opts\r
2049                 $.extend(true, options, opts);\r
2050 \r
2051                 // CREATE final options (and config) for EACH pane\r
2052                 $.each(_c.allPanes, function (i, pane) {\r
2053 \r
2054                         // apply 'pane-defaults' to CONFIG.[PANE]\r
2055                         _c[pane] = $.extend(true, {}, _c.panes, _c[pane]);\r
2056 \r
2057                         d = options.panes;\r
2058                         o = options[pane];\r
2059 \r
2060                         // center-pane uses SOME keys in defaults.panes branch\r
2061                         if (pane === 'center') {\r
2062                                 // ONLY copy keys from opts.panes listed in: $.layout.optionsMap.center\r
2063                                 data = $.layout.optionsMap.center;              // list of 'center-pane keys'\r
2064                                 for (i=0, c=data.length; i<c; i++) {    // loop the list...\r
2065                                         key = data[i];\r
2066                                         // only need to use pane-default if pane-specific value not set\r
2067                                         if (!opts.center[key] && (opts.panes[key] || !o[key]))\r
2068                                                 o[key] = d[key]; // pane-default\r
2069                                 }\r
2070                         }\r
2071                         else {\r
2072                                 // border-panes use ALL keys in defaults.panes branch\r
2073                                 o = options[pane] = $.extend(true, {}, d, o); // re-apply pane-specific opts AFTER pane-defaults\r
2074                                 createFxOptions( pane );\r
2075                                 // ensure all border-pane-specific base-classes exist\r
2076                                 if (!o.resizerClass)    o.resizerClass  = "ui-layout-resizer";\r
2077                                 if (!o.togglerClass)    o.togglerClass  = "ui-layout-toggler";\r
2078                         }\r
2079                         // ensure we have base pane-class (ALL panes)\r
2080                         if (!o.paneClass) o.paneClass = "ui-layout-pane";\r
2081                 });\r
2082 \r
2083                 // update options.zIndexes if a zIndex-option specified\r
2084                 var zo  = opts.zIndex\r
2085                 ,       z       = options.zIndexes;\r
2086                 if (zo > 0) {\r
2087                         z.pane_normal           = zo;\r
2088                         z.content_mask          = max(zo+1, z.content_mask);    // MIN = +1\r
2089                         z.resizer_normal        = max(zo+2, z.resizer_normal);  // MIN = +2\r
2090                 }\r
2091 \r
2092                 // DELETE 'panes' key now that we are done - values were copied to EACH pane\r
2093                 delete options.panes;\r
2094 \r
2095 \r
2096                 function createFxOptions ( pane ) {\r
2097                         var     o = options[pane]\r
2098                         ,       d = options.panes;\r
2099                         // ensure fxSettings key to avoid errors\r
2100                         if (!o.fxSettings) o.fxSettings = {};\r
2101                         if (!d.fxSettings) d.fxSettings = {};\r
2102 \r
2103                         $.each(["_open","_close","_size"], function (i,n) { \r
2104                                 var\r
2105                                         sName           = "fxName"+ n\r
2106                                 ,       sSpeed          = "fxSpeed"+ n\r
2107                                 ,       sSettings       = "fxSettings"+ n\r
2108                                         // recalculate fxName according to specificity rules\r
2109                                 ,       fxName = o[sName] =\r
2110                                                 o[sName]        // options.west.fxName_open\r
2111                                         ||      d[sName]        // options.panes.fxName_open\r
2112                                         ||      o.fxName        // options.west.fxName\r
2113                                         ||      d.fxName        // options.panes.fxName\r
2114                                         ||      "none"          // MEANS $.layout.defaults.panes.fxName == "" || false || null || 0\r
2115                                 ,       fxExists        = $.effects && ($.effects[fxName] || ($.effects.effect && $.effects.effect[fxName]))\r
2116                                 ;\r
2117                                 // validate fxName to ensure is valid effect - MUST have effect-config data in options.effects\r
2118                                 if (fxName === "none" || !options.effects[fxName] || !fxExists)\r
2119                                         fxName = o[sName] = "none"; // effect not loaded OR unrecognized fxName\r
2120 \r
2121                                 // set vars for effects subkeys to simplify logic\r
2122                                 var     fx              = options.effects[fxName] || {} // effects.slide\r
2123                                 ,       fx_all  = fx.all        || null                         // effects.slide.all\r
2124                                 ,       fx_pane = fx[pane]      || null                         // effects.slide.west\r
2125                                 ;\r
2126                                 // create fxSpeed[_open|_close|_size]\r
2127                                 o[sSpeed] =\r
2128                                         o[sSpeed]                               // options.west.fxSpeed_open\r
2129                                 ||      d[sSpeed]                               // options.west.fxSpeed_open\r
2130                                 ||      o.fxSpeed                               // options.west.fxSpeed\r
2131                                 ||      d.fxSpeed                               // options.panes.fxSpeed\r
2132                                 ||      null                                    // DEFAULT - let fxSetting.duration control speed\r
2133                                 ;\r
2134                                 // create fxSettings[_open|_close|_size]\r
2135                                 o[sSettings] = $.extend(\r
2136                                         true\r
2137                                 ,       {}\r
2138                                 ,       fx_all                                  // effects.slide.all\r
2139                                 ,       fx_pane                                 // effects.slide.west\r
2140                                 ,       d.fxSettings                    // options.panes.fxSettings\r
2141                                 ,       o.fxSettings                    // options.west.fxSettings\r
2142                                 ,       d[sSettings]                    // options.panes.fxSettings_open\r
2143                                 ,       o[sSettings]                    // options.west.fxSettings_open\r
2144                                 );\r
2145                         });\r
2146 \r
2147                         // DONE creating action-specific-settings for this pane,\r
2148                         // so DELETE generic options - are no longer meaningful\r
2149                         delete o.fxName;\r
2150                         delete o.fxSpeed;\r
2151                         delete o.fxSettings;\r
2152                 }\r
2153         }\r
2154 \r
2155         /**\r
2156          * Initialize module objects, styling, size and position for all panes\r
2157          *\r
2158          * @see  _initElements()\r
2159          * @param {string}      pane            The pane to process\r
2160          */\r
2161 ,       getPane = function (pane) {\r
2162                 var sel = options[pane].paneSelector\r
2163                 if (sel.substr(0,1)==="#") // ID selector\r
2164                         // NOTE: elements selected 'by ID' DO NOT have to be 'children'\r
2165                         return $N.find(sel).eq(0);\r
2166                 else { // class or other selector\r
2167                         var $P = $N.children(sel).eq(0);\r
2168                         // look for the pane nested inside a 'form' element\r
2169                         return $P.length ? $P : $N.children("form:first").children(sel).eq(0);\r
2170                 }\r
2171         }\r
2172 \r
2173         /**\r
2174          * @param {Object=}             evt\r
2175          */\r
2176 ,       initPanes = function (evt) {\r
2177                 // stopPropagation if called by trigger("layoutinitpanes") - use evtPane utility \r
2178                 evtPane(evt);\r
2179 \r
2180                 // NOTE: do north & south FIRST so we can measure their height - do center LAST\r
2181                 $.each(_c.allPanes, function (idx, pane) {\r
2182                         addPane( pane, true );\r
2183                 });\r
2184 \r
2185                 // init the pane-handles NOW in case we have to hide or close the pane below\r
2186                 initHandles();\r
2187 \r
2188                 // now that all panes have been initialized and initially-sized,\r
2189                 // make sure there is really enough space available for each pane\r
2190                 $.each(_c.borderPanes, function (i, pane) {\r
2191                         if ($Ps[pane] && state[pane].isVisible) { // pane is OPEN\r
2192                                 setSizeLimits(pane);\r
2193                                 makePaneFit(pane); // pane may be Closed, Hidden or Resized by makePaneFit()\r
2194                         }\r
2195                 });\r
2196                 // size center-pane AGAIN in case we 'closed' a border-pane in loop above\r
2197                 sizeMidPanes("center");\r
2198 \r
2199                 //      Chrome/Webkit sometimes fires callbacks BEFORE it completes resizing!\r
2200                 //      Before RC30.3, there was a 10ms delay here, but that caused layout \r
2201                 //      to load asynchrously, which is BAD, so try skipping delay for now\r
2202 \r
2203                 // process pane contents and callbacks, and init/resize child-layout if exists\r
2204                 $.each(_c.allPanes, function (idx, pane) {\r
2205                         afterInitPane(pane);\r
2206                 });\r
2207         }\r
2208 \r
2209         /**\r
2210          * Add a pane to the layout - subroutine of initPanes()\r
2211          *\r
2212          * @see  initPanes()\r
2213          * @param {string}      pane                    The pane to process\r
2214          * @param {boolean=}    [force=false]   Size content after init\r
2215          */\r
2216 ,       addPane = function (pane, force) {\r
2217                 if ( !force && !isInitialized() ) return;\r
2218                 var\r
2219                         o               = options[pane]\r
2220                 ,       s               = state[pane]\r
2221                 ,       c               = _c[pane]\r
2222                 ,       dir             = c.dir\r
2223                 ,       fx              = s.fx\r
2224                 ,       spacing = o.spacing_open || 0\r
2225                 ,       isCenter = (pane === "center")\r
2226                 ,       CSS             = {}\r
2227                 ,       $P              = $Ps[pane]\r
2228                 ,       size, minSize, maxSize, child\r
2229                 ;\r
2230                 // if pane-pointer already exists, remove the old one first\r
2231                 if ($P)\r
2232                         removePane( pane, false, true, false );\r
2233                 else\r
2234                         $Cs[pane] = false; // init\r
2235 \r
2236                 $P = $Ps[pane] = getPane(pane);\r
2237                 if (!$P.length) {\r
2238                         $Ps[pane] = false; // logic\r
2239                         return;\r
2240                 }\r
2241 \r
2242                 // SAVE original Pane CSS\r
2243                 if (!$P.data("layoutCSS")) {\r
2244                         var props = "position,top,left,bottom,right,width,height,overflow,zIndex,display,backgroundColor,padding,margin,border";\r
2245                         $P.data("layoutCSS", styles($P, props));\r
2246                 }\r
2247 \r
2248                 // create alias for pane data in Instance - initHandles will add more\r
2249                 Instance[pane] = {\r
2250                         name:           pane\r
2251                 ,       pane:           $Ps[pane]\r
2252                 ,       content:        $Cs[pane]\r
2253                 ,       options:        options[pane]\r
2254                 ,       state:          state[pane]\r
2255                 ,       children:       children[pane]\r
2256                 };\r
2257 \r
2258                 // add classes, attributes & events\r
2259                 $P      .data({\r
2260                                 parentLayout:   Instance                // pointer to Layout Instance\r
2261                         ,       layoutPane:             Instance[pane]  // NEW pointer to pane-alias-object\r
2262                         ,       layoutEdge:             pane\r
2263                         ,       layoutRole:             "pane"\r
2264                         })\r
2265                         .css(c.cssReq).css("zIndex", options.zIndexes.pane_normal)\r
2266                         .css(o.applyDemoStyles ? c.cssDemo : {}) // demo styles\r
2267                         .addClass( o.paneClass +" "+ o.paneClass+"-"+pane ) // default = "ui-layout-pane ui-layout-pane-west" - may be a dupe of 'paneSelector'\r
2268                         .bind("mouseenter."+ sID, addHover )\r
2269                         .bind("mouseleave."+ sID, removeHover )\r
2270                         ;\r
2271                 var paneMethods = {\r
2272                                 hide:                           ''\r
2273                         ,       show:                           ''\r
2274                         ,       toggle:                         ''\r
2275                         ,       close:                          ''\r
2276                         ,       open:                           ''\r
2277                         ,       slideOpen:                      ''\r
2278                         ,       slideClose:                     ''\r
2279                         ,       slideToggle:            ''\r
2280                         ,       size:                           'sizePane'\r
2281                         ,       sizePane:                       'sizePane'\r
2282                         ,       sizeContent:            ''\r
2283                         ,       sizeHandles:            ''\r
2284                         ,       enableClosable:         ''\r
2285                         ,       disableClosable:        ''\r
2286                         ,       enableSlideable:        ''\r
2287                         ,       disableSlideable:       ''\r
2288                         ,       enableResizable:        ''\r
2289                         ,       disableResizable:       ''\r
2290                         ,       swapPanes:                      'swapPanes'\r
2291                         ,       swap:                           'swapPanes'\r
2292                         ,       move:                           'swapPanes'\r
2293                         ,       removePane:                     'removePane'\r
2294                         ,       remove:                         'removePane'\r
2295                         ,       createChildren:         ''\r
2296                         ,       resizeChildren:         ''\r
2297                         ,       resizeAll:                      'resizeAll'\r
2298                         ,       resizeLayout:           'resizeAll'\r
2299                         }\r
2300                 ,       name;\r
2301                 // loop hash and bind all methods - include layoutID namespacing\r
2302                 for (name in paneMethods) {\r
2303                         $P.bind("layoutpane"+ name.toLowerCase() +"."+ sID, Instance[ paneMethods[name] || name ]);\r
2304                 }\r
2305 \r
2306                 // see if this pane has a 'scrolling-content element'\r
2307                 initContent(pane, false); // false = do NOT sizeContent() - called later\r
2308 \r
2309                 if (!isCenter) {\r
2310                         // call _parseSize AFTER applying pane classes & styles - but before making visible (if hidden)\r
2311                         // if o.size is auto or not valid, then MEASURE the pane and use that as its 'size'\r
2312                         size    = s.size = _parseSize(pane, o.size);\r
2313                         minSize = _parseSize(pane,o.minSize) || 1;\r
2314                         maxSize = _parseSize(pane,o.maxSize) || 100000;\r
2315                         if (size > 0) size = max(min(size, maxSize), minSize);\r
2316                         s.autoResize = o.autoResize; // used with percentage sizes\r
2317 \r
2318                         // state for border-panes\r
2319                         s.isClosed  = false; // true = pane is closed\r
2320                         s.isSliding = false; // true = pane is currently open by 'sliding' over adjacent panes\r
2321                         s.isResizing= false; // true = pane is in process of being resized\r
2322                         s.isHidden      = false; // true = pane is hidden - no spacing, resizer or toggler is visible!\r
2323 \r
2324                         // array for 'pin buttons' whose classNames are auto-updated on pane-open/-close\r
2325                         if (!s.pins) s.pins = [];\r
2326                 }\r
2327                 //      states common to ALL panes\r
2328                 s.tagName       = $P[0].tagName;\r
2329                 s.edge          = pane;         // useful if pane is (or about to be) 'swapped' - easy find out where it is (or is going)\r
2330                 s.noRoom        = false;        // true = pane 'automatically' hidden due to insufficient room - will unhide automatically\r
2331                 s.isVisible     = true;         // false = pane is invisible - closed OR hidden - simplify logic\r
2332 \r
2333                 // init pane positioning\r
2334                 setPanePosition( pane );\r
2335 \r
2336                 // if pane is not visible, \r
2337                 if (dir === "horz") // north or south pane\r
2338                         CSS.height = cssH($P, size);\r
2339                 else if (dir === "vert") // east or west pane\r
2340                         CSS.width = cssW($P, size);\r
2341                 //else if (isCenter) {}\r
2342 \r
2343                 $P.css(CSS); // apply size -- top, bottom & height will be set by sizeMidPanes\r
2344                 if (dir != "horz") sizeMidPanes(pane, true); // true = skipCallback\r
2345 \r
2346                 // if manually adding a pane AFTER layout initialization, then...\r
2347                 if (state.initialized) {\r
2348                         initHandles( pane );\r
2349                         initHotkeys( pane );\r
2350                 }\r
2351 \r
2352                 // close or hide the pane if specified in settings\r
2353                 if (o.initClosed && o.closable && !o.initHidden)\r
2354                         close(pane, true, true); // true, true = force, noAnimation\r
2355                 else if (o.initHidden || o.initClosed)\r
2356                         hide(pane); // will be completely invisible - no resizer or spacing\r
2357                 else if (!s.noRoom)\r
2358                         // make the pane visible - in case was initially hidden\r
2359                         $P.css("display","block");\r
2360                 // ELSE setAsOpen() - called later by initHandles()\r
2361 \r
2362                 // RESET visibility now - pane will appear IF display:block\r
2363                 $P.css("visibility","visible");\r
2364 \r
2365                 // check option for auto-handling of pop-ups & drop-downs\r
2366                 if (o.showOverflowOnHover)\r
2367                         $P.hover( allowOverflow, resetOverflow );\r
2368 \r
2369                 // if manually adding a pane AFTER layout initialization, then...\r
2370                 if (state.initialized) {\r
2371                         afterInitPane( pane );\r
2372                 }\r
2373         }\r
2374 \r
2375 ,       afterInitPane = function (pane) {\r
2376                 var     $P      = $Ps[pane]\r
2377                 ,       s       = state[pane]\r
2378                 ,       o       = options[pane]\r
2379                 ;\r
2380                 if (!$P) return;\r
2381 \r
2382                 // see if there is a directly-nested layout inside this pane\r
2383                 if ($P.data("layout"))\r
2384                         refreshChildren( pane, $P.data("layout") );\r
2385 \r
2386                 // process pane contents and callbacks, and init/resize child-layout if exists\r
2387                 if (s.isVisible) { // pane is OPEN\r
2388                         if (state.initialized) // this pane was added AFTER layout was created\r
2389                                 resizeAll(); // will also sizeContent\r
2390                         else\r
2391                                 sizeContent(pane);\r
2392 \r
2393                         if (o.triggerEventsOnLoad)\r
2394                                 _runCallbacks("onresize_end", pane);\r
2395                         else // automatic if onresize called, otherwise call it specifically\r
2396                                 // resize child - IF inner-layout already exists (created before this layout)\r
2397                                 resizeChildren(pane, true); // a previously existing childLayout\r
2398                 }\r
2399 \r
2400                 // init childLayouts - even if pane is not visible\r
2401                 if (o.initChildren && o.children)\r
2402                         createChildren(pane);\r
2403         }\r
2404 \r
2405         /**\r
2406          * @param {string=}     panes           The pane(s) to process\r
2407          */\r
2408 ,       setPanePosition = function (panes) {\r
2409                 panes = panes ? panes.split(",") : _c.borderPanes;\r
2410 \r
2411                 // create toggler DIVs for each pane, and set object pointers for them, eg: $R.north = north toggler DIV\r
2412                 $.each(panes, function (i, pane) {\r
2413                         var $P  = $Ps[pane]\r
2414                         ,       $R      = $Rs[pane]\r
2415                         ,       o       = options[pane]\r
2416                         ,       s       = state[pane]\r
2417                         ,       side =  _c[pane].side\r
2418                         ,       CSS     = {}\r
2419                         ;\r
2420                         if (!$P) return; // pane does not exist - skip\r
2421 \r
2422                         // set css-position to account for container borders & padding\r
2423                         switch (pane) {\r
2424                                 case "north":   CSS.top         = sC.inset.top;\r
2425                                                                 CSS.left        = sC.inset.left;\r
2426                                                                 CSS.right       = sC.inset.right;\r
2427                                                                 break;\r
2428                                 case "south":   CSS.bottom      = sC.inset.bottom;\r
2429                                                                 CSS.left        = sC.inset.left;\r
2430                                                                 CSS.right       = sC.inset.right;\r
2431                                                                 break;\r
2432                                 case "west":    CSS.left        = sC.inset.left; // top, bottom & height set by sizeMidPanes()\r
2433                                                                 break;\r
2434                                 case "east":    CSS.right       = sC.inset.right; // ditto\r
2435                                                                 break;\r
2436                                 case "center":  // top, left, width & height set by sizeMidPanes()\r
2437                         }\r
2438                         // apply position\r
2439                         $P.css(CSS); \r
2440 \r
2441                         // update resizer position\r
2442                         if ($R && s.isClosed)\r
2443                                 $R.css(side, sC.inset[side]);\r
2444                         else if ($R && !s.isHidden)\r
2445                                 $R.css(side, sC.inset[side] + getPaneSize(pane));\r
2446                 });\r
2447         }\r
2448 \r
2449         /**\r
2450          * Initialize module objects, styling, size and position for all resize bars and toggler buttons\r
2451          *\r
2452          * @see  _create()\r
2453          * @param {string=}     [panes=""]      The edge(s) to process\r
2454          */\r
2455 ,       initHandles = function (panes) {\r
2456                 panes = panes ? panes.split(",") : _c.borderPanes;\r
2457 \r
2458                 // create toggler DIVs for each pane, and set object pointers for them, eg: $R.north = north toggler DIV\r
2459                 $.each(panes, function (i, pane) {\r
2460                         var $P          = $Ps[pane];\r
2461                         $Rs[pane]       = false; // INIT\r
2462                         $Ts[pane]       = false;\r
2463                         if (!$P) return; // pane does not exist - skip\r
2464 \r
2465                         var     o               = options[pane]\r
2466                         ,       s               = state[pane]\r
2467                         ,       c               = _c[pane]\r
2468                         ,       paneId  = o.paneSelector.substr(0,1) === "#" ? o.paneSelector.substr(1) : ""\r
2469                         ,       rClass  = o.resizerClass\r
2470                         ,       tClass  = o.togglerClass\r
2471                         ,       spacing = (s.isVisible ? o.spacing_open : o.spacing_closed)\r
2472                         ,       _pane   = "-"+ pane // used for classNames\r
2473                         ,       _state  = (s.isVisible ? "-open" : "-closed") // used for classNames\r
2474                         ,       I               = Instance[pane]\r
2475                                 // INIT RESIZER BAR\r
2476                         ,       $R              = I.resizer = $Rs[pane] = $("<div></div>")\r
2477                                 // INIT TOGGLER BUTTON\r
2478                         ,       $T              = I.toggler = (o.closable ? $Ts[pane] = $("<div></div>") : false)\r
2479                         ;\r
2480 \r
2481                         //if (s.isVisible && o.resizable) ... handled by initResizable\r
2482                         if (!s.isVisible && o.slidable)\r
2483                                 $R.attr("title", o.tips.Slide).css("cursor", o.sliderCursor);\r
2484 \r
2485                         $R      // if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "paneLeft-resizer"\r
2486                                 .attr("id", paneId ? paneId +"-resizer" : "" )\r
2487                                 .data({\r
2488                                         parentLayout:   Instance\r
2489                                 ,       layoutPane:             Instance[pane]  // NEW pointer to pane-alias-object\r
2490                                 ,       layoutEdge:             pane\r
2491                                 ,       layoutRole:             "resizer"\r
2492                                 })\r
2493                                 .css(_c.resizers.cssReq).css("zIndex", options.zIndexes.resizer_normal)\r
2494                                 .css(o.applyDemoStyles ? _c.resizers.cssDemo : {}) // add demo styles\r
2495                                 .addClass(rClass +" "+ rClass+_pane)\r
2496                                 .hover(addHover, removeHover) // ALWAYS add hover-classes, even if resizing is not enabled - handle with CSS instead\r
2497                                 .hover(onResizerEnter, onResizerLeave) // ALWAYS NEED resizer.mouseleave to balance toggler.mouseenter\r
2498                                 .mousedown($.layout.disableTextSelection)       // prevent text-selection OUTSIDE resizer\r
2499                                 .mouseup($.layout.enableTextSelection)          // not really necessary, but just in case\r
2500                                 .appendTo($N) // append DIV to container\r
2501                         ;\r
2502                         if ($.fn.disableSelection)\r
2503                                 $R.disableSelection(); // prevent text-selection INSIDE resizer\r
2504                         if (o.resizerDblClickToggle)\r
2505                                 $R.bind("dblclick."+ sID, toggle );\r
2506 \r
2507                         if ($T) {\r
2508                                 $T      // if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "#paneLeft-toggler"\r
2509                                         .attr("id", paneId ? paneId +"-toggler" : "" )\r
2510                                         .data({\r
2511                                                 parentLayout:   Instance\r
2512                                         ,       layoutPane:             Instance[pane]  // NEW pointer to pane-alias-object\r
2513                                         ,       layoutEdge:             pane\r
2514                                         ,       layoutRole:             "toggler"\r
2515                                         })\r
2516                                         .css(_c.togglers.cssReq) // add base/required styles\r
2517                                         .css(o.applyDemoStyles ? _c.togglers.cssDemo : {}) // add demo styles\r
2518                                         .addClass(tClass +" "+ tClass+_pane)\r
2519                                         .hover(addHover, removeHover) // ALWAYS add hover-classes, even if toggling is not enabled - handle with CSS instead\r
2520                                         .bind("mouseenter", onResizerEnter) // NEED toggler.mouseenter because mouseenter MAY NOT fire on resizer\r
2521                                         .appendTo($R) // append SPAN to resizer DIV\r
2522                                 ;\r
2523                                 // ADD INNER-SPANS TO TOGGLER\r
2524                                 if (o.togglerContent_open) // ui-layout-open\r
2525                                         $("<span>"+ o.togglerContent_open +"</span>")\r
2526                                                 .data({\r
2527                                                         layoutEdge:             pane\r
2528                                                 ,       layoutRole:             "togglerContent"\r
2529                                                 })\r
2530                                                 .data("layoutRole", "togglerContent")\r
2531                                                 .data("layoutEdge", pane)\r
2532                                                 .addClass("content content-open")\r
2533                                                 .css("display","none")\r
2534                                                 .appendTo( $T )\r
2535                                                 //.hover( addHover, removeHover ) // use ui-layout-toggler-west-hover .content-open instead!\r
2536                                         ;\r
2537                                 if (o.togglerContent_closed) // ui-layout-closed\r
2538                                         $("<span>"+ o.togglerContent_closed +"</span>")\r
2539                                                 .data({\r
2540                                                         layoutEdge:             pane\r
2541                                                 ,       layoutRole:             "togglerContent"\r
2542                                                 })\r
2543                                                 .addClass("content content-closed")\r
2544                                                 .css("display","none")\r
2545                                                 .appendTo( $T )\r
2546                                                 //.hover( addHover, removeHover ) // use ui-layout-toggler-west-hover .content-closed instead!\r
2547                                         ;\r
2548                                 // ADD TOGGLER.click/.hover\r
2549                                 enableClosable(pane);\r
2550                         }\r
2551 \r
2552                         // add Draggable events\r
2553                         initResizable(pane);\r
2554 \r
2555                         // ADD CLASSNAMES & SLIDE-BINDINGS - eg: class="resizer resizer-west resizer-open"\r
2556                         if (s.isVisible)\r
2557                                 setAsOpen(pane);        // onOpen will be called, but NOT onResize\r
2558                         else {\r
2559                                 setAsClosed(pane);      // onClose will be called\r
2560                                 bindStartSlidingEvents(pane, true); // will enable events IF option is set\r
2561                         }\r
2562 \r
2563                 });\r
2564 \r
2565                 // SET ALL HANDLE DIMENSIONS\r
2566                 sizeHandles();\r
2567         }\r
2568 \r
2569 \r
2570         /**\r
2571          * Initialize scrolling ui-layout-content div - if exists\r
2572          *\r
2573          * @see  initPane() - or externally after an Ajax injection\r
2574          * @param {string}      pane                    The pane to process\r
2575          * @param {boolean=}    [resize=true]   Size content after init\r
2576          */\r
2577 ,       initContent = function (pane, resize) {\r
2578                 if (!isInitialized()) return;\r
2579                 var \r
2580                         o       = options[pane]\r
2581                 ,       sel     = o.contentSelector\r
2582                 ,       I       = Instance[pane]\r
2583                 ,       $P      = $Ps[pane]\r
2584                 ,       $C\r
2585                 ;\r
2586                 if (sel) $C = I.content = $Cs[pane] = (o.findNestedContent)\r
2587                         ? $P.find(sel).eq(0) // match 1-element only\r
2588                         : $P.children(sel).eq(0)\r
2589                 ;\r
2590                 if ($C && $C.length) {\r
2591                         $C.data("layoutRole", "content");\r
2592                         // SAVE original Content CSS\r
2593                         if (!$C.data("layoutCSS"))\r
2594                                 $C.data("layoutCSS", styles($C, "height"));\r
2595                         $C.css( _c.content.cssReq );\r
2596                         if (o.applyDemoStyles) {\r
2597                                 $C.css( _c.content.cssDemo ); // add padding & overflow: auto to content-div\r
2598                                 $P.css( _c.content.cssDemoPane ); // REMOVE padding/scrolling from pane\r
2599                         }\r
2600                         // ensure no vertical scrollbar on pane - will mess up measurements\r
2601                         if ($P.css("overflowX").match(/(scroll|auto)/)) {\r
2602                                 $P.css("overflow", "hidden");\r
2603                         }\r
2604                         state[pane].content = {}; // init content state\r
2605                         if (resize !== false) sizeContent(pane);\r
2606                         // sizeContent() is called AFTER init of all elements\r
2607                 }\r
2608                 else\r
2609                         I.content = $Cs[pane] = false;\r
2610         }\r
2611 \r
2612 \r
2613         /**\r
2614          * Add resize-bars to all panes that specify it in options\r
2615          * -dependancy: $.fn.resizable - will skip if not found\r
2616          *\r
2617          * @see  _create()\r
2618          * @param {string=}     [panes=""]      The edge(s) to process\r
2619          */\r
2620 ,       initResizable = function (panes) {\r
2621                 var     draggingAvailable = $.layout.plugins.draggable\r
2622                 ,       side // set in start()\r
2623                 ;\r
2624                 panes = panes ? panes.split(",") : _c.borderPanes;\r
2625 \r
2626                 $.each(panes, function (idx, pane) {\r
2627                         var o = options[pane];\r
2628                         if (!draggingAvailable || !$Ps[pane] || !o.resizable) {\r
2629                                 o.resizable = false;\r
2630                                 return true; // skip to next\r
2631                         }\r
2632 \r
2633                         var s           = state[pane]\r
2634                         ,       z               = options.zIndexes\r
2635                         ,       c               = _c[pane]\r
2636                         ,       side    = c.dir=="horz" ? "top" : "left"\r
2637                         ,       $P              = $Ps[pane]\r
2638                         ,       $R              = $Rs[pane]\r
2639                         ,       base    = o.resizerClass\r
2640                         ,       lastPos = 0 // used when live-resizing\r
2641                         ,       r, live // set in start because may change\r
2642                         //      'drag' classes are applied to the ORIGINAL resizer-bar while dragging is in process\r
2643                         ,       resizerClass            = base+"-drag"                          // resizer-drag\r
2644                         ,       resizerPaneClass        = base+"-"+pane+"-drag"         // resizer-north-drag\r
2645                         //      'helper' class is applied to the CLONED resizer-bar while it is being dragged\r
2646                         ,       helperClass                     = base+"-dragging"                      // resizer-dragging\r
2647                         ,       helperPaneClass         = base+"-"+pane+"-dragging" // resizer-north-dragging\r
2648                         ,       helperLimitClass        = base+"-dragging-limit"        // resizer-drag\r
2649                         ,       helperPaneLimitClass = base+"-"+pane+"-dragging-limit"  // resizer-north-drag\r
2650                         ,       helperClassesSet        = false                                         // logic var\r
2651                         ;\r
2652 \r
2653                         if (!s.isClosed)\r
2654                                 $R.attr("title", o.tips.Resize)\r
2655                                   .css("cursor", o.resizerCursor); // n-resize, s-resize, etc\r
2656 \r
2657                         $R.draggable({\r
2658                                 containment:    $N[0] // limit resizing to layout container\r
2659                         ,       axis:                   (c.dir=="horz" ? "y" : "x") // limit resizing to horz or vert axis\r
2660                         ,       delay:                  0\r
2661                         ,       distance:               1\r
2662                         ,       grid:                   o.resizingGrid\r
2663                         //      basic format for helper - style it using class: .ui-draggable-dragging\r
2664                         ,       helper:                 "clone"\r
2665                         ,       opacity:                o.resizerDragOpacity\r
2666                         ,       addClasses:             false // avoid ui-state-disabled class when disabled\r
2667                         //,     iframeFix:              o.draggableIframeFix // TODO: consider using when bug is fixed\r
2668                         ,       zIndex:                 z.resizer_drag\r
2669 \r
2670                         ,       start: function (e, ui) {\r
2671                                         // REFRESH options & state pointers in case we used swapPanes\r
2672                                         o = options[pane];\r
2673                                         s = state[pane];\r
2674                                         // re-read options\r
2675                                         live = o.livePaneResizing;\r
2676 \r
2677                                         // ondrag_start callback - will CANCEL hide if returns false\r
2678                                         // TODO: dragging CANNOT be cancelled like this, so see if there is a way?\r
2679                                         if (false === _runCallbacks("ondrag_start", pane)) return false;\r
2680 \r
2681                                         s.isResizing            = true; // prevent pane from closing while resizing\r
2682                                         state.paneResizing      = pane; // easy to see if ANY pane is resizing\r
2683                                         timer.clear(pane+"_closeSlider"); // just in case already triggered\r
2684 \r
2685                                         // SET RESIZER LIMITS - used in drag()\r
2686                                         setSizeLimits(pane); // update pane/resizer state\r
2687                                         r = s.resizerPosition;\r
2688                                         lastPos = ui.position[ side ]\r
2689 \r
2690                                         $R.addClass( resizerClass +" "+ resizerPaneClass ); // add drag classes\r
2691                                         helperClassesSet = false; // reset logic var - see drag()\r
2692 \r
2693                                         // MASK PANES CONTAINING IFRAMES, APPLETS OR OTHER TROUBLESOME ELEMENTS\r
2694                                         showMasks( pane, { resizing: true });\r
2695                                 }\r
2696 \r
2697                         ,       drag: function (e, ui) {\r
2698                                         if (!helperClassesSet) { // can only add classes after clone has been added to the DOM\r
2699                                                 //$(".ui-draggable-dragging")\r
2700                                                 ui.helper\r
2701                                                         .addClass( helperClass +" "+ helperPaneClass ) // add helper classes\r
2702                                                         .css({ right: "auto", bottom: "auto" }) // fix dir="rtl" issue\r
2703                                                         .children().css("visibility","hidden")  // hide toggler inside dragged resizer-bar\r
2704                                                 ;\r
2705                                                 helperClassesSet = true;\r
2706                                                 // draggable bug!? RE-SET zIndex to prevent E/W resize-bar showing through N/S pane!\r
2707                                                 if (s.isSliding) $Ps[pane].css("zIndex", z.pane_sliding);\r
2708                                         }\r
2709                                         // CONTAIN RESIZER-BAR TO RESIZING LIMITS\r
2710                                         var limit = 0;\r
2711                                         if (ui.position[side] < r.min) {\r
2712                                                 ui.position[side] = r.min;\r
2713                                                 limit = -1;\r
2714                                         }\r
2715                                         else if (ui.position[side] > r.max) {\r
2716                                                 ui.position[side] = r.max;\r
2717                                                 limit = 1;\r
2718                                         }\r
2719                                         // ADD/REMOVE dragging-limit CLASS\r
2720                                         if (limit) {\r
2721                                                 ui.helper.addClass( helperLimitClass +" "+ helperPaneLimitClass ); // at dragging-limit\r
2722                                                 window.defaultStatus = (limit>0 && pane.match(/(north|west)/)) || (limit<0 && pane.match(/(south|east)/)) ? o.tips.maxSizeWarning : o.tips.minSizeWarning;\r
2723                                         }\r
2724                                         else {\r
2725                                                 ui.helper.removeClass( helperLimitClass +" "+ helperPaneLimitClass ); // not at dragging-limit\r
2726                                                 window.defaultStatus = "";\r
2727                                         }\r
2728                                         // DYNAMICALLY RESIZE PANES IF OPTION ENABLED\r
2729                                         // won't trigger unless resizer has actually moved!\r
2730                                         if (live && Math.abs(ui.position[side] - lastPos) >= o.liveResizingTolerance) {\r
2731                                                 lastPos = ui.position[side];\r
2732                                                 resizePanes(e, ui, pane)\r
2733                                         }\r
2734                                 }\r
2735 \r
2736                         ,       stop: function (e, ui) {\r
2737                                         $('body').enableSelection(); // RE-ENABLE TEXT SELECTION\r
2738                                         window.defaultStatus = ""; // clear 'resizing limit' message from statusbar\r
2739                                         $R.removeClass( resizerClass +" "+ resizerPaneClass ); // remove drag classes from Resizer\r
2740                                         s.isResizing            = false;\r
2741                                         state.paneResizing      = false; // easy to see if ANY pane is resizing\r
2742                                         resizePanes(e, ui, pane, true); // true = resizingDone\r
2743                                 }\r
2744 \r
2745                         });\r
2746                 });\r
2747 \r
2748                 /**\r
2749                  * resizePanes\r
2750                  *\r
2751                  * Sub-routine called from stop() - and drag() if livePaneResizing\r
2752                  *\r
2753                  * @param {!Object}             evt\r
2754                  * @param {!Object}             ui\r
2755                  * @param {string}              pane\r
2756                  * @param {boolean=}            [resizingDone=false]\r
2757                  */\r
2758                 var resizePanes = function (evt, ui, pane, resizingDone) {\r
2759                         var     dragPos = ui.position\r
2760                         ,       c               = _c[pane]\r
2761                         ,       o               = options[pane]\r
2762                         ,       s               = state[pane]\r
2763                         ,       resizerPos\r
2764                         ;\r
2765                         switch (pane) {\r
2766                                 case "north":   resizerPos = dragPos.top; break;\r
2767                                 case "west":    resizerPos = dragPos.left; break;\r
2768                                 case "south":   resizerPos = sC.layoutHeight - dragPos.top  - o.spacing_open; break;\r
2769                                 case "east":    resizerPos = sC.layoutWidth  - dragPos.left - o.spacing_open; break;\r
2770                         };\r
2771                         // remove container margin from resizer position to get the pane size\r
2772                         var newSize = resizerPos - sC.inset[c.side];\r
2773 \r
2774                         // Disable OR Resize Mask(s) created in drag.start\r
2775                         if (!resizingDone) {\r
2776                                 // ensure we meet liveResizingTolerance criteria\r
2777                                 if (Math.abs(newSize - s.size) < o.liveResizingTolerance)\r
2778                                         return; // SKIP resize this time\r
2779                                 // resize the pane\r
2780                                 manualSizePane(pane, newSize, false, true); // true = noAnimation\r
2781                                 sizeMasks(); // resize all visible masks\r
2782                         }\r
2783                         else { // resizingDone\r
2784                                 // ondrag_end callback\r
2785                                 if (false !== _runCallbacks("ondrag_end", pane))\r
2786                                         manualSizePane(pane, newSize, false, true); // true = noAnimation\r
2787                                 hideMasks(true); // true = force hiding all masks even if one is 'sliding'\r
2788                                 if (s.isSliding) // RE-SHOW 'object-masks' so objects won't show through sliding pane\r
2789                                         showMasks( pane, { resizing: true });\r
2790                         }\r
2791                 };\r
2792         }\r
2793 \r
2794         /**\r
2795          *      sizeMask\r
2796          *\r
2797          *      Needed to overlay a DIV over an IFRAME-pane because mask CANNOT be *inside* the pane\r
2798          *      Called when mask created, and during livePaneResizing\r
2799          */\r
2800 ,       sizeMask = function () {\r
2801                 var $M          = $(this)\r
2802                 ,       pane    = $M.data("layoutMask") // eg: "west"\r
2803                 ,       s               = state[pane]\r
2804                 ;\r
2805                 // only masks over an IFRAME-pane need manual resizing\r
2806                 if (s.tagName == "IFRAME" && s.isVisible) // no need to mask closed/hidden panes\r
2807                         $M.css({\r
2808                                 top:    s.offsetTop\r
2809                         ,       left:   s.offsetLeft\r
2810                         ,       width:  s.outerWidth\r
2811                         ,       height: s.outerHeight\r
2812                         });\r
2813                 /* ALT Method...\r
2814                 var $P = $Ps[pane];\r
2815                 $M.css( $P.position() ).css({ width: $P[0].offsetWidth, height: $P[0].offsetHeight });\r
2816                 */\r
2817         }\r
2818 ,       sizeMasks = function () {\r
2819                 $Ms.each( sizeMask ); // resize all 'visible' masks\r
2820         }\r
2821 \r
2822         /**\r
2823          * @param {string}      pane            The pane being resized, animated or isSliding\r
2824          * @param {Object=}     [args]          (optional) Options: which masks to apply, and to which panes\r
2825          */\r
2826 ,       showMasks = function (pane, args) {\r
2827                 var     c               = _c[pane]\r
2828                 ,       panes   =  ["center"]\r
2829                 ,       z               = options.zIndexes\r
2830                 ,       a               = $.extend({\r
2831                                                 objectsOnly:    false\r
2832                                         ,       animation:              false\r
2833                                         ,       resizing:               true\r
2834                                         ,       sliding:                state[pane].isSliding\r
2835                                         },      args )\r
2836                 ,       o, s\r
2837                 ;\r
2838                 if (a.resizing)\r
2839                         panes.push( pane );\r
2840                 if (a.sliding)\r
2841                         panes.push( _c.oppositeEdge[pane] ); // ADD the oppositeEdge-pane\r
2842 \r
2843                 if (c.dir === "horz") {\r
2844                         panes.push("west");\r
2845                         panes.push("east");\r
2846                 }\r
2847 \r
2848                 $.each(panes, function(i,p){\r
2849                         s = state[p];\r
2850                         o = options[p];\r
2851                         if (s.isVisible && ( o.maskObjects || (!a.objectsOnly && o.maskContents) )) {\r
2852                                 getMasks(p).each(function(){\r
2853                                         sizeMask.call(this);\r
2854                                         this.style.zIndex = s.isSliding ? z.pane_sliding+1 : z.pane_normal+1\r
2855                                         this.style.display = "block";\r
2856                                 });\r
2857                         }\r
2858                 });\r
2859         }\r
2860 \r
2861         /**\r
2862          * @param {boolean=}    force           Hide masks even if a pane is sliding\r
2863          */\r
2864 ,       hideMasks = function (force) {\r
2865                 // ensure no pane is resizing - could be a timing issue\r
2866                 if (force || !state.paneResizing) {\r
2867                         $Ms.hide(); // hide ALL masks\r
2868                 }\r
2869                 // if ANY pane is sliding, then DO NOT remove masks from panes with maskObjects enabled\r
2870                 else if (!force && !$.isEmptyObject( state.panesSliding )) {\r
2871                         var     i = $Ms.length - 1\r
2872                         ,       p, $M;\r
2873                         for (; i >= 0; i--) {\r
2874                                 $M      = $Ms.eq(i);\r
2875                                 p       = $M.data("layoutMask");\r
2876                                 if (!options[p].maskObjects) {\r
2877                                         $M.hide();\r
2878                                 }\r
2879                         }\r
2880                 }\r
2881         }\r
2882 \r
2883         /**\r
2884          * @param {string}      pane\r
2885          */\r
2886 ,       getMasks = function (pane) {\r
2887                 var $Masks      = $([])\r
2888                 ,       $M, i = 0, c = $Ms.length\r
2889                 ;\r
2890                 for (; i<c; i++) {\r
2891                         $M = $Ms.eq(i);\r
2892                         if ($M.data("layoutMask") === pane)\r
2893                                 $Masks = $Masks.add( $M );\r
2894                 }\r
2895                 if ($Masks.length)\r
2896                         return $Masks;\r
2897                 else\r
2898                         return createMasks(pane);\r
2899         }\r
2900 \r
2901         /**\r
2902          * createMasks\r
2903          *\r
2904          * Generates both DIV (ALWAYS used) and IFRAME (optional) elements as masks\r
2905          * An IFRAME mask is created *under* the DIV when maskObjects=true, because a DIV cannot mask an applet\r
2906          *\r
2907          * @param {string}      pane\r
2908          */\r
2909 ,       createMasks = function (pane) {\r
2910                 var\r
2911                         $P      = $Ps[pane]\r
2912                 ,       s       = state[pane]\r
2913                 ,       o       = options[pane]\r
2914                 ,       z       = options.zIndexes\r
2915                 ,       isIframe, el, $M, css, i\r
2916                 ;\r
2917                 if (!o.maskContents && !o.maskObjects) return $([]);\r
2918                 // if o.maskObjects=true, then loop TWICE to create BOTH kinds of mask, else only create a DIV\r
2919                 for (i=0; i < (o.maskObjects ? 2 : 1); i++) {\r
2920                         isIframe = o.maskObjects && i==0;\r
2921                         el = document.createElement( isIframe ? "iframe" : "div" );\r
2922                         $M = $(el).data("layoutMask", pane); // add data to relate mask to pane\r
2923                         el.className = "ui-layout-mask ui-layout-mask-"+ pane; // for user styling\r
2924                         css = el.style;\r
2925                         // Both DIVs and IFRAMES\r
2926                         css.background  = "#FFF";\r
2927                         css.position    = "absolute";\r
2928                         css.display             = "block";\r
2929                         if (isIframe) { // IFRAME-only props\r
2930                                 el.src          = "about:blank";\r
2931                                 el.frameborder = 0;\r
2932                                 css.border      = 0;\r
2933                                 css.opacity     = 0;\r
2934                                 css.filter      = "Alpha(Opacity='0')";\r
2935                                 //el.allowTransparency = true; - for IE, but breaks masking ability!\r
2936                         }\r
2937                         else { // DIV-only props\r
2938                                 css.opacity     = 0.001;\r
2939                                 css.filter      = "Alpha(Opacity='1')";\r
2940                         }\r
2941                         // if pane IS an IFRAME, then must mask the pane itself\r
2942                         if (s.tagName == "IFRAME") {\r
2943                                 // NOTE sizing done by a subroutine so can be called during live-resizing\r
2944                                 css.zIndex      = z.pane_normal+1; // 1-higher than pane\r
2945                                 $N.append( el ); // append to LAYOUT CONTAINER\r
2946                         }\r
2947                         // otherwise put masks *inside the pane* to mask its contents\r
2948                         else {\r
2949                                 $M.addClass("ui-layout-mask-inside-pane");\r
2950                                 css.zIndex      = o.maskZindex || z.content_mask; // usually 1, but customizable\r
2951                                 css.top         = 0;\r
2952                                 css.left        = 0;\r
2953                                 css.width       = "100%";\r
2954                                 css.height      = "100%";\r
2955                                 $P.append( el ); // append INSIDE pane element\r
2956                         }\r
2957                         // add Mask to cached array so can be resized & reused\r
2958                         $Ms = $Ms.add( el );\r
2959                 }\r
2960                 return $Ms;\r
2961         }\r
2962 \r
2963 \r
2964         /**\r
2965          * Destroy this layout and reset all elements\r
2966          *\r
2967          * @param {boolean=}    [destroyChildren=false]         Destory Child-Layouts first?\r
2968          */\r
2969 ,       destroy = function (evt_or_destroyChildren, destroyChildren) {\r
2970                 // UNBIND layout events and remove global object\r
2971                 $(window).unbind("."+ sID);             // resize & unload\r
2972                 $(document).unbind("."+ sID);   // keyDown (hotkeys)\r
2973 \r
2974                 if (typeof evt_or_destroyChildren === "object")\r
2975                         // stopPropagation if called by trigger("layoutdestroy") - use evtPane utility \r
2976                         evtPane(evt_or_destroyChildren);\r
2977                 else // no event, so transfer 1st param to destroyChildren param\r
2978                         destroyChildren = evt_or_destroyChildren;\r
2979 \r
2980                 // need to look for parent layout BEFORE we remove the container data, else skips a level\r
2981                 //var parentPane = Instance.hasParentLayout ? $.layout.getParentPaneInstance( $N ) : null;\r
2982 \r
2983                 // reset layout-container\r
2984                 $N      .clearQueue()\r
2985                         .removeData("layout")\r
2986                         .removeData("layoutContainer")\r
2987                         .removeClass(options.containerClass)\r
2988                         .unbind("."+ sID) // remove ALL Layout events\r
2989                 ;\r
2990 \r
2991                 // remove all mask elements that have been created\r
2992                 $Ms.remove();\r
2993 \r
2994                 // loop all panes to remove layout classes, attributes and bindings\r
2995                 $.each(_c.allPanes, function (i, pane) {\r
2996                         removePane( pane, false, true, destroyChildren ); // true = skipResize\r
2997                 });\r
2998 \r
2999                 // do NOT reset container CSS if is a 'pane' (or 'content') in an outer-layout - ie, THIS layout is 'nested'\r
3000                 var css = "layoutCSS";\r
3001                 if ($N.data(css) && !$N.data("layoutRole")) // RESET CSS\r
3002                         $N.css( $N.data(css) ).removeData(css);\r
3003 \r
3004                 // for full-page layouts, also reset the <HTML> CSS\r
3005                 if (sC.tagName === "BODY" && ($N = $("html")).data(css)) // RESET <HTML> CSS\r
3006                         $N.css( $N.data(css) ).removeData(css);\r
3007 \r
3008                 // trigger plugins for this layout, if there are any\r
3009                 runPluginCallbacks( Instance, $.layout.onDestroy );\r
3010 \r
3011                 // trigger state-management and onunload callback\r
3012                 unload();\r
3013 \r
3014                 // clear the Instance of everything except for container & options (so could recreate)\r
3015                 // RE-CREATE: myLayout = myLayout.container.layout( myLayout.options );\r
3016                 for (var n in Instance)\r
3017                         if (!n.match(/^(container|options)$/)) delete Instance[ n ];\r
3018                 // add a 'destroyed' flag to make it easy to check\r
3019                 Instance.destroyed = true;\r
3020 \r
3021                 // if this is a child layout, CLEAR the child-pointer in the parent\r
3022                 /* for now the pointer REMAINS, but with only container, options and destroyed keys\r
3023                 if (parentPane) {\r
3024                         var layout      = parentPane.pane.data("parentLayout")\r
3025                         ,       key             = layout.options.instanceKey || 'error';\r
3026                         // THIS SYNTAX MAY BE WRONG!\r
3027                         parentPane.children[key] = layout.children[ parentPane.name ].children[key] = null;\r
3028                 }\r
3029                 */\r
3030 \r
3031                 return Instance; // for coding convenience\r
3032         }\r
3033 \r
3034         /**\r
3035          * Remove a pane from the layout - subroutine of destroy()\r
3036          *\r
3037          * @see  destroy()\r
3038          * @param {(string|Object)}     evt_or_pane                     The pane to process\r
3039          * @param {boolean=}                    [remove=false]          Remove the DOM element?\r
3040          * @param {boolean=}                    [skipResize=false]      Skip calling resizeAll()?\r
3041          * @param {boolean=}                    [destroyChild=true]     Destroy Child-layouts? If not passed, obeys options setting\r
3042          */\r
3043 ,       removePane = function (evt_or_pane, remove, skipResize, destroyChild) {\r
3044                 if (!isInitialized()) return;\r
3045                 var     pane = evtPane.call(this, evt_or_pane)\r
3046                 ,       $P      = $Ps[pane]\r
3047                 ,       $C      = $Cs[pane]\r
3048                 ,       $R      = $Rs[pane]\r
3049                 ,       $T      = $Ts[pane]\r
3050                 ;\r
3051                 // NOTE: elements can still exist even after remove()\r
3052                 //              so check for missing data(), which is cleared by removed()\r
3053                 if ($P && $.isEmptyObject( $P.data() )) $P = false;\r
3054                 if ($C && $.isEmptyObject( $C.data() )) $C = false;\r
3055                 if ($R && $.isEmptyObject( $R.data() )) $R = false;\r
3056                 if ($T && $.isEmptyObject( $T.data() )) $T = false;\r
3057 \r
3058                 if ($P) $P.stop(true, true);\r
3059 \r
3060                 var     o       = options[pane]\r
3061                 ,       s       = state[pane]\r
3062                 ,       d       = "layout"\r
3063                 ,       css     = "layoutCSS"\r
3064                 ,       pC      = children[pane]\r
3065                 ,       hasChildren     = $.isPlainObject( pC ) && !$.isEmptyObject( pC )\r
3066                 ,       destroy         = destroyChild !== undefined ? destroyChild : o.destroyChildren\r
3067                 ;\r
3068                 // FIRST destroy the child-layout(s)\r
3069                 if (hasChildren && destroy) {\r
3070                         $.each( pC, function (key, child) {\r
3071                                 if (!child.destroyed)\r
3072                                         child.destroy(true);// tell child-layout to destroy ALL its child-layouts too\r
3073                                 if (child.destroyed)    // destroy was successful\r
3074                                         delete pC[key];\r
3075                         });\r
3076                         // if no more children, remove the children hash\r
3077                         if ($.isEmptyObject( pC )) {\r
3078                                 pC = children[pane] = null; // clear children hash\r
3079                                 hasChildren = false;\r
3080                         }\r
3081                 }\r
3082 \r
3083                 // Note: can't 'remove' a pane element with non-destroyed children\r
3084                 if ($P && remove && !hasChildren)\r
3085                         $P.remove(); // remove the pane-element and everything inside it\r
3086                 else if ($P && $P[0]) {\r
3087                         //      create list of ALL pane-classes that need to be removed\r
3088                         var     root    = o.paneClass // default="ui-layout-pane"\r
3089                         ,       pRoot   = root +"-"+ pane // eg: "ui-layout-pane-west"\r
3090                         ,       _open   = "-open"\r
3091                         ,       _sliding= "-sliding"\r
3092                         ,       _closed = "-closed"\r
3093                         ,       classes = [     root, root+_open, root+_closed, root+_sliding,          // generic classes\r
3094                                                         pRoot, pRoot+_open, pRoot+_closed, pRoot+_sliding ]     // pane-specific classes\r
3095                         ;\r
3096                         $.merge(classes, getHoverClasses($P, true)); // ADD hover-classes\r
3097                         // remove all Layout classes from pane-element\r
3098                         $P      .removeClass( classes.join(" ") ) // remove ALL pane-classes\r
3099                                 .removeData("parentLayout")\r
3100                                 .removeData("layoutPane")\r
3101                                 .removeData("layoutRole")\r
3102                                 .removeData("layoutEdge")\r
3103                                 .removeData("autoHidden")       // in case set\r
3104                                 .unbind("."+ sID) // remove ALL Layout events\r
3105                                 // TODO: remove these extra unbind commands when jQuery is fixed\r
3106                                 //.unbind("mouseenter"+ sID)\r
3107                                 //.unbind("mouseleave"+ sID)\r
3108                         ;\r
3109                         // do NOT reset CSS if this pane/content is STILL the container of a nested layout!\r
3110                         // the nested layout will reset its 'container' CSS when/if it is destroyed\r
3111                         if (hasChildren && $C) {\r
3112                                 // a content-div may not have a specific width, so give it one to contain the Layout\r
3113                                 $C.width( $C.width() );\r
3114                                 $.each( pC, function (key, child) {\r
3115                                         child.resizeAll(); // resize the Layout\r
3116                                 });\r
3117                         }\r
3118                         else if ($C)\r
3119                                 $C.css( $C.data(css) ).removeData(css).removeData("layoutRole");\r
3120                         // remove pane AFTER content in case there was a nested layout\r
3121                         if (!$P.data(d))\r
3122                                 $P.css( $P.data(css) ).removeData(css);\r
3123                 }\r
3124 \r
3125                 // REMOVE pane resizer and toggler elements\r
3126                 if ($T) $T.remove();\r
3127                 if ($R) $R.remove();\r
3128 \r
3129                 // CLEAR all pointers and state data\r
3130                 Instance[pane] = $Ps[pane] = $Cs[pane] = $Rs[pane] = $Ts[pane] = false;\r
3131                 s = { removed: true };\r
3132 \r
3133                 if (!skipResize)\r
3134                         resizeAll();\r
3135         }\r
3136 \r
3137 \r
3138 /*\r
3139  * ###########################\r
3140  *         ACTION METHODS\r
3141  * ###########################\r
3142  */\r
3143 \r
3144         /**\r
3145          * @param {string}      pane\r
3146          */\r
3147 ,       _hidePane = function (pane) {\r
3148                 var $P  = $Ps[pane]\r
3149                 ,       o       = options[pane]\r
3150                 ,       s       = $P[0].style\r
3151                 ;\r
3152                 if (o.useOffscreenClose) {\r
3153                         if (!$P.data(_c.offscreenReset))\r
3154                                 $P.data(_c.offscreenReset, { left: s.left, right: s.right });\r
3155                         $P.css( _c.offscreenCSS );\r
3156                 }\r
3157                 else\r
3158                         $P.hide().removeData(_c.offscreenReset);\r
3159         }\r
3160 \r
3161         /**\r
3162          * @param {string}      pane\r
3163          */\r
3164 ,       _showPane = function (pane) {\r
3165                 var $P  = $Ps[pane]\r
3166                 ,       o       = options[pane]\r
3167                 ,       off     = _c.offscreenCSS\r
3168                 ,       old     = $P.data(_c.offscreenReset)\r
3169                 ,       s       = $P[0].style\r
3170                 ;\r
3171                 $P      .show() // ALWAYS show, just in case\r
3172                         .removeData(_c.offscreenReset);\r
3173                 if (o.useOffscreenClose && old) {\r
3174                         if (s.left == off.left)\r
3175                                 s.left = old.left;\r
3176                         if (s.right == off.right)\r
3177                                 s.right = old.right;\r
3178                 }\r
3179         }\r
3180 \r
3181 \r
3182         /**\r
3183          * Completely 'hides' a pane, including its spacing - as if it does not exist\r
3184          * The pane is not actually 'removed' from the source, so can use 'show' to un-hide it\r
3185          *\r
3186          * @param {(string|Object)}     evt_or_pane                     The pane being hidden, ie: north, south, east, or west\r
3187          * @param {boolean=}                    [noAnimation=false]     \r
3188          */\r
3189 ,       hide = function (evt_or_pane, noAnimation) {\r
3190                 if (!isInitialized()) return;\r
3191                 var     pane = evtPane.call(this, evt_or_pane)\r
3192                 ,       o       = options[pane]\r
3193                 ,       s       = state[pane]\r
3194                 ,       $P      = $Ps[pane]\r
3195                 ,       $R      = $Rs[pane]\r
3196                 ;\r
3197                 if (pane === "center" || !$P || s.isHidden) return; // pane does not exist OR is already hidden\r
3198 \r
3199                 // onhide_start callback - will CANCEL hide if returns false\r
3200                 if (state.initialized && false === _runCallbacks("onhide_start", pane)) return;\r
3201 \r
3202                 s.isSliding = false; // just in case\r
3203                 delete state.panesSliding[pane];\r
3204 \r
3205                 // now hide the elements\r
3206                 if ($R) $R.hide(); // hide resizer-bar\r
3207                 if (!state.initialized || s.isClosed) {\r
3208                         s.isClosed = true; // to trigger open-animation on show()\r
3209                         s.isHidden  = true;\r
3210                         s.isVisible = false;\r
3211                         if (!state.initialized)\r
3212                                 _hidePane(pane); // no animation when loading page\r
3213                         sizeMidPanes(_c[pane].dir === "horz" ? "" : "center");\r
3214                         if (state.initialized || o.triggerEventsOnLoad)\r
3215                                 _runCallbacks("onhide_end", pane);\r
3216                 }\r
3217                 else {\r
3218                         s.isHiding = true; // used by onclose\r
3219                         close(pane, false, noAnimation); // adjust all panes to fit\r
3220                 }\r
3221         }\r
3222 \r
3223         /**\r
3224          * Show a hidden pane - show as 'closed' by default unless openPane = true\r
3225          *\r
3226          * @param {(string|Object)}     evt_or_pane                     The pane being opened, ie: north, south, east, or west\r
3227          * @param {boolean=}                    [openPane=false]\r
3228          * @param {boolean=}                    [noAnimation=false]\r
3229          * @param {boolean=}                    [noAlert=false]\r
3230          */\r
3231 ,       show = function (evt_or_pane, openPane, noAnimation, noAlert) {\r
3232                 if (!isInitialized()) return;\r
3233                 var     pane = evtPane.call(this, evt_or_pane)\r
3234                 ,       o       = options[pane]\r
3235                 ,       s       = state[pane]\r
3236                 ,       $P      = $Ps[pane]\r
3237                 ,       $R      = $Rs[pane]\r
3238                 ;\r
3239                 if (pane === "center" || !$P || !s.isHidden) return; // pane does not exist OR is not hidden\r
3240 \r
3241                 // onshow_start callback - will CANCEL show if returns false\r
3242                 if (false === _runCallbacks("onshow_start", pane)) return;\r
3243 \r
3244                 s.isShowing = true; // used by onopen/onclose\r
3245                 //s.isHidden  = false; - will be set by open/close - if not cancelled\r
3246                 s.isSliding = false; // just in case\r
3247                 delete state.panesSliding[pane];\r
3248 \r
3249                 // now show the elements\r
3250                 //if ($R) $R.show(); - will be shown by open/close\r
3251                 if (openPane === false)\r
3252                         close(pane, true); // true = force\r
3253                 else\r
3254                         open(pane, false, noAnimation, noAlert); // adjust all panes to fit\r
3255         }\r
3256 \r
3257 \r
3258         /**\r
3259          * Toggles a pane open/closed by calling either open or close\r
3260          *\r
3261          * @param {(string|Object)}     evt_or_pane             The pane being toggled, ie: north, south, east, or west\r
3262          * @param {boolean=}                    [slide=false]\r
3263          */\r
3264 ,       toggle = function (evt_or_pane, slide) {\r
3265                 if (!isInitialized()) return;\r
3266                 var     evt             = evtObj(evt_or_pane)\r
3267                 ,       pane    = evtPane.call(this, evt_or_pane)\r
3268                 ,       s               = state[pane]\r
3269                 ;\r
3270                 if (evt) // called from to $R.dblclick OR triggerPaneEvent\r
3271                         evt.stopImmediatePropagation();\r
3272                 if (s.isHidden)\r
3273                         show(pane); // will call 'open' after unhiding it\r
3274                 else if (s.isClosed)\r
3275                         open(pane, !!slide);\r
3276                 else\r
3277                         close(pane);\r
3278         }\r
3279 \r
3280 \r
3281         /**\r
3282          * Utility method used during init or other auto-processes\r
3283          *\r
3284          * @param {string}      pane   The pane being closed\r
3285          * @param {boolean=}    [setHandles=false]\r
3286          */\r
3287 ,       _closePane = function (pane, setHandles) {\r
3288                 var\r
3289                         $P      = $Ps[pane]\r
3290                 ,       s       = state[pane]\r
3291                 ;\r
3292                 _hidePane(pane);\r
3293                 s.isClosed = true;\r
3294                 s.isVisible = false;\r
3295                 if (setHandles) setAsClosed(pane);\r
3296         }\r
3297 \r
3298         /**\r
3299          * Close the specified pane (animation optional), and resize all other panes as needed\r
3300          *\r
3301          * @param {(string|Object)}     evt_or_pane                     The pane being closed, ie: north, south, east, or west\r
3302          * @param {boolean=}                    [force=false]\r
3303          * @param {boolean=}                    [noAnimation=false]\r
3304          * @param {boolean=}                    [skipCallback=false]\r
3305          */\r
3306 ,       close = function (evt_or_pane, force, noAnimation, skipCallback) {\r
3307                 var     pane = evtPane.call(this, evt_or_pane);\r
3308                 if (pane === "center") return; // validate\r
3309                 // if pane has been initialized, but NOT the complete layout, close pane instantly\r
3310                 if (!state.initialized && $Ps[pane]) {\r
3311                         _closePane(pane, true); // INIT pane as closed\r
3312                         return;\r
3313                 }\r
3314                 if (!isInitialized()) return;\r
3315 \r
3316                 var\r
3317                         $P      = $Ps[pane]\r
3318                 ,       $R      = $Rs[pane]\r
3319                 ,       $T      = $Ts[pane]\r
3320                 ,       o       = options[pane]\r
3321                 ,       s       = state[pane]\r
3322                 ,       c       = _c[pane]\r
3323                 ,       doFX, isShowing, isHiding, wasSliding;\r
3324 \r
3325                 // QUEUE in case another action/animation is in progress\r
3326                 $N.queue(function( queueNext ){\r
3327 \r
3328                         if ( !$P\r
3329                         ||      (!o.closable && !s.isShowing && !s.isHiding)    // invalid request // (!o.resizable && !o.closable) ???\r
3330                         ||      (!force && s.isClosed && !s.isShowing)                  // already closed\r
3331                         ) return queueNext();\r
3332 \r
3333                         // onclose_start callback - will CANCEL hide if returns false\r
3334                         // SKIP if just 'showing' a hidden pane as 'closed'\r
3335                         var abort = !s.isShowing && false === _runCallbacks("onclose_start", pane);\r
3336 \r
3337                         // transfer logic vars to temp vars\r
3338                         isShowing       = s.isShowing;\r
3339                         isHiding        = s.isHiding;\r
3340                         wasSliding      = s.isSliding;\r
3341                         // now clear the logic vars (REQUIRED before aborting)\r
3342                         delete s.isShowing;\r
3343                         delete s.isHiding;\r
3344 \r
3345                         if (abort) return queueNext();\r
3346 \r
3347                         doFX            = !noAnimation && !s.isClosed && (o.fxName_close != "none");\r
3348                         s.isMoving      = true;\r
3349                         s.isClosed      = true;\r
3350                         s.isVisible     = false;\r
3351                         // update isHidden BEFORE sizing panes\r
3352                         if (isHiding) s.isHidden = true;\r
3353                         else if (isShowing) s.isHidden = false;\r
3354 \r
3355                         if (s.isSliding) // pane is being closed, so UNBIND trigger events\r
3356                                 bindStopSlidingEvents(pane, false); // will set isSliding=false\r
3357                         else // resize panes adjacent to this one\r
3358                                 sizeMidPanes(_c[pane].dir === "horz" ? "" : "center", false); // false = NOT skipCallback\r
3359 \r
3360                         // if this pane has a resizer bar, move it NOW - before animation\r
3361                         setAsClosed(pane);\r
3362 \r
3363                         // CLOSE THE PANE\r
3364                         if (doFX) { // animate the close\r
3365                                 lockPaneForFX(pane, true);      // need to set left/top so animation will work\r
3366                                 $P.hide( o.fxName_close, o.fxSettings_close, o.fxSpeed_close, function () {\r
3367                                         lockPaneForFX(pane, false); // undo\r
3368                                         if (s.isClosed) close_2();\r
3369                                         queueNext();\r
3370                                 });\r
3371                         }\r
3372                         else { // hide the pane without animation\r
3373                                 _hidePane(pane);\r
3374                                 close_2();\r
3375                                 queueNext();\r
3376                         };\r
3377                 });\r
3378 \r
3379                 // SUBROUTINE\r
3380                 function close_2 () {\r
3381                         s.isMoving      = false;\r
3382                         bindStartSlidingEvents(pane, true); // will enable if o.slidable = true\r
3383 \r
3384                         // if opposite-pane was autoClosed, see if it can be autoOpened now\r
3385                         var altPane = _c.oppositeEdge[pane];\r
3386                         if (state[ altPane ].noRoom) {\r
3387                                 setSizeLimits( altPane );\r
3388                                 makePaneFit( altPane );\r
3389                         }\r
3390 \r
3391                         if (!skipCallback && (state.initialized || o.triggerEventsOnLoad)) {\r
3392                                 // onclose callback - UNLESS just 'showing' a hidden pane as 'closed'\r
3393                                 if (!isShowing) _runCallbacks("onclose_end", pane);\r
3394                                 // onhide OR onshow callback\r
3395                                 if (isShowing)  _runCallbacks("onshow_end", pane);\r
3396                                 if (isHiding)   _runCallbacks("onhide_end", pane);\r
3397                         }\r
3398                 }\r
3399         }\r
3400 \r
3401         /**\r
3402          * @param {string}      pane    The pane just closed, ie: north, south, east, or west\r
3403          */\r
3404 ,       setAsClosed = function (pane) {\r
3405                 if (!$Rs[pane]) return; // handles not initialized yet!\r
3406                 var\r
3407                         $P              = $Ps[pane]\r
3408                 ,       $R              = $Rs[pane]\r
3409                 ,       $T              = $Ts[pane]\r
3410                 ,       o               = options[pane]\r
3411                 ,       s               = state[pane]\r
3412                 ,       side    = _c[pane].side\r
3413                 ,       rClass  = o.resizerClass\r
3414                 ,       tClass  = o.togglerClass\r
3415                 ,       _pane   = "-"+ pane // used for classNames\r
3416                 ,       _open   = "-open"\r
3417                 ,       _sliding= "-sliding"\r
3418                 ,       _closed = "-closed"\r
3419                 ;\r
3420                 $R\r
3421                         .css(side, sC.inset[side]) // move the resizer\r
3422                         .removeClass( rClass+_open +" "+ rClass+_pane+_open )\r
3423                         .removeClass( rClass+_sliding +" "+ rClass+_pane+_sliding )\r
3424                         .addClass( rClass+_closed +" "+ rClass+_pane+_closed )\r
3425                 ;\r
3426                 // handle already-hidden panes in case called by swap() or a similar method \r
3427                 if (s.isHidden) $R.hide(); // hide resizer-bar \r
3428 \r
3429                 // DISABLE 'resizing' when closed - do this BEFORE bindStartSlidingEvents?\r
3430                 if (o.resizable && $.layout.plugins.draggable)\r
3431                         $R\r
3432                                 .draggable("disable")\r
3433                                 .removeClass("ui-state-disabled") // do NOT apply disabled styling - not suitable here\r
3434                                 .css("cursor", "default")\r
3435                                 .attr("title","")\r
3436                         ;\r
3437 \r
3438                 // if pane has a toggler button, adjust that too\r
3439                 if ($T) {\r
3440                         $T\r
3441                                 .removeClass( tClass+_open +" "+ tClass+_pane+_open )\r
3442                                 .addClass( tClass+_closed +" "+ tClass+_pane+_closed )\r
3443                                 .attr("title", o.tips.Open) // may be blank\r
3444                         ;\r
3445                         // toggler-content - if exists\r
3446                         $T.children(".content-open").hide();\r
3447                         $T.children(".content-closed").css("display","block");\r
3448                 }\r
3449 \r
3450                 // sync any 'pin buttons'\r
3451                 syncPinBtns(pane, false);\r
3452 \r
3453                 if (state.initialized) {\r
3454                         // resize 'length' and position togglers for adjacent panes\r
3455                         sizeHandles();\r
3456                 }\r
3457         }\r
3458 \r
3459         /**\r
3460          * Open the specified pane (animation optional), and resize all other panes as needed\r
3461          *\r
3462          * @param {(string|Object)}     evt_or_pane                     The pane being opened, ie: north, south, east, or west\r
3463          * @param {boolean=}                    [slide=false]\r
3464          * @param {boolean=}                    [noAnimation=false]\r
3465          * @param {boolean=}                    [noAlert=false]\r
3466          */\r
3467 ,       open = function (evt_or_pane, slide, noAnimation, noAlert) {\r
3468                 if (!isInitialized()) return;\r
3469                 var     pane = evtPane.call(this, evt_or_pane)\r
3470                 ,       $P      = $Ps[pane]\r
3471                 ,       $R      = $Rs[pane]\r
3472                 ,       $T      = $Ts[pane]\r
3473                 ,       o       = options[pane]\r
3474                 ,       s       = state[pane]\r
3475                 ,       c       = _c[pane]\r
3476                 ,       doFX, isShowing\r
3477                 ;\r
3478                 if (pane === "center") return; // validate\r
3479                 // QUEUE in case another action/animation is in progress\r
3480                 $N.queue(function( queueNext ){\r
3481 \r
3482                         if ( !$P\r
3483                         ||      (!o.resizable && !o.closable && !s.isShowing)   // invalid request\r
3484                         ||      (s.isVisible && !s.isSliding)                                   // already open\r
3485                         ) return queueNext();\r
3486 \r
3487                         // pane can ALSO be unhidden by just calling show(), so handle this scenario\r
3488                         if (s.isHidden && !s.isShowing) {\r
3489                                 queueNext(); // call before show() because it needs the queue free\r
3490                                 show(pane, true);\r
3491                                 return;\r
3492                         }\r
3493 \r
3494                         if (s.autoResize && s.size != o.size) // resize pane to original size set in options\r
3495                                 sizePane(pane, o.size, true, true, true); // true=skipCallback/noAnimation/forceResize\r
3496                         else\r
3497                                 // make sure there is enough space available to open the pane\r
3498                                 setSizeLimits(pane, slide);\r
3499 \r
3500                         // onopen_start callback - will CANCEL open if returns false\r
3501                         var cbReturn = _runCallbacks("onopen_start", pane);\r
3502 \r
3503                         if (cbReturn === "abort")\r
3504                                 return queueNext();\r
3505 \r
3506                         // update pane-state again in case options were changed in onopen_start\r
3507                         if (cbReturn !== "NC") // NC = "No Callback"\r
3508                                 setSizeLimits(pane, slide);\r
3509 \r
3510                         if (s.minSize > s.maxSize) { // INSUFFICIENT ROOM FOR PANE TO OPEN!\r
3511                                 syncPinBtns(pane, false); // make sure pin-buttons are reset\r
3512                                 if (!noAlert && o.tips.noRoomToOpen)\r
3513                                         alert(o.tips.noRoomToOpen);\r
3514                                 return queueNext(); // ABORT\r
3515                         }\r
3516 \r
3517                         if (slide) // START Sliding - will set isSliding=true\r
3518                                 bindStopSlidingEvents(pane, true); // BIND trigger events to close sliding-pane\r
3519                         else if (s.isSliding) // PIN PANE (stop sliding) - open pane 'normally' instead\r
3520                                 bindStopSlidingEvents(pane, false); // UNBIND trigger events - will set isSliding=false\r
3521                         else if (o.slidable)\r
3522                                 bindStartSlidingEvents(pane, false); // UNBIND trigger events\r
3523 \r
3524                         s.noRoom = false; // will be reset by makePaneFit if 'noRoom'\r
3525                         makePaneFit(pane);\r
3526 \r
3527                         // transfer logic var to temp var\r
3528                         isShowing = s.isShowing;\r
3529                         // now clear the logic var\r
3530                         delete s.isShowing;\r
3531 \r
3532                         doFX            = !noAnimation && s.isClosed && (o.fxName_open != "none");\r
3533                         s.isMoving      = true;\r
3534                         s.isVisible     = true;\r
3535                         s.isClosed      = false;\r
3536                         // update isHidden BEFORE sizing panes - WHY??? Old?\r
3537                         if (isShowing) s.isHidden = false;\r
3538 \r
3539                         if (doFX) { // ANIMATE\r
3540                                 // mask adjacent panes with objects\r
3541                                 lockPaneForFX(pane, true);      // need to set left/top so animation will work\r
3542                                         $P.show( o.fxName_open, o.fxSettings_open, o.fxSpeed_open, function() {\r
3543                                         lockPaneForFX(pane, false); // undo\r
3544                                         if (s.isVisible) open_2(); // continue\r
3545                                         queueNext();\r
3546                                 });\r
3547                         }\r
3548                         else { // no animation\r
3549                                 _showPane(pane);// just show pane and...\r
3550                                 open_2();               // continue\r
3551                                 queueNext();\r
3552                         };\r
3553                 });\r
3554 \r
3555                 // SUBROUTINE\r
3556                 function open_2 () {\r
3557                         s.isMoving      = false;\r
3558 \r
3559                         // cure iframe display issues\r
3560                         _fixIframe(pane);\r
3561 \r
3562                         // NOTE: if isSliding, then other panes are NOT 'resized'\r
3563                         if (!s.isSliding) { // resize all panes adjacent to this one\r
3564                                 sizeMidPanes(_c[pane].dir=="vert" ? "center" : "", false); // false = NOT skipCallback\r
3565                         }\r
3566 \r
3567                         // set classes, position handles and execute callbacks...\r
3568                         setAsOpen(pane);\r
3569                 };\r
3570         \r
3571         }\r
3572 \r
3573         /**\r
3574          * @param {string}      pane            The pane just opened, ie: north, south, east, or west\r
3575          * @param {boolean=}    [skipCallback=false]\r
3576          */\r
3577 ,       setAsOpen = function (pane, skipCallback) {\r
3578                 var \r
3579                         $P              = $Ps[pane]\r
3580                 ,       $R              = $Rs[pane]\r
3581                 ,       $T              = $Ts[pane]\r
3582                 ,       o               = options[pane]\r
3583                 ,       s               = state[pane]\r
3584                 ,       side    = _c[pane].side\r
3585                 ,       rClass  = o.resizerClass\r
3586                 ,       tClass  = o.togglerClass\r
3587                 ,       _pane   = "-"+ pane // used for classNames\r
3588                 ,       _open   = "-open"\r
3589                 ,       _closed = "-closed"\r
3590                 ,       _sliding= "-sliding"\r
3591                 ;\r
3592                 $R\r
3593                         .css(side, sC.inset[side] + getPaneSize(pane)) // move the resizer\r
3594                         .removeClass( rClass+_closed +" "+ rClass+_pane+_closed )\r
3595                         .addClass( rClass+_open +" "+ rClass+_pane+_open )\r
3596                 ;\r
3597                 if (s.isSliding)\r
3598                         $R.addClass( rClass+_sliding +" "+ rClass+_pane+_sliding )\r
3599                 else // in case 'was sliding'\r
3600                         $R.removeClass( rClass+_sliding +" "+ rClass+_pane+_sliding )\r
3601 \r
3602                 removeHover( 0, $R ); // remove hover classes\r
3603                 if (o.resizable && $.layout.plugins.draggable)\r
3604                         $R      .draggable("enable")\r
3605                                 .css("cursor", o.resizerCursor)\r
3606                                 .attr("title", o.tips.Resize);\r
3607                 else if (!s.isSliding)\r
3608                         $R.css("cursor", "default"); // n-resize, s-resize, etc\r
3609 \r
3610                 // if pane also has a toggler button, adjust that too\r
3611                 if ($T) {\r
3612                         $T      .removeClass( tClass+_closed +" "+ tClass+_pane+_closed )\r
3613                                 .addClass( tClass+_open +" "+ tClass+_pane+_open )\r
3614                                 .attr("title", o.tips.Close); // may be blank\r
3615                         removeHover( 0, $T ); // remove hover classes\r
3616                         // toggler-content - if exists\r
3617                         $T.children(".content-closed").hide();\r
3618                         $T.children(".content-open").css("display","block");\r
3619                 }\r
3620 \r
3621                 // sync any 'pin buttons'\r
3622                 syncPinBtns(pane, !s.isSliding);\r
3623 \r
3624                 // update pane-state dimensions - BEFORE resizing content\r
3625                 $.extend(s, elDims($P));\r
3626 \r
3627                 if (state.initialized) {\r
3628                         // resize resizer & toggler sizes for all panes\r
3629                         sizeHandles();\r
3630                         // resize content every time pane opens - to be sure\r
3631                         sizeContent(pane, true); // true = remeasure headers/footers, even if 'pane.isMoving'\r
3632                 }\r
3633 \r
3634                 if (!skipCallback && (state.initialized || o.triggerEventsOnLoad) && $P.is(":visible")) {\r
3635                         // onopen callback\r
3636                         _runCallbacks("onopen_end", pane);\r
3637                         // onshow callback - TODO: should this be here?\r
3638                         if (s.isShowing) _runCallbacks("onshow_end", pane);\r
3639 \r
3640                         // ALSO call onresize because layout-size *may* have changed while pane was closed\r
3641                         if (state.initialized)\r
3642                                 _runCallbacks("onresize_end", pane);\r
3643                 }\r
3644 \r
3645                 // TODO: Somehow sizePane("north") is being called after this point???\r
3646         }\r
3647 \r
3648 \r
3649         /**\r
3650          * slideOpen / slideClose / slideToggle\r
3651          *\r
3652          * Pass-though methods for sliding\r
3653          */\r
3654 ,       slideOpen = function (evt_or_pane) {\r
3655                 if (!isInitialized()) return;\r
3656                 var     evt             = evtObj(evt_or_pane)\r
3657                 ,       pane    = evtPane.call(this, evt_or_pane)\r
3658                 ,       s               = state[pane]\r
3659                 ,       delay   = options[pane].slideDelay_open\r
3660                 ;\r
3661                 if (pane === "center") return; // validate\r
3662                 // prevent event from triggering on NEW resizer binding created below\r
3663                 if (evt) evt.stopImmediatePropagation();\r
3664 \r
3665                 if (s.isClosed && evt && evt.type === "mouseenter" && delay > 0)\r
3666                         // trigger = mouseenter - use a delay\r
3667                         timer.set(pane+"_openSlider", open_NOW, delay);\r
3668                 else\r
3669                         open_NOW(); // will unbind events if is already open\r
3670 \r
3671                 /**\r
3672                  * SUBROUTINE for timed open\r
3673                  */\r
3674                 function open_NOW () {\r
3675                         if (!s.isClosed) // skip if no longer closed!\r
3676                                 bindStopSlidingEvents(pane, true); // BIND trigger events to close sliding-pane\r
3677                         else if (!s.isMoving)\r
3678                                 open(pane, true); // true = slide - open() will handle binding\r
3679                 };\r
3680         }\r
3681 \r
3682 ,       slideClose = function (evt_or_pane) {\r
3683                 if (!isInitialized()) return;\r
3684                 var     evt             = evtObj(evt_or_pane)\r
3685                 ,       pane    = evtPane.call(this, evt_or_pane)\r
3686                 ,       o               = options[pane]\r
3687                 ,       s               = state[pane]\r
3688                 ,       delay   = s.isMoving ? 1000 : 300 // MINIMUM delay - option may override\r
3689                 ;\r
3690                 if (pane === "center") return; // validate\r
3691                 if (s.isClosed || s.isResizing)\r
3692                         return; // skip if already closed OR in process of resizing\r
3693                 else if (o.slideTrigger_close === "click")\r
3694                         close_NOW(); // close immediately onClick\r
3695                 else if (o.preventQuickSlideClose && s.isMoving)\r
3696                         return; // handle Chrome quick-close on slide-open\r
3697                 else if (o.preventPrematureSlideClose && evt && $.layout.isMouseOverElem(evt, $Ps[pane]))\r
3698                         return; // handle incorrect mouseleave trigger, like when over a SELECT-list in IE\r
3699                 else if (evt) // trigger = mouseleave - use a delay\r
3700                         // 1 sec delay if 'opening', else .3 sec\r
3701                         timer.set(pane+"_closeSlider", close_NOW, max(o.slideDelay_close, delay));\r
3702                 else // called programically\r
3703                         close_NOW();\r
3704 \r
3705                 /**\r
3706                  * SUBROUTINE for timed close\r
3707                  */\r
3708                 function close_NOW () {\r
3709                         if (s.isClosed) // skip 'close' if already closed!\r
3710                                 bindStopSlidingEvents(pane, false); // UNBIND trigger events - TODO: is this needed here?\r
3711                         else if (!s.isMoving)\r
3712                                 close(pane); // close will handle unbinding\r
3713                 };\r
3714         }\r
3715 \r
3716         /**\r
3717          * @param {(string|Object)}     evt_or_pane             The pane being opened, ie: north, south, east, or west\r
3718          */\r
3719 ,       slideToggle = function (evt_or_pane) {\r
3720                 var pane = evtPane.call(this, evt_or_pane);\r
3721                 toggle(pane, true);\r
3722         }\r
3723 \r
3724 \r
3725         /**\r
3726          * Must set left/top on East/South panes so animation will work properly\r
3727          *\r
3728          * @param {string}      pane    The pane to lock, 'east' or 'south' - any other is ignored!\r
3729          * @param {boolean}     doLock  true = set left/top, false = remove\r
3730          */\r
3731 ,       lockPaneForFX = function (pane, doLock) {\r
3732                 var $P  = $Ps[pane]\r
3733                 ,       s       = state[pane]\r
3734                 ,       o       = options[pane]\r
3735                 ,       z       = options.zIndexes\r
3736                 ;\r
3737                 if (doLock) {\r
3738                         showMasks( pane, { animation: true, objectsOnly: true });\r
3739                         $P.css({ zIndex: z.pane_animate }); // overlay all elements during animation\r
3740                         if (pane=="south")\r
3741                                 $P.css({ top: sC.inset.top + sC.innerHeight - $P.outerHeight() });\r
3742                         else if (pane=="east")\r
3743                                 $P.css({ left: sC.inset.left + sC.innerWidth - $P.outerWidth() });\r
3744                 }\r
3745                 else { // animation DONE - RESET CSS\r
3746                         hideMasks();\r
3747                         $P.css({ zIndex: (s.isSliding ? z.pane_sliding : z.pane_normal) });\r
3748                         if (pane=="south")\r
3749                                 $P.css({ top: "auto" });\r
3750                         // if pane is positioned 'off-screen', then DO NOT screw with it!\r
3751                         else if (pane=="east" && !$P.css("left").match(/\-99999/))\r
3752                                 $P.css({ left: "auto" });\r
3753                         // fix anti-aliasing in IE - only needed for animations that change opacity\r
3754                         if (browser.msie && o.fxOpacityFix && o.fxName_open != "slide" && $P.css("filter") && $P.css("opacity") == 1)\r
3755                                 $P[0].style.removeAttribute('filter');\r
3756                 }\r
3757         }\r
3758 \r
3759 \r
3760         /**\r
3761          * Toggle sliding functionality of a specific pane on/off by adding removing 'slide open' trigger\r
3762          *\r
3763          * @see  open(), close()\r
3764          * @param {string}      pane    The pane to enable/disable, 'north', 'south', etc.\r
3765          * @param {boolean}     enable  Enable or Disable sliding?\r
3766          */\r
3767 ,       bindStartSlidingEvents = function (pane, enable) {\r
3768                 var o           = options[pane]\r
3769                 ,       $P              = $Ps[pane]\r
3770                 ,       $R              = $Rs[pane]\r
3771                 ,       evtName = o.slideTrigger_open.toLowerCase()\r
3772                 ;\r
3773                 if (!$R || (enable && !o.slidable)) return;\r
3774 \r
3775                 // make sure we have a valid event\r
3776                 if (evtName.match(/mouseover/))\r
3777                         evtName = o.slideTrigger_open = "mouseenter";\r
3778                 else if (!evtName.match(/(click|dblclick|mouseenter)/)) \r
3779                         evtName = o.slideTrigger_open = "click";\r
3780 \r
3781                 // must remove double-click-toggle when using dblclick-slide\r
3782                 if (o.resizerDblClickToggle && evtName.match(/click/)) {\r
3783                         $R[enable ? "unbind" : "bind"]('dblclick.'+ sID, toggle)\r
3784                 }\r
3785 \r
3786                 $R\r
3787                         // add or remove event\r
3788                         [enable ? "bind" : "unbind"](evtName +'.'+ sID, slideOpen)\r
3789                         // set the appropriate cursor & title/tip\r
3790                         .css("cursor", enable ? o.sliderCursor : "default")\r
3791                         .attr("title", enable ? o.tips.Slide : "")\r
3792                 ;\r
3793         }\r
3794 \r
3795         /**\r
3796          * Add or remove 'mouseleave' events to 'slide close' when pane is 'sliding' open or closed\r
3797          * Also increases zIndex when pane is sliding open\r
3798          * See bindStartSlidingEvents for code to control 'slide open'\r
3799          *\r
3800          * @see  slideOpen(), slideClose()\r
3801          * @param {string}      pane    The pane to process, 'north', 'south', etc.\r
3802          * @param {boolean}     enable  Enable or Disable events?\r
3803          */\r
3804 ,       bindStopSlidingEvents = function (pane, enable) {\r
3805                 var     o               = options[pane]\r
3806                 ,       s               = state[pane]\r
3807                 ,       c               = _c[pane]\r
3808                 ,       z               = options.zIndexes\r
3809                 ,       evtName = o.slideTrigger_close.toLowerCase()\r
3810                 ,       action  = (enable ? "bind" : "unbind")\r
3811                 ,       $P              = $Ps[pane]\r
3812                 ,       $R              = $Rs[pane]\r
3813                 ;\r
3814                 timer.clear(pane+"_closeSlider"); // just in case\r
3815 \r
3816                 if (enable) {\r
3817                         s.isSliding = true;\r
3818                         state.panesSliding[pane] = true;\r
3819                         // remove 'slideOpen' event from resizer\r
3820                         // ALSO will raise the zIndex of the pane & resizer\r
3821                         bindStartSlidingEvents(pane, false);\r
3822                 }\r
3823                 else {\r
3824                         s.isSliding = false;\r
3825                         delete state.panesSliding[pane];\r
3826                 }\r
3827 \r
3828                 // RE/SET zIndex - increases when pane is sliding-open, resets to normal when not\r
3829                 $P.css("zIndex", enable ? z.pane_sliding : z.pane_normal);\r
3830                 $R.css("zIndex", enable ? z.pane_sliding+2 : z.resizer_normal); // NOTE: mask = pane_sliding+1\r
3831 \r
3832                 // make sure we have a valid event\r
3833                 if (!evtName.match(/(click|mouseleave)/))\r
3834                         evtName = o.slideTrigger_close = "mouseleave"; // also catches 'mouseout'\r
3835 \r
3836                 // add/remove slide triggers\r
3837                 $R[action](evtName, slideClose); // base event on resize\r
3838                 // need extra events for mouseleave\r
3839                 if (evtName === "mouseleave") {\r
3840                         // also close on pane.mouseleave\r
3841                         $P[action]("mouseleave."+ sID, slideClose);\r
3842                         // cancel timer when mouse moves between 'pane' and 'resizer'\r
3843                         $R[action]("mouseenter."+ sID, cancelMouseOut);\r
3844                         $P[action]("mouseenter."+ sID, cancelMouseOut);\r
3845                 }\r
3846 \r
3847                 if (!enable)\r
3848                         timer.clear(pane+"_closeSlider");\r
3849                 else if (evtName === "click" && !o.resizable) {\r
3850                         // IF pane is not resizable (which already has a cursor and tip) \r
3851                         // then set the a cursor & title/tip on resizer when sliding\r
3852                         $R.css("cursor", enable ? o.sliderCursor : "default");\r
3853                         $R.attr("title", enable ? o.tips.Close : ""); // use Toggler-tip, eg: "Close Pane"\r
3854                 }\r
3855 \r
3856                 // SUBROUTINE for mouseleave timer clearing\r
3857                 function cancelMouseOut (evt) {\r
3858                         timer.clear(pane+"_closeSlider");\r
3859                         evt.stopPropagation();\r
3860                 }\r
3861         }\r
3862 \r
3863 \r
3864         /**\r
3865          * Hides/closes a pane if there is insufficient room - reverses this when there is room again\r
3866          * MUST have already called setSizeLimits() before calling this method\r
3867          *\r
3868          * @param {string}      pane                                    The pane being resized\r
3869          * @param {boolean=}    [isOpening=false]               Called from onOpen?\r
3870          * @param {boolean=}    [skipCallback=false]    Should the onresize callback be run?\r
3871          * @param {boolean=}    [force=false]\r
3872          */\r
3873 ,       makePaneFit = function (pane, isOpening, skipCallback, force) {\r
3874                 var     o       = options[pane]\r
3875                 ,       s       = state[pane]\r
3876                 ,       c       = _c[pane]\r
3877                 ,       $P      = $Ps[pane]\r
3878                 ,       $R      = $Rs[pane]\r
3879                 ,       isSidePane      = c.dir==="vert"\r
3880                 ,       hasRoom         = false\r
3881                 ;\r
3882                 // special handling for center & east/west panes\r
3883                 if (pane === "center" || (isSidePane && s.noVerticalRoom)) {\r
3884                         // see if there is enough room to display the pane\r
3885                         // ERROR: hasRoom = s.minHeight <= s.maxHeight && (isSidePane || s.minWidth <= s.maxWidth);\r
3886                         hasRoom = (s.maxHeight >= 0);\r
3887                         if (hasRoom && s.noRoom) { // previously hidden due to noRoom, so show now\r
3888                                 _showPane(pane);\r
3889                                 if ($R) $R.show();\r
3890                                 s.isVisible = true;\r
3891                                 s.noRoom = false;\r
3892                                 if (isSidePane) s.noVerticalRoom = false;\r
3893                                 _fixIframe(pane);\r
3894                         }\r
3895                         else if (!hasRoom && !s.noRoom) { // not currently hidden, so hide now\r
3896                                 _hidePane(pane);\r
3897                                 if ($R) $R.hide();\r
3898                                 s.isVisible = false;\r
3899                                 s.noRoom = true;\r
3900                         }\r
3901                 }\r
3902 \r
3903                 // see if there is enough room to fit the border-pane\r
3904                 if (pane === "center") {\r
3905                         // ignore center in this block\r
3906                 }\r
3907                 else if (s.minSize <= s.maxSize) { // pane CAN fit\r
3908                         hasRoom = true;\r
3909                         if (s.size > s.maxSize) // pane is too big - shrink it\r
3910                                 sizePane(pane, s.maxSize, skipCallback, true, force); // true = noAnimation\r
3911                         else if (s.size < s.minSize) // pane is too small - enlarge it\r
3912                                 sizePane(pane, s.minSize, skipCallback, true, force); // true = noAnimation\r
3913                         // need s.isVisible because new pseudoClose method keeps pane visible, but off-screen\r
3914                         else if ($R && s.isVisible && $P.is(":visible")) {\r
3915                                 // make sure resizer-bar is positioned correctly\r
3916                                 // handles situation where nested layout was 'hidden' when initialized\r
3917                                 var     pos = s.size + sC.inset[c.side];\r
3918                                 if ($.layout.cssNum( $R, c.side ) != pos) $R.css( c.side, pos );\r
3919                         }\r
3920 \r
3921                         // if was previously hidden due to noRoom, then RESET because NOW there is room\r
3922                         if (s.noRoom) {\r
3923                                 // s.noRoom state will be set by open or show\r
3924                                 if (s.wasOpen && o.closable) {\r
3925                                         if (o.autoReopen)\r
3926                                                 open(pane, false, true, true); // true = noAnimation, true = noAlert\r
3927                                         else // leave the pane closed, so just update state\r
3928                                                 s.noRoom = false;\r
3929                                 }\r
3930                                 else\r
3931                                         show(pane, s.wasOpen, true, true); // true = noAnimation, true = noAlert\r
3932                         }\r
3933                 }\r
3934                 else { // !hasRoom - pane CANNOT fit\r
3935                         if (!s.noRoom) { // pane not set as noRoom yet, so hide or close it now...\r
3936                                 s.noRoom = true; // update state\r
3937                                 s.wasOpen = !s.isClosed && !s.isSliding;\r
3938                                 if (s.isClosed){} // SKIP\r
3939                                 else if (o.closable) // 'close' if possible\r
3940                                         close(pane, true, true); // true = force, true = noAnimation\r
3941                                 else // 'hide' pane if cannot just be closed\r
3942                                         hide(pane, true); // true = noAnimation\r
3943                         }\r
3944                 }\r
3945         }\r
3946 \r
3947 \r
3948         /**\r
3949          * manualSizePane is an exposed flow-through method allowing extra code when pane is 'manually resized'\r
3950          *\r
3951          * @param {(string|Object)}     evt_or_pane                             The pane being resized\r
3952          * @param {number}                      size                                    The *desired* new size for this pane - will be validated\r
3953          * @param {boolean=}                    [skipCallback=false]    Should the onresize callback be run?\r
3954          * @param {boolean=}                    [noAnimation=false]\r
3955          * @param {boolean=}                    [force=false]                   Force resizing even if does not seem necessary\r
3956          */\r
3957 ,       manualSizePane = function (evt_or_pane, size, skipCallback, noAnimation, force) {\r
3958                 if (!isInitialized()) return;\r
3959                 var     pane = evtPane.call(this, evt_or_pane)\r
3960                 ,       o       = options[pane]\r
3961                 ,       s       = state[pane]\r
3962                 //      if resizing callbacks have been delayed and resizing is now DONE, force resizing to complete...\r
3963                 ,       forceResize = force || (o.livePaneResizing && !s.isResizing)\r
3964                 ;\r
3965                 if (pane === "center") return; // validate\r
3966                 // ANY call to manualSizePane disables autoResize - ie, percentage sizing\r
3967                 s.autoResize = false;\r
3968                 // flow-through...\r
3969                 sizePane(pane, size, skipCallback, noAnimation, forceResize); // will animate resize if option enabled\r
3970         }\r
3971 \r
3972         /**\r
3973          * sizePane is called only by internal methods whenever a pane needs to be resized\r
3974          *\r
3975          * @param {(string|Object)}     evt_or_pane                             The pane being resized\r
3976          * @param {number}                      size                                    The *desired* new size for this pane - will be validated\r
3977          * @param {boolean=}                    [skipCallback=false]    Should the onresize callback be run?\r
3978          * @param {boolean=}                    [noAnimation=false]\r
3979          * @param {boolean=}                    [force=false]                   Force resizing even if does not seem necessary\r
3980          */\r
3981 ,       sizePane = function (evt_or_pane, size, skipCallback, noAnimation, force) {\r
3982                 if (!isInitialized()) return;\r
3983                 var     pane    = evtPane.call(this, evt_or_pane) // probably NEVER called from event?\r
3984                 ,       o               = options[pane]\r
3985                 ,       s               = state[pane]\r
3986                 ,       $P              = $Ps[pane]\r
3987                 ,       $R              = $Rs[pane]\r
3988                 ,       side    = _c[pane].side\r
3989                 ,       dimName = _c[pane].sizeType.toLowerCase()\r
3990                 ,       skipResizeWhileDragging = s.isResizing && !o.triggerEventsDuringLiveResize\r
3991                 ,       doFX    = noAnimation !== true && o.animatePaneSizing\r
3992                 ,       oldSize, newSize\r
3993                 ;\r
3994                 if (pane === "center") return; // validate\r
3995                 // QUEUE in case another action/animation is in progress\r
3996                 $N.queue(function( queueNext ){\r
3997                         // calculate 'current' min/max sizes\r
3998                         setSizeLimits(pane); // update pane-state\r
3999                         oldSize = s.size;\r
4000                         size = _parseSize(pane, size); // handle percentages & auto\r
4001                         size = max(size, _parseSize(pane, o.minSize));\r
4002                         size = min(size, s.maxSize);\r
4003                         if (size < s.minSize) { // not enough room for pane!\r
4004                                 queueNext(); // call before makePaneFit() because it needs the queue free\r
4005                                 makePaneFit(pane, false, skipCallback); // will hide or close pane\r
4006                                 return;\r
4007                         }\r
4008 \r
4009                         // IF newSize is same as oldSize, then nothing to do - abort\r
4010                         if (!force && size === oldSize)\r
4011                                 return queueNext();\r
4012 \r
4013                         s.newSize = size;\r
4014 \r
4015                         // onresize_start callback CANNOT cancel resizing because this would break the layout!\r
4016                         if (!skipCallback && state.initialized && s.isVisible)\r
4017                                 _runCallbacks("onresize_start", pane);\r
4018 \r
4019                         // resize the pane, and make sure its visible\r
4020                         newSize = cssSize(pane, size);\r
4021 \r
4022                         if (doFX && $P.is(":visible")) { // ANIMATE\r
4023                                 var fx          = $.layout.effects.size[pane] || $.layout.effects.size.all\r
4024                                 ,       easing  = o.fxSettings_size.easing || fx.easing\r
4025                                 ,       z               = options.zIndexes\r
4026                                 ,       props   = {};\r
4027                                 props[ dimName ] = newSize +'px';\r
4028                                 s.isMoving = true;\r
4029                                 // overlay all elements during animation\r
4030                                 $P.css({ zIndex: z.pane_animate })\r
4031                                   .show().animate( props, o.fxSpeed_size, easing, function(){\r
4032                                         // reset zIndex after animation\r
4033                                         $P.css({ zIndex: (s.isSliding ? z.pane_sliding : z.pane_normal) });\r
4034                                         s.isMoving = false;\r
4035                                         delete s.newSize;\r
4036                                         sizePane_2(); // continue\r
4037                                         queueNext();\r
4038                                 });\r
4039                         }\r
4040                         else { // no animation\r
4041                                 $P.css( dimName, newSize );     // resize pane\r
4042                                 delete s.newSize;\r
4043                                 // if pane is visible, then \r
4044                                 if ($P.is(":visible"))\r
4045                                         sizePane_2(); // continue\r
4046                                 else {\r
4047                                         // pane is NOT VISIBLE, so just update state data...\r
4048                                         // when pane is *next opened*, it will have the new size\r
4049                                         s.size = size;                          // update state.size\r
4050                                         //$.extend(s, elDims($P));      // update state dimensions - CANNOT do this when not visible!                           }\r
4051                                 }\r
4052                                 queueNext();\r
4053                         };\r
4054 \r
4055                 });\r
4056 \r
4057                 // SUBROUTINE\r
4058                 function sizePane_2 () {\r
4059                         /*      Panes are sometimes not sized precisely in some browsers!?\r
4060                          *      This code will resize the pane up to 3 times to nudge the pane to the correct size\r
4061                          */\r
4062                         var     actual  = dimName==='width' ? $P.outerWidth() : $P.outerHeight()\r
4063                         ,       tries   = [{\r
4064                                                         pane:           pane\r
4065                                                 ,       count:          1\r
4066                                                 ,       target:         size\r
4067                                                 ,       actual:         actual\r
4068                                                 ,       correct:        (size === actual)\r
4069                                                 ,       attempt:        size\r
4070                                                 ,       cssSize:        newSize\r
4071                                                 }]\r
4072                         ,       lastTry = tries[0]\r
4073                         ,       thisTry = {}\r
4074                         ,       msg             = 'Inaccurate size after resizing the '+ pane +'-pane.'\r
4075                         ;\r
4076                         while ( !lastTry.correct ) {\r
4077                                 thisTry = { pane: pane, count: lastTry.count+1, target: size };\r
4078 \r
4079                                 if (lastTry.actual > size)\r
4080                                         thisTry.attempt = max(0, lastTry.attempt - (lastTry.actual - size));\r
4081                                 else // lastTry.actual < size\r
4082                                         thisTry.attempt = max(0, lastTry.attempt + (size - lastTry.actual));\r
4083 \r
4084                                 thisTry.cssSize = cssSize(pane, thisTry.attempt);\r
4085                                 $P.css( dimName, thisTry.cssSize );\r
4086 \r
4087                                 thisTry.actual  = dimName=='width' ? $P.outerWidth() : $P.outerHeight();\r
4088                                 thisTry.correct = (size === thisTry.actual);\r
4089 \r
4090                                 // log attempts and alert the user of this *non-fatal error* (if showDebugMessages)\r
4091                                 if ( tries.length === 1) {\r
4092                                         _log(msg, false, true);\r
4093                                         _log(lastTry, false, true);\r
4094                                 }\r
4095                                 _log(thisTry, false, true);\r
4096                                 // after 4 tries, is as close as its gonna get!\r
4097                                 if (tries.length > 3) break;\r
4098 \r
4099                                 tries.push( thisTry );\r
4100                                 lastTry = tries[ tries.length - 1 ];\r
4101                         }\r
4102                         // END TESTING CODE\r
4103 \r
4104                         // update pane-state dimensions\r
4105                         s.size  = size;\r
4106                         $.extend(s, elDims($P));\r
4107 \r
4108                         if (s.isVisible && $P.is(":visible")) {\r
4109                                 // reposition the resizer-bar\r
4110                                 if ($R) $R.css( side, size + sC.inset[side] );\r
4111                                 // resize the content-div\r
4112                                 sizeContent(pane);\r
4113                         }\r
4114 \r
4115                         if (!skipCallback && !skipResizeWhileDragging && state.initialized && s.isVisible)\r
4116                                 _runCallbacks("onresize_end", pane);\r
4117 \r
4118                         // resize all the adjacent panes, and adjust their toggler buttons\r
4119                         // when skipCallback passed, it means the controlling method will handle 'other panes'\r
4120                         if (!skipCallback) {\r
4121                                 // also no callback if live-resize is in progress and NOT triggerEventsDuringLiveResize\r
4122                                 if (!s.isSliding) sizeMidPanes(_c[pane].dir=="horz" ? "" : "center", skipResizeWhileDragging, force);\r
4123                                 sizeHandles();\r
4124                         }\r
4125 \r
4126                         // if opposite-pane was autoClosed, see if it can be autoOpened now\r
4127                         var altPane = _c.oppositeEdge[pane];\r
4128                         if (size < oldSize && state[ altPane ].noRoom) {\r
4129                                 setSizeLimits( altPane );\r
4130                                 makePaneFit( altPane, false, skipCallback );\r
4131                         }\r
4132 \r
4133                         // DEBUG - ALERT user/developer so they know there was a sizing problem\r
4134                         if (tries.length > 1)\r
4135                                 _log(msg +'\nSee the Error Console for details.', true, true);\r
4136                 }\r
4137         }\r
4138 \r
4139         /**\r
4140          * @see  initPanes(), sizePane(),       resizeAll(), open(), close(), hide()\r
4141          * @param {(Array.<string>|string)}     panes                                   The pane(s) being resized, comma-delmited string\r
4142          * @param {boolean=}                                    [skipCallback=false]    Should the onresize callback be run?\r
4143          * @param {boolean=}                                    [force=false]\r
4144          */\r
4145 ,       sizeMidPanes = function (panes, skipCallback, force) {\r
4146                 panes = (panes ? panes : "east,west,center").split(",");\r
4147 \r
4148                 $.each(panes, function (i, pane) {\r
4149                         if (!$Ps[pane]) return; // NO PANE - skip\r
4150                         var \r
4151                                 o               = options[pane]\r
4152                         ,       s               = state[pane]\r
4153                         ,       $P              = $Ps[pane]\r
4154                         ,       $R              = $Rs[pane]\r
4155                         ,       isCenter= (pane=="center")\r
4156                         ,       hasRoom = true\r
4157                         ,       CSS             = {}\r
4158                         //      if pane is not visible, show it invisibly NOW rather than for *each call* in this script\r
4159                         ,       visCSS  = $.layout.showInvisibly($P)\r
4160 \r
4161                         ,       newCenter       = calcNewCenterPaneDims()\r
4162                         ;\r
4163 \r
4164                         // update pane-state dimensions\r
4165                         $.extend(s, elDims($P));\r
4166 \r
4167                         if (pane === "center") {\r
4168                                 if (!force && s.isVisible && newCenter.width === s.outerWidth && newCenter.height === s.outerHeight) {\r
4169                                         $P.css(visCSS);\r
4170                                         return true; // SKIP - pane already the correct size\r
4171                                 }\r
4172                                 // set state for makePaneFit() logic\r
4173                                 $.extend(s, cssMinDims(pane), {\r
4174                                         maxWidth:       newCenter.width\r
4175                                 ,       maxHeight:      newCenter.height\r
4176                                 });\r
4177                                 CSS = newCenter;\r
4178                                 s.newWidth      = CSS.width;\r
4179                                 s.newHeight     = CSS.height;\r
4180                                 // convert OUTER width/height to CSS width/height \r
4181                                 CSS.width       = cssW($P, CSS.width);\r
4182                                 // NEW - allow pane to extend 'below' visible area rather than hide it\r
4183                                 CSS.height      = cssH($P, CSS.height);\r
4184                                 hasRoom         = CSS.width >= 0 && CSS.height >= 0; // height >= 0 = ALWAYS TRUE NOW\r
4185 \r
4186                                 // during layout init, try to shrink east/west panes to make room for center\r
4187                                 if (!state.initialized && o.minWidth > newCenter.width) {\r
4188                                         var\r
4189                                                 reqPx   = o.minWidth - s.outerWidth\r
4190                                         ,       minE    = options.east.minSize || 0\r
4191                                         ,       minW    = options.west.minSize || 0\r
4192                                         ,       sizeE   = state.east.size\r
4193                                         ,       sizeW   = state.west.size\r
4194                                         ,       newE    = sizeE\r
4195                                         ,       newW    = sizeW\r
4196                                         ;\r
4197                                         if (reqPx > 0 && state.east.isVisible && sizeE > minE) {\r
4198                                                 newE = max( sizeE-minE, sizeE-reqPx );\r
4199                                                 reqPx -= sizeE-newE;\r
4200                                         }\r
4201                                         if (reqPx > 0 && state.west.isVisible && sizeW > minW) {\r
4202                                                 newW = max( sizeW-minW, sizeW-reqPx );\r
4203                                                 reqPx -= sizeW-newW;\r
4204                                         }\r
4205                                         // IF we found enough extra space, then resize the border panes as calculated\r
4206                                         if (reqPx === 0) {\r
4207                                                 if (sizeE && sizeE != minE)\r
4208                                                         sizePane('east', newE, true, true, force); // true = skipCallback/noAnimation - initPanes will handle when done\r
4209                                                 if (sizeW && sizeW != minW)\r
4210                                                         sizePane('west', newW, true, true, force); // true = skipCallback/noAnimation\r
4211                                                 // now start over!\r
4212                                                 sizeMidPanes('center', skipCallback, force);\r
4213                                                 $P.css(visCSS);\r
4214                                                 return; // abort this loop\r
4215                                         }\r
4216                                 }\r
4217                         }\r
4218                         else { // for east and west, set only the height, which is same as center height\r
4219                                 // set state.min/maxWidth/Height for makePaneFit() logic\r
4220                                 if (s.isVisible && !s.noVerticalRoom)\r
4221                                         $.extend(s, elDims($P), cssMinDims(pane))\r
4222                                 if (!force && !s.noVerticalRoom && newCenter.height === s.outerHeight) {\r
4223                                         $P.css(visCSS);\r
4224                                         return true; // SKIP - pane already the correct size\r
4225                                 }\r
4226                                 // east/west have same top, bottom & height as center\r
4227                                 CSS.top         = newCenter.top;\r
4228                                 CSS.bottom      = newCenter.bottom;\r
4229                                 s.newSize       = newCenter.height\r
4230                                 // NEW - allow pane to extend 'below' visible area rather than hide it\r
4231                                 CSS.height      = cssH($P, newCenter.height);\r
4232                                 s.maxHeight     = CSS.height;\r
4233                                 hasRoom         = (s.maxHeight >= 0); // ALWAYS TRUE NOW\r
4234                                 if (!hasRoom) s.noVerticalRoom = true; // makePaneFit() logic\r
4235                         }\r
4236 \r
4237                         if (hasRoom) {\r
4238                                 // resizeAll passes skipCallback because it triggers callbacks after ALL panes are resized\r
4239                                 if (!skipCallback && state.initialized)\r
4240                                         _runCallbacks("onresize_start", pane);\r
4241 \r
4242                                 $P.css(CSS); // apply the CSS to pane\r
4243                                 if (pane !== "center")\r
4244                                         sizeHandles(pane); // also update resizer length\r
4245                                 if (s.noRoom && !s.isClosed && !s.isHidden)\r
4246                                         makePaneFit(pane); // will re-open/show auto-closed/hidden pane\r
4247                                 if (s.isVisible) {\r
4248                                         $.extend(s, elDims($P)); // update pane dimensions\r
4249                                         if (state.initialized) sizeContent(pane); // also resize the contents, if exists\r
4250                                 }\r
4251                         }\r
4252                         else if (!s.noRoom && s.isVisible) // no room for pane\r
4253                                 makePaneFit(pane); // will hide or close pane\r
4254 \r
4255                         // reset visibility, if necessary\r
4256                         $P.css(visCSS);\r
4257 \r
4258                         delete s.newSize;\r
4259                         delete s.newWidth;\r
4260                         delete s.newHeight;\r
4261 \r
4262                         if (!s.isVisible)\r
4263                                 return true; // DONE - next pane\r
4264 \r
4265                         /*\r
4266                          * Extra CSS for IE6 or IE7 in Quirks-mode - add 'width' to NORTH/SOUTH panes\r
4267                          * Normally these panes have only 'left' & 'right' positions so pane auto-sizes\r
4268                          * ALSO required when pane is an IFRAME because will NOT default to 'full width'\r
4269                          *      TODO: Can I use width:100% for a north/south iframe?\r
4270                          *      TODO: Sounds like a job for $P.outerWidth( sC.innerWidth ) SETTER METHOD\r
4271                          */\r
4272                         if (pane === "center") { // finished processing midPanes\r
4273                                 var fix = browser.isIE6 || !browser.boxModel;\r
4274                                 if ($Ps.north && (fix || state.north.tagName=="IFRAME")) \r
4275                                         $Ps.north.css("width", cssW($Ps.north, sC.innerWidth));\r
4276                                 if ($Ps.south && (fix || state.south.tagName=="IFRAME"))\r
4277                                         $Ps.south.css("width", cssW($Ps.south, sC.innerWidth));\r
4278                         }\r
4279 \r
4280                         // resizeAll passes skipCallback because it triggers callbacks after ALL panes are resized\r
4281                         if (!skipCallback && state.initialized)\r
4282                                 _runCallbacks("onresize_end", pane);\r
4283                 });\r
4284         }\r
4285 \r
4286 \r
4287         /**\r
4288          * @see  window.onresize(), callbacks or custom code\r
4289          * @param {(Object|boolean)=}   evt_or_refresh  If 'true', then also reset pane-positioning\r
4290          */\r
4291 ,       resizeAll = function (evt_or_refresh) {\r
4292                 var     oldW    = sC.innerWidth\r
4293                 ,       oldH    = sC.innerHeight\r
4294                 ;\r
4295                 // stopPropagation if called by trigger("layoutdestroy") - use evtPane utility \r
4296                 evtPane(evt_or_refresh);\r
4297 \r
4298                 // cannot size layout when 'container' is hidden or collapsed\r
4299                 if (!$N.is(":visible")) return;\r
4300 \r
4301                 if (!state.initialized) {\r
4302                         _initLayoutElements();\r
4303                         return; // no need to resize since we just initialized!\r
4304                 }\r
4305 \r
4306                 if (evt_or_refresh === true && $.isPlainObject(options.outset)) {\r
4307                         // update container CSS in case outset option has changed\r
4308                         $N.css( options.outset );\r
4309                 }\r
4310                 // UPDATE container dimensions\r
4311                 $.extend(sC, elDims( $N, options.inset ));\r
4312                 if (!sC.outerHeight) return;\r
4313 \r
4314                 // if 'true' passed, refresh pane & handle positioning too\r
4315                 if (evt_or_refresh === true) {\r
4316                         setPanePosition();\r
4317                 }\r
4318 \r
4319                 // onresizeall_start will CANCEL resizing if returns false\r
4320                 // state.container has already been set, so user can access this info for calcuations\r
4321                 if (false === _runCallbacks("onresizeall_start")) return false;\r
4322 \r
4323                 var     // see if container is now 'smaller' than before\r
4324                         shrunkH = (sC.innerHeight < oldH)\r
4325                 ,       shrunkW = (sC.innerWidth < oldW)\r
4326                 ,       $P, o, s\r
4327                 ;\r
4328                 // NOTE special order for sizing: S-N-E-W\r
4329                 $.each(["south","north","east","west"], function (i, pane) {\r
4330                         if (!$Ps[pane]) return; // no pane - SKIP\r
4331                         o = options[pane];\r
4332                         s = state[pane];\r
4333                         if (s.autoResize && s.size != o.size) // resize pane to original size set in options\r
4334                                 sizePane(pane, o.size, true, true, true); // true=skipCallback/noAnimation/forceResize\r
4335                         else {\r
4336                                 setSizeLimits(pane);\r
4337                                 makePaneFit(pane, false, true, true); // true=skipCallback/forceResize\r
4338                         }\r
4339                 });\r
4340 \r
4341                 sizeMidPanes("", true, true); // true=skipCallback/forceResize\r
4342                 sizeHandles(); // reposition the toggler elements\r
4343 \r
4344                 // trigger all individual pane callbacks AFTER layout has finished resizing\r
4345                 $.each(_c.allPanes, function (i, pane) {\r
4346                         $P = $Ps[pane];\r
4347                         if (!$P) return; // SKIP\r
4348                         if (state[pane].isVisible) // undefined for non-existent panes\r
4349                                 _runCallbacks("onresize_end", pane); // callback - if exists\r
4350                 });\r
4351 \r
4352                 _runCallbacks("onresizeall_end");\r
4353                 //_triggerLayoutEvent(pane, 'resizeall');\r
4354         }\r
4355 \r
4356         /**\r
4357          * Whenever a pane resizes or opens that has a nested layout, trigger resizeAll\r
4358          *\r
4359          * @param {(string|Object)}     evt_or_pane             The pane just resized or opened\r
4360          */\r
4361 ,       resizeChildren = function (evt_or_pane, skipRefresh) {\r
4362                 var     pane = evtPane.call(this, evt_or_pane);\r
4363 \r
4364                 if (!options[pane].resizeChildren) return;\r
4365 \r
4366                 // ensure the pane-children are up-to-date\r
4367                 if (!skipRefresh) refreshChildren( pane );\r
4368                 var pC = children[pane];\r
4369                 if ($.isPlainObject( pC )) {\r
4370                         // resize one or more children\r
4371                         $.each( pC, function (key, child) {\r
4372                                 if (!child.destroyed) child.resizeAll();\r
4373                         });\r
4374                 }\r
4375         }\r
4376 \r
4377         /**\r
4378          * IF pane has a content-div, then resize all elements inside pane to fit pane-height\r
4379          *\r
4380          * @param {(string|Object)}     evt_or_panes            The pane(s) being resized\r
4381          * @param {boolean=}                    [remeasure=false]       Should the content (header/footer) be remeasured?\r
4382          */\r
4383 ,       sizeContent = function (evt_or_panes, remeasure) {\r
4384                 if (!isInitialized()) return;\r
4385 \r
4386                 var panes = evtPane.call(this, evt_or_panes);\r
4387                 panes = panes ? panes.split(",") : _c.allPanes;\r
4388 \r
4389                 $.each(panes, function (idx, pane) {\r
4390                         var\r
4391                                 $P      = $Ps[pane]\r
4392                         ,       $C      = $Cs[pane]\r
4393                         ,       o       = options[pane]\r
4394                         ,       s       = state[pane]\r
4395                         ,       m       = s.content // m = measurements\r
4396                         ;\r
4397                         if (!$P || !$C || !$P.is(":visible")) return true; // NOT VISIBLE - skip\r
4398 \r
4399                         // if content-element was REMOVED, update OR remove the pointer\r
4400                         if (!$C.length) {\r
4401                                 initContent(pane, false);       // false = do NOT sizeContent() - already there!\r
4402                                 if (!$C) return;                        // no replacement element found - pointer have been removed\r
4403                         }\r
4404 \r
4405                         // onsizecontent_start will CANCEL resizing if returns false\r
4406                         if (false === _runCallbacks("onsizecontent_start", pane)) return;\r
4407 \r
4408                         // skip re-measuring offsets if live-resizing\r
4409                         if ((!s.isMoving && !s.isResizing) || o.liveContentResizing || remeasure || m.top == undefined) {\r
4410                                 _measure();\r
4411                                 // if any footers are below pane-bottom, they may not measure correctly,\r
4412                                 // so allow pane overflow and re-measure\r
4413                                 if (m.hiddenFooters > 0 && $P.css("overflow") === "hidden") {\r
4414                                         $P.css("overflow", "visible");\r
4415                                         _measure(); // remeasure while overflowing\r
4416                                         $P.css("overflow", "hidden");\r
4417                                 }\r
4418                         }\r
4419                         // NOTE: spaceAbove/Below *includes* the pane paddingTop/Bottom, but not pane.borders\r
4420                         var newH = s.innerHeight - (m.spaceAbove - s.css.paddingTop) - (m.spaceBelow - s.css.paddingBottom);\r
4421 \r
4422                         if (!$C.is(":visible") || m.height != newH) {\r
4423                                 // size the Content element to fit new pane-size - will autoHide if not enough room\r
4424                                 setOuterHeight($C, newH, true); // true=autoHide\r
4425                                 m.height = newH; // save new height\r
4426                         };\r
4427 \r
4428                         if (state.initialized)\r
4429                                 _runCallbacks("onsizecontent_end", pane);\r
4430 \r
4431                         function _below ($E) {\r
4432                                 return max(s.css.paddingBottom, (parseInt($E.css("marginBottom"), 10) || 0));\r
4433                         };\r
4434 \r
4435                         function _measure () {\r
4436                                 var\r
4437                                         ignore  = options[pane].contentIgnoreSelector\r
4438                                 ,       $Fs             = $C.nextAll().not(".ui-layout-mask").not(ignore || ":lt(0)") // not :lt(0) = ALL\r
4439                                 ,       $Fs_vis = $Fs.filter(':visible')\r
4440                                 ,       $F              = $Fs_vis.filter(':last')\r
4441                                 ;\r
4442                                 m = {\r
4443                                         top:                    $C[0].offsetTop\r
4444                                 ,       height:                 $C.outerHeight()\r
4445                                 ,       numFooters:             $Fs.length\r
4446                                 ,       hiddenFooters:  $Fs.length - $Fs_vis.length\r
4447                                 ,       spaceBelow:             0 // correct if no content footer ($E)\r
4448                                 }\r
4449                                         m.spaceAbove    = m.top; // just for state - not used in calc\r
4450                                         m.bottom                = m.top + m.height;\r
4451                                 if ($F.length)\r
4452                                         //spaceBelow = (LastFooter.top + LastFooter.height) [footerBottom] - Content.bottom + max(LastFooter.marginBottom, pane.paddingBotom)\r
4453                                         m.spaceBelow = ($F[0].offsetTop + $F.outerHeight()) - m.bottom + _below($F);\r
4454                                 else // no footer - check marginBottom on Content element itself\r
4455                                         m.spaceBelow = _below($C);\r
4456                         };\r
4457                 });\r
4458         }\r
4459 \r
4460 \r
4461         /**\r
4462          * Called every time a pane is opened, closed, or resized to slide the togglers to 'center' and adjust their length if necessary\r
4463          *\r
4464          * @see  initHandles(), open(), close(), resizeAll()\r
4465          * @param {(string|Object)=}            evt_or_panes    The pane(s) being resized\r
4466          */\r
4467 ,       sizeHandles = function (evt_or_panes) {\r
4468                 var panes = evtPane.call(this, evt_or_panes)\r
4469                 panes = panes ? panes.split(",") : _c.borderPanes;\r
4470 \r
4471                 $.each(panes, function (i, pane) {\r
4472                         var \r
4473                                 o       = options[pane]\r
4474                         ,       s       = state[pane]\r
4475                         ,       $P      = $Ps[pane]\r
4476                         ,       $R      = $Rs[pane]\r
4477                         ,       $T      = $Ts[pane]\r
4478                         ,       $TC\r
4479                         ;\r
4480                         if (!$P || !$R) return;\r
4481 \r
4482                         var\r
4483                                 dir                     = _c[pane].dir\r
4484                         ,       _state          = (s.isClosed ? "_closed" : "_open")\r
4485                         ,       spacing         = o["spacing"+ _state]\r
4486                         ,       togAlign        = o["togglerAlign"+ _state]\r
4487                         ,       togLen          = o["togglerLength"+ _state]\r
4488                         ,       paneLen\r
4489                         ,       left\r
4490                         ,       offset\r
4491                         ,       CSS = {}\r
4492                         ;\r
4493 \r
4494                         if (spacing === 0) {\r
4495                                 $R.hide();\r
4496                                 return;\r
4497                         }\r
4498                         else if (!s.noRoom && !s.isHidden) // skip if resizer was hidden for any reason\r
4499                                 $R.show(); // in case was previously hidden\r
4500 \r
4501                         // Resizer Bar is ALWAYS same width/height of pane it is attached to\r
4502                         if (dir === "horz") { // north/south\r
4503                                 //paneLen = $P.outerWidth(); // s.outerWidth || \r
4504                                 paneLen = sC.innerWidth; // handle offscreen-panes\r
4505                                 s.resizerLength = paneLen;\r
4506                                 left = $.layout.cssNum($P, "left")\r
4507                                 $R.css({\r
4508                                         width:  cssW($R, paneLen) // account for borders & padding\r
4509                                 ,       height: cssH($R, spacing) // ditto\r
4510                                 ,       left:   left > -9999 ? left : sC.inset.left // handle offscreen-panes\r
4511                                 });\r
4512                         }\r
4513                         else { // east/west\r
4514                                 paneLen = $P.outerHeight(); // s.outerHeight || \r
4515                                 s.resizerLength = paneLen;\r
4516                                 $R.css({\r
4517                                         height: cssH($R, paneLen) // account for borders & padding\r
4518                                 ,       width:  cssW($R, spacing) // ditto\r
4519                                 ,       top:    sC.inset.top + getPaneSize("north", true) // TODO: what if no North pane?\r
4520                                 //,     top:    $.layout.cssNum($Ps["center"], "top")\r
4521                                 });\r
4522                         }\r
4523 \r
4524                         // remove hover classes\r
4525                         removeHover( o, $R );\r
4526 \r
4527                         if ($T) {\r
4528                                 if (togLen === 0 || (s.isSliding && o.hideTogglerOnSlide)) {\r
4529                                         $T.hide(); // always HIDE the toggler when 'sliding'\r
4530                                         return;\r
4531                                 }\r
4532                                 else\r
4533                                         $T.show(); // in case was previously hidden\r
4534 \r
4535                                 if (!(togLen > 0) || togLen === "100%" || togLen > paneLen) {\r
4536                                         togLen = paneLen;\r
4537                                         offset = 0;\r
4538                                 }\r
4539                                 else { // calculate 'offset' based on options.PANE.togglerAlign_open/closed\r
4540                                         if (isStr(togAlign)) {\r
4541                                                 switch (togAlign) {\r
4542                                                         case "top":\r
4543                                                         case "left":    offset = 0;\r
4544                                                                                         break;\r
4545                                                         case "bottom":\r
4546                                                         case "right":   offset = paneLen - togLen;\r
4547                                                                                         break;\r
4548                                                         case "middle":\r
4549                                                         case "center":\r
4550                                                         default:                offset = round((paneLen - togLen) / 2); // 'default' catches typos\r
4551                                                 }\r
4552                                         }\r
4553                                         else { // togAlign = number\r
4554                                                 var x = parseInt(togAlign, 10); //\r
4555                                                 if (togAlign >= 0) offset = x;\r
4556                                                 else offset = paneLen - togLen + x; // NOTE: x is negative!\r
4557                                         }\r
4558                                 }\r
4559 \r
4560                                 if (dir === "horz") { // north/south\r
4561                                         var width = cssW($T, togLen);\r
4562                                         $T.css({\r
4563                                                 width:  width  // account for borders & padding\r
4564                                         ,       height: cssH($T, spacing) // ditto\r
4565                                         ,       left:   offset // TODO: VERIFY that toggler  positions correctly for ALL values\r
4566                                         ,       top:    0\r
4567                                         });\r
4568                                         // CENTER the toggler content SPAN\r
4569                                         $T.children(".content").each(function(){\r
4570                                                 $TC = $(this);\r
4571                                                 $TC.css("marginLeft", round((width-$TC.outerWidth())/2)); // could be negative\r
4572                                         });\r
4573                                 }\r
4574                                 else { // east/west\r
4575                                         var height = cssH($T, togLen);\r
4576                                         $T.css({\r
4577                                                 height: height // account for borders & padding\r
4578                                         ,       width:  cssW($T, spacing) // ditto\r
4579                                         ,       top:    offset // POSITION the toggler\r
4580                                         ,       left:   0\r
4581                                         });\r
4582                                         // CENTER the toggler content SPAN\r
4583                                         $T.children(".content").each(function(){\r
4584                                                 $TC = $(this);\r
4585                                                 $TC.css("marginTop", round((height-$TC.outerHeight())/2)); // could be negative\r
4586                                         });\r
4587                                 }\r
4588 \r
4589                                 // remove ALL hover classes\r
4590                                 removeHover( 0, $T );\r
4591                         }\r
4592 \r
4593                         // DONE measuring and sizing this resizer/toggler, so can be 'hidden' now\r
4594                         if (!state.initialized && (o.initHidden || s.isHidden)) {\r
4595                                 $R.hide();\r
4596                                 if ($T) $T.hide();\r
4597                         }\r
4598                 });\r
4599         }\r
4600 \r
4601 \r
4602         /**\r
4603          * @param {(string|Object)}     evt_or_pane\r
4604          */\r
4605 ,       enableClosable = function (evt_or_pane) {\r
4606                 if (!isInitialized()) return;\r
4607                 var     pane = evtPane.call(this, evt_or_pane)\r
4608                 ,       $T      = $Ts[pane]\r
4609                 ,       o       = options[pane]\r
4610                 ;\r
4611                 if (!$T) return;\r
4612                 o.closable = true;\r
4613                 $T      .bind("click."+ sID, function(evt){ evt.stopPropagation(); toggle(pane); })\r
4614                         .css("visibility", "visible")\r
4615                         .css("cursor", "pointer")\r
4616                         .attr("title", state[pane].isClosed ? o.tips.Open : o.tips.Close) // may be blank\r
4617                         .show();\r
4618         }\r
4619         /**\r
4620          * @param {(string|Object)}     evt_or_pane\r
4621          * @param {boolean=}                    [hide=false]\r
4622          */\r
4623 ,       disableClosable = function (evt_or_pane, hide) {\r
4624                 if (!isInitialized()) return;\r
4625                 var     pane = evtPane.call(this, evt_or_pane)\r
4626                 ,       $T      = $Ts[pane]\r
4627                 ;\r
4628                 if (!$T) return;\r
4629                 options[pane].closable = false;\r
4630                 // is closable is disable, then pane MUST be open!\r
4631                 if (state[pane].isClosed) open(pane, false, true);\r
4632                 $T      .unbind("."+ sID)\r
4633                         .css("visibility", hide ? "hidden" : "visible") // instead of hide(), which creates logic issues\r
4634                         .css("cursor", "default")\r
4635                         .attr("title", "");\r
4636         }\r
4637 \r
4638 \r
4639         /**\r
4640          * @param {(string|Object)}     evt_or_pane\r
4641          */\r
4642 ,       enableSlidable = function (evt_or_pane) {\r
4643                 if (!isInitialized()) return;\r
4644                 var     pane = evtPane.call(this, evt_or_pane)\r
4645                 ,       $R      = $Rs[pane]\r
4646                 ;\r
4647                 if (!$R || !$R.data('draggable')) return;\r
4648                 options[pane].slidable = true; \r
4649                 if (state[pane].isClosed)\r
4650                         bindStartSlidingEvents(pane, true);\r
4651         }\r
4652         /**\r
4653          * @param {(string|Object)}     evt_or_pane\r
4654          */\r
4655 ,       disableSlidable = function (evt_or_pane) {\r
4656                 if (!isInitialized()) return;\r
4657                 var     pane = evtPane.call(this, evt_or_pane)\r
4658                 ,       $R      = $Rs[pane]\r
4659                 ;\r
4660                 if (!$R) return;\r
4661                 options[pane].slidable = false; \r
4662                 if (state[pane].isSliding)\r
4663                         close(pane, false, true);\r
4664                 else {\r
4665                         bindStartSlidingEvents(pane, false);\r
4666                         $R      .css("cursor", "default")\r
4667                                 .attr("title", "");\r
4668                         removeHover(null, $R[0]); // in case currently hovered\r
4669                 }\r
4670         }\r
4671 \r
4672 \r
4673         /**\r
4674          * @param {(string|Object)}     evt_or_pane\r
4675          */\r
4676 ,       enableResizable = function (evt_or_pane) {\r
4677                 if (!isInitialized()) return;\r
4678                 var     pane = evtPane.call(this, evt_or_pane)\r
4679                 ,       $R      = $Rs[pane]\r
4680                 ,       o       = options[pane]\r
4681                 ;\r
4682                 if (!$R || !$R.data('draggable')) return;\r
4683                 o.resizable = true; \r
4684                 $R.draggable("enable");\r
4685                 if (!state[pane].isClosed)\r
4686                         $R      .css("cursor", o.resizerCursor)\r
4687                                 .attr("title", o.tips.Resize);\r
4688         }\r
4689         /**\r
4690          * @param {(string|Object)}     evt_or_pane\r
4691          */\r
4692 ,       disableResizable = function (evt_or_pane) {\r
4693                 if (!isInitialized()) return;\r
4694                 var     pane = evtPane.call(this, evt_or_pane)\r
4695                 ,       $R      = $Rs[pane]\r
4696                 ;\r
4697                 if (!$R || !$R.data('draggable')) return;\r
4698                 options[pane].resizable = false; \r
4699                 $R      .draggable("disable")\r
4700                         .css("cursor", "default")\r
4701                         .attr("title", "");\r
4702                 removeHover(null, $R[0]); // in case currently hovered\r
4703         }\r
4704 \r
4705 \r
4706         /**\r
4707          * Move a pane from source-side (eg, west) to target-side (eg, east)\r
4708          * If pane exists on target-side, move that to source-side, ie, 'swap' the panes\r
4709          *\r
4710          * @param {(string|Object)}     evt_or_pane1    The pane/edge being swapped\r
4711          * @param {string}                      pane2                   ditto\r
4712          */\r
4713 ,       swapPanes = function (evt_or_pane1, pane2) {\r
4714                 if (!isInitialized()) return;\r
4715                 var pane1 = evtPane.call(this, evt_or_pane1);\r
4716                 // change state.edge NOW so callbacks can know where pane is headed...\r
4717                 state[pane1].edge = pane2;\r
4718                 state[pane2].edge = pane1;\r
4719                 // run these even if NOT state.initialized\r
4720                 if (false === _runCallbacks("onswap_start", pane1)\r
4721                  ||     false === _runCallbacks("onswap_start", pane2)\r
4722                 ) {\r
4723                         state[pane1].edge = pane1; // reset\r
4724                         state[pane2].edge = pane2;\r
4725                         return;\r
4726                 }\r
4727 \r
4728                 var\r
4729                         oPane1  = copy( pane1 )\r
4730                 ,       oPane2  = copy( pane2 )\r
4731                 ,       sizes   = {}\r
4732                 ;\r
4733                 sizes[pane1] = oPane1 ? oPane1.state.size : 0;\r
4734                 sizes[pane2] = oPane2 ? oPane2.state.size : 0;\r
4735 \r
4736                 // clear pointers & state\r
4737                 $Ps[pane1] = false; \r
4738                 $Ps[pane2] = false;\r
4739                 state[pane1] = {};\r
4740                 state[pane2] = {};\r
4741                 \r
4742                 // ALWAYS remove the resizer & toggler elements\r
4743                 if ($Ts[pane1]) $Ts[pane1].remove();\r
4744                 if ($Ts[pane2]) $Ts[pane2].remove();\r
4745                 if ($Rs[pane1]) $Rs[pane1].remove();\r
4746                 if ($Rs[pane2]) $Rs[pane2].remove();\r
4747                 $Rs[pane1] = $Rs[pane2] = $Ts[pane1] = $Ts[pane2] = false;\r
4748 \r
4749                 // transfer element pointers and data to NEW Layout keys\r
4750                 move( oPane1, pane2 );\r
4751                 move( oPane2, pane1 );\r
4752 \r
4753                 // cleanup objects\r
4754                 oPane1 = oPane2 = sizes = null;\r
4755 \r
4756                 // make panes 'visible' again\r
4757                 if ($Ps[pane1]) $Ps[pane1].css(_c.visible);\r
4758                 if ($Ps[pane2]) $Ps[pane2].css(_c.visible);\r
4759 \r
4760                 // fix any size discrepancies caused by swap\r
4761                 resizeAll();\r
4762 \r
4763                 // run these even if NOT state.initialized\r
4764                 _runCallbacks("onswap_end", pane1);\r
4765                 _runCallbacks("onswap_end", pane2);\r
4766 \r
4767                 return;\r
4768 \r
4769                 function copy (n) { // n = pane\r
4770                         var\r
4771                                 $P      = $Ps[n]\r
4772                         ,       $C      = $Cs[n]\r
4773                         ;\r
4774                         return !$P ? false : {\r
4775                                 pane:           n\r
4776                         ,       P:                      $P ? $P[0] : false\r
4777                         ,       C:                      $C ? $C[0] : false\r
4778                         ,       state:          $.extend(true, {}, state[n])\r
4779                         ,       options:        $.extend(true, {}, options[n])\r
4780                         }\r
4781                 };\r
4782 \r
4783                 function move (oPane, pane) {\r
4784                         if (!oPane) return;\r
4785                         var\r
4786                                 P               = oPane.P\r
4787                         ,       C               = oPane.C\r
4788                         ,       oldPane = oPane.pane\r
4789                         ,       c               = _c[pane]\r
4790                         //      save pane-options that should be retained\r
4791                         ,       s               = $.extend(true, {}, state[pane])\r
4792                         ,       o               = options[pane]\r
4793                         //      RETAIN side-specific FX Settings - more below\r
4794                         ,       fx              = { resizerCursor: o.resizerCursor }\r
4795                         ,       re, size, pos\r
4796                         ;\r
4797                         $.each("fxName,fxSpeed,fxSettings".split(","), function (i, k) {\r
4798                                 fx[k +"_open"]  = o[k +"_open"];\r
4799                                 fx[k +"_close"] = o[k +"_close"];\r
4800                                 fx[k +"_size"]  = o[k +"_size"];\r
4801                         });\r
4802 \r
4803                         // update object pointers and attributes\r
4804                         $Ps[pane] = $(P)\r
4805                                 .data({\r
4806                                         layoutPane:             Instance[pane]  // NEW pointer to pane-alias-object\r
4807                                 ,       layoutEdge:             pane\r
4808                                 })\r
4809                                 .css(_c.hidden)\r
4810                                 .css(c.cssReq)\r
4811                         ;\r
4812                         $Cs[pane] = C ? $(C) : false;\r
4813 \r
4814                         // set options and state\r
4815                         options[pane]   = $.extend(true, {}, oPane.options, fx);\r
4816                         state[pane]             = $.extend(true, {}, oPane.state);\r
4817 \r
4818                         // change classNames on the pane, eg: ui-layout-pane-east ==> ui-layout-pane-west\r
4819                         re = new RegExp(o.paneClass +"-"+ oldPane, "g");\r
4820                         P.className = P.className.replace(re, o.paneClass +"-"+ pane);\r
4821 \r
4822                         // ALWAYS regenerate the resizer & toggler elements\r
4823                         initHandles(pane); // create the required resizer & toggler\r
4824 \r
4825                         // if moving to different orientation, then keep 'target' pane size\r
4826                         if (c.dir != _c[oldPane].dir) {\r
4827                                 size = sizes[pane] || 0;\r
4828                                 setSizeLimits(pane); // update pane-state\r
4829                                 size = max(size, state[pane].minSize);\r
4830                                 // use manualSizePane to disable autoResize - not useful after panes are swapped\r
4831                                 manualSizePane(pane, size, true, true); // true/true = skipCallback/noAnimation\r
4832                         }\r
4833                         else // move the resizer here\r
4834                                 $Rs[pane].css(c.side, sC.inset[c.side] + (state[pane].isVisible ? getPaneSize(pane) : 0));\r
4835 \r
4836 \r
4837                         // ADD CLASSNAMES & SLIDE-BINDINGS\r
4838                         if (oPane.state.isVisible && !s.isVisible)\r
4839                                 setAsOpen(pane, true); // true = skipCallback\r
4840                         else {\r
4841                                 setAsClosed(pane);\r
4842                                 bindStartSlidingEvents(pane, true); // will enable events IF option is set\r
4843                         }\r
4844 \r
4845                         // DESTROY the object\r
4846                         oPane = null;\r
4847                 };\r
4848         }\r
4849 \r
4850 \r
4851         /**\r
4852          * INTERNAL method to sync pin-buttons when pane is opened or closed\r
4853          * Unpinned means the pane is 'sliding' - ie, over-top of the adjacent panes\r
4854          *\r
4855          * @see  open(), setAsOpen(), setAsClosed()\r
4856          * @param {string}      pane   These are the params returned to callbacks by layout()\r
4857          * @param {boolean}     doPin  True means set the pin 'down', False means 'up'\r
4858          */\r
4859 ,       syncPinBtns = function (pane, doPin) {\r
4860                 if ($.layout.plugins.buttons)\r
4861                         $.each(state[pane].pins, function (i, selector) {\r
4862                                 $.layout.buttons.setPinState(Instance, $(selector), pane, doPin);\r
4863                         });\r
4864         }\r
4865 \r
4866 ;       // END var DECLARATIONS\r
4867 \r
4868         /**\r
4869          * Capture keys when enableCursorHotkey - toggle pane if hotkey pressed\r
4870          *\r
4871          * @see  document.keydown()\r
4872          */\r
4873         function keyDown (evt) {\r
4874                 if (!evt) return true;\r
4875                 var code = evt.keyCode;\r
4876                 if (code < 33) return true; // ignore special keys: ENTER, TAB, etc\r
4877 \r
4878                 var\r
4879                         PANE = {\r
4880                                 38: "north" // Up Cursor        - $.ui.keyCode.UP\r
4881                         ,       40: "south" // Down Cursor      - $.ui.keyCode.DOWN\r
4882                         ,       37: "west"  // Left Cursor      - $.ui.keyCode.LEFT\r
4883                         ,       39: "east"  // Right Cursor     - $.ui.keyCode.RIGHT\r
4884                         }\r
4885                 ,       ALT             = evt.altKey // no worky!\r
4886                 ,       SHIFT   = evt.shiftKey\r
4887                 ,       CTRL    = evt.ctrlKey\r
4888                 ,       CURSOR  = (CTRL && code >= 37 && code <= 40)\r
4889                 ,       o, k, m, pane\r
4890                 ;\r
4891 \r
4892                 if (CURSOR && options[PANE[code]].enableCursorHotkey) // valid cursor-hotkey\r
4893                         pane = PANE[code];\r
4894                 else if (CTRL || SHIFT) // check to see if this matches a custom-hotkey\r
4895                         $.each(_c.borderPanes, function (i, p) { // loop each pane to check its hotkey\r
4896                                 o = options[p];\r
4897                                 k = o.customHotkey;\r
4898                                 m = o.customHotkeyModifier; // if missing or invalid, treated as "CTRL+SHIFT"\r
4899                                 if ((SHIFT && m=="SHIFT") || (CTRL && m=="CTRL") || (CTRL && SHIFT)) { // Modifier matches\r
4900                                         if (k && code === (isNaN(k) || k <= 9 ? k.toUpperCase().charCodeAt(0) : k)) { // Key matches\r
4901                                                 pane = p;\r
4902                                                 return false; // BREAK\r
4903                                         }\r
4904                                 }\r
4905                         });\r
4906 \r
4907                 // validate pane\r
4908                 if (!pane || !$Ps[pane] || !options[pane].closable || state[pane].isHidden)\r
4909                         return true;\r
4910 \r
4911                 toggle(pane);\r
4912 \r
4913                 evt.stopPropagation();\r
4914                 evt.returnValue = false; // CANCEL key\r
4915                 return false;\r
4916         };\r
4917 \r
4918 \r
4919 /*\r
4920  * ######################################\r
4921  *      UTILITY METHODS\r
4922  *      called externally or by initButtons\r
4923  * ######################################\r
4924  */\r
4925 \r
4926         /**\r
4927          * Change/reset a pane overflow setting & zIndex to allow popups/drop-downs to work\r
4928          *\r
4929          * @param {Object=}   [el]      (optional) Can also be 'bound' to a click, mouseOver, or other event\r
4930          */\r
4931         function allowOverflow (el) {\r
4932                 if (!isInitialized()) return;\r
4933                 if (this && this.tagName) el = this; // BOUND to element\r
4934                 var $P;\r
4935                 if (isStr(el))\r
4936                         $P = $Ps[el];\r
4937                 else if ($(el).data("layoutRole"))\r
4938                         $P = $(el);\r
4939                 else\r
4940                         $(el).parents().each(function(){\r
4941                                 if ($(this).data("layoutRole")) {\r
4942                                         $P = $(this);\r
4943                                         return false; // BREAK\r
4944                                 }\r
4945                         });\r
4946                 if (!$P || !$P.length) return; // INVALID\r
4947 \r
4948                 var\r
4949                         pane    = $P.data("layoutEdge")\r
4950                 ,       s               = state[pane]\r
4951                 ;\r
4952 \r
4953                 // if pane is already raised, then reset it before doing it again!\r
4954                 // this would happen if allowOverflow is attached to BOTH the pane and an element \r
4955                 if (s.cssSaved)\r
4956                         resetOverflow(pane); // reset previous CSS before continuing\r
4957 \r
4958                 // if pane is raised by sliding or resizing, or its closed, then abort\r
4959                 if (s.isSliding || s.isResizing || s.isClosed) {\r
4960                         s.cssSaved = false;\r
4961                         return;\r
4962                 }\r
4963 \r
4964                 var\r
4965                         newCSS  = { zIndex: (options.zIndexes.resizer_normal + 1) }\r
4966                 ,       curCSS  = {}\r
4967                 ,       of              = $P.css("overflow")\r
4968                 ,       ofX             = $P.css("overflowX")\r
4969                 ,       ofY             = $P.css("overflowY")\r
4970                 ;\r
4971                 // determine which, if any, overflow settings need to be changed\r
4972                 if (of != "visible") {\r
4973                         curCSS.overflow = of;\r
4974                         newCSS.overflow = "visible";\r
4975                 }\r
4976                 if (ofX && !ofX.match(/(visible|auto)/)) {\r
4977                         curCSS.overflowX = ofX;\r
4978                         newCSS.overflowX = "visible";\r
4979                 }\r
4980                 if (ofY && !ofY.match(/(visible|auto)/)) {\r
4981                         curCSS.overflowY = ofX;\r
4982                         newCSS.overflowY = "visible";\r
4983                 }\r
4984 \r
4985                 // save the current overflow settings - even if blank!\r
4986                 s.cssSaved = curCSS;\r
4987 \r
4988                 // apply new CSS to raise zIndex and, if necessary, make overflow 'visible'\r
4989                 $P.css( newCSS );\r
4990 \r
4991                 // make sure the zIndex of all other panes is normal\r
4992                 $.each(_c.allPanes, function(i, p) {\r
4993                         if (p != pane) resetOverflow(p);\r
4994                 });\r
4995 \r
4996         };\r
4997         /**\r
4998          * @param {Object=}   [el]      (optional) Can also be 'bound' to a click, mouseOver, or other event\r
4999          */\r
5000         function resetOverflow (el) {\r
5001                 if (!isInitialized()) return;\r
5002                 if (this && this.tagName) el = this; // BOUND to element\r
5003                 var $P;\r
5004                 if (isStr(el))\r
5005                         $P = $Ps[el];\r
5006                 else if ($(el).data("layoutRole"))\r
5007                         $P = $(el);\r
5008                 else\r
5009                         $(el).parents().each(function(){\r
5010                                 if ($(this).data("layoutRole")) {\r
5011                                         $P = $(this);\r
5012                                         return false; // BREAK\r
5013                                 }\r
5014                         });\r
5015                 if (!$P || !$P.length) return; // INVALID\r
5016 \r
5017                 var\r
5018                         pane    = $P.data("layoutEdge")\r
5019                 ,       s               = state[pane]\r
5020                 ,       CSS             = s.cssSaved || {}\r
5021                 ;\r
5022                 // reset the zIndex\r
5023                 if (!s.isSliding && !s.isResizing)\r
5024                         $P.css("zIndex", options.zIndexes.pane_normal);\r
5025 \r
5026                 // reset Overflow - if necessary\r
5027                 $P.css( CSS );\r
5028 \r
5029                 // clear var\r
5030                 s.cssSaved = false;\r
5031         };\r
5032 \r
5033 /*\r
5034  * #####################\r
5035  * CREATE/RETURN LAYOUT\r
5036  * #####################\r
5037  */\r
5038 \r
5039         // validate that container exists\r
5040         var $N = $(this).eq(0); // FIRST matching Container element\r
5041         if (!$N.length) {\r
5042                 return _log( options.errors.containerMissing );\r
5043         };\r
5044 \r
5045         // Users retrieve Instance of a layout with: $N.layout() OR $N.data("layout")\r
5046         // return the Instance-pointer if layout has already been initialized\r
5047         if ($N.data("layoutContainer") && $N.data("layout"))\r
5048                 return $N.data("layout"); // cached pointer\r
5049 \r
5050         // init global vars\r
5051         var \r
5052                 $Ps     = {}    // Panes x5             - set in initPanes()\r
5053         ,       $Cs     = {}    // Content x5   - set in initPanes()\r
5054         ,       $Rs     = {}    // Resizers x4  - set in initHandles()\r
5055         ,       $Ts     = {}    // Togglers x4  - set in initHandles()\r
5056         ,       $Ms     = $([]) // Masks - up to 2 masks per pane (IFRAME + DIV)\r
5057         //      aliases for code brevity\r
5058         ,       sC      = state.container // alias for easy access to 'container dimensions'\r
5059         ,       sID     = state.id // alias for unique layout ID/namespace - eg: "layout435"\r
5060         ;\r
5061 \r
5062         // create Instance object to expose data & option Properties, and primary action Methods\r
5063         var Instance = {\r
5064         //      layout data\r
5065                 options:                        options                 // property - options hash\r
5066         ,       state:                          state                   // property - dimensions hash\r
5067         //      object pointers\r
5068         ,       container:                      $N                              // property - object pointers for layout container\r
5069         ,       panes:                          $Ps                             // property - object pointers for ALL Panes: panes.north, panes.center\r
5070         ,       contents:                       $Cs                             // property - object pointers for ALL Content: contents.north, contents.center\r
5071         ,       resizers:                       $Rs                             // property - object pointers for ALL Resizers, eg: resizers.north\r
5072         ,       togglers:                       $Ts                             // property - object pointers for ALL Togglers, eg: togglers.north\r
5073         //      border-pane open/close\r
5074         ,       hide:                           hide                    // method - ditto\r
5075         ,       show:                           show                    // method - ditto\r
5076         ,       toggle:                         toggle                  // method - pass a 'pane' ("north", "west", etc)\r
5077         ,       open:                           open                    // method - ditto\r
5078         ,       close:                          close                   // method - ditto\r
5079         ,       slideOpen:                      slideOpen               // method - ditto\r
5080         ,       slideClose:                     slideClose              // method - ditto\r
5081         ,       slideToggle:            slideToggle             // method - ditto\r
5082         //      pane actions\r
5083         ,       setSizeLimits:          setSizeLimits   // method - pass a 'pane' - update state min/max data\r
5084         ,       _sizePane:                      sizePane                // method -intended for user by plugins only!\r
5085         ,       sizePane:                       manualSizePane  // method - pass a 'pane' AND an 'outer-size' in pixels or percent, or 'auto'\r
5086         ,       sizeContent:            sizeContent             // method - pass a 'pane'\r
5087         ,       swapPanes:                      swapPanes               // method - pass TWO 'panes' - will swap them\r
5088         ,       showMasks:                      showMasks               // method - pass a 'pane' OR list of panes - default = all panes with mask option set\r
5089         ,       hideMasks:                      hideMasks               // method - ditto'\r
5090         //      pane element methods\r
5091         ,       initContent:            initContent             // method - ditto\r
5092         ,       addPane:                        addPane                 // method - pass a 'pane'\r
5093         ,       removePane:                     removePane              // method - pass a 'pane' to remove from layout, add 'true' to delete the pane-elem\r
5094         ,       createChildren:         createChildren  // method - pass a 'pane' and (optional) layout-options (OVERRIDES options[pane].children\r
5095         ,       refreshChildren:        refreshChildren // method - pass a 'pane' and a layout-instance\r
5096         //      special pane option setting\r
5097         ,       enableClosable:         enableClosable  // method - pass a 'pane'\r
5098         ,       disableClosable:        disableClosable // method - ditto\r
5099         ,       enableSlidable:         enableSlidable  // method - ditto\r
5100         ,       disableSlidable:        disableSlidable // method - ditto\r
5101         ,       enableResizable:        enableResizable // method - ditto\r
5102         ,       disableResizable:       disableResizable// method - ditto\r
5103         //      utility methods for panes\r
5104         ,       allowOverflow:          allowOverflow   // utility - pass calling element (this)\r
5105         ,       resetOverflow:          resetOverflow   // utility - ditto\r
5106         //      layout control\r
5107         ,       destroy:                        destroy                 // method - no parameters\r
5108         ,       initPanes:                      isInitialized   // method - no parameters\r
5109         ,       resizeAll:                      resizeAll               // method - no parameters\r
5110         //      callback triggering\r
5111         ,       runCallbacks:           _runCallbacks   // method - pass evtName & pane (if a pane-event), eg: trigger("onopen", "west")\r
5112         //      alias collections of options, state and children - created in addPane and extended elsewhere\r
5113         ,       hasParentLayout:        false                   // set by initContainer()\r
5114         ,       children:                       children                // pointers to child-layouts, eg: Instance.children.west.layoutName\r
5115         ,       north:                          false                   // alias group: { name: pane, pane: $Ps[pane], options: options[pane], state: state[pane], children: children[pane] }\r
5116         ,       south:                          false                   // ditto\r
5117         ,       west:                           false                   // ditto\r
5118         ,       east:                           false                   // ditto\r
5119         ,       center:                         false                   // ditto\r
5120         };\r
5121 \r
5122         // create the border layout NOW\r
5123         if (_create() === 'cancel') // onload_start callback returned false to CANCEL layout creation\r
5124                 return null;\r
5125         else // true OR false -- if layout-elements did NOT init (hidden or do not exist), can auto-init later\r
5126                 return Instance; // return the Instance object\r
5127 \r
5128 }\r
5129 \r
5130 \r
5131 })( jQuery );\r
5132 \r
5133 \r
5134 \r
5135 \r
5136 /**\r
5137  * jquery.layout.state 1.2\r
5138  * $Date: 2014-08-30 08:00:00 (Sat, 30 Aug 2014) $\r
5139  *\r
5140  * Copyright (c) 2014 \r
5141  *   Kevin Dalman (http://allpro.net)\r
5142  *\r
5143  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)\r
5144  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.\r
5145  *\r
5146  * @requires: UI Layout 1.4.0 or higher\r
5147  * @requires: $.ui.cookie (above)\r
5148  *\r
5149  * @see: http://groups.google.com/group/jquery-ui-layout\r
5150  */\r
5151 ;(function ($) {\r
5152 \r
5153 if (!$.layout) return;\r
5154 \r
5155 \r
5156 /**\r
5157  *      UI COOKIE UTILITY\r
5158  *\r
5159  *      A $.cookie OR $.ui.cookie namespace *should be standard*, but until then...\r
5160  *      This creates $.ui.cookie so Layout does not need the cookie.jquery.js plugin\r
5161  *      NOTE: This utility is REQUIRED by the layout.state plugin\r
5162  *\r
5163  *      Cookie methods in Layout are created as part of State Management \r
5164  */\r
5165 if (!$.ui) $.ui = {};\r
5166 $.ui.cookie = {\r
5167 \r
5168         // cookieEnabled is not in DOM specs, but DOES works in all browsers,including IE6\r
5169         acceptsCookies: !!navigator.cookieEnabled\r
5170 \r
5171 ,       read: function (name) {\r
5172                 var\r
5173                         c       = document.cookie\r
5174                 ,       cs      = c ? c.split(';') : []\r
5175                 ,       pair, data, i\r
5176                 ;\r
5177                 for (i=0; pair=cs[i]; i++) {\r
5178                         data = $.trim(pair).split('='); // name=value => [ name, value ]\r
5179                         if (data[0] == name) // found the layout cookie\r
5180                                 return decodeURIComponent(data[1]);\r
5181                 }\r
5182                 return null;\r
5183         }\r
5184 \r
5185 ,       write: function (name, val, cookieOpts) {\r
5186                 var     params  = ""\r
5187                 ,       date    = ""\r
5188                 ,       clear   = false\r
5189                 ,       o               = cookieOpts || {}\r
5190                 ,       x               = o.expires  || null\r
5191                 ,       t               = $.type(x)\r
5192                 ;\r
5193                 if (t === "date")\r
5194                         date = x;\r
5195                 else if (t === "string" && x > 0) {\r
5196                         x = parseInt(x,10);\r
5197                         t = "number";\r
5198                 }\r
5199                 if (t === "number") {\r
5200                         date = new Date();\r
5201                         if (x > 0)\r
5202                                 date.setDate(date.getDate() + x);\r
5203                         else {\r
5204                                 date.setFullYear(1970);\r
5205                                 clear = true;\r
5206                         }\r
5207                 }\r
5208                 if (date)               params += ";expires="+ date.toUTCString();\r
5209                 if (o.path)             params += ";path="+ o.path;\r
5210                 if (o.domain)   params += ";domain="+ o.domain;\r
5211                 if (o.secure)   params += ";secure";\r
5212                 document.cookie = name +"="+ (clear ? "" : encodeURIComponent( val )) + params; // write or clear cookie\r
5213         }\r
5214 \r
5215 ,       clear: function (name) {\r
5216                 $.ui.cookie.write(name, "", {expires: -1});\r
5217         }\r
5218 \r
5219 };\r
5220 // if cookie.jquery.js is not loaded, create an alias to replicate it\r
5221 // this may be useful to other plugins or code dependent on that plugin\r
5222 if (!$.cookie) $.cookie = function (k, v, o) {\r
5223         var C = $.ui.cookie;\r
5224         if (v === null)\r
5225                 C.clear(k);\r
5226         else if (v === undefined)\r
5227                 return C.read(k);\r
5228         else\r
5229                 C.write(k, v, o);\r
5230 };\r
5231 \r
5232 \r
5233 \r
5234 /**\r
5235  *      State-management options stored in options.stateManagement, which includes a .cookie hash\r
5236  *      Default options saves ALL KEYS for ALL PANES, ie: pane.size, pane.isClosed, pane.isHidden\r
5237  *\r
5238  *      // STATE/COOKIE OPTIONS\r
5239  *      @example $(el).layout({\r
5240                                 stateManagement: {\r
5241                                         enabled:        true\r
5242                                 ,       stateKeys:      "east.size,west.size,east.isClosed,west.isClosed"\r
5243                                 ,       cookie:         { name: "appLayout", path: "/" }\r
5244                                 }\r
5245                         })\r
5246  *      @example $(el).layout({ stateManagement__enabled: true }) // enable auto-state-management using cookies\r
5247  *      @example $(el).layout({ stateManagement__cookie: { name: "appLayout", path: "/" } })\r
5248  *      @example $(el).layout({ stateManagement__cookie__name: "appLayout", stateManagement__cookie__path: "/" })\r
5249  *\r
5250  *      // STATE/COOKIE METHODS\r
5251  *      @example myLayout.saveCookie( "west.isClosed,north.size,south.isHidden", {expires: 7} );\r
5252  *      @example myLayout.loadCookie();\r
5253  *      @example myLayout.deleteCookie();\r
5254  *      @example var JSON = myLayout.readState();       // CURRENT Layout State\r
5255  *      @example var JSON = myLayout.readCookie();      // SAVED Layout State (from cookie)\r
5256  *      @example var JSON = myLayout.state.stateData;   // LAST LOADED Layout State (cookie saved in layout.state hash)\r
5257  *\r
5258  *      CUSTOM STATE-MANAGEMENT (eg, saved in a database)\r
5259  *      @example var JSON = myLayout.readState( "west.isClosed,north.size,south.isHidden" );\r
5260  *      @example myLayout.loadState( JSON );\r
5261  */\r
5262 \r
5263 // tell Layout that the state plugin is available\r
5264 $.layout.plugins.stateManagement = true;\r
5265 \r
5266 //      Add State-Management options to layout.defaults\r
5267 $.layout.defaults.stateManagement = {\r
5268         enabled:                false   // true = enable state-management, even if not using cookies\r
5269 ,       autoSave:               true    // Save a state-cookie when page exits?\r
5270 ,       autoLoad:               true    // Load the state-cookie when Layout inits?\r
5271 ,       animateLoad:    true    // animate panes when loading state into an active layout\r
5272 ,       includeChildren: true   // recurse into child layouts to include their state as well\r
5273         // List state-data to save - must be pane-specific\r
5274 ,       stateKeys:      "north.size,south.size,east.size,west.size,"+\r
5275                                 "north.isClosed,south.isClosed,east.isClosed,west.isClosed,"+\r
5276                                 "north.isHidden,south.isHidden,east.isHidden,west.isHidden"\r
5277 ,       cookie: {\r
5278                 name:   ""      // If not specified, will use Layout.name, else just "Layout"\r
5279         ,       domain: ""      // blank = current domain\r
5280         ,       path:   ""      // blank = current page, "/" = entire website\r
5281         ,       expires: ""     // 'days' to keep cookie - leave blank for 'session cookie'\r
5282         ,       secure: false\r
5283         }\r
5284 };\r
5285 \r
5286 // Set stateManagement as a 'layout-option', NOT a 'pane-option'\r
5287 $.layout.optionsMap.layout.push("stateManagement");\r
5288 // Update config so layout does not move options into the pane-default branch (panes)\r
5289 $.layout.config.optionRootKeys.push("stateManagement");\r
5290 \r
5291 /*\r
5292  *      State Management methods\r
5293  */\r
5294 $.layout.state = {\r
5295 \r
5296         /**\r
5297          * Get the current layout state and save it to a cookie\r
5298          *\r
5299          * myLayout.saveCookie( keys, cookieOpts )\r
5300          *\r
5301          * @param {Object}                      inst\r
5302          * @param {(string|Array)=}     keys\r
5303          * @param {Object=}                     cookieOpts\r
5304          */\r
5305         saveCookie: function (inst, keys, cookieOpts) {\r
5306                 var o   = inst.options\r
5307                 ,       sm      = o.stateManagement\r
5308                 ,       oC      = $.extend(true, {}, sm.cookie, cookieOpts || null)\r
5309                 ,       data = inst.state.stateData = inst.readState( keys || sm.stateKeys ) // read current panes-state\r
5310                 ;\r
5311                 $.ui.cookie.write( oC.name || o.name || "Layout", $.layout.state.encodeJSON(data), oC );\r
5312                 return $.extend(true, {}, data); // return COPY of state.stateData data\r
5313         }\r
5314 \r
5315         /**\r
5316          * Remove the state cookie\r
5317          *\r
5318          * @param {Object}      inst\r
5319          */\r
5320 ,       deleteCookie: function (inst) {\r
5321                 var o = inst.options;\r
5322                 $.ui.cookie.clear( o.stateManagement.cookie.name || o.name || "Layout" );\r
5323         }\r
5324 \r
5325         /**\r
5326          * Read & return data from the cookie - as JSON\r
5327          *\r
5328          * @param {Object}      inst\r
5329          */\r
5330 ,       readCookie: function (inst) {\r
5331                 var o = inst.options;\r
5332                 var c = $.ui.cookie.read( o.stateManagement.cookie.name || o.name || "Layout" );\r
5333                 // convert cookie string back to a hash and return it\r
5334                 return c ? $.layout.state.decodeJSON(c) : {};\r
5335         }\r
5336 \r
5337         /**\r
5338          * Get data from the cookie and USE IT to loadState\r
5339          *\r
5340          * @param {Object}      inst\r
5341          */\r
5342 ,       loadCookie: function (inst) {\r
5343                 var c = $.layout.state.readCookie(inst); // READ the cookie\r
5344                 if (c && !$.isEmptyObject( c )) {\r
5345                         inst.state.stateData = $.extend(true, {}, c); // SET state.stateData\r
5346                         inst.loadState(c); // LOAD the retrieved state\r
5347                 }\r
5348                 return c;\r
5349         }\r
5350 \r
5351         /**\r
5352          * Update layout options from the cookie, if one exists\r
5353          *\r
5354          * @param {Object}              inst\r
5355          * @param {Object=}             stateData\r
5356          * @param {boolean=}    animate\r
5357          */\r
5358 ,       loadState: function (inst, data, opts) {\r
5359                 if (!$.isPlainObject( data ) || $.isEmptyObject( data )) return;\r
5360 \r
5361                 // normalize data & cache in the state object\r
5362                 data = inst.state.stateData = $.layout.transformData( data ); // panes = default subkey\r
5363 \r
5364                 // add missing/default state-restore options\r
5365                 var smo = inst.options.stateManagement;\r
5366                 opts = $.extend({\r
5367                         animateLoad:            false //smo.animateLoad\r
5368                 ,       includeChildren:        smo.includeChildren\r
5369                 }, opts );\r
5370 \r
5371                 if (!inst.state.initialized) {\r
5372                         /*\r
5373                          *      layout NOT initialized, so just update its options\r
5374                          */\r
5375                         // MUST remove pane.children keys before applying to options\r
5376                         // use a copy so we don't remove keys from original data\r
5377                         var o = $.extend(true, {}, data);\r
5378                         //delete o.center; // center has no state-data - only children\r
5379                         $.each($.layout.config.allPanes, function (idx, pane) {\r
5380                                 if (o[pane]) delete o[pane].children;              \r
5381                          });\r
5382                         // update CURRENT layout-options with saved state data\r
5383                         $.extend(true, inst.options, o);\r
5384                 }\r
5385                 else {\r
5386                         /*\r
5387                          *      layout already initialized, so modify layout's configuration\r
5388                          */\r
5389                         var noAnimate = !opts.animateLoad\r
5390                         ,       o, c, h, state, open\r
5391                         ;\r
5392                         $.each($.layout.config.borderPanes, function (idx, pane) {\r
5393                                 o = data[ pane ];\r
5394                                 if (!$.isPlainObject( o )) return; // no key, skip pane\r
5395 \r
5396                                 s       = o.size;\r
5397                                 c       = o.initClosed;\r
5398                                 h       = o.initHidden;\r
5399                                 ar      = o.autoResize\r
5400                                 state   = inst.state[pane];\r
5401                                 open    = state.isVisible;\r
5402 \r
5403                                 // reset autoResize\r
5404                                 if (ar)\r
5405                                         state.autoResize = ar;\r
5406                                 // resize BEFORE opening\r
5407                                 if (!open)\r
5408                                         inst._sizePane(pane, s, false, false, false); // false=skipCallback/noAnimation/forceResize\r
5409                                 // open/close as necessary - DO NOT CHANGE THIS ORDER!\r
5410                                 if (h === true)                 inst.hide(pane, noAnimate);\r
5411                                 else if (c === true)    inst.close(pane, false, noAnimate);\r
5412                                 else if (c === false)   inst.open (pane, false, noAnimate);\r
5413                                 else if (h === false)   inst.show (pane, false, noAnimate);\r
5414                                 // resize AFTER any other actions\r
5415                                 if (open)\r
5416                                         inst._sizePane(pane, s, false, false, noAnimate); // animate resize if option passed\r
5417                         });\r
5418 \r
5419                         /*\r
5420                          *      RECURSE INTO CHILD-LAYOUTS\r
5421                          */\r
5422                         if (opts.includeChildren) {\r
5423                                 var paneStateChildren, childState;\r
5424                                 $.each(inst.children, function (pane, paneChildren) {\r
5425                                         paneStateChildren = data[pane] ? data[pane].children : 0;\r
5426                                         if (paneStateChildren && paneChildren) {\r
5427                                                 $.each(paneChildren, function (stateKey, child) {\r
5428                                                         childState = paneStateChildren[stateKey];\r
5429                                                         if (child && childState)\r
5430                                                                 child.loadState( childState );\r
5431                                                 });\r
5432                                         }\r
5433                                 });\r
5434                         }\r
5435                 }\r
5436         }\r
5437 \r
5438         /**\r
5439          * Get the *current layout state* and return it as a hash\r
5440          *\r
5441          * @param {Object=}             inst    // Layout instance to get state for\r
5442          * @param {object=}             [opts]  // State-Managements override options\r
5443          */\r
5444 ,       readState: function (inst, opts) {\r
5445                 // backward compatility\r
5446                 if ($.type(opts) === 'string') opts = { keys: opts };\r
5447                 if (!opts) opts = {};\r
5448                 var     sm              = inst.options.stateManagement\r
5449                 ,       ic              = opts.includeChildren\r
5450                 ,       recurse = ic !== undefined ? ic : sm.includeChildren\r
5451                 ,       keys    = opts.stateKeys || sm.stateKeys\r
5452                 ,       alt             = { isClosed: 'initClosed', isHidden: 'initHidden' }\r
5453                 ,       state   = inst.state\r
5454                 ,       panes   = $.layout.config.allPanes\r
5455                 ,       data    = {}\r
5456                 ,       pair, pane, key, val\r
5457                 ,       ps, pC, child, array, count, branch\r
5458                 ;\r
5459                 if ($.isArray(keys)) keys = keys.join(",");\r
5460                 // convert keys to an array and change delimiters from '__' to '.'\r
5461                 keys = keys.replace(/__/g, ".").split(',');\r
5462                 // loop keys and create a data hash\r
5463                 for (var i=0, n=keys.length; i < n; i++) {\r
5464                         pair = keys[i].split(".");\r
5465                         pane = pair[0];\r
5466                         key  = pair[1];\r
5467                         if ($.inArray(pane, panes) < 0) continue; // bad pane!\r
5468                         val = state[ pane ][ key ];\r
5469                         if (val == undefined) continue;\r
5470                         if (key=="isClosed" && state[pane]["isSliding"])\r
5471                                 val = true; // if sliding, then *really* isClosed\r
5472                         ( data[pane] || (data[pane]={}) )[ alt[key] ? alt[key] : key ] = val;\r
5473                 }\r
5474 \r
5475                 // recurse into the child-layouts for each pane\r
5476                 if (recurse) {\r
5477                         $.each(panes, function (idx, pane) {\r
5478                                 pC = inst.children[pane];\r
5479                                 ps = state.stateData[pane];\r
5480                                 if ($.isPlainObject( pC ) && !$.isEmptyObject( pC )) {\r
5481                                         // ensure a key exists for this 'pane', eg: branch = data.center\r
5482                                         branch = data[pane] || (data[pane] = {});\r
5483                                         if (!branch.children) branch.children = {};\r
5484                                         $.each( pC, function (key, child) {\r
5485                                                 // ONLY read state from an initialize layout\r
5486                                                 if ( child.state.initialized )\r
5487                                                         branch.children[ key ] = $.layout.state.readState( child );\r
5488                                                 // if we have PREVIOUS (onLoad) state for this child-layout, KEEP IT!\r
5489                                                 else if ( ps && ps.children && ps.children[ key ] ) {\r
5490                                                         branch.children[ key ] = $.extend(true, {}, ps.children[ key ] );\r
5491                                                 }\r
5492                                         });\r
5493                                 }\r
5494                         });\r
5495                 }\r
5496 \r
5497                 return data;\r
5498         }\r
5499 \r
5500         /**\r
5501          *      Stringify a JSON hash so can save in a cookie or db-field\r
5502          */\r
5503 ,       encodeJSON: function (json) {\r
5504                 var local = window.JSON || {};\r
5505                 return (local.stringify || stringify)(json);\r
5506 \r
5507                 function stringify (h) {\r
5508                         var D=[], i=0, k, v, t // k = key, v = value\r
5509                         ,       a = $.isArray(h)\r
5510                         ;\r
5511                         for (k in h) {\r
5512                                 v = h[k];\r
5513                                 t = typeof v;\r
5514                                 if (t == 'string')              // STRING - add quotes\r
5515                                         v = '"'+ v +'"';\r
5516                                 else if (t == 'object') // SUB-KEY - recurse into it\r
5517                                         v = parse(v);\r
5518                                 D[i++] = (!a ? '"'+ k +'":' : '') + v;\r
5519                         }\r
5520                         return (a ? '[' : '{') + D.join(',') + (a ? ']' : '}');\r
5521                 };\r
5522         }\r
5523 \r
5524         /**\r
5525          *      Convert stringified JSON back to a hash object\r
5526          *      @see            $.parseJSON(), adding in jQuery 1.4.1\r
5527          */\r
5528 ,       decodeJSON: function (str) {\r
5529                 try { return $.parseJSON ? $.parseJSON(str) : window["eval"]("("+ str +")") || {}; }\r
5530                 catch (e) { return {}; }\r
5531         }\r
5532 \r
5533 \r
5534 ,       _create: function (inst) {\r
5535                 var s   = $.layout.state\r
5536                 ,       o       = inst.options\r
5537                 ,       sm      = o.stateManagement\r
5538                 ;\r
5539                 //      ADD State-Management plugin methods to inst\r
5540                  $.extend( inst, {\r
5541                 //      readCookie - update options from cookie - returns hash of cookie data\r
5542                         readCookie:             function () { return s.readCookie(inst); }\r
5543                 //      deleteCookie\r
5544                 ,       deleteCookie:   function () { s.deleteCookie(inst); }\r
5545                 //      saveCookie - optionally pass keys-list and cookie-options (hash)\r
5546                 ,       saveCookie:             function (keys, cookieOpts) { return s.saveCookie(inst, keys, cookieOpts); }\r
5547                 //      loadCookie - readCookie and use to loadState() - returns hash of cookie data\r
5548                 ,       loadCookie:             function () { return s.loadCookie(inst); }\r
5549                 //      loadState - pass a hash of state to use to update options\r
5550                 ,       loadState:              function (stateData, opts) { s.loadState(inst, stateData, opts); }\r
5551                 //      readState - returns hash of current layout-state\r
5552                 ,       readState:              function (keys) { return s.readState(inst, keys); }\r
5553                 //      add JSON utility methods too...\r
5554                 ,       encodeJSON:             s.encodeJSON\r
5555                 ,       decodeJSON:             s.decodeJSON\r
5556                 });\r
5557 \r
5558                 // init state.stateData key, even if plugin is initially disabled\r
5559                 inst.state.stateData = {};\r
5560 \r
5561                 // autoLoad MUST BE one of: data-array, data-hash, callback-function, or TRUE\r
5562                 if ( !sm.autoLoad ) return;\r
5563 \r
5564                 //      When state-data exists in the autoLoad key USE IT,\r
5565                 //      even if stateManagement.enabled == false\r
5566                 if ($.isPlainObject( sm.autoLoad )) {\r
5567                         if (!$.isEmptyObject( sm.autoLoad )) {\r
5568                                 inst.loadState( sm.autoLoad );\r
5569                         }\r
5570                 }\r
5571                 else if ( sm.enabled ) {\r
5572                         // update the options from cookie or callback\r
5573                         // if options is a function, call it to get stateData\r
5574                         if ($.isFunction( sm.autoLoad )) {\r
5575                                 var d = {};\r
5576                                 try {\r
5577                                         d = sm.autoLoad( inst, inst.state, inst.options, inst.options.name || '' ); // try to get data from fn\r
5578                                 } catch (e) {}\r
5579                                 if (d && $.isPlainObject( d ) && !$.isEmptyObject( d ))\r
5580                                         inst.loadState(d);\r
5581                         }\r
5582                         else // any other truthy value will trigger loadCookie\r
5583                                 inst.loadCookie();\r
5584                 }\r
5585         }\r
5586 \r
5587 ,       _unload: function (inst) {\r
5588                 var sm = inst.options.stateManagement;\r
5589                 if (sm.enabled && sm.autoSave) {\r
5590                         // if options is a function, call it to save the stateData\r
5591                         if ($.isFunction( sm.autoSave )) {\r
5592                                 try {\r
5593                                         sm.autoSave( inst, inst.state, inst.options, inst.options.name || '' ); // try to get data from fn\r
5594                                 } catch (e) {}\r
5595                         }\r
5596                         else // any truthy value will trigger saveCookie\r
5597                                 inst.saveCookie();\r
5598                 }\r
5599         }\r
5600 \r
5601 };\r
5602 \r
5603 // add state initialization method to Layout's onCreate array of functions\r
5604 $.layout.onCreate.push( $.layout.state._create );\r
5605 $.layout.onUnload.push( $.layout.state._unload );\r
5606 \r
5607 })( jQuery );\r
5608 \r
5609 \r
5610 \r
5611 /**\r
5612  * @preserve jquery.layout.buttons 1.0\r
5613  * $Date: 2011-07-16 08:00:00 (Sat, 16 July 2011) $\r
5614  *\r
5615  * Copyright (c) 2011 \r
5616  *   Kevin Dalman (http://allpro.net)\r
5617  *\r
5618  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)\r
5619  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.\r
5620  *\r
5621  * @dependancies: UI Layout 1.3.0.rc30.1 or higher\r
5622  *\r
5623  * @support: http://groups.google.com/group/jquery-ui-layout\r
5624  *\r
5625  * Docs: [ to come ]\r
5626  * Tips: [ to come ]\r
5627  */\r
5628 ;(function ($) {\r
5629 \r
5630 if (!$.layout) return;\r
5631 \r
5632 \r
5633 // tell Layout that the state plugin is available\r
5634 $.layout.plugins.buttons = true;\r
5635 \r
5636 //      Add State-Management options to layout.defaults\r
5637 $.layout.defaults.autoBindCustomButtons = false;\r
5638 // Set stateManagement as a layout-option, NOT a pane-option\r
5639 $.layout.optionsMap.layout.push("autoBindCustomButtons");\r
5640 \r
5641 /*\r
5642  *      Button methods\r
5643  */\r
5644 $.layout.buttons = {\r
5645         // set data used by multiple methods below\r
5646         config: {\r
5647                 borderPanes:    "north,south,west,east"\r
5648         }\r
5649 \r
5650         /**\r
5651         * Searches for .ui-layout-button-xxx elements and auto-binds them as layout-buttons\r
5652         *\r
5653         * @see  _create()\r
5654         */\r
5655 ,       init: function (inst) {\r
5656                 var pre         = "ui-layout-button-"\r
5657                 ,       layout  = inst.options.name || ""\r
5658                 ,       name;\r
5659                 $.each("toggle,open,close,pin,toggle-slide,open-slide".split(","), function (i, action) {\r
5660                         $.each($.layout.buttons.config.borderPanes.split(","), function (ii, pane) {\r
5661                                 $("."+pre+action+"-"+pane).each(function(){\r
5662                                         // if button was previously 'bound', data.layoutName was set, but is blank if layout has no 'name'\r
5663                                         name = $(this).data("layoutName") || $(this).attr("layoutName");\r
5664                                         if (name == undefined || name === layout)\r
5665                                                 inst.bindButton(this, action, pane);\r
5666                                 });\r
5667                         });\r
5668                 });\r
5669         }\r
5670 \r
5671         /**\r
5672         * Helper function to validate params received by addButton utilities\r
5673         *\r
5674         * Two classes are added to the element, based on the buttonClass...\r
5675         * The type of button is appended to create the 2nd className:\r
5676         *  - ui-layout-button-pin\r
5677         *  - ui-layout-pane-button-toggle\r
5678         *  - ui-layout-pane-button-open\r
5679         *  - ui-layout-pane-button-close\r
5680         *\r
5681         * @param  {(string|!Object)}    selector        jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"\r
5682         * @param  {string}                      pane            Name of the pane the button is for: 'north', 'south', etc.\r
5683         * @return {Array.<Object>}              If both params valid, the element matching 'selector' in a jQuery wrapper - otherwise returns null\r
5684         */\r
5685 ,       get: function (inst, selector, pane, action) {\r
5686                 var $E  = $(selector)\r
5687                 ,       o       = inst.options\r
5688                 //,     err     = o.showErrorMessages\r
5689                 ;\r
5690                 if ($E.length && $.layout.buttons.config.borderPanes.indexOf(pane) >= 0) {\r
5691                         var btn = o[pane].buttonClass +"-"+ action;\r
5692                         $E      .addClass( btn +" "+ btn +"-"+ pane )\r
5693                                 .data("layoutName", o.name); // add layout identifier - even if blank!\r
5694                 }\r
5695                 return $E;\r
5696         }\r
5697 \r
5698 \r
5699         /**\r
5700         * NEW syntax for binding layout-buttons - will eventually replace addToggle, addOpen, etc.\r
5701         *\r
5702         * @param {(string|!Object)}     sel             jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"\r
5703         * @param {string}                       action\r
5704         * @param {string}                       pane\r
5705         */\r
5706 ,       bind: function (inst, sel, action, pane) {\r
5707                 var _ = $.layout.buttons;\r
5708                 switch (action.toLowerCase()) {\r
5709                         case "toggle":                  _.addToggle     (inst, sel, pane); break;       \r
5710                         case "open":                    _.addOpen       (inst, sel, pane); break;\r
5711                         case "close":                   _.addClose      (inst, sel, pane); break;\r
5712                         case "pin":                             _.addPin        (inst, sel, pane); break;\r
5713                         case "toggle-slide":    _.addToggle     (inst, sel, pane, true); break; \r
5714                         case "open-slide":              _.addOpen       (inst, sel, pane, true); break;\r
5715                 }\r
5716                 return inst;\r
5717         }\r
5718 \r
5719         /**\r
5720         * Add a custom Toggler button for a pane\r
5721         *\r
5722         * @param {(string|!Object)}     selector        jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"\r
5723         * @param {string}                       pane            Name of the pane the button is for: 'north', 'south', etc.\r
5724         * @param {boolean=}                     slide           true = slide-open, false = pin-open\r
5725         */\r
5726 ,       addToggle: function (inst, selector, pane, slide) {\r
5727                 $.layout.buttons.get(inst, selector, pane, "toggle")\r
5728                         .click(function(evt){\r
5729                                 inst.toggle(pane, !!slide);\r
5730                                 evt.stopPropagation();\r
5731                         });\r
5732                 return inst;\r
5733         }\r
5734 \r
5735         /**\r
5736         * Add a custom Open button for a pane\r
5737         *\r
5738         * @param {(string|!Object)}     selector        jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"\r
5739         * @param {string}                       pane            Name of the pane the button is for: 'north', 'south', etc.\r
5740         * @param {boolean=}                     slide           true = slide-open, false = pin-open\r
5741         */\r
5742 ,       addOpen: function (inst, selector, pane, slide) {\r
5743                 $.layout.buttons.get(inst, selector, pane, "open")\r
5744                         .attr("title", inst.options[pane].tips.Open)\r
5745                         .click(function (evt) {\r
5746                                 inst.open(pane, !!slide);\r
5747                                 evt.stopPropagation();\r
5748                         });\r
5749                 return inst;\r
5750         }\r
5751 \r
5752         /**\r
5753         * Add a custom Close button for a pane\r
5754         *\r
5755         * @param {(string|!Object)}     selector        jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"\r
5756         * @param {string}               pane            Name of the pane the button is for: 'north', 'south', etc.\r
5757         */\r
5758 ,       addClose: function (inst, selector, pane) {\r
5759                 $.layout.buttons.get(inst, selector, pane, "close")\r
5760                         .attr("title", inst.options[pane].tips.Close)\r
5761                         .click(function (evt) {\r
5762                                 inst.close(pane);\r
5763                                 evt.stopPropagation();\r
5764                         });\r
5765                 return inst;\r
5766         }\r
5767 \r
5768         /**\r
5769         * Add a custom Pin button for a pane\r
5770         *\r
5771         * Four classes are added to the element, based on the paneClass for the associated pane...\r
5772         * Assuming the default paneClass and the pin is 'up', these classes are added for a west-pane pin:\r
5773         *  - ui-layout-pane-pin\r
5774         *  - ui-layout-pane-west-pin\r
5775         *  - ui-layout-pane-pin-up\r
5776         *  - ui-layout-pane-west-pin-up\r
5777         *\r
5778         * @param {(string|!Object)}     selector        jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"\r
5779         * @param {string}               pane            Name of the pane the pin is for: 'north', 'south', etc.\r
5780         */\r
5781 ,       addPin: function (inst, selector, pane) {\r
5782                 var $E = $.layout.buttons.get(inst, selector, pane, "pin");\r
5783                 if ($E.length) {\r
5784                         var s = inst.state[pane];\r
5785                         $E.click(function (evt) {\r
5786                                 $.layout.buttons.setPinState(inst, $(this), pane, (s.isSliding || s.isClosed));\r
5787                                 if (s.isSliding || s.isClosed) inst.open( pane ); // change from sliding to open\r
5788                                 else inst.close( pane ); // slide-closed\r
5789                                 evt.stopPropagation();\r
5790                         });\r
5791                         // add up/down pin attributes and classes\r
5792                         $.layout.buttons.setPinState(inst, $E, pane, (!s.isClosed && !s.isSliding));\r
5793                         // add this pin to the pane data so we can 'sync it' automatically\r
5794                         // PANE.pins key is an array so we can store multiple pins for each pane\r
5795                         s.pins.push( selector ); // just save the selector string\r
5796                 }\r
5797                 return inst;\r
5798         }\r
5799 \r
5800         /**\r
5801         * Change the class of the pin button to make it look 'up' or 'down'\r
5802         *\r
5803         * @see  addPin(), syncPins()\r
5804         * @param {Array.<Object>}       $Pin    The pin-span element in a jQuery wrapper\r
5805         * @param {string}       pane    These are the params returned to callbacks by layout()\r
5806         * @param {boolean}      doPin   true = set the pin 'down', false = set it 'up'\r
5807         */\r
5808 ,       setPinState: function (inst, $Pin, pane, doPin) {\r
5809                 var updown = $Pin.attr("pin");\r
5810                 if (updown && doPin === (updown=="down")) return; // already in correct state\r
5811                 var\r
5812                         po              = inst.options[pane]\r
5813                 ,       lang    = po.tips\r
5814                 ,       pin             = po.buttonClass +"-pin"\r
5815                 ,       side    = pin +"-"+ pane\r
5816                 ,       UP              = pin +"-up "+  side +"-up"\r
5817                 ,       DN              = pin +"-down "+side +"-down"\r
5818                 ;\r
5819                 $Pin\r
5820                         .attr("pin", doPin ? "down" : "up") // logic\r
5821                         .attr("title", doPin ? lang.Unpin : lang.Pin)\r
5822                         .removeClass( doPin ? UP : DN ) \r
5823                         .addClass( doPin ? DN : UP ) \r
5824                 ;\r
5825         }\r
5826 \r
5827         /**\r
5828         * INTERNAL function to sync 'pin buttons' when pane is opened or closed\r
5829         * Unpinned means the pane is 'sliding' - ie, over-top of the adjacent panes\r
5830         *\r
5831         * @see  open(), close()\r
5832         * @param {string}       pane   These are the params returned to callbacks by layout()\r
5833         * @param {boolean}      doPin  True means set the pin 'down', False means 'up'\r
5834         */\r
5835 ,       syncPinBtns: function (inst, pane, doPin) {\r
5836                 // REAL METHOD IS _INSIDE_ LAYOUT - THIS IS HERE JUST FOR REFERENCE\r
5837                 $.each(state[pane].pins, function (i, selector) {\r
5838                         $.layout.buttons.setPinState(inst, $(selector), pane, doPin);\r
5839                 });\r
5840         }\r
5841 \r
5842 \r
5843 ,       _load: function (inst) {\r
5844                 //      ADD Button methods to Layout Instance\r
5845                 $.extend( inst, {\r
5846                         bindButton:             function (selector, action, pane) { return $.layout.buttons.bind(inst, selector, action, pane); }\r
5847                 //      DEPRECATED METHODS...\r
5848                 ,       addToggleBtn:   function (selector, pane, slide) { return $.layout.buttons.addToggle(inst, selector, pane, slide); }\r
5849                 ,       addOpenBtn:             function (selector, pane, slide) { return $.layout.buttons.addOpen(inst, selector, pane, slide); }\r
5850                 ,       addCloseBtn:    function (selector, pane) { return $.layout.buttons.addClose(inst, selector, pane); }\r
5851                 ,       addPinBtn:              function (selector, pane) { return $.layout.buttons.addPin(inst, selector, pane); }\r
5852                 });\r
5853 \r
5854                 // init state array to hold pin-buttons\r
5855                 for (var i=0; i<4; i++) {\r
5856                         var pane = $.layout.buttons.config.borderPanes[i];\r
5857                         inst.state[pane].pins = [];\r
5858                 }\r
5859 \r
5860                 // auto-init buttons onLoad if option is enabled\r
5861                 if ( inst.options.autoBindCustomButtons )\r
5862                         $.layout.buttons.init(inst);\r
5863         }\r
5864 \r
5865 ,       _unload: function (inst) {\r
5866                 // TODO: unbind all buttons???\r
5867         }\r
5868 \r
5869 };\r
5870 \r
5871 // add initialization method to Layout's onLoad array of functions\r
5872 $.layout.onLoad.push(  $.layout.buttons._load );\r
5873 //$.layout.onUnload.push( $.layout.buttons._unload );\r
5874 \r
5875 })( jQuery );\r
5876 \r
5877 \r
5878 \r
5879 \r
5880 /**\r
5881  * jquery.layout.browserZoom 1.0\r
5882  * $Date: 2011-12-29 08:00:00 (Thu, 29 Dec 2011) $\r
5883  *\r
5884  * Copyright (c) 2012 \r
5885  *   Kevin Dalman (http://allpro.net)\r
5886  *\r
5887  * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)\r
5888  * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.\r
5889  *\r
5890  * @requires: UI Layout 1.3.0.rc30.1 or higher\r
5891  *\r
5892  * @see: http://groups.google.com/group/jquery-ui-layout\r
5893  *\r
5894  * TODO: Extend logic to handle other problematic zooming in browsers\r
5895  * TODO: Add hotkey/mousewheel bindings to _instantly_ respond to these zoom event\r
5896  */\r
5897 (function ($) {\r
5898 \r
5899 // tell Layout that the plugin is available\r
5900 $.layout.plugins.browserZoom = true;\r
5901 \r
5902 $.layout.defaults.browserZoomCheckInterval = 1000;\r
5903 $.layout.optionsMap.layout.push("browserZoomCheckInterval");\r
5904 \r
5905 /*\r
5906  *      browserZoom methods\r
5907  */\r
5908 $.layout.browserZoom = {\r
5909 \r
5910         _init: function (inst) {\r
5911                 // abort if browser does not need this check\r
5912                 if ($.layout.browserZoom.ratio() !== false)\r
5913                         $.layout.browserZoom._setTimer(inst);\r
5914         }\r
5915 \r
5916 ,       _setTimer: function (inst) {\r
5917                 // abort if layout destroyed or browser does not need this check\r
5918                 if (inst.destroyed) return;\r
5919                 var o   = inst.options\r
5920                 ,       s       = inst.state\r
5921                 //      don't need check if inst has parentLayout, but check occassionally in case parent destroyed!\r
5922                 //      MINIMUM 100ms interval, for performance\r
5923                 ,       ms      = inst.hasParentLayout ?  5000 : Math.max( o.browserZoomCheckInterval, 100 )\r
5924                 ;\r
5925                 // set the timer\r
5926                 setTimeout(function(){\r
5927                         if (inst.destroyed || !o.resizeWithWindow) return;\r
5928                         var d = $.layout.browserZoom.ratio();\r
5929                         if (d !== s.browserZoom) {\r
5930                                 s.browserZoom = d;\r
5931                                 inst.resizeAll();\r
5932                         }\r
5933                         // set a NEW timeout\r
5934                         $.layout.browserZoom._setTimer(inst);\r
5935                 }\r
5936                 ,       ms );\r
5937         }\r
5938 \r
5939 ,       ratio: function () {\r
5940                 var w   = window\r
5941                 ,       s       = screen\r
5942                 ,       d       = document\r
5943                 ,       dE      = d.documentElement || d.body\r
5944                 ,       b       = $.layout.browser\r
5945                 ,       v       = b.version\r
5946                 ,       r, sW, cW\r
5947                 ;\r
5948                 // we can ignore all browsers that fire window.resize event onZoom\r
5949                 if (!b.msie || v > 8)\r
5950                         return false; // don't need to track zoom\r
5951                 if (s.deviceXDPI && s.systemXDPI) // syntax compiler hack\r
5952                         return calc(s.deviceXDPI, s.systemXDPI);\r
5953                 // everything below is just for future reference!\r
5954                 if (b.webkit && (r = d.body.getBoundingClientRect))\r
5955                         return calc((r.left - r.right), d.body.offsetWidth);\r
5956                 if (b.webkit && (sW = w.outerWidth))\r
5957                         return calc(sW, w.innerWidth);\r
5958                 if ((sW = s.width) && (cW = dE.clientWidth))\r
5959                         return calc(sW, cW);\r
5960                 return false; // no match, so cannot - or don't need to - track zoom\r
5961 \r
5962                 function calc (x,y) { return (parseInt(x,10) / parseInt(y,10) * 100).toFixed(); }\r
5963         }\r
5964 \r
5965 };\r
5966 // add initialization method to Layout's onLoad array of functions\r
5967 $.layout.onReady.push( $.layout.browserZoom._init );\r
5968 \r
5969 \r
5970 })( jQuery );\r
5971 \r
5972 \r
5973 \r
5974 \r
5975 /**\r
5976  *      UI Layout Plugin: Slide-Offscreen Animation\r
5977  *\r
5978  *      Prevent panes from being 'hidden' so that an iframes/objects \r
5979  *      does not reload/refresh when pane 'opens' again.\r
5980  *      This plug-in adds a new animation called "slideOffscreen".\r
5981  *      It is identical to the normal "slide" effect, but avoids hiding the element\r
5982  *\r
5983  *      Requires Layout 1.3.0.RC30.1 or later for Close offscreen\r
5984  *      Requires Layout 1.3.0.RC30.5 or later for Hide, initClosed & initHidden offscreen\r
5985  *\r
5986  *      Version:        1.1 - 2012-11-18\r
5987  *      Author:         Kevin Dalman (kevin@jquery-dev.com)\r
5988  *      @preserve       jquery.layout.slideOffscreen-1.1.js\r
5989  */\r
5990 ;(function ($) {\r
5991 \r
5992 // Add a new "slideOffscreen" effect\r
5993 if ($.effects) {\r
5994 \r
5995         // add an option so initClosed and initHidden will work\r
5996         $.layout.defaults.panes.useOffscreenClose = false; // user must enable when needed\r
5997         /* set the new animation as the default for all panes\r
5998         $.layout.defaults.panes.fxName = "slideOffscreen";\r
5999         */\r
6000 \r
6001         if ($.layout.plugins)\r
6002                 $.layout.plugins.effects.slideOffscreen = true;\r
6003 \r
6004         // dupe 'slide' effect defaults as new effect defaults\r
6005         $.layout.effects.slideOffscreen = $.extend(true, {}, $.layout.effects.slide);\r
6006 \r
6007         // add new effect to jQuery UI\r
6008         $.effects.slideOffscreen = function(o) {\r
6009                 return this.queue(function(){\r
6010 \r
6011                         var fx          = $.effects\r
6012                         ,       opt             = o.options\r
6013                         ,       $el             = $(this)\r
6014                         ,       pane    = $el.data('layoutEdge')\r
6015                         ,       state   = $el.data('parentLayout').state\r
6016                         ,       dist    = state[pane].size\r
6017                         ,       s               = this.style\r
6018                         ,       props   = ['top','bottom','left','right']\r
6019                                 // Set options\r
6020                         ,       mode    = fx.setMode($el, opt.mode || 'show') // Set Mode\r
6021                         ,       show    = (mode == 'show')\r
6022                         ,       dir             = opt.direction || 'left' // Default Direction\r
6023                         ,       ref             = (dir == 'up' || dir == 'down') ? 'top' : 'left'\r
6024                         ,       pos             = (dir == 'up' || dir == 'left')\r
6025                         ,       offscrn = $.layout.config.offscreenCSS || {}\r
6026                         ,       keyLR   = $.layout.config.offscreenReset\r
6027                         ,       keyTB   = 'offscreenResetTop' // only used internally\r
6028                         ,       animation = {}\r
6029                         ;\r
6030                         // Animation settings\r
6031                         animation[ref]  = (show ? (pos ? '+=' : '-=') : (pos ? '-=' : '+=')) + dist;\r
6032 \r
6033                         if (show) { // show() animation, so save top/bottom but retain left/right set when 'hidden'\r
6034                                 $el.data(keyTB, { top: s.top, bottom: s.bottom });\r
6035 \r
6036                                 // set the top or left offset in preparation for animation\r
6037                                 // Note: ALL animations work by shifting the top or left edges\r
6038                                 if (pos) { // top (north) or left (west)\r
6039                                         $el.css(ref, isNaN(dist) ? "-" + dist : -dist); // Shift outside the left/top edge\r
6040                                 }\r
6041                                 else { // bottom (south) or right (east) - shift all the way across container\r
6042                                         if (dir === 'right')\r
6043                                                 $el.css({ left: state.container.layoutWidth, right: 'auto' });\r
6044                                         else // dir === bottom\r
6045                                                 $el.css({ top: state.container.layoutHeight, bottom: 'auto' });\r
6046                                 }\r
6047                                 // restore the left/right setting if is a top/bottom animation\r
6048                                 if (ref === 'top')\r
6049                                         $el.css( $el.data( keyLR ) || {} );\r
6050                         }\r
6051                         else { // hide() animation, so save ALL CSS\r
6052                                 $el.data(keyTB, { top: s.top, bottom: s.bottom });\r
6053                                 $el.data(keyLR, { left: s.left, right: s.right });\r
6054                         }\r
6055 \r
6056                         // Animate\r
6057                         $el.show().animate(animation, { queue: false, duration: o.duration, easing: opt.easing, complete: function(){\r
6058                                 // Restore top/bottom\r
6059                                 if ($el.data( keyTB ))\r
6060                                         $el.css($el.data( keyTB )).removeData( keyTB );\r
6061                                 if (show) // Restore left/right too\r
6062                                         $el.css($el.data( keyLR ) || {}).removeData( keyLR );\r
6063                                 else // Move the pane off-screen (left: -99999, right: 'auto')\r
6064                                         $el.css( offscrn );\r
6065 \r
6066                                 if (o.callback) o.callback.apply(this, arguments); // Callback\r
6067                                 $el.dequeue();\r
6068                         }});\r
6069 \r
6070                 });\r
6071         };\r
6072 \r
6073 }\r
6074 \r
6075 })( jQuery );\r