- 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
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
- 830
- 831
- 832
- 833
- 834
- 835
- 836
- 837
- 838
- 839
- 840
- 841
- 842
- 843
- 844
- 845
- 846
- 847
- 848
- 849
- 850
- 851
- 852
- 853
- 854
- 855
- 856
- 857
- 858
- 859
- 860
- 861
- 862
- 863
- 864
- 865
- 866
- 867
- 868
- 869
- 870
- 871
- 872
- 873
- 874
- 875
- 876
- 877
- 878
- 879
- 880
- 881
- 882
- 883
- 884
- 885
- 886
- 887
- 888
- 889
- 890
- 891
- 892
- 893
- 894
- 895
- 896
- 897
- 898
- 899
- 900
- 901
- 902
- 903
- 904
- 905
- 906
- 907
- 908
- 909
- 910
- 911
- 912
- 913
- 914
- 915
- 916
- 917
- 918
- 919
- 920
- 921
- 922
- 923
- 924
- 925
- 926
- 927
- 928
- 929
- 930
- 931
- 932
- 933
- 934
- 935
- 936
- 937
- 938
- 939
- 940
- 941
- 942
- 943
- 944
- 945
- 946
- 947
- 948
- 949
- 950
- 951
- 952
- 953
- 954
- 955
- 956
- 957
- 958
- 959
- 960
- 961
- 962
- 963
- 964
- 965
- 966
- 967
- 968
- 969
- 970
- 971
- 972
- 973
- 974
- 975
- 976
- 977
- 978
- 979
- 980
- 981
- 982
- 983
- 984
- 985
- 986
- 987
- 988
- 989
- 990
- 991
- 992
- 993
- 994
- 995
- 996
- 997
- 998
- 999
- 1000
- 1001
- 1002
- 1003
- 1004
- 1005
- 1006
- 1007
- 1008
- 1009
- 1010
- 1011
- 1012
- 1013
- 1014
- 1015
- 1016
- 1017
- 1018
- 1019
- 1020
- 1021
- 1022
- 1023
- 1024
- 1025
- 1026
- 1027
- 1028
- 1029
- 1030
- 1031
- 1032
- 1033
- 1034
- 1035
- 1036
- 1037
- 1038
- 1039
- 1040
- 1041
- 1042
- 1043
- 1044
- 1045
- 1046
- 1047
- 1048
- 1049
- 1050
- 1051
- 1052
- 1053
- 1054
- 1055
- 1056
- 1057
- 1058
- 1059
- 1060
- 1061
- 1062
- 1063
- 1064
- 1065
- 1066
- 1067
- 1068
- 1069
- 1070
- 1071
- 1072
- 1073
- 1074
- 1075
- 1076
- 1077
- 1078
- 1079
- 1080
- 1081
- 1082
- 1083
- 1084
- 1085
- 1086
- 1087
- 1088
- 1089
- 1090
- 1091
- 1092
- 1093
- 1094
- 1095
- 1096
- 1097
- 1098
- 1099
- 1100
- 1101
- 1102
- 1103
- 1104
- 1105
- 1106
- 1107
- 1108
- 1109
- 1110
- 1111
- 1112
- 1113
- 1114
- 1115
- 1116
- 1117
- 1118
- 1119
- 1120
- 1121
- 1122
- 1123
- 1124
- 1125
- 1126
- 1127
- 1128
- 1129
- 1130
- 1131
- 1132
- 1133
- 1134
- 1135
- 1136
- 1137
- 1138
- 1139
- 1140
- 1141
- 1142
- 1143
- 1144
- 1145
- 1146
- 1147
- 1148
- 1149
- 1150
- 1151
- 1152
- 1153
- 1154
- 1155
- 1156
- 1157
- 1158
- 1159
- 1160
- 1161
- 1162
- 1163
- 1164
- 1165
- 1166
- 1167
- 1168
- 1169
- 1170
- 1171
- 1172
- 1173
- 1174
- 1175
- 1176
- 1177
- 1178
- 1179
- 1180
- 1181
- 1182
- 1183
- 1184
- 1185
- 1186
- 1187
- 1188
- 1189
- 1190
- 1191
- 1192
- 1193
- 1194
- 1195
- 1196
- 1197
- 1198
- 1199
- 1200
- 1201
- 1202
- 1203
- 1204
- 1205
- 1206
- 1207
- 1208
- 1209
- 1210
- 1211
- 1212
- 1213
- 1214
- 1215
- 1216
- 1217
- 1218
- 1219
- 1220
- 1221
- 1222
- 1223
- 1224
- 1225
- 1226
- 1227
- 1228
- 1229
- 1230
- 1231
- 1232
- 1233
- 1234
- 1235
- 1236
- 1237
- 1238
- 1239
- 1240
- 1241
- 1242
- 1243
- 1244
- 1245
- 1246
- 1247
- 1248
- 1249
- 1250
- 1251
- 1252
- 1253
- 1254
- 1255
- 1256
- 1257
- 1258
- 1259
- 1260
- 1261
- 1262
- 1263
- 1264
- 1265
- 1266
- 1267
- 1268
- 1269
- 1270
- 1271
- 1272
- 1273
- 1274
- 1275
- 1276
- 1277
- 1278
- 1279
- 1280
- 1281
- 1282
- 1283
- 1284
- 1285
- 1286
- 1287
- 1288
- 1289
- 1290
- 1291
- 1292
- 1293
- 1294
- 1295
- 1296
- 1297
- 1298
- 1299
- 1300
- 1301
- 1302
- 1303
- 1304
- 1305
- 1306
- 1307
- 1308
- 1309
- 1310
- 1311
- 1312
- 1313
- 1314
- 1315
- 1316
- 1317
- 1318
- 1319
- 1320
- 1321
- 1322
- 1323
- 1324
- 1325
- 1326
- 1327
- 1328
- 1329
- 1330
- 1331
- 1332
- 1333
- 1334
- 1335
- 1336
- 1337
- 1338
- 1339
- 1340
- 1341
- 1342
- 1343
- 1344
- 1345
- 1346
- 1347
- 1348
- 1349
- 1350
- 1351
- 1352
- 1353
- 1354
- 1355
- 1356
- 1357
- 1358
- 1359
- 1360
- 1361
- 1362
- 1363
- 1364
- 1365
- 1366
- 1367
- 1368
- 1369
- 1370
- 1371
- 1372
- 1373
- 1374
- 1375
- 1376
- 1377
- 1378
- 1379
- 1380
- 1381
- 1382
- 1383
- 1384
- 1385
- 1386
- 1387
- 1388
- 1389
- 1390
- 1391
- 1392
- 1393
- 1394
- 1395
- 1396
- 1397
- 1398
- 1399
- 1400
- 1401
- 1402
- 1403
- 1404
- 1405
- 1406
- 1407
- 1408
- 1409
- 1410
- 1411
- 1412
- 1413
- 1414
- 1415
- 1416
- 1417
- 1418
- 1419
- 1420
- 1421
- 1422
- 1423
- 1424
- 1425
- 1426
- 1427
- 1428
- 1429
- 1430
- 1431
- 1432
- 1433
- 1434
- 1435
- 1436
- 1437
- 1438
- 1439
- 1440
- 1441
- 1442
- 1443
- 1444
- 1445
- 1446
- 1447
- 1448
- 1449
- 1450
- 1451
- 1452
- 1453
- 1454
- 1455
- 1456
- 1457
- 1458
- 1459
- 1460
- 1461
- 1462
- 1463
- 1464
- 1465
- 1466
- 1467
- 1468
- 1469
- 1470
- 1471
- 1472
/*
Start A/B Test experiences code
*/
// Lesson zero product walkthrough experience.
// Newsletter_type and Endpoint changes on Mobile deveices
var TEST_NEWSLETTER_TYPE_LESSON_ZERO = "DTC_mobile-lessonzero";
var TEST_MOBILE_DEMO_URL = "lp/lesson-zero";
/*
End A/B Test experiences code
*/
/*
* Detects if we are on a mobile device.
* User-agent sniffing isn't reliable, but Yolo.
*/
window.isDesktop = !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// test for mobile (not tablet and not desktop)
window.isMobile = !isDesktop && !/iPad/i.test(navigator.userAgent);
// test for tablet (not tablet and not desktop)
window.isTablet = !isDesktop && !isMobile;
// turn the new mobile demo on or off
window.new_mobile_demo_turned_on = true;
// allow language url parameters
window.allow_language_url_parameter = true;
/************************************************************
SHOW ALL LANGUAGES WHEN NEEDED
*************************************************************/
// show all languages if desktop and correct url parameter
(function(){
var lang_param = getParameter('(lang|language)');
var other_langs = [
'ara','chi','dar','ned','ebr','tgl','grk','heb',
'hin','ind','gle','jpn','kor','lat','pas','far',
'pol','por','rus','esc','kis','sve','tur','urd','vie'
];
// turn on all languages...
window.all_languages_on = !!(
// if we're on desktop...
isDesktop
// AND one of the following is true:
&& (
// url parameter all_languages=on
getParameter('all_languages')=='on'
// OR url parameter lang or language = non-top-5 language
|| ~other_langs.indexOf(lang_param)
)
);
})();
/************************************************************
URL PARAMETER HELPER FUNCTIONS
*************************************************************/
function parameterMatches(param,val){
var reg = new RegExp('[?&]'+param+'='+val+'(?=[&]|$)','i');
return !!window.location.search.match(reg);
}
function parameterExists(param){
var reg = new RegExp('[?&]'+param+'=','i');
return !!window.location.search.match(reg);
}
function getParameter(param){
var reg = new RegExp('[?&]'+param+'=([^&]+)','i');
return parameterExists(param) ? window.location.search.match(reg).pop() : '';
}
/*
* First, if we are on a mobile or tablet device, we
* don't waste bandwidth with the masthead video.
* Here we check to see if we're on mobile/tablet,
* and if so, do not prepend video to body
*/
/*
var video_poster = 'img/vidbg.jpg';
var video_file = 'video-header.webm';
if(window.location.search.match(/masthead=bill/i)){
video_poster = 'img/vidbg_bill.jpg';
video_file = 'video-header_bill.webm';
}
if(window.location.search.match(/masthead=grace/i)){
video_poster = 'img/vidbg_grace.jpg';
video_file = 'video-header_grace.webm';
}
var video = ''
+ '<video '
+ 'preload="auto"'
+ ' autoplay="true"'
+ ' loop="loop"'
+ ' muted="muted"'
+ ' volume="0"'
+ ' id="video-masthead"'
+ ' poster="'+video_poster+'">'
+ '<source src="'+video_file+'" type="video/webm">'
+ '</video>'
;
if (isDesktop) $('#container-top-wrapper').prepend(video);*/
// Elements we will target more than once
var $defaultOption = $('#default-option')
, $dropdown = $('ul#dropdown')
, $dropdownLi = $('ul#dropdown li')
, $inputWrapper = $('#input-wrapper')
, $circlesLi = $('ul#circles li')
, $lightboxDemo = $('#lightbox-demo')
, $videoMasthead = $('#video-masthead')
, $form = $('form')
, $postDemo = $('#offer-postdemo')
;
// use different dropdown if all languages turned on
if(all_languages_on){
$dropdown = $('#all_languages_overlay');
$dropdownLi = $('#all_languages_overlay li');
}
// handle close for "all languages" overlay
$('#all_languages_close').click(function(){
$('#all_languages_overlay').slideUp();
});
// Show/hide languages when dropdown is clicked
$defaultOption.on('click', function() {
$('#default-option').toggleClass('corners')
$dropdown.slideToggle()
});
// make dropdown keyboard accessible
$defaultOption.on('keydown', function(e){
if(e.keyCode===13){
$(this).click();
}
});
/*
* Play audio when circles are hovered.
* If we're on mobile/tablet, it has to be
* a click event, not hover.
*/
if (isDesktop) {
$circlesLi.hover(function() {
$(this).find('audio')[0].play()
$(this).find('img').fadeIn()
}, function () {
var audio = $(this).find('audio')[0]
audio.pause()
audio.currentTime = 0
$(this).find('img').fadeOut()
});
} else {
$circlesLi.click(function() {
$img = $(this).find('img')
a = $(this).find('audio')
a.get(0).play();
a.get(0).addEventListener('ended', function() {
$img.fadeOut()
}, false)
$img.fadeIn()
})
}
//Engage Analytics Listeners for Demo:
jQuery(document).ready(function engageanalytics() {
jQuery(document).trigger('demo_events_version', {
version: 1
,description: ''
,standard: 'http://tabbit.org/%E2%98%8D%E2%98%B9W'
});
});
// When a language is clicked in the dropdown...
$dropdownLi.on('click', function() {
$('#default-option').addClass('corners')
$dropdown.slideUp(250, function() {
$inputWrapper.slideDown()
})
// Add a class of 'selected'
$dropdownLi.removeClass('selected')
$(this).addClass('selected')
// Set defaultOption's value to the selected language
$defaultOption.html( $(this).html() )
});
// make dropdown languages keyboard accessible
$dropdownLi.on('keydown', function(e){
if(e.keyCode===13){
$(this).click();
}
});
// preselect language if there's a url parameter of lang or language
(function(){
if(window.allow_language_url_parameter){
var lang_param = getParameter('(lang|language)');
if(lang_param){
var reverse_map = {
'fra' : 'en-fr',
'deu' : 'en-de',
'ita' : 'en-it',
'eng' : 'en-en',
'esp' : 'en-es'
};
var data_code = reverse_map[lang_param] || lang_param;
var $selectedLang = $($dropdownLi.selector+'[data-code='+data_code+']');
// if language from url parameter is available
if((reverse_map[lang_param] || all_languages_on) && $selectedLang[0]){
// show email field
$inputWrapper.slideDown();
// Add a class of 'selected'
$dropdownLi.removeClass('selected');
$selectedLang.addClass('selected');
// Set defaultOption's value to the selected language
$defaultOption.html( $selectedLang.html() );
}
}
}
})();
/**************************************************
BRITEVERIFY EMAIL VERIFICATION
***************************************************/
function verify_real_email(email, success_callback, failure_callback){
// make sure all parameters are used
if(!email || !success_callback || !failure_callback){
return;
}
// if gdpr consent isn't given, skip the validation and go straight to the demo
var gdpr_consent_given = window.gdpr && window.gdpr.email_consent && window.gdpr.email_consent != null;
if(!gdpr_consent_given){
success_callback();
return;
}
// if request isn't found in 2 sec or less, move on without it
var max_wait_seconds = 2;
window.briteverify_timeout_finished_first = false;
window.briteverify_api_finished_first = false;
setTimeout(function(){
if(!window.briteverify_api_finished_first){
window.briteverify_timeout_finished_first = true;
success_callback && success_callback();
}
}, max_wait_seconds*1000);
// hit briteverify api (https://support.briteverify.com/javascript-api)
var data = {
username: 'pestes',
address: email
};
var url = 'https://bpi.briteverify.com/emails.json';
$.get(url, data, function (results) {
if(!window.briteverify_timeout_finished_first && results && results.status){
window.briteverify_api_finished_first = true;
if(results.status==='invalid'){
failure_callback && failure_callback();
}
else{
success_callback && success_callback();
}
}
},'jsonp');
}
/**************************************************
FORM SUBMIT
***************************************************/
$form.submit(function(e) {
e.preventDefault()
var $inputEmail = $('input[type=text]')
, $languageError = $('#language-error')
, error = false
, email = $('input[type=text]').val()
, selectedLanguage = $dropdown.find('.selected').data('code') || 'en-es'
;
// This should never happen since to see email field, you have to select a language.
// but add it for good measure anyway.
if (!$dropdownLi.find('.selected')) {
error = true
$languageError.fadeIn()
} else {
$languageError.fadeOut()
}
// show or hide email error messages
function show_email_error(spelling){
error = true;
$inputEmail.addClass('input-error');
if(spelling){
document.getElementById('spelling_error_message').style.display = 'block';
}
else{
document.getElementById('email_error_message').style.display = 'block';
}
}
function hide_email_error(){
$inputEmail.removeClass('input-error');
document.getElementById('email_error_message').style.display = 'none';
document.getElementById('spelling_error_message').style.display = 'none';
}
// Only validate email if user doesn't have the demotaken cookie
if (!RSUI.util.getCookie('demotaken')) {
// check if the email format is valid
if (!validateEmail(email)) {
show_email_error();
} else {
hide_email_error();
// make sure there's no language dropdown error (should never happen, but just to be safe)
if(!error){
// briteverify validation to make sure email is real
verify_real_email(email,
function(){
submitEmailToEC(email, selectedLanguage);
},
function(){
show_email_error('spelling');
});
}
}
}
// if no errors, and demo already taken, submit (the demo will open)
if (!error && RSUI.util.getCookie('demotaken')) {
submitEmailToEC(email, selectedLanguage);
}
})
/* ========================== Send Email To EC ========================*/
function submitEmailToEC(email, lang) {
var langCode = lang
var gdpr_consent_given = window.gdpr && window.gdpr.email_consent && window.gdpr.email_consent != null;
if (!gdpr_consent_given || RSUI.util.getCookie('demotaken') || RSUI.util.getCookie('rsdemo')) {
openDemo(lang);
return;
} else {
var map = {
'en-fr' : 'fra',
'en-de' : 'deu',
'en-it' : 'ita',
'en-en' : 'eng',
'en-es' : 'esp'
}
if (Object.keys(map).indexOf(langCode) != -1)
{
langCode = map[langCode]
}
var defer = jQuery.Deferred()
$(document).trigger('demo_email', {
email: email,
is_offer: false
});
var baseURL = (window.location.href.search(/(\.stg\.)|(local)/i)>-1 ?
'https://www.stg' :
'https://www')
+ '.rosettastone.com/?redirect2mobile=no&p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2&data=';
var lead_page = window.location.href
var form_url = window.location.pathname
if (window.location.href.match(/\.com\/$/i) != null) {
// home page
lead_type = 'demo_video';
lead_page = 'homepage'
form_url = 'rosettastone.com'
if (window.location.href.match(/espanol/i)) {
// espanol home page
lead_type = 'demo_video';
lead_page = 'homepage'
form_url = 'espanol.rosettastone.com'
}
}
if (window.location.href.match(/learn-*/i) != null) {
lead_type = 'demo_video';
lead_page = 'learn_page'
form_url = 'learn pages'
}
if (window.location.href.match(/speak-*/i) != null) {
lead_type = 'demo_video';
lead_page = 'speak_page'
form_url = 'speak pages'
}
if (window.location.href.match(/buy-*/i) != null) {
lead_type = 'demo_video';
lead_page = 'buy_page'
form_url = 'buy pages'
}
if (window.location.href.match(/opdemo2/i) != null) {
lead_type = 'demo_video';
lead_page = 'demo_page'
form_url = '/lp/opdemo2'
}
if (window.location.href.match(/\/demo\//i) != null) {
lead_type = 'demo_video';
lead_page = 'demo_page'
form_url = '/demo'
}
if (window.location.href.match(/\/freetrial\//i) != null) {
lead_type = 'freetrial';
lead_page = 'trial_page'
form_url = '/freetrial'
}
if (window.location.href.match(/\/reviews\//i) != null) {
lead_type = 'demo_video';
lead_page = 'reviews'
form_url = '/reviews'
}
if (window.location.href.match(/\/testimonials\//i) != null) {
lead_type = 'demo_video';
lead_page = 'testimonials'
form_url = '/testimonials'
}
if (window.location.href.match(/\/opdemo-es\//i) != null) {
lead_type = 'demo_video';
lead_page = 'demo_page'
form_url = '/lp/opdemo-es'
}
if (window.location.href.match(/\/aprende-*\//i) != null) {
lead_type = 'demo_video';
lead_page = 'learn_page'
form_url = 'aprende pages'
}
if (window.location.href.match(/\/homeschool\/reviews\//i) != null) {
lead_type = 'demo_video';
lead_page = 'homeschool_reviews'
form_url = '/homeschool/reviews'
}
if (window.location.href.match(/\/homeschool\/demo\//i) != null) {
lead_type = 'demo_video';
lead_page = 'homeschool_demo'
form_url = '/homeschool/demo'
}
var data = {
email : email, // required
cis_name : '!!US_Web_Leads', // required
form_url : form_url, // required
website: 'US_WEBSITE', // required
lead_type : lead_type,
lead_page : lead_page,
demo_type: lead_type,
newsletter_type: lead_page,
form_type : form_url, // not required, but if omitted, lead_page defaults to 'PE'
demo_lang : langCode,
consent_type : ( window.gdpr && window.gdpr.email_consent ) || null,
visit_country_code : ( window.gdpr && window.gdpr.country_code ) || null,
cid: _satellite.getVar('mostrecentcampaign'),
demo_device: isDesktop ? 'desktop' : 'mobile',
}
var request = jQuery.post(baseURL + encodeURIComponent(JSON.stringify(data)), data);
request.done(function(msg) {
if (/"cisFlag":"true"/.test(msg)) {
// Doty's demo pixel
$('body').append('<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1041440066/?label=WzGCCNzOy1gQwrrM8AM&guid=ON&script=0"/>')
// Wondery pixel
var wonderyIFrame = document.createElement("iframe");
wonderyIFrame.width = '0';
wonderyIFrame.height = '0';
wonderyIFrame.frameBorder = '0';
wonderyIFrame.scrolling = 'no';
wonderyIFrame.style = 'display:none;';
var pge = window.location.pathname;
var cvnval = '0';
var iFrameSrc = '//sync.graph.bluecava.com/i?p=3c555e81-69d3-11e8-b13c-0242ac110002&segment=845cb20d395ae91183a00242ac110002&seg_apx=17612163&sid=Wondery&cid=RosettaStone&chnl=podcast&pge=' + pge + '&event=conversion&cvn=demo&cvnval=' + cvnval;
wonderyIFrame.src = iFrameSrc;
document.body.append(wonderyIFrame);
// record the email in a cookie that expires in 30 days
RSUI.util.setCookie("curEmailIdsc",email)
RSUI.util.setCookie('demotaken', "1", 1, 30 * 1000 * 60 * 60 * 24);
//document.cookie = 'curEmailIdsc='+email+'; max-age='+60*60*24*30+'; path=/;';
// Fire Geist conversion check pixel in DTM rule AnalyticsGlobal_Geist
if(typeof geistConversionCheck === 'function') {
geistConversionCheck();
}
defer.resolve('success')
openDemo(lang);
}else{
$('input[type=text]').addClass('input-error').attr('placeholder', 'Sorry, try again!')
}
})
return defer.promise()
}
}
// function below not used: openDemo() allows old demo for english instead of no demo for english - LD 2015.10.13
// if new mobile demo, make sure we can't select english since it's not available there
// (function(){
// if(new_mobile_demo_turned_on && (isMobile || window.location.search.match(/new_mobile_demo/i)) ){
// var eng = document.getElementById('dropdown-wrapper').querySelector('li[data-code=en-en]');
// eng.parentNode.removeChild(eng);
// }
// })();
function openDemo(lang) {
lang = typeof lang !== 'undefined' ? lang : 'en-es';
// open new mobile demo if we see the query parameter new_mobile_demo
var lang_name = {
'en-fr' : 'french',
'en-de' : 'german',
'en-it' : 'italian',
'en-en' : 'spanish', // because new mobile demo doesn't have english
'en-es' : 'spanish',
}
var lang_code = {
'en-fr' : 'FRA',
'en-de' : 'DEU',
'en-it' : 'ITA',
'en-en' : 'ENG',
'en-es' : 'ESP'
}
// this is the language format evar7 wants
var evar7_langs = {
'en-fr' : 'french',
'en-de' : 'german',
'en-it' : 'italian',
'en-en' : 'english(american)', // because new mobile demo doesn't have english
'en-es' : 'spanish(latin america)',
'ara' : 'arabic',
'chi' : 'chinese(mandarin)',
'dar' : 'dari',
'ned' : 'dutch',
'ebr' : 'english(british)',
'tgl' : 'filipino(tagalog)',
'grk' : 'greek',
'heb' : 'hebrew',
'hin' : 'hindi',
'ind' : 'indonesian',
'gle' : 'irish',
'jpn' : 'japanese',
'kor' : 'korean',
'lat' : 'latin',
'pas' : 'pashto',
'far' : 'persian(farsi)',
'pol' : 'polish',
'por' : 'portuguese(brazil)',
'rus' : 'russian',
'esc' : 'spanish(spain)',
'kis' : 'swahili',
'sve' : 'swedish',
'tur' : 'turkish',
'urd' : 'urdu',
'vie' : 'vietnamese'
};
// trigger analytics evar7 to show which language
$(document).trigger('demo_language', {language: evar7_langs[lang], lang_code: (lang_code[lang] || lang)});
var isMobileDemo = new_mobile_demo_turned_on && (isMobile || window.location.search.match(/new_mobile_demo/i));
// fire analytics handler
$(document).trigger('demo_start', {
version: isMobileDemo ? 'm1' : 'd4'
,version_description: isMobileDemo ? 'mobile_demo' : 'desktop_demo'
,start_time: new Date()
});
var stg_or_not = window.location.href.match(/\.stg\./i) ? 'stg.':'';
var standard_demo_url = '//resources.' + stg_or_not + 'rosettastone.com/CDN/us/rs-i-demo-6/?lang=' + lang;
// if non-top-5 language selected, use old demo
if(all_languages_on && !lang.match('-')){
standard_demo_url = '//www.rosettastone.com/lp/mobile-demo/?e=0&lang='+lang;
}
// show new mobile demo
if(isMobileDemo){
// allows old demo for english instead of no demo for english
setTimeout(function(){
if( window.TEST_EXPEREINCE_ID && window.TEST_EXPEREINCE_ID === "LZ"){
window.location.href = 'https://www.'+stg_or_not+'rosettastone.com/'+TEST_MOBILE_DEMO_URL+'/?lang='+lang;
}else{
if(lang == "en-en"){
window.location.href = standard_demo_url;
}else{
window.location.href = 'https://www.'+stg_or_not+'rosettastone.com/lp/demo-mdot/?lang='+lang_name[lang];
}
}
},1000);
}
// old demo for mobile and tablet
if ((!new_mobile_demo_turned_on && !isDesktop) || isTablet) {
setTimeout(function() {
window.location.href = standard_demo_url;
}, 2000);
}
else {
var demoFrame = ""
+ "<iframe "
+ " id='demo'"
+ " src='"+ standard_demo_url + "'"
+ " width='100%'"
+ " height='100%'"
+ " scrolling='no'"
+ " title='Rosetta Stone Demo'"
+ " tabindex='0'"
+ "></iframe>"
;
// Append iframe inside lightbox
$lightboxDemo.append(demoFrame)
// Center lightbox horizontally
var marginLeft = ((window.innerWidth - $lightboxDemo.innerWidth()) / 2) + 'px'
$lightboxDemo.css({
'margin-left' : marginLeft
})
// Pause masthead video
//$('#video-masthead')[0].pause()
// Now it's ready to be shown
$lightboxDemo.fadeIn();
// put keyboard focus in iframe for accessibility
setTimeout(function(){
$('#demo')[0].contentWindow.focus();
},1200);
// Store lightbox's height. We'll need it when we close postdemo offer
var originalHeight = {
'min-height' : $lightboxDemo.css('min-height'),
'height' : $lightboxDemo.css('height')
}
/*
* Close event.
* First click removes iframe and shows postdemo offer,
* second click hides lightbox
*/
$lightboxDemo.find('img').click(function() {
// Remove demo iframe
$lightboxDemo.find('iframe').fadeOut('fast').remove()
// Unbind click so we can rebind for postdemo offer
$(this).unbind('click')
// Shrink height of lightbox so postoffer looks neater
$lightboxDemo.css({'height': 'auto','min-height': 0})
// Show postdemo offer
$postDemo.slideDown('fast');
/* re-closing */
$(this).click(function() {
$postDemo.hide()
$lightboxDemo.fadeOut()
// Restore original height (in case demo plays again)
$lightboxDemo.css('height', originalHeight['height'])
$lightboxDemo.css('min-height', originalHeight['min-height'])
$(this).unbind('click')
})
// Resume masthead video [removed because there's no longer a masthead video]
// $('#video-masthead')[0].play()
})
} // end if isDesktop
}
/*
* Grabs a url param from the url.
* returns null if not found
*/
function grabUrlParam( name ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return null;
else
return results[1];
}
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
// Adjust video scale on page load
adjustVideoScale()
// And adjust it when window is resized
window.addEventListener('resize', adjustVideoScale)
/*
* Function that adjusts video scale
* in case user resizes browser, or has a viewport
* less than 1260. To see what this does,
* comment this out and resize browser width to
* anything less than 1260
*/
function adjustVideoScale() {
// 1260 1.1
// 1129 1.2
// 1036 1.3
// 955 1.4
// 888 1.5
// 828 1.6
// 777 1.7
// 732 1.8
// 691 1.9
// < 656 2
var width = window.innerWidth;
var scale = 1;
if (width < 656) {
scale = 2.6
} else if (width >= 656 && width <= 691) {
scale = 2.3
} else if (width > 691 && width <= 732) {
scale = 2.1
} else if (width > 732 && width <= 777) {
scale = 1.9
} else if (width > 777 && width <= 828) {
scale = 1.8
} else if (width > 828 && width <= 888) {
scale = 1.7
} else if (width > 888 && width <= 955) {
scale = 1.6
} else if (width > 955 && width <= 1036) {
scale = 1.5
} else if (width > 1036 && width <= 1129) {
scale = 1.4
} else if (width > 1129 && width <= 1260) {
scale = 1.3
}
$videoMasthead.css({'transform':'scale(' + scale + ')'})
}
/*
* Custom caroussel
* ---------------------------------------
* because we're trying to keep
* things lightweight around here. Smallest
* carrousel ever, but it works. (each index
* in the queue array corresponds with an index
* in the $li array )
*
* When you hit left arrow, queue[] does this:
* [0, 1, 2] --> [1, 2, 0] --> [2, 0, 1]
* (initial state)
*
* When you hit right arrow, queue[] does this:
* [0, 1, 2] --> [2, 0, 1] --> [1, 2, 0]
*
* After we rearrange the queue array, we proceed with the
* On initial state, every li is pushed right 100% by
* being applied left: 100%. Except li at index 0,
* we give that li a left:0 so its visible. After each
* animation is done, the li gets a left:100% so that it's
* hidden. When we are animating right (right arrow),
* we move the next li left:-100%, so that it can slide in
* from the right
*/
var $lis = $('#reviews ul li')
// Queue for li work
var queue = [];
easing = ''
duration = 500
/*
* Every li, with exception of the initial first one at
* index 0, gets a left position of 100% so they're hidden
*/
$.each($lis, function(i, e) {
if (i) $(this).css('left', '100%')
queue.push(i)
})
$('#arrow-right').click(function() {
var current = queue[0]
var next = queue[1]
// Slide current li out to the left. When it's finished, reset position to left: 100%
$lis.eq(current).animate({
left: '-=100%'
}, duration, function() { $(this).css('left', '100%') })
// Slide next element in
$lis.eq(next).animate({
left: '-=100%'
}, duration, easing, function() { $(this).css('left', '0') })
// current element will become the last in queue
queue.push(queue.shift())
})
$('#arrow-left').click(function() {
// When you go right, the next element is the last one
var current = queue[0]
var next = queue[queue.length - 1]
$lis.eq(current).animate({
left: '+=100%'
}, duration, easing, function() { $(this).css('left', '100%') })
// Slide next element in (from the right)
$lis.eq(next).css('left', '-100%').animate({
left: '+=100%'
}, duration, easing, function() { $(this).css('left', '0') })
// Last element becomes the first one!
queue.unshift(queue.pop())
})
function hideEmailInput() {
$('.input-text-wrapper').hide()
$('.input-submit-wrapper').css({'width':'100%', 'float':'none'})
}
// if we have a democookie, dont show email form
// var date = new Date()
// date.setMonth(d.getMonth() + 1)
// document.cookie = 'demotaken=1;path=/;domain=rosettastone.com;js cookixpires=' + date.toUTCString()
if (RSUI.util.getCookie('demotaken')) {
hideEmailInput()
}
// Number changing
function shiftUnits(n){
$('.units li.show').each(function(i,v){
var $v = $(v);
setTimeout(function(){
$v.addClass('out')
}, i * 100);
i == 3 && setTimeout(function(){
//The set being animated out and the one being animated in have their 'show' class handled here together to prevent too jarring a layout
$('.units li.show').removeClass('show');
$('.units li.out').removeClass('out');
var sel = '.units li:gt('+ Math.max(((n*4)-1),0) + '):lt(4)';
//console.log(sel);
$('.units li').slice(n*4, (n*4)+4).addClass('show').addClass('out').each(function(i,v){
var $w = $(v);
setTimeout(function(){
$w.removeClass('out')
}, i * 100);
});
} , 400 /* slightly higher than the 333ms in CSS for the transition to prevent too much layout flicker */)
});
}
$(function rdy(){
$('header .downarrow').on('click', function(){
scrollBy(0, document.querySelector('.series').getBoundingClientRect().top);
});
$('.units form').on('change', function(e){
var shiftTo = (parseInt( $(this).find(':checked').val(), 10) - 1) || 0;
shiftUnits(shiftTo);
});
})
/*****************************************
PORTRAITS MODULE
******************************************/
$(function(){
var portraits_data = [
{
name: 'Amber',
photo: './assets/portraits/amber.jpg',
learner_info: 'Shreveport, LA • Studying: Spanish',
quote_html: ''
+'<p>“They say it’s a small world. I think it makes it smaller if you learn another language.”</p>'
+'<p>“[My patients] feel comfortable with a physician who speaks their language… that barrier is diminished when you can speak another language.”</p>'
+'<p>“That’s what they say differentiations humans from animals—it’s language, it’s communication.”</p>'
+'<p>“They say it’s a small world. I think it makes it smaller if you learn another language.”</p>'
+'<p>“When you’re traveling, it can widen your horizons and give you a different perspective on life. I think it’s all worth it.”</p>'
+'<p>“There are a lot of intercultural marriages, and I think that also gives you an incentive. You want your kids to learn both languages—from the dad’s side and the mom’s side.”</p>'
+'<p>“Recently, I downloaded the app. Sometimes, when I’m not on very busy rotation in the hospital, I’ll have a few minutes and I like to go over some of my lessons.”</p>'
+'<p>“I took an evening class. That’s when my Spanish teacher really made me interested, and she also recommended Rosetta Stone.”</p>'
},
{
name: 'Jessica',
photo: './assets/portraits/jessica_a.jpg',
learner_info: 'Phoenix, AZ • Teaches 3rd-12th using Rosetta Stone',
quote_html: '<p>“I have five students that are the only one doing their language…. [One boy’s] mother is Korean, so it’s great—he’s been able to converse more with some family members.”</p><p>“In the last month or so [one student] started reading the Stories, and he said, ‘Miss Jessica, I just read all of that in Spanish, and I know what it said!’ and now he’s so excited.”</p>'
},
{
name: 'Kevin',
photo: './assets/portraits/kevin.jpg',
learner_info: 'Santa Barbara, CA • Studying: Spanish',
quote_html: '<p>“When you’re going out to serve and try and help them in a moment of need, you try to make them as comfortable as possible and better serve them. They’re scared, they’re confused. And I can help them just by speaking in their native language.”</p><p>“For me, it’s really helpful just being able to communicate one-on-one with them, and not having to go through the steps of playing telephone through another interpreter.”</p><p>“Really, that’s the first step—just make the commitment. The tools are out there for you. Just go ahead, commit, and make it happen.”</p>'
},
{
name: 'Pamela',
photo: './assets/portraits/pamela.jpg',
learner_info: 'Hawaii • Studying: Russian',
quote_html: '<p>“Recently I decided that I had to go beyond just purely audio and start learning it more in depth—and that’s when I decided to go with Rosetta Stone.”</p><p>“I work with foreign exchange students—placing them in the community and also taking students myself—because I figure, I was an exchange student and it changed my life. I should give this back to some other kids.”</p><p>“I try and spend at least an hour twice a week.”</p><p>“That’s what I tell people, instead of playing music or listening to the news, put on your language.”</p><p>“Just go ahead and try, because most people are really willing to help.”</p><p>“Recently I decided that I had to go beyond just purely audio and start learning it more in depth—and that’s when I decided to go with Rosetta Stone.”</p>'
},
{
name: 'Carole',
photo: './assets/portraits/carole.jpg',
learner_info: 'Washington, DC • Studying: Italian',
quote_html: '<p>“You have to speak Italian to get past ‘tourist’ Italy… because ‘home’ is 95% of the country.”</p><p>“When finally study­ing in Rome, I can remember think­ing, ‘Oh my good­ness, I am in this really challeng­ing class and I act­ually under­stand what’s happen­ing— I can keep up. I have to work hard, and I can’t take any­thing for grant­ed, but I belong here.’”</p><p>“I think it just means a lot to people when you travel to their country and you can say polite things and greet everyone, even if they want to speak to you in English.”</p><p>“Before I spoke any Italian, I thought that I liked Italy, but didn’t love it as much as I wanted to. What I realized is that, if you only see Italy as a tourist you’re really not really, fully there—because it’s much more about families, and it’s much more about dinners at peoples homes. You have to speak Italian to get past ‘tourist’ Italy… because ‘home’ is 95% of the country.”</p><p>“With immigrant families, we often imagine that you come from a place and then you remain attached to that place. But a lot of immigrants left and never looked back. So we grandchildren typically weren’t taught the language.”</p> <p>“You’re going back to how children learn, because they get satisfaction from little pleasures, little wins. [Rosetta Stone] gives you some of those little wins quickly.”</p> <p>“I feel that after a base of Rosetta Stone, you can go to a country and get started with people; and then they will take you into, really what the true purpose of a language is—and that’s to communicate.”</p> <p>“Rosetta Stone gives you a funny kind of confidence, because you think you’ve been talking to people—because you’ve been looking at their pictures.”</p> <p>“I completed the whole course. It was a surprise for me, but I just kept going. … It is really fun, and I think it goes to the visual part of the brain, and that is so important.”</p>'
},
{
name: 'Butovens',
photo: './assets/portraits/butovens.jpg',
learner_info: 'Born in France, Lives in California • French tutor studying Japanese and Spanish',
quote_html: '<p>“Once you start, it’s not that intim­idating. And it’s ex­tra­ordinarily rewarding as well.”</p><p>“That’s the end goal: to be able to have a conversation about anything with anyone.”</p><p>“I have to admit, I’m not as diligent as my students. I’m trying, but some of them are really inspiring.”</p><p>“[By the end of the session], I think they feel really confident. When they laugh, I know I touched something.”</p><p>“Once you start, it’s not that intimidating. And it’s extraordinarily rewarding as well.”</p><p>“There is really no excuse. You find the time, you set it, and you do it every single day. And it works, I’ve seen it.”</p>'
},
{
name: 'Melissa',
photo: './assets/portraits/melissa.jpg',
learner_info: 'Baltimore, MD • Studying: Japanese',
quote_html: '<p>“Once you start getting to the point where [people] see you trying, they just open up. The whole world opens up, and the world becomes smaller.”</p><p>“I want to go to all the little places that people don’t really hear about and talk about the folklore, the people, [and] their signature foods.”</p><p>“I was nervous. I didn’t know what to expect. There are no directions, but you don’t need it. It was fun. I didn’t want to stop. So I probably went through three lessons in the first night. It’s more or less like a game, which helps you learn as well.”</p><p>“[My roommate] didn’t know English, and I didn’t think at that time I knew Japanese that well. We’re sitting at the dinner table, and I’m just having a conversation with her. And I was like, ‘Wait a minute—I’m speaking Japanese to her!’ I got chills.”</p><p>“Once you start getting to the point where [people] see you trying, they just open up. The whole world opens up, and the world becomes smaller.”</p><p>“I was able to fill out applications and audition in Japanese—so the reading and the writing, also—you gain that from Rosetta Stone.”</p>'
},
{
name: 'Jessica',
photo: './assets/portraits/jessica_b.jpg',
learner_info: 'Washington, D.C. • Studying: French, Greek, Spanish',
quote_html: '<p>“It makes traveling so much easier. Being able to ask people even simple questions, in their language, is such a phenomenal experience.”</p><p>“I walked up to a Greek man who was selling something on the street, and I asked him [a question] in Greek … and he responded in such fluent Greek that I assume my question made sense to him and he didn’t think to dumb it down for me. That was a very cool moment, and it inspired me to keep going with it and get even better.”</p><p>“I studied about two-thirds of the program before I went to Greece, and when I got there I was able to read the street signs.”</p>'
},
{
name: 'Alex',
photo: './assets/portraits/wendi.jpg',
learner_info: 'Everett, WA USA • Studying: French, Spanish, Italian, Navajo, Russian, Japanese',
quote_html: '<p>“I like dabbling in languages… I just don’t like sitting around watching TV most of the time, so for me it’s just a hobby.”</p><p>“It’s like opening a door. Even when you’re still a just beginner, people appreciate that you’re trying to learn their language—and sometimes they’re surprised.”</p><p>“I really appreciate that Rosetta Stone is preserving endangered languages.”</p>'
},
{
name: 'Peter',
photo: './assets/portraits/peter.jpg',
learner_info: 'Los Angeles, CA • Studying: Italian and Spanish',
quote_html: '<p>“Don’t worry about the big picture. Don’t worry about having that fluent conversation with someone … just focus on the basics and have fun doing it along the way—it’s really about the journey when it comes to language.”</p><p>“Have fun along the way, and everything else falls into place.”</p><p>“You might approach someone and you might think they’re going to judge you, but oftentimes they are happy you speak the language—and they congratulate you. And that motivation keeps you going.”</p><p>“Don’t worry about the big picture. Don’t worry about having that fluent conversation with someone … just focus on the basics and have fun doing it along the way—it’s really about the journey when it comes to language.”</p><p>“I studied Spanish and Italian with Rosetta Stone, and … just being able to have a few conversations on the road allowed me to navigate my way within those countries.”</p><p>“Use the language. It’s one thing to get immersed in the product, but you have to implement it. So get out of your comfort zone.”</p>'
}
];
function generatePortraitSlidesHtml(){
// keep track of longest slide for placeholder
var longest_slide = '';
var portraits_arrow_left = ''
+'<div class="portraits_arrow_container portraits_arrow_container_left js_portraits_arrow_left" tabindex="0" aria-label="see previous slide">'
+'<svg class="portraits_arrow portraits_arrow_left" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">'
+'<line x1="0.8" y1="5" x2="9.4" y2="5"></line>'
+'<polyline points="5.5,1 9.4,5 5.5,9"></polyline>'
+'</svg>'
+'</div>'
;
var portraits_arrow_right = ''
+'<div class="portraits_arrow_container js_portraits_arrow_right" tabindex="0" aria-label="see next slide">'
+'<svg class="portraits_arrow" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">'
+'<line x1="0.8" y1="5" x2="9.4" y2="5"></line>'
+'<polyline points="5.5,1 9.4,5 5.5,9"></polyline>'
+'</svg>'
+'</div>'
;
// go through portraits data and generate html
var portraits = portraits_data.map(function(portrait,i){
var portrait_content = ''
+'<div class="portraits_mobile_only">'
+'<div class="portraits_name">'+portrait.name+'</div>'
+'<div class="portraits_learner_info">'+portrait.learner_info+'</div>'
+'</div>'
+'<div class="portraits_photo" style="background-image:url('+portrait.photo+')">'
+portraits_arrow_left
+portraits_arrow_right
+'</div>'
+'<div class="portraits_text">'
+'<div class="portraits_desktop_only">'
+'<div class="portraits_name">'+portrait.name+'</div>'
+'<div class="portraits_learner_info">'+portrait.learner_info+'</div>'
+'</div>'
+'<div class="portraits_quote">'
+portrait.quote_html
+'</div>'
+'<div class="portraits_share">'
+'<span>Share:</span>'
+'<a href="#" class="share-button twitter-share-button" data-text="Hear why people choose Rosetta Stone to #ConnectWithLanguage http://www.rosettastone.com/lp/demo-hub/#voice-'+portrait.name+' #RosettaStone25" data-anchor="voice-'+portrait.name+'" tabindex="0"><img src="./assets/social_icons/twitter-ico.png" alt="Twitter"></a>'
+'<a href="#" class="share-button fb-share-button" data-text="Hear why people choose Rosetta Stone to #ConnectWithLanguage http://www.rosettastone.com/lp/demo-hub/#voice-'+portrait.name+' #RosettaStone25" data-anchor="voice-'+portrait.name+'" tabindex="0"><img src="./assets/social_icons/facebook-ico.png" alt="Facebook"></a>'
+'</div>'
+'</div>'
;
var slide = '<div class="portraits_content" tabindex="0">'
+ portrait_content
+'</div>';
// keep track of longest slide for placeholder
if(portrait_content.length > longest_slide.length){
longest_slide = portrait_content;
}
return slide;
}).join('');
return {
slides : portraits,
placeholder : longest_slide
};
}
var portraits_html = generatePortraitSlidesHtml();
// populate slides
$('.js_portraits_slides').html(portraits_html.slides);
// fill placeholder with invisible longest slide (this guarantees correct proportions at all sizes)
$('.js_portraits_content_placeholder').html(portraits_html.placeholder);
// get slides from document
var $slides = $('.js_portraits_slides .portraits_content');
// initialize starting slide (starting from 0)
var current_slide = 0;
$slides.eq(current_slide).css({'z-index':'1'});
function slideInFromSide(side, old_slide_number, new_slide_number){
// remove transition from previous slide
$slides.eq(old_slide_number).removeClass('portraits_center');
// move incoming slide to the side to start
$slides.eq(new_slide_number).addClass('portraits_'+side).css({'z-index':'2'});
setTimeout(function(){
// animate slide into center
$slides.eq(new_slide_number).addClass('portraits_center').removeClass('portraits_'+side);
// when animation is done, drop slides one layer down in z-index to prepare for next animations
setTimeout(function(){
$slides.eq(new_slide_number).css({'z-index':'1'});
$slides.eq(old_slide_number).css({'z-index':'0'});
$slides.eq(new_slide_number).focus();
},180);
},20);
}
// ****************************************************************************
// PORTRAITS SLIDE NAVIGATION
// ****************************************************************************
var $slide_arrow_left = $('.js_portraits_arrow_left');
var $slide_arrow_right = $('.js_portraits_arrow_right');
// go to previous slide
$slide_arrow_left.on('click', function(){
var old_slide = current_slide;
current_slide = ($slides.length+current_slide-1) % $slides.length;
slideInFromSide('left', old_slide, current_slide);
});
// go to next slide
$slide_arrow_right.on('click', function(){
var old_slide = current_slide;
current_slide = (current_slide+1) % $slides.length;
slideInFromSide('right', old_slide, current_slide);
});
// go to any slide
window.goToSlide = function(new_slide){
if(new_slide !== current_slide){
var old_slide = current_slide;
current_slide = new_slide % $slides.length;
slideInFromSide('right', old_slide, current_slide);
}
}
// allow keyboard navigation through slides
$(document).on('keydown', function(e){
var $portraits_overlay = $('.portraits_overlay');
var slideshow_is_visible = $portraits_overlay && $portraits_overlay[0].style.display === 'block';
if(slideshow_is_visible){
// left key
if(e.keyCode===37){
$slide_arrow_left.eq(0).click();
}
// right key
if(e.keyCode===39){
$slide_arrow_right.eq(0).click();
}
}
});
// make left and right slider buttons keyboard accessible
$('.js_portraits_arrow_left, .js_portraits_arrow_right').on('keydown', function(e){
if(e.keyCode===13){
$(this).click();
}
});
// ****************************************************************************
// CLOSE PORTRAITS OVERLAY
// ****************************************************************************
$('.js_portraits_close').on('click', function(e){
e.preventDefault();
$('.portraits_overlay').fadeOut();
});
$(document).on('keydown', function(e){
if(e.keyCode===27){
$('.portraits_overlay').fadeOut();
}
});
// ****************************************************************************
// GALLERY PHOTOS
// ****************************************************************************
var gallery_photos = portraits_data.reduce(function(full_html, current_portrait, i){
return full_html + ''
+'<div class="portraits_thumbnail_container">'
+'<img class="portraits_thumbnail" src="'+current_portrait.photo+'" alt="'+current_portrait.name+'" data-slide_number="'+i+'" tabindex="0" />'
+'</div>'
;
},'');
$('.js_portraits_gallery').html(gallery_photos);
var $portraits_thumbnails = $('.portraits_thumbnail');
$portraits_thumbnails.on('click', function(){
$('.portraits_overlay').fadeIn();
var slideNumber = parseInt($(this).data('slide_number'));
goToSlide( slideNumber );
$('.portraits_content').eq(slideNumber).focus();
});
// make portraits thumbnails keyboard accessible
$portraits_thumbnails.on('keydown', function(e){
if(e.keyCode===13){
$(this).click();
}
});
// ****************************************************************************
// SOCIAL SHARING
// ****************************************************************************
// Load Facebook SDK for JavaScript
window.fbAsyncInit = function() {
FB.init({
appId : '1091422140883673',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function share_on_facebook(e) {
var text = $(this).data('text');
var anchor = $(this).data('anchor');
var url = window.location.origin + window.location.pathname + '#' + anchor;
FB.ui({
method: 'share',
quote: text,
href: url,
}, function(response) {});
return false;
}
function share_on_twitter(e) {
var text = encodeURIComponent($(this).data('text'));
var anchor = $(this).data('anchor');
var url = encodeURIComponent(window.location.origin + window.location.pathname + '#' + anchor);
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = 'https://twitter.com/intent/tweet?text=' + text,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
}
$('.twitter-share-button').on('click', share_on_twitter);
$('.fb-share-button').on('click', share_on_facebook);
function showVid(e) {
var t = e ? e.getAttribute("data-video") : "how_it_works"
, n = {
live_studio_session: "SiRtFaXqCqU",
how_it_works: "imK17Pb3Yws",
red_ball: "xmS1rgDUec4",
delaine: "KwFphr58e94",
grace: "g6WEYqaMFsk",
peter: "p6l9xp3yH7E",
chris: "ZOwb57bx4mA",
food_truck: "jMPL9EjBucA"
}
, i = n[t] || n.how_it_works
, o = '<iframe id="youtubevideos" src="https://www.youtube.com/embed/' + i + '?rel=0&autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>';
document.getElementById("video_container").innerHTML = o,
$("#video_overlay").fadeIn()
}
$(function(){
$('[data-video]').on('click', function hvidclick(e){
e.preventDefault();
showVid(this);
});
$('.overlay_x').on('click', function(){
$('#youtubevideos').attr('src', '')
$("#video_overlay").fadeOut();
});
})
});