Thu Oct 27 2016
Copied to clipboard! Copy reply
  • 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
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
var boxmarkup = `
<div class="spo4_product">
    <div class="g">
      <h3 class="spo4_title">3 Month</h3>

      <h4>Subscription</h4>
    </div>
    <span class="spo4_price"><sup>$</sup><span class="monthly">26</span>
        <span> / Month</span>
    </span>

    <div class="g">
      
      <a href=
      "https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/24362/category_id/eng/?pc=amsterdam_S5">
      Add to Cart</a>
      <form class="gift"><label><img src="http://www.rosettastone.com/lp/catalogpages/img/gifting.png" style="height: .8em; width: .8em; margin-right: .5em; position: relative; bottom: .05em;"><input type="checkbox" style="margin-right: .5em;">Give as a gift!</label></form>
      <span class="spo4_sub"><span class="submarkoff">$<s>99</s></span> $<span class="spo4_full">79</span> charged every <span class="months">12</span> month<span class="plural">s</span></span>
    </div>
</div>
`;

var cddlmarkup = `
<div class="spo4_product">
    <div class="g">
      <h3 class="spo4_title">3 Month</h3>

      <h4>Instant Download</h4>
    </div>
    <span class="spo4_price"><sup>$</sup><span class="monthly">26</span></span>
    <span class="spo4_sub" style="font-size: 1.3em; margin-top: 0;">Regular <span class="markoff"><sup>$</sup><s>99</s></span></span>
    <div class="g">
      
      <a href=
      "https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/24362/category_id/eng/?pc=amsterdam_S5">
      Add to Cart</a>
      <form class="gift"><label><img src="http://www.rosettastone.com/lp/catalogpages/img/gifting.png" style="height: .8em; width: .8em; margin-right: .5em; position: relative; bottom: .05em;"><input type="checkbox" style="margin-right: .5em;">Give as a gift!</label></form>
      
    </div>
</div>
`;

var cdmarkup = `
<div class="spo4_cdupsell">
    <p>Or click here if you'd like Rosetta Stone on CD-ROM or Instant Download</p>
</div>
`;



var spo_styles = `
<style>
    .spo4_price sup,
    .spo4_product h3 {
        font-family: GothamBold, sans-serif;
        font-size: 1.5em
    }
    .spo4_product {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-items: center;
        margin: 1.25em;
        width: 15em;
        
        background-color: white;
        border: 2px solid #ddd;
        padding: 1em 1em .5em 1em;
    }
    
    .spo4_product .g {
        align-items: center;
        display: flex;
        flex-flow: column
    }
    .spo4_product h3 {
        font-size: 1.33em;
        font-weight: 700;
        margin-top: .5em;
        text-transform: uppercase;
    }
    .spo4_product .g h4 {
        text-transform: uppercase;
    }
    .spo4_product .g:first-child::after {
        content: "";
        display: block;
        width: 12em;
        height: 1px;
        margin-top: 1.5em;
        border-top: .15em solid #ccc;
    }
    .spo4_price {
        margin-top: 2em;
        margin-bottom: 1em;
    }
    .spo4_price sup {
        position: relative;
        top: -.5em;
        color: #0080cd;
    }
    .spo4_price .monthly {
        font-family: GothamMedium, sans-serif;
        font-size: 2.75em;
        color: #0080cd;
    }
    .spo4_price span:nth-child(3) {
        
        font-size: 1.25em;
        font-family: GothamLight;

    }
    .spo4_product a {
        font-family: GothamMedium, sans-serif;
        font-size: .93em;
        padding: .8em;
        width: 10em;
        background: #0098db;
        border-radius: 3px;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        margin-top: .5em;
    }
    .spo4_product .gift {
        padding: .33em 0;
        font-family: GothamLight;
        vertical-align: middle;
        margin-top: .5em;

        
    }
    .spo4_product .gift label{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
    }
    .spo4_sub {
        margin: 1em 0;
        font-size: .75em;
        font-family: GothamLight;
    }
    .spo4_sub s {
        color: red;
    }

    .spo4_cdupsell {
        width: 80%;
        max-width: 50em;
        border: 2px solid #ddd;
        padding: 1.25em;
        text-align: center;
        background-color: white;
        font-family: GothamBook;
        margin-top: 3em;
        margin-bottom: 6em;
        color: #0098db;
        cursor: pointer;
    }
    .cdupselloverlay {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
    }
    .cdupselloverlay .close {
        color: white;
        font-size: 1.33em;
        width: 70%;
        max-width: 47.5em;
        margin-bottom: 14px;
        text-align: right;
        box-sizing: border-box;
        font-family: GothamMedium;
        cursor: pointer;
    }
    .cd_dl_overlay {
        font-size: .85em;
        background-color: white;
        
        width: 70%;
        max-width: 70em;
        padding: 2em;
        display: flex;
        flex-flow: column;
        font-family: GothamLight;

    }
    .cd_dl_overlay .topcopy {
        display: flex;
        flex-flow: row nowrap;
    }
    .cd_dl_overlay .topcopy figure, .cd_dl_overlay .topcopy section {
        flex: 1;
    }
    .cd_dl_overlay .topcopy section h2{
        font-family: GothamLight,sans-serif;
        font-size: 3em;
        color: #0098db;
    }
    .cd_dl_overlay .topcopy section h3{
        font-family: GothamThin,sans-serif;
        font-size: 3em;
        margin-bottom: .25em;
    }
    .cd_dl_overlay .topcopy img {
        height: 1em;
        width: auto;
    }
    .cd_dl_overlay .topcopy p {
        margin-top: 2em;
        line-height: 1.5;
    }

    .cd_dl_overlay .topcopy ul {
        margin-top: 2em;
        line-height: 1.33;
    }

    .cd_dl_overlay .topcopy ul li {
        background: url(http://www.rosettastone.com/lp/catalog2015/spo2/check.png) left no-repeat;
        background-size: 1.5em;
        padding-left: 2.4em;
        list-style-type: none;
        text-align: left;
        font-size: .9em;
        margin-bottom: 1em;
    }

    .cd_dl_overlay form {
        margin: 1em auto;
    }
    .cd_dl_overlay .cd_dl_select input {
        display: none;
    }

    .cd_dl_overlay form span {
        display: inline-block;
        background-color: white;
        color: black;
        text-transform: uppercase;
        font-family: GothamMedium;
        border: 1px solid #333;
        width: 20em;
        text-align: center;
        padding: .5em;
    }

    .cd_dl_overlay form input:checked + span {
        color: white;
        background-color: black;
    }

    .cd_dl_overlay .insert_products {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }

</style>
`;

