Hyperdonat

/**

 * @preserve jquery.layout 1.3.0 - Release Candidate 29.7

 * $Date: 2010-09-17 08:00:00 (Fri, 17 Sep 2010) $

 * $Rev: 30297 $

 *

 * Copyright (c) 2010

 *   Fabrizio Balliano (http://www.fabrizioballiano.net)

 *   Kevin Dalman (http://allpro.net)

 *

 * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)

 * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.

 *

 * Docs: http://layout.jquery-dev.net/documentation.html

 * Tips: http://layout.jquery-dev.net/tips.html

 * Help: http://groups.google.com/group/jquery-ui-layout

 */

// NOTE: For best readability, view with a fixed-width font and tabs equal to 4-chars

;(function ($) {

var $b = $.browser;

/*

 *        GENERIC $.layout METHODS - used by all layouts

 */

$.layout = {

        // can update code here if $.browser is phased out

        browser: {

                mozilla:        $b.mozilla

        ,        webkit:                $b.webkit || $b.safari || false // webkit = jQ 1.4

        ,        msie:                $b.msie

        ,        isIE6:                $b.msie && $b.version == 6

        ,        boxModel:        false        // page must load first, so will be updated set by _create

        //,        version:        $b.version - not used

        }

        /*

        *        USER UTILITIES

        */

        // calculate and return the scrollbar width, as an integer

,        scrollbarWidth:                function () { return window.scrollbarWidth  || $.layout.getScrollbarSize('width'); }

,        scrollbarHeight:        function () { return window.scrollbarHeight || $.layout.getScrollbarSize('height'); }

,        getScrollbarSize:        function (dim) {

                var $c        = $('<div style="position: absolute; top: -10000px; left: -10000px; width: 100px; height: 100px; overflow: scroll;"></div>').appendTo("body");

                var d        = { width: $c.width() - $c[0].clientWidth, height: $c.height() - $c[0].clientHeight };

                $c.remove();

                window.scrollbarWidth        = d.width;

                window.scrollbarHeight        = d.height;

                return dim.match(/^(width|height)$/i) ? d[dim] : d;

        }

        /**

        * Returns hash container 'display' and 'visibility'

        *

        * @see        $.swap() - swaps CSS, runs callback, resets CSS

        */

,        showInvisibly: function ($E, force) {

                if (!$E) return {};

                if (!$E.jquery) $E = $($E);

                var CSS = {

                        display:        $E.css('display')

                ,        visibility:        $E.css('visibility')

                };

                if (force || CSS.display == "none") { // only if not *already hidden*

                        $E.css({ display: "block", visibility: "hidden" }); // show element 'invisibly' so can be measured

                        return CSS;

                }

                else return {};

        }

        /**

        * Returns data for setting size of an element (container or a pane).

        *

        * @see  _create(), onWindowResize() for container, plus others for pane

        * @return JSON  Returns a hash of all dimensions: top, bottom, left, right, outerWidth, innerHeight, etc

        */

,        getElemDims: function ($E) {

                var

                        d        = {}                        // dimensions hash

                ,        x        = d.css = {}        // CSS hash

                ,        i        = {}                        // TEMP insets

                ,        b, p                                // TEMP border, padding

                ,        off = $E.offset()

                ;

                d.offsetLeft = off.left;

                d.offsetTop  = off.top;

                $.each("Left,Right,Top,Bottom".split(","), function (idx, e) { // e = edge

                        b = x["border" + e] = $.layout.borderWidth($E, e);

                        p = x["padding"+ e] = $.layout.cssNum($E, "padding"+e);

                        i[e] = b + p; // total offset of content from outer side

                        d["inset"+ e] = p;

                        /* WRONG ???

                        // if BOX MODEL, then 'position' = PADDING (ignore borderWidth)

                        if ($E == $Container)

                                d["inset"+ e] = (browser.boxModel ? p : 0);

                        */

                });

                d.offsetWidth        = $E.innerWidth();

                d.offsetHeight        = $E.innerHeight();

                d.outerWidth        = $E.outerWidth();

                d.outerHeight        = $E.outerHeight();

                d.innerWidth        = d.outerWidth  - i.Left - i.Right;

                d.innerHeight        = d.outerHeight - i.Top  - i.Bottom;

                // TESTING

                x.width  = $E.width();

                x.height = $E.height();

                return d;

        }

,        getElemCSS: function ($E, list) {

                var

                        CSS        = {}

                ,        style        = $E[0].style

                ,        props        = list.split(",")

                ,        sides        = "Top,Bottom,Left,Right".split(",")

                ,        attrs        = "Color,Style,Width".split(",")

                ,        p, s, a, i, j, k

                ;

                for (i=0; i < props.length; i++) {

                        p = props[i];

                        if (p.match(/(border|padding|margin)$/))

                                for (j=0; j < 4; j++) {

                                        s = sides[j];

                                        if (p == "border")

                                                for (k=0; k < 3; k++) {

                                                        a = attrs[k];

                                                        CSS[p+s+a] = style[p+s+a];

                                                }

                                        else

                                                CSS[p+s] = style[p+s];

                                }

                        else

                                CSS[p] = style[p];

                };

                return CSS

        }

        /**

        * Contains logic to check boxModel & browser, and return the correct width/height for the current browser/doctype

        *

        * @see  initPanes(), sizeMidPanes(), initHandles(), sizeHandles()

        * @param  {Array.<Object>}        $E  Must pass a jQuery object - first element is processed

        * @param  {number=}                        outerWidth/outerHeight  (optional) Can pass a width, allowing calculations BEFORE element is resized

        * @return {number}                Returns the innerWidth/Height of the elem by subtracting padding and borders

        */

,        cssWidth: function ($E, outerWidth) {

                var

                        b = $.layout.borderWidth

                ,        n = $.layout.cssNum

                ;

                // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed

                if (outerWidth <= 0) return 0;

                if (!$.layout.browser.boxModel) return outerWidth;

                // strip border and padding from outerWidth to get CSS Width

                var W = outerWidth

                        - b($E, "Left")

                        - b($E, "Right")

                        - n($E, "paddingLeft")

                        - n($E, "paddingRight")

                ;

                return W > 0 ? W : 0;

        }

,        cssHeight: function ($E, outerHeight) {

                var

                        b = $.layout.borderWidth

                ,        n = $.layout.cssNum

                ;

                // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed

                if (outerHeight <= 0) return 0;

                if (!$.layout.browser.boxModel) return outerHeight;

                // strip border and padding from outerHeight to get CSS Height

                var H = outerHeight

                        - b($E, "Top")

                        - b($E, "Bottom")

                        - n($E, "paddingTop")

                        - n($E, "paddingBottom")

                ;

                return H > 0 ? H : 0;

        }

        /**

        * Returns the 'current CSS numeric value' for an element - returns 0 if property does not exist

        *

        * @see  Called by many methods

        * @param {Array.<Object>}        $E                Must pass a jQuery object - first element is processed

        * @param {string}                        prop        The name of the CSS property, eg: top, width, etc.

        * @return {*}                                                Usually is used to get an integer value for position (top, left) or size (height, width)

        */

,        cssNum: function ($E, prop) {

                if (!$E.jquery) $E = $($E);

                var CSS = $.layout.showInvisibly($E);

                var val = parseInt($.curCSS($E[0], prop, true), 10) || 0;

                $E.css( CSS ); // RESET

                return val;

        }

,        borderWidth: function (el, side) {

                if (el.jquery) el = el[0];

                var b = "border"+ side.substr(0,1).toUpperCase() + side.substr(1); // left => Left

                return $.curCSS(el, b+"Style", true) == "none" ? 0 : (parseInt($.curCSS(el, b+"Width", true), 10) || 0);

        }

};

$.fn.layout = function (opts) {

/*

 * ###########################

 *   WIDGET CONFIG & OPTIONS

 * ###########################

 */

        // LANGUAGE CUSTOMIZATION - will be *externally customizable* in next version

        var lang = {

                Pane:                "Pane"

        ,        Open:                "Open"        // eg: "Open Pane"

        ,        Close:                "Close"

        ,        Resize:                "Resize"

        ,        Slide:                "Slide Open"

        ,        Pin:                "Pin"

        ,        Unpin:                "Un-Pin"

        ,        selector:        "selector"

        ,        msgNoRoom:        "Not enough room to show this pane."

        ,        errContainerMissing:        "UI Layout Initialization Error\n\nThe specified layout-container does not exist."

        ,        errCenterPaneMissing:        "UI Layout Initialization Error\n\nThe center-pane element does not exist.\n\nThe center-pane is a required element."

        ,        errContainerHeight:                "UI Layout Initialization Warning\n\nThe layout-container \"CONTAINER\" has no height.\n\nTherefore the layout is 0-height and hence 'invisible'!"

        ,        errButton:                                "Error Adding Button \n\nInvalid "

        };

        // DEFAULT OPTIONS - CHANGE IF DESIRED

        var options = {

                name:                                                ""                        // Not required, but useful for buttons and used for the state-cookie

        ,        scrollToBookmarkOnLoad:                true                // after creating a layout, scroll to bookmark in URL (.../page.htm#myBookmark)

        ,        resizeWithWindow:                        true                // bind thisLayout.resizeAll() to the window.resize event

        ,        resizeWithWindowDelay:                200                        // delay calling resizeAll because makes window resizing very jerky

        ,        resizeWithWindowMaxDelay:        0                        // 0 = none - force resize every XX ms while window is being resized

        ,        onresizeall_start:                        null                // CALLBACK when resizeAll() STARTS        - NOT pane-specific

        ,        onresizeall_end:                        null                // CALLBACK when resizeAll() ENDS        - NOT pane-specific

        ,        onload:                                                null                // CALLBACK when Layout inits - after options initialized, but before elements

        ,        onunload:                                        null                // CALLBACK when Layout is destroyed OR onWindowUnload

        ,        autoBindCustomButtons:                false                // search for buttons with ui-layout-button class and auto-bind them

        ,        zIndex:                                                null                // the PANE zIndex - resizers and masks will be +1

        //        PANE SETTINGS

        ,        defaults: { // default options for 'all panes' - will be overridden by 'per-pane settings'

                        applyDemoStyles:                 false                // NOTE: renamed from applyDefaultStyles for clarity

                ,        closable:                                true                // pane can open & close

                ,        resizable:                                true                // when open, pane can be resized

                ,        slidable:                                true                // when closed, pane can 'slide open' over other panes - closes on mouse-out

                ,        initClosed:                                false                // true = init pane as 'closed'

                ,        initHidden:                         false                 // true = init pane as 'hidden' - no resizer-bar/spacing

                //        SELECTORS

                //,        paneSelector:                        ""                        // MUST be pane-specific - jQuery selector for pane

                ,        contentSelector:                ".ui-layout-content" // INNER div/element to auto-size so only it scrolls, not the entire pane!

                ,        contentIgnoreSelector:        ".ui-layout-ignore"        // element(s) to 'ignore' when measuring 'content'

                ,        findNestedContent:                false                // true = $P.find(contentSelector), false = $P.children(contentSelector)

                //        GENERIC ROOT-CLASSES - for auto-generated classNames

                ,        paneClass:                                "ui-layout-pane"        // border-Pane - default: 'ui-layout-pane'

                ,        resizerClass:                        "ui-layout-resizer"        // Resizer Bar                - default: 'ui-layout-resizer'

                ,        togglerClass:                        "ui-layout-toggler"        // Toggler Button        - default: 'ui-layout-toggler'

                ,        buttonClass:                        "ui-layout-button"        // CUSTOM Buttons        - default: 'ui-layout-button-toggle/-open/-close/-pin'

                //        ELEMENT SIZE & SPACING

                //,        size:                                        100                        // MUST be pane-specific -initial size of pane

                ,        minSize:                                0                        // when manually resizing a pane

                ,        maxSize:                                0                        // ditto, 0 = no limit

                ,        spacing_open:                        6                        // space between pane and adjacent panes - when pane is 'open'

                ,        spacing_closed:                        6                        // ditto - when pane is 'closed'

                ,        togglerLength_open:                50                        // Length = WIDTH of toggler button on north/south sides - HEIGHT on east/west sides

                ,        togglerLength_closed:         50                        // 100% OR -1 means 'full height/width of resizer bar' - 0 means 'hidden'

                ,        togglerAlign_open:                "center"        // top/left, bottom/right, center, OR...

                ,        togglerAlign_closed:        "center"        // 1 => nn = offset from top/left, -1 => -nn == offset from bottom/right

                ,        togglerTip_open:                lang.Close        // Toggler tool-tip (title)

                ,        togglerTip_closed:                lang.Open        // ditto

                ,        togglerContent_open:        ""                        // text or HTML to put INSIDE the toggler

                ,        togglerContent_closed:        ""                        // ditto

                //        RESIZING OPTIONS

                ,        resizerDblClickToggle:        true                //

                ,        autoResize:                                true                // IF size is 'auto' or a percentage, then recalc 'pixel size' whenever the layout resizes

                ,        autoReopen:                                true                // IF a pane was auto-closed due to noRoom, reopen it when there is room? False = leave it closed

                ,        resizerDragOpacity:                1                        // option for ui.draggable

                //,        resizerCursor:                        ""                        // MUST be pane-specific - cursor when over resizer-bar

                ,        maskIframesOnResize:        true                // true = all iframes OR = iframe-selector(s) - adds masking-div during resizing/dragging

                ,        resizeNestedLayout:                true                // true = trigger nested.resizeAll() when a 'pane' of this layout is the 'container' for another

                ,        resizeWhileDragging:        false                // true = LIVE Resizing as resizer is dragged

                ,        resizeContentWhileDragging:        false        // true = re-measure header/footer heights as resizer is dragged

                //        TIPS & MESSAGES - also see lang object

                ,        noRoomToOpenTip:                lang.msgNoRoom

                ,        resizerTip:                                lang.Resize        // Resizer tool-tip (title)

                ,        sliderTip:                                lang.Slide        // resizer-bar triggers 'sliding' when pane is closed

                ,        sliderCursor:                        "pointer"        // cursor when resizer-bar will trigger 'sliding'

                ,        slideTrigger_open:                "click"                // click, dblclick, mouseenter

                ,        slideTrigger_close:                "mouseleave"// click, mouseleave

                ,        hideTogglerOnSlide:                false                // when pane is slid-open, should the toggler show?

                ,        preventQuickSlideClose:        !!($.browser.webkit || $.browser.safari) // Chrome triggers slideClosed as is opening

                //        HOT-KEYS & MISC

                ,        showOverflowOnHover:        false                // will bind allowOverflow() utility to pane.onMouseOver

                ,        enableCursorHotkey:                true                // enabled 'cursor' hotkeys

                //,        customHotkey:                        ""                        // MUST be pane-specific - EITHER a charCode OR a character

                ,        customHotkeyModifier:        "SHIFT"                // either 'SHIFT', 'CTRL' or 'CTRL+SHIFT' - NOT 'ALT'

                //        PANE ANIMATION

                //        NOTE: fxSss_open & fxSss_close options (eg: fxName_open) are auto-generated if not passed

                ,        fxName:                                        "slide"         // ('none' or blank), slide, drop, scale

                ,        fxSpeed:                                null                // slow, normal, fast, 200, nnn - if passed, will OVERRIDE fxSettings.duration

                ,        fxSettings:                                {}                        // can be passed, eg: { easing: "easeOutBounce", duration: 1500 }

                ,        fxOpacityFix:                        true                // tries to fix opacity in IE to restore anti-aliasing after animation

                //        CALLBACKS

                ,        triggerEventsOnLoad:        false                // true = trigger onopen OR onclose callbacks when layout initializes

                ,        triggerEventsWhileDragging: true        // true = trigger onresize callback REPEATEDLY if resizeWhileDragging==true

                ,        onshow_start:                        null                // CALLBACK when pane STARTS to Show        - BEFORE onopen/onhide_start

                ,        onshow_end:                                null                // CALLBACK when pane ENDS being Shown        - AFTER  onopen/onhide_end

                ,        onhide_start:                        null                // CALLBACK when pane STARTS to Close        - BEFORE onclose_start

                ,        onhide_end:                                null                // CALLBACK when pane ENDS being Closed        - AFTER  onclose_end

                ,        onopen_start:                        null                // CALLBACK when pane STARTS to Open

                ,        onopen_end:                                null                // CALLBACK when pane ENDS being Opened

                ,        onclose_start:                        null                // CALLBACK when pane STARTS to Close

                ,        onclose_end:                        null                // CALLBACK when pane ENDS being Closed

                ,        onresize_start:                        null                // CALLBACK when pane STARTS being Resized ***FOR ANY REASON***

                ,        onresize_end:                        null                // CALLBACK when pane ENDS being Resized ***FOR ANY REASON***

                ,        onsizecontent_start:        null                // CALLBACK when sizing of content-element STARTS

                ,        onsizecontent_end:                null                // CALLBACK when sizing of content-element ENDS

                ,        onswap_start:                        null                // CALLBACK when pane STARTS to Swap

                ,        onswap_end:                                null                // CALLBACK when pane ENDS being Swapped

                ,        ondrag_start:                        null                // CALLBACK when pane STARTS being ***MANUALLY*** Resized

                ,        ondrag_end:                                null                // CALLBACK when pane ENDS being ***MANUALLY*** Resized

                }

        ,        north: {

                        paneSelector:                        ".ui-layout-north"

                ,        size:                                        "auto"                // eg: "auto", "30%", 200

                ,        resizerCursor:                        "n-resize"        // custom = url(myCursor.cur)

                ,        customHotkey:                        ""                        // EITHER a charCode OR a character

                }

        ,        south: {

                        paneSelector:                        ".ui-layout-south"

                ,        size:                                        "auto"

                ,        resizerCursor:                        "s-resize"

                ,        customHotkey:                        ""

                }

        ,        east: {

                        paneSelector:                        ".ui-layout-east"

                ,        size:                                        200

                ,        resizerCursor:                        "e-resize"

                ,        customHotkey:                        ""

                }

        ,        west: {

                        paneSelector:                        ".ui-layout-west"

                ,        size:                                        200

                ,        resizerCursor:                        "w-resize"

                ,        customHotkey:                        ""

                }

        ,        center: {

                        paneSelector:                        ".ui-layout-center"

                ,        minWidth:                                0

                ,        minHeight:                                0

                }

        //        STATE MANAGMENT

        ,        useStateCookie:                                false                // Enable cookie-based state-management - can fine-tune with cookie.autoLoad/autoSave

        ,        cookie: {

                        name:                                        ""                        // If not specified, will use Layout.name, else just "Layout"

                ,        autoSave:                                true                // Save a state cookie when page exits?

                ,        autoLoad:                                true                // Load the state cookie when Layout inits?

                //        Cookie Options

                ,        domain:                                        ""

                ,        path:                                        ""

                ,        expires:                                ""                        // 'days' to keep cookie - leave blank for 'session cookie'

                ,        secure:                                        false

                //        List of options to save in the cookie - must be pane-specific

                ,        keys:                                        "north.size,south.size,east.size,west.size,"+

                                                                        "north.isClosed,south.isClosed,east.isClosed,west.isClosed,"+

                                                                        "north.isHidden,south.isHidden,east.isHidden,west.isHidden"

                }

        };

        // PREDEFINED EFFECTS / DEFAULTS

        var effects = { // LIST *PREDEFINED EFFECTS* HERE, even if effect has no settings

                slide:        {

                        all:        { duration:  "fast"        } // eg: duration: 1000, easing: "easeOutBounce"

                ,        north:        { direction: "up"        }

                ,        south:        { direction: "down"        }

                ,        east:        { direction: "right"}

                ,        west:        { direction: "left"        }

                }

        ,        drop:        {

                        all:        { duration:  "slow"        } // eg: duration: 1000, easing: "easeOutQuint"

                ,        north:        { direction: "up"        }

                ,        south:        { direction: "down"        }

                ,        east:        { direction: "right"}

                ,        west:        { direction: "left"        }

                }

        ,        scale:        {

                        all:        { duration:  "fast"        }

                }

        };

        // DYNAMIC DATA - IS READ-ONLY EXTERNALLY!

        var state = {

                // generate unique ID to use for event.namespace so can unbind only events added by 'this layout'

                id:                        "layout"+ new Date().getTime()        // code uses alias: sID

        ,        initialized: false

        ,        container:        {} // init all keys

        ,        north:                {}

        ,        south:                {}

        ,        east:                {}

        ,        west:                {}

        ,        center:                {}

        ,        cookie:                {} // State Managment data storage

        };

        // INTERNAL CONFIG DATA - DO NOT CHANGE THIS!

        var _c = {

                allPanes:                "north,south,west,east,center"

        ,        borderPanes:        "north,south,west,east"

        ,        altSide: {

                        north:        "south"

                ,        south:        "north"

                ,        east:         "west"

                ,        west:         "east"

                }

        //        CSS used in multiple places

        ,        hidden:  { visibility: "hidden" }

        ,        visible: { visibility: "visible" }

        //        layout element settings

        ,        zIndex: { // set z-index values here

                        pane_normal:        1                // normal z-index for panes

                ,        resizer_normal:        2                // normal z-index for resizer-bars

                ,        iframe_mask:        2                // overlay div used to mask pane(s) during resizing

                ,        pane_sliding:        100                // applied to *BOTH* the pane and its resizer when a pane is 'slid open'

                ,        pane_animate:        1000        // applied to the pane when being animated - not applied to the resizer

                ,        resizer_drag:        10000        // applied to the CLONED resizer-bar when being 'dragged'

                }

        ,        resizers: {

                        cssReq: {

                                position:         "absolute"

                        ,        padding:         0

                        ,        margin:         0

                        ,        fontSize:        "1px"

                        ,        textAlign:        "left"        // to counter-act "center" alignment!

                        ,        overflow:         "hidden" // prevent toggler-button from overflowing

                        //        SEE c.zIndex.resizer_normal

                        }

                ,        cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true

                                background: "#DDD"

                        ,        border:                "none"

                        }

                }

        ,        togglers: {

                        cssReq: {

                                position:         "absolute"

                        ,        display:         "block"

                        ,        padding:         0

                        ,        margin:         0

                        ,        overflow:        "hidden"

                        ,        textAlign:        "center"

                        ,        fontSize:        "1px"

                        ,        cursor:         "pointer"

                        ,        zIndex:         1

                        }

                ,        cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true

                                background: "#AAA"

                        }

                }

        ,        content: {

                        cssReq: {

                                position:        "relative" /* contain floated or positioned elements */

                        }

                ,        cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true

                                overflow:        "auto"

                        ,        padding:        "10px"

                        }

                ,        cssDemoPane: { // DEMO CSS - REMOVE scrolling from 'pane' when it has a content-div

                                overflow:        "hidden"

                        ,        padding:        0

                        }

                }

        ,        panes: { // defaults for ALL panes - overridden by 'per-pane settings' below

                        cssReq: {

                                position:         "absolute"

                        ,        margin:                0

                        //        SEE c.zIndex.pane_normal

                        }

                ,        cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true

                                padding:        "10px"

                        ,        background:        "#FFF"

                        ,        border:                "1px solid #BBB"

                        ,        overflow:        "auto"

                        }

                }

        ,        north: {

                        side:                        "Top"

                ,        sizeType:                "Height"

                ,        dir:                        "horz"

                ,        cssReq: {

                                top:                 0

                        ,        bottom:         "auto"

                        ,        left:                 0

                        ,        right:                 0

                        ,        width:                 "auto"

                        //        height:         DYNAMIC

                        }

                ,        pins:                        []        // array of 'pin buttons' to be auto-updated on open/close (classNames)

                }

        ,        south: {

                        side:                        "Bottom"

                ,        sizeType:                "Height"

                ,        dir:                        "horz"

                ,        cssReq: {

                                top:                 "auto"

                        ,        bottom:         0

                        ,        left:                 0

                        ,        right:                 0

                        ,        width:                 "auto"

                        //        height:         DYNAMIC

                        }

                ,        pins:                        []

                }

        ,        east: {

                        side:                        "Right"

                ,        sizeType:                "Width"

                ,        dir:                        "vert"

                ,        cssReq: {

                                left:                 "auto"

                        ,        right:                 0

                        ,        top:                 "auto" // DYNAMIC

                        ,        bottom:         "auto" // DYNAMIC

                        ,        height:         "auto"

                        //        width:                 DYNAMIC

                        }

                ,        pins:                        []

                }

        ,        west: {

                        side:                        "Left"

                ,        sizeType:                "Width"

                ,        dir:                        "vert"

                ,        cssReq: {

                                left:                 0

                        ,        right:                 "auto"

                        ,        top:                 "auto" // DYNAMIC

                        ,        bottom:         "auto" // DYNAMIC

                        ,        height:         "auto"

                        //        width:                 DYNAMIC

                        }

                ,        pins:                        []

                }

        ,        center: {

                        dir:                        "center"

                ,        cssReq: {

                                left:                 "auto" // DYNAMIC

                        ,        right:                 "auto" // DYNAMIC

                        ,        top:                 "auto" // DYNAMIC

                        ,        bottom:         "auto" // DYNAMIC

                        ,        height:         "auto"

                        ,        width:                 "auto"

                        }

                }

        };

