var initialize = function () { 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;
};
};
login.on(
"mouseenter", function () {
if (checkLogin()) {
login.css(
"cursor", "pointer");
} else {
login.css(
"cursor", "default");
};
});
login.on(
"mousedown", function () {
if (checkLogin()) {
login.css(
"background-color", "#004691");
};
});
$(document).on(
"mouseup", function () {
login.css(
"background-color", "#002570");
});
login.on(
"click", 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=