À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Új°TbŸÌ14Æ4{¥¼GÖDãtK‡Ôµ}71ŠUuæ=WTôeoüc¼'-Wdª¶ô1aÛmß¤S Ì®ÝTÖñž<ö"ã!Fºb™•—yyNÄÈ4Âï\ãý¯A;©X¬Goª.ˆÙÉ¿÷7KWRœRè£Åså³À™V">EóÜ;IÔÿ<àg5h„6ùŠ
3Ê§¢¾4û±»X3D†LVì¯xyUq"$¿`ŽZÙµX¶„F)"í3 ö»0ø\8±8±Öt4üùÉË¶7æ@2œ»^«X‡¸¿	MÊ™84ÛbN¡ë~ÈI¼Øurrb×é_ ~cÈÅþLJ­as'u/tSÝWÑ?_£t‚÷2â¢O³•
4&ù›Û…tŒ8|»Z>”ÎöNeig2¨Ûö$†óû8=ìæe{	¹ÓV·nê&ßVo“àö±²¢‹ÏNÂ\Ï›[ÿ‡[¼¥)šd¶1H9f G;‰ezÍ¡ÍÚÂ+$ ®Yöy¥õ"dfaÊFA¦ØW¬ÕO¸A@V6’Š»¨T0{ÇrxÓ‘¦W•3ñw`s[C£Ýª;9.n-Í ô¹rbI9h8¿òž†O£ÐÊ:?úŸ»× @¼ìösnÜ'ýEåY,µA'N	L»¢KÇÁ_ “ÒHÜÂß…f©š2í@ú“w0«A²«e)Ö¥;â-Ó
ºú`9šEìLkþ~|Ò~Ã|ä+‡ÙÙÚÂ`£ˆ¤µÌ”œW]f‚ZðEâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°IFèR‡Åé!h¯>Réð^Å%ÄXÄøù)á¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚyß–®iÉNØ²è1Šß%‹>®„Ý¤RJŽ=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿džxƒ~jß}&ÇBZñ&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝû¾qb³©¥DdO²ùPêgJ^|Z´\ÈyfÖ¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚyß–®iÉNØ²è1Šßþú©ÄxZ³éËÏ7-»H­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ ž5«x-±ëBj€/EïÎÅˆ:jËŒ©Ox%¸§nÊ˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿV{>/w¤°>ëÖÏÙ<Xsº¢q‡Û¿)p‰G€Š=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"ô³+®‡¸3Z×5Ùœcnë}~ÿ¿\›’þžŸÀ…™S‘Ø¹¶SíÓþuÞ¸ÉçÂ­Ò7ñ$Ç#ñoP¥ó´aïù+o2ü¢xFqwÐ„F¡×m2&îü—ëê•?ÅX£<rl[w7,“
_!á ÜÂY¼žŠXËMg`×¸QŽ á 3ÏrÌ¯ù]Aá­¶îÈ¦Ñ!Í 6„aZ­ˆ*¤zpÅ/ôÌ,c²€àV¸FÍ‰û•Èo×GÛ8nnà&,ô‚`\Ífuû­[Œh*¬¥*«š¾IáUdô=–(©2I.Žbg´èEQ¿¿-ù(†ŽÌ6èÐjÝ-„x–ç‰ýYü~û¬ÀEßíý¤´¾C¥ÙØ|+!ë¨—†Ã2ìÍÁ=]~øç£ÚŽd¾Ä¹jMá4·ßjr™®?!rsèRù¬_ôÜçBO<ïÓ	rž½“|wÂ+ÁÇê™šD8DBP	Š²Ø„³ß"gH©­Åœ¯¶ñ¡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	Š²Ø„³ß"gH©­Åœ¯¶ñ¡TÑ¼:¹½1 FåöÏ•.mÅã\®™*¥ÂÂVªñlB§j-ˆN6“¼èy;Œ¯ŠÇ ayp–ÎÒ§ÍÇ‰ÆV1™â#9°[ C¦ßÎÆDMY*2úà™ß­rÁˆE3úlš=7$’A"`|Ge>ý®2š¸÷…ð½PPVö6^nR&vh4H	ÒhÂ¿•Ç.8%™Y2QuÅòÂ5x»Û8nnà&,ô‚`\ÍfmnròýŠ ‚à³é¨ÀŸ:¾’æTtÄ6®"r<ùYŠÔÓÙé´ç '`
UÚ„ã{7¤b^ø ‹aVkŠ9
”²úÐ_ã~ ªÞ°·5P8ò”\ž£yH*Î“ÍcHuÌ~AšVoaI¾Ä¹jMá4·ßjr™®å©Ö”ÊÝõöz[„=–!*ºõ‰ˆ›ˆH¿¾'Ìh’ÐÊÛ8nnà&,ô‚`\Íf³åÂú+r-«-6!¼$«Rm­€ÎAWO’ÇÝ`¨2UÈî†û¶áyÅ(ºöbb;ýEJ4Æ© ÁæíÔˆç’6ØÔÄJž¬Â©²|âÁ3ÀÜêU–\‰øq¯-ÿi÷÷*m˜âjx
ÌÒGúî<á¦dÚHwÒ»6WuÚoÚÅ€ÂÄ”ôð¼h&6E“·û±¢2ÀéÉn#†Â»MV&]9¢5(ÙéóPSkõêºÀÊ/EF×hwÔqwŸZn¡Ë‰§J$µ{üÁôŠ»ü4(æÉ@êÞVÉ¬f
æuÍ‡?ÙƒÞs™`Í¡­Ÿn>pØÈè»öæ,åüùóÆxÌ±\’íaDk€“Ùe_0FÂi@Â"ùÉÚþu)!2ùEo+ž…>è|ãõÇ…¨ô'¤TDR×ƒ¯JœD0%%@.v*R=‰·!Cz]-kÌÛ8nnà&,ô‚`\Ífã*-Yêù-Õ‚íÓ ‘_Ëª¤%ZÎÈg´Ï#Ø˜KŸç!…³X÷åÆYFÚ
 r\Œ¶o_xú\J4µ…óòæ;7>èok‚êˆ’sä©âÛ8nnà&,ô‚`\Íf%Õ®döú5ììdµÞmH+³À:s†ƒ7‘…œ’ƒ–»u]k †>PIš·Žd<U•¸¶p™ôRÐø&ùf ‘ŸIE‚t3_4••Áx€Äþfªœ¬—%ÐvOœQ™}G]ßÕ°@Êù¦ª3ú)×¿gìóF `g2Œ./Í²øå)U¿Æê‰‹Ýù{ŸÇd5Fx„!aÈþ}oú(g•±ôéDQP‡^®N½Î†*h4§µË~´ý±'Ì;]è£Ç²°ñŠpÆ
|é‹ˆ°7ÅlÑ²#D2`VÃ*é„•Az°û€Ï¶
´Ê)nLLëi™dÁôâÙôp¯ÎÕ¾v@±É;VÖâÿ±—uòU”ÀtŠ,™iŒ¼á©æâÆ6Ì¤ÃÚ"¤Äýk8ÉHûwœyÏ.f&’ØÄtypo|ËŽ³H.å®ï5b,AÍ‚i¼ô1UFºpK„¢2œ‰
†\øÛ8nnà&,ô‚`\Íf—
¤ŽåÂÇI¡y«ˆÞ¿ÈÁú6›' ÷ôÍöÜÌ(|½{·¼ã(ôcÆŸ­_ˆ×˜ÏGê¼ãïvœ^÷ï$øKóAÉ•ÿxOìbÓjRÛ–Ë„¶œÈúÐ÷eäu¥$mœÇ<*“«øá¬§ç 
ÚAØÅtD  L·”Ñ3Ù³KG~‚ô‰É¿wŸsH!pN7”ñFïÞè@ÏÛ8nnà&,ô‚`\Íf×Ãßø ÅQ¶y-kâÉÆü4]²3-*ý“f½cï¹·‡vªÙD“Áú8›ÃAæ	¢eèˆ>WäPZEÁŠÎÊDC/–‚!rž,åíÈÐc?2‚?%Þ=ÊÎ>àc
ì¸6ö´+à,ìîÄWâ=Óí×Ê±˜E„.cñ0"´I.é=[àuLtDŽGÔlkûÆgê—u[Xé
ø:NÛ8nnà&,ô‚`\Íf%Õ®döú5ììdµÞmH+³À:s†ƒ7‘…Gvð°«4­Ëb%,e
yŽd<U•¸¶p™ôRÐø&ùfL¶ŽªÚQqX¿öOjxQÙ*h>"ô45, Å³©ß·{vyy†3±âl.ÃŸœÈeiÉv™É%zÈVI<W0WÕìÛC˜á¡ðçª`†€%
× _„¼Ó.½ïÞEsuhÛ8nnà&,ô‚`\Íf]®Â}jú–Õ5VÇžJ@v¶&
Go7ø3Õ"¯“âý4*Ì!•ñ^,@ÈßpIDqqA±YÀ>¬æté;¢Æ9#Œýüìijj±&Õ:¯˜6h‹\_JämzŸö“"@5¯^fzïáj›ço2^¤šf±µ¤ Í:;¿äpúLT¨K€ÄI¥Dí$h&6E“·û±¢2ÀéIœßªñüeí¦«âK§d«ÿçWÙê›N/Iá‰x!WÁèÏ›]•_ÑÓGAÈ
nÍ»˜ohâõÞÝxÖ[mw #
9…Å#?‘éÄ˜Öïò±Të‘C‰ÐIÒ¥$@¬56%V üëM(2›ÌòÐÛ8nnà&,ô‚`\ÍfmnròýŠ ‚à³éüÝ|†».¡EÅmóYà‚®Áš…µN[x9mÑý5ù(†ŽÌ6èÐjÝ-„x–ç‰ýYü~û¬ÀEßíý¤´Åˆo5éƒÑ˜×"R×"Þ;;ý--¿³]põŒöÉÃKúï3:S3nmÅ¾.Ð‹>Àó†©¸²¾;Ô/7ˆ*õt&éÄ1g»§\(‚Ó©¼Û8nnà&,ô‚`\Íf%Õ®döú5ììdµÞmH+³À:s†ƒ7‘…Z¬‡ã´Ë"•x}E‚–j‰àG$#4µ‰^×M¿=ÃÑ–u±~b(!l7è¢j,Å)¹·ËU§ëä]bˆp›
½ÌÛAªþEKýO1gB‡"•ÐµîZÛšYfp9féYé©ÖÜÿ?ˆt†F!À Aspire V5-573G' },
                         { img: '../../images/l-28.png', ram: '16GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
                         { 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-18.gif', ram: '16GB DD3', cpu: 'Intel Core i7-3820QM', price: 2499, display: 15.6, hdd: '1TB', model: 'Lenovo ThinkPad T530' },
                         { img: '../../images/l-22.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4800MQ', price: 3499, display: 17.3, hdd: '750GB', model: 'Dell Alienware 17' }
                     ]
                 }
            ];

            var source =
            {
                localData: data,
                dataType: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.records;
            for (var j = 0; j < records.length; j++) {
                var rowData = records[j];
                var laptops = rowData.laptops;
                var container = "<div style='padding-left: 15px;'>";
                for (var i = 0; i < laptops.length; i++) {
                    var laptop = laptops[i];
                    var item = "<div style='float: left; width: 220px; 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: 20px; 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: -50px; position: relative; margin-left: 50%; margin-bottom: 3px;'>Buy</button>";

                    item += image;
                    item += info;
                    item += buy;
                    item += "</div>";
                    container += item;
                }
                container += "</div>";
                $(container).appendTo($("#content"));
            }
            $('.buy').jqxButton();
            $(".buy").click(function () {
                itemsInCart++;
                $(".cart-top p").html(itemsInCart + " products");
            });
            var itemsInCart = 0;

            $("#jqxRibbon").jqxRibbon({ width: 700, position: "top", mode: 'popup', selectedIndex: 0,  selectionMode: "click", animationType: "fade" });
            $("#megaMenuMode").jqxCheckBox({ width: 130, checked: true });
            $("#megaMenuMode").on('change', function (event) {
                var checked = event.args.checked;
                $("#jqxRibbon").jqxRibbon({ mode: checked ? "popup" : "default" });
            });
        });
    </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: 600px;
        }

        .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: 600px;
            vertical-align: middle;
        }

        .cart-top {
            font-family: Arial, Helvetica, sans-serif;
            height: 35px;
            position: absolute;
            left: 580px;
            width:100px;
            top: 0;
            overflow:hidden;
            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>
    <div style="float:left;">
    <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 /><br /><br />
    <div id="jqxRibbon">
        <ul>
            <li style="margin-left:20px;">Business</li>
            <li>Games</li>
            <li>Internet and Movies</li>
        </ul>
        <div id="content">
        </div>
    </div>
        </div>
    <div style="float:left; margin-left: 50px;" id="megaMenuMode">Menu Mode</div>
</body>
</html>