tabbit

Mon Oct 29 2018
Copied to clipboard! Copy reply

<script>;
  (function() {
    var isLp = !!window.location.href.indexOf('/lp/') != -1
  
    // either pick a specific offer name or say 'schedule'
    // FOR TEST,  CHOOSE BETWEEN: extra_license , more_months,  gift    
    var which_offer_to_run = 'extra_gift';
  
  
  
  
    // If in cart, hide prices
    if (!!window.location.href.match('secure.rosettastone')) {
      jQuery('.promocart, td.col.subtotal > table, .priceblock').hide()
      return
    }
  
    if (!!document.cookie.match(/rto_cart_cookie/i)) {
      //return
    }
  
    // If user came from email, dont show RTO. just offers
    if (window.location.href.indexOf('cid=em') != -1) {
  
      showProductOffers()
      return
    }
  
    // User got RTO in catalog and came here. Don't show RTO. skip to offers
    if (window.location.href.indexOf('fromcat=1') != -1) {
  
      showProductOffers()
      return
    }
  
    var d = new Date();
    d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = "rto_cart_cookie=1;" + expires + ";path=/";
  
  
    document.cookie = 'rto_cart_cookie=1'
    var rto_route = {
      price: null,
      rsi: null,
      delay: 1000
    };
  
    if (typeof RSI == 'undefined') {
      return
    }
  
  
    rto_route.rsi = 'halloweensalebm'
  
    // if catalog, go to sitewide
    if (!isLp) {
      rto_route.rsi = 'sitewide'
      var query = window.location.search ? window.location.search + '&fromcat=1' : '?fromcat=1'
      rto_route.rsi += query
      // var query = window.location.href + (window.location.search ? '&' : '?') + 'fromcat=1'
    }
  
    if (!rto_route.rsi) {
      return
    }
  
  
    function runClockRTO() {
  
      // Shortcut for document.querySelector
      var qs = document.querySelector.bind(document);
  
      // Must match css media query - shrinking circle radius & pos
      if (window.innerWidth < 650) {
        qs('#progress').setAttribute('r', 100);
        qs('#progressbg').setAttribute('r', 100);
  
        qs('#progress').setAttribute('cx', 120);
        qs('#progressbg').setAttribute('cx', 120);
      }
  
      // Progress variables
      var $hours = qs('#hours .digit');
      var $minutes = qs('#minutes .digit');
      var $seconds = qs('#seconds .digit');
  
      /* Clock
       **********************************/
      // if you change this, also change
      // #progress animation-duration to the
      // equivalent number of seconds
      var timeInMinutes = 10;
      var deadline = new Date(Date.parse(new Date()) + timeInMinutes * 60 * 1000);
  
      qs('#progress').style.animationDuration = timeInMinutes * 60;
  
      // UPDATED
      var fullTime = getTimeRemaining(deadline).total;
  
      function getTimeRemaining(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor(t / 1000 % 60);
        var minutes = Math.floor(t / 1000 / 60 % 60);
        var hours = Math.floor(t / (1000 * 60 * 60) % 24);
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
  
        if (minutes == 1 && !qs('#progress').style.animationName) {
          qs('#progress').style.animationName = 'colorfade';
        }
        return {
          'total': t,
          'days': days,
          'hours': hours,
          'minutes': minutes,
          'seconds': seconds
        };
      }
  
      function initializeClock(endtime) {
        var timeinterval = setInterval(function() {
          var t = getTimeRemaining(endtime);
          var seconds = ('0' + t.seconds).slice(-2);
  
          // progress bar remaining UPDATED
          var pbr = t.total / fullTime * 100;
  
          updateSliderValue(t.hours, t.minutes, seconds, false, pbr);
  
          if (t.total <= 0) {
            clearInterval(timeinterval);
            document.querySelector('.rto-container').style.display = 'none';
            document.querySelector('.rto-gradient').style.display = 'none';
            document.querySelector('.rto-wrap').style.display = 'none';
          }
        }, 1000);
      }
  
      /* Progress bar
       **************************************/
  
      /**
       * Updates progress bar and value
       * @param {str} hours - hours left
       * @param {str} minutes - minutes left
       * @param {str} seconds - seconds left
       * @param {bool} showHours - show/hide hours left
       * @param {int} barValue - number of total seconds left. 
       */
      function updateSliderValue(hours, mins, secs, showHours, barValue) {
        if (showHours) {
          qs('#hours').style.display = 'table-cell';
          qs('.colon').style.display = 'table-cell';
        }
  
        $hours.innerHTML = hours;
        $minutes.innerHTML = mins;
        $seconds.innerHTML = secs;
        var radius = qs('#progress').getAttribute('r');
        var circumference = 2 * Math.PI * radius;
  
        // Controls the loading circle %
  
        var progress_in_pixels = -(circumference * (100 - barValue) / 100).toFixed(5);
        if ('requestAnimationFrame' in window) {
          requestAnimationFrame(function() {
            qs('#progress').style.strokeDashoffset = progress_in_pixels + 'px';
          });
        } else {
          qs('#progress').style.strokeDashoffset = progress_in_pixels + 'px';
        }
  
        /*
        if(qs('#slider').value < 25){
            qs('#progress').style.stroke = 'red';
            qs('#slidervalue').style.color = 'red';
        }
        else if(yb.id('slider').value >= 75){
            qs('#progress').style.stroke = '#7df';
            qs('#slidervalue').style.color = '#7df';
        }
        else{
            qs('#progress').style.stroke = 'gold';
            qs('#slidervalue').style.color = 'gold';
        }
        */
      }
  
      /* Initialize everything
       **************************************/
      initializeClock(deadline);
    }
  
    function addClockContentToPage(content) {
  
      var clockMarkup = '\n    <div class="rto-wrap" id="__containClock">\n\n      <div class="rto-container">\n\n          <div class="rto-header">\n<b>MYSTERY DEAL</b><br>You\'ve got 10 minutes\n            <a id="closerto" href="#">&times;</a>\n          </div>\n\n          <div class="rto-body">\n\n            <div class="offer-price">\n              <h3>Reveal this offer and</h3>\n              <div class=\'rto-offer-price\'>save BIG</div>\n              <h3>when you buy now</h3>\n            </div> <!-- /offer-price -->\n\n            <div class="progress-bar">\n              <div id="svgcontainer">\n                <svg height="300" width="300" id="svg">\n                  <circle id="progressbg" cx="150" cy="150" r="120" stroke-width="10" fill="transparent" stroke-dasharray="753.9822368615503" transform="rotate(.1)" />\n                  <circle id="progress" cx="150" cy="150" r="120" stroke-width="10" fill="transparent" stroke-dasharray="753.9822368615503" transform="rotate(.1)" />\n                </svg>\n\n                <div class="countdown-clock">\n\n                  <div class=\'timeleft\'>\n\n                    <div id=\'hours\'>\n                      <div class="digits">\n                        <span class="digit"></span>\n                        <span class="word-mobile">m</span>\n                      </div>\n                      <div class="word">Hours</div>\n                    </div>\n\n                    <div class=\'colon\'>:</div>\n\n                    <div id=\'minutes\'>\n                      <div class="digits">\n                        <span class="digit">9</span>\n                        <span class="word-mobile">m</span>\n                      </div>        \n                      <div class="word">Minutes</div>\n                    </div>\n\n                    <div class=\'colon\'>:</div>\n\n                    <div id=\'seconds\'>\n                      <div class="digits">\n                        <span class="digit">59</span>\n                        <span class="word-mobile">s</span>\n                      </div>\n                      <div class="word">Seconds</div>\n                    </div>      \n\n                  </div>       \n                </div>\n              </div>\n            </div> <!--/ progress-bar -->\n          </div> <!-- /rto-body -->\n\n          <div class="rto-footer">\n            <a id="rto_shopnow" href="' + content.destination + '"  >SHOP NOW</a>\n          </div>\n\n          <div class="rto-gradient"></div>\n\n      </div>\n    </div>\n    ';
  
      var clockCSS = '\n    <style>\n      #closerto {\n        position: absolute;\n        top: 0;\n        font-size: 2em;\n        right: .1em;\n        line-height: 1;\n        text-decoration: none;\n        color: #333;\n      }\n\n      /* White blurry backgorund */\n      .rto-gradient {\n          display: none;\n          background: pink;\n          width: 100%;\n          height: 100%;\n          left: 0;\n          top: 0;\n          position: absolute;\n          background: rgba(255,255,255,0.8);\n          z-index: 1;   \n      }\n\n      /*  used to center rto container */\n      .rto-wrap {    \n          position: absolute;\n          top: 0; \n          left: 0;\n          height: 100%;\n          width: 100%;\n          text-align: center;\n          z-index: 100;\n          background: rgba(255,255,255,0.6);\n      }\n\n\n\n\n\n      .rto-container {\n        z-index: 150009999999;\n        text-align:center;\n        max-width: 650px;\n        background: #363635;  \n        margin: 10vh auto;\n      }\n\n      .rto-header {\n        background: #EAB726;\n        padding: 2.2em 1em;\n        position: relative;\n        font-family: "GothamMedium", sans-serif;\n      }\n\n      .rto-body {  \n        display: flex;\n        color: #fff;\n        padding: 2em 3em;\n      }\n\n      .rto-body > * {\n        width: 50%;\n      }\n\n      .rto-body .offer-price {\n        text-transform: uppercase;\n        order: 1;\n        margin-top: 2em;\n      }\n\n      .rto-body h3 {\n        font-weight: lighter;\n      }\n\n      .rto-offer-price {\n        font-weight: 100;\n        font-size: 52px;\n      }\n\n      .rto-footer {\n        padding: 0 0 2em 0;\n      }\n\n      .rto-footer a {\n        background: #34A4D9;\n        display: inline-block;\n        color: #fff;\n        padding: 1em 6em;\n        text-decoration: none;\n        font-weight: 500;\n        border-radius: 4px;\n      }\n\n\n\n\n      .timeleft {\n        display: table;\n        width: 100%;\n        align-items: center;\n        font-size: 28px;\n\n      }\n\n      .timeleft > div {\n        display: table-cell;\n        font-size: 52px;\n\n      }\n\n      #hours, #hours + .colon {\n        display: none;\n      }\n\n      .digits {\n        display: table;\n      }\n\n      .digits > span {\n        display: table-cell;\n        text-align: center;\n        font-weight: 700;\n        width: 100px;\n      }\n\n      .digits > span:last-of-type {\n        font-size: 70%;\n        margin: 0 auto;\n        width: 1px;\n        overflow: hidden;\n        display: block;\n        font-weight: 100;\n\n      }\n      .word {\n        font-size: 10px;\n        text-transform: uppercase;\n      }\n\n      .word-mobile {\n        display: none;\n      }\n\n\n      .countdown-clock {\n        width: 60%;\n        text-align: center;\n        position: absolute;\n        top: 97px;\n        left: 20%;\n        font-size: 42px;\n        font-weight: 100;\n        color: #fff;\n        transition: all 1s linear;\n        /*transform: rotate(90deg);*/\n      }\n\n      #svgcontainer{\n        position: relative;\n        display: inline-block;\n        width: 300px;\t\n      }\n\n      #svg{\n        position:relative;\n        transform: rotate(90deg);\n      }\n\n      #progressbg {\n        z-index:0;\n        position:absolute;\n        top:0px;\n        box-shadow: 5px 5px 5px 5px #333;\n        stroke: #2B2B2A;\n      }\n\n      #progress {\n        stroke-dashoffset: 0;\n        stroke: #2769BF;\n        transition: all 1s linear;\n        z-index:1;\n        position:absolute;\n        top:0px;  \n\n\n      }\n\n\n\n\n      @media (max-width: 740px) {\n\n        .rto-container {\n          max-width: 355px;\n          margin: 1em auto;\n          border-radius: 5px;\n        }\n\n\n        .rto-header {\n          padding: 2em 0;\n          border-top-left-radius: 5px;\n          border-top-right-radius: 5px;\n          font-size: .8em;\n        }\n        .rto-body {\n          flex-direction: column;\n          padding: 0;\n        }\n\n        .rto-body > * {\n          width: 100%;\n        }\n        .rto-body .offer-price {\n          order: 1; \n          margin-top: 1em;\n          line-height: 59px;\n        }\n\n        .rto-body h3 {\n          margin: 0;\n        }\n\n        .rto-body .progress-bar {\n          order: 2;\n          height: 267px;\n          overflow: hidden;\n        }\n\n        .countdown-clock {\n          top: 91px;\n          left: 26%;\n          width: 57%;\n        }\n\n        .word {\n          display: none;\n        }\n\n        .digits > span:last-of-type {\n          display: inline-block;\n          width: auto;\n          position: relative;\n          bottom: -10px;\n        }\n        .digit {\n          width: 50%!important;\n        }\n\n        #seconds .digits > .digit {\n          width: 75%!important;\n        }\n        .colon {\n          display: none!important;\n        }\n        .timeleft > div {\n          font-size: 42px;\n        }\n\n        .rto-footer a {\n          padding: 0.5em 6em;\n        }\n\n        #svg {\n          transform: rotate(90deg) scale(.9) translateX(-10px);\n        }\n      }\n\n\n      \n\t  .rto-container {\n\t\twidth: 650px;\n\t\tposition: fixed;\n\t\ttop: 1em;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t }\n\n\t @media (max-width: 740px){\n\t\t.rto-container{\n\t\t\tmin-width: 357px;\n\t\t\tposition: fixed;\n\t\t\tleft: 47%;\n\t\t\t/* right: 0.5em; */\n\t\t\ttop: .5em;\n\t\t\t/* transform: none; */\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t }\n      \n\n\n\n      @keyframes colorfade {\n        0% {\n          stroke: #2769BF\n        }\n\n        25% {\n          stroke: #EAB726;\n\n        }\n\n\n        40% {\n          stroke: #d45322f2\n\n        }\n\n        75% {\n\n        }\n        100% {\n          stroke: #d41818\n        }\n      }\n\n   @media (max-width: 500px) {.rto-container {width: 100%;left: 0;min-width: initial;max-width: initial;transform: none;}.rto-body > * {width: auto;}}  @media (max-width: 500px) {.rto-container {width: 100%;left: 11px;min-width: initial;max-width: 355px;transform: none;}.rto-body > * {width: auto;}} #mobile-chat img { z-index:100!important}   </style>\n   ';
  
      //For idempotence: can be added more than 1 time safely
      !document.getElementById('__containClock') && document.body.insertAdjacentHTML('beforeend', clockCSS + clockMarkup);
    }
  
    function KeyboardFocus(first, last) {
      var _firsthandler = function _firsthandler(e) {
  
        if (e.shiftKey && e.which == 9) {
          last.focus();
          //otherwise the default action would occur and move to the next "after" last
          e.preventDefault();
        }
        return true;
      };
  
      var _secondhandler = function _secondhandler(e) {
        if (!e.shiftKey && e.which == 9) {
          first.focus();
          e.preventDefault();
        }
        return true;
      };
  
      function addFocus() {
        if (!first.addEventListener || !last.addEventListener) {
          throw new Error('arguments must both be EventTarget');
        }
        first.addEventListener('keydown', _firsthandler, true);
        last.addEventListener('keydown', _secondhandler, true);
      }
  
      function removeFocus() {
        if (!first.removeEventListener || !last.removeEventListener) {
          throw new Error('arguments must both be EventTarget');
        }
        first.removeEventListener('keydown', _firsthandler, true);
        last.removeEventListener('keydown', _secondhandler, true);
      }
  
      return {
        addFocus: addFocus,
        removeFocus: removeFocus
      };
    }
  
    var kf;
  
    function clearClockRTO() {
      if (kf) {
        typeof kf.removeFocus == 'function' && kf.removeFocus();
      }
      document.getElementById('__containClock').style.display = 'none';
    }
  
    function showClockRTO() {
      var destination = '//www.rosettastone.com/lp/sbsr/' + rto_route.rsi
      var dollarsoff = 12 // parseFloat(RSI({ lvl: '24' })[0].price, 10) - rto_route.price;
      addClockContentToPage({
        destination: destination,
        dollarsoff: dollarsoff
      });
      runClockRTO();
      kf = new KeyboardFocus(document.getElementById('closerto'), document.getElementById('rto_shopnow'));
      kf.addFocus();
      document.getElementById('rto_shopnow').focus();
      document.getElementById('closerto').addEventListener('click', clearClockRTO);
      document.getElementById('rto_shopnow').addEventListener('click', showProductOffers);
      document.getElementById('__containClock').addEventListener('click', function(e) {
        e.target == document.getElementById('__containClock') && clearClockRTO();
      });
    }
  
  
    setTimeout(showClockRTO, rto_route.delay || 0);
  
  
  
  
    function showProductOffers(e) {
      // We dont run this on catalog. We redirect to sbsr instead when they accept rto
      if (!isLp) {
        return
      }
  
      // This would throw error if we call this function without calling RTO fn first
      // ie, on email page where we dont show rto but show offers right away
      try {
  
        clearClockRTO()
        e.preventDefault()
      } catch (e) {
       
      }
  
  
  
  
      // CHOOSE OFFER FUNCTIONALITY HERE
  
      //var which_offer_to_run = 'extra_license'; // either pick a specific offer name or say 'schedule'
  
  
  
  
      // SET SCHEDULE AND OFFER TYPES HERE
      var schedule = [{
        start_date: '02 Oct 2018 00:00:00',
        end_date: '02 Oct 2018 23:59:59',
        offer_name: 'examplebdi'
      }];
  
  
      // LINE 9 MUST MATCH ONE OF THESE
      var offers = {
        'extra_license': {
          offer_type: 'extra_user',
          mastheads: {
            'desktop': 'https://www.rosettastone.com/lp/rtos/q4/extralicense.jpg',
            'mobile': 'https://www.rosettastone.com/lp/rtos/q4/extralicense-mobile.jpg'
          }
        },
  
  
        'extra_gift': {
          offer_type: 'extra_gift',
          mastheads: {
            'desktop': 'https://www.rosettastone.com/lp/rtos/q4/gift.jpg',
            'mobile': 'https://www.rosettastone.com/lp/rtos/q4/gift-mobile.jpg'
          },
          promos: {
          '24' : 'iguazafalls_24mp12' ,  // 24 + 12
          '12': 'iguazafalls_12mp6',   // 12 + 6
          '06': 'iguazafalls_6mp3',    // 6 +3
          }
        },
  
        'more_months': {
          offer_type: 'more_months',
          mastheads: {
            'desktop': 'https://www.rosettastone.com/lp/rtos/q4/more_months.jpg',
            'mobile': 'https://www.rosettastone.com/lp/rtos/q4/more_months-mobile.jpg'
          }
        }
      };
  
  
  
      var offer_types = {
  
        // *******************************************
        // BONUS MONTHS
        // *******************************************
  
        'bonus_months_low': {
          '12': {
            message: '+1 Month Free',
            replacement_sku: '91213'
          },
          '24': {
            message: '+3 Months Free',
            replacement_sku: '91211'
          }
        },
  
        'bonus_months_high': {
          '12': {
            message: '+3 Months Free',
            replacement_sku: '90496'
          },
          '24': {
            message: '+6 Months Free',
            replacement_sku: '90497'
          }
        },
  
  
  
        // *******************************************
        // EXTRA USER
        // *******************************************
  
        'extra_user': {
          '06': {
            message: 'Buy 6 Months and | Get 3 Months FREE',
            second_sku: '90487'
          },
          '12': {
            message: 'Buy 12 Months and | Get 6 Months FREE',
            second_sku: '90558'
          },
          '24': {
            message: 'Buy 24 Months and | Get 12 Months FREE',
            second_sku: '90288'
          }
        },
  
  
  
  
        // *******************************************
        // EXTRA GIFT
        // *******************************************
  
        'extra_gift': {
          '06': {
            message: 'Buy 6 Months and | Give 3 Months FREE',
            second_sku: '90487'
          },
          '12': {
            message: 'Buy 12 Months and | Give 6 Months FREE',
            second_sku: '90558'
          },
          '24': {
            message: 'Buy 24 Months and | Give 12 Months FREE',
            second_sku: '90288'
          }
        }
      };
  
  
  
  
      // ********************************************************************************
      // CORE FUNCTIONALITY
      //     No need to edit below here unless you want to change how the offers work
      // ********************************************************************************
  
  
      function pick_offer_method(which_offer_to_run) {
        if (which_offer_to_run === 'schedule') {
          run_offers_on_schedule(schedule); // this runs the offers according to the schedule
        } else {
          apply_offer(which_offer_to_run); // this runs an offer directly by name
        }
      }
      pick_offer_method(which_offer_to_run);
  
  
  
  
      function run_offers_on_schedule(schedule) {
        var date = Date.now();
        for (var i = 0; i < schedule.length; i++) {
          var start_date = Date.parse(schedule[i].start_date);
          var end_date = Date.parse(schedule[i].end_date);
          if (start_date <= date && date <= end_date) {
            apply_offer(schedule[i].offer_name);
            return;
          }
        }
      }
  
  
      function format_offer_message(offer_type, message) {
        var formatted_message = message;
  
        if ((/bonus_months/i).test(offer_type)) {
          var words = message.split(' ');
          var formatted_message = '' +
            '<div class="bonus_months_number">' +
            words[0] +
            '</div>' +
            '<div class="bonus_months_words">' +
            '<div>' +
            words[1] +
            '</div>' +
            '<div>' +
            words[2] +
            '</div>' +
            '</div>' +
            '';
        }
  
        if ((/extra_/i).test(offer_type)) {
          var lines = message.split('|');
          var formatted_message = '' +
            '<div class="bonus_line_1">' +
            lines[0].trim() +
            '</div>' +
            '<div class="bonus_line_2">' +
            lines[1].trim() +
            '</div>' +
            '';
        }
  
        return formatted_message;
      }
  
  
  
  
      function update_masthead(offer) {
        // catalogs have no masthead. return
  
        if (window.location.href.indexOf('/lp/') == -1) {
          return
        }
  
        if (offer.mastheads) {
  
          var style = document.createElement('style');
          style.id = 'masthead_change';
          var masthead = document.querySelector('#masthead');
  
          style.innerHTML = '' +
            'body #masthead{' +
            'background-image: url(' + offer.mastheads.mobile + ');' +
            '}' +
            '@media (min-width: 600px) {' +
            'body #masthead{' +
            'background-image: url(' + offer.mastheads.desktop + ');' +
            '}' +
            '}' +
            '';
  
          masthead.appendChild(style);
        }
      }
  
  
  
  
      function _$(selector) {
        var elems = Array.prototype.slice.call(document.querySelectorAll(selector));
        return {
          elems: elems,
          attr: function(attr, value) {
            elems.forEach(function(elem) {
              var original_attr = elem.getAttribute(attr);
              var final_value = typeof value === 'function' ? value(original_attr) : value;
              elem.setAttribute(attr, final_value);
            });
            return this;
          },
          show: function(display_property) {
            elems.forEach(function(elem) {
              elem.style.display = display_property || 'block';
            });
            return this;
          },
          hide: function() {
            elems.forEach(function(elem) {
              elem.style.display = 'none';
            });
            return this;
          },
          html: function(inner_html) {
            elems.forEach(function(elem) {
              elem.innerHTML = inner_html;
            });
            return this;
          }
        };
      }
  
  
  
      function apply_offer(offer_name) {
        var set_up_offer = (function(offers, offer_name) {
          var offer = offers[offer_name];
          update_masthead(offer);
  
          add_bonus_elements();
          update_all_cart_buttons(offer);
          show_all_bonuses(offer);
          protect_product_changes_on_lang_change(offer);
  
          add_bonus_styles();
  
        }).bind(this, offers);
  
        set_up_offer(offer_name);
      }
  
  
  
      function add_bonus_elements() {
        // this function makes sure .bonus divs are available for all levels instead of just 12 and 24
        _$('.product-d .header, .product-m').elems.forEach(function(elem) {
          if (!elem.querySelector('.bonus')) {
            var div = document.createElement('div');
            div.className = 'bonus';
            elem.appendChild(div);
          }
        });
  
        _$('.product-m').elems.forEach(function(elem) {
          if (!elem.querySelector('.bonus')) {
            var div = document.createElement('div');
            div.className = 'bonus';
            elem.appendChild(div);
          }
        });
      }
  
  
      function add_bonus_styles() {
  
        var style = document.createElement('style');
        style.id = 'masthead_change';
  
        style.innerHTML = '' +
          '.products-desktop .container{' +
          'align-items: flex-end;' +
          '}' +
          '.product-d .best-value{' +
          'background-color: #262626;' +
          '}' +
          '.product-d .header > div.bonus {' +
          'font-size: 80%;' +
          'font-weight: 100;' +
          'position: relative;' +
          'bottom: -7px;' +
          'display: none;'
  
          +
          'background-color: #437414;' +
          'color: #fff;' +
          'padding: 10px;' +
          'margin: -30px 20px 0px;' +
          'bottom: -41px;' +
          'font-family: gothammedium, sans-serif;' +
          '}' +
          '.bonus_months_number{' +
          'display: inline-block !important;' +
          'font-size: 40px;' +
          'line-height: 1;' +
          'margin-right: 8px;' +
          '}' +
          '.bonus_months_words{' +
          'display: inline-block;' +
          'text-align: left;' +
          'line-height: 1;' +
          'text-transform: uppercase;' +
          '}' +
          '.bonus_months_words div:nth-of-type(1) {' +
          'font-size: 11px;' +
          '}' +
          '.bonus_months_words div:nth-of-type(2) {' +
          'font-size: 19px;' +
          '}' +
          '.bonus_line_1 {' +
          'line-height: 1.2;' +
          'font-family: gothamlight, sans-serif;' +
          'font-size: 15px;' +
          '}' +
          '.bonus_line_2 {' +
          'font-size: 15px;' +
          'line-height: 1.2;' +
          '}' +
          '';
  
        document.body.appendChild(style);
      }
  
      function show_all_bonuses(offer) {
        add_bonus_styles();
  
        var products = offer_types[offer.offer_type];
  
        for (var lvl in products) {
          show_bonus(lvl, offer);
        }
      }
  
  
      function show_bonus(lvl, offer) {
        var message = offer_types[offer.offer_type][lvl].message;
        var formatted_message = format_offer_message(offer.offer_type, message);
        _$('*[data-lvl="' + lvl + '"] .bonus').html(formatted_message).show();
      }
  
  
      function update_all_cart_buttons(offer) {
        var offers_details_by_level = offer_types[offer.offer_type];
        for (var lvl in offers_details_by_level) {
          var offer_details = offers_details_by_level[lvl];
          update_cart_button(lvl, offer_details);
        }
      }
  
  
      function update_cart_button(lvl, offer_details) {
        var replacement_sku = offer_details.replacement_sku;
        var second_sku = offer_details.second_sku;
  
        var desktop_cart_btn_selector = '*[data-lvl="' + lvl + '"] .add-to-cart';
        var mobile_cart_btn_selector = 'a.product-m[data-lvl="' + lvl + '"]';
        _$(desktop_cart_btn_selector + ', ' + mobile_cart_btn_selector).attr('href', function(original_href) {
          var new_href = original_href;
          // BONUS MO
          if (replacement_sku) 
          {
            new_href = original_href.replace(/\/\d+\//, '/' + replacement_sku + '/');
          }

          // GIFT & USER
          if (second_sku) {
            
            //new_href = original_href.replace(/\/sku\//, '/multi_sku/')
            //.replace(/\/(\d+)\//, '/$1-'+second_sku+'/')
            //.replace(/\/category_id\/(\w+)\//, '/multi_category_id/$1-fra');
            
            new_href = original_href.replace(/category_id\/(.{3})/, 'category_id/$1/related_sku/' + second_sku)
            if (offers[which_offer_to_run].promos)
            {              
              if (typeof offers[which_offer_to_run].promos[lvl] !== 'undefined')
              {
                // already has promo. replace
                if (new_href.indexOf('?pc=') != -1)  
                {
                  var new_href = new_href.split('?pc=')[0] + offers[which_offer_to_run].promos[lvl]
                }           
              }
            }
            
  
            // https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/90291/category_id/ENG/related_sku/90487
            // https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/90291/category_id/esp/
          }
          return new_href;
        });
      }
  
  
      function protect_product_changes_on_lang_change(offer) {
        window.jQuery && (function($) {
          $(document).on('lang_change', function() {
  
            update_all_cart_buttons(offer);
          });
        })(window.jQuery);
      }
  
  
  
    }
  
  
  
  })()
                                                    
</script>