/*

 * ###########################

 *  INTERNAL HELPER FUNCTIONS

 * ###########################

 */

        /**

        * Manages all internal timers

        */

        var timer = {

                data:        {}

        ,        set:        function (s, fn, ms) { timer.clear(s); timer.data[s] = setTimeout(fn, ms); }

        ,        clear:        function (s) { var t=timer.data; if (t[s]) {clearTimeout(t[s]); delete t[s];} }

        };

        /**

        * Returns true if passed param is EITHER a simple string OR a 'string object' - otherwise returns false

        */

        var isStr = function (o) {

                try { return typeof o == "string"

                                 || (typeof o == "object" && o.constructor.toString().match(/string/i) !== null); }

                catch (e) { return false; }

        };

        /**

        * Returns a simple string if passed EITHER a simple string OR a 'string object',

        * else returns the original object

        */

        var str = function (o) { // trim converts 'String object' to a simple string

                return isStr(o) ? $.trim(o) : o == undefined || o == null ? "" : o;

        };

        /**

        * min / max

        *

        * Aliases for Math methods to simplify coding

        */

        var min = function (x,y) { return Math.min(x,y); };

        var max = function (x,y) { return Math.max(x,y); };

        /**

        * Processes the options passed in and transforms them into the format used by layout()

        * Missing keys are added, and converts the data if passed in 'flat-format' (no sub-keys)

        * In flat-format, pane-specific-settings are prefixed like: north__optName  (2-underscores)

        * To update effects, options MUST use nested-keys format, with an effects key ???

        *

        * @see        initOptions()

        * @param        {Object}        d        Data/options passed by user - may be a single level or nested levels

        * @return        {Object}                Creates a data struture that perfectly matches 'options', ready to be imported

        */

        var _transformData = function (d) {

                var a, json = { cookie:{}, defaults:{fxSettings:{}}, north:{fxSettings:{}}, south:{fxSettings:{}}, east:{fxSettings:{}}, west:{fxSettings:{}}, center:{fxSettings:{}} };

                d = d || {};

                if (d.effects || d.cookie || d.defaults || d.north || d.south || d.west || d.east || d.center)

                        json = $.extend( true, json, d ); // already in json format - add to base keys

                else

                        // convert 'flat' to 'nest-keys' format - also handles 'empty' user-options

                        $.each( d, function (key,val) {

                                a = key.split("__");

                                if (!a[1] || json[a[0]]) // check for invalid keys

                                        json[ a[1] ? a[0] : "defaults" ][ a[1] ? a[1] : a[0] ] = val;

                        });

                return json;

        };

        /**

        * Set an INTERNAL callback to avoid simultaneous animation

        * Runs only if needed and only if all callbacks are not 'already set'

        * Called by open() and close() when isLayoutBusy=true

        *

        * @param {string}                action        Either 'open' or 'close'

        * @param {string}                pane        A valid border-pane name, eg 'west'

        * @param {boolean=}                param        Extra param for callback (optional)

        */

        var _queue = function (action, pane, param) {

                var tried = [];

                // if isLayoutBusy, then some pane must be 'moving'

                $.each(_c.borderPanes.split(","), function (i, p) {

                        if (_c[p].isMoving) {

                                bindCallback(p); // TRY to bind a callback

                                return false;        // BREAK

                        }

                });

                // if pane does NOT have a callback, then add one, else follow the callback chain...

                function bindCallback (p) {

                        var c = _c[p];

                        if (!c.doCallback) {

                                c.doCallback = true;

                                c.callback = action +","+ pane +","+ (param ? 1 : 0);

                        }

                        else { // try to 'chain' this callback

                                tried.push(p);

                                var cbPane = c.callback.split(",")[1]; // 2nd param of callback is 'pane'

                                // ensure callback target NOT 'itself' and NOT 'target pane' and NOT already tried (avoid loop)

                                if (cbPane != pane && !$.inArray(cbPane, tried) >= 0)

                                        bindCallback(cbPane); // RECURSE

                        }

                }

        };

        /**

        * RUN the INTERNAL callback for this pane - if one exists

        *

        * @param {string}        pane        A valid border-pane name, eg 'west'

        */

        var _dequeue = function (pane) {

                var c = _c[pane];

                // RESET flow-control flags

                _c.isLayoutBusy = false;

                delete c.isMoving;

                if (!c.doCallback || !c.callback) return;

                c.doCallback = false; // RESET logic flag

                // EXECUTE the callback

                var

                        cb = c.callback.split(",")

                ,        param = (cb[2] > 0 ? true : false)

                ;

                if (cb[0] == "open")

                        open( cb[1], param  );

                else if (cb[0] == "close")

                        close( cb[1], param );

                if (!c.doCallback) c.callback = null; // RESET - unless callback above enabled it again!

        };

        /**

        * Executes a Callback function after a trigger event, like resize, open or close

        *

        * @param {?string}                                pane        This is passed only so we can pass the 'pane object' to the callback

        * @param {(string|function())}        v_fn        Accepts a function name, OR a comma-delimited array: [0]=function name, [1]=argument

        */

        var _execCallback = function (pane, v_fn) {

                if (!v_fn) return;

                var fn;

                try {

                        if (typeof v_fn == "function")

                                fn = v_fn;

                        else if (!isStr(v_fn))

                                return;

                        else if (v_fn.match(/,/)) {

                                // function name cannot contain a comma, so must be a function name AND a 'name' parameter

                                var args = v_fn.split(",");

                                fn = eval(args[0]);

                                if (typeof fn=="function" && args.length > 1)

                                        return fn(args[1]); // pass the argument parsed from 'list'

                        }

                        else // just the name of an external function?

                                fn = eval(v_fn);

                        if (typeof fn=="function") {

                                if (pane && $Ps[pane])

                                        // pass data: pane-name, pane-element, pane-state (copy), pane-options, and layout-name

                                        return fn( pane, $Ps[pane], $.extend({},state[pane]), options[pane], options.name );

                                else // must be a layout/container callback - pass suitable info

                                        return fn( Instance, $.extend({},state), options, options.name );

                        }

                }

                catch (ex) {}

        };

        /**

        * Returns hash container 'display' and 'visibility'

        *

        * @see         $.swap() - swaps CSS, runs callback, resets CSS

        * @param {!Object}                $E

        * @param {boolean=}                force

        */

        var _showInvisibly = function ($E, force) {

                if (!$E) return {};

                if (!$E.jquery) $E = $($E);

                var CSS = {

                        display:        $E.css('display')

                ,        visibility:        $E.css('visibility')

                };

                if (force || CSS.display == "none") { // only if not *already hidden*

                        $E.css({ display: "block", visibility: "hidden" }); // show element 'invisibly' so can be measured

                        return CSS;

                }

                else return {};

        };

        /**

        * cure iframe display issues in IE & other browsers

        */

        var _fixIframe = function (pane) {

                if (state.browser.mozilla) return; // skip FireFox - it auto-refreshes iframes onShow

                var $P = $Ps[pane];

                // if the 'pane' is an iframe, do it

                if (state[pane].tagName == "IFRAME")