$('head').append($(spo_styles));


var spo_products = [
    {'lvl': '01', 'media': 'subscription'},
    {'lvl': '06', 'media': 'subscription'},
    {'lvl': '12', 'media': 'subscription'},
    {'lvl': '24', 'media': 'subscription'}
];

var monthly_index = {
    "03": 23,
    "06": 15,
    "12": 12,
    "24": 10
};




var spo_elements = spo_products
    .map(function(v){ var inf = RSI(v); return inf.length ? inf[0] : null })
    .filter(function(v){ return v; })
    .map(function(v){
        var $el = $(boxmarkup);
        var islifetime = !!(v.lvl == 'lifetime');
        $el.find('.spo4_title').text( islifetime ? 'Lifetime' : parseInt(v.lvl, 10) + ' Month'  );
        var monthlyprice = Math.ceil( ( parseFloat(v.price, 10)/12 ) * (12 / parseFloat(v.lvl, 10)) );
        $el.find('.spo4_price .monthly').text(monthlyprice);
        if(islifetime){
            $el.find('.spo4_price .monthly ~ span').remove();
            $el.find('.spo4_sub').text('One time payment');
        }
        else {
            $el.find('.spo4_full').text( v.price );
        }
        
        var $markoff = $el.find('.submarkoff');

        if(parseInt(v.msrp, 10) > parseInt(v.price, 10)){
            $markoff.find('s').text(v.msrp);
        }
        else {
            $markoff.hide();
        }
        
        if( parseInt(v.lvl, 10) > 1 ) {
            $el.find('.months').text( parseInt(v.lvl, 10) );
        }
        else {
            $el.find('.months').remove();
            $el.find('.plural').remove();
        }

        $el.find('a').attr('href', v.cart);
        return $el;
    });


var cd_wash = {"L1":1,"S3":3,"S5":7};
var dl_elements = RSI({family: "course", media: "download"})
    .filter(function(v){ return v.lvl in cd_wash })
    .sort(function(a,b){ return cd_wash[a.lvl] -  cd_wash[b.lvl] })
    .map(function(v){
        var $el = $(cddlmarkup);
        var titles = {"L1":"Level 1","S3":"Levels 1-3","S5":"Levels 1-5"};
        $el.find('.spo4_title').text( titles[v.lvl]  );
        $el.find('.spo4_price .monthly').text(v.price);
        $el.find('.markoff s').text(v.msrp);
        $el.find('a').attr('href', v.cart);
        return $el;
    });
