Fri Oct 28 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
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495
  • 496
  • 497
  • 498
  • 499
  • 500
  • 501
  • 502
  • 503
  • 504
  • 505
  • 506
  • 507
  • 508
  • 509
  • 510
  • 511
  • 512
  • 513
  • 514
  • 515
  • 516
  • 517
  • 518

$(document).ready(function(){


	// for experiences 2 or 4
	var current_experience = '2';




	// insert html and css

	var css = '<style> /********************************* UTILITIES **********************************/ .zerofont{ font-size: 0px; } .hide_for_test{ display: none; } .show_for_test{ display: block; } /********************************* STRUCTURE **********************************/ .oct_2016_container{ font-family: gothambook, sans-serif; background-color: #F7F6F0; color: #333; padding: 40px 10px; text-align: center; font-size: 20px; } .oct_2016_col{ box-sizing: border-box; vertical-align: top; font-size: 18px; display: inline-block; width: 50%; max-width: 540px; text-align: left; padding: 20px; /*border: 1px dotted red;*/ } .oct_2016_section_header{ font-size: 24px; max-width: 650px; margin: 0px auto 20px; /*border: 1px dotted orange;*/ } .oct_2016_subscription_image{ background-image: url(\'http://www.rosettastone.com/lp/spo/oct2016/assets/oct_2016_devices.png\'); background-repeat: no-repeat; background-position: center 18px; background-size: 95%; padding-bottom: 340px; } .oct_2016_cddl_image{ background-image: url(\'http://www.rosettastone.com/lp/spo/oct2016/assets/oct_2016_cddl.png\'); background-repeat: no-repeat; background-position: center 18px; background-size: 95%; padding-bottom: 340px; } /********************************* REVIEW STARS **********************************/ .oct_2016_review_star_container{ margin: 10px 0px 30px; } .hollow_stars{ position: relative; display: inline-block; vertical-align: middle; font-size: 16px; } .filled_stars{ position: absolute; left: 0px; top: 0px; overflow: hidden; white-space: nowrap; width: 91.5%; } .oct_2016_review_star_text{ font-size: 14px; display: inline-block; vertical-align: bottom; } /********************************* BLUE THEME **********************************/ .oct_2016_blue_bg{ background-color: #0098db; background-image: linear-gradient(#0098db,#0088cb); color: #fff; box-shadow: 0px 0px 55px 0px rgba(33,33,33,0.5) inset; } .oct_2016_blue_bg .oct_2016_language_header{ color: #EFDC00; } .oct_2016_blue_bg .oct_2016_product_intro{ font-family: gothamlight; } .oct_2016_blue_bg .oct_2016_ul li{ font-family: gothambook; } .oct_2016_blue_bg .oct_2016_ul li:before{ border-color: #EFDC00; } .oct_2016_blue_bg .oct_2016_guarantee_line1{ color: #EFDC00; } /********************************* GOLD THEME **********************************/ .oct_2016_gold_bg{ background-color: #EFDC00; background-image: linear-gradient(#EFDC00,#DFCC00); color: #333; box-shadow: 0px 0px 55px 0px rgba(33,33,33,0.5) inset; } .oct_2016_gold_bg .oct_2016_language_header{ color: #27a; } .oct_2016_gold_bg .oct_2016_ul li:before{ border-color: #27a; } .oct_2016_gold_bg .oct_2016_product_square{ background-color: #0098db; background-image: radial-gradient(#0088cb 83%,#0098db); } /********************************* PRODUCT INFO **********************************/ .oct_2016_language_header{ font-size: 34px; } .oct_2016_language_subhead{ font-family: gothamlight; font-size: 34px; text-transform: uppercase; } .oct_2016_language_subhead span{ text-transform: none; } .oct_2016_product_info{ background-image: url(\'http://www.rosettastone.com/lp/spo/oct2016/assets/oct_2016_devices.png\'); background-repeat: no-repeat; background-position: center bottom; background-size: 90%; padding-bottom: 300px; /*border: 1px dotted blue;*/ text-align: left; } .oct_2016_product_info_square{ text-align: left; } .oct_2016_product_intro{ line-height: 1.3; } .oct_2016_ul{ margin: 25px 0px 0px; padding: 0px 0px 0px 60px; list-style-type: none; } .oct_2016_ul li{ position: relative; margin-bottom: 20px; font-size: 15px; font-family: gothambold; } .oct_2016_ul li:before{ content: \'\'; position: absolute; left: -30px; top: 0px; display: inline-block; border: 2px solid #0098db; border-top: none; border-right: none; height: 10px; width: 20px; transform: rotate(-45deg); } /********************************* PRODUCT OPTIONS - THIN **********************************/ .oct_2016_product_thin{ border: 1px solid #EBEAE6; border-radius: 3px; background-color: #D6BD31; background-image: radial-gradient(#ca2 83%,#db3); margin-bottom: 18px; } .oct_2016_product_thin:last-of-type{ margin-bottom: 0px; } .oct_2016_product_thin_content{ display: block; background-color: #fff; border-top-left-radius: 80px 20px; padding: 18px; } .oct_2016_product_thin_header{ text-transform: uppercase; font-family: gothambold; font-size: 14px; } .oct_2016_cd_link.oct_2016_product_thin{ background-color: #ccc; background-image: radial-gradient(#bbb 83%,#ccc); } .oct_2016_cd_link.oct_2016_product_thin_content{ padding: 0px; } a.oct_2016_cd_link{ display: block; padding: 18px; font-size: 12px; text-decoration: none; color: #0098db; font-family: gothambold; background-image: url(\'http://www.rosettastone.com/lp/spo/oct2016/assets/cd_icon.png\'); background-repeat: no-repeat; background-position: 18px center; background-size: 24px; padding-left: calc(18px + 24px + 9px); } /********************************* PRICES - THIN **********************************/ .oct_2016_price_container{ display: inline-block; vertical-align: middle; width: 31.5%; min-width: 168px; } .oct_2016_big_price{ font-size: 43px; vertical-align: baseline; color: #0078bb; font-family: gothambold; } .oct_2016_big_price:before{ content: \'$\'; font-size: 50%; vertical-align: top; position: relative; top: 5px; } .oct_2016_big_price:after{ content: \' / Month\'; font-size: 14px; vertical-align: baseline; position: relative; top: -2px; font-family: gothambook; color: #333; } /********************************* GIFTING - THIN **********************************/ .oct_2016_gifting_thin, .oct_2016_gifting_thin *{ vertical-align: middle; } .oct_2016_gifting_thin{ font-size: 12px; margin-right: 18px; display: inline-block; background-image: url(\'http://www.rosettastone.com/lp/spo/oct2016/assets/gift.svg\'); background-repeat: no-repeat; background-position: left 50%; background-size: 12px; padding-left: 16px; } /********************************* CART - THIN **********************************/ .oct_2016_addtocart{ vertical-align: middle; background: #0098db; color: #fff; border-radius: 3px; padding: 16px; text-transform: uppercase; text-decoration: none; font-size: 16px; font-family: gothambold; display: inline-block; } .oct_2016_addtocart:hover{ background: #1ae; color: #fff; text-decoration: none; } /********************************* MULTIPAY - THIN **********************************/ .oct_2016_product_thin_multipay{ font-size: 13px; } .oct_2016_multipay_strikeprice{ color: #d00; position: relative; } .oct_2016_multipay_strikeprice:after{ content: \'\'; position: absolute; width: 110%; left: -5%; top: 50%; border-top: 1px solid #d00; } /********************************* PRODUCT OPTIONS - SQUARE **********************************/ .oct_2016_product_square{ border: 1px solid #EBEAE6; border-radius: 3px; background-color: #D6BD31; background-image: radial-gradient(#ca2 83%,#db3); margin: 9px; display: inline-block; color: #333; width: 245px; vertical-align: top; } .oct_2016_product_square:last-of-type{ margin-bottom: 0px; } .oct_2016_product_square_content{ display: block; background-color: #fff; border-top-left-radius: 110px 30px; padding: 24px; } .oct_2016_product_square_header{ text-transform: uppercase; font-family: gothambold; font-size: 14px; border-bottom: 1px solid #ddd; padding-bottom: 10px; } .oct_2016_product_square_subhead{ text-transform: uppercase; font-family: gothamlight; font-size: 14px; } /********************************* PRICES - SQUARE **********************************/ .oct_2016_price_container_square{ vertical-align: middle; margin: 12px 0px 2px; } .oct_2016_price_container_square_cddl{ /*margin-bottom: 0px;*/ } .oct_2016_big_price_square{ font-size: 43px; vertical-align: baseline; color: #0078bb; font-family: gothambold; } .oct_2016_big_price_square:before{ content: \'$\'; font-size: 50%; vertical-align: top; position: relative; top: 5px; } .oct_2016_big_price_square:after{ content: \' / Month\'; font-size: 14px; vertical-align: baseline; position: relative; top: -2px; font-family: gothambook; color: #333; } .oct_2016_big_price_square.no_month:after{ display: none; } /********************************* GIFTING - SQUARE **********************************/ .oct_2016_gifting_square, .oct_2016_gifting_square *{ vertical-align: middle; } .oct_2016_gifting_square{ font-size: 12px; margin-right: 18px; display: inline-block; background-image: url(\'http://www.rosettastone.com/lp/spo/oct2016/assets/gift.svg\'); background-repeat: no-repeat; background-position: left 50%; background-size: 12px; padding-left: 16px; margin-top: 10px; margin-bottom: 12px; } /********************************* CART - SQUARE **********************************/ .oct_2016_addtocart_square{ vertical-align: middle; background: #0098db; color: #fff; border-radius: 3px; padding: 16px; text-transform: uppercase; text-decoration: none; font-size: 16px; font-family: gothambold; display: block; } .oct_2016_addtocart_square:hover{ background: #1ae; color: #fff; text-decoration: none; } /********************************* MULTIPAY and MSRP - SQUARE **********************************/ .oct_2016_product_square_multipay{ font-size: 12px; margin: 0px -20px; } .oct_2016_multipay_strikeprice_square{ color: #d00; position: relative; } .oct_2016_multipay_strikeprice_square:after{ content: \'\'; position: absolute; width: 110%; left: -5%; top: 50%; border-top: 1px solid #d00; } .oct_2016_msrp_square{ font-size: 13px; margin-bottom: 18px; } /********************************* GUARANTEE **********************************/ .oct_2016_guarantee_vertical{ background-image: url(\'http://www.rosettastone.com/lp/spo/oct2016/assets/guarantee.png\'); background-repeat: no-repeat; background-position: center top; padding-top: 90px; margin-top: 20px; } .oct_2016_guarantee_line1{ font-size: 18px; text-transform: uppercase; color: #0088cb; font-family: gothambold; } .oct_2016_guarantee_line2{ font-size: 16px; } /********************************* CD / DOWNLOAD BUTTONS **********************************/ .oct_2016_cd_download_container{ margin-bottom: 30px; } .oct_2016_cd_download_buttons{ display: inline-block; border: 3px solid #333; border-radius: 3px; } .oct_2016_cd_download_container label{ font-size: 16px; display: inline-block; padding: 16px 40px; text-transform: uppercase; cursor: pointer; font-family: gothambold; } .oct_2016_cd_download{ display: none; } .oct_2016_cd_download:checked + label{ background: #333; color: #fff; } </style>';
	var html = '<!-- begin multivariate test html --> <div id="multivariate_container"> <!-- ********************************* SUBSCRIPTION SECTION ***********************************--> <div class="oct_2016_container oct_2016_blue_bg"> <div class="zerofont"> <!-- row 1 --> <div> <div class="oct_2016_col"> <div class="oct_2016_product_info_square"> <div class="oct_2016_language_header"> Learn <span class="js_langname_1">a Language</span> </div> <div class="oct_2016_language_subhead"> Online Subscription </div> <div class="oct_2016_review_star_container"> <div class="hollow_stars"> &#9734; &#9734; &#9734; &#9734; &#9734; <div class="filled_stars"> &#9733; &#9733; &#9733; &#9733; &#9733; </div> </div> <div class="oct_2016_review_star_text">(239 Reviews)</div> </div> <div class="oct_2016_product_intro"> If speaking <span class="js_langname_1">a new language</span> 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. </div> <ul class="oct_2016_ul"> <li>Unlimited access to all 5 levels for selected duration</li> <!-- <li>Access for 1 person</li> --> <li>Speech Recognition</li> <li>Learn anywhere on any device including use of our award-winning mobile app</li> </ul> </div> </div> <div class="oct_2016_col oct_2016_subscription_image"> </div> </div> <!-- row 2 --> <div> <!-- 1-Month --> <div class="oct_2016_product_square js_oct_2016_product"> <div class="oct_2016_product_square_content"> <div class="oct_2016_product_square_header"> <span>1-Month</span> <div class="oct_2016_product_square_subhead"> Subscription </div> </div> <div class="oct_2016_product_square_middle zerofont"> <!-- price --> <div class="oct_2016_price_container_square"> <span class="oct_2016_big_price_square js_oct_2016_price no_month" data-lvl="01" data-media="subscription">XX</span> </div> <!-- msrp --> <div class="oct_2016_msrp_square"> Regular <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="01" data-media="subscription">XX</span></span> </div> <!-- cart button --> <a class="oct_2016_addtocart_square js_oct_2016_addtocart" data-lang="esp" data-media="subscription" data-lvl="01" data-gifting="" href="#">Add to Cart</a> <!-- gifting --> <label class="oct_2016_gifting_square"> <input type="checkbox" autocomplete="off" class="js_oct_2016_gifting"> <span>Give as a gift!</span> </label> </div> <!-- multipay --> <!-- <div class="oct_2016_product_square_multipay"> <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="01" data-media="subscription">XX</span></span> $<span class="js_oct_2016_price" data-lvl="01" data-media="subscription">XX</span> charged every <span class="js_sub_duration_1m">month</span> </div> --> </div> </div> <!-- 6-Month --> <div class="oct_2016_product_square js_oct_2016_product"> <div class="oct_2016_product_square_content"> <div class="oct_2016_product_square_header"> 6-Month <div class="oct_2016_product_square_subhead"> Subscription </div> </div> <div class="oct_2016_product_square_middle zerofont"> <!-- price --> <div class="oct_2016_price_container_square"> <span class="oct_2016_big_price_square js_oct_2016_price no_month" data-lvl="06" data-media="subscription" data-multipay-divisor="">XX</span> </div> <!-- msrp --> <div class="oct_2016_msrp_square"> Regular <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="06" data-media="subscription">XX</span></span> </div> <!-- cart button --> <a class="oct_2016_addtocart_square js_oct_2016_addtocart" data-lang="esp" data-media="subscription" data-lvl="06" data-gifting="" href="#">Add to Cart</a> <!-- gifting --> <label class="oct_2016_gifting_square"> <input type="checkbox" autocomplete="off" class="js_oct_2016_gifting"> <span>Give as a gift!</span> </label> </div> <!-- multipay --> <!-- <div class="oct_2016_product_square_multipay"> <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="06" data-media="subscription">XX</span></span> $<span class="js_oct_2016_price" data-lvl="06" data-media="subscription">XX</span> charged every 6 months </div> --> </div> </div> <!-- 12-Month --> <div class="oct_2016_product_square js_oct_2016_product"> <div class="oct_2016_product_square_content"> <div class="oct_2016_product_square_header"> 12-Month <div class="oct_2016_product_square_subhead"> Subscription </div> </div> <div class="oct_2016_product_square_middle zerofont"> <!-- price --> <div class="oct_2016_price_container_square"> <span class="oct_2016_big_price_square js_oct_2016_price no_month" data-lvl="12" data-media="subscription" data-multipay-divisor="">XX</span> </div> <!-- msrp --> <div class="oct_2016_msrp_square"> Regular <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="12" data-media="subscription">XX</span></span> </div> <!-- cart button --> <a class="oct_2016_addtocart_square js_oct_2016_addtocart" data-lang="esp" data-media="subscription" data-lvl="12" data-gifting="" href="#">Add to Cart</a> <!-- gifting --> <label class="oct_2016_gifting_square"> <input type="checkbox" autocomplete="off" class="js_oct_2016_gifting"> <span>Give as a gift!</span> </label> </div> <!-- multipay --> <!-- <div class="oct_2016_product_square_multipay"> <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="12" data-media="subscription">XX</span></span> $<span class="js_oct_2016_price" data-lvl="12" data-media="subscription">XX</span> charged every 12 months </div> --> </div> </div> <!-- 24-Month --> <div class="oct_2016_product_square js_oct_2016_product"> <div class="oct_2016_product_square_content"> <div class="oct_2016_product_square_header"> 24-Month <div class="oct_2016_product_square_subhead"> Subscription </div> </div> <div class="oct_2016_product_square_middle zerofont"> <!-- price --> <div class="oct_2016_price_container_square"> <span class="oct_2016_big_price_square js_oct_2016_price no_month" data-lvl="24" data-media="subscription" data-multipay-divisor="">XX</span> </div> <!-- msrp --> <div class="oct_2016_msrp_square"> Regular <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="24" data-media="subscription">XX</span></span> </div> <!-- cart button --> <a class="oct_2016_addtocart_square js_oct_2016_addtocart" data-lang="esp" data-media="subscription" data-lvl="24" data-gifting="" href="#">Add to Cart</a> <!-- gifting --> <label class="oct_2016_gifting_square"> <input type="checkbox" autocomplete="off" class="js_oct_2016_gifting"> <span>Give as a gift!</span> </label> </div> <!-- multipay --> <!-- <div class="oct_2016_product_square_multipay"> <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price" data-is-msrp="true" data-lvl="24" data-media="subscription">XX</span></span> $<span class="js_oct_2016_price" data-lvl="24" data-media="subscription">XX</span> charged every 24 months </div> --> </div> </div> </div> </div> <div class="oct_2016_guarantee_vertical"> <div class="oct_2016_guarantee_line1">Purchase with Confidence</div> <div class="oct_2016_guarantee_line2">Includes 30-Day, No-Risk, Money-Back Guarantee.</div> </div> </div> <!-- ********************************* DOWNLOAD + CD SECTION ***********************************--> <div class="oct_2016_container oct_2016_gold_bg"> <div class="zerofont"> <!-- row 1 --> <div> <div class="oct_2016_col oct_2016_cddl_image"> </div> <div class="oct_2016_col"> <div class="oct_2016_product_info_square"> <div class="oct_2016_language_header"> Learn <span class="js_langname_1">a Language</span> </div> <div class="oct_2016_language_subhead"> Download <span>or</span> CD </div> <div class="oct_2016_review_star_container"> <div class="hollow_stars"> &#9734; &#9734; &#9734; &#9734; &#9734; <div class="filled_stars"> &#9733; &#9733; &#9733; &#9733; &#9733; </div> </div> <div class="oct_2016_review_star_text">(239 Reviews)</div> </div> <div class="oct_2016_product_intro"> If speaking <span class="js_langname_1">a new language</span> 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. </div> <ul class="oct_2016_ul"> <li>Learn at your own pace with our course that never&nbsp;expires</li> <li>Access for up to 5 family members</li> <li>Speech Recognition</li> <li>No internet connection required</li> </ul> </div> </div> </div> <!-- row 2 --> <div> <div class="oct_2016_cd_download_container"> <div class="oct_2016_cd_download_buttons"> <!-- download --> <input value="download" type="radio" class="oct_2016_cd_download" name="oct_2016_cd_download" autocomplete="off" id="oct_2016_download" checked> <label for="oct_2016_download"> Instant Download </label> <!-- cd --> <input value="box" type="radio" class="oct_2016_cd_download" name="oct_2016_cd_download" autocomplete="off" id="oct_2016_cd"> <label for="oct_2016_cd"> CD-ROM Set </label> </div> </div> <!-- Level 1 --> <div class="oct_2016_product_square js_oct_2016_product"> <div class="oct_2016_product_square_content"> <div class="oct_2016_product_square_header"> Level 1 <div class="oct_2016_product_square_subhead js_cddl_title"> Instant Download </div> </div> <div class="oct_2016_product_square_middle zerofont"> <!-- price --> <div class="oct_2016_price_container_square oct_2016_price_container_square_cddl"> <span class="oct_2016_big_price_square no_month js_oct_2016_price js_cddl_media" data-lvl="L1" data-media="download">XX</span> </div> <!-- msrp --> <div class="oct_2016_msrp_square"> Regular <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="L1" data-media="download">XX</span></span> </div> <!-- cart button --> <a class="oct_2016_addtocart_square js_oct_2016_addtocart js_cddl_media" data-lang="esp" data-media="download" data-lvl="L1" data-gifting="" href="#">Add to Cart</a> <!-- gifting --> <label class="oct_2016_gifting_square"> <input type="checkbox" autocomplete="off" class="js_oct_2016_gifting"> <span>Give as a gift!</span> </label> </div> </div> </div> <!-- Levels 1-3 --> <div class="oct_2016_product_square js_oct_2016_product"> <div class="oct_2016_product_square_content"> <div class="oct_2016_product_square_header"> Levels 1-3 <div class="oct_2016_product_square_subhead js_cddl_title"> Instant Download </div> </div> <div class="oct_2016_product_square_middle zerofont"> <!-- price --> <div class="oct_2016_price_container_square oct_2016_price_container_square_cddl"> <span class="oct_2016_big_price_square no_month js_oct_2016_price js_cddl_media" data-lvl="S3" data-media="download">XX</span> </div> <!-- msrp --> <div class="oct_2016_msrp_square"> Regular <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="S3" data-media="download">XX</span></span> </div> <!-- cart button --> <a class="oct_2016_addtocart_square js_oct_2016_addtocart js_cddl_media" data-lang="esp" data-media="download" data-lvl="S3" data-gifting="" href="#">Add to Cart</a> <!-- gifting --> <label class="oct_2016_gifting_square"> <input type="checkbox" autocomplete="off" class="js_oct_2016_gifting"> <span>Give as a gift!</span> </label> </div> </div> </div> <!-- Levels 1-5 --> <div class="oct_2016_product_square js_oct_2016_product"> <div class="oct_2016_product_square_content"> <div class="oct_2016_product_square_header"> Levels 1-5 <div class="oct_2016_product_square_subhead js_cddl_title"> Instant Download </div> </div> <div class="oct_2016_product_square_middle zerofont"> <!-- price --> <div class="oct_2016_price_container_square oct_2016_price_container_square_cddl"> <span class="oct_2016_big_price_square no_month js_oct_2016_price js_cddl_media" data-lvl="S5" data-media="download">XX</span> </div> <!-- msrp --> <div class="oct_2016_msrp_square"> Regular <span class="oct_2016_multipay_strikeprice_square">$<span class="js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="S5" data-media="download">XX</span></span> </div> <!-- cart button --> <a class="oct_2016_addtocart_square js_oct_2016_addtocart js_cddl_media" data-lang="esp" data-media="download" data-lvl="S5" data-gifting="" href="#">Add to Cart</a> <!-- gifting --> <label class="oct_2016_gifting_square"> <input type="checkbox" autocomplete="off" class="js_oct_2016_gifting"> <span>Give as a gift!</span> </label> </div> </div> </div> </div> </div> <div class="oct_2016_guarantee_vertical"> <div class="oct_2016_guarantee_line1">Purchase with Confidence</div> <div class="oct_2016_guarantee_line2">Includes 30-Day, No-Risk, Money-Back Guarantee.</div> </div> </div> </div> <!-- end multivariate test html -->';

	var insertion = document.createElement('div');
	insertion.innerHTML = css + html;

	var html_part = document.createElement('div');
	html_part.innerHTML = html;


	// where to insert for sbsr or ppc
	if(/sbsr|ppc/i.test(window.location.href)){
		document.getElementById('wrapper').insertBefore(insertion, document.getElementById('products'));
	}

	// where to insert for catalogs
	if(/learn-/i.test(window.location.href)){
		document.querySelector('.spo-description-wrap').insertBefore(insertion, document.querySelector('.control-exp'));
		$('.control-exp, figure.guarantee, .backstripe').hide();
	}














	// handle js







	/********************************************
	INITIALIZE LANGUAGE AND PAGE
	*********************************************/

	var current_lang = 'esp';

	function isFIGS(lang){
		return (/esp|fra|deu|ita/i).test(lang);
	}


	function getLangUrlParam(){
		return ( (window.location.search.match(/lang(uage)*=([^&]+)/i)||[])[2] || '').toLowerCase();
	}


	function respondToPreselectedLang(){

		// if lang in url parameter
		if( isFIGS(getLangUrlParam()) ){
			$(document).trigger('lang_change', {
				'lang': getLangUrlParam()
			});
		}

		// if lang in catalog
		if(isCatalog() && isFIGS(getCatalogLang())){
			$(document).trigger('lang_change', {
				'lang': getCatalogLang()
			});
		}
	}

	function isCatalog(){
		return window.location.pathname.match(/learn-/i);
	}

	function getCatalogLang(){
		return window.lang;
	}


	// if not catalog, make test only show on desktop
	if(!isCatalog()){
		$(window).on('resize', function(){

			// if figs and desktop width, show test
			if(isFIGS(current_lang) && window.innerWidth > 1135){
				$('#multivariate_container').show();
				$('#products').hide();
			}

			// else hide test
			else{
				$('#multivariate_container').hide();
				$('#products').show();
			}
		});
	}













	/********************************************
	INIT - RENDER EXPERIENCES AND FILL IN DATA
	*********************************************/

	function initPage(current_experience){

		render_experience(current_experience);

		set_up_pre_language();

		respondToPreselectedLang();

		$(document).trigger('price_update');
		$(document).trigger('cart_update');
	}












	/********************************************
	EMIT LANGUAGE CHANGE EVENTS
	*********************************************/


	// emit event when language changes in test mode
	$('#temporary_lang_dropdown').on('change',function(){
		var lang = this.value;

		$(document).trigger('lang_change', {
			'lang': lang
		});
	});


	// emit event when language changes on sbsr or ppc
	$('.language-buy-list a').click(function(){
		var lang = this.id;

		$(document).trigger('lang_change', {
			'lang': lang
		});
	});










	/********************************************
	RESPOND TO LANGUAGE CHANGE EVENTS
	*********************************************/


	// update everything when language changes
	$(document).on('lang_change', function(e,data){

		// restore cart button functionality now that we have a language
		$('.js_oct_2016_addtocart').off('click').html('Add to Cart');

		var lang = data.lang;

		current_lang = lang; // just so this is available


		// if top langs, run test code
		if(isFIGS(lang)){

			// show test products and hide regular products
			$('#multivariate_container').show();
			$('#products').hide();

			var lang_map = {
				esp: 'Spanish (Latin America)',
				eng: 'English (American)',
				fra: 'French',
				deu: 'German',
				ita: 'Italian',
				ara: 'Arabic',
				chi: 'Chinese (Mandarin)',
				ned: 'Dutch',
				ebr: 'English (British)',
				tgl: 'Filipino (Tagalog)',
				grk: 'Greek',
				heb: 'Hebrew',
				hin: 'Hindi',
				gle: 'Irish',
				jpn: 'Japanese',
				kor: 'Korean',
				far: 'Persian (Farsi)',
				pol: 'Polish',
				por: 'Portuguese (Brazil)',
				rus: 'Russian',
				esc: 'Spanish (Spain)',
				sve: 'Swedish',
				tur: 'Turkish',
				vie: 'Vietnamese'
			};

			var lang_name_parts = {
				first : lang_map[lang].split(' (')[0],
				last : (lang_map[lang].match(/\(.+/)||[])[0],
				full : lang_map[lang]
			};

			// update language display names
			$('.js_langname_1').html(lang_name_parts.first);
			$('.js_langname_2').html(lang_name_parts.last);
			$('.js_langname').html(lang_name_parts.full);

			// update cart buttons
			$('.js_oct_2016_addtocart').attr('data-lang', lang);

			$(document).trigger('cart_update');
		}


		// if not top langs, hide test and show regular products
		else{
			$('#multivariate_container').hide();
			$('#products').show();
		}
	});













	/********************************************
	SET CORRECT PRICES EVERYWHERE
	*********************************************/

	function update_prices(selector){

		var prices = document.querySelectorAll(selector);
		var rsidata, lvl, media, isMsrp, multipay_divisor, msrp, price;

		for(var i=0; i<prices.length; i++){
			lvl = prices[i].getAttribute('data-lvl');
			media = prices[i].getAttribute('data-media');
			isMsrp = prices[i].getAttribute('data-is-msrp');

			multipay_divisor = prices[i].getAttribute('data-multipay-divisor');

			rsidata = RSI({'lvl':lvl, 'media':media})[0];

			msrp = multipay_divisor ? Math.ceil(rsidata.msrp/multipay_divisor) : rsidata.msrp;
			price = multipay_divisor ? Math.ceil(rsidata.price/multipay_divisor) : rsidata.price;

			if(isMsrp){
				prices[i].innerHTML = msrp;

				if(msrp===price){
					prices[i].parentElement.parentElement.style.visibility = 'hidden';
				}
			}
			else{
				prices[i].innerHTML = price;
			}
		}
	}










	/********************************************
	TOGGLE GIFTING
	*********************************************/

	$('.js_oct_2016_gifting').on('change', function(){
		
		// update data-gifting attribute on nearest cart button
		$(this).closest('.js_oct_2016_product').find('.js_oct_2016_addtocart').attr('data-gifting', this.checked || '');

		// tell cart buttons about the change
		$(document).trigger('cart_update');
	});








	/********************************************
	TOGGLE CD AND DOWNLOAD
	*********************************************/

	$('.oct_2016_cd_download').on('change', function(){
		$(document).trigger('cd_download_toggle', {media: this.value});
	});








	/********************************************
	RESPOND TO CD/DOWNLOAD TOGGLE EVENT
	*********************************************/

	$(document).on('cd_download_toggle', function(e,data){

		// box or download
		var media = data.media;

		// full names of cd and download
		var item_name_map = {
			'box' : 'CD-ROM',
			'download' : 'Instant Download'
		};
		var item_name = item_name_map[media];

		// show item names
		$('.js_cddl_title').html(item_name);

		// update data-media for all cd/dl elements
		$('.js_cddl_media').attr('data-media', media);

		// tell prices about changes
		$(document).trigger('price_update');

		// tell cart buttons about changes
		$(document).trigger('cart_update');
	});








	/********************************************
	PUT CORRECT URLS IN EACH CART BUTTON
	*********************************************/

	function update_cart_urls(cart_selector){

		$(cart_selector).attr('href', function(){
			var lang = this.getAttribute('data-lang');
			var media = this.getAttribute('data-media');
			var lvl = this.getAttribute('data-lvl');
			var gifting = this.getAttribute('data-gifting');

			// var carturl = lang+'/'+media+'/'+lvl;
			var carturl = RSI({'cat':lang, 'media':media, 'lvl':lvl})[0].cart;

			// add or remove gifting as needed
			if(gifting){
				var separator = carturl.indexOf('?')>-1 ? '&' : '?';
				carturl += separator + 'gifting=1';
			}
			else{
				carturl = carturl.replace(/[?&]gifting=1/gi, '');
			}

			return carturl;
		});
	}






	/********************************************
	RESPOND TO CART UPDATE EVENT
	*********************************************/

	$(document).on('cart_update', function(){
		update_cart_urls('.js_oct_2016_addtocart');
	});






	/********************************************
	RESPOND TO PRICE UPDATE EVENT
	*********************************************/

	$(document).on('price_update', function(){
		update_prices('.js_oct_2016_price');
	});






	/********************************************
	RENDER CORRECT EXPERIENCE
	*********************************************/

	function render_experience(exp){
		if(exp===2 || exp==='2' || exp==='f'){
			render_experience_f();
		}
	}

	// experience f changes 1-month sub to 3-month sub
	function render_experience_f(){

		// change product title to 3-Month
		document.querySelector('.oct_2016_product_square_header > span').innerHTML = '3-Month';

		// change multipay divisor to 3
		// $('.oct_2016_big_price_square[data-lvl="01"]').attr('data-multipay-divisor','3');

		// change 1m multipay duration to 3m
		$('.js_sub_duration_1m').html('3 months');

		// change data-lvl to "03"
		$('.js_oct_2016_product *[data-lvl="01"]').attr('data-lvl','03');
	}






	/********************************************
	SET CART BEHAVIOR BEFORE LANGUAGE IS SELECTED
	*********************************************/

	function set_up_pre_language(){
		$('.js_oct_2016_addtocart').html('Select Language').on('click',function(){
			smoothScrollTo('lang-menu');
			return false;
		});
	}





	/***********************************************************************
	SMOOTH SCROLL
	************************************************************************/
	function smoothScrollTo(scrolltargetid){
		var target = document.getElementById(scrolltargetid); 
		if(target){
			$('html,body').animate({scrollTop : target.getBoundingClientRect().top + window.scrollY}, 'fast');
		}
	}






	initPage(current_experience);







});