jQuery UI - Draft Content grouping / Panel Advanced Demo

This is jQuery UI Draft Content grouping / Panel advanced demonstration.
Latest source at http://github.com/idlesign/ist-ui-panel/, also available at jQuery UI Labs: http://code.google.com/p/jquery-ui/source/browse/#svn/branches/labs/panel
Old simple demo (without IE layout issues) is here.

Left panel #1

Panel's initial options:

collapseType = slide-left
width = 300px

Notes:

'slide-left' & 'slide-right' panels automatically create so-called stack area, where all these panels are stacked in collapsed state. This could be overriden with 'stackable' option set to 'false'.

Left panel #2

Panel's initial options:

collapseType = slide-left
trueVerticalText = true
vHeight = 150px
width = 280px

Notes:

'trueVerticalText' option forces collapsed panel's title to be rendered vertically (i.e. rotated, read from bottom to top) in contrast with 'Left panel #1'.
'vHeight' option set to '150px' restricts panel's high in folded state.
Panels width is set to '280px', so when unfolded it's slightly narrower than 'Left panel #1' and 'Left panel #3'.

Left panel #3

Panel's initial options:

collapseType = slide-left
trueVerticalText = true
vHeight = 150px
width = 300px

Right panel #1

Panel's initial options:

collapseType = slide-right
collapsed = true
trueVerticalText = true
vHeight = 237px
width = 200px

Notes:

'collapsed' option set to 'true' tells panel to be initially rendered in collapsed state.

Right panel #2

Panel's initial options:

collapseType = slide-right
collapsed = true
trueVerticalText = true
vHeight = 160px
width = 200px

Feel free to examine html of this page.

Central panel #1

Panel's initial options:

collapsible = false

Notes:

'collapsible' option set to 'false' allows us to create static non-collapsible panel.

Central panel #2

Panel's initial options:

draggable = true
cookie = {'expires':7}

Notes:

If 'draggable' option is set to 'true' panel uses jQuery UI Draggable plugin and could be dragged by title. Draggable panel overlaps other non-draggable panels.
If 'cookie' option is not 'false' panel uses jQuery Cookie plugin to store panel state between sessions. 'cookie' option accepts the same parameters as Cookie plugin (in the example we store cookie for 7 days).

Only one of these accordion-like panels below is opened at a time.
Note: 'accordion' option is set to work with 'my_group' classed controls.

Central panel #3 (accordion-like #1)

Just me and you, pal. Just me and you.

Panel's initial options:

accordion = 'my_group'

Central panel #3 (accordion-like #2)

Just me and you, pal. Just me and you.

Panel's initial options:

accordion = 'my_group'

Central panel #3 (accordion-like #3)

Just me and you, pal. Just me and you.

Panel's initial options:

accordion = 'my_group'

Central panel #4

Panel's initial options:

controls = $('#cntrl').html()
collapseSpeed = 1000
fold = function() { alert(' "fold" callback executed '); }
unfold = function() { alert(' "unfold" callback executed '); }

Notes:

'controls' option allows to place custom content at the right corner of unfolded panel's titlebar (in this example we place there 'Edit' link from hidden div with id=cntrl, examine page source).
'collapseSpeed' option helps to ajust the duration of folding/unfolding animation (here animation time set to 1000ms).
Functions assigned to 'fold' & 'unfold' actions are called callbacks and are executed when the appropiate action took place.

And more:

You can disable this panel using .panel('disable').
You can replace this content using .panel('content', 'New content ;)').
You can destroy this panel using .panel('destroy'). Initial panel content would be restored.