Wed Jan 31 2018
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
$(function(){

	// meclabs tutoring experience 3 (with totals)

	var html = '<style type="text/css"> .premium{ display:none; font-family: gothamlight, sans-serif; background-color: #E3EDF5; color: #3F3F3F; font-size: 16px; text-align: left; position: fixed; overflow: scroll; width: 100%; height: 100%; left: 0%; top: 0%; z-index: 100; } .premium_content{ margin: auto; max-width: 1000px; padding: 20px; } .premium_callout{ background-color: #F5C206; color: #432; display: inline-block; font-family: gothammedium, sans-serif; text-transform: uppercase; padding: 8px 18px; } .premium_title{ font-size: 30px; margin-top: 20px; text-transform: uppercase; font-family: gothambook, sans-serif; } .premium_title span{ font-family: gothambold, sans-serif; } .premium_subtitle{ font-size: 20px; margin: 10px 0px; } .premium_subtitle span{ font-family: gothambold, sans-serif; } .premium_subtitle_2{ font-size: 16px; font-family: gothamlight, sans-serif; font-style: italic; } .premium_info_container{ margin: 50px 0px 20px; font-size: 0px; } .premium_info{ display: inline-block; width: 52%; font-size: 16px; font-family: gothamlight, sans-serif; vertical-align: top; } .premium_bullets{ list-style-type: none; margin: 30px 0px 0px; padding: 0px 28px; } .premium_bullets li{ position: relative; margin-bottom: 20px; } .premium_bullets li::before{ content: \'\'; position: absolute; left: -27px; top: 5px; display: inline-block; border: 2px solid #4487C0; border-top: none; border-right: none; height: 6px; width: 15px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .premium_vid_container{ /*border: 1px dashed #fff;*/ display: inline-block; margin-left: 6%; width: 42%; vertical-align: top; } .premium_vid_still{ box-shadow: 0px 2px 8px 0px rgba(33,33,33,0.4); display: inline-block; width: 100%; cursor: pointer; } .premium_vid_still img{ width: 100%; display: block; } .premium_vid_caption{ font-size: 14px; margin-top: 8px; } .premium_how_it_works_container{ padding: 10px 0 20px; } .premium_how_it_works{ font-size: 16px; color: #0098db; font-family: gothammedium, sans-serif; cursor: pointer; } .premium_how_it_works_text{ text-decoration: underline; vertical-align: middle; margin-right: 3px; } .premium_how_it_works svg{ vertical-align: middle; position: relative; top: 1px; } .premium_how_it_works_arrow circle{ stroke: unset; fill: #0098db; } .premium_how_it_works_arrow polygon{ stroke: #E3EDF5; fill: #E3EDF5; } .premium_mobile_only{ display: none; } @media(max-width: 570px){ .premium_info_container{ margin: 20px 0px 20px; } .premium_info{ width: auto; } .premium_vid_container{ margin-left: 29px; width: auto; } .premium_mobile_only{ display: block; } .premium_desktop_only{ display: none; } } .premium_close_container{ margin-top: 40px; text-align: right; } .premium_close, .premium_close svg{ text-decoration: none; border: none; } .premium_close:focus, .premium_button:focus { outline: 3px dashed #333; } .premium_buttons_container{ margin-top: 40px; } .premium_button{ text-decoration: none; background-color: #3F3F3F; color: #fff; padding: 20px 40px; border-radius: 5px; display: inline-block; text-transform: uppercase; font-family: gothammedium, sans-serif; font-size: 16px; margin: 5px 0px; } .premium_button:hover{ background-color: #fdba3d; color: #333; } .premium_button_yes{ margin-right: 10px; background-color: #0098db; } .premium_total_container{ margin-top: 40px; } .premium_bold{ font-family: gothammedium, sans-serif; } </style> <div class="premium"> <div class="premium_content"> <div class="premium_close_container"> <a href="#" tabindex="0" class="premium_close js_premium_no"> <svg class="svg_x_in_circle" style="width:40px; height:40px;" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css">/*<![CDATA[*/ .svg_x_in_circle line, .svg_x_in_circle circle{ stroke:#fff; stroke-width:0.6; stroke-linecap:round; } /*]]>*/</style> <circle cx="5" cy="5" r="4.5" style="fill:#0098db;"></circle> <line x1="3.5" y1="3.5" x2="6.5" y2="6.5"></line> <line x1="3.5" y1="6.5" x2="6.5" y2="3.5"></line> </svg> </a> </div> <div class="premium_title"><span>Wait!</span> Before you check out:</div> <div class="premium_subtitle">Enhance your lessons with personalized help from a <span>live tutor</span> for an additional <span>$<span class="js_tutor_extra_amt">{amt}</span> per month.</span></div> <div class="premium_subtitle_2">Book sessions as you need them, around your schedule</div> <div class="premium_info_container"> <div class="premium_info"> <div class="premium_intro"> <span class="premium_desktop_only">Practice your conversational skills (via 1-way video camera) from the comfort of your home with a native speaking tutor who uses our proven learning methods.</span> <span class="premium_mobile_only">Practice your conversational skills via 1-way video camera with a native speaking tutor</span> </div> <ul class="premium_bullets"> <li>Get help with the specific lesson you are working on</li> <li class="premium_desktop_only">Get help with proper pronunciation</li> <li class="premium_desktop_only">Practice in small groups with other students on your level</li> <li class="premium_mobile_only">Book sessions as you need them, around your schedule</li> <li>Get a new tutoring session every <span class="premium_desktop_only">single</span> month!</li> </ul> <div class="premium_total_container"> <span class="premium_bold">Updated Total: </span> $<span class="js_tutor_total_amt">{total}</span>/month  ($<span class="js_tutor_original_amt">{original}</span> +  $<span class="js_tutor_extra_amt">{diff}</span>) </div> </div> <div class="premium_vid_container"> <div class="premium_vid_still premium_desktop_only js_open_video" data-video="imK17Pb3Yws" aria-label="See how Rosetta Stone tutoring works"> <img src="https://www.rosettastone.com/lp/ab_tests/ws-2389/assets/premium_vid_still.jpg" alt=""> </div> <div class="premium_vid_caption premium_desktop_only">Practice your pronunciation with a live tutor using the material covered in your lesson.</div> <div class="premium_how_it_works_container premium_mobile_only"> <span class="premium_how_it_works js_open_video" data-video="imK17Pb3Yws" aria-label="See how Rosetta Stone tutoring works"> <span class="premium_how_it_works_text">See how it works</span> <svg class="premium_how_it_works_arrow" width="20" height="20" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4.75" style="stroke-width:0.3;"></circle> <polygon points="4,3 7,5 4,7" style="stroke-width:0.5;"></polygon> </svg> </span> </div> </div> </div> <div class="premium_buttons_container"> <a class="premium_button premium_button_yes js_premium_yes" href="#" tabindex="0">Yes, add live tutoring to my subscription</a> <a class="premium_button js_premium_no" href="#" tabindex="0">No, continue to checkout</a> </div> </div> </div> <!-- ********************************************************* VIDEO OVERLAY ********************************************************** --> <style> #video_overlay{ position: fixed; z-index: 1000; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(33,33,33,0.9); color: #fff; display: none; text-align: center; overflow: scroll; } #close_video_overlay{ position: absolute; right: 20px; top: 20px; cursor: pointer; width: 30px; height: 30px; } #video_overlay .overlay_x{ stroke: #fff; width: 100%; height: 100%; } #video_scaler{ width: 100%; max-width: 900px; margin: 60px auto 0px; text-align: center; } #video_container{ background: #333; display: inline-block; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); width: 100%; height: 0px; overflow: hidden; padding-top: 56.25%; position: relative; } #video_container iframe{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; } </style> <div id="video_overlay"> <div id="close_video_overlay" tabindex="0" aria-label="Click or press enter key here to close video"> <svg class="overlay_x" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css">/*<![CDATA[*/ .overlay_x line{ stroke-width:0.8; stroke-linecap:round; } /*]]>*/</style> <line x1="0.5" y1="0.5" x2="9.5" y2="9.5"></line> <line x1="0.5" y1="9.5" x2="9.5" y2="0.5"></line> </svg> </div> <div id="video_scaler"> <div id="video_container"></div> </div> </div>';
	$('body').append(html);





	// *********************************************************
	// show popup and set popup button urls
	// *********************************************************

	function attach_click_to_cart_btns(){

		$('.js_oct_2016_addtocart[data-media="subscription"]').on('click', function(e){
			e.preventDefault();

			var cart_url_original = this.href;
			var lvl = this.getAttribute('data-lvl');

			var cart_url_premium = upgrade_cart_url(cart_url_original, lvl);

			// put urls in buttons
			$('.js_premium_no').attr('href', cart_url_original);
			$('.js_premium_yes').attr('href', cart_url_premium);

			// show monthly price changes
			$('.js_tutor_extra_amt').html(get_tutoring_prices(lvl).tutoring);
			$('.js_tutor_original_amt').html(get_tutoring_prices(lvl).original);
			$('.js_tutor_total_amt').html(get_tutoring_prices(lvl).total);

			// show overlay after cart button is clicked
			$('.premium').fadeIn();
		});
	}
	attach_click_to_cart_btns();

	$(document).on('lang_change', function(){
		setTimeout(attach_click_to_cart_btns,100);
	});






	function upgrade_cart_url(original_cart_url, lvl){
		var premium_skus = {
			'01': '90471',
			'03': '97357',
			'06': '97352',
			'12': '97342',
			'24': '99042'
		};
		var sku = premium_skus[lvl];
		var premium_carturl = original_cart_url.replace(/\/sku\/\d+/i, '/sku/'+sku);
		return premium_carturl;
	}




	function get_tutoring_prices(lvl){
		var original_price = Math.floor(RSI({media:'subscription', lvl:lvl, cat:'esp'})[0].price*100/parseInt(lvl))/100;


		var price_level_of_promo = {
			'yosemite': 'msrp', // highest
			'goldengate': 'price_level_1',
			'swissalps': 'price_level_2',
			'parthenon': 'price_level_3',
			'mountfuji': 'price_level_4',
			'giza': 'price_level_5',
			'iguazafalls': 'price_level_6' // lowest
		};

		var promo_name = RSI({lvl:'24'})[0].code.split('_')[0]; // this will give something like "parthenon"

		var price_level = price_level_of_promo[promo_name];

		// usage: premium_prices_monthly[price_level][product_lvl]
		var premium_prices_monthly = {
			'msrp': {
				'01': '29.99',
				'03': '39.67',
				'06': '29.83',
				'12': '23.25',
				'24': '16.63'
			},
			'price_level_1': {
				'01': '29.99',
				'03': '38.99',
				'06': '29.99',
				'12': '21.99',
				'24': '14.49'
			},
			'price_level_2': {
				'01': '29.99',
				'03': '36.99',
				'06': '27.99',
				'12': '19.99',
				'24': '13.49'
			},
			'price_level_3': {
				'01': '29.99',
				'03': '30.99',
				'06': '21.99',
				'12': '17.99',
				'24': '12.49'
			},
			'price_level_4': {
				'01': '29.99',
				'03': '26.99',
				'06': '17.99',
				'12': '15.99',
				'24': '11.99'
			},
			'price_level_5': {
				'01': '29.99',
				'03': '24.99',
				'06': '15.99',
				'12': '13.99',
				'24': '10.99'
			},
			'price_level_6': {
				'01': '29.99',
				'03': '22.99',
				'06': '13.99',
				'12': '11.99',
				'24': '9.99'
			}
		};

		var total_price = premium_prices_monthly[price_level][lvl];
		var tutoring_price = (+total_price - original_price).toFixed(2);

		return {
			total: total_price,
			original: original_price,
			tutoring: tutoring_price
		};
	}








	// *********************************************************
	// VIDEO OVERLAY
	// *********************************************************

	// any elements with this class will open a video of your choice
	$('.js_open_video').on('click', function(){
		showVideo(this);
		return false;
	});


	// make video openers keyboard-accessible
	$('.js_open_video').attr('tabindex','0').on('keydown', function(e){
		// make "enter" key equivalent to click
		if(e.keyCode === 13){
			showVideo(this);
			return false;
		}
	}).on('focus', function(){
		$(this).css({'outline':'2px dashed #fff'});
	}).on('blur', function(){
		$(this).css({'outline':''});
	});



	// show correct video
	function showVideo(elem){
		var vid_name = elem ? elem.getAttribute('data-video') : 'how_it_works';

		var youtube_id = {
			live_studio_session: 'SiRtFaXqCqU',
			how_it_works : 'imK17Pb3Yws',
			red_ball : 'xmS1rgDUec4',
			delaine : 'KwFphr58e94',
			grace : 'g6WEYqaMFsk',
			peter : 'p6l9xp3yH7E',
			chris : 'ZOwb57bx4mA',
			food_truck : 'jMPL9EjBucA',
			anniversary_25 : 'ZBeP_d-uAww'
		};

		var vid_id = youtube_id[vid_name] || youtube_id['how_it_works'];

		var youtube_video = '<iframe src="https://www.youtube.com/embed/'+vid_id+'?rel=0&autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>';
		document.getElementById('video_container').innerHTML = youtube_video;

		$('#video_overlay').fadeIn().focus();
	}

	// hide video
	function hideVideo(){

		// hide overlay
		$('#video_overlay').fadeOut(function(){
			// get rid of video altogether (otherwise youtube will keep playing it)
			document.getElementById('video_container').innerHTML = '';
		});
	}

	// click to close video overlay
	document.getElementById('video_overlay').onclick = function(e){
		// if the user clicks the background, close the video
		if( e.target.id.match(/(^(close_|)video_overlay$)/) ){
			hideVideo();
		}
	};
	// if user clicks x, close video (the reason this wasn't added to the event delegation was to make the functionality bulletproof across browsers; yes there was an IE bug)
	document.getElementById('close_video_overlay').onclick = hideVideo;

	// close video if user presses "esc" key
	$(document).on('keydown', function(e){
		if(e.keyCode===27){
			hideVideo();
		}
	});
});