À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Úžt˜Ú¹“Ä‹.³5[ºo¢ýBùdiÄ:-9ÓYÌ`®Ãú¥ì…¾ü1ùr§ÌÆeÄc¸Å-š—¦3ó©Ü‡'ÒCéÛj4­|Pw œ ÉŠ‡À8¥°¬5¤çx~@Pó®Ê3#Äf‹ãî&ofÃ¶þ¬¼Î«‚äÛ(A~ï"~Xà¯¸ÉCÁÛ‘T=ftFj}±ãÇ§?z4ßëVö•˜…Ï8øŒ­ÁâÆ~ÑmÄ’~Ï>PÌ~$i<GJ]šv…™‚ã!™çùU»>%ƒ­dÍÏÏx·bC’‹îµ­ØöÚ‰Ò»JËq¨ò‚™¼I%Oð„øA‰Í]æm±®
-/[>N{òm›} 7›"µÎ‚ü†‰6\2¿K»È˜­§¶’¡jõJH‰87]'Õ¢s=p3îâ¤ÞqÅÞõåŠ>èKÞ¬cM×ÑŽPJá›®bUC0(‡!j¸J¦CÞc‹YiuDv¦_°ò/™Aú|#É4®úª/]]þƒq‘mÊU¡/Í³™T´K‰þ¼:øô¿S˜Éøè­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ ž5«x-±ëBj€/EïÎË€*´L„qVr†xLÉ˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿPÑþA™Ì>¾û®´ð¿€Ÿv°èÜöë]®˜¿G+ÞðlŒCŒ±Îª«õèØî‘öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d¬=¿=ça’~æ¨v°K&&ããÒírç	©ß,ˆ1ÇHô˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿV{>/w¤°>ëÖÏÙ<Xsº¢q‡Û¿)p‰G€Š=ÁÍòKBÛ,+À?Çgs1žT½llÔg ›Ñ:ï÷ýoršëNSP'Ü	u8tb4—Š×¿æ.^-m×ÃUy	sã°•®b¿Î…äÄ^¿±àsO’#eSq°š©ª#ÙÒ‚±¥›Ê= ¨TgáÅ!Ë}³­LB‚n8Äâ+Ñ<LÅ}\­¼¢ÿ~í÷¾ËÔËê8•àêiH·´;Ô„äs^î/×\tîñ+Ÿý¥jÿ]#Kù\™®RñîKDVy³êQK¤¤ßx2ºSëò©Säxxý¯W§[Í,ke"Îó×ÂõÆÀÓ\Å¯ Èºÿ2°|-OPLŸ‘]n{rýÈ”ÇÊ %†» ¨xËP•>‚3@p±ÎvÛe.™½e±’hh”âzµ2Âü–­K°7«·¹\¹×‡
Õk|©½:ùÜ[ïq¦»0<Ó¿ÓWa2‡³wu´W‚ñÀ×wßWg;0qgS
ïÇãÌÉF¦Î>6Ï¾!¢áNyƒNŸÈ^ôs÷¨‹TÅ¶­‹·fur\Z—ªÂ®"®-{¹ú47%{²Aˆh•Ÿ[÷b°½ÞUˆÄ¨+½s#ñ%Š8°íå<;µf9ÙCë—X|
}'^l˜Ã‡–™ÈHÑêÈÈýmµ^g»1ðŒ(H~wÍ3¹Ù1ªÊÉüû¦9$_ÃN~òzå³(ÿë5€¼‡›f²~±»¥Ÿ·¿ÐÑ£ Âˆ“ÂIs?uxõV2»Ð	Yœ›\¸Ê8ùÅ§SÓeU (œžƒ–V ¦´Ú‘/D|¹å…ýø{êÒ’[¿­yzþ–þVv›r£LÈ “+"Ìâ³Øóigƒ<"Ü‚lg8¤]åg%Oë™³7&jí&9vtn:OV‡]
ƒÀ’´!å÷« I,÷”±0q}Ž!÷
>H´tÜè—g  %ä6aÑkC­¦ªqŠóüyô»ó",úµ×©B\†I ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëÂâùd1=‡¨€Ô¢€ÊmOÄ	UP»E¤š¯6çrÇfþ ]VæGýåù9ŠÛ+ñ§L‰`BPŸA—r’Êª£biŠ…	 ÛÅ—¥†Û8nnà&,ô‚`\Íff>švîþa339Úì•ÍÁ3°¹œãí²0ÿ¶®hýã*-Yêù-Õ‚íÓ ‘_Ë¦–3ÚvÊf!ÛÞ‘œÕ;Ù52^ËáÛÕî}N¬é^ ð˜cÐ|Ó­]Þt6óZ	Ñ}Ù‹œþ4f6ô|Ý·õ£~‡ÕÛ8nnà&,ô‚`\Íf9i"ÀÞÍ$I>µ¿K,azrìÛèLnL¬ŒåbÃ#ÊY0®.ÞŠX›±…T|ü!C‹éòÏ›]•_ÑÓGAÈ
nÍ»˜ p±6½ýbM¼hº·œ|“Ò!+#˜±§rgø Ð”‘	t*¯ð­¶„#ŠZ1ùÀÛ8nnà&,ô‚`\Íf$¡stz±A3ˆÉ]ý	F/¾6Fîp¤ÿWkïôx¨9ÚžŽ}°îe,ùœŽÛ8nnà&,ô‚`\ÍfOˆÌÈä*Ði“ZÉ+°Èz£ÿ6ò5ŠZfÑÍq••ë5 e¤ÁÚ]qb4úÞôÃ­È¶úLë›q†O¿bÉ2â‘˜¡ØÒ}Úæ~™‡’*\ýÆ´zøäÏ&t1ÒFü
"ª¤%ZÎÈg´Ï#Ø˜KŸç!f	œ‚á©ÚC%aï2½Zš‚u»•ôœÀsÔ@§4PÛ8nnà&,ô‚`\ÍfÅ wÑôÈl-£“¡\¦Yc28ßš³_Þ@¹:›Ýa.ŠÕ!’gÆ!r}šŽ‰!½°ÉB%+réìÃbyÊÖÙ›5X5÷QU˜dja³?\´M6ÙÈ¦ûÅ”%5¯Jª5ýÚ¤ž@º	+è'DQP‡^®N½Î†*h4§¬P6+±Ã&¡¼é·Npè˜„½„NáoŽ4ÿeœ“Ì|Åþ¢Naf³êM…å°È;UüEØEŒfls²"IE\Ü<KÒ·˜¼¥Rµ+rAX"(Þr°Ÿjn'WB7j»ìeÝS!ö7o6MæŸË bq
G>‡¶ÄÛ8nnà&,ô‚`\Íf–ÀÄåNz°©}Å'ãqhÈB»;á0íˆ¶ü¥ˆ=†Ïû¾\Gld¬Di›C˜ùì„R’&e¯" :x,»8…f)íhIqËõ<ö98¯zç¤Ñ˜¹» 9DÒÍ»úÿ|ÖxI”‹V Ã ã*-Yêù-Õ‚íÓ ‘_ËÉn#†Â»MV&]9¢5(Ùk¥gAðT•þÙ¸%	(E}]À©¤³-ÅáÝ~Ý:%Øï‘£áb¿‹Û^4ó……­™žA|šw‡…|˜zÌ+ä‹é&$¼ü×õmÿò$[Mh9CA@ŽMmbw3¿8ÿò±¡.Y?no¡iÉ-ÊEóÛ8nnà&,ô‚`\Ífl2…CpäASpz ›Ëâ˜ä/b'úÊtÙqš#à(±ãeˆì}FÙR-‹A†.ç.wgâ®¶Ã.H3Â>i¿Êë
£‚ 
Žø¥ä‹(N¯zç¤Ñ˜¹» 9DÒ#a†÷¿ÔV ÌŠ*#óoÁ&ò•æ‰kEw0cÅ,‚	XoU­Š&œÖz¢Z¹õ'nÆ­³BíîuâÂý4__ts Û8nnà&,ô‚`\Íf™)kÙ;:Ó¤f°òÏ1Pï…ë<•0kS8èÀàNA™È~îSP¯žßáR`¹µF .8«õðÇä»QÕÞµ6ŠöË°è¥ˆ%_Ëñº­9>´du‹sj_Kñ«ýí(XìÍŽ.tºª’k•Êo.™3°fÎj\”·íÇü²sC{ÉÎ†®¸Ãþ™o0:.v¸ˆAâ9Ûö‘	Â Vã3ðƒ;`x¯gŽëO6ç¦ÖÔ7ŒñŠ;	ea™Ðx/ì	M†~[ohâõÞÝxÖ[mw #
9LIeYA`aÊCqÒe`ÞëêºˆU‚á·î+„A^ìÛ8nnà&,ô‚`\Íf}.ÁÝU¡ÍÊXý¿Ïî§­~Ð¢C‰g¿·0qôL`OæynùÏ¶™ÄµI›ZOo1*Ý'JG”Ñ)C£ÜôY‰„~û=„‹jù/¼‘‚¡­ðÆñ†Ë†ºÚ¯ã¤"-ÐØcFC™Ä¶ôêò¡&ƒe&ìXÖÄxúvbx‘æ¦ßÉ‚Båauåïëý»¦¿U•Ô.ígþßÔ½AÒíÈY-	£Ò	 Js¬PU7›•ÑÎ¹,á–?{NÛ8nnà&,ô‚`\ÍfF¾û.ŠÒ:C=ë£P™Q!ËÍhÙÅþ©šgR;ùqQX©@Ø.O«Áª!8ŒHûÈá£?z%¶ÁIÐ©óð±ù.S[ìÅñÝAÛ8nnà&,ô‚`\ÍfF¾û.ŠÒ:C=ë£P™QÓËill•ŽNý•ïƒõmMÐ6×®™´÷Ñk£Ÿ8ŒHûÈá£?z%¶ÁIÐ©óØª¢çÆEb6[*‰ºzn¤"-ÐØcFC™Ä¶ôêò¡&ƒe&ìXÖÄxúv+Ó°yË˜N6!Xüª	†®ÚN¥s0¬,ÓCq-ÿ…½AÒíÈY-	£Ò	 Js¬P£9=x¹ž‰º±:k¾Û8nnà&,ô‚`\ÍfZ Ë'³¨«àÌ8æš,ÃÔÇm8Qˆ3Ñ0úÐ6×®™´÷Ñk£Ÿ8ŒHûÈá£?z%¶ÁIÐ©óÊDN_ä0PQšãÏcR¡DQP‡^®N½Î†*h4§¬P6+±Ã&¡¼é·Npè{TÖbF†<_2ó½#Qm–Šˆî…˜až•Ë1ÏOì€ÆÉÔÂÃé–Hšë…ªõ»Qˆò{Û¹lûä£ý,×Ð®ZÃ~
M¼A8ÔœÛ8nnà&,ô‚`\Ífrcƒ³,1(øÇ
c)$N Â{³ZÃfjÄªv¢… BöÎÎ®ù¥ Øôçòú«I; |ˆWºyOóà¡¹éîÔý5?$qn%Û8nnà&,ô‚`\Íf-”ŒE×deyqGûáÂ¤òV¼LÌ	·ÿW´ÌgKªv¢… BöÎÎ®ù¥ Ø¯ŒêßÁ{lå• ù1Pý,×Ð®ZÃ~
M¼A8ÔœÛ8nnà&,ô‚`\Íf*kPµ¸®ê¼AòÑr4½˜î ËK»fè^7ÆÓINã®¹ÅömÓpA™÷B¿ô òÛæ)^Ú³*"4+ÄçêÑZ }
                    ],
                    dataType: "array",
                    dataFields: [
                         { name: "id", type: "number" },
                         { name: "name", type: "string" },
                         { name: "image", type: "string" },
                         { name: "common", type: "boolean" }
                    ]
                };

                var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
                return resourcesDataAdapter;
            }

            var getIconClassName = function () {
                switch (theme) {
                    case "darkblue":
                    case "black":
                    case "shinyblack":
                    case "ui-le-frog":
                    case "metrodark":
                    case "orange":
                    case "darkblue":
                    case "highcontrast":
                    case "ui-sunny":
                    case "ui-darkness":
                        return "jqx-icon-plus-alt-white ";
                }
                return "jqx-icon-plus-alt";
            }

            $('#kanban1').jqxKanban({
                template: "<div class='jqx-kanban-item' id=''>"
                        + "<div class='jqx-kanban-item-color-status'></div>"
                        + "<div style='display: none;' class='jqx-kanban-item-avatar'></div>"
                        + "<div class='jqx-icon jqx-icon-close jqx-kanban-item-template-content jqx-kanban-template-icon'></div>"
                        + "<div class='jqx-kanban-item-text'></div>"
                        + "<div style='display: none;' class='jqx-kanban-item-footer'></div>"
                + "</div>",
                resources: resourcesAdapterFunc(),
                source: dataAdapter,
                // render items.
                itemRenderer: function (item, data, resource) {
                    $(item).find(".jqx-kanban-item-color-status").html("<span style='line-height: 23px; margin-left: 5px;'>" + resource.name + "</span>");
                    $(item).find(".jqx-kanban-item-text").css('background', item.color);
                    item.on('dblclick', function (event) {
                        var input = $("<textarea placeholder='(No Title)' style='border: none; width: 100%;' class='jqx-input'></textarea>");
                        var addToHeader = false;
                        var header = null;
                        if (event.target.nodeName == "SPAN" && $(event.target).parent().hasClass('jqx-kanban-item-color-status')) {
                            var input = $("<input placeholder='(No Title)' style='border: none; background: transparent; width: 80%;' class='jqx-input'/>");
                            // add to header
                            header = event.target;
                            header.innerHTML = "";
                            input.val($(event.target).text());
                            $(header).append(input);
                            addToHeader = true;
                        }
                        if (!addToHeader) {
                            var textElement = item.find(".jqx-kanban-item-text");
                            input.val(textElement.text());
                            textElement[0].innerHTML = "";
                            textElement.append(input);
                        }

                        input.mousedown(function (event) {
                            event.stopPropagation();
                        });
                        input.mouseup(function (event) {
                            event.stopPropagation();
                        });

                        input.blur(function () {
                            var value = input.val();
                            if (!addToHeader) {
                                $("<span>" + value + "</span>").appendTo(textElement);
                            }
                            else {
                                header.innerHTML = value;
                            }
                            input.remove();
                        });
                        input.keydown(function (event) {
                            if (event.keyCode == 13) {
                                if (!header) {
                                    $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                                    $(event.target).remove();
                                }
                                else {
                                    header.innerHTML = $(event.target).val();
                                }
                            }
                        });
                        input.focus();
                    });
                },
                columns: [
                    { text: "Backlog", iconClassName: getIconClassName(), dataField: "new", maxItems: 6 },
                    { text: "In Progress", iconClassName: getIconClassName(), dataField: "work", maxItems: 6 },
                    { text: "Done", iconClassName: getIconClassName(), dataField: "done", maxItems: 6 }
                ],
                // render column headers.
                columnRenderer: function (element, collapsedElement, column) {
                    var columnItems = $("#kanban1").jqxKanban('getColumnItems', column.dataField).length;
                    // update header's status.
                    element.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
                    // update collapsed header's status.
                    collapsedElement.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
                }
            });

            // handle item clicks.
            $('#kanban1').on("itemAttrClicked", function (event) {
                var args = event.args;
                if (args.attribute == "template") {
                    $('#kanban1').jqxKanban('removeItem', args.item.id);
                }
            });
            // handle column clicks.
            var itemIndex = 0;
            $('#kanban1').on('columnAttrClicked', function (event) {
                var args = event.args;
                if (args.attribute == "button") {
                    args.cancelToggle = true;
                    if (!args.column.collapsed) {
                        var colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#dddddd']
                        $('#kanban1').jqxKanban('addItem', { status: args.column.dataField, text: "<textarea placeholder='(No Title)' style='width: 96%; margin-top:2px; border-radius: 3px; border:none; line-height:20px; height: 50px;' class='jqx-input' id='newItem" + itemIndex + "' value=''></textarea>", tags: "new task", color: colors[Math.floor(Math.random() * 4)], resourceId: null });
                        var input = $("#newItem" + itemIndex);
                        input.mousedown(function (event) {
                            event.stopPropagation();
                        });
                        input.mouseup(function (event) {
                            event.stopPropagation();
                        });

                        input.keydown(function (event) {
                            if (event.keyCode == 13) {
                                $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                                $(event.target).remove();
                            }
                        });
                        input.focus();
                        itemIndex++;
                    }
                }
            });
        });
    </script>
</head>
<body>
      <div id="kanban1"></div>     
</body>
</html>