document.addEventListener('deviceready', initialization, false);

};

var initialization = function () {

// source

var laptopSource = {

datatype: "json",

datafields: [

{ name: 'imgName', type: 'string' },

{ name: 'ram', type: 'string' },

{ name: 'cpu', type: 'string' },

{ name: 'price', type: 'int' },

{ name: 'display', type: 'float' },

{ name: 'model', type: 'string' },

{ name: 'video', type: 'string' },

{ name: 'hdd', type: 'string' },

{ name: 'promo', type: 'bool' },

{ name: 'LAN', map: 'connectivity>LAN', type: 'string' },

{ name: 'wifi', map: 'connectivity>wifi', type: 'string' },

{ name: 'bluetooth', map: 'connectivity>bluetooth', type: 'string' },

{ name: 'USB3', map: 'interfaces>USB3', type: 'string' },

{ name: 'USB2', map: 'interfaces>USB2', type: 'string' },

{ name: 'webcam', map: 'interfaces>webcam', type: 'bool' },

{ name: 'mic', map: 'interfaces>mic', type: 'bool' },

{ name: 'audio', map: 'interfaces>audio', type: 'bool' },

{ name: 'hdmi', map: 'interfaces>hdmi', type: 'bool' },

{ name: 'vga', map: 'interfaces>vga', type: 'bool' },

{ name: 'thunderbolt', map: 'interfaces>thunderbolt', type: 'bool' },

{ name: 'miniDisplay', map: 'interfaces>miniDisplay', type: 'bool' },

{ name: 'cardReader', map: 'interfaces>cardReader', type: 'bool' },

{ name: 'battery', type: 'string' },

{ name: 'weight', type: 'float' },

{ name: 'OS', type: 'string' }

id: 'model',

url: 'sources/laptops.txt',

async: false

};

var dataAdapter = new $.jqx.dataAdapter(laptopSource, { autoBind: true });

var records = dataAdapter.records;

var laptopArray = new Array();

var tempLaptopArray = new Array();

for (var i = 0; i < records.length; i++) {

laptopArray.push(records[i]);

};

var view = "table";

var loginName = "";

var itemsInCart = 0;

var selectedLaptop = 0;

var deviceWidth = $(window).width();

var oldWidth;

var dataTableWidth;

var loginDialog = $("#loginDialog");

// login functionality

var loginFunctionality = function () {

var login = $("#login");

var checkLogin = function () {

if (loginName == "") {

return true;

} else {

return false;

};

if (checkLogin()) {

} else {

};

});

if (checkLogin()) {

};

});

$(document).on("mouseup", function () {

});

if (checkLogin()) {

loginDialog.jqxWindow({ position: "center" });

loginDialog.jqxWindow("open");

};

});

};

// details view title height adjustement

