tabbit

Wed May 24 2017
Copied to clipboard! Copy reply
$(function(){

	// change this to 1, 2, or 3 as needed
	var experience = 1;



	// add social proof to subscription guarantee section
	$('.oct_2016_blue_bg').append('<div class="meclabs_guarantee_container"></div>');
	$('.meclabs_guarantee_container')
		.append($('.oct_2016_guarantee_vertical:eq(0)'))
		.append('<style> .meclabs_guarantee_container{ margin-top: 30px; } .meclabs_guarantee_proof{ display: inline-block; vertical-align: middle; margin: 0px 20px; border: 1px solid #fff; padding: 20px 30px; } .meclabs_trusted{ font-size: 16px; line-height: 1; margin-bottom: 14px; font-family: gothamlight; } .meclabs_trusted span{ font-family: gothambold; text-transform: uppercase; color: #EFDC00; } .meclabs_guarantee_proof img{ vertical-align: middle; padding: 0px 10px; } .meclabs_nasa{ width: 96px; } </style> <div class="meclabs_guarantee_proof"> <div class="meclabs_trusted"> <span>Trusted for 25 years</span> <br>by top companies and agencies </div> <img alt="NASA" class="meclabs_nasa" src="/lp/spo/meclabs_may_2017/img/nasa-logo-2x.png"> <img alt="Hitachi" src="/lp/spo/meclabs_may_2017/img/hitachi-logo.svg"> <img alt="TripAdvisor" src="/lp/spo/meclabs_may_2017/img/tripadvisor-logo.svg"> </div>');
	$('.oct_2016_guarantee_vertical').css({
		'display': 'inline-block',
		'vertical-align': 'middle'
	});




	// update subscription text
	var subscription_intro = '<style> .oct_2016_product_intro b, .oct_2016_ul b{ font-family: gothambold; font-weight: normal; } </style> The flexibility to learn <span class="js_langname_1">a new language</span> <b>on your schedule, with any device, from anywhere in the world</b>. You\'ll get full access to all of our latest features and can <b>start learning immediately</b> &ndash; no lengthy downloads or installations required.';
	$('.oct_2016_product_intro').html(subscription_intro);

	var subscription_bullets = '<li><b>Immediate access to all levels</b> of the world’s best language learning program</li> <li><b>Access on any device</b>, including our award winning mobile app</li> <li><b>The most advanced speech technology</b> with our only product that updates as new features are released</li> <li><b>Download lessons</b> to your mobile device to continue learning offline</li>';
	$('.oct_2016_blue_bg .oct_2016_ul').html(subscription_bullets);






	// add "course only" text under CD title
	var course_only = '<div>(course only)</div>';
	$(course_only).insertAfter('.oct_2016_gold_bg .oct_2016_language_subhead');







	// comparison chart links
	var comparison_chart_link = '<div class="comparison_chart_link js_open_comparison_chart">'
			+ '<span>See which product is best for you</span> '
			+ '<svg class="expand_box_svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"><![CDATA[ .expand_box_svg *{stroke:#333; stroke-width:4; stroke-linejoin:round; fill:none;} ]]></style> <rect x="2" y="58" width="40" height="40"></rect> <polyline points="2,50 2,2 98,2 98,98 50,98"></polyline> <line x1="50" y1="50" x2="85" y2="15"></line> <polyline points="60,15 85,15 85,40"></polyline> </svg>'
		+ '</div>'
	$('body').append('<style> .comparison_chart_link{ text-align: center; font-size: 17px; } .comparison_chart_link span{ cursor: pointer; text-decoration: underline; } .oct_2016_blue_bg .comparison_chart_link{ color: #EFDC00; padding-top: 52%; font-family: gothammedium; } .oct_2016_gold_bg .comparison_chart_link{ color: #4788BE; padding-top: 60%; font-family: gothammedium; } .meclabs_cd_title .comparison_chart_link{ padding-top: 0px; margin-bottom: 20px; } .expand_box_svg{ width: 25px; height: 25px; vertical-align: middle; cursor: pointer; margin-left: 5px; } .expand_box_svg *{ stroke: #fff; stroke-width: 4; stroke-linejoin: round; fill: none; } .oct_2016_gold_bg .expand_box_svg *{ stroke: #4788BE; } </style>');
	$('.oct_2016_subscription_image, .oct_2016_cddl_image')
		.append(comparison_chart_link)
		.css({'padding-bottom':'0px'});





	// add comparison chart
	var comparison_chart = '<style type="text/css"> .comparison_chart_container{ z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; overflow: scroll; display: none; } @media(max-width: 743px){ .comparison_chart_container{ display: none !important; } } .comparison_chart_bg_overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(33,33,33,0.8); } .comparison_chart{ z-index: 1001; display: inline-block; margin-top: 40px; /*width: 800px; max-width: 100%;*/ width: 100%; max-width: 1000px; } .comparison_table_container{ font-family: gothambook; color: #333; padding: 60px 30px 20px 30px; background: #f9f9f9; border-radius: 8px; } .comparison_chart table{ width: 100%; text-align: center; border-collapse: collapse; } .comparison_chart td, .comparison_chart th{ width: 15%; text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; } .comparison_chart td:first-of-type, .comparison_chart th:first-of-type{ width: 40%; padding-left: 45px; } .td_subtitle{ color: #aaa; } .comparison_chart td:first-of-type{ background-repeat: no-repeat; background-position: 5px center; } .comparison_chart td.comparison_best{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/stone-icon.svg\'); background-position: 10px center; } .comparison_truaccent{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/truaccent-icon.svg\'); } .comparison_adaptive{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/adaptive-recall-icon.svg\'); } .comparison_offline{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/offline-access-icon.svg\'); } .comparison_instant{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/instant-access-icon.svg\'); } .comparison_award{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/award-winning-icon.svg\'); } .comparison_anydevice{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/any-device-icon.svg\'); } .comparison_updates{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/updates-icon.svg\'); } .comparison_tutoring{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/tutors-icon.svg\'); } .comparison_phrasebook{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/phrasebook-icon.svg\'); } .comparison_chart th{ font-size: 14px; text-transform: uppercase; font-family: gothambold; font-weight: normal; padding-bottom: 10px; vertical-align: bottom; } .comparison_chart td{ font-size: 14px; height: 2.2em; padding: 0.5em; } .comparison_chart td:first-of-type{ text-align: left; } .comparison_chart th:last-of-type, .comparison_chart td:last-of-type{ border-right: none; } .th_subscription_img{ max-width: 110px; } .th_download_img{ max-width: 80px; } .th_cd_img{ max-width: 90px; display: inline-block; margin-bottom: 5px; } .comparison_chart td.asterisk_td{ text-align: right; border: none; color: #888; font-family: gothamlight; font-size: 13px; padding-top: 15px; background-image: none; } .comparison_asterisk_img{ /*display: block;*/ position: relative; display: inline-block; } .comparison_asterisk_img:after{ content: \'*\'; position: absolute; top: 2px; right: -10px; } .comparison_table_container{ position: relative; } .comparison_close_x{ position: absolute; top: 20px; right: 20px; z-index: 1002; cursor: pointer; width: 40px; height: 40px; } .comparison_close_x svg{ width: 100%; height: 100%; } </style> <div class="comparison_chart_container"> <div class="comparison_chart_bg_overlay js_close_comparison_chart"></div> <div class="comparison_chart"> <div class="comparison_table_container"> <div tabindex="0" class="comparison_close_x js_close_comparison_chart"> <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"><![CDATA[ .comparison_close_x line, .comparison_close_x circle{ stroke:#fff; stroke-width:0.5; stroke-linecap:round; } ]]></style> <circle cx="5" cy="5" r="4.5" style="fill:#1999D8;"></circle> <line x1="3.8" y1="3.8" x2="6.2" y2="6.2"></line> <line x1="3.8" y1="6.2" x2="6.2" y2="3.8"></line> </svg> </div> <table> <thead> <tr> <th></th> <th> <img class="th_subscription_img" src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/online-lockup-1x.png" alt=""><br> Online<br>Subscription </th> <th> <img class="th_download_img" src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/download-lockup-chart-2x.png" alt=""><br> Instant<br>Download </th> <th> <img class="th_cd_img" src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/CD-lockup-chart-2x.png" alt=""><br> CD </th> </tr> </thead> <tbody> <tr> <td class="comparison_best">Access to the world\'s best language learning program</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> </tr> <tr> <td class="comparison_truaccent">TruAccent&trade; Speech Recognition</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> </tr> <tr> <td class="comparison_adaptive">Adaptive Recall</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> </tr> <tr> <td class="comparison_offline">Offline Access</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> </tr> <tr> <td class="comparison_instant">Instant Access</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td> <span class="comparison_asterisk_img"> <img class="" src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"> </span> </td> <td></td> </tr> <tr> <td class="comparison_award">Award-winning mobile application</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td></td> <td></td> </tr> <tr> <td class="comparison_anydevice">Access on any device</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td></td> <td></td> </tr> <tr> <td class="comparison_updates">Access to product updates and the newest features</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td></td> <td></td> </tr> <tr> <td class="comparison_tutoring"> Tutoring Sessions with Native Speakers <br><span class="td_subtitle">(available for in-product purchase)</span> </td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td></td> <td></td> </tr> <tr> <td class="comparison_phrasebook">Phrasebook - perfect for traveling!</td> <td><img src="http://www.rosettastone.com/lp/spo/meclabs_may_2017/img/check.svg" alt="check"></td> <td></td> <td></td> </tr> <tr> <td class="asterisk_td" colspan="4">*Download time is dependent on your internet speed</td> </tr> </tbody> </table> </div> </div> </div> ';
	$('body').append(comparison_chart);
















	// ***********************************
	// experience 2 - reduce cd text
	// ***********************************


	if(experience===2){

		$('.oct_2016_cddl_image').parent()
			.addClass('meclabs_cd_title')
			.html('<div>DOWNLOAD or CD</div>')
			.css({
				'font-size':'32px',
				'padding':'20px'
			})
			.append(comparison_chart_link);
		$('.rs_classic').hide();

	}











	// ***********************************
	// experience 3 - hide cd behind link
	// ***********************************

	function hide_cd_section(){
		$('.rs_classic, .oct_2016_gold_bg').slideUp();
		$('.meclabs_cd_toggle_container').slideDown();
	}

	function show_cd_section(){
		$('.meclabs_cd_toggle_container').slideUp();
		$('.rs_classic').fadeIn();
		$('.oct_2016_gold_bg').slideDown();
	}

	if(experience===3){

		hide_cd_section();

		// cd open
		var cd_toggle = '<style> .meclabs_cd_toggle_container{ background-color: #392E0B; color: #fff; font-size: 24px; padding: 15px; font-family: gothamlight; text-align: center; text-transform: uppercase; position: relative; } .meclabs_cd_toggle_container span{ vertical-align: middle; } .meclabs_cd_toggle{ vertical-align: middle; border: 0px; border-radius: 4px; font-size: 15px; background-color: #1CA9DE; color: #fff; font-family: gothambook; text-transform: uppercase; display: inline-block; padding: 8px 12px; margin-left: 20px; cursor: pointer; } .meclabs_cd_toggle:hover{ background-color: #F4C12E; color: #333; } </style> <div class="meclabs_cd_toggle_container"> <span>Looking for CD or Download products?</span> <button class="meclabs_cd_toggle">Shop Now</button> </div>';
		$(cd_toggle).insertBefore('.rs_classic');
		$('.meclabs_cd_toggle').on('click', show_cd_section);

		// cd close
		var cd_close = '<style> .meclabs_cd_close{ position: absolute; top: 20px; right: 10%; color: #E9D600; cursor: pointer; } .meclabs_cd_close:hover{ color: #fff; } </style> <div class="meclabs_cd_close"> Close&nbsp;&nbsp;X </div>';
		$('.rs_classic').append(cd_close);
		$('.meclabs_cd_close').on('click', hide_cd_section);

	}












	// comparison chart functionality

	function open_comparison_chart(){
		$('.comparison_chart_container').fadeIn();
		$('.comparison_table_container').focus();
	}

	function close_comparison_chart(){
		$('.comparison_chart_container').fadeOut();
	}

	$('.js_open_comparison_chart').on('click', function(){
		open_comparison_chart();
	});

	$('.js_close_comparison_chart').on('click', function(){
		close_comparison_chart();
	});
	$(document).on('keydown', function(e){
		if(e.keyCode===27){
			close_comparison_chart();
		}
	});





});