- 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
$(function(){
// move video still to masthead
$('.masthead_lockup').html($('#how_it_works_vid_container')).css({
'padding-top': '0px',
'background': 'none',
'text-align': 'center'
});
// hide original "how it works" section
$('.how_it_works').hide();
// fix bug in IE11 and below:
// an svg <use> tag that gets moved through the DOM disappears
// fix: replace the <use> with the full svg markup
$('.hiw_play_container').html(''
+'<svg xmlns="http://www.w3.org/2000/svg" class="hiw_play_button" viewBox="-1 -1 12 12">'
+'<circle style="fill: transparent; stroke-width: 1;" cx="5" cy="5" r="4.75" />'
+'<polygon style="stroke-linejoin: round; stroke-width: 0.5;" points="4.2,3.5 6.8,5 4.2,6.5" />'
+'</svg>'
+'');
// change click handler from plain video to demo-signup
$('#how_it_works_vid_container')
.removeClass('js_open_video')
.off('click')
.addClass('open-demo-btn');
// update masthead copy
$('.masthead h2').html('Find out everything you need to know about Rosetta Stone in 2 minutes.');
// update padding in bottom half of masthead
$('.masthead_bottom_half').css({
'padding': '100px 0px 50px'
});
// add demo button under video still
$('.masthead_lockup_content').html('<a href="javascript:void(0)" class="how_it_works_demo_button open-demo-btn">Take the Interactive Demo</a>');
// update background of social proof section due to layout changes
$('.social_proof').css({
'background-color': '#3E3D3F'
});
// add style and demo markup
$('body').append('<style> .how_it_works_demo_button { background-color: #4487C0; color: #fff; text-transform: uppercase; font-size: 16px; font-family: gothambold; border-radius: 4px; padding: 16px 20px; display: inline-block; margin: 0px 0px 40px; border: none; text-decoration: none; } /* demo css */ .transform (@t) { transform: @t; -webkit-transform: @t; -moz-transform: @t; -o-transform: @t; -ms-transform: @t; } @media (max-width: 960px) { .demo-wrap { font-size:11px !important; } } @media (max-width: 1280px) and (min-width: 961px) { .demo-wrap { font-size:12px !important; } } @media (min-width: 1281px) { .demo-wrap { font-size:14px !important; } } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){ .demo-lightbox-wrap.active { width: 950px !important; } } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){ .demo-lightbox-wrap.active { width: 950px !important; } } @media all and (device-width: 768px) and (device-height: 1024px) { .demo-wrap a.launch-demo-btn, .demo-lightbox-wrap .lightbox-header, .lightbox-product-demos { transition:none !important; transition-delay:0 !important; } .demo-lightbox-wrap .lightbox-product-demos { font-size: 11px; } } .demo-wrap { position: fixed; left: 50%; top: 50%; width: 97%; max-width: 760px; text-align: center; transition: opacity 0.2s, visibility 0s 0.3s; visibility: hidden; opacity: 0; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-filter: blur(0); z-index: 102; font-family:GothamBook; } .demo-wrap ::-webkit-input-placeholder { color: #9e9e9e; } .demo-wrap :-moz-placeholder { /* Firefox 18- */ color: #9e9e9e; } .demo-wrap ::-moz-placeholder { /* Firefox 19+ */ color: #9e9e9e; } .demo-wrap :-ms-input-placeholder { color: #9e9e9e; } .ie9 .demo-lightbox-transition { display: none; } .demo-wrap.active { opacity: 1; visibility: visible; transition: opacity 0.2s, visibility 0s 0s; } .demo-wrap p { font-size: 3em; font-family: GothamLight; color: #363636; } .stop-scrolling { height:100% !important; overflow: hidden!important; } /*========================= TRANSITION ELEMENT ======================*/ .demo-wrap.active~.demo-lightbox-transition { transition: top 0.4s 0.3s ease-in-out, left 0.4s 0.3s ease-in-out, height 0.4s 0.3s ease-in-out, width 0.4s 0.3s ease-in-out, opacity 0.2s 0s, visibility 0s 0s; opacity: 1; visibility: visible; } .demo-lightbox-transition { transition: top 0.4s 0.3s ease-in-out, left 0.4s 0.3s ease-in-out, height 0.4s 0.3s ease-in-out, width 0.4s 0.3s ease-in-out, opacity 0.2s 0.8s, visibility 0s 1s; position: absolute; opacity: 0; visibility: hidden; background:#ecc200; z-index: 101; } .demo-lightbox-transitions { background: #ecc200; position: absolute; z-index: 101; } /*================================ MASK =============================*/ .demo-lightbox-mask.active { visibility: visible; opacity: 1; transition-delay:0s; } .demo-lightbox-mask { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.7); opacity: 0; visibility: hidden; transition:opacity 0.3s, visibility 0s 0.3s; z-index: 100; } /*============================ LIGHTBOX =============================*/ .demo-lightbox-wrap { overflow: hidden; max-width: 760px; max-height: 100%; margin-top: 0; border-radius:0.4em; background-size: cover; } .demo-wrap.active .demo-lightbox-wrap { overflow: initial; border-radius: 0; z-index:100; } .demo-lightbox-wrap .lightbox-header { background:url("http://www.rosettastone.com/lp/liferay/demo-overlay/demo-header.jpg") no-repeat center; background-size: cover; padding:1.5em; } .demo-wrap .demo-lightbox-wrap .lightbox-header h2 { color:#363636; font-family:GothamLight; font-weight: 100; font-size: 3em; } .demo-wrap .demo-lightbox-wrap .lightbox-header p { font-family:GothamBook; font-size:1em; } .lightbox-product-demos { display: table; width: 100%; background:url("http://www.rosettastone.com/lp/liferay/demo-overlay/demo-lightbox.jpg") no-repeat center; background-size: cover; } .lightbox-product-demo-row { display: table-row; width: 100%; } .lightbox-product-demo { display: table-cell; width:33.333%; padding: 2em; } .demo-wrap .demo-lightbox-wrap .lightbox-product-demo h3 { color: #363636; font-family:GothamBook; font-size: 1.3em; padding-bottom: 0.7em; line-height: 1; text-transform: uppercase; } .demo-wrap .demo-lightbox-wrap .lightbox-product-demo p { font-family:GothamBook; font-size:1em; line-height: 1.2; } .lightbox-product-inner { width: 95%; margin: 0 auto; transition: opacity 0.3s; } .demo-drop { text-align: left; padding: 0.9em; position: relative; cursor: default; text-transform: uppercase; } .demo-lang-wrap { text-align: center; text-transform: initial; margin: 2em 0 0 0; } .demo-lang-wrap>span.selected-lang { color: #9e2802; font-size: 2em; } .demo-lang-wrap span.selected-lang span { font-size: 0.7em; font-family: GothamLight; padding-left: 0.4em; } div.privacy-disclaimer { font-size: 0.8em; width: 70%; line-height: 1.2; margin: 2em auto 0 auto; } div.privacy-disclaimer a { color:#0098db; } .demo-lang-wrap a { color: #0098db; font-size: 0.9em; padding-left: 1em; } .lang-select a#demo-change-lang::after { content: " \00d7"; } .demo-description { max-width: 36em; margin:0 auto; } .dropdown-box { min-width: 100%; display: table; z-index: 3; } .drop-col { display: table-cell; } .drop-col:first-child { border: 1px solid #ccc; } .dropdown-box .drop-col ul { padding: 1em; } .active+.dropdown-box .drop-col ul { width: 12em; transition:width 0s 0s; } .drop-col ul li { list-style-type: none; text-transform: uppercase; } .drop-col ul li>span { line-height: 2.5; font-family: GothamMedium; } .demo-drop ul li a { color: #0098db; text-decoration: none; padding: 0.4em 0; line-height: 2; } .lightbox-product-demo:first-child .drop-col:first-child ul li a { font-family: GothamMedium; } .demo-drop ul li a span { padding-left: 0.4em; font-size: 0.7em; } .demo-drop ul li a:hover { background: none !important; text-decoration: underline; } div.signup-options { margin: 2em 0; } .lightbox-product-inner input[type="text"] { padding: .9em .8em; box-sizing: border-box; width: 18em; border: 1px solid #bbb; background: #fff; height: 3.4em; vertical-align: middle; } a#facebook-login { display: inline-block; background: #3b5998; color: #fff; text-decoration: none; background: url(\'http://www.rosettastone.com/lp/liferay/demo-overlay/fb-login.png\') no-repeat; background-size: 100%; width: 18em; height: 3.5em; vertical-align: middle; } span.demo-or { font-family: GothamBold; font-size: 1.7em; vertical-align: middle; margin: 0 0.6em; } a.start-demo-btn { display: block; width: 16em; box-sizing: border-box; background: #65adfd; text-decoration: none; color: #fff; padding: 1em .8em; border-radius: 5px; margin: .8em auto; transition:background 0.3s; } a.start-demo-btn:hover { background: #559ded; } .lightbox-product-inner p a { color: #fff; text-decoration: none; } .lightbox-product-inner p a:hover { text-decoration: underline; } div#demo-box { width: 85%; position: fixed; height: 90%; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); display: none; } .demo-wrap.play~div#demo-box { display: block; z-index:104; } .demo-wrap.play .demo-lightbox-wrap { opacity: 0.5; } .close-btn { position: absolute; width:40px; height:40px; top:-20px; right:-20px; background: url(http://www.rosettastone.com/image/image_gallery?uuid=4ad18817-592c-4ab5-9daa-a6969325344c&groupId=10165&t=1416591867294) no-repeat center; background-size: contain; cursor: pointer; } span#close-lb::after { content: " X"; color: #ecc200; } span#close-lb { position: absolute; top: -1.4em; right: 0; color: #fff; font-family: GothamMedium; font-size: 0.9em; cursor: pointer; } </style> <!-- ================================== ## LAUNCH DEMO ## ==================================== ## ## This webcontent will launch the ## demo lightbox from any <a> tag with ## the class name \'open-demo-btn\' ## ## e.g. Language agnostic: ## <a class="open-demo-btn"> ## ## e.g. Language preselected: ## <a class="open-demo-btn fra"> ## ## ==================================== --> <div class="demo-wrap"> <div class="demo-lightbox-wrap"> <div class="lightbox-header"> <h2>Rosetta Stone Demo</h2> <span id="close-lb">CLOSE</span> </div> <div class="lightbox-product-demos"> <div class="lightbox-product-demo-row"> <div class="lightbox-product-demo individuals"> <div class="demo-description"> <p> Try our hands-on interactive demo and see what makes Rosetta Stone the most award-winning language-learning program. </p> </div> <div class="lightbox-product-inner"> <div class="demo-lang-wrap"><span class="selected-lang"> </span><a href="javascript:void(0)" id="demo-change-lang">change language</a></div> <div class="signup-options"> <a href="javascript:void(0)" id="facebook-login"> </a> <span class="demo-or">or</span> <input type="text" title="email" class="email-input" placeholder="ENTER YOUR EMAIL"></input> </div> <a style="display:none;" class="start-demo-btn individuals" href="javascript:void(0)" data="mobile demo">START YOUR FREE DEMO</a> <div class="demo-drop" style="display:none;"> <div class="dropdown-box"> <div class="drop-col"> <ul> <li><span>Our Top Languages</span></li> <li><a href="javascript:void(0)" rel="eng" data-url="http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-en">English</a></li> <li><a href="javascript:void(0)" rel="fra" data-url="http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-fr">French</a></li> <li><a href="javascript:void(0)" rel="ita" data-url="http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-it">Italian</a></li> <li><a href="javascript:void(0)" rel="deu" data-url="http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-de">German</a></li> <li><a href="javascript:void(0)" rel="esp" data-url="http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-es">Spanish<span>(Latin America)</span></a></li> </ul> </div> <div class="drop-col"> <ul> <li><a href="javascript:void(0)" rel="ara" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=ara">Arabic</a></li> <li><a href="javascript:void(0)" rel="chi" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=chi">Chinese<span>(Mandarin)</span></a></li> <li><a href="javascript:void(0)" rel="dar" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=dar">Dari</a></li> <li><a href="javascript:void(0)" rel="ned" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=ned">Dutch</a></li> <li><a href="javascript:void(0)" rel="ebr" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=ebr">English<span>(British)</span></a></li> <li><a href="javascript:void(0)" rel="tgl" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=tgl">Filipino<span>(Tagalog)</span></a></li> <li><a href="javascript:void(0)" rel="grk" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=grk">Greek</a></li> <li><a href="javascript:void(0)" rel="heb" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=heb">Hebrew</a></li> <li><a href="javascript:void(0)" rel="hin" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=hin">Hindi</a></li> </ul> </div> <div class="drop-col"> <ul> <li><a href="javascript:void(0)" rel="ind" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=ind">Indonesian</a></li> <li><a href="javascript:void(0)" rel="gle" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=gle">Irish</a></li> <li><a href="javascript:void(0)" rel="jpn" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=jpn">Japanese</a></li> <li><a href="javascript:void(0)" rel="kor" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=kor">Korean</a></li> <li><a href="javascript:void(0)" rel="lat" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=lat">Latin</a></li> <li><a href="javascript:void(0)" rel="pas" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=pas">Pashto</a></li> <li><a href="javascript:void(0)" rel="far" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=far">Persian<span>(Farsi)</span></a></li> <li><a href="javascript:void(0)" rel="pol" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=pol">Polish</a></li> <li><a href="javascript:void(0)" rel="por" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=por">Portuguese</a></li> <li><a href="javascript:void(0)" rel="rus" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=rus">Russian</a></li> </ul> </div> <div class="drop-col"> <ul> <li><a href="javascript:void(0)" rel="esc" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=esc">Spanish<span>(Spain)</span></a></li> <li><a href="javascript:void(0)" rel="kis" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=kis">Swahili</a></li> <li><a href="javascript:void(0)" rel="sve" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=sve">Swedish</a></li> <li><a href="javascript:void(0)" rel="tur" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=tur">Turkish</a></li> <li><a href="javascript:void(0)" rel="urd" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=urd">Urdu</a></li> <li><a href="javascript:void(0)" rel="vie" data-url="http://www.rosettastone.com/lp/mobile-demo/?e=0&lang=vie">Vietnamese</a></li> </ul> </div> </div> </div> <div class="privacy-disclaimer"> <div>Rosetta Stone is committed to safeguarding your privacy.</div> <div>Our complete Privacy Policy is available <a href="http://www.rosettastone.com/privacy" target="_blank">here</a>.</div> </div> </div> </div> </div> </div> </div> </div> <div id="demo-box"><div class="close-btn"></div></div> <div class="demo-lightbox-transition"></div> <div class="demo-lightbox-mask"></div> ');
// ************************************************
// demo scripts start here
// ************************************************
//append facebook api script
(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 = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//Assign this to a URL on demo load, redirect after demo is closed.
var redirect;
/*========================== Open, close lightbox =====================*/
$(document).ready(function(){
/*Open on click*/
$(".open-demo-btn").click(function(){
//preselct lang in button class name
for (var c in this.classList) {
if(typeof this.classList[c]==="string" && this.classList[c].match(/^\w\w\w$/)) {
$("a[rel="+this.classList[c]+"]").click();
}
}
// if no language found, go back to lang list
if ($(".demo-drop li a.selected").length==0) {
$("#demo-change-lang").click();
$(".demo-lang-wrap").hide();
}
//create new yellow transition
var tb = new TransitionBox(this,$(".demo-wrap")[0]);
$(".demo-lightbox-mask").addClass("active");
$(document).trigger('demo_events_version', {
version: 1,
description: '',
standard: 'http://tabbit.org/%E2%98%8D%E2%98%B9W'
});
});
/*Close on click outside */
$(".demo-lightbox-mask").click(function(){closeLightbox()});
/* Close on ESC */
$(document).keyup(function(e){
if (e.keyCode == 27) {
closeLightbox();
}
});
/*Close on 'close' click*/
$("span#close-lb").click(function(){closeLightbox()})
$("#demo-box .close-btn").click(function(){closeLightbox()});
closeLightbox();
});
function closeLightbox() {
$(".demo-lightbox-transition").css("background","#ecc200");
$(".demo-wrap").removeClass("play");
$(".demo-wrap").removeClass("active");
$(".demo-lightbox-mask").removeClass("active");
$(".arrow").removeClass("active");
$("html, body").removeClass("stop-scrolling");
$("#demo-box iframe").attr("src","");
if (typeof redirect != "undefined") {
setTimeout(function() {window.location.href = redirect;},0);
}
}
function TransitionBox (from, to) { // yellow transition effect
var self = this;
this.from = from;
this.to = to;
this.tb = document.createElement("div");
this.tb.className = "demo-lightbox-transitions";
this.tb.style.width = from.offsetWidth+"px";
this.tb.style.height = from.offsetHeight+"px";
this.tb.style.top = from.className.match("demo-wrap")?window.scrollY+from.offsetTop-from.offsetHeight/2:from.offsetTop+"px";
this.tb.style.left = from.className.match("demo-wrap")?window.scrollX+from.offsetLeft-from.offsetWidth/2:from.offsetLeft+"px";
var par = document.getElementsByClassName("demo-lightbox-transition")[0];
par.parentNode.insertBefore(this.tb, par.nextSibling);
$(this.tb).animate({
"top": $(to).offset().top + "px",
"left": $(to).offset().left + "px",
"width": $(to).outerWidth() + "px",
"height": $(to).outerHeight() + "px"
}, 300, function() {
if ($(".demo-lightbox-mask").hasClass("active")) {$(self.to).addClass("active");}
$(this).fadeOut(300,function(){this.remove;});
});
}
/*========================= Open, close dropdowns =====================*/
$(document).ready(function(){
$(".demo-wrap").click(function (e) {
var dd = $(e.target).find(".arrow").addBack('.arrow');
if($(".dropdown-box").has($(e.target)).length>0) {
e.stopPropagation(); return false; /* do nothing on click inside */
}
if($(e.target).hasClass("demo-drop") || $(e.target).hasClass("arrow")){
if (dd.hasClass("active")) { /* toggle on dd click */
dd.removeClass("active");
} else {
$(".arrow").removeClass("active");dd.addClass("active");
}
e.stopPropagation(); fade(); return false;
}
$(".arrow").removeClass("active"); /* and close on click outside */
fade();
});
function fade() {
var all = $(".arrow").parents(".lightbox-product-inner");
var active = $(".arrow.active").parents(".lightbox-product-inner");
if(active.length>0) {
all.css("opacity","0.5");
active.css("opacity","1");
} else {
all.css("opacity","1");
}
}
});
/*===================== Select Language from dropdown =================*/
$(document).ready(function(){
$(".demo-drop ul li a").click(function (e) {
$(document).trigger('demo_language', {language: $(this).text(), lang_code: $(this).attr("rel").toUpperCase()});
$(".lightbox-product-inner").find(".email-input").attr("required",false);
$(".demo-drop ul li a").removeClass("selected");
$(this).addClass("selected");
$(".selected-lang").html($(this).html());
$(".arrow").removeClass("active");
$(".demo-lang-wrap").show();
$(".demo-lang-wrap").removeClass("lang-select");
$(".signup-options").slideDown();
$(".start-demo-btn").slideDown();
$(".demo-drop").slideUp();
if (RSUI.util.getCookie("curEmailIdsc")) {
$(this).parents(".lightbox-product-inner").find(".email-input").val(RSUI.util.getCookie("curEmailIdsc"));
}
$(this).parents(".lightbox-product-inner").find(".email-input").attr("required",true).focus();
});
});
/* ======================== Go back to lang list =========================*/
$(document).ready(function(){
$("#demo-change-lang").click(function () {
if ($(".demo-lang-wrap").hasClass("lang-select")) {
$(".demo-drop li a.selected").click();
} else {
$(".demo-lang-wrap").addClass("lang-select");
$(".signup-options").slideUp();
$(".start-demo-btn").slideUp();
$(".demo-drop").slideDown();
}
});
});
/* ========================= Facebook FB login ===========================*/
$(document).ready(function doFB(xn){
if(typeof FB == 'undefined'){
var xn = xn || 100;
return xn > 10000000 ? false : setTimeout(doFB, xn, 10 * xn);
}
FB.init({
appId: "1091422140883673",
status: true,
cookie: true,
xfbml: true,
oauth: true,
channelUrl: window.location.protocol + '//' + window.location.hostname + '/facebook/channel'
});
$("#facebook-login").click(function(){
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(me) {
//fb login success
var selectedLang = $(".demo-drop .selected");
var demoURL = selectedLang.attr("data-url");
var demoLangCode = selectedLang.attr("rel");
jQuery.when(submitEmailToEC(me.email, demoLangCode,"mobile demo")).then(openDemo(demoURL));
});
} else {
//facebook failed
console.log("fb fail");
}
}, {
scope: 'email'
});
});
});
/* ============================ Validate Form ============================*/
$(document).ready(function(){
$(".start-demo-btn").click(function (e) {
function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
re.test(email) ? verify_real_email(email,validateSuccess,validateFail) : validateFail();
}
function validateSuccess() {
if (!RSUI.util.getCookie("curEmailIdsc")) {
jQuery.when(submitEmailToEC(email.val(), lang,"mobile demo")).then(openDemo(demoURL));
} else {
openDemo(demoURL);
}
return false;
}
function validateFail() {
email.css("border","2px solid red").val("").prop("placeholder","PLEASE ENTER A VALID EMAIL").focus();
}
var selLang = $(this).parents(".lightbox-product-inner").find("li a.selected")
var lang = selLang.attr("rel");
var demoURL = selLang.attr("data-url")
if (typeof lang == "undefined") {return false;}
var email = $(this).parent().find(".email-input");
if (email.attr("required")) {
validateEmail(email.val())
}
});
});
/* ======================== Brite Verify Validation ========================*/
function get_token(){
window.briteverifyToken = false;
var form_token = '4047df1c-5078-4e96-b335-f61aa2b92891'; // public key
var url = 'https://forms-api-v1.briteverify.com/api/submissions/view.json?callback=getBriteverifyToken&form_token='+form_token+'&_='+Date.now();
// append script to body to get cross-domain jsonp data
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
window.getBriteverifyToken = function(data){
// console.log(data);
// console.log('token: '+data.token);
window.briteverifyToken = data.token;
delete window.getBriteverifyToken;
document.getElementsByTagName('head')[0].removeChild(script);
}
}
// if the demo hasn't already been taken, get an email verification token
if(!RSUI.util.getCookie('demotaken')) {
get_token();
}
function verify_real_email(email,success,failure){
if(!success){success = function(){};}
if(!failure){failure = function(){};}
if(window.briteverifyToken){
var token = window.briteverifyToken;
var url = 'https://forms-api-v1.briteverify.com/api/submissions/verify.json?callback=briteverify&form_token=4047df1c-5078-4e96-b335-f61aa2b92891&token='+token+'&email='+email+'&_='+Date.now();
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
// if the script url doesn't work (maybe they changed the api)
script.onerror = function(e){
// ignore verification and move on
success();
};
window.briteverify = function(data){
try{
// if email is valid
if(data.status!=='invalid'){
success();
}
// if email is invalid
else{
failure();
}
document.getElementsByTagName('head')[0].removeChild(script);
}
catch(e){
// if error, ignore verification and move on
success();
}
delete window.briteverify;
}
}
else{
// if no token, ignore verification and move on
success();
}
}
/* ============================ Open Demo ============================*/
function openDemo(demoURL) {
$(document).trigger('demo_start', {
version: 'd4',
version_description: 'desktop_demo',
start_time: new Date()
});
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
setTimeout(function() {
window.location.href = demoURL;
}, 0);
}
$("#demo-box iframe").remove();
var iframe = document.createElement("iframe");
iframe.src = demoURL;
iframe.width = "100%";
iframe.height = "100%";
iframe.scrolling = "no";
iframe.frameborder = "0";
$(".demo-wrap").addClass("play");
$("#demo-box").append(iframe);
if (~demoURL.indexOf("type=k12")) redirect = "http://www.rosettastone.com/k12";
if (~demoURL.indexOf("type=busn")) redirect = "http://www.rosettastone.com/business";
}
/* ========================== Send Email To EC ========================*/
function submitEmailToEC(email, langCode, cis_name) {
var defer = jQuery.Deferred()
$(document).trigger('demo_email', {
email: email,
is_offer: false
});
var baseURL = (window.location.href.search(/(\.stg\.)|(local)/i)>-1 ?
'http://www.stg' :
'https://www')
+ '.rosettastone.com/?p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2&data=';
var data = {
email : email,
demo_lang : langCode,
cis_name : cis_name,
website: 'US_WEBSITE',
form_type : 'demo',
demo_type : window.demo_type || 'Demo_Desktop',
form_url : 'homepage',
newsletter_type : window.newsletter_type || "Mid_Catalog_LearnPage",
cid: _satellite.getVar('mostrecentcampaign')
}
var request = jQuery.ajax({
contentType: "application/json; charset=utf-8",
url: baseURL + encodeURIComponent(JSON.stringify(data)),
type: "POST",
dataType: "jsonp",
data:data
});
request.done(function(msg) {
if (msg[0].cisFlag == true) {
// 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"/>')
// record the email in a cookie that expires in 30 days
RSUI.util.setCookie("curEmailIdsc",email)
//document.cookie = 'curEmailIdsc='+email+'; max-age='+60*60*24*30+'; path=/;';
defer.resolve('success')
}
})
return defer.promise()
}
/* ======================= Send Email To Eloqua ======================*/
function submitEmailToEloqua(email, elqFormName) {
function GetElqCustomerGUID(){
var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); return v.toString(16);});
return guid;
}
var elqURL = "http://s1294.t.eloqua.com/e/f2?C_EmailAddress="+email+"&redirect_url=&elqFormName="+elqFormName+"&elqSiteID=1294&elqCustomerGUID="+GetElqCustomerGUID()+"&elqCookieWrite=0";
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", elqURL);
ifrm.style.width = "0px";
ifrm.style.height = "0px";
ifrm.style.display = "none";
$("body").append(ifrm);
// 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"/>')
$(document).trigger('demo_email', {
email: email,
is_offer: false
});
// record the email in a cookie that expires in 30 days
document.cookie = 'curEmailIdsc='+email+'; max-age='+60*60*24*30+'; path=/;';
}
/* ===================== Remove v3 demo for tablet ===================*/
$(document).ready(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(".drop-col:not(:first-child)").remove();
$(".drop-col ul").css("width","16.5em");
}
});
/* ===================== extend addBack for old jQuery ===================*/
$(document).ready(function(){
jQuery.fn.addBack = function (selector) {
return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector));
}
});
});