var titleHeightAdjust = function () {

var titleHeight10 = $("#laptopTitle10").height();

var titleHeight11 = $("#laptopTitle11").height();

var modifier = deviceWidth < 452 ? 0 : 15;

var titleHeight = Math.max(titleHeight10, titleHeight11) - modifier;

for (var i = 0; i < laptopArray.length; i++) {

$("#laptopTitle" + i).height(titleHeight);

};

// loads laptop details

var loadLaptop = function (index) {

var currentLaptop = laptopArray[index];

$("#RAM")[0].innerHTML = currentLaptop.ram;

$("#CPU")[0].innerHTML = currentLaptop.cpu;

$("#video")[0].innerHTML = currentLaptop.video;

$("#HDD")[0].innerHTML = currentLaptop.hdd;

$("#display")[0].innerHTML = currentLaptop.display + "''";

$("#connectivity")[0].innerHTML = (currentLaptop.LAN ? "LAN: " + currentLaptop.LAN + ", " : "") + "Wi-Fi: " + currentLaptop.wifi + (currentLaptop.bluetooth ? ", Bluetooth " + currentLaptop.bluetooth : "");

var interfacesHTML = "<ul>" + (currentLaptop.USB3 ? "<li>" + currentLaptop.USB3 + "x USB 3.0</li>" : "") + (currentLaptop.USB2 ? "<li>" + currentLaptop.USB2 + "x USB 2.0</li>" : "") + (currentLaptop.webcam ? "<li>Webcam</li>" : "") + (currentLaptop.mic ? "<li>Microphone</li>" : "") + (currentLaptop.audio ? "<li>3.5mm audio jacks</li>" : "") + (currentLaptop.hdmi ? "<li>HDMI</li>" : "") + (currentLaptop.vga ? "<li>VGA</li>" : "") + (currentLaptop.thunderbolt ? "<li>Thunderbolt</li>" : "") + (currentLaptop.miniDisplay ? "<li>Mini DisplayPort</li>" : "") + (currentLaptop.cardReader ? "<li>Card reader</li>" : "") + "</ul>";

$("#interfaces")[0].innerHTML = interfacesHTML;

$("#battery")[0].innerHTML = currentLaptop.battery;

$("#weight")[0].innerHTML = currentLaptop.weight + " kg";

$("#OS")[0].innerHTML = currentLaptop.OS;

};

var tableFlag = false;

var detailsFlag = false;

var renderCommon = function () {

var headerTable = $("#headerTable");

var login = loginName == "" ? "Login" : "Welcome, " + loginName;

if (deviceWidth >= 896) {

dataTableWidth = 896;

headerTable.html('<tr><td id="logoTd" colspan="2"><img id="headerImage" src="img/Notebook.png" /></td><td id="headerTd1"></td><td id="headerTd2"></td><td id="headerTd3"><table><tr><td id="login">' + login + '</td><td id="itemsInCart"><img src="img/cart.png" /><span>(' + itemsInCart + ')</span></td></tr></table></td></tr>');

} else if (deviceWidth >= 674) {

dataTableWidth = 674;

headerTable.html('<tr><td id="logoTd" colspan="2"><img id="headerImage" src="img/Notebook.png" /></td><td id="headerTd2"></td><td id="headerTd3"><table><tr><td id="login">' + login + '</td><td id="itemsInCart"><img src="img/cart.png" /><span>(' + itemsInCart + ')</span></td></tr></table></td></tr>');

} else if (deviceWidth >= 452) {

dataTableWidth = 452;

headerTable.html('<tr><td id="logoTd" colspan="2"><img id="headerImage" src="img/Notebook.png" /></td><td id="headerTd3"><table><tr><td id="login">' + login + '</td><td id="itemsInCart"><img src="img/cart.png" /><span>(' + itemsInCart + ')</span></td></tr></table></td></tr>');

} else {

dataTableWidth = 230;

headerTable.html('<tr><td id="logoTd" colspan="2"><img id="headerImage" style="width: 100%;" src="img/Notebook.png" /></td></tr><tr><td><table><tr><td id="login" style="white-space: normal;">' + login + '</td><td id="itemsInCart" style="white-space: normal;"><img src="img/cart.png" /><span>(' + itemsInCart + ')</span></td></tr></table></td></tr>');

};

$("#headerTable, #footer").width(dataTableWidth);

loginFunctionality();

};

var renderTableView = function () {

var laptopsPerRow;

if (deviceWidth >= 896) {

laptopsPerRow = 4;

} else if (deviceWidth >= 674) {

laptopsPerRow = 3;

} else if (deviceWidth >= 452) {

laptopsPerRow = 4;

} else {

laptopsPerRow = 1;

};

var data = new Array();

var tempLaptopArray = new Array();

for (var i = 0; i < records.length; i++) {

tempLaptopArray.push(records[i]);

};

var laptopRows = 12 / laptopsPerRow;

for (var i = 0; i < laptopRows; i++) {

var currentRowLaptops = new Array();

for (var j = 0; j < laptopsPerRow; j++) {

currentRowLaptops.push(tempLaptopArray[0]);

tempLaptopArray.splice(0, 1);

};

data.push({ laptops: currentRowLaptops });

};

var source =

{

localData: data,

dataType: "array"

};

var dataAdapter = new $.jqx.dataAdapter(source);

var titleInitialization = false;

$("#dataTable").jqxDataTable(

{

width: dataTableWidth,

source: dataAdapter,

pageable: false,

enableHover: false,

selectionMode: 'none',

rendered: function () {

var buyButtons = $(".buy");

buyButtons.jqxButton({ width: "70%", height: 35 });

buyButtons.mouseenter(function () {

buyButtons.css("cursor", "pointer");

});

buyButtons.on("click", function () {

itemsInCart++;

$("#itemsInCart span").text("(" + itemsInCart + ")");

});

var laptopImages = $(".laptopImage");

laptopImages.mouseenter(function () {

laptopImages.css("cursor", "pointer");

});

laptopImages.on("click", function (event) {

laptopDetailedView.fadeIn();

$("#dataTable").css("display", "none");

view = "details";

// renders from table view to details view

render();

for (var i = 0; i < laptopArray.length; i++) {

var currentLaptop = laptopArray[i];

if (event.target.attributes.src.nodeValue == "img/laptop pictures/" + currentLaptop.imgName) {

$("#laptopScrollView").jqxScrollView("changePage", i);

break;

};

$(document).scrollTop(0);

});

columns: [

{

text: 'Product catalog', align: 'center', dataField: 'model', renderer: function (value) {

return "<div id='catalog'>" + value + "</div>";

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; height: 250px; margin: 5px; border: 1px solid #8CB6FF; border-radius: 5px; position: relative; width: 210px;'>";

var laptopName = "<span class='laptopName'>" + laptop.model + "</span>";

var image = "<div style='margin: 5px; margin-bottom: 3px; position: relative;'>";

var imgurl = "img/laptop pictures/" + laptop.imgName;

var img = '<img class="laptopImage" width=160 height=120 title="More information" style="display: block; margin:0px auto;" src="' + imgurl + '"/>';

image += img;

if (laptop.promo == true) {

image += "<img class='promo' src='img/star.png' />";

}

image += "</div>";

var info = "<div class='info' style='margin: 3px;'>";

info += "<div style='border: 1px dashed #8CB6FF; border-radius: 2px; background-color: #EDF3FF;'><span class='featureLabel'>Price</span>: $" + laptop.price + "</div>";

info += "<div><span class='featureLabel'>RAM</span>: " + laptop.ram + "</div>";

info += "<div><span class='featureLabel'>CPU</span>: " + laptop.cpu + "</div>";

info += "<div><span class='featureLabel'>Display</span>: " + laptop.display + "''</div>";

info += "</div>";

var buy = "<button class='buy' style='position: relative; bottom: 0; border-radius: 7px; margin: 0 auto;'>Add to cart</button>";

item += laptopName;

item += image;

item += info;

item += buy;

item += "</div>";

container += item;

}

container += "</div>";

return container;

}

]

});

};

var laptopDetailedView = $("#laptopDetailedView");

var laptopDetails = $("#laptopDetails");

var laptopDetailsHTML = '<tr><th colspan="2" id="featuresHeader" class="featureLabel">Features</th></tr><tr><td class="featureLabel leftTd">RAM:</td><td class="rightTd" id="RAM"></td></tr><tr class="altRow"><td class="featureLabel leftTd">CPU:</td><td class="rightTd" id="CPU"></td></tr><tr><td class="featureLabel leftTd">Video card:</td><td class="rightTd" id="video"></td></tr><tr class="altRow"><td class="featureLabel leftTd">HDD:</td><td class="rightTd" id="HDD"></td></tr><tr><td class="featureLabel leftTd">Display:</td><td class="rightTd" id="display"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Connectivity:</td><td class="rightTd" id="connectivity"></td></tr><tr><td class="featureLabel leftTd">Interfaces:</td><td class="rightTd" id="interfaces"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Battery:</td><td class="rightTd" id="battery"></td></tr><tr><td class="featureLabel leftTd">Weight:</td><td class="rightTd" id="weight"></td></tr><tr class="altRow" id="lastRow"><td class="featureLabel leftTd OSFeature">OS:</td><td class="rightTd" id="OS"></td></tr>';

var renderDetailsView = function () {

var borderSpacing = "6px";

var imageMargin;

var titleBottomMargin = "20px";

var priceTableMargin = "25px";

var starRight;

var tr = "";

var colgroup = '<colgroup><col style="width: 60%;"><col style="width: 40%;"></colgroup>';

var scrollViewHeight;

if (deviceWidth >= 896) {

imageMargin = 0;

starRight = "35px";

scrollViewHeight = 420;

laptopDetails.html(laptopDetailsHTML);

} else if (deviceWidth >= 674) {

imageMargin = "10px";

starRight = "15px";

scrollViewHeight = 340;

laptopDetails.html(laptopDetailsHTML);

} else if (deviceWidth >= 452) {

imageMargin = "20px";

starRight = 0;

scrollViewHeight = 300;

laptopDetails.html(laptopDetailsHTML);

} else {

borderSpacing = "0px";

imageMargin = "30px";

titleBottomMargin = 0;

priceTableMargin = "0px";

starRight = 0;

tr = "</tr><tr>";

colgroup = '<colgroup><col style="width: 100%;"></colgroup>';

scrollViewHeight = 465;

laptopDetails.html('<tr><th colspan="2" id="featuresHeader" class="featureLabel">Features</th></tr><tr class="altRow"><td class="featureLabel leftTd">RAM:</td></tr><tr><td class="rightTd" id="RAM"></td></tr><tr class="altRow"><td class="featureLabel leftTd">CPU:</td></tr><tr><td class="rightTd" id="CPU"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Video card:</td></tr><tr><td class="rightTd" id="video"></td></tr><tr class="altRow"><td class="featureLabel leftTd">HDD:</td></tr><tr><td class="rightTd" id="HDD"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Display:</td></tr><tr><td class="rightTd" id="display"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Connectivity:</td></tr><tr><td class="rightTd" id="connectivity"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Interfaces:</td></tr><tr><td class="rightTd" id="interfaces"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Battery:</td></tr><tr><td class="rightTd" id="battery"></td></tr><tr class="altRow"><td class="featureLabel leftTd">Weight:</td></tr><tr><td class="rightTd" id="weight"></td></tr><tr class="altRow"><td class="featureLabel leftTd">OS:</td></tr><tr><td class="rightTd OSFeature" id="OS"></td></tr>');

};

laptopDetailedView.width(dataTableWidth);

// scroll view

$("#laptopScrollView").remove();

laptopDetails.before('<div id="laptopScrollView"></div>');

var laptopScrollViewHTML = "";

for (var i = 0; i < laptopArray.length; i++) {

var currentLaptop = laptopArray[i];

var model = currentLaptop.model;

var imageSrc = currentLaptop.imgName;

var price = currentLaptop.price;

var promo = "";

if (currentLaptop.promo == true) {

var promo = "<img style='position: absolute; right: " + starRight + "' class='detailsStar' src='img/star.png' />";

};

laptopScrollViewHTML += '<div><table class="laptopDetailsTable" style="width: ' + dataTableWidth + 'px;" border-spacing: ' + borderSpacing + ';">' + colgroup + '<tr><td id="laptopImage' + i + '" valign="top" style="border: none;"><div style="width: 100%; height: 100%; position: relative;"><img src="img/laptop pictures big/' + imageSrc + '" style="width: 100%; margin-top: ' + imageMargin + '" />' + promo + '</div></td>' + tr + '<td valign="top" style="border: none;"><table class="priceTable" style="margin-top: ' + priceTableMargin + ';"> <tr><td class="name featureLabel"><div id="laptopTitle' + i + '" style="margin-bottom: ' + titleBottomMargin + ';">' + model + '</div></td></tr><tr><td class="price">$' + price + '</td></tr><tr><td><button class="buyNow">Buy now</button></td></tr></table></td></tr></table></div>';

};

$("#laptopScrollView")[0].innerHTML = laptopScrollViewHTML;

var buyNow = $(".buyNow");

buyNow.jqxButton({ theme: "darkblue" });

buyNow.addClass("buyNow");

buyNow.mouseenter(function () {

buyNow.css("cursor", "pointer");

});

buyNow.on("click", function () {

itemsInCart++;

$("#itemsInCart span").text("(" + itemsInCart + ")");

});

$("#laptopScrollView").jqxScrollView({ width: "100%", height: scrollViewHeight, currentPage: selectedLaptop, moveThreshold: 0.2 });

$("#laptopScrollView").on("pageChanged", function (event) {

var page = event.args.currentPage;

loadLaptop(page);

selectedLaptop = page;

});

titleHeightAdjust();

loadLaptop(selectedLaptop);

};

var render = function () {

if (view == "table" && tableFlag == false) {

renderCommon();

renderTableView();

tableFlag = true;

} else if (view == "details" && detailsFlag == false) {

renderCommon();

renderDetailsView();

detailsFlag = true;

};

render();

// login window

loginDialog.jqxWindow({ theme: "darkblue", width: 300, height: 160, resizable: false, headerHeight: 30, autoOpen: false, isModal: true, position: "center" });

$("#usernameInput").jqxInput({ theme: "darkblue", width: 200, height: 25 });

$("#passwordInput").jqxPasswordInput({ theme: "darkblue", width: 200, height: 25 });

$("#submit").jqxButton({ theme: "darkblue", height: 35 });

$('#form').on('validationSuccess', function (event) {

loginName = $("#usernameInput").val();

$("#login").text("Welcome, " + loginName);

loginDialog.jqxWindow("close");

});

$("#submit").click(function () {

$("#form").jqxValidator("validate");

});

// login validation

$('#form').jqxValidator({

hintType: 'label',

animationDuration: 0,

rules: [

{ input: '#usernameInput', message: 'Please enter your username.', action: 'none', rule: 'required' },

{ input: '#passwordInput', message: 'Please enter your password.', action: 'none', rule: 'required' }

]

});

$('#form').on('validationError', function (event) {

var tableHeight = $("#loginTable").height();

loginDialog.jqxWindow({ height: tableHeight + 50 });

});