• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168
• 169
• 170
• 171
• 172
• 173
• 174
• 175
• 176
• 177
• 178
• 179
• 180
• 181
• 182
• 183
• 184
• 185
• 186
• 187
• 188
• 189
• 190
• 191
• 192
• 193
• 194
• 195
• 196
• 197
• 198
• 199
• 200
• 201
• 202
• 203
• 204
• 205
• 206
• 207
• 208
• 209
• 210
• 211
• 212
• 213
• 214
• 215
• 216
• 217
• 218
• 219
• 220
• 221
• 222
• 223
• 224
• 225
• 226
• 227
• 228
• 229
• 230
• 231
• 232
• 233
• 234
• 235
• 236
• 237
• 238
• 239
• 240
• 241
• 242
• 243
• 244
• 245
• 246
• 247
• 248
• 249
• 250
• 251
• 252
• 253
• 254
• 255
• 256
• 257
• 258

<script>
'use strict';
(function() {

    if (!!document.cookie.match(/rto_cart_cookie/i))
    {
        //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
    }

    var price = RSI({cat:'esp', lvl: '24'})[0].price

 
    if (price == '179.76') {
        rto_route.price = '179.76'
        rto_route.rsi = 'mom699'
    }
    if (price == '167.76') {
        rto_route.price = '167.76'
        rto_route.rsi = 'mom649'
    }
    if (price == '155.76') {
        rto_route.price = '155.76'
        rto_route.rsi = 'thankmom599'
    }

    rto_route.rsi = 'halloweensalebm'
    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;}}   </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) {
        //console.log('keydown first');
        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) {
        //console.log('keydown last');
        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() {
    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('__containClock').addEventListener('click', function (e) {
        e.target == document.getElementById('__containClock') && clearClockRTO();
    });
    }

    setTimeout(showClockRTO, rto_route.delay || 0);

})()









</script>