//console.table(cd_elements)
var cd_elements = RSI({family: "course", media: "box"})
    .filter(function(v){ return v.lvl in cd_wash })
    .sort(function(a,b){ return cd_wash[a.lvl] -  cd_wash[b.lvl] })
    .map(function(v){
        var $el = $(cddlmarkup);
        var titles = {"L1":"Level 1","S3":"Levels 1-3","S5":"Levels 1-5"};
        $el.find('.spo4_title').text( titles[v.lvl]  );
        $el.find('.spo4_price .monthly').text(v.price);
        $el.find('.markoff s').text(v.msrp);
        $el.find('h4').text('CD-ROM');
        $el.find('a').attr('href', v.cart);
        return $el;
    });


// spo_elements.push( (function(v){
//         var $el = $(boxmarkup);
//         $el.find('.spo4_title').text( 'Lifetime'  );
//         monthly_index[v.lvl] && $el.find('.spo4_price .monthly').text(monthly_index[v.lvl]);
//         $el.find('.spo4_full').text( v.price );
//         return $el;
//     })({lvl: "lifetime"}) );


$('.blockbuy')
    .empty()
    .css({display: 'flex', "flex-flow": "row wrap", "justify-content": "center"})
    .append(spo_elements)
    .append(cdmarkup);

var $upselloverlay = $('<div class="cdupselloverlay" style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: black; background-color: rgba(0,0,0,.7); z-index: 500;"></div>')
var upsellmarkup = `
<div class="close">CLOSE</div>
<div class="cd_dl_overlay">
    
    <div class="topcopy">
        <figure>
        </figure>
        <section class="prodcopy">
            <h2>Learn <span class="langname">Spanish</span></h2>
            <h3>With Rosetta Stone<sup>®</sup></h3>
            <img src="http://www.rosettastone.com/assets/stars.svg"><span>(<a class="reviewlink" href="/reviews"><span itemprop="reviewCount">239</span> Reviews</a>)</span>
            <p>If speaking French in the real world is your goal, you've come to the right place. Our program lets you learn your second language the way you learned your first, with an intuitive, immersive method that's as fun to use as it is effective. There's also live interaction and real-time feedback to keep you making quick progress. And Rosetta Stone French is backed by over 20 years of success stories. Let's make yours the next one.</p>
            <ul><li>Learn at your own pace with our course that never expires</li><li>Access for up to 5 family members</li><li>Speech Recognition</li><li>No internet connection required</li></ul>
        </section>
    </div>
    <form class="cd_dl_select">
        <label><input checked="true" type="radio" name="cd_dl_pick" value="download"><span>Instant Download</span></label><label><input  type="radio" name="cd_dl_pick" value="box"><span>CD-ROM Set</span></label>
        
    </form>
    <div class="insert_products">
    </div>
    <div class="guarantee">
    </div>
</div>
`;
var $upsell = $(upsellmarkup);
$upselloverlay.append($upsell);
$upsell.find('.insert_products').append(dl_elements);


function showCDDLOverlay() {
    $('body')
        .append($upselloverlay);
    $('.cd_dl_select').off('change');
    $('.cd_dl_select').on('change', function(e){ 
        var toswitch = e.target.getAttribute('value');

        $upsell.find('.insert_products').empty();
        $upsell.find('.insert_products').append(toswitch == 'box' ? cd_elements : dl_elements);

    })
}

function closeCDDLOverlay() {
    $upselloverlay.remove();
}

$(document).on('click', '.cdupselloverlay', function(e){
   $(e.target).hasClass('cdupselloverlay') && closeCDDLOverlay();
});
$(document).on('click', '.cdupselloverlay .close', closeCDDLOverlay);

$('img[src*="lockup"]').attr('src', '../assets/catalog16/subs_lock.png');

$(document).on('change', '.spo4_product .gift', function(e){
    var $el = $(e.target);
    var $a = $el.closest('.g').find('a');
    var crrt = $a.attr('href').replace('&gifting=1','');
    $a.attr( 'href', crrt.replace('&gifting=1','') );
    if(e.target.checked){
        crrt += '&gifting=1';
    }
    $a.attr( 'href', crrt);
});



$('.spo4_cdupsell').on('click', showCDDLOverlay);