tabbit

Wed Aug 03 2016
Copied to clipboard! Copy reply
<style type="text/css">

/* rto styles */

#rtodl #rto{
  font-family: gotham_htfmedium;;
  height: 50px;
  z-index: 9000;
  background: #ecc200;
  text-align: center;
  padding: 25px 0px 15px;
  line-height: 1;
  font-size: 20px;
  font-family: sans-serif;
  color: #333;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  box-shadow: 0px 2px 30px -3px #555;
  transition: bottom 0.5s;
}

#rtodl .saveadditional{
	font-size: 1.5em;
	font-weight: 400;
	padding: 4px 0 0;
	text-transform: uppercase;
	color: rgb(131,5,4);
	font-family: gotham_htfmedium;;
}

#rtodl .nextten{
	font-family: gotham_htfbook;
  font-size: 0.75em;
  font-weight: lighter;
  padding: 0px 0px 25px;
}

#rtodl #rtobutton{
  display: inline-block;
  font-family: gotham_htfbook;
  margin: auto;
  padding: 10px 30px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  border-radius: 7px;
  margin-top: 10px;
  background: #0096d9;
  box-shadow: 0px -35px 25px -15px #006aa5 inset, 0px 1px 2px -1px #999;
  text-shadow: -1px -1px 0px #458;
}

#rtodl #rto_showhide{
	cursor: pointer;
	position: absolute;
  top: -29px;
  right: 44px;
}

#rtodl #rto_show_button, #rto_hide_button{
	position: absolute;
	left: -20px;
	top: 62px;
	-ms-transform: rotate(7deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index: 10;
}

#rtodl #yellowtop {
	width: 100%;
	height: 15px;
	background-color: #ecc200;
	position: absolute;
	top: 0;
	display: none;
}

#rtodl #rtoheading{
	display: inline-block;
	margin-top: -9px;
}

#rtodl .bannerbutton{
	display: inline-block;
	vertical-align: middle;
	margin-top: -35px;
}

#rtodl #rtosideimagec{
	margin-top: -17px;
	width: 75px;
	display: inline
}

/* clock styles */

#rtodl #clock{
	vertical-align: middle;
	margin: -12px 30px 15px;
	position: relative;
	background: #444;
	color: #eabf26;
	font-size: 0px;
	display: inline-block;
	border-radius: 2px;
	border-bottom: 1px solid #222;
	box-shadow: 0px -35px 25px -15px rgba(22,22,22,0.5) inset;
}

#rtodl .clockdiv{
  font-size: 15px;
  display: inline-block;
  border-right: 1px solid #111;
  border-left: 1px solid #333;
  padding: 7px 19px;
  font-weight: bold;
}

#rtodl .clockdiv-last{
	border-right: 0px;
}

#rtodl .timeleft{
	font-size: 16px;
	font-weight: 100;
	padding: 10px 10px;
	font-family: gotham_htfbook;
}

#rtodl .timenumber{
	font-size: 20px;
}

#rtodl .clockshadow{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 55%;
	background: rgba(33,33,33,0.2);
}

#rtodl #clockminutes, #clockseconds{
	font-family: gotham_htfmedium;;
  font-size: 25px;
}

</style>

<style type="text/css">

#rtos #rto{
  font-family: gotham_htfmedium;;
  height: 50px;
  z-index: 9000;
  background: #ecc200;
  text-align: center;
  padding: 25px 0px 15px;
  line-height: 1;
  font-size: 20px;
  color: #333;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  box-shadow: 0px 2px 30px -3px #555;
  transition: bottom 0.5s;
}

#rtos .saveadditional{
	font-size: 1em;
	font-weight: 400;
	padding: 4px 0 0;
	text-transform: uppercase;
	color: rgb(131,5,4);
	font-family: gotham_htfmedium;;
}

#rtos .nextten{
	font-family: gotham_htfbook;
  font-size: 0.75em;
  font-weight: lighter;
  padding: 5px 0px 25px;
}

#rtos #rtobutton{
  display: inline-block;
  font-family: gotham_htfbook;
  margin: auto;
  padding: 10px 30px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  border-radius: 7px;
  margin-top: 10px;
  background: #0096d9;
  box-shadow: 0px -35px 25px -15px #006aa5 inset, 0px 1px 2px -1px #999;
  text-shadow: -1px -1px 0px #458;
}

