js/vc-webview.js

   1 /**
   2  *   Copyright 2017 Samsung Electronics Co., Ltd.
   3  *
   4  *   Licensed under the Flora License, Version 1.1 (the "License");
   5  *   you may not use this file except in compliance with the License.
   6  *   You may obtain a copy of the License at
   7  *
   8  *       http://floralicense.org/license/
   9  *
  10  *   Unless required by applicable law or agreed to in writing, software
  11  *   distributed under the License is distributed on an "AS IS" BASIS,
  12  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  *   See the License for the specific language governing permissions and
  14  *   limitations under the License.
  15  */
  16
  17 /**
  18  * vc-webview.js
  19  *
  20  *  This source code is a base script of web voice touch.
  21  */
  22
  23  /**
  24  * vc_docs holds analysed documents' first hint number and last hint number
  25  * @member doc  document elements.
  26  * @member start  the first tooltip number in @doc.
  27  * @member end  the last tooltip number in @doc.
  28  */
  29 var vc_docs = [],
  30
  31 vc_conflict_timer = null,
  32
  33 /**
  34  * vc_conflict_links holds references to links that match the same keyword
  35  */
  36 vc_conflict_links = [];
  37
  38 /**
  39  * vc_scr holds info about screen and website
  40  * @member top  coordinate of the top boundary.
  41  * @member left  coordinate of the left boundary.
  42  * @member bottom  coordinate of the bottom boundary.
  43  * @member right  coordinate of the right boundary.
  44  */
  45 var vc_scr = {
  46         top : 0,
  47         left : 0,
  48         bottom : window.innerHeight,
  49         right : window.innerWidth
  50 },
  51
  52 /**
  53  * vc_xpath_query is a query that processes DOM tree to get clickable objects.
  54  * It analyses HTML tree as it is XML and returns matching objects in one of selected forms.
  55  */
  56 vc_xpath_query = ".//xhtml:input[not(@type='hidden')] | .//xhtml:a | .//xhtml:area | .//xhtml:textarea | .//xhtml:button | .//xhtml:*[" +
  57         "@role='link' or @role='button' or @role='checkbox' or @role='combobox' or @role='radio'] |" +
  58         " .//xhtml:div[contains(@class, 'ui-btn')] | .//xhtml:div[contains(@class, 'sideBarButton')] | .//xhtml:div[contains(@class, 'buttonCaption')]",
  59
  60 /**
  61  * vc_page_hints holds all hints on website
  62  */
  63 vc_page_hints = [],
  64
  65 /**
  66  * vc_hint_div is a DIV that gathers all hints
  67  */
  68 vc_hint_div,
  69
  70 /**
  71  * vc_high_div is a DIV that gathers red highlight boxes
  72  */
  73 vc_high_div,
  74
  75 /**
  76  * vc_hint_num is used to numerate hints from 1 on every screen they're displayed
  77  */
  78 vc_hint_num,
  79
  80 /**
  81  * vc_visible_hints holds all hints that are currently visible
  82  */
  83 vc_visible_hints = [],
  84
  85 /**
  86  * vc_bad_iframes holds iframes that should be highlighted with red color
  87  */
  88 vc_bad_iframes = [],
  89
  90 /**
  91  * vc_log_area is a textarea element for log texts.
  92  */
  93 vc_log_area = document.createElement('textarea'),
  94
  95 /**
  96  * vc_html_area is a textarea element to read raw source code of html document in TV.
  97  */
  98 vc_html_area = undefined,
  99
 100 /**
 101  * vc_asr_result is a div element shows the asr result for debugging.
 102  */
 103 vc_asr_result = undefined,
 104
 105 /**
 106  * vc_rec_result is a div element shows the recognition result of document searching for debugging.
 107  */
 108 vc_rec_result = undefined,
 109
 110 /**
 111  * vc_flag_log is a flag variable. If it is true, vc_log_area is created. Otherwise, vc_log_area is nothing.
 112  */
 113 vc_flag_log = false,
 114
 115 /**
 116  * vc_all_elem is a array that includes whole element in html document for text searching.
 117  */
 118 vc_all_elem = undefined,
 119
 120 /**
 121  * vc_flag_conflict is a flag variable. When multiple elements are selected, it is true. Otherwise, it is false.
 122  */
 123 vc_flag_conflict = false,
 124
 125 /**
 126  * vc_flag_hint_exist is a flag variable. When tooltips are already exist, it is true. Otherwise, it is false.
 127  */
 128 vc_flag_hint_exist = false,
 129
 130 /**
 131  * vc_text_indicators is an array that contains text indicator elements
 132  */
 133 vc_text_indicators = [],
 134
 135 /**
 136  * vc_made_hint shows the state tooltip making.
 137  */
 138 vc_made_hint = false,
 139
 140 /**
 141  * vc_tag_index stores index number of the set of tooltips in web page.
 142  * this variable prevents making duplicated tooltips.
 143  */
 144 vc_tag_index = 0;
 145
 146 /**
 147  * prototypes of overridable custom function
 148  */
 149 function vc_custom_pre_generate_hints() {
 150         vc_print_log('No custom script');
 151 }
 152
 153 function vc_custom_pre_show_hints() {
 154         vc_print_log('No custom script');
 155 }
 156
 157 function vc_custom_pre_remove_hints() {
 158         vc_print_log('No custom script');
 159 }
 160
 161 function vc_custom_pre_hide_hints() {
 162         vc_print_log('No custom script');
 163 }
 164 /* ======================== */
 165
 166 /**
 167  * vc_custom_add_xpath_query functino adds given condition to xpath query
 168  *
 169  * @param className  the name of the class of DOM elements
 170  * @param DOMtype(optional)  the type name of DOM element
 171  *
 172  * @remind this function must be called in page specific script
 173  */
 174 function vc_custom_add_xpath_query(className, DOMtype) {
 175         if (undefined == DOMtype) {
 176                 DOMtype = 'div';
 177         }
 178
 179         vc_xpath_query += " | .//xhtml:" + DOMtype + "[contains(@class, '" + className + "')]";
 180 }
 181
 182 /**
 183  * vc_is_child check if element is a child of other element
 184  *
 185  * @param child  child to check the parent of
 186  * @param parent  to test to
 187  *
 188  * @return true if elements are related, false otherwise
 189  */
 190 function vc_is_child(child, parent) {
 191         var node = child.parentNode;
 192         while (node && node != document.body) {
 193                 if (node === parent) {
 194                         return true;
 195                 }
 196                 node = node.parentNode;
 197         }
 198         return false;
 199 }
 200
 201 /**
 202  * vc_is_hidden function checks if the element given as parameter is hidden due to its CSS style
 203  *
 204  * @param elem element to be checked
 205  * @param predecessor predecessor of elem to check visibility if elementFromPoint doesn't return elem
 206  *
 207  * @return true if element is invisible, false otherwise
 208  */
 209 function vc_is_hidden(elem, predecessor) {
 210         if (elem == undefined) {
 211                 return true;
 212         }
 213
 214         /* if predecesor is no found assume parent is one */
 215         if (!predecessor && elem.parentNode) {
 216                 predecessor = elem.parentNode;
 217         }
 218         /* check visibility in css style */
 219         var doc = elem.ownerDocument,
 220         win = doc.defaultView,
 221         computedStyle = win.getComputedStyle(elem, null);
 222
 223         if (computedStyle.getPropertyValue('visibility') !== 'visible' || computedStyle.getPropertyValue('display') === 'none') {
 224                 return true;
 225         }
 226
 227         /* object is visible check if it is on current screen */
 228         var rect = elem.getBoundingClientRect(),
 229         x = rect.left + (rect.width / 2),
 230         y = rect.top + (rect.height / 2),
 231         point;
 232
 233         if (y < 0 && x >= 0) {
 234                 y = 0;
 235         } else if (y < 0 && x < 0) {
 236                 x = y = 0;
 237         } else if (y >= 0 && x < 0) {
 238                 x = 0;
 239         }
 240
 241         point = doc.elementFromPoint(x, y);
 242         /* if elementFromPoint returns HTMLBodyElement it probably is a scroll left/right list and it is hidden */
 243         if (point === doc.body) {
 244                 return true;
 245         }
 246         /* if elementFromPoint returns predecessor it is visible */
 247         if (point && predecessor && vc_is_child(point, predecessor)) {
 248                 return false;
 249         }
 250
 251         return true;
 252 }
 253
 254 /**
 255  * vc_is_visible function checks if the element provided as argument is currently visible on screen
 256  *
 257  * @param elem  element to be checked
 258  * @param scr  screen information
 259  * @param isTextLink  determines if the element is text link
 260  *
 261  * @return true if visible false otherwise
 262  */
 263 function vc_is_visible(elem, scr, isTextLink) {
 264         if (elem == undefined) {
 265                 return false;
 266         }
 267
 268         if (!scr) {
 269                 scr = {
 270                         top : 0,
 271                         left : 0,
 272                         bottom : window.innerHeight,
 273                         right : window.innerWidth
 274                 };
 275         }
 276         // if only two parameters passed to function assume isTextLink is false
 277         isTextLink = typeof isTextLink !== 'undefined' ? isTextLink : false;
 278
 279         var docy = elem.ownerDocument,
 280         win = docy.defaultView,
 281         computedStyle = win.getComputedStyle(elem, null);
 282
 283         /* element is not visible if it is fully transparent except select box  */
 284         if (parseFloat(computedStyle.getPropertyValue('opacity')) === 0.0) {
 285                 return false;
 286         }
 287
 288         var rect = elem.getBoundingClientRect();
 289
 290         /* element is not visible if it is not on screen */
 291         if (!rect || rect.top >= scr.bottom || rect.bottom <= scr.top || rect.left >= scr.right ||
 292                 rect.right <= scr.left) {
 293                 return false;
 294         }
 295
 296         /* element is not visible if it is hidden and it is not a text hyperlink */
 297         if (!isTextLink && vc_is_hidden(elem, null)) {
 298                 return false;
 299         }
 300
 301         return true;
 302 }
 303
 304 /**
 305  * vc_make_hint procedure creates invisible hint for element provided as argument
 306  *
 307  * @param elem  element for which hint is to be created
 308  * @param child  if child is passed, the hint will be positioned according to position of child
 309  */
 310 function vc_make_hint(elem, child) {
 311         // vc_print_log(elem);
 312         var rect;
 313
 314         rect = child.getBoundingClientRect();
 315
 316         if (!rect || elem.vc_tag_index == vc_tag_index) {
 317                 return;
 318         }
 319
 320         elem.vc_tag_index = vc_tag_index;
 321
 322         var doc = elem.ownerDocument;
 323
 324         /** hint object holds clickable element, type of element and created hint (HTMLSpanElement)
 325          * @member elem  clickable target element.
 326          * @member type  the type of @elem.
 327          * @member child  child element of @elem
 328          * @member span  tooltip element of @elem
 329          */
 330         var hint = {
 331                 elem : elem,
 332                 type : 'normal',
 333                 child : child,
 334                 span : null
 335         };
 336
 337         if(elem instanceof HTMLAreaElement){
 338                 hint.type = 'area';
 339         }
 340
 341         /* not all input objects are supported */
 342         if (elem instanceof HTMLInputElement) {
 343                 if (elem.type === 'text' || elem.type === 'password' || elem.type === 'datetime' || elem.type === 'email' ||
 344                         elem.type === 'search' || elem.type === 'number' || elem.type === 'url') {
 345                         hint.type = 'input';
 346                 } else if (elem.type !== 'button' && elem.type !== 'submit' && elem.type !== 'color' && elem.type !== 'radio' &&
 347                         elem.type !== 'checkbox' && elem.type !== 'file' && elem.type !== 'submit' && elem.type !== 'image') {
 348                         return;
 349                 }
 350         /* consider TextArea element as input element */
 351         } else if (elem instanceof HTMLTextAreaElement) {
 352                 hint.type = 'input';
 353         }
 354
 355         /** span object is the visual representation of hint */
 356         var span = doc.createElement('span');
 357         span.id = 'vc_tooltip';
 358         span.className = 'vc_number_tag_normal vc_tooltip_' + hint.type;
 359
 360         if (hint.type == 'input') {
 361                 span.classList.add('vc_tip_tier_first');
 362         } else if (rect.height > 30) {
 363                 span.classList.add('vc_tip_tier_second');
 364         } else {
 365                 span.classList.add('vc_tip_tier_third');
 366         }
 367
 368         hint.span = span;
 369
 370         /* appends hint to vc_hint_div container */
 371         vc_hint_div.appendChild(hint.span);
 372         vc_page_hints.push(hint);
 373 }
 374
 375 /**
 376  * nsResolver function that is used for resolving namespace in webpage document
 377  *
 378  * @param prefix  prefix of the namespace
 379  *
 380  * @return namespace url
 381  */
 382 function nsResolver(prefix) {
 383         var namespace = {
 384                 'xhtml' : 'http://www.w3.org/1999/xhtml' //add other namespaces if needed
 385         };
 386         return namespace[prefix] || null;
 387 }
 388
 389 /**
 390  * vc_generate_hints function creates hints for all clickable elements on web page
 391  *
 392  * @param win  window element (can be different if we analyse iframe)
 393  */
 394 function vc_generate_hints(win) {
 395         vc_print_log('== start generate hints' + win);
 396         vc_tag_index++;
 397
 398         /* if win is not passed assume the global window variable */
 399         if (!win) {
 400                 win = window;
 401         }
 402
 403         var doc;
 404
 405         try {
 406                 doc = win.document;
 407         } catch (e) {
 408                 vc_print_log('== some error occured in win.document' + e);
 409                 return;
 410         }
 411
 412         /* Custom pre process to generate hints */
 413         vc_custom_pre_generate_hints();
 414
 415         var start = vc_page_hints.length;
 416
 417         vc_hint_div = doc.createElement('div');
 418         vc_hint_div.id = 'vc_tooltip_area';
 419         vc_hint_div.style.display = 'block';
 420
 421         vc_text_indicators = [];
 422
 423         /* return result as snapshot not iterator, due to problems with undefined objects */
 424         vc_print_log('== start doc.evaluate');
 425         var snapshot = doc.evaluate(vc_xpath_query, doc.body, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 426         vc_print_log('== snapshot length : ' + snapshot.snapshotLength);
 427
 428         /* set current screen dimensions */
 429         vc_scr = {
 430                 top : 0,
 431                 left : 0,
 432                 bottom : win.innerHeight,
 433                 right : win.innerWidth
 434         };
 435
 436         /* analyse if a hint is needed for each returned object */
 437         for (var i = 0; i < snapshot.snapshotLength; i++) {
 438                 var element = snapshot.snapshotItem(i),
 439                 rect = element.getBoundingClientRect();
 440
 441                 vc_made_hint = false;
 442                 /* executed very rarely */
 443                 if (rect.width === 0 || rect.height === 0) {
 444                         for (var j = 0; j < element.childNodes.length; j++) {
 445                                 if (element.childNodes[j].nodeType !== 1) {
 446                                         continue;
 447                                 }
 448
 449                                 var style = doc.defaultView.getComputedStyle(element.childNodes[j], null);
 450                                 if (style && style.getPropertyValue('float') !== 'none' && vc_is_visible(element.childNodes[j], vc_scr)) {
 451                                         vc_make_hint(element, element.childNodes[j]);
 452                                         vc_made_hint = true;
 453                                         break;
 454                                 }
 455                         }
 456
 457                         if (vc_made_hint) {
 458                                 continue;
 459                         }
 460                 }
 461
 462                 if (vc_is_visible(element, vc_scr) && !element.attributes.disabled) {
 463                         if ((element instanceof HTMLButtonElement || element.classList.contains('ui-btn') || element.getAttribute('role') == 'button')) {
 464                                 if (element.textContent.trim().replace(/[ `~!‘’@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '').length > 0) {
 465                                         vc_text_indicators[vc_text_indicators.length] = element;
 466                                 } else {
 467                                         vc_make_hint(element, element);
 468                                         vc_made_hint = true;
 469                                 }
 470                         } else if (element.getAttribute('role') == 'radio' || element.getAttribute('role') == 'checkbox' || element.getAttribute('role') == 'combobox') {
 471                                 vc_make_hint(element, element);
 472                                 vc_made_hint = true;
 473                         /* if the element is an anchor without text, make hint */
 474                         } else if (element instanceof HTMLAnchorElement) {
 475                                 if (element.textContent.trim().length > 0) {
 476                                         vc_text_indicators[vc_text_indicators.length] = element;
 477                                 }
 478
 479                                 var cStyle = window.getComputedStyle(element, false);
 480                                 if (cStyle.backgroundImage !== 'none' && cStyle.backgroundImage !== 'inherit') {
 481                                         vc_make_hint(element, element);
 482                                         vc_made_hint = true;
 483                                 } else if (element.textContent.trim().length == 0) {
 484                                         /* if element has child with background or image element*/
 485                                         if (!vc_made_hint) {
 486                                                 var childs = element.querySelectorAll('*');
 487                                                 for (var sp = 0; sp < childs.length; ++sp) {
 488                                                         if (vc_is_visible(childs[sp], vc_scr)) {
 489                                                                 var cstyle = win.getComputedStyle(childs[sp], false);
 490                                                                 if (childs[sp].nodeName == 'IMG' || cstyle.overflow == 'hidden'
 491                                                                         || (cstyle.backgroundImage !== 'none' && cstyle.backgroundImage !== 'inherit')) {
 492                                                                         vc_make_hint(element, childs[sp]);
 493                                                                         vc_made_hint = true;
 494                                                                         break;
 495                                                                 }
 496                                                         }
 497                                                 }
 498                                         }
 499
 500                                         if (!vc_made_hint) {
 501                                                 vc_make_hint(element, element);
 502                                                 vc_made_hint = true;
 503                                                 continue;
 504                                         }
 505                                 } else {
 506                                         if (isNaN(element.textContent.trim())) {
 507                                                 vc_find_img_element(element, null, element);
 508                                         }
 509                                 }
 510                         } else if (element instanceof HTMLAreaElement || element.nodeName == 'INPUT') {
 511                                 vc_make_hint(element, element);
 512                         } else {
 513                                 vc_find_img_element(element, null, element);
 514                                 if (vc_made_hint == false) {
 515                                         vc_make_hint(element, element);
 516                                 }
 517                         }
 518                 }
 519         }
 520
 521         /* append whole div with hints to body */
 522         if (doc.body) {
 523                 doc.body.insertBefore(vc_hint_div, doc.body.firstChild);
 524
 525                 //append all text indicators to body
 526                 vc_docs.push({
 527                         doc : doc,
 528                         start : start,
 529                         end : vc_page_hints.length - 1
 530                 });
 531         }
 532
 533         /* analyse iframes of the website */
 534         if (win === window) {
 535                 var frames = document.querySelectorAll('iframe');
 536                 for (var f = 0; f < frames.length; f++) {
 537                         var elem;
 538                         try {
 539                                 elem = frames[f].contentWindow.document;
 540                         } catch (e) {
 541                                 vc_bad_iframes.push(frames[f]);
 542                                 continue;
 543                         }
 544                         vc_scr = {
 545                                 top : 0,
 546                                 left : 0,
 547                                 bottom : win.innerHeight,
 548                                 right : win.innerWidth
 549                         };
 550                         if (elem == undefined) {
 551                                 vc_bad_iframes.push(frames[f]);
 552                                 continue;
 553                         }
 554                         if (elem != undefined && !vc_is_visible(frames[f], vc_scr)) {
 555                                 continue;
 556                         }
 557                         // vc_generate_hints(frames[f].contentWindow);
 558                 }
 559         }
 560
 561         vc_flag_hint_exist = true;
 562         vc_print_log('== end');
 563 }
 564
 565 /**
 566  * vc_find_img_element function find element containing image. if found then call a function to make a tooltip.
 567  *
 568  * @param elem  element to search for text
 569  * @param parent  parent element of the @elem
 570  * @param snapshotElem  the first @elem when vc_generate_hints calls this function
 571  */
 572 function vc_find_img_element(elem, parent, snapshotElem) {
 573         if (!vc_made_hint) {
 574                 if (elem.nodeType == 1) {
 575                         var cStyle = document.defaultView.getComputedStyle(elem, false);
 576                         if ((vc_is_visible(elem, vc_scr) && cStyle && cStyle.backgroundImage != 'none' && cStyle.backgroundImage != 'inherit' || elem.nodeName == 'IMG')) {
 577                                 vc_make_hint(snapshotElem, elem);
 578                                 vc_made_hint = true;
 579                                 return;
 580                         }
 581                 }
 582
 583                 var children = elem.childNodes;
 584                 for (var ch = 0; !vc_made_hint && ch < children.length; ch++) {
 585                         vc_find_img_element(children[ch], elem, snapshotElem);
 586                 }
 587         }
 588
 589 }
 590
 591 /**
 592  * vc_show_hints function displays hints numbering from 1
 593  */
 594 function vc_show_hints() {
 595         /* Custom pre process to show hints */
 596         vc_custom_pre_show_hints();
 597
 598         if (vc_flag_log == true) {
 599                 if (vc_asr_result == undefined) {
 600                         vc_asr_result = document.createElement('div');
 601                         vc_asr_result.id = 'vc_asr_result';
 602                         vc_asr_result.innerHTML = 'ASR Result';
 603                         document.body.appendChild(vc_asr_result);
 604                 }
 605
 606                 if (vc_rec_result == undefined) {
 607                         vc_rec_result = document.createElement('div');
 608                         vc_rec_result.id = 'vc_rec_result';
 609                         document.body.appendChild(vc_rec_result);
 610                 }
 611         }
 612
 613         vc_hint_num = 1;
 614         for (var d = 0; d < vc_docs.length; d++) {
 615                 var doc = vc_docs[d];
 616                 for (var i = doc.start; i <= doc.end; i++) {
 617                         var win = doc.doc.defaultView,
 618                         hint = vc_page_hints[i],
 619                         rect = hint.child.getClientRects()[0];
 620
 621                         vc_scr = {
 622                                 top : 0,
 623                                 left : 0,
 624                                 bottom : win.innerHeight,
 625                                 right : win.innerWidth
 626                         };
 627
 628                         hint.span.style.display = 'block';
 629
 630                         if (null == rect) {
 631                                 continue;
 632                         }
 633
 634                         var leftPos,
 635                         topPos,
 636                         position_factor_top,
 637                         position_factor_left;
 638
 639                         if (vc_flag_conflict) {
 640                                 position_factor_top = 18;
 641                                 position_factor_left = 18;
 642                                 hint.span.className = 'vc_text_indicator_conflict_normal vc_tooltip_normal vc_tip_tier_second';
 643                         } else {
 644                                 position_factor_top = 15;
 645                                 position_factor_left = 15;
 646                         }
 647
 648                         if (rect.top < position_factor_top) {
 649                                 topPos = win.pageYOffset;
 650                         } else {
 651                                 topPos = rect.top + win.pageYOffset - position_factor_top;
 652                         }
 653
 654                         if (rect.left < position_factor_left) {
 655                                 leftPos = win.pageXOffset;
 656                         } else {
 657                                 leftPos = rect.left + win.pageXOffset - position_factor_left;
 658                         }
 659
 660                         if (hint.type == 'area') {
 661                                 coord = hint.elem.coords.split(',');
 662                                 leftPos = parseFloat(leftPos) + parseFloat(coord[0]);
 663                                 topPos = parseFloat(topPos) + parseFloat(coord[1]);
 664                         }
 665                         hint.span.style.top = topPos + 'px';
 666                         hint.span.style.left = leftPos + 'px';
 667                         hint.span.textContent = vc_hint_num;
 668
 669                         hint.span.style.display = 'block';
 670
 671                         if (-1 == vc_visible_hints.indexOf(hint)) {
 672                                 vc_visible_hints.push(hint);
 673                         }
 674
 675                         vc_hint_num++;
 676                 }
 677         }
 678
 679         // for (var bf = 0; bf < vc_bad_iframes.length; ++bf) {
 680         //      vc_result_highlight(vc_bad_iframes[bf]);
 681         // }
 682 }
 683
 684 /**
 685  * vc_remove_hints function removes all hints in the web page. It deletes both visible and hidden hints
 686  */
 687 function vc_remove_hints() {
 688         /* Custom pre process to remove hints */
 689         vc_custom_pre_remove_hints();
 690
 691         vc_remove_highlight();
 692
 693         for (var d = 0; d < vc_docs.length; d++) {
 694                 var doc = vc_docs[d].doc;
 695                 var tooltipArea = doc.querySelector('#vc_tooltip_area');
 696                 if (null !== tooltipArea && tooltipArea.parentNode) {
 697                         tooltipArea.parentNode.removeChild(tooltipArea);
 698                 }
 699         }
 700         vc_visible_hints = [];
 701         vc_page_hints = [];
 702         vc_docs = [];
 703
 704         /** if the rotation occured refresh the window information */
 705         vc_scr = {
 706                 top : 0,
 707                 left : 0,
 708                 bottom : window.innerHeight,
 709                 right : window.innerWidth
 710         };
 711
 712         vc_hint_div = null;
 713         vc_flag_hint_exist = false;
 714         vc_flag_conflict = false;
 715 }
 716
 717 /**
 718  * vc_hide_hints function hides the hints from the screen. Hints elements still exist
 719  */
 720 function vc_hide_hints() {
 721         /* Custom pre process to hide hints */
 722         vc_custom_pre_hide_hints();
 723
 724         for (var i = 0; i < vc_visible_hints.length; i++) {
 725                 var hint = vc_visible_hints[i];
 726                 if (hint.span.classList.contains('vc_tooltip_focus') == false) {
 727                         hint.span.style.display = 'none';
 728                         hint.span.style.top = 0;
 729                         hint.span.style.left = 0;
 730                 }
 731         }
 732 }
 733
 734 /**
 735  * vc_remove_popup function removes popup.
 736  * This function is safe to call if the popup doesnt exist.
 737  */
 738 function vc_remove_popup() {
 739         var node = document.querySelector('#vc_popup');
 740         if (null !== node && node.parentNode) {
 741                 node.parentNode.removeChild(node);
 742         }
 743 }
 744
 745 /**
 746  * vc_show_popup function displays a floating div over the web page with text in it for timout milliseconds
 747  *
 748  * @param text  text to be shown on the popup
 749  * @param timeout  time for which the popup should be shown in milliseconds. If timeout is 0 popup must be deleted manually
 750  */
 751 function vc_show_popup(text, timeout) {
 752         /* remove any existing popup */
 753         vc_remove_popup();
 754
 755         /* overlay creates a light grey area over the whole website */
 756         var overlay = document.createElement('div');
 757         overlay.id = 'vc_popup';
 758
 759         /* vcpopup is the main popup window, that is centered over the overlay */
 760         var vcpopup = document.createElement('div');
 761         vcpopup.id = 'vc_popup_content';
 762
 763         /* content is used to display text and center it vertically inside vcpopup */
 764         var content = document.createElement('div');
 765         content.style.display = 'table-cell';
 766         content.style.fontFamily = '"Open Sans", "Helvetica", sans-serif';
 767         content.style.verticalAlign = 'middle';
 768         content.innerHTML = text;
 769
 770         vcpopup.appendChild(content);
 771         overlay.appendChild(vcpopup);
 772         document.body.appendChild(overlay);
 773
 774         /* if timeout is set to 0, display popup until not deleted manually */
 775         if (timeout !== 0) {
 776                 setTimeout(function () {
 777                         vc_remove_popup();
 778                 }, timeout);
 779         }
 780
 781         return;
 782 }
 783
 784 /**
 785  * vc_remove_highlight removes highlight from conflicting links
 786  *
 787  * @param selectedNum  the number of target tooltip
 788  */
 789 function vc_remove_highlight(selectedNum) {
 790         if (selectedNum) {
 791                 var high = document.querySelectorAll('#vc_highlight');
 792                 for (var cn = 0; cn < high.length; cn++) {
 793                         if ((cn + 1) != selectedNum) {
 794                                 high[cn].parentNode.removeChild(high[cn]);
 795                         }
 796                 }
 797         } else {
 798                 var highlightArea = document.querySelector('#vc_highlight_area');
 799                 if (highlightArea) {
 800                         highlightArea.parentNode.removeChild(highlightArea);
 801                 }
 802         }
 803 }
 804
 805 /**
 806  * vc_result_highlight creates highlight box over elem
 807  *
 808  * @param elem  element to be highlighted
 809  */
 810 function vc_result_highlight(elem) {
 811         var doc = elem.ownerDocument,
 812         rect;
 813
 814         if (vc_is_visible(elem) == false && elem.querySelector('img')) {
 815                 rect = elem.querySelector('img').getClientRects()[0];
 816         } else {
 817                 rect = elem.getClientRects()[0];
 818         }
 819
 820         if (!rect) {
 821                 return;
 822         }
 823
 824         vc_high_div = document.querySelector('#vc_highlight_area');
 825
 826         if (!vc_high_div) {
 827                 vc_high_div = doc.createElement('div');
 828                 vc_high_div.id = 'vc_highlight_area';
 829                 doc.body.appendChild(vc_high_div);
 830         }
 831
 832         var high_span = doc.createElement('div');
 833         high_span.id = 'vc_highlight';
 834
 835         /* top left position of the element */
 836         var leftPos = (rect.left > vc_scr.left ? rect.left : vc_scr.left);
 837         var topPos = (rect.top > vc_scr.top ? rect.top : vc_scr.top);
 838
 839         /* adjust top left position with page scroll */
 840         topPos += window.pageYOffset - 3;
 841         leftPos += window.pageXOffset - 3;
 842
 843         high_span.style.left = leftPos + 'px';
 844         high_span.style.top = topPos + 'px';
 845         high_span.style.width = rect.width + 'px';
 846         high_span.style.height = (rect.height + 6) + 'px';
 847
 848         /* if element's dimensions are 0x0 create highlight for it's children */
 849         if (rect.width === 0 || rect.height === 0) {
 850                 var height = topPos + rect.height;
 851                 var width = leftPos + rect.width;
 852                 for (var i = 0; i < elem.children.length; i++) {
 853                         var child = elem.children[i];
 854                         var chRect = child.getClientRects()[0];
 855                         if (!chRect) {
 856                                 continue;
 857                         }
 858                         if (chRect.top + chRect.height > height) {
 859                                 height = chRect.top + chRect.height;
 860                         }
 861                         if (chRect.left + chRect.width > width) {
 862                                 width = chRect.left + chRect.width;
 863                         }
 864                 }
 865                 high_span.style.height = height - topPos + 'px';
 866                 high_span.style.width = width - leftPos + 'px';
 867         }
 868
 869         vc_high_div.appendChild(high_span);
 870 }
 871
 872 /**
 873  * vc_generate_conflict_hints function creates hints for all conflicting highlighted hints
 874  */
 875 function vc_generate_conflict_hints() {
 876         vc_hint_div = document.querySelector('#vc_tooltip_area');
 877
 878         if (!vc_hint_div) {
 879                 vc_hint_div = document.createElement('div');
 880                 vc_hint_div.id = 'vc_tooltip_area';
 881                 document.body.insertBefore(vc_hint_div, document.body.firstChild);
 882         }
 883
 884         vc_scr = {
 885                 top : 0,
 886                 left : 0,
 887                 bottom : window.innerHeight,
 888                 right : window.innerWidth
 889         };
 890
 891         /* Conflict links */
 892         var conflicts = vc_conflict_links;
 893
 894         for (var i = 0; i < conflicts.length; i++) {
 895                 var elem = conflicts[i];
 896                 var rect;
 897
 898                 vc_result_highlight(elem);
 899                 if (vc_is_visible(elem, vc_scr) == false && elem.querySelector('img') != null) {
 900                         rect = elem.querySelector('img').getClientRects()[0];
 901                 } else {
 902                         rect = elem.getClientRects()[0];
 903                 }
 904
 905                 if (!rect) {
 906                         return;
 907                 }
 908
 909                 var leftPos,
 910                 topPos,
 911                 position_factor_top = 20, //[TODO]move at proper place
 912                 position_factor_left = 28,
 913                 hint = {},
 914                 span = document.createElement('span');
 915                 span.id = 'vc_tooltip';
 916
 917                 if (rect.top < position_factor_top) {
 918                         topPos = window.pageYOffset + 'px';
 919                 } else {
 920                         topPos = rect.top + window.pageYOffset - position_factor_top + 'px';
 921                 }
 922
 923                 if (rect.left < position_factor_left) {
 924                         leftPos = window.pageXOffset + 'px';
 925                 } else {
 926                         leftPos = rect.left + window.pageXOffset - position_factor_left + 'px';
 927                 }
 928
 929                 /* tooltip style, !please keep styles sorted */
 930                 hint.span = span;
 931                 hint.span.style.top = topPos;
 932                 hint.span.style.left = leftPos;
 933                 vc_hint_div.appendChild(hint.span);
 934
 935                 hint.elem = elem;
 936                 hint.child = vc_high_div.childNodes[i];
 937                 vc_page_hints[vc_page_hints.length] = hint;
 938         }
 939
 940         vc_docs.push({
 941                 doc : document,
 942                 start : 0,
 943                 end : vc_page_hints.length - 1
 944         });
 945
 946         vc_flag_hint_exist = true;
 947         vc_flag_conflict = true;
 948         vc_conflict_timer = setTimeout(vc_remove_hints, 5000);
 949
 950         vc_show_hints();
 951 }
 952
 953 /**
 954  * vc_trigger_event function makes custom DOM event
 955  *
 956  * @param node  target element taking event
 957  * @param eventType  type of the custom event
 958  */
 959 function vc_trigger_event(node, eventType) {
 960         try {
 961                 var clickEvent = new Event(eventType);
 962                 node.dispatchEvent(clickEvent);
 963         } catch (e) {
 964                 console.log('error ouccured', e);
 965         }
 966 }
 967
 968 /**
 969  * vc_do_action function creates event for selected element.
 970  *
 971  * @param targetElem  selected element
 972  * @param numberTag  number of selected tooltip
 973  * @param value(option)  text entered into selected input element
 974  *
 975  * @return array including coordinates of the @targetElem and the number of targetElem.
 976  */
 977 function vc_do_action(targetElem, numberTag, value) {
 978         vc_print_log('=== Inside vc_do_action');
 979         vc_print_log(targetElem.elem.outerHTML);
 980
 981         var elem = targetElem.elem,
 982         type = targetElem.type,
 983         position,
 984         effect;
 985
 986         if (!targetElem) {
 987                 return;
 988         }
 989
 990         /* Create click effect element */
 991         effect = document.createElement('div');
 992         effect.id = 'vc_click_effect';
 993
 994         if (numberTag != undefined) {
 995                 position = numberTag.getBoundingClientRect();
 996                 effect.style.left = (position.left + (position.width / 2) - 35) + 'px'
 997                 effect.style.top = (position.top + (position.height / 2) - 35) + 'px'
 998
 999                 numberTag.classList.add('vc_tooltip_focus');
1000                 numberTag.style.display = 'block';
1001
1002                 //conflicts
1003                 if (vc_flag_conflict) {
1004                         vc_remove_highlight(numberTag.textContent.trim());
1005                 }
1006                 vc_hide_hints();
1007         } else {
1008                 position = elem.getClientRects()[0];
1009                 effect.style.left = (position.left - 35) + 'px'
1010                 effect.style.top = (position.top - 35) + 'px'
1011
1012                 //text indicators
1013                 vc_result_highlight(elem);
1014                 elem.classList.add('vc_text_focus');
1015
1016                 vc_text_indicators[vc_text_indicators.length] = elem;
1017         }
1018
1019         document.body.insertBefore(effect, document.body.firstChild);
1020
1021         /* Occurring events */
1022         try {
1023                 if (type == 'input' && value != undefined) {
1024                         setTimeout(function () {
1025                                 elem.value = value;
1026                                 vc_trigger_event(elem, 'keyup');
1027                                 vc_trigger_event(elem, 'input');
1028                                 try {
1029                                         elem.form.submit();
1030                                 } catch (e) {
1031                                         console.log(e);
1032                                 }
1033
1034                                 document.body.removeChild(effect);
1035                                 vc_remove_hints();
1036                         }, 1500);
1037
1038                         return [0, 0, 0]
1039                 }
1040
1041                 setTimeout(function () {
1042                         if (vc_asr_result != undefined) {
1043                                 vc_asr_result.parentElement.removeChild(vc_asr_result);
1044                                 vc_asr_result = undefined;
1045                         }
1046                         if (vc_rec_result != undefined) {
1047                                 vc_rec_result.parentElement.removeChild(vc_rec_result);
1048                                 vc_rec_result = undefined;
1049                         }
1050
1051                         if (numberTag == undefined) {
1052                                 elem.classList.remove('vc_text_focus');
1053                         }
1054
1055                         document.body.removeChild(effect);
1056                         vc_remove_hints();
1057
1058                         elem.blur();
1059                         elem.focus();
1060
1061                         vc_print_log('=== Click Finish');
1062                 }, 2000);
1063
1064                 var rect = elem.getClientRects()[0],
1065                 x = rect.left + (rect.width / 2),
1066                 y = rect.top + (rect.height / 2);
1067                 if (null == rect) {
1068                         vc_print_log('[ERROR] Target element is not valid')
1069                         return [-1, 0, 0];
1070                 }
1071
1072                 if (x < 0) {
1073                         x = 0;
1074                 }
1075                 if (y < 0) {
1076                         y = 0;
1077                 }
1078                 return [1, x / window.innerWidth, y / window.innerHeight];
1079         } catch (e) {
1080                 console.log(e);
1081                 return [-1, 0, 0];
1082         }
1083 }
1084
1085 /**
1086  * vc_click function triggers click on element connected to cmd and param. Assumption is made that tooltips are numbers!
1087  *
1088  * @param cmd  tooltip tag number from voice-control
1089  * @param param  text parameter from voice-control
1090  */
1091 function vc_click(cmd, param) {
1092         vc_print_log('== start click cmd = ' + cmd + ', param = ' + param + ', visible tags = ' + vc_visible_hints.length);
1093
1094         if (vc_flag_log == true) {
1095                 if (vc_asr_result != undefined) {
1096                         vc_asr_result.innerHTML = param;
1097                 }
1098
1099                 setTimeout(function () {
1100                         if (vc_asr_result != undefined) {
1101                                 vc_asr_result.parentElement.removeChild(vc_asr_result);
1102                                 vc_asr_result = undefined;
1103                         }
1104                         if (vc_rec_result != undefined) {
1105                                 vc_rec_result.parentElement.removeChild(vc_rec_result);
1106                                 vc_rec_result = undefined;
1107                         }
1108                 }, 2500);
1109         }
1110
1111         /* pre-defined rule checker */
1112         if (vc_check_web_control(param) == true) {
1113                 vc_remove_hints();
1114
1115                 return [0, 0, 0];
1116         }
1117
1118         // if cmd has a numerical value
1119         if (isNaN(cmd) == false) {
1120                 vc_print_log('== numbering tag click');
1121
1122                 // when cmd is floating point value without parameter
1123                 // search exactly the same text
1124                 if (Number.isInteger(cmd) == false && param == '') {
1125                         for (var i = 0; i < vc_text_indicators.length; ++i) {
1126                                 if (vc_text_indicators[i].textContent.trim().indexOf(cmd) != -1) {
1127                                         return vc_do_action({
1128                                                 elem : vc_text_indicators[i]
1129                                         });
1130                                 }
1131                         }
1132
1133                         var list = vc_selector([cmd.toString()]);
1134
1135                         for (var i = 0; i < list.length; i++) {
1136                                 if (list[i].childElementCount == 0 && list[i].textContent.trim().indexOf(cmd) != -1) {
1137                                         return vc_do_action({
1138                                                 elem : list[i]
1139                                         });
1140                                 }
1141                         }
1142                 }
1143
1144                 // when cmd is valid integer value
1145                 if (Number.isInteger(cmd) == true && cmd <= vc_visible_hints.length) {
1146                         var hint = vc_visible_hints[cmd - 1];
1147
1148                         // insert text into input element
1149                         if (hint.type === 'input' && param != '') {
1150                                 return vc_do_action(hint, hint.span, param);
1151                         } else if (param == '') {
1152                                 if (!vc_flag_conflict) {
1153                                         vc_conflict_links = [];
1154                                         vc_conflict_links.push(hint.elem);
1155
1156                                         for (var i = 0; i < vc_text_indicators.length; ++i) {
1157                                                 if (vc_text_indicators[i].textContent.trim() == cmd) {
1158                                                         vc_conflict_links.push(vc_text_indicators[i]);
1159                                                 }
1160                                         }
1161
1162                                         if (vc_conflict_links.length > 1) {
1163                                                 vc_remove_hints();
1164                                                 vc_generate_conflict_hints();
1165                                                 return [vc_conflict_links.length, 0, 0];
1166                                         }
1167                                 }
1168
1169                                 return vc_do_action(hint, hint.span);
1170                         }
1171                 }
1172
1173                 // when there is no matched tooltip
1174                 vc_remove_hints();
1175
1176                 return vc_search_text(cmd.toString().concat(' ', param).trim());
1177         } else {
1178                 vc_remove_hints();
1179
1180                 return vc_search_text(param);
1181         }
1182
1183         return [-1, 0, 0];
1184 }
1185
1186 /**
1187  * vc_search_text function search the element that include same text with @param.
1188  *
1189  * @param param  param from voice-control.
1190  */
1191 function vc_search_text(param) {
1192         /* phase 1. search full text in the webpage */
1193         /* first, compare with links in html documents */
1194         vc_print_log('=== start searching(text level)');
1195
1196         if (vc_flag_log == true) {
1197                 vc_rec_result.style.background = 'rgba(0, 200, 100, 1)';
1198         }
1199
1200         vc_scr = {
1201                 top : 0,
1202                 left : 0,
1203                 bottom : window.innerHeight,
1204                 right : window.innerWidth
1205         };
1206
1207         vc_conflict_links = [];
1208
1209         for (var i = 0; i < vc_text_indicators.length; ++i) {
1210                 if (vc_is_visible(vc_text_indicators[i], vc_scr, true) &&
1211                         vc_text_indicators[i].textContent.replace(/[ `~!‘’@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '').toLowerCase().indexOf(param.replace(/ /g, '').toLowerCase()) !== -1) {
1212                         vc_conflict_links.push(vc_text_indicators[i]);
1213                 }
1214         }
1215
1216         if (vc_conflict_links.length == 1) {
1217                 /* if there is one result */
1218                 return vc_do_action({
1219                         elem : vc_conflict_links[0]
1220                 });
1221         } else if (vc_conflict_links.length > 1) {
1222                 vc_generate_conflict_hints();
1223
1224                 return [vc_conflict_links.length, 0, 0];
1225         }
1226
1227         /* second, compare with whole text of elements in html documents */
1228         var resultTokenArr = param.replace(/[`~!‘’@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '').split(' '),
1229         el = vc_selector(resultTokenArr),
1230         preStr = '******';
1231
1232         for (var i = 0; el.length > i; i++) {
1233                 var temp = el[i];
1234
1235                 if (temp.childElementCount === 0) {
1236                         var curStr = temp.textContent.replace(/[`~!‘’@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');
1237                         if (curStr == preStr || vc_is_visible(temp) == false) {
1238                                 continue;
1239                         }
1240
1241                         preStr = curStr;
1242
1243                         vc_conflict_links.push(temp);
1244                 }
1245         }
1246
1247         if (vc_conflict_links.length == 1) {
1248                 return vc_do_action({
1249                         elem : vc_conflict_links[0]
1250                 });
1251         } else if (vc_conflict_links.length > 1) {
1252                 vc_generate_conflict_hints();
1253
1254                 return [vc_conflict_links.length, 0, 0];
1255         } else {
1256                 /*
1257                  * vc_search_word depend on the voice control language.
1258                  * This function increase the accuracy of the searching result using word and letter level searching.
1259                  * If the language is changed, the definition of the function will be changed by reloading the .js file.
1260                  */
1261                 temp = vc_search_word(param, true);
1262                 if (temp != undefined) {
1263                         return vc_do_action({
1264                                 elem : temp
1265                         });
1266                 } else {
1267                         //vc_show_popup('There is no such kind of string.<br>(' + param + ')', 1500);
1268                         vc_remove_hints();
1269
1270                         return [-1, 0, 0];
1271                 }
1272         }
1273 }
1274
1275 /**
1276  * vc_scroll_event_firing function move the scroll.
1277  *
1278  * @param evt  keyword to move the scroll.
1279  */
1280 function vc_scroll_event_firing(evt) {
1281         if (evt == 'DOWN') {
1282                 window.scrollBy(0, 500);
1283         } else if (evt == 'UP') {
1284                 window.scrollBy(0, -500);
1285         } else if (evt == 'TOP') {
1286                 window.scrollTo(0, 0);
1287         }
1288 }
1289
1290 /**
1291  * vc_print_html function print out log on vc_log_area and console for debug.
1292  * If vc_flag_log is not true, then the logs will only print on console.
1293  *
1294  * @param text  log text to print out.
1295  */
1296 function vc_print_log(text) {
1297         var d = new Date();
1298         var time = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
1299         console.log(time, '[', vc_print_log.caller.name, ']', text);
1300
1301         if (vc_flag_log == true) {
1302                 vc_log_area.value += time + ' [' + vc_print_log.caller.name + '] ' + text + '\n';
1303         }
1304 }
1305
1306 /**
1307  * vc_print_html function print out raw source of the html document for debug.
1308  */
1309 function vc_print_html() {
1310         if (vc_html_area == undefined) {
1311                 vc_html_area = document.createElement('textarea');
1312                 vc_html_area.disabled = true;
1313                 vc_html_area.id = 'vc_html_area';
1314
1315                 document.body.appendChild(vc_html_area);
1316
1317                 vc_html_area.value = location.href.toString() + '\n' + document.querySelector('html').innerHTML;
1318         } else {
1319                 document.body.removeChild(vc_html_area);
1320                 vc_html_area = undefined;
1321         }
1322 }
1323
1324 /**
1325  * vc_search_text function is called by voice-control-webview.cpp.
1326  * this function call some group of functions refered to @phase.
1327  *
1328  * @param phase  key value to call a group of functions.
1329  * @param data  function data from voice-control-webview.cpp.
1330  */
1331 function vc_request_action(phase, data) {
1332         vc_print_log('phase :' + phase + ',data :' + data);
1333         if ('SHOW_TOOLTIP' == phase) {
1334                 clearTimeout(vc_conflict_timer);
1335
1336                 /* create & show tooltips to recognize the voice */
1337                 if (!vc_flag_conflict && false == vc_flag_hint_exist) {
1338                         vc_remove_hints();
1339                         vc_generate_hints();
1340                 }
1341                 vc_show_hints();
1342         } else if ('HIDE_TOOLTIP' == phase) {
1343                 /* hide tooltips */
1344                 if (!vc_flag_conflict) {
1345                         vc_hide_hints();
1346                 } else {
1347                         clearTimeout(vc_conflict_timer);
1348                         vc_conflict_timer = setTimeout(vc_remove_hints, 5000);
1349                 }
1350         } else if ('RESULT' == phase) {
1351                 /* do action by the result */
1352                 vc_all_elem = document.querySelectorAll('body *:not(script)');
1353                 var result = vc_correct_parameter(data);
1354
1355                 return vc_click(result.cmd, result.param);
1356         } else if ('REMOVE_TOOLTIP' == phase) {
1357                 clearTimeout(vc_conflict_timer);
1358                 vc_remove_hints();
1359         } else {
1360                 return false;
1361         }
1362         return true;
1363 }
1364
1365 /**
1366  * vc_selector function is a selector function to find the elements include whole text in @strArr.
1367  *
1368  * @param strArr  group of strings to find elements.
1369  *
1370  * ex) vc_selector(['abc', 'def']);
1371  */
1372 function vc_selector(strArr) {
1373         var result = [];
1374         for (var i = 0; i < vc_all_elem.length; i++) {
1375                 var temp = vc_all_elem[i].textContent.replace(/[`~!‘’@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '').toLowerCase();
1376                 var j;
1377
1378                 for (j = 0; j < strArr.length; j++) {
1379                         if (temp.includes(strArr[j].toLowerCase()) == false) {
1380                                 break;
1381                         }
1382                 }
1383
1384                 if (strArr.length == j && vc_is_visible(vc_all_elem[i], null, true)) {
1385                         result.push(vc_all_elem[i]);
1386                 }
1387         }
1388
1389         return result;
1390 }
1391
1392 /**
1393  * vc_get_url_path function returns url path of the view.
1394  *
1395  * @return part of the url(host name + path name). it is used to read page specific script.
1396  */
1397 function vc_get_url_path() {
1398         var hostName = document.location.hostname;
1399         var pathName = document.location.pathname;
1400
1401         pathName = pathName.replace(/\//gi, '.');
1402
1403         return hostName + '/' + pathName;
1404 }
1405
1406 /**
1407  * vc_get_conflict_status function returns the conflict status.
1408  *
1409  * @return 1 if vc_flag_conflict is true. Otherwise 0.
1410  */
1411 function vc_get_conflict_status() {
1412         if (vc_flag_conflict) {
1413                 return 1;
1414         }
1415
1416         return 0;
1417 }
1418
1419 /**
1420  * vc_init function initialize some elements and styles to use voice control.
1421  */
1422 function vc_init() {
1423         /* log element initialize */
1424         if (vc_flag_log) {
1425                 vc_log_area.disabled = true;
1426                 vc_log_area.id = 'vc_log_area';
1427                 vc_log_area.style.visibility = 'hidden';
1428
1429                 document.body.appendChild(vc_log_area);
1430         }
1431
1432         /* add tooltip style element */
1433         var vc_style_node = document.createElement('style');
1434         var vc_style_text = document.createTextNode(
1435                         '#vc_tooltip_area {\
1436                                 left : 0px;\
1437                                 position : absolute;\
1438                                 pointer-events: none;\
1439                                 top : 0px;\
1440                                 z-index : 2147483647;\
1441                         }\
1442                         #vc_html_area, #vc_log_area {\
1443                                 background-color : rgba(0, 0, 0, 0.5) !important;\
1444                                 color : white !important;\
1445                                 font-size : 14px;\
1446                                 height : 600px;\
1447                                 left : 50px;\
1448                                 padding : 10px 10px 10px 10px;\
1449                                 position : fixed;\
1450                                 top : 50px;\
1451                                 width : 800px;\
1452                                 z-index : 2147483647;\
1453                         }\
1454                         #vc_popup_content {\
1455                                 background-color : #87cff7;\
1456                                 bottom : 0px;\
1457                                 border-radius : 20px;\
1458                                 box-shadow : 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);\
1459                                 color : white;\
1460                                 display : table;\
1461                                 font-size : 1.5em;\
1462                                 height : 100px;\
1463                                 left : 0px;\
1464                                 line-height : 1.5em;\
1465                                 margin : auto;\
1466                                 opacity : 1;\
1467                                 overflow : hidden;\
1468                                 position : absolute;\
1469                                 right : 0px;\
1470                                 text-align : center;\
1471                                 top : 0px;\
1472                                 width : 500px;\
1473                                 z-index : 2147483647;\
1474                         }\
1475                         #vc_popup {\
1476                                 background-color : rgba(0,0,0,0.2);\
1477                                 bottom : 0px;\
1478                                 left : 0px;\
1479                                 position : fixed;\
1480                                 right : 0px;\
1481                                 top : 0px;\
1482                                 z-index : 2147483647;\
1483                         }\
1484                         #vc_highlight_area {\
1485                                 left : 0px;\
1486                                 position : absolute;\
1487                                 pointer-events: none;\
1488                                 top : 0px;\
1489                                 z-index : 2147483646;\
1490                         }\
1491                         #vc_highlight {\
1492                                 border-radius: 5px;\
1493                                 font-size : 20px;\
1494                                 padding : 0 3px;\
1495                                 position : absolute;\
1496                                 pointer-events: none;\
1497                                 word-break : normal;\
1498                                 background-color: rgba(0, 234, 255, 0.2);\
1499                         }\
1500                         #vc_click_effect {\
1501                                 border-radius: 70px;\
1502                                 width: 70px;\
1503                                 height: 70px;\
1504                                 pointer-events: none;\
1505                                 position: fixed;\
1506                                 z-index : 2147483647;\
1507                                 background: linear-gradient(141deg, rgba(15, 185, 175, 0.6) 0%, rgba(30, 200, 220, 0.6) 51%, rgba(45, 180, 230, 0.6) 75%);\
1508                         }\
1509                         .vc_number_tag_normal {\
1510                                 border : 2px solid;\
1511                                 border-color : rgba(255, 255, 255, 0);\
1512                                 border-radius : 5px;\
1513                                 box-shadow : 0px 2px 2px rgba(0, 0, 0, 0.3);\
1514                                 position: absolute;\
1515                                 pointer-events: none;\
1516                                 text-align: center;\
1517                                 font-family: "Samsung0ne600";\
1518                                 color: #ffffff;\
1519                                 z-index : 2147483647;\
1520                                 word-break : normal;\
1521                         }\
1522                         .vc_text_indicator_conflict_normal {\
1523                                 border: 2px solid;\
1524                                 border-color: rgba(255, 255, 255, 0);\
1525                                 border-radius: 20px;\
1526                                 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);\
1527                                 position: absolute;\
1528                                 pointer-events: none;\
1529                                 text-align: center;\
1530                                 color: #ffffff;\
1531                                 font-family: "Samsung0ne600";\
1532                                 z-index: 2147483647;\
1533                         }\
1534                         .vc_tooltip_focus {\
1535                                 border-color: rgba(255, 255, 255, 1);\
1536                         }\
1537                         .vc_text_focus {\
1538                                 color: #ff0000 !important;\
1539                                 font-weight: bolder !important;\
1540                         }\
1541                         #vc_asr_result {\
1542                                 background : rgba(0, 0, 0, 0.8);\
1543                                 border-radius : 20px;\
1544                                 color : white;\
1545                                 font-size : 25px;\
1546                                 height : 35px;\
1547                                 padding-top : 10px;\
1548                                 padding-bottom : 10px;\
1549                                 position : absolute;\
1550                                 text-align : center;\
1551                                 top : 10px;\
1552                                 right : 10px;\
1553                                 width : 550px;\
1554                                 z-index : 2147483647;\
1555                         }\
1556                         #vc_rec_result {\
1557                                 border-radius : 40px;\
1558                                 height : 40px;\
1559                                 position : absolute;\
1560                                 top : 17px;\
1561                                 right : 510px;\
1562                                 width : 40px;\
1563                                 z-index : 2147483647;\
1564                         }\
1565                         .vc_tooltip_input {\
1566                                 background-color : rgba(60, 140, 250, 0.75);\
1567                         }\
1568                         .vc_tooltip_normal, .vc_tooltip_area {\
1569                                 background-color : rgba(60, 185, 165, 0.75);\
1570                         }\
1571                         .vc_tip_tier_first {\
1572                                 font-size: 22px;\
1573                                 line-height: 24px;\
1574                                 width: 32px;\
1575                                 height: 26px;\
1576                         }\
1577                         .vc_tip_tier_second {\
1578                                 font-size: 19px;\
1579                                 line-height: 22px;\
1580                                 width: 28px;\
1581                                 height: 22px;\
1582                         }\
1583                         .vc_tip_tier_third {\
1584                                 font-size: 14px;\
1585                                 line-height: 16px;\
1586                                 width: 21px;\
1587                                 height: 16px;\
1588                         }\
1589                         @keyframes vc_tooltip_show {\
1590                                 0% {\
1591                                         opacity: 0;\
1592                                 }\
1593                                 100% {\
1594                                         opacity: 1;\
1595                                 }\
1596                         }\
1597                         @keyframes vc_tooltip_click {\
1598                                 0% {\
1599                                         box-shadow: 0 0 8px 6px rgba(60, 220, 180, 0), 0 0 0px 0px rgba(255,255,255,1), 0 0 0px 0px rgba(60, 220, 180, 0);\
1600                                 }\
1601                                 10% {\
1602                                         box-shadow: 0 0 8px 6px rgba(60, 220, 180, 1), 0 0 3px 5px rgba(255,255,255,1), 0 0 6px 10px rgba(60, 220, 180, 1);\
1603                                 }\
1604                                 100% {\
1605                                         box-shadow: 0 0 8px 6px rgba(60, 220, 180, 0), 0 0 0px 20px rgba(255,255,255,0.5), 0 0 0px 20px rgba(60, 220, 180, 0);\
1606                                 }\
1607                         }\
1608                         @keyframes vc_click_effect {\
1609                                 0% {\
1610                                         transform: scale(0.3, 0.3);\
1611                                         opacity: 0;\
1612                                 }\
1613                                 10% {\
1614                                         transform: scale(0.5, 0.5);\
1615                                         opacity: 0.5;\
1616                                 }\
1617                                 100% {\
1618                                         transform: scale(1, 1);\
1619                                         opacity: 1;\
1620                                 }\
1621                         }');
1622         vc_style_node.appendChild(vc_style_text);
1623         document.head.appendChild(vc_style_node);
1624
1625         var frames = window.frames;
1626
1627         for (var i = 0; i < frames.length; i++) {
1628                 try {
1629                         var doc = frames[i].document;
1630                         var vc_frame_style_node = doc.createElement('style');
1631                         var vc_frame_style_text = doc.createTextNode(vc_style_node.textContent);
1632
1633                         vc_frame_style_node.appendChild(vc_frame_style_text);
1634                         doc.head.appendChild(vc_frame_style_node);
1635                 } catch (e) {
1636                         continue;
1637                 }
1638         }
1639
1640         /* remove indicators on scroll */
1641         window.addEventListener('scroll', function () { //[TODO] need to remove the listener
1642                 vc_remove_hints();
1643         }, false);
1644 }
1645
1646 vc_init();