Untitled

(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";
    function live(selector, event, callback, context) {
      /****Helper Functions****/
      // helper for enabling IE 8 event bindings
      function addEvent(el, type, handler) {
        if (el.attachEvent) el.attachEvent("on" + type, handler);
        else el.addEventListener(type, handler);
      }
      // matches polyfill
      this.Element &&
        (function (ElementPrototype) {
          ElementPrototype.matches =
            ElementPrototype.matches ||
            ElementPrototype.matchesSelector ||
            ElementPrototype.webkitMatchesSelector ||
            ElementPrototype.msMatchesSelector ||
            function (selector) {
              var node = this,
                nodes = (node.parentNode || node.document).querySelectorAll(selector),
                i = -1;
              while (nodes[++i] && nodes[i] != node);
              return !!nodes[i];
            };
        })(Element.prototype);
      // live binding helper using matchesSelector
      function live(selector, event, callback, context) {
        addEvent(context || document, event, function (e) {
          var found,
            el = e.target || e.srcElement;
          while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
          if (el && found) callback.call(el, e);
        });
      }
      live(selector, event, callback, context);
    }
    function waitForElement(selector, trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function () {
        if (
          document &&
          document.querySelector(selector) &&
          document.querySelectorAll(selector).length > 0
        ) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function () {
        clearInterval(interval);
      }, delayTimeout);
    }

    let tabData = {
      "tab1": {
        "link": "https://www.business.hsbc.com.sg/en-sg/business-banking/business-account-opening-process?pid=accountopeningsignposting_variantC",
        "para": "Find out how to open an account and how we can help your business get to the next level with your international network and expertise",
        "title": "New to HSBC Business Banking for SMEs?"
      }
    }
    // INSTERTING NEW TAB BTN AND CHANGING RIGHT DIV DATA
    function changeDataInPanel(tabNum) {
      waitForElement('html body div[id*="useful-links-content"] > div[class*="useful-links__content-info"] > a', function () {
        // console.log(tabNum);
        let tabSelector = 'tab' + tabNum;
        // changing headline
        document.querySelector('html body div[id*="useful-links-content"] > div[class*="useful-links__content-info"] > h3').innerText = tabData[tabSelector].title;
        // changing subheading
        document.querySelector('html body div[id*="useful-links-content"] > div[class*="useful-links__content-info"] > span').innerText = tabData[tabSelector].para;
        // changing link
        document.querySelector('html body div[id*="useful-links-content"] > div[class*="useful-links__content-info"] > a').href = tabData[tabSelector].link;
        // changing link inner html 
        document.querySelector('html body div[id*="useful-links-content"] > div[class*="useful-links__content-info"] > a').classList.add("eg-new-text");
      }, 50, 15000);
    }

    function mob() {
      if (window.innerWidth < 768) {
        if (document.querySelector('html body div[class*="useful-links__head"]  div[class*="dropdown-list"]>button')) {
          document.querySelector('html body div[class*="useful-links__head"]  div[class*="dropdown-list"]>button').addEventListener("click", function () {
            waitForElement('html body div[class*="useful-links__head"]  div[class*="dropdown-list"]>button + ul', function () {
              document.querySelectorAll('html body div[class*="useful-links__head"]  div[class*="dropdown-list"]>button + ul>li').forEach((itm, i) => {
                itm.addEventListener("click", function () {
                  if (i == 0) {
                    changeDataInPanel(i + 1);
                  } else {
                    document.querySelector(".eg-new-text") && document.querySelector(".eg-new-text").classList.remove();
                  }
                });
              })
            }, 100, 15000);
          });
        }
      }
    }

    function des() {
      if (window.innerWidth > 767) {
        setTimeout(() => {
          document.querySelectorAll("html body .useful-links_tab-container > button").forEach((cta, i) => {
            cta.addEventListener("click", function () {
              if (i == 0) {
                changeDataInPanel(i + 1);
              } else {
                document.querySelector(".eg-new-text") && document.querySelector(".eg-new-text").classList.remove("eg-new-text");
              }
            });
          })
        }, 300);
      }
    }

    waitForElement("html body", function () {
      if (!document.body.classList.contains("eg-hsbc")) {
        document.body.classList.add("eg-hsbc");
        waitForElement('html body div[id*="useful-links-content"] > div[class*="useful-links__content-info"] > a', des, 50, 15000);
        waitForElement('html body div[class*="useful-links__head"]  div[class*="dropdown-list"]>button', mob, 50, 15000);
        changeDataInPanel(1);
        live(".eg-new-text", "click", function () {
          TMS.trackEvent({ 'event_category': 'content', 'event_action': 'onsite', 'event_content': 'pws : pws home : landing : useful links : test na button clicked : apply now : smes', 'event_value': '1 ' });
        })
      }
    }, 50, 15000);

  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();



/*changing anchor text in des*/
html body .eg-new-text>span>span {
    position: relative;
    color: transparent !important;
    display: block;
}

html body .eg-new-text>span>span::before {
    content: "Apply Now";
    position: absolute;
    width: 100%;
    color: white !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}