#rtos #rto_showhide{
	cursor: pointer;
	position: absolute;
  top: -29px;
  right: 44px;
}

#rtos #rto_hide_button{
	position: absolute;
	left: -20px;
	top: 62px;
	-ms-transform: rotate(7deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index: 10;
}

#rtos #rto_show_button{
	display: none;
}

#rtos #yellowtop {
	width: 100%;
	height: 15px;
	background-color: #ecc200;
	position: absolute;
	top: 0;
	display: none;
}

#rtos #rtoheading{
	display: inline-block;
	margin-top: -13px;
	text-align: left;
	vertical-align: middle;
	margin-left: 3px;
}

#rtos .bannerbutton{
	display: inline-block;
	vertical-align: middle;
	margin-top: 0;
}

#rtos .button_fine_print{
	display: inline-block;
  vertical-align: middle;
  margin-top: -30px;
}

#rtos #rtosideimage{
	margin-top: -17px;
	width: 102px;
	display: inline
}

#rtos .rto_bottom_headline{
	font-size: 0.85em;
}

#rtos .fineprint{
	font-family: gotham_htfbook;
  font-size: 0.55em;
  margin-top: 3px;
  color: #363636;
  text-align: left;
}

#rtos .fineprint a{
	color: #363636;
	text-decoration: underline;
}
/* clock styles */

#rtos #clock{
	vertical-align: middle;
	margin: -25px 20px 15px;
	position: relative;
	background: #444;
	color: #eabf26;
	font-size: 0px;
	display: inline-block;
	border-radius: 2px;
	border-bottom: 1px solid #222;
	box-shadow: 0px -35px 25px -15px rgba(22,22,22,0.5) inset;
}

#rtos .clockdiv{
  font-size: 15px;
  display: inline-block;
  border-right: 1px solid #111;
  border-left: 1px solid #333;
  padding: 7px 19px;
  font-weight: bold;
}

#rtos .clockdiv-last{
	border-right: 0px;
}

#rtos .timeleft{
	font-size: 16px;
	font-weight: 100;
	padding: 10px 10px;
	font-family: gotham_htfbook;
}

#rtos .timenumber{
	font-size: 20px;
}

#rtos .clockshadow{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 55%;
	background: rgba(33,33,33,0.2);
}

#rtos #clockminutes, #clockseconds{
	font-family: gotham_htfmedium;;
  font-size: 25px;
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	#rtos #rtosideimage{
		margin-left: -40px;
		margin-top: -7px;
		width: 75px;
	}
	#rtos #clock{
    margin: -15px 5px 15px;
	}
	#rtos .saveadditional{
		font-size: 0.8em;
	}
	#rtos #rto_hide_button{
		left: -5px;
    top: 60px;
	}
	#rtos #rtoheading{
		margin-top: -8px;
	}
	#rtos #rtobutton{
		margin-top: 15px;
	}
}
/*portrait*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
	#rtos #rto, #rtodl #rto, #rtocd #rto{
		height: 115px;
	}
	#rtos #rtobutton {
	    margin-top: 22px;
	}
	#rtodl #rtobutton {
	    margin-top: 40px;
	}
}
</style>
<style type="text/css">
#rtocd #rto{
  font-family: gotham_htfmedium;;
  height: 50px;
  z-index: 9000;
  background: #ecc200;
  text-align: center;
  padding: 25px 0px 15px;
  line-height: 1;
  font-size: 20px;
  font-family: sans-serif;
  color: #333;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  box-shadow: 0px 2px 30px -3px #555;
  transition: bottom 0.5s;
}

#rtocd .saveadditional{
	font-size: 1em;
	font-weight: 400;
	padding: 4px 0 0;
	text-transform: uppercase;
	color: rgb(131,5,4);
	font-family: gotham_htfmedium;;
}

#rtocd .nextten{
	font-family: gotham_htfbook;
  font-size: 0.75em;
  font-weight: lighter;
  padding: 0px 0px 25px;
}

#rtocd #rtobutton{
  display: inline-block;
  font-family: gotham_htfbook;
  margin: auto;
  padding: 10px 30px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  border-radius: 7px;
  margin-top: 7px;
  background: #0096d9;
  box-shadow: 0px -35px 25px -15px #006aa5 inset, 0px 1px 2px -1px #999;
  text-shadow: -1px -1px 0px #458;
}

#rtocd #rto_showhide{
	cursor: pointer;
	position: absolute;
  top: -30px;
  right: 44px;
}

#rtocd #rto_hide_button{
	position: absolute;
	left: -20px;
	top: 62px;
	-ms-transform: rotate(7deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index: 10;
}

#rtocd #rto_show_button{
	display: none;
}

#rtocd #yellowtop {
	width: 100%;
	height: 15px;
	background-color: #ecc200;
	position: absolute;
	top: 0;
	display: none;
}

#rtocd #rtoheading{
	display: inline-block;
	/*margin-top: -45px;*/
	margin-top: 0;
	text-align: left;
	vertical-align: middle;
	margin-left: 10px;
}

