À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Új°TbŸÌ14Æ4{¥¼GÖÉÚbk,k€÷JÕ-ý³ˆp„éÿI4±Þ8Ñ7J_¨H³ 7
>ÍÖíµ¿O¯Ò"Êfâ$ïÞóT@}·8ýås%ê#o‰,­÷ßÂ˜1¹Á…?ÖíäKù0GÜà™~êÆ¡ŒŽ»(Õº™$Pù{¡nŸ#wŸŠÖoZýb$óZFì®º4êÞÜ>7Ûƒh¸ÊºVƒ[Ô;lg‘V\˜³ï­¯¬ùÔ€äµÌÑt:,eyB6Îqplš3¨žtu1ŸŽA
œø5²“P$|†rD†ùA4ÐºYTšLãÒˆ¨ ‰yµñZþÜ¼²9´Zšo¥àEÌß%Ãä* „@Ž½kÅfžô:‘pXh>dÕ‚3!s	×‰êoí<2¾ë„ 1o±´oá~ð¢i‚CøŽ©äÄ1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝûx!À_¡™ß¦(”ÅÁhñz’ýÅÑõ<‚êèf†Ì¶lŒCŒ±Îª«õèØî‘öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d¬=¿=ça’~æ¨v°K&&pÀCV`¶Rø€Ý»¬n“˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿPÑþA™Ì>¾û®´ð¿€åvPÓèÐ€ôüoJ–æ‰Ó\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑ¸8SYô!aç7‹ÕhhM&:ÿ5÷†,Ãóÿ7ûÐpÒ¢öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d¬=¿=ça’~æ¨v°K&&>Ã•™Düü2MØÑ1  •,ós#A!õßëp Qvï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°Iá#•—£{–wc,™ÝCßwÄøá,?QV’WËgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠ1fWM³pÄ}xÓ®é°9€¢?6p•g=¹B"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›Wl¥Û žnç+{‹Hå)Q!˜Ô<H*Ì—+µž¬ýØ2¼;e9¢Ù–~y‚‚ü†‰6\2¿K»È˜­§¶’¡jõJH‰87]'Õ.x´|’+ÚÍ*oÌ*J*O…%¶ãÌ†Q\H–Ÿ?¤¬ÖLfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ë´üÍýÜxÙRÝV»Ió; )ð'kœ¨Â#ãèž÷wä›ˆAë?U/Šµ:]_-WíHáœ"FÄm‰P;#e!Õ³;FŽ4¿½ò»W Ê‡¶-O'Ž Þä‡«3è¿¯Tô>dEPûC¿«q®»Ô7-Þ`švYiŽÛ8nnà&,ô‚`\Íf	[¶‹‡"ïy…¡Ñ¥d¨KÛ8nnà&,ô‚`\ÍfkN	¦1óoÑBI«ìµË~´ý±'Ì;]è£Ç²°ñŠpÆ
|é‹ˆ°7Ål¿H‚cÅÀ¹]ä|;2gû€Ï¶
´Ê)nLLëi™dÁôâÙôp¯ÎÕ¾v@±æ-LZ{S€ã1ì:^ªÀÃ©=.§ÛDN¢úÞ‹[[·R7`×Pá¿¥À¦aÜQÀÑþÝŒYcˆ`òñ\g1_VÀ:]`;ÚdýG”êX(RÔãI‰‰ã*-Yêù-Õ‚íÓ ‘_ËH©­Åœ¯¶ñ¡TÑ¼:¹½1 FåöÏ•.m#¯](T-a[–4þ“¯å?;æÓ¯œ­´6~qòd¡äayp–ÎÒ§ÍÇ‰ÆV1™â#9°[ C¦ßÎÆDMY*=CŸ¾x³	‡ôÈ–œn	y£a}
+|µi^HÒXh•¶LÕ”kA%q‰§Ùé÷x3Ô/éë4˜Ø;ÁÈ½Ïh&6E“·û±¢2Àé™Ãï7‹#C„¤	Ž˜WÅ¿›U7î)AïëÀu‚b.Q\àfTµŸ{&ÿ êxÜÀ—joNÁÈ€§øÅˆ1L8rû»`økÑ”4›çÿsL{Ñk¢Ô¡)‡ú”f ¹û0jh¦Öè/q±hÍÜÂAèÍ(m­v`'<(”ï‰ÑRysÒo·t¤»=£|Ýà{KÑ;ÜM2N$+×Íz’vÄLÏ¨	½àv*R=‰·!Cz]-kÌÛ8nnà&,ô‚`\ÍfšD8DBP	Š²Ø„³ß"gohâõÞÝxÖ[mw #
9agÛ<¦G ˆÜœŽ³XQÃÅGxÔ, ÊºÀ’LŠë›Î–æòýLÇ|Aû:’¸ÎÛ8nnà&,ô‚`\Íf[6Ww‰—>ëhæøÓÜ‚uy|@…Rœ"&çGäÓ¿Óaz‘£è#;IÒdOñƒdž¯nÑ²DÂi‹›A^ÒH“?åÏâ
ÓìT># Ú~®°Ç…Ìï="Äeó„’à“ƒò‰àm“‚Úrên©zefa-à9;Ö¢rÐº»=$üs¯Q4)‡2|!¾,– G´æGX5Û8nnà&,ô‚`\Ífuû­[Œh*¬¥*«š¾IáUdô=–(©2‰²”G.» ›öÕùN;	³vù(†ŽÌ6èÐjÝ-„x–çÆñ£çƒ²ý%¥ò¶3q_øWY#/6šË¡¥3Ö‹|ÍRÁìÍÁ=]~øç£ÚŽd?—´ª"<6õAU#OÿÛªvšÒ¤ÎB#–ï—…Uš,•ºïm1<YTºìsÛ8nnà&,ô‚`\ÍfmnròýŠ ‚à³é)6†î*«ëmó›à¾Ç›’×m{Wø§“üÕm8Wù(†ŽÌ6èÐjÝ-„x–çÓSãu+3Þ7Cûr}bœÇv¥ÍÑ¯\äçû\–Ée¯ßœ«ÅifE%Ñü»+Ø‚ŒW®ÉÊùz‰DEn‘(")Òá?­&ý2`#JŸþâ(_ÑyNÇ,£^‡µjKm›Û8nnà&,ô‚`\ÍfQ_ößÇk™C_Û§Þ‚q“a£çŒóæ·Ü˜;&×”“Œz^þˆKwÏ“§Û8nnà&,ô‚`\ÍfÖh8¾ná­äà¬pC‹s¤ÊO¯Ãòûe]>·tú¤"-ÐØcFC™Ä¶ôê%Õ®döú5ììdµÞmH+³À:s†ƒ7‘…
·±íèQEÉÄÙhŽd<U•¸¶p™ôRÐø&ùf×c°%<CT…¿ ðAUL¿ÜÍR†™áR“(ÑË Ô’e¯ßœ«ÅifE%Ñü»+Ø-Gf¯¦’´¨Üé°	W¯¥8À^?†×}šbdEŽÏo>¸
­Â!2hsÏñJ.Æã*-Yêù-Õ‚íÓ ‘_ËH©­Åœ¯¶ñ¡TÑ¼:¹½1 FåöÏ•.mY;ÃøÈ}ÝÈ „Å:;æÓ¯œ­´6~qòd¡äayp–ÎÒ§ÍÇ‰ÆV1™/Š¬‹.ë6ÛGä<Q_wªÕfè9MG¦>•.2šÕºS—]êþªÂ•“™‚aSÝ¸Fko9¤ù,` ÂZIõo‰•ÑÚbÊ—¤ËmøÇòê… PùøÛ8nnà&,ô‚`\Íf—
¤ŽåÂÇI¡y«ˆ]ÓÜý¬ykøâÎÊHfÌ(|½{·¼ã(ôcÆŸ­_ˆ×˜ÏGê¼ãïvœ^÷ÏÊý1.x|¿ýŽ{¨þœÐÓjRÛ–Ë„¶œÈúÐ÷eäuèÆ¨¤M„h.¼^”ž°Oû’a®ÝX÷G¶Ð‚0¾
»®6x7Ô˜˜§Yþ°XõYðÛ8nnà&,ô‚`\ÍfQ_ößÇk™C_Û§Þ‚q“a£çŒóæ·Ü˜;&×”“Œz^þˆKwÏ“§Û8nnà&,ô‚`\ÍfÖh8¾ná­äà¬pC‹s¤ÊO¯Ãòûe]>·tú¤"-ÐØcFC™Ä¶ôê%Õ®döú5ììdµÞmH+³À:s†ƒ7‘…v‚²ßT\°ühÕ$ƒ>Éå5gPXŽ¹kÎÎÝƒE¯±6ú~RÀ‹¼²HúÏg-Á¢u‡kÚ›GµXòÕ³ƒ¦e2Å¼®û²òÒÚ‘æD½IˆÔåò¯<u{®ðW£¹HÚŠOä­“äƒ³-Æ„p~¤n9yÒ;Û8nnà&,ô‚`\Ífuû­[Œh*¬¥*<]7:L)~pã‰G t\x(.?/Vc…’5±® ý‚Þù(†ŽÌ6èÐjÝ-„x–ç¹´M#È+É¨1/893òØ„Ú£í«Ø»Ãql@,õìM§ð‰
}Mâ™°î(‡ÉâC˜k4J³]Ìv#Î°«üûíÃöB;qÔ±VXÍ0µî§TæÄ¾!Œ¯Û8nnà&,ô‚`\Íf×Ãßø ÅQ¶y-kâÉÆü4 ZR,jóèÛdÔlN4ªÙD“Áú8›ÃAæ	¢eèˆ>WäPZEÁŠÎÊD;ð‘BÄfNZºa;=ÁWÑ1Ï~Ðm¯„¸òÄÔyk{¿Ì_s¶øCL¸ÌÒGúî<á¦dÚHwÒ™üÚªÂ,(åú¶¾?­ã#O’ŒŸß‘Qÿ IV¤¹Û8nnà&,ô‚`\Ífy>ê?Ü!Õÿ{ÎÕcL	sò
ëé%’«æš<š¸-ÖŸÜÃ'ò%¼é—èß5Û8nnà&,ô‚`\ÍfÆïUÿKIM¦1>£-ó˜8}ÞŸ$§°$µ7.ÒXµ&DQP‡^®N½Î†*h4§:ü¯A£-ñUß¼ÅÜÐR19Ø³Kip¥%»LÂo‚G¾€=2úK÷$=ÕŒb])4÷¼àÚõY4µµàÊçŒ\ +5µŽ]H¡âBíè¹i–›ÊÂñX!€•)FË™³| †ì°çµ2ÔéP½DÝÎ å¨.ó{Ž®ô—Ì¼L§[¹™DGrl4¦,?	u-E=±âcýth&6E“·û±¢2Àé™Ãï7‹#C„¤	Ž˜WÅ¿›img: '../../images/l-26.gif', ram: '4GB DD3', cpu: 'Intel Core i7-3667U', price: 2699, display: 14.0, hdd: '256GB SSD', model: 'Lenovo Thinkpad X1 Carbon' },
                        { img: '../../images/l-27.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3317U ', price: 1699, display: 12.5, hdd: '128GB SSD', model: 'Dell XPS Duo 12' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-28.png', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
                        { img: '../../images/l-29.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U ', price: 1299, display: 11.6, hdd: '128GB SSD', model: 'Sony Vaio Duo' },
                        { img: '../../images/l-30.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3230M', price: 999, display: 15.5, hdd: '256GB SSD', model: 'Sony VAIO' }
                    ]
                }
            ];

            var source =
            {
                localData: data,
                dataType: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var itemsInCart = 0;

            $("#dataTable").jqxDataTable(
            {
                width: 640,
                source: dataAdapter,
                sortable: true,
                pageable: true,
                pageSize: 2,
                pagerButtonsCount: 5,
                enableHover: false,
                selectionMode: 'none',
                rendered: function () {
                    $(".buy").jqxButton();
                    $(".buy").click(function () {
                        itemsInCart++;
                        $(".cart-top p").html(itemsInCart + " products");
                    });
                },
                columns: [
                      {
                          text: 'Products', align: 'left', dataField: 'model',
                          // row - row's index.
                          // column - column's data field.
                          // value - cell's value.
                          // rowData - rendered row's object.
                          cellsRenderer: function (row, column, value, rowData) {
                              var laptops = rowData.laptops;
                              var container = "<div>";
                              for (var i = 0; i < laptops.length; i++) {
                                  var laptop = laptops[i];
                                  var item = "<div style='float: left; width: 210px; overflow: hidden; white-space: nowrap; height: 265px;'>";
                                  var image = "<div style='margin: 5px; margin-bottom: 3px;'>";
                                  var imgurl = laptop.img;
                                  var img = '<img width=160 height=120 style="display: block;" src="' + imgurl + '"/>';
                                  image += img;
                                  image += "</div>";

                                  var info = "<div style='margin: 5px; margin-left: 10px; margin-bottom: 3px;'>";
                                  info += "<div><i>" + laptop.model + "</i></div>";
                                  info += "<div>Price: $" + laptop.price + "</div>";
                                  info += "<div>RAM: " + laptop.ram + "</div>";
                                  info += "<div>HDD: " + laptop.hdd + "</div>";
                                  info += "<div>CPU: " + laptop.cpu + "</div>";
                                  info += "<div>Display: " + laptop.display + "</div>";
                                  info += "</div>";

                                  var buy = "<button class='buy' style='margin: 5px; width: 80px; left: -40px; position: relative; margin-left: 50%; margin-bottom: 3px;'>Buy</button>";

                                  item += image;
                                  item += info;
                                  item += buy;
                                  item += "</div>";
                                  container += item;
                              }
                              container += "</div>";
                              return container;
                          }
                      }
                ]
            });
        });
    </script>
    <style>
        h4 {
            font-size: 14px;
            margin: 18px 0 15px 15px;
        }

        .tag-title-info {
            background: transparent;
            width: 1px;
            height: 0px;
            border-color: #4272b8 transparent #4272b8 #4272b8 !important;
            border-width: 26px 26px;
            border-style: solid;
            z-index: 1000;
            top: 0px;
            position: absolute;
            left: 598px;
        }

        .tag-title {
            font-size: 16px;
            color: #fff;
            position: absolute;
            z-index: 100;
            left: 0;
            line-height: 100%;
            background: #4272b8 !important;
            height: 52px;
            padding: 0px;
            margin: 0px;
            top: 0px;
            width: 500px;
            vertical-align: middle;
        }

        .cart-top {
            font-family: Arial, Helvetica, sans-serif;
            height: 35px;
            position: absolute;
            left: 500px;
            top: 0;
            color: #fff;
            padding: 16px 14px 1px 14px;
            font-size: 11px;
            font-weight: 400;
            background: #4272b8 !important;
            z-index: 199;
        }

            .cart-top p {
                font-weight: bold;
                font-size: 11px;
                background: url(../../images/cart-icon.png) no-repeat right center;
                min-height: 16px;
                text-align: left;
                padding: 0 24px 0 0;
                margin-top: 2px;
                float: left;
                font-size: 11px;
                color: #fff;
                text-decoration: none;
            }
    </style>
</head>
<body class='default'>
    <div class="cart-top">
        <p>0 products</p>
    </div>
    <div>
        <div>
            <div class="tag-title">
                <h4>Welcome to our online shop!</h4>
                <span class="tag-title-info"></span>
            </div>
        </div>
    </div>
    <br />
    <div style="margin-top: 60px;" id="dataTable"></div>
</body>
</html>