project/js/app.ui.js

   1 /*jslint devel: true*/
   2 /*global tizen, document, $, jQuery, app, UiPanel, UiContact, TemplateManager, window, Helpers */
   3
   4 /**
   5  * @class Ui
   6  */
   7
   8 function Ui(contacts) {
   9         'use strict';
  10         this.init();
  11 }
  12
  13 (function () { // strict mode wrapper
  14         'use strict';
  15         Ui.prototype = {
  16                 /**
  17                  * UI remove mode
  18                  * @type {boolean}
  19                  */
  20                 removeMode: false,
  21
  22                 addressBook: tizen.contact.getDefaultAddressBook(),
  23
  24                 photoURIdefault: null,
  25
  26                 contactsLoaded: null,
  27
  28                 checkedLogs: [],
  29
  30                 /**
  31                  * @type {TemplateManager}
  32                  */
  33                 templateManager: null,
  34
  35                 /**
  36                  * UI Initializer
  37                  */
  38                 init: function Ui_init() {
  39                         this.loadContacts();
  40                         this.templateManager = new TemplateManager();
  41                         this.helpers = new Helpers();
  42                         $(document).ready(this.domInit.bind(this));
  43                         $.mobile.tizen.disableSelection(document);
  44                 },
  45
  46                 /**
  47                  * When DOM is ready, initialise it (bind events)
  48                  */
  49                 domInit: function Ui_domInit() {
  50                         this.templateManager.loadToCache(['callView',
  51                                 'callerHistory',
  52                                 'callItemRow',
  53                                 'callerCallItemRow',
  54                                 'messageWindow',
  55                                 'errorWindow',
  56                                 'dateRow'], this.initPages.bind(this));
  57                 },
  58
  59                 /**
  60                  * UI pages initializer
  61                  */
  62                 initPages: function Ui_initPages() {
  63                         var pages = [], body = $('body');
  64
  65                         body
  66                                 .append(this.templateManager.get('messageWindow'))
  67                                 .append(this.templateManager.get('errorWindow'))
  68                                 .trigger('create');
  69                         $('#callView')
  70                                 .append($(this.templateManager.get('callView'))
  71                                         .children())
  72                                         .trigger('pagecreate')
  73                                         .trigger('pageshow');
  74                         pages.push(this.templateManager.get('callerHistory'));
  75                         body.append(pages.join(''));
  76                         this.removeSearchBarToHeader();
  77
  78                         this.addEvents();
  79                         app.showCallHistory();
  80
  81                         this.photoURIdefault = $("#header .photo").css('background-image');
  82                 },
  83
  84                 /**
  85                  * Add UI events
  86                  */
  87                 addEvents: function Ui_addEvents() {
  88                         var self = this;
  89
  90                         $(window).on('resize', function () {
  91                                 $.mobile.activePage.page('refresh');
  92                         });
  93
  94                         $('#callView').on('pagebeforeshow', function () {
  95                                 app.showCallHistory();
  96                         });
  97
  98                         //original code, do not remove until web-ui release; N_SE-48946
  99                         //$(".ui-scrollview-view").listview();
 100
 101                         $('#historyForCallerView').on('pagebeforeshow', function () {
 102                                 self.hideCheckboxes();
 103                                 $('#historyForCallerView .ui-content.ui-scrollview-clip .ui-scrollview-view')
 104                                         .css('-webkit-transform', 'translate3d(0px, 0px, 0px)');
 105                                 $('#selectAllDetails').on('change', function () {
 106                                         self.selectAll();
 107                                 });
 108                         });
 109
 110                         $('#historyForCallerView').on('pageshow', function () {
 111                                 $('#content').css('top', '160px');
 112                                 $('#header').css('height', '160px');
 113                                 $('#callerListContainer')
 114                                         .children('.ui-overflow-indicator-top', '.ui-overflow-indicator-bottom')
 115                                         .hide();
 116                         });
 117
 118                         $('#callerListContainer').on('scrollstart', function () {
 119                                 $(this)
 120                                         .children('.ui-overflow-indicator-top', '.ui-overflow-indicator-bottom')
 121                                         .fadeIn(200);
 122                         });
 123
 124                         $('#callerListContainer').on('scrollstop', function () {
 125                                 $(this)
 126                                         .children('.ui-overflow-indicator-top', '.ui-overflow-indicator-bottom')
 127                                         .fadeOut(200);
 128                         });
 129
 130                         $('.selectAllBox').children().on('click', function () {
 131                                 $('.selectAllBox input[type=checkbox]').trigger('click');
 132                                 self.selectAll();
 133                                 self.selectAllDetailsEach();
 134                         });
 135
 136                         $('#calllogList').on('click', '.date', function (event) {
 137                                 event.stopPropagation();
 138                         });
 139
 140                         $('#calllogList').on('click', '.call', function onCalllogEntryClick(event) {
 141                                 var remoteParty = $(this)
 142                                         .data('entries')[0]
 143                                         .remoteParties[0]
 144                                         .remoteParty;
 145                                 app.showHistoryForCaller(remoteParty);
 146                                 $.mobile.changePage('#historyForCallerView');
 147                         });
 148
 149                         $('#smsActionBtn').on('click', function (event) {
 150                                 event.stopPropagation();
 151                                 event.preventDefault();
 152                                 self.lockButtons('#smsActionBtn');
 153                                 self.hideCheckboxes();
 154                                 app.sendSms($('#forCallerList').data('remoteParty'));
 155                         });
 156
 157                         $('#callActionBtn').on("click", function (event) {
 158                                 self.lockButtons('#callActionBtn');
 159                                 self.hideCheckboxes();
 160                                 app.makeCall($('#forCallerList').data('remoteParty'));
 161                         });
 162
 163                         $('#deleteActionBtn').on('click', function () {
 164                                 self.changeDetailsToRemoveState();
 165                         });
 166
 167                         $('.selectAllBox').on('click', 'li', function () {
 168                                 var checkbox = $(this).find(':checkbox');
 169                                 if (self.removeMode === true) {
 170                                         if (checkbox.attr('checked')) {
 171                                                 checkbox.attr('checked', false)
 172                                                         .data('checkboxradio')
 173                                                         .refresh();
 174                                         } else {
 175                                                 checkbox.attr('checked', true)
 176                                                         .data('checkboxradio')
 177                                                         .refresh();
 178                                         }
 179                                         self.setSelectAllDetails();
 180                                 }
 181                         });
 182
 183                         $('#popup')
 184                                 .on('click', '#popupCancelActionBtn', this.closePopup.bind(this))
 185                                 .on('click', '#popupSubmitActionBtn', this.deleteCheckedLogs.bind(this));
 186
 187                         $('#errorPopup').on('click', '#errorPopupOkBtn', this.closeErrorPopup);
 188
 189                         $( "#errorPopup" ).bind({
 190                                 popupafterclose: function(){
 191                                         self.unlockButtons();
 192                                 }
 193                         });
 194
 195                         $(window).keyup(function(e){
 196                                 if (e.which === 13) {
 197                                         $('input:focus').blur();
 198                                 }
 199                         });
 200
 201                         window.addEventListener('tizenhwkey', function(e) {
 202                                 if (e.keyName == "back") {
 203                                         if ($.mobile.popup.active) {
 204                                                 $.mobile.popup.active.close();
 205                                         } else if (self.removeMode === true) {
 206                                                 app.ui.changeDetailsToRemoveState(undefined, true);
 207                                         } else if ($.mobile.activePage.attr('id') === 'callView') {
 208                                                 tizen.application.getCurrentApplication().exit();
 209                                         } else {
 210                                                 history.back();
 211                                         }
 212                                 }
 213                         });
 214                         self.onVisibilityChange();
 215                 },
 216
 217                 addEventsForCallerListCheckboxes: function Ui_addEventsForCallerListCheckboxes() {
 218                         var self = this;
 219                         $('#forCallerList :checkbox').on('change', function (event) {
 220                                 if ($(this).attr('checked')) {
 221                                         $(this).attr('checked', true);
 222                                 } else {
 223                                         $(this).attr('checked', false);
 224                                 }
 225                                 self.setSelectAllDetails();
 226                         });
 227                 },
 228
 229                 selectAll: function () {
 230                         if ($('#selectAllDetails').attr('checked')) {
 231                                 this.selectCheckbox($('#selectAllDetails'), true);
 232                         } else {
 233                                 this.selectCheckbox($('#selectAllDetails'), false);
 234                         }
 235                         this.selectAllDetailsEach();
 236                 },
 237
 238                 selectCheckbox: function (obj, state) {
 239                         var deleteButton = $('#deleteActionBtn'), numChecked;
 240                         obj.attr('checked', state)
 241                                 .data('checkboxradio')
 242                                 .refresh();
 243
 244                         numChecked = $('#forCallerList input:checked').length;
 245                         if (this.removeMode && numChecked === 0 && !deleteButton.hasClass('ui-disabled')) {
 246                                 deleteButton.addClass('ui-disabled').attr('tabIndex', '-1').blur();
 247                         } else if (deleteButton.hasClass('ui-disabled')) {
 248                                 deleteButton.removeClass('ui-disabled').attr('tabIndex', '0');
 249                         }
 250                 },
 251
 252                 /**
 253                  * Returns number of selected call logs
 254                  * @return {number} length
 255                  */
 256                 getCountSelectedLogEntries: function Ui_getCountSelectedLogEntries() {
 257                         return $('#forCallerList li .toRemove label.ui-checkbox-on').length;
 258                 },
 259
 260                 selectAllDetailsEach: function Ui_selectAllDetailsEach() {
 261                         var self = this;
 262                         $('#forCallerList').find('input').each(function () {
 263                                 if ($('#selectAllDetails').attr('checked')) {
 264                                         self.selectCheckbox($(this), true);
 265                                 } else {
 266                                         self.selectCheckbox($(this), false);
 267                                 }
 268                         });
 269                 },
 270
 271                 /**
 272                  * Hides checkboxes
 273                  */
 274                 hideCheckboxes: function Ui_hideCheckboxes() {
 275                         var self = this;
 276                         this.selectCheckbox($('#selectAllDetails'), false);
 277
 278                         $('#forCallerList').find('input').each(function () {
 279                                 self.selectCheckbox($(this), false);
 280                         });
 281                         this.changeDetailsToRemoveState('hide');
 282                 },
 283
 284                 /**
 285                  * Returns css classes for specified entry
 286                  *
 287                  * @param {CallHistoryEntry} entry
 288                  * @returns {string}
 289                  */
 290                 cssClassesForEntry: function Ui_cssClassesForEntry(entry) {
 291                         return 'call dir_' + entry.direction.toLowerCase() + ' type_' + entry.type.replace('.', '-').toLowerCase();
 292                 },
 293
 294                 setSelectAllDetails: function Ui_setSelectAllDetails() {
 295                         if ($('#forCallerList input[type="checkbox"]').length ===
 296                                 $('#forCallerList input[checked="checked"]').length) {
 297                                 this.selectCheckbox($('#selectAllDetails'), true);
 298                         } else {
 299                                 this.selectCheckbox($('#selectAllDetails'), false);
 300                         }
 301                 },
 302
 303                 /**
 304                  * Shows popup with specified message
 305                  * @param {string} message
 306                  */
 307                 showPopup: function Ui_showPopup(message) {
 308                         $('#popupMessage').html(message);
 309                         $('#popup').popup('open', {'positionTo': 'window'});
 310                 },
 311
 312                 /**
 313                  * Hides popup
 314                  */
 315                 closePopup: function Ui_closePopup() {
 316                         $('#popup').popup('close');
 317                 },
 318
 319                 showErrorPopup: function Ui_showErrorPopup(message) {
 320                         $('#errorPopupMessage').html(message);
 321                         $('#errorPopup').popup('open', {'positionTo': 'window'});
 322                 },
 323
 324                 closeErrorPopup: function Ui_closeErrorPopup() {
 325                         $('#errorPopup').popup('close');
 326                 },
 327
 328                 /**
 329                  * Deletes checked log entries
 330                  */
 331                 deleteCheckedLogs: function Ui_deleteCheckedLogs(e) {
 332                         this.closePopup();
 333
 334                         this.selectCheckbox($('#selectAllDetails'), false);
 335
 336                         $('#forCallerList li.call').each(function () {
 337                                 if ($(this).find('form label').hasClass('ui-checkbox-on')) {
 338                                         app.deleteLog($(this).data('entries')[0]);
 339                                         $(this).remove();
 340                                 }
 341                         });
 342
 343                         if ($('#forCallerList li.call').length > 0) {
 344                                 this.updateCallerHeaderNumberOfEntries($('#forCallerList li.call').length);
 345                         } else {
 346                                 e.preventDefault();
 347                                 $('.ui-listview-filter .ui-input-text').val('');
 348                                 $('.ui-listview-filter .ui-input-text').trigger('change');
 349                                 $.mobile.changePage('#callView');
 350                         }
 351
 352                         this.changeDetailsToRemoveState(true);
 353                         this.scrollToBottom();
 354                 },
 355
 356                 changeDetailsToRemoveState: function Ui_changeDetailsToRemoveState(set, clear) {
 357                         var counter = this.getCountSelectedLogEntries(),
 358                                 numChecked = $('#forCallerList input:checked').length,
 359                                 matrix, pos;
 360                         if (clear === true) {
 361                                 counter = 0;
 362                                 $('#forCallerList').find(':checkbox').attr('checked', false)
 363                                         .data('checkboxradio').refresh();
 364                                 $('.selectAllBox').find(':checkbox').attr('checked', false)
 365                                         .data('checkboxradio').refresh();
 366                         }
 367                         if (set !== undefined) {
 368                                 this.removeMode = false;
 369                         } else if (counter === 0) {
 370                                 this.removeMode = !this.removeMode;
 371                         }
 372
 373                         if (this.removeMode && numChecked === 0) {
 374                                 $('#deleteActionBtn').addClass('ui-disabled').attr('tabIndex', '-1').blur();
 375                         } else if (!this.removeMode) {
 376                                 $('#deleteActionBtn').removeClass('ui-disabled').attr('tabIndex', '0');
 377                                 this.selectAllDetailsEach();
 378                         }
 379
 380                         if (counter === 0) {
 381                                 if (this.removeMode) {
 382                                         $('#historyForCallerView .toRemove').removeClass('hidden');
 383                                         $('#historyForCallerView .selectAllBox')
 384                                                 .removeClass('hidden');
 385                                 } else {
 386                                         $('#historyForCallerView .toRemove').addClass('hidden');
 387                                         $('#historyForCallerView .selectAllBox').addClass('hidden');
 388                                 }
 389                         } else if (counter > 1) {
 390                                 this.showPopup('Are you sure you want to delete selected logs?');
 391                         } else {
 392                                 this.showPopup('Are you sure you want to delete selected log?');
 393                         }
 394
 395                         matrix = $('#historyForCallerView .ui-scrollview-view').css('transform');
 396                         pos = matrix.substr(7, matrix.length -8).split(',')[5];
 397                         if (pos !== undefined) {
 398                                 $('#callerListContainer').scrollview('scrollTo', 100, parseInt(pos), 10);
 399                         } else {
 400                                 this.refreshScrollView();
 401                         }
 402                 },
 403
 404                 /**
 405                  * Renders call history list
 406                  *
 407                  * @param {CallHistoryEntry[]} callEntries
 408                  */
 409                 showCallHistory: function Ui_showCallHistory(callEntries) {
 410                         var self = this,
 411                                 pdate = null, // previous date
 412                                 date = '',
 413                                 elements = [], // list elements
 414                                 len = callEntries.length, // entries length
 415                                 tempLength = 0, // length of temporary table;
 416                                 i, // loop counter
 417                                 j, // loop counter
 418                                 current, // current entry object
 419                                 today = this.helpers.getShortDate(new Date()), // today short date
 420                                 entryShortDate,
 421                                 filterResult,
 422                                 groupsOfDays = [],
 423                                 dayLog,
 424                                 index = 0,
 425                                 calllogList = $('#calllogList'),
 426                                 calllogListContent = $('#calllogListContent'),
 427                                 calllogListContentPos;
 428
 429                         function filterForSameEntry(element) {
 430                                 return self.getNumber(current) === self.getNumber(element)
 431                                         && current.direction === element.direction;
 432                         }
 433
 434                         $('.selectedCount').hide();
 435
 436                         for (i = 0; i < len; i = i + 1) {
 437                                 current = callEntries[i];
 438                                 date = this.helpers.toNativeDate(current.startTime);
 439
 440                                 // if date is changed create new deyLog;
 441                                 if (date !== pdate) {
 442                                         dayLog = {};
 443                                         dayLog.date = date;
 444                                         dayLog.entries = [];
 445                                         dayLog.counters = [];
 446                                         groupsOfDays.push(dayLog);
 447                                         pdate = date;
 448                                 }
 449
 450                                 // group entries by remote Party;
 451                                 filterResult = dayLog.entries.filter(filterForSameEntry);
 452                                 if (filterResult.length) {
 453                                         index = dayLog.entries.indexOf(filterResult[0]);
 454                                         dayLog.counters[index] += 1;
 455                                 } else {
 456                                         dayLog.entries.push(current);
 457                                         dayLog.counters[dayLog.entries.length - 1] = 1;
 458                                 }
 459                         }
 460                         // Create UL list with dividers;
 461                         len = groupsOfDays.length;
 462                         for (i = 0; i < len; i += 1) {
 463                                 dayLog = groupsOfDays[i];
 464                                 tempLength = dayLog.entries.length;
 465                                 entryShortDate = this.helpers.getShortDate(dayLog.entries[0].startTime);
 466                                 // add date header;
 467                                 //original code, do not remove until web-ui release; N_SE-48946
 468 //                              elements.push($(this.templateManager.get('dateRow', {
 469 //                                      'date': today === entryShortDate ? 'Today' : dayLog.date
 470 //                              })).get(0));
 471
 472                                 for (j = 0; j < tempLength; j = j + 1) {
 473                                         elements.push(this.getCallItemRow(dayLog.entries[j], dayLog.counters[j]));
 474                                 }
 475                         }
 476                         calllogListContentPos = this.helpers.getScrollPosition(calllogListContent);
 477                         calllogList.empty().append(elements);
 478
 479                         /* workaround solution for searching phrase remain*/
 480                         if ($("[data-type='search']").val().length != "") {
 481                                 calllogList.listview('refresh');
 482                                 $("[data-type='search']").trigger("keyup");
 483                                 $(".ui-li-divider").removeClass("ui-li ui-li-divider ui-bar-s").addClass("date");
 484                         } else {
 485                             calllogList.listview({
 486                                         autodividers: true,
 487                                         //filter: true,
 488                                         autodividersSelector: function ( li ) {
 489                                                 return $(li).find('.callDate').text() === app.ui.helpers.toNativeDate(new Date())
 490                                                 ? "Today" : $(li).find('.callDate').text();
 491                                         }
 492                                 }).listview('refresh');
 493                                 $(".ui-li-divider").removeClass().addClass("date");
 494                         }
 495
 496                         setTimeout(this.helpers.scrollTo.bind(this, calllogListContent, calllogListContentPos), 10);
 497                 },
 498
 499                 /**
 500                  * @param: {CallHistoryEntry} entry
 501                  */
 502                 getNumber: function (entry) {
 503                         return entry.remoteParties[0].remoteParty;
 504                 },
 505
 506                 /**
 507                  * Returns HTML for single log entry
 508                  *
 509                  * @param {CallHistoryEntry} entry
 510                  * @param {number} counter
 511                  * @returns {HTMLPartial}
 512                  */
 513                 getCallItemRow: function Ui_getCallItemRow(entry, counter) {
 514                         var party = entry.remoteParties[0],
 515                                 name = this.getNameByNumber(party.remoteParty),
 516                                 tpl;
 517
 518                         if (counter > 1) {
 519                                 name += ' (' + counter + ')';
 520                         }
 521
 522                         tpl = this.templateManager.get('callItemRow', {
 523                                 'name': name,
 524                                 'callTime': this.helpers.toNativeTime(entry.startTime),
 525                                 'callDate': this.helpers.toNativeDate(entry.startTime),
 526                                 'cssClasses': this.cssClassesForEntry(entry),
 527                                 'uid': entry.uid
 528                         });
 529
 530                         return $(tpl)
 531                                 .data('remoteParty', entry.remoteParties[0].remoteParty)
 532                                 .data('entries', [entry])
 533                                 .get(0); // return clean DOM element so array of those could be appended at once*/
 534                 },
 535
 536                 getNameByNumber: function (number) {
 537                         var i, j, contact, name;
 538                         for (i in this.contactsLoaded) {
 539                                 if (this.contactsLoaded.hasOwnProperty(i)) {
 540                                         contact = this.contactsLoaded[i];
 541                                         for (j in contact.phoneNumbers) {
 542                                                 if (contact.phoneNumbers.hasOwnProperty(j)) {
 543                                                         if (contact.phoneNumbers[j].number.substr(-9)
 544                                                                         === number.substr(-9)) {
 545                                                                 name = contact.name.displayName;
 546                                                                 break;
 547                                                         }
 548                                                 }
 549                                         }
 550                                 }
 551                         }
 552                         return name || number || 'Unknown';
 553                 },
 554
 555                 /**
 556                  * Returns HTML for single caller log entry
 557                  *
 558                  * @param {CallHistoryEntry} entry
 559                  * @returns {HTMLElement}
 560                  */
 561                 getCallerCallLogRow: function Ui_getCallerCallLogRow(entry) {
 562                         return $(this.templateManager.get('callerCallItemRow', {
 563                                 'cssClass': this.cssClassesForEntry(entry),
 564                                 'callTime': this.helpers.toNativeTime(entry.startTime),
 565                                 'callDuration': this.helpers.secondsToHours(entry.duration),
 566                                 'uid': entry.uid
 567                         })).data('entries', [entry]).get(0);
 568                 },
 569
 570                 /**
 571                  * Renders call log list for specified caller
 572                  *
 573                  * @param {string} remoteParty
 574                  * @param {CallHistoryEntry[]} entries
 575                  */
 576                 showHistoryForCaller: function Ui_showHistoryForCaller(remoteParty, entries) {
 577                         var pdate = '',
 578                                 date = '',
 579                                 elements = [],
 580                                 len = entries.length,
 581                                 i,
 582                                 checkbox;
 583
 584                         if (len) {
 585                                 this.updateCallerHeader(entries[0], entries.length);
 586                         } else {
 587                                 // if last call log has been removed
 588                                 this.removedLastLog();
 589                                 this.app.lastViewedCaller = 0;
 590                         }
 591
 592                         $('#forCallerList')
 593                                 .data('remoteParty', remoteParty)
 594                                 .data('modified', false)
 595                                 .empty();
 596
 597                         // group caller log entries by date
 598                         for (i = 0; i < len; i = i + 1) {
 599                                 date = this.helpers.toNativeDate(entries[i].startTime);
 600
 601                                 // if date is changed render new header
 602                                 if (date !== pdate) {
 603                                         elements.push($(this.templateManager.get('dateRow', {'date': date})).get(0));
 604                                         pdate = date;
 605                                 }
 606                                 elements.push(this.getCallerCallLogRow(entries[i]));
 607                         }
 608
 609                         $('#forCallerList')
 610                                 .empty()
 611                                 .append(elements);
 612
 613                         if (elements.length > 0) {
 614                                 $('li#delete > a').addClass('ui-btn-active');
 615                         } else {
 616                                 $('li#delete > a').removeClass('ui-btn-active');
 617                         }
 618
 619                         $('#forCallerList').trigger('create');
 620
 621                         // change to remove mode if it was active before registering call
 622                         if (this.removeMode) {
 623                                 this.removeMode = !this.removeMode;
 624                                 this.changeDetailsToRemoveState();
 625                                 // check previous checked entries
 626                                 this.checkedLogs.forEach(function(logUid){
 627                                         checkbox = $('#forCallerList li.call[data-uid="' + logUid + '"]')
 628                                                 .find(':checkbox');
 629
 630                                         if (checkbox.length > 0) {
 631                                                 checkbox.attr('checked', true)
 632                                                         .data('checkboxradio')
 633                                                         .refresh();
 634                                                 $('#deleteActionBtn').removeClass('ui-disabled').attr('tabIndex', '0');
 635                                         }
 636                                 });
 637
 638                                 this.setSelectAllDetails();
 639
 640                                 // close popup if there are no checked checkboxes
 641                                 if (!$("#forCallerList input:checked").length) {
 642                                         if ($.mobile.popup.active) {
 643                                                 $.mobile.popup.active.close();
 644                                         }
 645                                 }
 646                         }
 647                         this.addEventsForCallerListCheckboxes();
 648                         // lock buttons if unknown caller
 649                         if (remoteParty) {
 650                                 this.unlockButtons();
 651                         } else {
 652                                 this.lockButtons('#callActionBtn, #smsActionBtn');
 653                         }
 654                 },
 655
 656                 /**
 657                  * Update accoundId
 658                  * @param {string} accountId
 659                  */
 660                 updateCallerHeaderAccountId: function Ui_updateCallerHeaderAccountId(accountId) {
 661                         $('.infoContainer .accountId').html(accountId);
 662                 },
 663
 664                 /**
 665                  * Update number of entries
 666                  * @param numberOfEntries
 667                  */
 668                 updateCallerHeaderNumberOfEntries: function Ui_updateCallerHeaderNumberOfEntries(numberOfEntries) {
 669                         $('.infoContainer .numberOfEntries').html('' + numberOfEntries + ' ' + (numberOfEntries === 1 ? 'call' : 'calls'));
 670                 },
 671
 672                 /**
 673                  * Updates caller main info
 674                  * @param {CallHistoryEntry} entry
 675                  * @param {number} numberOfEntries
 676                  */
 677                 updateCallerHeader: function Ui_updateCallerHeader(entry, numberOfEntries) {
 678                         var name = '', party, imgPath, personId;
 679
 680                         $('#header .photo').css('background-image', this.photoURIdefault);
 681
 682                         if (entry.remoteParties !== null) {
 683                                 party = entry.remoteParties[0];
 684                                 personId = parseInt(party.personId, 10);
 685                                 name = this.getNameByNumber(party.remoteParty);
 686                                 if (party.displayName) {
 687                                         this.updateCallerHeaderAccountId(party.remoteParty);
 688                                 }
 689                                 this.updateCallerHeaderNumberOfEntries(numberOfEntries);
 690                                 if (personId !== 0) {
 691                                         imgPath = app.getPhotoURIForContact(personId);
 692                                         if (imgPath !== false) {
 693                                                 $('#header .photo').css('background-image', 'url(' + imgPath + ')');
 694                                         }
 695                                 }
 696                         } else if (entry.contactId !== null) {
 697                                 name = entry.accountId;
 698                                 this.updateCallerHeaderAccountId(entry.accountId);
 699                                 this.updateCallerHeaderNumberOfEntries(numberOfEntries);
 700                         } else {
 701                                 name = entry.accountId;
 702                                 this.updateCallerHeaderAccountId('');
 703                                 this.updateCallerHeaderNumberOfEntries(numberOfEntries);
 704                         }
 705                         $('.contact > .infoContainer > .name').html(this.templateManager.modifiers.escape(name));
 706
 707                 },
 708
 709                 loadContacts: function Model_loadContacts(callback) {
 710                         var contactsFoundCB, errorCB;
 711
 712                         this.contactsLoaded = null;
 713
 714                         contactsFoundCB = function (contacts) {
 715                                 this.contactsLoaded = contacts;
 716                                 if (callback instanceof Function) {
 717                                         callback();
 718                                 }
 719                         };
 720
 721                         errorCB = function (error) {
 722                                 console.error('Model_loadContacts, problem with find() method: ' + error.message);
 723                         };
 724
 725                         this.addressBook.find(contactsFoundCB.bind(this), errorCB);
 726                 },
 727
 728                 /**
 729                  * Remove search filter from content and appends it to header
 730                  */
 731                 removeSearchBarToHeader: function () {
 732                         $('#page-header').append($('#callView .ui-listview-filter'));
 733                         $.mobile.activePage.page('refresh');
 734                         $('.ui-input-cancel').remove(); // patch for WebUI bug
 735                         $('#calllogListContent').trigger('resize'); // WebUi scrollview fix
 736                 },
 737
 738                 scrollToBottom: function () {
 739                         var scrollView = $(".ui-scrollview-view");
 740                         scrollView.css("-webkit-transform", "translate3d(0px, -" +
 741                                                 scrollView.height() + "px, 0px)");
 742                 },
 743
 744                 onVisibilityChange: function () {
 745                         var self = this;
 746                         document.addEventListener('webkitvisibilitychange', function () {
 747                                 if (document.webkitVisibilityState === 'hidden') {
 748                                         self.checkedLogs = [];
 749                                         $('#forCallerList li.call').each(function () {
 750                                                 if ($(this).find('form label')
 751                                                         .hasClass('ui-checkbox-on')) {
 752                                                         var checkedEntry = $(this).data('entries')[0];
 753                                                         self.checkedLogs.push(checkedEntry.uid);
 754                                                 }
 755                                         });
 756                                 } else {
 757                                         self.loadContacts(app.updateCallLists.bind(app));
 758                                         $('#callActionBtn, #smsActionBtn')
 759                                                 .removeClass('ui-disabled');
 760                                 }
 761                         });
 762                 },
 763
 764                 lockButtons: function Ui_lockButtons(buttons) {
 765                         $(buttons).addClass('ui-disabled').attr('tabIndex', '-1').blur();
 766                 },
 767
 768                 unlockButtons: function Ui_unlockButtons(){
 769                         $('#callActionBtn, #smsActionBtn').removeClass('ui-disabled').attr('tabIndex', '0');
 770                 },
 771
 772                 /**
 773                  * WORKAROUND;
 774                  * Patch for UI, bad refresh scrollView
 775                  */
 776                 refreshScrollView: function () {
 777                         var scrollView = $('.ui-scrollview-view'),
 778                                 show = function () {
 779                                         scrollView.show();
 780                                 };
 781                         scrollView.hide();
 782                         setTimeout(show, 0);
 783                 },
 784
 785                 removedLastLog: function () {
 786                         this.hideCheckboxes();
 787                         $(".ui-popup").popup('close');
 788                         $.mobile.changePage('#callView');
 789                 }
 790         };
 791
 792 }());