À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Új°TbŸÌ14Æ4{¥¼GÖDãtK‡Ôµ}71ŠUuæS¬UgaÙn‘\6ÔAŸ’sJnüóÆ„3(ûªÜìÕIÍXe$â¤¾L—‡ÿËH‘¯Ù<aD4aÌ³í3m‘ô'ø€BW±`™ò¡½O	êa{BPª#,ƒ«¤;”ßîy«îô¾Íù¸–vµ„KÛ$¾üh_$/Ö{d¸¯Ång ÎÄ}w=A¤Å”%Þ8B‰;\F@ Þ-mJR8v.VCÆ{)$ºnz >¯Y†#Íì_ÝÃÌ‡)ÈØëº!œ¢¸Ü°CÀØy×2ô
,x¼®¸ÆIÊ˜ðÕ]ß»fˆAÃ2 RT¶#òßf·ýë§Åõ§~Ì¿¦YŒ5ƒÔ—DAE&A/J—*.ðP£Úî¶ø¶Ë{íÛ°l*;üÏ¥­´ç<ïû‰AžžLÿeáeºy9+gÓ<.›ëO¼à[þˆ¡ûâ›»tëÖ“Ñ¯Ý@r2X45PÜ ÿ°+Ég|5W9š¼õ™[;¨~I6§•ßèfª#[«k·çr+É9]§ |38­[oA­°Ä²Ú½â‘JÂ:¦|¶¶`œYe!b¶Hòg@7C'ˆ-º¶Á˜<Ê_„'‹¹±".7ÔZ,Qc¨lÿ’%Øëªùí~Ü% ÊÁÁÞ& <âê”$W ;þXIý³01)P¼»“*´Ä~é9e”»ÜHÌ 6Òý_àI6“lçt—ªÂ®"®-{¹ú47%{²—Œ^ŽD@áGWÂà—ÜÆ$<ÀTZäŽÊ6½lE‡[à“»9	•šüÅCb‘?k,Ç2Ð0H/¢’¿]W!«cía
·T<èj;Ýa
µ¤Ä­xJIjã@Ø	û-CD”…ã“•[{ÚkdxÆð„MÜýûW£ IQW'>oWÒõ¹Ešuñ½Ÿ©Ün_¼s$v ”üZ|æ.¹äiÞ«Y•{vJà%áF.Ì@:E¹¬Õ
›k9m¦³¯èÿ¯EäfZ;²Ý¡®¾@
°†›Ì „V0Ìpa^VF2HXvñ­‘/
På—Eõà„!IÜ€}ÄŽìŸÊ=’ŸêìöØ˜U7Ø
¯p…â5HØÄ£êáÄÙ ?Š«_Fõ)Q2Aƒ@,lˆ!M¸bÁ,&DDhM²£šœ›J]9ŸŒ:ƒ¦ÑàµÃ¤™ÉTrh&ìôQ³‹Þ6zjdìB“¹nlžc³,z;Î'w4Õü“z”»½¥'·VöÒ‡*G c€y ‘*ÖŸËd(Úu”vn1¥	J(DJkJåT¹¿ 9{@ ­GÄˆ
ÝÃªŒ=N²IˆÄT—ç’ÙÒ fù¶6Îæ¡Ü'#¼äoR?N×úÝù–Aô$<•€h Çòë«åÂÈ“ÏÄmH¦óâÇzâ3*ÍI½êå½<@™3í¦]¹]éÐŽ¯z¾
ˆLÕHš»Ïžð#ÖÍ`;ï$š*1 I¼G„GÚ|x©¨l¯no $Êx(—ªÂ®"®-{¹ú47%{²Ä‡—,­ÊÞ n*¦,¦ÊÅŒéùÐ79 yÞt‡CBs•{²Ï\È®WhY˜4N2'lÔÊ‘r
œ0¤{à/~ÞÍåÉèÊÊŽ3o˜ŸÑp5•×@æèhL:›ÿ+5€G_ Mo*¢e`ùÔïjØàÓI„Ésbö‘7p¶äs^î/×\tîñ+Ÿý¥&=½áF2½MZÑ­‡Lþì€·›Zºp¥.èÈºÈ£¤±»nUÝ‚S.qúƒnvòxŒ§¾ÿË°,µÜ_&±‚xò™„	ê$šŸÉ\¡dúø{qcŽ˜tËmH)ò– UBzû¼¥ðÒÃå•zÆÀ{5K±0%–íNatí—†´põšÆú3
¦×E(Õ›
^q¢=¡LL)' 1[Çz±€(wai|47FÀ±<nCœÖN^1ÏBDl:žyëTU)6+Ô_ˆ„MÜýûW£ IQW'>o–Ý’Œ±Ð)kW÷uÃµpýÙ,§¤ÚŸn{ÖR‡ÓÝ{ði©‚îÑg2¶pFUIžp&ô•,°yÔ3aryéHS~‰ ‘¡z²45+þ¤“f]ý¸Y1Þg.¾Ð÷Š(±(ÅÜÉ·TòâÇ^¢BhIgøø>æ®ï’`Ps®÷Ù…¹-_]ÑMæ>ÜbŒ‰Iò'ç&Ì£w²‡§›vÐmmž4Š’ƒ¼Æ -u?™žS«"¡oÐ;œ;×OÕ»#…ó­Kšæ7{x …ÆT¤F0?“ì¢“JÄàaÞ}«QFÇh5‡(ïßŽÇ2hãå‹ô¥û`|4ÚU_­Ú=æ#ŒÔœ¾÷ „MÜýûW£ IQW'>oj3×%ç/(Aô%i9$x'íhýÌÏœ¤€1+p:^&c°‡â…(|È¨83W9¯EÂ™´V§RÞFœl*yB•4³}9)Ñ4 ÄÞáîc.ô³>C[æþiofÁþi
’cŠÝ•A1@“×%!sçµ(mÒþ÷Ì$ÿiOvF‡'q÷¢¹EÄèOT^ÎQÖ=vµ¥p.J'J¹XM½I%µMxbpeO\•÷9œgÎo¯3ª†ófSªx-h \¤E$_1Oõs}üþŸ8=HÚ@¨»ª§Üå ×Z±×(cxPBÜ4:fáB¹¹Ç‰šöAë:é€‚Uúˆ—Eõà„!IÜ€}ÄŽìŸÊf™Øm¾~µøšÞË‡6ˆÇÍ·þBgþ”ùª–€}JoÎ `Û¹æUêü"vvÏ·•¬'ÕùR™¯JeÜœ§™çÃ–m¡1ÌX2þDaêQÞ!ÂÛVö7*g|0AJÃÿZIEV GµP5•C‘	‚N†Xéü|ä’ÿbéúÉ(cxPBÜ4:fáB¹¹˜äßcž>ÍÐ«ä&X{+N®¼yvýËc~o
‰ÆîiÙsÆƒz£}üåÂ„ã¹"Îó×ÂõÆÀÓ\Å¯ ÈºÿìJ1æÂ3'ÿÝ)d†Fž£øJÁÀ¬E¡?T,hr6òánÊ`ÛÚrÕ:§MQ“žÀŠB!Ó–
áÜ1–c;ýVîÆJk]£‡žä;¶5Îæé‚ŒìRñÈ(ç©peO\•÷9œgÎo¯\ÍÕ½låŽ7 Tç´äªÝ¢ðã§ÃÓEÝE™Þrû¡ˆ=ÿì¾î»„7NÐïG1ðMªzìÑ˜ÒÙg„:®™dZ£eZ*#›ì þS¡uØ‹¯&Žw÷s‡¼ê–¸¯»ÅØšæ7{x …ÆT¤F0?“ìòH9ìJŠ×PÍrÝ³ ñu íD€ÜJOgº¤¡¹Î…ŽÅ'U&ìi„#oÀáfÊáº‹Ää÷(éP*	òîüÕTÀ#bP	w‘aQ€¶Ëe	ßÐ?ÀR¤žÙ–Ò‹1šêw^ÌíJá}Ü´‹¶ô Å³»ðÐò¬e­Î–»µË‘ZÑmÀBÉ°ŽÚNóx-Tkæ¯	‚ý¸Y1Þg.¾Ð÷Š(±(ÅÜÉ·TòâÇ^¢BhI„MÜýûW£ IQW'>o9)”3ÖXôA0WÖ9ØÄ–Fl3Ð*ð-^s}³õÀ‹0þmÖ33…]b_áÐ{s’óÉYw–ù'“´P@Gœ?§š¬¶wN“Þz8MZ—ªÂ®"®-{¹ú47%{²§u˜RÂ²gø f ý	«çÞ¬Q¥Bœ¥ç¿ØcÎu5r!Ž?!ásÐpQ4!5ÈlµÅ¢>øØC4JÞ)ËO1ñ1YŠœ³E®\:3ZÂÓ´–Ì, s¤ò\:í¾åkFÛ½T/¹: ò©Säxxý¯W§[Í,ke–Iµp•ŠcÆR£Þ&Îè"~­O+ò‚XÿžŠû€k=$„®Nìî³“Ò›ƒÁE.4ôgîµ”ñ¿+ëúO·•¬'ÕùR™¯JeÜœ§™áïMÑäKÞ:—¨û½‰)"œl*yB•4³}9)Ñ4 yÃ1°„*xû½“O²dšMcýCÍ2ÊÅˆ)åj- 	‰°¸$¡-·À>¤As_Ò“ßµ¸…+ž2At[ŒÕF#Ð(U-¤Èua'ýóÊ(³nh¢«½Ö:øÐQÎ×ÖŒy©¹¹ÊèÁã•š27:›qoE¹£`ižIÛ*ŸLEDêtÏ§èòŠX ù%Ìn™s
öÑ&T¼§iÝÔ=Æ†<uƒœY›¸[®×ˆ	@5ô\bÆÐ.B6tk?SïyCz<—_Ã&3·>ç{h4htÏ«{™õ\;	+äÍ_~.×
²ç ¯—Ýƒ%XœÂÁ×á"å­.rcp|RôbÎªQ óÑºàüóŽ¢h!Ï{^Ä÷úR=š‡UÄ,k¾G9WØ¬ðr˜\:…ë2&ÎR@Jc²öÁÞ3W9¯EÂ™´V§RÞFÁÍõmK®ÙGoNýï™œtÈ¦Ð";¶þúìÚRŽLŠ@™˜ÉV÷ZÀI*|Âhþ”@¥HðªÑÇKUxÿ‹*„e2ž\ŸÅçÝ4liLKäòDgùØÖ®ƒ‘
+
[åºÏQ#M&ÃÁ6ibÉÛ$Ð8ý’Ûç²ñh]»Äà6òánÊ`ÛÚrÕ:§MQ“(Þ>&†¨ñö8æ#Ä©Á‹ÿk<y­”bO¤¦×IÅÕo£r×¾×Žs'Ý×H~&Ê/)0ÖƒÇ!l|ÌÛ>Ôëæ<nCœÖN^1ÏBDl“Úâ÷ß&*W»”}ðï Orð3Ø³¸á˜i;®Éˆ~C””÷®xLS²ë÷“CjÎeLjxPÆ>’õ•Æ˜ñëi°
Ù°‡ºî7ØZ‰5§w­§áF 65Ÿû×,ÍK§îÑYŠæP¯¾<@^ '4®.é˜TC%\|o»Äw¯3’?(¥µÐ=*s
ƒ®.MŒóV„«+E1Ä1”"zOPúöB…+ž2At[ŒÕF#Ð(UàõìºÔdÒê“£ò‘j%aÏ²Yã²((—Eõà„!IÜ€}ÄŽìŸÊÕ}Åú¸'I÷œuhûæ´VŸè¬A.`ý¨ËHÐXâ¦"˜‚ÝÚ¬­y»]f>á·rdmD+é§šO-“r{žbVÔ‚J:ÝEÕ,·¾e‰Åëòï{@$u
ÖÁ9!÷ÿ/u‘‘|N«mQž¯ÃM”6…3W9¯EÂ™´V§RÞFlinear-gradient(#fdeeb3, #fde38a, #fdefbb);
        }

        .jqx-button-demoTheme:active {
            border-color: #c2963d;
            background: #fff37f;
            background: linear-gradient(#ffe575, #fff37f);
        }

        .jqx-fill-state-hover-demoTheme,
        .jqx-fill-state-pressed-demoTheme {
            border-color: #c2963d;
            background: #fff37f;
            background: linear-gradient(#ffe575, #fff37f);
        }
        #fileItemButton {
            background: transparent;
            border: none;
            color: #fff;
         }

        .icon {
            background: url('../../images/ribbon-icons.png') no-repeat top left;
            width: 16px;
            height: 16px;
            display: inline-block;
            margin-right: 1px;
            vertical-align: middle;
        }
        .icon.closed_door { background-position: 0 0; }
        .icon.change-case-16 { background-position: -26px 0; }
        .icon.ClearFormattingImage { background-position: -52px 0; width: 17px; }
        .icon.close { background-position: -78px 0; }
        .icon.cut { background-position: -104px 0; }
        .icon.cut_red { background-position: -130px 0; }
        .icon.cut-icon-16 { background-position: -156px 0; }
        .icon.CutImage { background-position: -182px 0; }
        .icon.folder { background-position: -208px 0; }
        .icon.FontDialogImage { background-position: -234px 0; }
        .icon.fontsizedecrease16 { background-position: -260px 0; }
        .icon.fontsizeincrease16 { background-position: -286px 0; }
        .icon.FormatPainterImage { background-position: -312px 0; }
        .icon.page_copy { background-position: -338px 0; }
        .icon.page_paste { background-position: -364px 0; }
        .icon.page_white_paste { background-position: -390px 0; }
        .icon.paintcan { background-position: -416px 0; }
        .icon.paste_plain { background-position: -442px 0; }
        .icon.paste_word { background-position: -468px 0; }
        .icon.paste-24 { background-position: -494px 0; width: 24px; height: 24px; }
        .icon.paste-48 { background-position: -528px 0; width: 48px; height: 48px; }
        .icon.PasteImage { background-position: -586px 0; }
        .icon.PasteImageLarge { background-position: -612px 0; width: 32px; height: 32px; }
        .icon.PasteSpecialImage { background-position: -654px 0; }
        .icon.pencil { background-position: -680px 0; }
        .icon.SaveImage { background-position: -706px 0; }
        .icon.SaveSelectionImage { background-position: -732px 0; }
        .icon.ShowParagraphMarksImage { background-position: -758px 0; }
        .icon.SortHS { background-position: -784px 0; }
        .icon.spellcheck { background-position: -810px 0; }
        .icon.text_align_center { background-position: -836px 0; }
        .icon.text_align_justify { background-position: -862px 0; }
        .icon.text_align_left { background-position: -888px 0; }
        .icon.text_align_right { background-position: -914px 0; }
        .icon.text_bold { background-position: -940px 0; }
        .icon.text_indent { background-position: -966px 0; }
        .icon.text_indent_remove { background-position: -992px 0; }
        .icon.text_italic { background-position: -1018px 0; }
        .icon.text_linespacing { background-position: -1044px 0; }
        .icon.text_list_bullets { background-position: -1070px 0; }
        .icon.text_list_numbers { background-position: -1096px 0; }
        .icon.text_strikethrough { background-position: -1122px 0; }
        .icon.text_subscript { background-position: -1148px 0; }
        .icon.text_superscript { background-position: -1174px 0; }
        .icon.text_underline { background-position: -1200px 0; }

    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#fileItemButton').jqxDropDownButton({ arrowSize: 0, height: 26, dropDownWidth: 120, width: 50, theme: 'demoTheme' });
            $('#fileItemButton').jqxDropDownButton('setContent', '<span style="position: relative; line-height: 26px; margin-left:10px;">File</span>');
            $("#save, #saveAs, #open, #close, #exit").jqxButton({ theme: 'demoTheme' });

            // jqxRibbon code
            $("#jqxRibbon").jqxRibbon({
                width: 802,
                height: 131,
                animationType: "none",
                selectionMode: "click",
                position: "top",
                theme: "demoTheme",
                mode: "default",
                selectedIndex: 1,
                initContent: function (item) {
                    switch (item) {
                        case 0:

                            break;
                        case 1:
                            $("#subscript, #superscript, #bold, #italic, #underline, #strikethrough").jqxToggleButton({ theme: 'demoTheme' });
                            $("#shrinkFont, #copyButton, #cutButton, #growFont, #formatPainter, #clearFormatting, #alignLeft, #alignCenter, #alignRight, #alignJustify, #bulletList, #numberedList, #decreaseIndent, #increaseIndent, #Sort, #lineSpacing, #showHide").jqxButton({ theme: 'demoTheme' });
                            $("#cutButton").jqxTooltip({ position: "mouse", content: "Cut (Ctrl + X)" });
                            $("#copyButton").jqxTooltip({ position: "mouse", content: "Copy (Ctrl + C)" });
                            $("#subscript").jqxTooltip({ position: "mouse", content: "Subscript" });
                            $("#superscript").jqxTooltip({ position: "mouse", content: "Superscript" });
                            $("#bold").jqxTooltip({ position: "mouse", content: "Bold (Ctrl + B)" });
                            $("#italic").jqxTooltip({ position: "mouse", content: "Italic (Ctrl + I)" });
                            $("#underline").jqxTooltip({ position: "mouse", content: "Underline (Ctrl + U)" });
                            $("#strikethrough").jqxTooltip({ position: "mouse", content: "Strikethrough" });
                            $("#alignLeft").jqxTooltip({ position: "mouse", content: "Align Text Left (Ctrl + L)" });
                            $("#alignCenter").jqxTooltip({ position: "mouse", content: "Center (Ctrl + E)" });
                            $("#alignRight").jqxTooltip({ position: "mouse", content: "Align Text Right (Ctrl + R)" });
                            $("#alignJustify").jqxTooltip({ position: "mouse", content: "Justify (Ctrl + J)" });
                            $("#bulletList").jqxTooltip({ position: "mouse", content: "Bulleted List" });
                            $("#numberedList").jqxTooltip({ position: "mouse", content: "Numbered List" });
                            $("#decreaseIndent").jqxTooltip({ position: "mouse", content: "Decrease Indent" });
                            $("#increaseIndent").jqxTooltip({ position: "mouse", content: "Increase Indent" });
                            $("#Sort").jqxTooltip({ position: "mouse", content: "Sort Direction" });
                            $("#lineSpacing").jqxTooltip({ position: "mouse", content: "Line and Paragraph Spacing" });
                            $("#showHide").jqxTooltip({ position: "mouse", content: "Show/Hide special characters" });
                            $("#bucketColor").jqxTooltip({ position: "mouse", content: "Fill style", theme: 'demoTheme' });
                            $("#bucketColor").jqxDropDownButton({
                                width: 42,
                                height: 19,
                                theme: "demoTheme",
                                dropDownWidth: 180,
                                initContent: function () {
                                    $("#bucketColorPicker").jqxColorPicker({
                                        color: "000000",
                                        colorMode: 'hue',
                                        width: 180,
                                        theme: 'demoTheme',
                                        height: 180
                                    }).on('colorchange', function (event) {
                                        $("#bucketColorPreview").css('background', '#' + event.args.color.hex);
                                    });
                                }
                            }).jqxDropDownButton('setContent', '<span style="position:relative; display:inline-block; top: 2px"><div class="icon paintcan"></div><span id="bucketColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#000"></span></span>');



                            $("#font").jqxDropDownList({
                                source: [
                                    "<span style='font-family: Courier New;'>Courier New</span>",
                                    "<span style='font-family: Times New Roman;'>Times New Roman</span>",
                                    "<span style='font-family: Arial;'>Arial</span>"
                                ],
                                width: 120,
                                height: 21,
                                theme: 'demoTheme',
                                autoDropDownHeight: true,
                                selectedIndex: 1
                            });

                            $("#fontSize").jqxDropDownList({
                                source: [8, 9, 10, 11, 12, 14, 18, 20, 22, 24],
                                theme: 'demoTheme',
                                renderer: function (index, label, value) {
                                    return '<span style="font-size:' + value + 'px;">' + value + '</span>';
                                },
                                width: 70, height: 21, autoDropDownHeight: true, selectedIndex: 2
                            });
                            $("#subscript").on('click', function () {
                                if ($('#superscript').jqxToggleButton('toggled')) {
                                    $('#superscript').jqxToggleButton('toggled', false)
                                }
                            });
                            $("#superscript").on('click', function () {
                                if ($('#subscript').jqxToggleButton('toggled')) {
                                    $('#subscript').jqxToggleButton('toggled', false)
                                }
                            });
                            $("#changeCase").jqxDropDownList({
                                source: ['Sentence Case', 'lowercase', 'UPPERCASE', 'Capitalize Each Word'],
                                theme: 'demoTheme',
                                selectionRenderer: function (object, index, label) {
                                    return '<div class="icon change-case-16" style="top:3px;  position:relative"></div>';
                                },
                                dropDownWidth: 150,
                                autoDropDownHeight: true, selectedIndex: 0, width: 40

                            });

                            $("#fontColor").jqxDropDownButton({
                                width: 100,
                                theme: 'demoTheme',
                                dropDownWidth: 180,
                                height: 21, initContent: function () {
                                    $("#fontColorPicker").jqxColorPicker({
                                        color: "000000",
                                        colorMode: 'hue',
                                        theme: 'demoTheme',
                                        width: 180,
                                        height: 180
                                    }).on('colorchange', function (event) {
                                        $("#fontColorPreview").css('background', '#' + event.args.color.hex);
                                    });
                                }
                            }).jqxDropDownButton('setContent', '<span style="position:relative; display:inline; top: 2px"><div class="icon FontDialogImage"></div><span id="fontColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#000"></span></span><span style="position:relative; display: inline; top:3px">Font Color</span>');

                            $("#highlightColor").jqxDropDownButton({
                                width: 130,
                                dropDownWidth: 180,
                                theme: 'demoTheme',
                                height: 21,
                                initContent: function () {
                                    $("#highlightColorPicker").jqxColorPicker({
                                        color: "FF0000",
                                        theme: 'demoTheme',
                                        colorMode: 'hue',
                                        width: 180,
                                        height: 180
                                    }).on('colorchange', function (event) {
                                        $("#highlightColorPreview").css('background', '#' + event.args.color.hex);
                                    });
                                }
                            }).jqxDropDownButton('setContent', '<span style="position:relative; display:inline; top: 2px"><div class="icon pencil"></div><span id="highlightColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#F00"></span></span><span style="position:relative; display: inline; top:3px">Highlight Color</span>');


                            var pasteData = [
                                { label: 'Paste', imageClass: 'icon page_paste' },
                                { label: 'Paste Special', imageClass: 'icon paste_plain' },
                                { label: 'Paste text', imageClass: 'icon paste_word' },
                                { label: 'Paste link', imageClass: 'icon PasteImage' }
                            ];
                            $('#pasteButton').jqxButton({
                                width: 35,
                                theme: 'demoTheme',
                                height: 56
                            }).on('click', function (event) {
                                var text = $(this).find('.pasteText').html();
                                console.log(text + ' clicked');
                            }).on('mousedown', function (event) {
                                event.preventDefault();
                            });
                            $("#pasteDropDown").jqxDropDownList({
                                source: pasteData,
                                width: 22,
                                height: 10,
                                theme: 'demoTheme',
                                animationType: 'none',
                                dropDownWidth: '110px',
                                autoDropDownHeight: true,
                                renderer: function (index, label, value) {
                                    var imgUrl = pasteData[index].imgUrl;
                                    var labelEl = '<span style="font-size: 10px">' + label + '</span>';
                                    var icon = '<span class="' + pasteData[index].imageClass + '" style=""></span>';
                                    return '<span>' + icon + labelEl + '</span>';
                                },
                                selectionRenderer: function (object, index, label) {
                                    return "";
                                },
                                selectedIndex: 0
                            }).on('select', function (event) {
                                var index = event.args.index;
                                var icon = '<span class="' + pasteData[index].imageClass + '" style="zoom: 1.5"></span>';
                                $('#pasteButton').html(icon + '<span class="pasteText">' + pasteData[index].label + '</span>');
                                $('#pasteButton').jqxButton('render');
                            });
                            break;
                        case 2:
                            $("#help, #about, #update").jqxButton({ width: 26, height: 26, theme: 'demoTheme' });
                            break;
                    }
                }
            });

            $('#jqxRibbon').jqxRibbon('disableAt', 0);

            // jqxGrid code
            // renderer for grid cells.
            var numberrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
            };
            // create Grid datafields and columns arrays.
            var datafields = [];
            var columns = [];
            for (var i = 0; i < 26; i++) {
                var text = String.fromCharCode(65 + i);
                if (i == 0) {
                    var cssclass = 'jqx-widget-header';
                    if (theme != '') cssclass += ' jqx-widget-header-' + theme;
                    columns[columns.length] = {
                        pinned: true,
                        exportable: false,
                        text: "",
                        columntype: 'number',
                        cellclassname: cssclass,
                        cellsrenderer: numberrenderer
                    };
                }
                datafields[datafields.length] = { name: text };
                columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
            }
            var source =
            {
                unboundmode: true,
                totalrecords: 100,
                datafields: datafields,
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
                    {
                        width: 800,
                        source: dataAdapter,
                        editable: true,
                        columnsresize: true,
                        selectionmode: 'multiplecellsadvanced',
                        columns: columns
                    });
        });
    </script>
</head>
<body>
<div id="jqxRibbon">
    <ul>
        <li id="fileItem">
            <div id="fileItemButton">
                <div style="height:103px;">
                <ul style="list-style-type: none; margin:0px; padding: 3px;">
                <li>
                    <div id="save" class="button">
                        <div class='icon SaveImage'></div> Save
                    </div>
                </li>
                <li>
                    <div id="saveAs" class="button">
                        <div class='icon SaveSelectionImage'></div> Save As
                    </div>
                </li>
                <li>
                    <div id="open" class="button">
                        <div class='icon folder'></div> Open
                    </div>
                </li>
                <li>
                    <div id="close" class="button">
                        <div class='icon close'></div> Close
                    </div>
                </li>

            </ul>
</div>
            </div>
        </li>
        <li>Home</li>
        <li>Help</li>
    </ul>
    <div>
        <div style="overflow:hidden;">

        </div>
        <div style="overflow:hidden;">
            <table class="buttonHolderTable" id="clipBoardTable">
                <tr>
                    <td rowspan="3" style="text-align: center; vertical-align: initial; height: 70px; font-size:10px">
                        <div id="paste" style="width: 50px;">
                            <div id="pasteButton"><span class="icon page_paste" style="zoom:1.5"></span><span class="pasteText">Paste</span>
                            </div>
                            <div id="pasteDropDown" style="margin-top: -3px; margin-left:10px;"></div>
                        </div>
                    </td>
                    <td class="firstrow" rowspan="1">
                        <div id="cutButton"><div class='icon cut_red'></div>
                            <span class="cutText">Cut</span></div>
                    </td>
                </tr>
                <tr>
                    <td class="secondrow">
                        <div id="copyButton"><div class='icon page_copy'></div>
                            <span class="copyText">Copy</span></div>
                    </td>
                </tr>
                <tr>
                    <td class="thirdrow">
                        <div id="formatPainter"><div class='icon FormatPainterImage'></div>
                            <span class="formatPainter">Format Painter</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="font-size: 9px; text-align: center; top: -3px; position: relative;">
                        Clipboard
                    </td>
                </tr>
            </table>
            <div class="sectionSeparator">
            </div>
            <table class="buttonHolderTable" style="float: left;">
                <tr>
                    <td colspan="4">
                        <div id="font">
                        </div>
                    </td>
                    <td>
                        <div id="fontSize">
                        </div>
                    </td>
                    <td>
                        <div id="growFont"><div class='icon fontsizeincrease16'></div></div>
                    </td>
                    <td>
                        <div id="shrinkFont"><div class='icon fontsizedecrease16'></div></div>
                    </td>
                    <td>
                        <div id="clearFormatting"><div class='icon ClearFormattingImage'></div></div>
                    </td>
                    <td>
                        <div id="changeCase"></div>
                    </td>
                </tr>
                <tr class="secondrow">
                    <td colspan="8">
                        <div id="fontColor">
                            <div style="padding: 3px;">
                                <div id="fontColorPicker">
                                </div>
                            </div>
                        </div>
                        <div class="separator"></div>
                        <div id="highlightColor">
                            <div style="padding: 3px;">
                                <div id="highlightColorPicker">
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="thirdrow">
                    <td colspan="8">
                        <div id="superscript">
                            <div class='icon text_superscript'></div>
                        </div>
                        <div id="subscript">
                            <div class='icon text_subscript'></div>
                        </div>
                        <div class="separator" style="top: 3px;"></div>
                        <div id="bold">
                            <div class='icon text_bold'></div>
                        </div>
                        <div id="italic">
                            <div class='icon text_italic'></div>
                        </div>
                        <div id="underline">
                            <div class='icon text_underline'></div>
                        </div>
                        <div id="strikethrough">
                            <div class='icon text_strikethrough'></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="9" style="font-size: 9px; text-align: center;">
                        Font
                    </td>
                </tr>
            </table>
            <div class="sectionSeparator">
            </div>
            <table class="buttonHolderTable" style="float: left;">
                <tr class="firstrow">
                    <td colspan="8">
                        <div id="bulletList">
                            <div class='icon text_list_bullets'></div>
                        </div>
                        <div id="numberedList">
                            <div class='icon text_list_numbers'></div>
                        </div>
                        <div id="decreaseIndent">
                            <div class='icon text_indent'></div>
                        </div>
                        <div id="increaseIndent">
                            <div class='icon text_indent_remove'></div>
                        </div>
                        <div id="Sort">
                            <div class='icon SortHS'></div>
                        </div>
                        <div id="bucketColor" style="vertical-align: top;">
                            <div style="padding: 3px;">
                                <div id="bucketColorPicker">
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="secondrow">
                    <td colspan="8">
                        <div id="alignLeft">
                            <div class='icon text_align_left'></div>
                        </div>
                        <div id="alignCenter">
                            <div class='icon text_align_center'></div>
                        </div>
                        <div id="alignRight">
                            <div class='icon text_align_right'></div>
                        </div>
                        <div id="alignJustify">
                            <div class='icon text_align_justify'></div>
                        </div>
                        <div class="separator" style="top:5px; height: 15px;"></div>
                        <div id="lineSpacing">
                            <div class='icon text_linespacing'></div>
                        </div>
                        <div id="showHide">
                            <div class='icon ShowParagraphMarksImage'></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="height: 43px; text-align: center; vertical-align: bottom; font-size:9px;">
                        Alignment
                    </td>
                </tr>
            </table>
            <div class="sectionSeparator">
            </div>
        </div>
        <div style="overflow:hidden;">
            <table class="buttonHolderTable" style="height: 100%;">
                <tr>
                    <td class="bigTd">
                        <div id="help" class="button left">
                            <img src="../../images/help-26.png"/>
                        </div>
                        Help
                    </td>
                    <td class="bigTd">
                        <div id="about" class="button left">
                            <img src="../../images/about-26.png"/>
                        </div>
                        About
                    </td>
                    <td class="bigTd">
                        <div id="update" class="button left">
                            <img src="../../images/downloading_updates-26.png"/>
                        </div>
                        Update
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="jqxgrid">
</div>
</body>
</html>