À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Új°TbŸÌ14Æ4{¥¼GÖDãtK‡Ôµ}71ŠUuðáA®Æ’¾(&¹9H'ù¹¿©‘ã`Iw¼X
ùyÂ*4å»
”ó¸­Ü|o$±Ùbt¥œR?:˜Áµ‘èîŒLc`?UŸ%`ç§˜¡^»:}”Šºø ›ýFW'¿”ÎÑ‹Þ4ó|(—¡»2È4“qwƒJé’ÛB©~\|ÃDþ¥O’¨Ã~xGLmt›K˜
fue$ÎGéŠ”ïÉìÒ‹CZüù–£BX ["\è0nRQ²B˜7±Ã›´äØˆ+¡øü_&á¿Ù¹ÿ
ŸqìIÓí¡´C^ñàA¨ÿfÄÂð!‰àUŽ@BÜ8ì‹Ø ²š:ÄÐ‹Žwëÿ»Gtâ É|y·1i>Osãá1 aiŽck´5\íp|œf›Ïk«Û_hZve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠŒÎ&-sÐ€î²TIE™a’$.½úh#ÐÕ²åQ=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿ÃÍrKœBp (7Bpú‘}&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝû¾qb³©¥DdO²ùPÓË‘ù
(e3M™Ô¡áý0=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿E`Jó‚PŠ§ÿhŠ p¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚyß–®iÉNØ²è1Šßß$£ü¡E¦P>rþøäh=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿òäR÷\^;~²awtŠÉÃR¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚyß–®iÉNØ²è1ŠßW‰T0xƒã‘%6ðgDÏJ…?ß$fX(P¡²‡FYíhÍgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠ×¾ÞI@%!þ^{H7CAÎØP©PÃ¦Êª¦ÝúÑ ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯…ãÈò³õZ9ê…kõŸy§ªça:hÇ§ä*ÛWÔï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°I¼í<hk9/`˜s(
l©”-˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿXÀK²~zèŸ#oÜ6)Q$îH	qp•¥ª·!„Æ,Ù³õí¹3ØTéS]ë,—PcÄ°«w“	ð™^ª6¸ñé‚vªê‰8ƒZ"µ¥óBÁFKµw¹‘Á‰Åèðæ­¯&ÿG ^æñ?p xç£«zÔQ(‘Š•(^¶Ž¸²<Ý_˜$ómÁ&‡oçüVÐ˜r)Obžs{ž ŸloVxeø÷…¡?™5À†”+ƒ›#•aËi5¨!D”Å}È	çË:ÊnÙh$ø¬%åX2»ñº‹ø¾]fg{“Fè¦äðŽÕ××	¤ÜM1,g!èZé™ÕÝX=³Ê¶øn7[ï>ÂC«®KpV0 ý]I—'QŒ\Ù‚’'œò›/`té$=umÚ5~
«4ý+0ùA½­AÆÄ‘-*J*G¤"-ÐØcFC™Ä¶ôê8(ñ(á£cL:€) å2¢|bì —XÊ™¢§9nDŽß ´Ðžä]ß÷(Æ0Cuá]Ê)Wþb%ÒR£~6ßàúyŸöŽÔYJ®Ó†Á0þ¨]£7ºÎ¤LóDQP‡^®N½Î†*h4§¥GYÝ,TNr°¥”ê„Øm¤"-ÐØcFC™Ä¶ôê$=umÚ5~
«4ý+0ùB6]”ÛÊZM
d›¥«Û8nnà&,ô‚`\Íf­‚þÎê{Ð6×šÕ^Q{O~tÁ£“f²xªËÚç¶Û8nnà&,ô‚`\Íf¦PÅŠŒå•½LÏ ©Þ‘˜ìöÁêîñB&àGíWù¶-9·ôO'àbqÂw+,$z³¢¸aðçm§)Iq“ÍÛ8nnà&,ô‚`\Íf}G:Ê šg¸ö¢Ó¶¹^™ç„Ao.ÏÒØ¢q ¢9ñ6Û8nnà&,ô‚`\ÍfdŒt£œbçå(P\¸hnéhVÐ^äFjs¤6Ç ­ºÖíŒD%±ä‡É"P*6¨1ñØÆ´2.•(~d…lt2fÜî}a±	!ç¸»í®ÿçWÙê›N/Iá‰x!WÁèšGêðÞD;·mŒRÉšEy=ÏÂŠfÔ³Å“!H¨ïÌý<ØF¶*cW¼RÛsÔâ±a¹7¬“Äì6
z¸iÁ½"Ï›]•_ÑÓGAÈ
nÍ»˜¸édÙV•z£4óàZí›Ð”à˜®ÿ½n›…}· ¤"-ÐØcFC™Ä¶ôêÄl3eŸZ§îbké+ôDQP‡^®N½Î†*h4§¥GYÝ,TNr°¥”ê„Øm¤"-ÐØcFC™Ä¶ôê$=umÚ5~
«4ý+0ù·5ÀSPç&ªÌÑêÅÃkÚ¤"-ÐØcFC™Ä¶ôê7¥‡_§¸ÖË?k–Rh§mŸ¼Í¼L­
—8,02cá…Ñô%šˆgnsúøÕÅä§%+	ÖüÊO´ÏÛ8nnà&,ô‚`\Íf†T£X‡~!ôyZIIIa·}ð=ïãCoå	3ÊË>Ê™Á‡bgWÅ¥72ÿ˜Ã‡¥h\¶,÷ïtïÉç  ¤<H„¿Pî}‘MýUuÛ8nnà&,ô‚`\Ífêš"VäáGt(@MßtG±½ÄlbÇOèÆõ\g™;Û8nnà&,ô‚`\Íf¨‚.ŒA^Õ‘g¨×æýgœžÌ¨ùÇ*ÔûµÒ‹+Íéó¤Â@„rÓ?XSîÛ8nnà&,ô‚`\ÍfÔ
7q6"§£WŠ?j[š¬ÿÛ8nnà&,ô‚`\ÍfX„™ûŸ Ž™ÊEäæÿBÎÄƒ¬‚4sp0>ˆ$Û8nnà&,ô‚`\ÍfSF-Î|è9œdì$PÅ'Ë`ÒeóFMïyèOŽÛ8nnà&,ô‚`\Íf1( ¶S
ëÛ?tùQedv}„#«ßÇ6”¸çY3‡Ú²§¯‰8ÁX%LÇe,Ýnu%:Û8nnà&,ô‚`\ÍfQô]Fn¨~vÚ[…Eµ™sÙœçÙ+õ3õ@„w  ga·}ð=ïãCoå	3ÊÈKÌ™+äSƒ6åË·^´`ú‘oÁã‰ñ3Ôor=¤"-ÐØcFC™Ä¶ôê7¥‡_§¸ÖË?k–Rh¾ù«l¦ï)HÕ6m‹ÙUo¦£Þ|{fêR)Žä7»ÉåZvMž™]î‰
ÚDQP‡^®N½Î†*h4§>ÂC«®KpV0 ý]I—'QŒ\Ù‚’'œò›/`téÛ8nnà&,ô‚`\Íføùe˜Ï‘4|wº4Ã^Ç]  ¤<H„¿Pî}‘MýUuÛ8nnà&,ô‚`\ÍfÀnæzA¶&QÖÐñ)tÆš×òd¿^n5Oô-ÒøÃÛ8nnà&,ô‚`\Íf¨‚.ŒA^Õ‘g¨×æ”æ-«AëÜkÞ_‹À;-ƒ—A¶PÄ{?ÖøJsð‰nÛ8nnà&,ô‚`\Íf±C‡µ2p—Ýý¬A•ëÛ/Þ°;ÑŠä#šEsÙœçÙ+õ3õ@„w  ga·}ð=ïãCoå	3Ê÷¶®ˆ[¬o„Q¹ôœ›SÆ†úèY Ñ@®Ó×–ÿ´¦Û8nnà&,ô‚`\ÍfPÜ>¯ða£pŸŠ½ˆÛ8nnà&,ô‚`\Íf`àëÿcPøåÝÀ€~«DQP‡^®N½Î†*h4§¥GYÝ,TNr°¥”ê„Øm¤"-ÐØcFC™Ä¶ôê$=umÚ5~
«4ý+0ùB6]”ÛÊZM
d›¥«Û8nnà&,ô‚`\Íf²Q\M
vÅ4(›¹„©0M9À?9Ám1
j|VÐ^äFjs¤6Ç ­ºÖíŒD%±ä‡É"P*6¨1T–/ ŽäÅ”r1´ZÄEd£Eg_¸ºFÅ‹z’-ž¿éwá%G0Sm²Š=Û8nnà&,ô‚`\Ífº'-é$Â9rÃQxý¼|Ö„ªNÍ°äÑþ•i¼Û8nnà&,ô‚`\Íf'ìÁcºÏï
†R´°m'{u*Q–¾
>fÚtJºÿz º?•E9‹®rËèC¡ÏGµ•¬lb‹]~úôI…3Ï´ü¡ÆçJlL”Û8nnà&,ô‚`\Íf/yæ.@ò~¢Õ˜9Y¤"-ÐØcFC™Ä¶ôêÛ8nnà&,ô‚`\Íf·Ø-¹D°èyot
³S29÷ˆãO‚§˜Å’]Cî”DQP‡^®N½Î†*h4§Û8nnà&,ô‚`\Íf@v~!õƒ¨±U…*Éê¬ÉÜú3±e©M{ëŽÈšÛ8nnà&,ô‚`\Íf
)U‹á—ˆ~ŸØ…ÀO¨ü®{9Úþ6÷vfaÿg2,Û8nnà&,ô‚`\Íf¥GYÝ,TNr°¥”ê„Øm¤"-ÐØcFC™Ä¶ôêÛ8nnà&,ô‚`\Íf0uQ¨P3Inå XÒ2dK w|/ü}¡¥´%©ÆïØ!ªñŸ¾ÆFùŠ¢«ÄyÛ8nnà&,ô‚`\ÍfSseÎT<^&‹]ouêö
º@ªþ*î5H°k¢aÛ8nnà&,ô‚`\Íf8òŽæûÑFÀÇø<Q“þ¯:O¯fnSÖÁú^©yÛ8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\Íf:†Á†ù/Ezê³N–tŒ                                      icon: '../../images/nav1.png',
                                        label: 'jqx.base.css'
                                    }, {
                                        icon: '../../images/nav1.png',
                                        label: 'jqx.energyblue.css'
                                    }, {
                                        icon: '../../images/nav1.png',
                                        label: 'jqx.orange.css'
                                    }]
                                }, {
                                    icon: '../../images/folder.png',
                                    label: 'scripts',
                                    items: [{
                                        icon: '../../images/nav1.png',
                                        label: 'jqxcore.js'
                                    }, {
                                        icon: '../../images/nav1.png',
                                        label: 'jqxdata.js'
                                    }, {
                                        icon: '../../images/nav1.png',
                                        label: 'jqxgrid.js'
                                    }]
                                }, {
                                    icon: '../../images/nav1.png',
                                    label: 'index.htm'
                                }]
                            }];

                            $('#solutionExplorerTree').jqxTree({ source: source, width: 190 });
                        }
                    }, {
                        type: 'layoutPanel',
                        title: 'Properties',
                        contentContainer: 'PropertiesPanel'
                    }]
                }]
            }, {
                type: 'floatGroup',
                width: 500,
                height: 300,
                position: {
                    x: 350,
                    y: 250
                },
                items: [{
                    type: 'layoutPanel',
                    title: 'Output',
                    contentContainer: 'OutputPanel',
                    selected: true
                }]
            }];

            $('#jqxDockingLayout').jqxDockingLayout({ width: 800, height: 600, layout: layout, contextMenu: true });

            $('#saveLayoutButton').jqxButton();
            $('#loadLayoutButton').jqxButton({ disabled: true });

            var savedLayout;

            $('#saveLayoutButton').click(function () {
                savedLayout = $('#jqxDockingLayout').jqxDockingLayout('saveLayout');
                $('#loadLayoutButton').jqxButton({ disabled: false });
            });

            $('#loadLayoutButton').click(function () {
                $('#jqxDockingLayout').jqxDockingLayout('loadLayout', savedLayout);
                $('#loadLayoutButton').jqxButton({ disabled: true });
            });
        });
    </script>
