var SERVpopupFn = {
  aid: 'SERV-popupeStore',
  options: {
    popupid: 'myBannerId',
    template: 'modal',
    dismiss: ['timeout', 1],
    targetId: 'mytarget',
    css: {
      size: ['810px', '360px'],
      background: '#ffffff',
      closeBtColor: '#000000'
    },
    html: 'You’re seeing this experience because you told us that you’re on prepaid. Return to the home page. Return to the home page'
  },
  init: function () {
    if (SERVpopupFn.options.dismiss[0] === 'session' && sessionStorage.getItem(SERVpopupFn.options.popupid + 'currentTabOnly')) {
      //do nothing
    } else {
      if (document.cookie.split(';').filter(function (item) {
        return item.indexOf('SERV_popupDismissTimeSpan=') >= 0
      }).length) {
        //do nothing
      } else {
        var popupHolder = SERVpopupFn.createContainer();
        SERVpopupFn.position(SERVpopupFn.options, popupHolder);
        SERVpopupFn.applyTemplateCssOptions(SERVpopupFn.options, popupHolder);

        var elModal = document.querySelector('.popup-content');
        if (elModal) {
          window.onclick = function (event) { if (event.target == elModal) { SERVpopupFn.closePopup(SERVpopupFn.options.popupid) } }
        }
      }
    }
  },
  createContainer: function () {
    var popupDiv = document.getElementById(SERVpopupFn.options.popupid);
    if (!popupDiv) {
      var popupDiv = document.createElement('div');
      popupDiv.className = 'SERVpopupeStoreHolder';
      popupDiv.id = SERVpopupFn.options.popupid;
      popupDiv.innerHTML = SERVpopupFn.temlates(SERVpopupFn.options);
    }
    return popupDiv;
  },
  position: function (options, popupHolder) {
    switch (options.template) {
      case 'modal':
        document.body.appendChild(popupHolder);
        break;
      case 'bannerTop':
        var element = document.getElementById('spl-nav-wrapper');
        var node = document.getElementsByClassName('spl-topnav-container')[0];
        element.insertBefore(popupHolder, node);
        break;
      case 'bannerFloat':
        var node = document.getElementById('spl-topnav-new');
        node.appendChild(popupHolder);
        break;
      case 'bannerTarget':
        var target = document.getElementById(options.targetId);
        var parentTarget = target.parentNode;
        parentTarget.insertBefore(popupHolder, target);
        break;
    }
  },
  temlates: function (options) {
    var markup = '';

    switch (options.template) {
      case 'modal':
        markup = '<div class="<%this.popupid%> popup-content"><div class="modal"><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 20px;width: 20px;"><svg style="overflow: visible;" viewBox="0 40 140 140" width="20" height="20"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span><%this.html%></div></div>';
        break;
      case 'bannerTop':
        markup = '<div class="<%this.popupid%> bannerTop"><div class="container"><%this.html%></div><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 20px;width: 20px;"><svg style="overflow: visible;" viewBox="0 40 140 140" width="20" height="20"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span></div>';
        break;
      case 'bannerFloat':
        markup = '<div class="<%this.popupid%> bannerFloat"><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 10px;width:10px;"><svg style="overflow: visible;" viewBox="60 80 140 140" width="10" height="10"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span><%this.html%></div>';
        break;
      case 'bannerTarget':
        markup = '<div class="<%this.popupid%> bannerTarget"><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 10px;width:10px;"><svg style="overflow: visible;" viewBox="60 80 140 140" width="10" height="10"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span><%this.html%></div>';
        break;
    }

    var finalTemplate = SERVpopupFn.templateEngine(markup, options);
    return finalTemplate;
  },
  templateEngine: function (html, options) {
    var re = /<%([^%>]+)?%>/g,
      reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
      code = 'var r=[];\n',
      cursor = 0,
      match;
    var add = function (line, js) {
      js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
        (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
      return add;
    }
    while (match = re.exec(html)) {
      add(html.slice(cursor, match.index))(match[1], true);
      cursor = match.index + match[0].length;
    }
    add(html.substr(cursor, html.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
  },
  openPopup: function () {
    SERVpopupFn.init();
  },
  closePopup: function (id) {
    var bannerTop = document.querySelector('#' + id + ' .bannerTop');
    var bannerFloat = document.querySelector('#' + id + ' .bannerFloat');
    if (typeof croWD != 'undefined') {
      croWD.utils.sendTracking(id, id + '_popup_close', '');
    }

    if (bannerTop) {
      bannerTop.classList.remove('open');
      setTimeout(function () {
        bannerTop.remove();
      }, 3000);
    } else if (bannerFloat) {
      bannerFloat.classList.remove('open');
      setTimeout(function () {
        bannerFloat.remove();
      }, 3000);
    } else {
      document.querySelector('#' + id).remove();
    }
    SERVpopupFn.dismissTimeSpan(SERVpopupFn.options);

  },
  closeOnOff: function () {
    var closeBt = document.getElementsByClassName('SERV-popupeStore-close')[0];
    closeBt.classList.add('off');
  },
  dismissTimeSpan: function (options) {

    var timeout = parseInt(options.dismiss[1]);
    switch (options.dismiss[0]) {
      case 'session':
        sessionStorage.setItem(options.popupid + 'currentTabOnly', true);
        break;
      case 'timeout':
        var now = new Date();
        var expireTime = now.setSeconds(now.getSeconds() + timeout);
        now.setTime(expireTime);
        document.cookie = 'SERV_popupDismissTimeSpan=1;expires=' + now.toUTCString() + ';path=/';
        break;
    }
  },
  applyTemplateCssOptions: function (options, popupHolder) {
    popupHolder.innerHTML = SERVpopupFn.temlates(SERVpopupFn.options);

    var el = document.querySelector('#' + options.popupid + ' .' + options.template);

    switch (options.template) {
      case 'modal':
        el.style.backgroundColor = options.css.background;
        el.style.width = options.css.size[0];
        el.style.height = options.css.size[1];
        break;
      case 'bannerTop':
        setTimeout(function () {
          el.classList.add('open');
        }, 500);
        break;
      case 'bannerFloat':
        setTimeout(function () {
          el.classList.add('open');
        }, 500);
        break;
      case 'bannerTarget':
        el.style.backgroundColor = options.css.background;
        break;
    }
    if (options.dismiss[0] === 'off') {
      var closeBt = document.querySelector('.' + options.popupid + ' .SERV-popupeStore-close');
      closeBt.classList.add('off');
    }
  }

}