#rtocd .bannerbutton{
	display: inline-block;
	vertical-align: middle;
	/*margin-top: -73px;*/
	margin-top: -30px;
}

#rtocd #rtosideimage{
	margin-top: -18px;
	width: 75px;
	display: inline
}

/* clock styles */

#rtocd #clock{
	vertical-align: middle;
	/*margin: -50px 30px 15px;*/
	margin: -10px 30px 15px;
	position: relative;
	background: #444;
	color: #eabf26;
	font-size: 0px;
	display: inline-block;
	border-radius: 2px;
	border-bottom: 1px solid #222;
	box-shadow: 0px -35px 25px -15px rgba(22,22,22,0.5) inset;
}

#rtocd .clockdiv{
  font-size: 15px;
  display: inline-block;
  border-right: 1px solid #111;
  border-left: 1px solid #333;
  padding: 7px 19px;
  font-weight: bold;
}

#rtocd .clockdiv-last{
	border-right: 0px;
}

#rtocd .timeleft{
	font-size: 16px;
	font-weight: 100;
	padding: 10px 10px;
	font-family: gotham_htfbook;
}

#rtocd .timenumber{
	font-size: 20px;
}

#rtocd .clockshadow{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 55%;
	background: rgba(33,33,33,0.2);
}

#rtocd #clockminutes, #clockseconds{
	font-family: gotham_htfmedium;;
  font-size: 25px;
}
/* Landscape */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	#rtocd #rtosideimage{
		width: 75px;
		margin-top: -20px;
		margin-left: -40px;
	}
	#rtocd #clock{
    margin: -9px 3px 15px;
	}
	#rtocd .saveadditional{
		font-size: 0.8em;
		margin-top: -25px;
	}
	#rtocd #rto_hide_button{
		left: -5px;
    top: 57px;
	}
	#rtocd #rtoheading{
		margin-top: 22px;
	}
	#rtocd #rtobutton{
		margin-top: 8px;
	}
}
/*portrait*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	#rtocd #rtobutton {
	  margin-top: 40px;
	}
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var rtohtml= "";
var rtodl = ''
	+'<div id="rtodl">'
	+'	<div id="rto">'
	+'		<div id="rto_showhide">'
	+'			<img src="http://www.rosettastone.com/lp/rto-test/close_black.png" id="rto_show_button">'
	+'			<img src="http://www.rosettastone.com/lp/rto-test/close_black.png" id="rto_hide_button">'
	+'		</div>'
	+'		<div id="rtoheading">'
	+'			<div class="saveadditional">'
	+'				$10 EXTRA OFF'
	+'			</div>'
	+'			<div class="nextten">'
	+'				If you order in the next ten minutes:'
	+'			</div>'
	+'		</div>'
	+'		<div id="clock">'
	+'			<div class="clockdiv timeleft">TIME LEFT:</div>'
	+'			<div class="clockdiv"><span class="timenumber" id="clockminutes">09</span> min</div>'
	+'			<div class="clockdiv clockdiv-last"><span class="timenumber" id="clockseconds">07</span> sec</div>'
	+'			<div class="clockshadow"></div>'
	+'		</div>'
	+'		<div class="bannerbutton">'
	+'			<a href="#" id="rtobutton">'
	+'				CLAIM THIS OFFER'
	+'			</a>'
	+'		</div>'
	+'	</div>'
	+'</div>';

var rtocd = ''
	+'<div id="rtocd">'
	+'	<div id="rto">'
	+'		<div id="rto_showhide">'
	+'			<img src="http://www.rosettastone.com/lp/rto-test/close_black.png" id="rto_show_button">'
	+'			<img src="http://www.rosettastone.com/lp/rto-test/close_black.png" id="rto_hide_button">'
	+'		</div>'
	+'			<img id="rtosideimage" src="http://www.rosettastone.com/lp/rto-test/headset.png">'
	+'		<div id="rtoheading">'
	+'			<div class="saveadditional">'
	+'				GET AN ADDITIONAL HEADSET'
	+'			</div>'
	+'			<div class="nextten">'
	+'				If you order in the next ten minutes:'
	+'			</div>'
	+'		</div>'
	+'		<div id="clock">'
	+'			<div class="clockdiv timeleft">TIME LEFT:</div>'
	+'			<div class="clockdiv"><span class="timenumber" id="clockminutes">09</span> min</div>'
	+'			<div class="clockdiv clockdiv-last"><span class="timenumber" id="clockseconds">07</span> sec</div>'
	+'			<div class="clockshadow"></div>'
	+'		</div>'
	+'		<div class="bannerbutton">'
	+'			<a href="#" id="rtobutton">'
	+'				CLAIM THIS OFFER'
	+'			</a>'
	+'		</div>'
	+'	</div>'
	+'</div>';

var rtos = ''
	+'<div id="rtos">'
	+'	<div id="rto">'
	+'		<div id="rto_showhide">'
	+'			<img src="http://www.rosettastone.com/lp/rto-test/close_black.png" id="rto_show_button">'
	+'			<img src="http://www.rosettastone.com/lp/rto-test/close_black.png" id="rto_hide_button">'
	+'		</div>'
	+'			<img id="rtosideimage" src="http://www.rosettastone.com/lp/rto-test/bottom_fitbrains.png">'
	+'		<div id="rtoheading">'
	+'			<div class="rto_bottom_headline">'
	+'				<span>FREE</span>* 1-Month subscription to'
	+'			</div>'
	+'			<div class="saveadditional">'
	+'				ROSETTA STONE&#174; FIT BRAINS'
	+'			</div>'
	+'			<div class="nextten">'
	+'				If you order in the next ten minutes:'
	+'			</div>'
	+'		</div>'
	+'		<div id="clock">'
	+'			<div class="clockdiv timeleft">TIME LEFT:</div>'
	+'			<div class="clockdiv"><span class="timenumber" id="clockminutes">09</span> min</div>'
	+'			<div class="clockdiv clockdiv-last"><span class="timenumber" id="clockseconds">07</span> sec</div>'
	+'			<div class="clockshadow"></div>'
	+'		</div>'
	+'		<div class="button_fine_print">'
	+'			<div class="bannerbutton">'
	+'				<a href="#" id="rtobutton">'
	+'					CLAIM THIS OFFER'
	+'				</a>'
	+'			</div>'
	+'			<div class="fineprint">'
	+'				*Auto-renewal at MSRP begins after<br>1st month. <a target="_blank" href="http://support.rosettastone.com/en/brain-fitness/FitBrains/Renew-a-product/articles/How-to-cancel-your-recurring-Fit-Brains-subscription">Cancel anytime!</a>'
	+'			</div>'
	+'		</div>'
	+'	</div>'
	+'</div>';


// Free headset w/ S5 CDs: Headset15 || $10 RTO w/ S5 Downloads: 10PROMO || 1 free month of fitbrains w/ 24 month TOSUB: free1m
var yb = { id : function(str){return document.getElementById(str)} };

// initial settings
var countdown_minutes = 10; // set how many minutes we want the clock to run for
var endtime = new Date( new Date().getTime() + countdown_minutes*60*1000 ); // calculate the javascript end time



// is rto available && not already accepted?
jQuery('document').ready(function(){
	if(!!rto_type() && !(check_promo_name() || check_prodname())){
		console.log('rto type exists and rto has not been accepted')
		var rtot = rto_type()[0].toLowerCase();
		// if rto has not seen yet, configure endtime
		rto_not_seen_yet() ? document.cookie = 'rto_cart_cookie=' + endtime : endtime = new Date(document.cookie.split('rto_cart_cookie=')[1].split(';')[0]);
		// choose rto html for first matched product in cart (S5DL || 24M || S5CD)
		rtohtml = /download/.test(rtot) ? rtodl : /totale/.test(rtot)? rtos : rtocd;
		// show the rto
		if(!rto_expired()){showRTO();}
	}
})


// what is the first rto product match in cart (S5DL || 24M || S5CD)?
// function rto_type(){return rs.pixp_name.match(/totale|download pto|consumer pto/i);}
function rto_type(){return rs.pixp_name.match(/totale.+24|s5\s*consumer|s5\s*v4.+download/i);}
// has the the rto already been seen?
function rto_not_seen_yet(){return !document.cookie.match(/rto_cart_cookie/i);}
// has the rto clock expired yet?
function rto_expired(){return (new Date()) > endtime;}
// choose correct promo code to apply
function promo_to_apply(){
	var promomap = {
	  249: '10PROMO_49',
	  229: '10PROMO_29',
	  219: '10PROMO_19',
	  209: '10PROMO_09'
	}

	rs.pixp_name.split(',').every(function(p, i) {
	  if (p.match(/s5\s*consumer/i)) {
	  	promo = 'Headset15';
	  	return false;
	  }
	  if (p.match(/totale.+24/i)) {
	  	promo = 'free1m';
	  	return false;
	 	}
	  if (p.match(/s5\s*v4.+download/i)) {
	    promo = '10PROMO';
	    // needs revision for multiple products
	    promo = promomap[rs.pixp_price.split(',')[i].split('.')[0]] || promomap[209];
	    return false;
	  }
	  return true;
	})
	return promo;
}


// rto promo code already in cart?
function check_promo_name(){
	if(!!jQuery('.couponlabel')[0]){ // if desktop, check the desktop layout for promo codes
		for(var i=0; i < jQuery('.couponlabel').length; i++){
			if(!!jQuery('.couponlabel')[i].innerHTML.match(/Headset15|10PROMO_09|10PROMO_19|10PROMO_29|10PROMO_49|free1m/i)){return true}
		}
	}
	else if(!!jQuery('#promoapplied')[0]){ // if mobile, check the mobile layout for promo codes
		if(!!jQuery('#promoapplied')[0].innerHTML.match(/Headset15|10PROMO_09|10PROMO_19|10PROMO_29|10PROMO_49|free1m/i)){return true}
	}
	return false;
}


// rto product name already in cart?
function check_prodname(){
	for(var i=0; i < jQuery('.prodname').length; i++){
		if(!!jQuery('.prodname')[i].innerHTML.match(/headset|brains/i)){return true}
	}
	return false;
}





function showRTO(){
	// create a container for the rto and put the right html in there
	var rtocontainer = document.createElement('div');
	rtocontainer.innerHTML = rtohtml;

	// show the rto at the beginning of the body
	document.body.insertBefore(rtocontainer, document.body.firstChild);

	// this function updates the clock
	function setClock(){
		var timeleft = new Date( endtime - (new Date()) ); // remaining time is end time minus current time
		// update the values in the clock
		yb.id('clockseconds').innerHTML = timeleft.getSeconds() < 10 ? "0" + timeleft.getSeconds() : timeleft.getSeconds();
		yb.id('clockminutes').innerHTML = timeleft.getMinutes() < 10 ? "0" + timeleft.getMinutes() : timeleft.getMinutes();
		// when time runs out, stop the rto
		if(Math.floor(timeleft/1000)<=0){stopRTO();}
	}

	setClock(); // start the clock
	var clockinterval = setInterval(setClock,50); // keep the clock running


	// this function stops the clock and hides the rto
	function stopRTO(){
		clearInterval(clockinterval); // stop the clock
		yb.id('rto').style.display = 'none'; // hide the rto
	}

	// when user clicks rto button, hide rto and apply promo
	yb.id('rtobutton').onclick = function(){
		stopRTO(); // stop the rto
		if (promo_to_apply() == "free1m") {
			window.location.href = 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/98392/?pc=free1m';
		}else{
			jQuery.ajax({
	      url: 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/verifyPromo/',
	      method: 'POST',
	      data: {coupon_code: promo_to_apply()}
	    }).done(function(data) {
	        window.location.reload()
	    })
  	}
	}


		// this section toggles the rto by sliding it to the side
		var rto_showing = true;

		yb.id('rto_showhide').onclick = function(){
			if(rto_showing){
				rto_showing = false;
				yb.id('rto_show_button').style.bottom = '90px';
				yb.id('rto_show_button').style.display = 'block';
				yb.id('rto_hide_button').style.display = 'none';
				yb.id('rto').style.display = 'none';
			}
			else{
				rto_showing = true;
				yb.id('rto_hide_button').style.display = 'block';
				yb.id('rto_show_button').style.display = 'none';
				yb.id('rto').style.display = 'none';
			}
		};
}
</script>