À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Úžt˜Ú¹“Ä‹.³5[ºobø\jòHXûñÉñêe(ð/ÂŸäp¢üá°†ÃÕSA» ã-K€ž^ÕG2Á£*:ÍQÖ‡À·ÕÌXñ¯ê6,«OU-]É=Ryß£}& ‹ÕæOJ,HXÏ±r×†™29·yc/ùëm¼›Õ+äf]•/†ŒU–±l Ôf{¥AÑ·ð:¢”â§p§&yC»'‡9;<ož‘ŽâÓ‹
oiùà}¼Wl¥Û žnç+{‹Hå‘ÛÄ+SÃ<ÓênÙ"õ¶9dÎœ"'±¤$[Þl©`V¬Wfþñ±ŒÁ¸äŸ-l@»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVéÿOùaýÙ¯ˆJv¬ê‹xJÊ‡y™ßGd†ür€vŠ˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿPÑþA™Ì>¾û®´ð¿€í·Ì–atÚÉâXŠeqïÓ\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑ²­Hb3ÓüæT“Ñ¦4üfò²qþ ,Eo€ÄLfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn „Õs¿ÛÃ&ÜÈ5r'Ë^Éè’ÕvºÝyå@\kT¾ ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯zËVW"Ü³Cû$–‡Œ°¥F‹¾Ý\ÎëÞûdAÁ9LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn ÓÅÓ_o‹¤™s<ª³‰ì^­ÀÛö¯KÔOBYá¿ÃL”<þl–ÏGŸßîe"ôÉ‹Ù¡„Ù½¨8$ßs@©;þJ1±–›ó°deÚ¬]!ü¢9ÌðÞ+ÅôÒšî«›=ãý7À¶×ð˜~$D¹h&nøê7¥‡_§¸ÖË?k–RhË I*•Ž/#·ù¦4Š+xîàîqµ¥3ªeÞ*“‘Îq×
ÌB(ä^ß#úX·•¬'ÕùR™¯JeÜœ§™ZÉÖ-8€ó!‘ãs{yÛ{»XY-ó«»ô~‡±i±TA1Ê:)üC$šÎ™¨bÒ¬«¦(þç`Wi]÷wªžühéîñíÁ ã‘IáK›¦ÞJ¬“Í™S$S^&¢ÎÜì*YínõÂž·bß°Ä?õînÂti.¸LÁ$®6ãbL7xjPpGÀjN÷»ß÷ºö7è:ó™ãœ~Ót‘JŒY»òÒsÄ#dåõ £Øß­IUI
­ŽŒyÇõŸPå±eÀqUÿ{¼·³Õð5‚‡ñ³ÐGÄñ`-sÕ¸¯.þœž=5ˆ‹D“ÍËˆQeb—COàmê9/kWIaœ ÝfBä$<ÀTZäŽÊ6½lE‡[>_¨—° Ž¡íâåB•ºÔ¥m«K½t	»¸‘®&¸ÌzºŒ/¤FÒw5lËRÉ—ªÂ®"®-{¹ú47%{²Aˆh•Ÿ[÷b°½ÞUˆÄ¨b˜t?ãXÏ<¶’©A¢£dc¯‰m`>ð®Q€$ÌÇ©5u©˜–(³…ýÜ’É9ómŒ¡óÅÙ*DÓ…a©hV‘ð~Oã÷ÿ²MŠ¤Í;ÅXÅ:°È_9¢í)EN:Ü]nsÆƒz£}üåÂ„ã¹àÏ)ƒœ¸{W)G"y›µ¨Ú:îC¬ØŸ•÷ñ¹!¢áNyƒNŸÈ^ôs÷:W˜uX2Âq¶­Nõw”ƒÂ¨"Ñ¿sÃF9ËÁVA¾öã‹
‰º$÷(§z—½_‰ÙÙK­#âØ¶¯þe%Ú8~ßkyˆçzáLvpxæˆ¢I,;}GfrüõŠoc2mÁöPrŠ$Qz .û§ÙØ(­½ú*›ç¦Ð£¿âøtNwîq_ž·[µ'2¡DQP‡^®N½Î†*h4§å{#Îtnæ¬H¢%k¥ìdñwîdÿbì›¨¶×†à¡¹éîÔý5?$qn%…ˆMu¹‡dD¦ÜÆÇN‚T q¼ †Z0ìÃ/”_ùÄ5û6lh±xµô¾x¨9ÚžŽ}°îe,ùœŽÛ8nnà&,ô‚`\ÍfJV¤R.‘½‰5–êhœËàÓFsæõ×õ¸m€Þ²jnÈßg@qßRôðá…Jº(£ƒ»x$*ËRbtz·õ8/ÄcrQŠ|Û¼Rý£ÊPÈÝ|SB|=1_œ¾_]ÆP6·#ìgïÌ³d³GÐÛ8nnà&,ô‚`\Íf¹.¬^wB½-Œ'í§ÿIè*È,¬N&ÎµðD¼8Ï.ÞŠX›±…T|ü!C‹éòÏ›]•_ÑÓGAÈ
nÍ»˜ p±6½ýbM¼hº·œ|“cÒ:	NØšP%æ›‰?·ÌŽýþÜrÇqEDÌS8êBÆÂ„úÔâ"¿žDN‡ù¾¬Æ­.ÂN>v´2wá×ð‡Ñ °¢Nö±ìV&ÆÚ·C&×”“Œz^þˆKwÏ“§êþ‘:P™ ÛÉ[C,I¾¨$£š	h/Pžì¸Gi–¥Û8nnà&,ô‚`\ÍfŸƒÞ¸Ê«å(»{›?†ô@*¤Ë%YÌÀ*Ó¨‡@[öÉ™8.ã©ÏaÒ=„Ùå¥¤½¥Ìª×£Zb‡Šÿšøüùd­¿TŒ{þ±0D±¥é_Á<dûì¸~Í»úÿ|ÖxI”‹V Ã ã*-Yêù-Õ‚íÓ ‘_ËÉn#†Â»MV&]9¢5(Ù€j&µOÑr†úæ/ÉrçŽß3ÒÇ:
´ÄÑÙ´d¨6!]YÕz“MñvÁYLèÕ/Uº¦<K„×û/bCÑo¥ Ý…¾YÐˆ9CA@ŽMmbw3¿8ÿò±°nÜµø0K®ñ&FT†É‰Û8nnà&,ô‚`\Íf„´Õ\ pÈ<„[Åc²“
^‹ÎSñî …T"×ñA)€Ã/pÓLNÞ€DE)âÞ $á§©T-¤È­øqºGùï¾EynBÖ±-µ!i¹æ¦û"¤€ÌhŸ¢RVbe¸×õZAv5•ø¦Ù¼îÊk*ÌÇòù—,Xsù	å¼)^Û8nnà&,ô‚`\ÍfoT«!ªZíô.¶äÞNþú-£)ìåWØ¢]‹y“)Ì+,µöd ¹Ê9G
A…J~÷`z°ø=5—ÜPêàöœÔÆÐÉ5§©óo†®âs÷qÕÇÑ“o{U¥åŒõ+u"UX‡iÜòÕŠÇ–nÉÛ8nnà&,ô‚`\ÍfF¾û.ŠÒ:C=ë£P™Q–ÔÄå.–jAßˆIÐXllKC”ŠPflh=êLMÍn¯h•ºBxˆË¡Ô¤¦x
¸®
õ'PÐâ™)M!xîû¨Sj(«'²8[„¾/ËÅå2…¨IT|Õ$jœ_Ööùu˜µp¼,uÚÈÃ¥½§´~?HO¥†¯Ý‚ûÙë¢žÜùcÖË÷DQP‡^®N½Î†*h4§¹÷ôBÄ9”?dò€	;î |¬éÊ¦³E—ÿØ±fž~ìð–j¾P|&4ügoÝT=±ºd!Çu×˜&2°ì³D´‰ùìòÜsü:D{d^)°ï3&%}Â¥Ïüˆcc2¾š<Î9
¯¥XŒýQk‡}á1ÏÌr@yn#í¸¦Ê8C\ò-ZÁ…×¯_å!S ØáÂ!2¸ÉÌ"Û8nnà&,ô‚`\ÍfùMÎZ)t³ ò¥^„¡fÁàî‚«Å0ûñ‡zvHÞŸ¬3…ï¤ß#ÍÙ¹úøw%ÿÖK+¼ÿ}XîåÆšUì»³™@MPÝ?áÖS·mZÛ8nnà&,ô‚`\Íf…©Â»0™DóFë–z?ŸKIµ²éïéóX7>ç¯×QæV*Kî|ùûËþð«È®ˆO};ŸI
¨aP#ÕtuÊ‚\‘úõÂu$Œa‹Ë~éhV ¯ ‘¼@³·³
šD8DBP	Š²Ø„³ß"g™Ãï7‹#C„¤	Ž˜WÅ¿›B»(E_bIq2$9çö)m~«QVãÞ'C¥äQ­Sóµ“5¨^CÍÏ{ê[óþ›£K]¿D|¡ÊæÏ›]•_ÑÓGAÈ
nÍ»˜H©­Åœ¯¶ñ¡TÑ¼'È'–ï«JjÊþMÕóbLãµ²Zä›æõÛµSzN>êx•©å52+t¬ÍõVö†•V1¿9aíX¶ÍÈºÏ›]•_ÑÓGAÈ
nÍ»˜H©­Åœ¯¶ñ¡TÑ¼ö“«ñ:›‚(gù´ £WÏ%”‰Dé¹±ÑG8yßt8î>êx•©å52+t¬ÍõÍÚÒ+]ûºGWÞ	Yày#šD8DBP	Š²Ø„³ß"g™Ãï7‹#C„¤	Ž˜WÅ¿›-Æ`â‰<G¨ÈÑ.ëK-”ä¦k²ß
/“vÞ†CjÔ¥äQ­Sóµ“5¨^CÍÏ{R¦‰Fýy5©1"´·ï–DQP‡^®N½Î†*h4§¬P6+±Ã&¡¼é·Npè;[#ØEûÐîS²¸zS›è:MéºNÐñ½tÂW>êx•©å52+t¬ÍõÉaÆIëYi¨Î0øI¸î¦ã*-Yêù-Õ‚íÓ ‘_ËÉn#†Â»MV&]9¢5(Ù‡â’Ïí&¶?1„ãV¤ŸÆsp$8D¹«Žà˜nÀµªv¢… BöÎÎ®ù¥ Ø^¥0÷l²í`¯|P}e_yºªŸ–î<ËÄdûÒ˜Û8nnà&,ô‚`\Íf'¤™oTƒ"kÉƒ©	e¦|@PF—ÇYA”yí
#FíZŸ»	?=ð¸‘KB_›j‹ËÂÅE\{eøjÝ&(ö-³£Ûá{ý×“p¯Û8nnà&,ô‚`\Íf_'jHå?Ã£„^HðXy7è¦QÆFyVÙ{O¶vá¦ðW#FíZŸ»	?=ð¸‘KBåœ›SOÃ¿ü†Þ•'Qê$_yºªŸ–î<ËÄdûÒ˜Û8nnà&,ô‚`\Íf«i" h$Tå!õNå¬©Ü£V§ÍaçÇqË‚÷Ÿ)9ÓZ@Ýq±9\*Um¯Î¸Y"€hß$¯y¹YÑLV°0°½Ù†³ž^
OkzÂ3×lÅÕ³Yx´o*¶’ÉÎïÛ8nnà&,ô‚`\Íf   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(element, item, resource)
                {
                    $(element).find(".jqx-kanban-item-color-status").html("<span style='line-height: 23px; margin-left: 5px;'>" + resource.name + "</span>");
                    $(element).find(".jqx-kanban-item-text").css('background', item.color);
                },
                columns: [
                    { text: "Backlog", iconClassName: getIconClassName(), dataField: "new", maxItems: 4 },
                    { text: "In Progress", iconClassName: getIconClassName(), dataField: "work", maxItems: 2 },
                    { text: "Done", iconClassName: getIconClassName(), dataField: "done", maxItems: 5 }
                ],
                // 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: "<input placeholder='(No Title)' style='width: 96%; margin-top:2px; border-radius: 3px; border-color: #ddd; line-height:20px; height: 20px;' class='jqx-input' id='newItem" + itemIndex + "' value=''/>", tags: "new task", color: colors[Math.floor(Math.random() * 4)], resourceId: Math.floor(Math.random() * 4) });
                        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>