;(function(){
  // console.log('2507e67a-771731709c23-dbdae27d');

  var SLApp = SLApp || {};

  SLApp.config = {
    uid: '2507e67a-771731709c23-dbdae27d',
    baseUrl: 'https://www.remindtoread.com',
    buttons: null,
    email: null,
    url: location.href,
    url_later: null,
    url_date_update: null,
  }

  SLApp.blastOff = function(){
    this.pingHome();
    this.setupStyle();
    this.findEls();
    this.setupHandlers();
    this.disableButtonEl();
  }

  SLApp.pingHome = function(){
    var c = this.config;
    var url = c.baseUrl + '/widget/' + c.uid + '/init';
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var data = JSON.parse(request.responseText);
        // console.log(data);
      } else {
      }
    };
    request.onerror = function() {};
    request.send();
  }

  SLApp.setupStyle = function(b){
    var b   = document.getElementsByTagName('body'),
        el  = document.createElement('style');
        el.innerHTML = '.sendlater-container button{\n  color: black;\n}\n.sendlater-email-input{\n  color: black;\n  display: none;\n}\n.sendlater-email-input input{\n  line-height: 20px;\n  padding-left: 8px;\n}\n.sll-email-form input[type=email]{\n  width: 60%;\n}\n.sll-email-form input[type=submit]{\n  width: 30%;\n}\n.sll-email-form{\n  width: 100%;\n  margin-bottom: 0em;\n}\n.email-input-submit{\n  background: none;\n  border: 1px solid black;\n}\n.email-more-explain{\n  display: none;\n  position: absolute;\n  margin: 0px;\n  margin-top: .4em;\n}\n.time-option-change{\n  display: none;\n  border: none;\n  background: none;\n  border-bottom: 1px dotted black;\n  border-radius: 0px;\n  box-shadow: none;\n  font-size: 1em;\n  font-family: inherit;\n  margin-bottom: -1px;\n  padding-left: 5px;\n  padding-right: 5px;\n  -webkit-appearance: none;\n  -webkit-writing-mode: none;\n}\n.sendlater-time-option{\n  display: none;\n  position: relative;\n}\n\n.sendlater-time-option p{\n    line-height: 1em;\n    margin: 0px;\n    font-size: 1.5em;\n    font-weight: bold;\n}\n\n.time-option-selected{\n  position: relative;\n}\n.time-option-selected:hover .time-option-change-options,\n.time-option-selected.active .time-option-change-options,\n{\n  display: block;\n}\nul.time-option-change{\n  margin: 0px;\n  padding: 0px;\n  list-style: none;\n\n  top: 1em;\n  left: 100%;\n  padding-left: .4em;\n}\n.select-time .time-option-change {\n  display: inline-block;\n  padding: 0px;\n}\n\n.select-time .sendlater-time-option p:after{\n  content: \'\';\n  display: none;\n  /*display: inline-block;*/\n  background: transparent;\n  width: 1em;\n  height: 1em;\n  top: 5px;\n  position: absolute;\n  right: -1.5em;\n}\n\n.select-time .sendlater-time-option p:after{\n  content: \'\';\n  display: inline-block;\n  background: transparent;\n  width: 1em;\n  height: 1em;\n  top: 5px;\n  position: absolute;\n  right: -1.5em;\n}\n\n.select-time .sendlater-time-option p:after{\n  background: lightBlue;\n}\n\n.select-time .sendlater-time-option.updating p:after{\n  background: #eee;\n}\n\n.select-time .sendlater-time-option.updated p:after{\n  background: green;\n}\n\n.select-time .sendlater-time-option{\n  display: inline-block;\n}\n.sendlater-email-input:hover .email-more-explain{\n  display: inline-block;\n}\n.sendlater-container{\n  display: inline-block;\n  min-height: 2em;\n}\n.sendlater-container.accept-email .sendlater-email-input{\n  display: inline-block;\n}\n.sendlater-container.accept-email .sendlater-button,\n.sendlater-container.select-time .sendlater-button{\n  display: none;\n  color: black;\n}\n.sll-email-form {\n  position: relative;\n}\n.sendlater-button button img{\n  margin-bottom: -5px;\n}\n\n.sendlater-button button{\n  background: none;\n  border: 1px solid black;\n  line-height: 20px;\n}\np.email-more-explain{\n  width: 270px;\n  background: #eee;\n  padding: 10px;\n  text-align: center;\n  z-index: 1;\n}\np.email-more-explain:before {\n  content: \'\';\n  border: 7px solid #eee;\n  position: absolute;\n  top: -5px;\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n}\n\nlabel#-error:before {\n  content: \'\';\n  border: 6px solid #f2a0af;\n  position: absolute;\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  left: -5px;\n  top: 6px;\n}\n\n.sll-email-form label.error{\n  position: absolute;\n  left: 110%;\n  top: -2px;\n  width: 120%;\n  background: #F2A0AF;\n  padding: 3px 10px;\n}\n';
        b[0].appendChild(el);
  }

  SLApp.disableButtonEl = function(){
    var lbe = document.querySelectorAll('a.later-button-el');
    for (var i = lbe.length - 1; i >= 0; i--) {
      lbe[i].addEventListener('click', function(evt){ evt.preventDefault(); return false;}, false);
    };
  }

  SLApp.findEls = function(){
    var els = document.querySelectorAll('.later-button-el');
    // console.log('Found ' + els.length + ' button slots');
    this.config.buttons = els;
    SLApp.getButton();
  }

  SLApp.handleClickSetup = function(evt){
    var el = evt.target.parentElement.parentElement.parentElement;
    SLApp.addClass(el, 'accept-email');
  }

  SLApp.handleClickEmail = function(evt){
    var el = evt.target.parentElement.parentElement.parentElement;
    var email_field = el.children[1].children[0].children[0];
    var email = email_field.value;
    var isValid = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(email);
    if(isValid){
      SLApp.config.email = email;
      SLApp.requestScheduledLater();
      // console.log('email going');
      SLApp.removeClass(el, 'accept-email');
      SLApp.addClass(el, 'select-time');
    }
  }

  SLApp.handleClickTime = function(evt){
    var el = evt.target.parentElement.parentElement.parentElement;
    var select_field = evt.target.parentElement.children[0];
    var time_options = select_field.parentElement.parentElement;
    var val = select_field.value;
    SLApp.updateScheduledTime(val, time_options);
  }

  SLApp.defaultCallback = function(data, para){
    // console.log('callback run');
    // console.log(data);
  }

  SLApp.scheduleUpdateTime = function(data, para){
    SLApp.removeClass(para['time_options'], 'updating');
    SLApp.addClass(para['time_options'], 'updated');
    // console.log('callback run');
    // console.log(data);
  }

  SLApp.requestScheduledLater = function(val){
    var email = this.config.email;
    var currentUrl = this.config.url;
    var query = '?email=' + encodeURIComponent(email) + '&url=' + encodeURIComponent(currentUrl) + '&delay=30%20seconds';
    var url = 'https://www.remindtoread.com/2507e67a-771731709c23-dbdae27d/later/new' + query;
    this.config.url_later = url;
    var self  = this;
    // console.log('url getting');
    // console.log(url);
    var request = new XMLHttpRequest();
    request.open('GET', url, true);

    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var resp = request.responseText;
        self.defaultCallback(resp)
      } else {
      }
    };
    request.onerror = function() {};
    request.send();
  }

  SLApp.preventSendLaterSubmitForm = function(evt){
    evt.preventDefault();
    return false;
  }

  SLApp.updateScheduledTime = function(val, time_options){
    var self = this;
    var moreQuery = '&renew=true&delay=' + encodeURIComponent(val);
    var url = this.config.url_later + moreQuery;
    var para = { 'time_options': time_options };
    this.config.url_date_update = url;
    SLApp.removeClass(time_options, 'updated');
    SLApp.addClass(time_options, 'updating');
    // console.log('updateScheduledTime');
    // console.log(url);
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var resp = request.responseText;
        self.scheduleUpdateTime(resp, para);
      } else {
      }
    };
    request.onerror = function() {};
    request.send();
  }

  SLApp.setupHandlers = function(){
    var sslc = document.querySelectorAll('.sendlater-container'),
        self = this,
        el;
    for (var i = sslc.length - 1; i >= 0; i--) {
      el = sslc[i];
      var remindMeLaterButton = el.children[0].children[0];
      var emailField = el.children[1].children[0];
      var emailSubmitForm = el.children[1].children[0].children[1];
      var scheduleTimeField = el.children[2].children[0].children[0];
      remindMeLaterButton.addEventListener('click', self.handleClickSetup, false);
      emailField.addEventListener('submit', self.preventSendLaterSubmitForm, false);
      emailSubmitForm.addEventListener('click', self.handleClickEmail, false);
      scheduleTimeField.addEventListener('change', self.handleClickTime, false);
    };
  }

  SLApp.addClass = function(el, klass){
    el.className += ' '+klass;
  }

  SLApp.removeClass = function(el, klass){
      var elClass = ' '+el.className+' ';
      while(elClass.indexOf(' '+klass+' ') != -1)
           elClass = elClass.replace(' '+klass+' ', '');
      el.className = elClass;
  }

  SLApp.hasClass = function ( elem, klass ) {
     return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
  }

  SLApp.convertEls = function(buttonFrame){
    var els = this.config.buttons;
    for (var i = els.length - 1; i >= 0; i--) {
      els[i].innerHTML = buttonFrame;
      // console.log('Converting ' + els[i]);
      els[i].classList.remove('hidden');
    };
  }

  SLApp.generateButton = function(response){
    // console.log(response);
    this.convertEls(response);
  }

  SLApp.getButton = function(){
    // console.log('Generating button');
    var buttonCode = '<div class=\"sendlater-container\">\n  <div class=\"sendlater-button\">\n    <button style=\"border: none;padding: 0px; height: 35px; margin-bottom: 0px;\"><img src=\"https://www.remindtoread.com/assets/remindtoread-button-3c1bad5592e12c8b46e787489e97a090.png\" style=\"max-width: 150px;\" alt=\"\"><\/button>\n  <\/div>\n<div class=\"sendlater-email-input\">\n    <form action=\"\" class=\"sll-email-form row\" style=\"margin: 1% 0;overflow: auto;\">\n      <input name=\"email\" type=\"email\" required placeholder=\"Email\" class=\"sendlater-email-input-field sll-email\" style=\"    box-sizing: border-box;  height: 37px; background: 0;border-radius: 0;font: 16px sans-serif;margin: 0;outline: 0;font-size: 14px;display: block;margin-bottom: 10px;border: 1px solid #ccc;padding: 8px;float: left;width: 158px; max-width: 100%;\">\n      <input type=\"submit\" value=\"Remind\" class=\"email-input-submit col c3\" style=\"        background: #1a93f8;  box-sizing: border-box; height: 37px; color: #fff; border-radius: 0;font: 16px sans-serif;margin: 0;outline: 0;font-size: 14px;display: block;margin-bottom: 10px;border: 1px solid #ccc;padding: 8px;float: left; width: 70px; font-weight:800; max-width: 100%;\">\n    <\/form>\n    <p class=\"email-more-explain\">\n      Enter your email address to get a email reminder about this page.\n    <\/p>\n  <\/div>\n  <div class=\"sendlater-time-option\">\n    <p>Scheduled! Reminder will arrive\n      <select class=\"time-option-change time-option-change-options\" style=\"width: auto;\">\n        <option value=\"1 minute\" class=\"visible\">now<\/option>\n        <option value=\"4 hours\" class=\"\">in 4 hours<\/option>\n        <option value=\"12 hours\">in 8 hours<\/option>\n        <option value=\"24 hours\">tomorrow<\/option>\n        <option value=\"72 hours\">in 3 days<\/option>\n      <\/select>\n    <\/p>\n  <\/div>\n<\/div>\n';
    this.generateButton(buttonCode);
  }

  SLApp.timeISO = function(){
      (function() {

        function pad(number) {
          if (number < 10) {
            return '0' + number;
          }
          return number;
        }

        Date.prototype.toISOString = function() {
          return this.getUTCFullYear() +
            '-' + pad(this.getUTCMonth() + 1) +
            '-' + pad(this.getUTCDate()) +
            'T' + pad(this.getUTCHours()) +
            ':' + pad(this.getUTCMinutes()) +
            ':' + pad(this.getUTCSeconds()) +
            '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
            'Z';
        };

      }());
  }

  SLApp.guid = function() {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
      s4() + '-' + s4() + s4() + s4();
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    SLApp.blastOff();
  });
})();