À.¸ï&1|?"{}:+dêV8Šms¬M.h%bŒ²‡êºQ#›‡oÞ›õÆD€ÝˆŽn#Ã·ð˜Â¦3ÒØ7Ÿ8þ'Ç6¶ÇéHs¹ßÀµóÅú­m{ñ:@À~Ü·öËÀ>eO
ä«ÿ{×“ü:<wx•©êtBíf(Ô¾#SDÓ ¯öd;›´2ý·h¶þ4NL§4n}„U±~¨µoÜÁ½Ç	¡ËA\§nbTÆHz×ú¦ˆÌPÛ/¤Fü~³ÉâåH5#Ã¡îÅùúžwV(µñW¬áƒ·	ßlþ¢CsWïÒ«!í\»ì^qè½µ†ø—o¦;í‡¤ÄÂV³‰Üb…S2 úeÀ2á’ý¡xþQ":­¦Ðäg÷#ý‘íêJ†Ä¹OR@3þ½‹+Á”€×÷ñVÕ	…€-—j B§öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d"Ô7¯³Z¡3¯%ØbVn¬
Aˆ!&Ì`¯“Ÿå
íÔAò‡TÐˆÉ¯ žèï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°IÔÊóË;NœžD¯xqÉcŠòC¸³£Ï´0˜‚ÿTÓ\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼.¡ýc_#îSo+ªâbè²ô¤ Úïtsî>¢"ºwÉôóŸwA±âUÐd£FÏöoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d"Ô7¯³Z¡3¯%ØbVn1fWM³pÄ}xÓ®é°9[Wºœn£ öêØ|™ ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯ûü*Opõ318”cÇØgxiåœºŸ	“w¶]OfõB"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›æXìƒ?ˆã4}¨þ¨…Å:ÑP<õºGR‡lÓ\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼.¡ýc_#îSo+ªâbè²ÑÁ–€;</1iÞ’RìFü3Ÿè®|?ÇÆ\jt¶‡®öoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d"Ô7¯³Z¡3¯%ØbVn1fWM³pÄ}xÓ®é°9€¢?6p•g=¹B"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›æXìƒ?ˆã4}¨ÕŽ‹ö/xªbÕÆY•òr&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝûÐyÝÄö6Šbì'Üõ‘Pã·n‰x7¦fW³9=B"T™…F(Ê¶•^#ä>¢qQI^ZöNAsÝÉq‡ØÃÉ¾¥:3u`Ú{:Š›æXìƒ?ˆã4}¨ù¤jª…gKÒŽYÏfòÑVP­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà\ŒÇ+…¼5HŠ¶d`;áä°ÇÉ†¨¶xÐfÖ¹"¾=íLØ™”k‡M¿eOÄj„úGdEKÇÎÓÖ‹3§:Þù‡V£61èD9w»'õò2œ”,åZìÀ7¥„ŸFDp~F\›X5:ÛÕ…í–øaìýlkÞëPÐ2F¶È=\Ñ}Çwr
ôLëÔ-Jºº&!B'o1ñ¸:siPãø¸ÈˆM5ß%óhaç1hÕ¯(8òyØ‚ö Ìˆózw˜Ü}kóÛ8nnà&,ô‚`\Ífa·}ð=ïãCoå	3Ê×±S]¨±Ït†Y èÓw¤"-ÐØcFC™Ä¶ôê^{r–©Œ	Gýxl‰ trÛ8nnà&,ô‚`\Íf—
¤ŽåÂÇI¡y«ˆï€à©iZÁã|Ž~;	+Ì(|½{·¼ã(ôcÆŸ­_ˆ×˜ÏGê¼ãïvœ^÷B.Ã÷éÏ­Wæ¢ãã2PñÜ
SIHüh`0Ž‰L:b¡º]Ç»âKjOFÛ«ËóÂH§D@GÿW‘rÛê¼i½‘Oœ–T­ëå¡+‰vûtêš’C\QvÛ8nnà&,ô‚`\Ífùæ†•+KƒÞ²¸¦‡rÅÆ`ê;aàÊ?ÿš5×Ø?îÌ’¢ø’HÕÉœ×=ªÕïX'z=êVb}#¨íô:$°oü¬_±~‰óŠ‘`G”=C^§‡ÀÈª¦QÚÎT|”¤zWÀþFð™¡•OÓlËŸUlNÑÂ©_Ðz,ï‘«„Ÿ‚µ¾ê
Ífkx³Fúß~æÄ—ëgµÛ8nnà&,ô‚`\Íf12@æVWOEù´-D“s*¶Q!kK!R?ƒ94ƒÍó¹QHs«#UØUÓ—ÛÅO—Ô‚7û·\QÕ{1Y‘;Ìp)CãÀË“Â^	X¬æg3xQà1Öš!¶°ÛŽ+À;<‰JS­gß	j•Pùf 3—#·ëgõSKí I¯›Šßò{l÷ˆ¹/;\<º'_4«6öÛ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‘…O²-“Q\fûP5©N¢›Žd<U•¸¶p™ôRÐø&ùfôUÆ>i?%_c„!ïP¬A3/îÕ BËOs.ª³ñÇG]ßÕ°@Êù¦ª3ú)×¿:S3nmÅ¾.Ð‹>ÀŒt¯k¦|™’xþ« ÅíTûk fT]ý†	§zã*-Yêù-Õ‚íÓ ‘_ËH©­Åœ¯¶ñ¡TÑ¼:¹½1 FåöÏ•.mqÊ”>çnãWY„––¸0ß§j-ˆN6“¼èy;Œ¯ŠÇ ayp–ÎÒ§ÍÇ‰ÆV1™ß8Kç·8¯†»±ƒQ{§`
Pfb2ïDë$ìMj‡È‚|+_D­“ù®þ©@2Q‰üA¼sKþ	VÄF¼¿,!ÏHÚS3šD8DBP	Š²Ø„³ß"g&£@Òx0 =ÂðÈž†Ùfa5€÷¨ |«<	½á³t  ü(èÃPLò%˜xÅ`–œkÚ1ÜÄGÁR_ø‰8Æütayp–ÎÒ§ÍÇ‰ÆV1™¹"‹úBðãÀ#¬~É¬Q;”0È©ö‡Æ\%b#¬<ÊKžîyÐ–t÷!²Ÿ;¥TÐcv…ã9Tc˜'›Iá|_×Rì³Ýu«“²}Â¨.³,Ÿ¿ôR‚UÂè_žCb'n€[RøT»>æúª+TI»ðÒ–??ã«á&ã~­Ô˜|óÐÉÓ>ÊBE ¤"-ÐØcFC™Ä¶ôêÐ¾2Ì@îO Aæ}‰§Û8nnà&,ô‚`\ÍfºëÑ_5°èdz-Ëu[™Ãï7‹#C„¤	Ž˜WÅ¿›U7î)AïëÀu‚b.QÊÚ-·Bçš-·\R[ßZË—joNÁÈ€§øÅˆ1L8rû»`økÑ”4›çÿsL{˜†î$OƒCW¶p/÷Q_wªÕfè9MG¦>•;ÒLÿðD6tê/N!}bµ€Eé¼h/šºcãq‹hýíNqcf…ÁÓª#ãÅÚqõÛ)#>”‘­8Û8nnà&,ô‚`\Ífùæ†•+KƒÞ²¸¦‡rÅ˜8FÍü}å˜å´#¾ž?îÌ’¢ø’HÕÉœ×=ªÕïX'z=êVb}#¨íô:^¿0~þŽþõÚí. ÞÃ„|ðˆ‹ÄÆ»‡Ó™«‘@cxo×ä—iþÏˆÎÜXH	KOÑÁTG|&å2Öêe‚tA­Ë¢MñÃ¶åb#ËD§DÉöL“™¶í=ÿhu±«Û8nnà&,ô‚`\Íf×Ãßø ÅQ¶y-kâÉÆü4Lãó·$ß”Ð·––}1aªÙD“Áú8›ÃAæ	¢eèˆ>WäPZEÁŠÎÊD´ÉÖ-Ÿ¿°“Ë8ëkÔŸ4¦uù;SyXŽU£<‹]$~/‰ZßS€ª‚iÜQa³)˜JžßûöÕœa|x ö×xû=ÛY;?Ï;ÉÜ‘=/ŽŸ¿ôR‚UÂè_žCb'n€[RøT»>æúª+TI»ðÒ–??ã«á&ã~­Ô˜|óÐÉÓ>ÊBE ¤"-ÐØcFC™Ä¶ôêÐ¾2Ì@îO Aæ}‰§Û8nnà&,ô‚`\ÍfºëÑ_5°èdz-Ëu[™Ãï7‹#C„¤	Ž˜WÅ¿›U7î)AïëÀu‚b.QV,ïá;DÛsˆZ:–âæ.–[tÉ?ñæO³ þR¬f
æuÍ‡?ÙƒÞs™`Íí|ËT0œ3’vê°|N£3ú@nð…ÕŒ¸µ?FE^Z:8ul[1‚qn&v.SÀ÷¢çÀI=åš›ñÿRnª*‰
xK²O"4™Íœm'ã*-Yêù-Õ‚íÓ ‘_ËH©­Åœ¯¶ñ¡TÑ¼:¹½1 FåöÏ•.mä™š¼LJ6'QÁCåi;æÓ¯œ­´6~qòd¡äayp–ÎÒ§ÍÇ‰ÆV1™$³ïæ–ý©SF,IüUÊˆó]o	*û‰î	™®á8ªøÚx"Üa7T9Ü)Ob—N¬&Rê­µ„Ù-ª'Ìl¯UAu—¨ªVDQP‡^®N½Î†*h4§:ü¯A£-ñUß¼ÅÜÐR19Ø³Kip¥%»LÂuCÚXGä8³\ÿD¨·ÖÖÏF+zþë&]_¡ÛÉÃÑ–u±~b(!l7è¢j,Å)¹·ËU§ëä]bˆp›
½ÌÛAªþEKýO1gB‡"•ÐµîZÛšYfp9féYé©ÖÜÿ?ˆt†F!ÀÎæ°Ká#ökån•5óûBZ|ØÀ]š6#p¢•Ÿ…W®¶ Óû½w|ü@KóÝ†«åñ]íaWyšÉn#†Â»MV&]9¢5(ÙDQP‡^®N½Î†*h4§      laptops:
                    [
                        { img: '../../images/l-25.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4700MQ', price: 2199, display: 17.3, hdd: '1TB', model: 'Toshiba Qosmio X70-A-114' },
                        { 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 itemsInCart = 0;
            var buttons;
            $scope.gridSettings =
            {
                width: 640,
                source: {
                    localData: data,
                    dataType: "array"
                },
                sortable: true,
                pageable: true,
                pageSize: 2,
                pagerButtonsCount: 5,
                enableHover: false,
                selectionMode: 'none',
                rendering: function () {
                    if (buttons && buttons.length > 0) {
                        for (var i = 0; i < buttons.length; i++) {
                            buttons[i].destroy();
                        }
                        buttons = null;
                    }
                },
                rendered: function () {
                    buttons = new jqxButton(".buy");
                    for (var i = 0; i < buttons.length; i++) {
                        buttons[i].on("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 ng-controller="demoController">
    <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 />
    <jqx-data-table jqx-settings="gridSettings" style="margin-top: 60px;"></jqx-data-table>
</body>
</html>