</head>
<body>
    <div id="jqxDockingLayout">
        <!--The panel content divs can have a flat structure-->
        <!--autoHideGroup-->
        <div data-container="ToolboxPanel">
            List of tools</div>
        <div data-container="HelpPanel">
            Help topics</div>
        <!--documentGroup-->
        <div data-container="Document1Panel">
            Document 1 content</div>
        <div data-container="Document2Panel">
            Document 2 content</div>
        <!--bottom tabbedGroup-->
        <div data-container="ErrorListPanel">
            List of errors</div>
        <!--right tabbedGroup-->
        <div data-container="SolutionExplorerPanel">
            <div id="solutionExplorerTree" style="border: none;">
            </div>
        </div>
        <div data-container="PropertiesPanel">
            List of properties</div>
        <!--floatGroup-->
        <div data-container="OutputPanel">
            <div style="font-family: Consolas;">
                <p>
                    Themes installation complete.</p>
                <p>
                    List of installed stylesheet files. Include at least one stylesheet Theme file and
                    the images folder:</p>
                <ul>
                    <li>styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
                        be always included in your project.</li>
                    <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
                    <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
                    <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
                    <li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
                    <li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
                    <li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
                    <li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
                    <li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
                    <li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
                    <li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
                    <li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
                    <li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
                    <li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
                    <li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
                    <li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
                    <li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
                    <li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
                    <li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
                    <li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
                    <li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
                    <li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
                    <li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
                    <li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
                    <li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
                    <li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
                    <li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
                    <li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
                    <li>styles/images: contains images referenced in the stylesheet files</li>
                </ul>
            </div>
        </div>
    </div>
    <div style="margin-top: 25px;">
        <button id="saveLayoutButton" style="float: left; margin-right: 10px;">
            Save layout</button>
        <button id="loadLayoutButton" style="float: left;">
            Load layout</button>
    </div>
</body>
</html>