<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="price-box">
<div class="row">
<div class="col-sm-6">
<form class="form-horizontal form-pricing" role="form">
<div class="price-slider">
<h4 class="great">Streams per month</h4>
<span>(Minimum 1 million per month)</span>
<div class="col-sm-12">
<div id="slider_amirol1"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Current CTR</h4>
<span>(In percent)</span>
<div class="col-sm-12">
<div id="slider_amirol2"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Average CPM</h4>
<span>(In dollars)</span>
<div class="col-sm-12">
<div id="slider_amirol3"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Average Neon Lift</h4>
<span>(In percentage)</span>
<div class="col-sm-12">
<div id="slider_amirol4"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Approximate Sell-thru</h4>
<span>(In percent)</span>
<div class="col-sm-12">
<div id="slider_amirol5"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Average ad load per video</h4>
<span>(Number)</span>
<div class="btn-group btn-group-justified">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block month" id='.5' value='.5'>1 ad for 2 videos</button>
</div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block month active-month selected-month" id='1' value='1'>1 ad per video</button>
</div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block month" id='1.5' value='1.5'>3 ads per 2 videos</button>
</div>
</div>
</div>
<input name="ad_load" type="hidden" id="ad_load" value='1' readonly="readonly" />
<input name="sliderVal1" type="hidden" id="sliderVal1" value='0' readonly="readonly" />
<input name="sliderVal2" type="hidden" id="sliderVal2" value='.1' readonly="readonly" />
<input name="sliderVal3" type="hidden" id="sliderVal3" value='6' readonly="readonly" />
<input name="sliderVal4" type="hidden" id="sliderVal4" value='5' readonly="readonly" />
<input name="sliderVal5" type="hidden" id="sliderVal5" value='.5' readonly="readonly" />
</div>
<div class="col-sm-6">
<div class="price-form">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="amount_amirol" class="control-label">Net Increase in Clicks (#): </label>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<!-- <p class="price lead" id="total"></p> -->
<input class="price lead" name="netclicks" type="text" id="total" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="amount_amirol" class="control-label">Incremental Revenue ($): </label>
<span class="help-text">Per Month</span>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<!-- <p class="price lead" id="total12"></p> -->
<input class="price lead" name="totalprice12" type="text" id="total12" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="amount_amirol" class="control-label">Neon fee ($): </label>
<span class="help-text">Per Month</span>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<!-- <p class="price lead" id="total52"></p> -->
<input class="price lead" name="totalprice52" type="text" id="total52" disabled="disabled" style="" />
</div>
</div>
</div>
<div style="margin-top:30px"></div>
<hr class="style">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary btn-lg btn-block">Proceed <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
body {
padding-top: 60px;
}
.price-box {
margin: 0 auto;
background: #E9E9E9;
border-radius: 10px;
padding: 40px 15px;
/*width: 500px;*/
}
.ui-widget-content {
border: 1px solid #bdc3c7;
background: #e1e1e1;
color: #222222;
margin-top: 4px;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 7.2em;
height: 2.7em;
cursor: default;
margin: 0 -40px auto !important;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 12px;
}
.ui-slider .ui-slider-handle .glyphicon {
color: #FFFFFF;
margin: 0 1px;
font-size: 11px;
opacity: 0.7;
}
.ui-corner-all {
border-radius: 20px;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.9em;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
border: 1px solid #f9f9f9;
background: #3498db;
}
.ui-slider-horizontal .ui-slider-handle {
margin-left: -0.5em;
}
.ui-slider .ui-slider-handle {
cursor: pointer;
}
.ui-slider a,
.ui-slider a:focus {
cursor: pointer;
outline: none;
}
.price, .lead p {
font-weight: 600;
font-size: 32px;
display: inline-block;
line-height: 60px;
border:0;
width: 245px;
}
h4.great {
background: #00ac98;
margin: 0 0 25px -60px;
padding: 7px 15px;
color: #ffffff;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
display: inline-block;
-moz-box-shadow: 2px 4px 5px 0 #ccc;
-webkit-box-shadow: 2px 4px 5px 0 #ccc;
box-shadow: 2px 4px 5px 0 #ccc;
}
.total {
border-bottom: 1px solid #7f8c8d;
/*display: inline;
padding: 10px 5px;*/
position: relative;
padding-bottom: 20px;
}
.total:before {
content: "";
display: inline;
position: absolute;
left: 0;
bottom: 5px;
width: 100%;
height: 3px;
background: #7f8c8d;
opacity: 0.5;
}
.price-slider {
margin-bottom: 70px;
}
.price-slider span {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 13px;
}
.form-pricing {
background: #ffffff;
padding: 20px;
border-radius: 4px;
}
.price-form {
background: #ffffff;
margin-bottom: 10px;
padding: 20px;
border: 1px solid #eeeeee;
min-height: 520px;
border-radius: 4px;
/*-moz-box-shadow: 0 5px 5px 0 #ccc;
-webkit-box-shadow: 0 5px 5px 0 #ccc;
box-shadow: 0 5px 5px 0 #ccc;*/
}
.form-group {
margin-bottom: 0;
}
.form-group span.price {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 14px;
}
.help-text {
display: block;
margin-top: -10px;
margin-bottom: 10px;
color: #737373;
/*position: absolute;*/
/*margin-left: 20px;*/
font-weight: 200;
/*text-align: right;*/
width: 188px;
}
.price-form label {
font-weight: 200;
font-size: 21px;
}
img.payment {
display: block;
margin-left: auto;
margin-right: auto
}
.ui-slider-range-min {
background: #2980b9;
}
.active-month,
.active-term {
background: #3276b1;
}
/* HR */
hr.style {
margin-top: 0;
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
// JavaScript Document
var s = {
0: "1MM",
1: "2MM",
2: "3MM",
3: "4MM",
4: "5MM",
5: "6MM",
6: "7MM",
7: "8MM",
8: "9MM",
9: "10MM",
10: "11MM",
11: "12MM",
12: "13MM",
13: "14MM",
14: "15MM",
15: "16MM",
16: "17MM",
17: "18MM",
18: "19MM",
19: "20MM",
20: "21MM",
21: "22MM",
22: "23MM",
23: "24MM",
24: "25MM",
25: "26MM",
26: "27MM",
27: "28MM",
28: "29MM",
29: "30MM",
30: "31MM",
31: "32MM",
32: "33MM",
};
var c = {
0: "0.10%",
1: "0.15%",
2: "0.20%",
3: "0.25%",
4: "0.30%",
5: "0.35%",
6: "0.40%",
7: "0.45%",
8: "0.50%",
9: "0.55%",
10: "0.60%",
11: "0.65%",
12: "0.70%",
13: "0.75%",
14: "0.80%",
15: "0.85%",
16: "0.90%",
17: "0.95%",
18: "1.00%",
19: "1.05%",
20: "1.10%",
21: "1.15%",
22: "1.20%",
23: "1.25%",
24: "1.30%",
25: "1.35%",
26: "1.40%",
27: "1.45%",
28: "1.50%",
};
var d = {
0: "$6",
1: "$7",
2: "$8",
3: "$9",
4: "$10",
5: "$11",
6: "$12",
7: "$13",
8: "$14",
9: "$15",
10: "$16",
11: "$17",
12: "$18",
13: "$19",
14: "$20",
15: "$21",
16: "$22",
17: "$23",
18: "$24",
19: "$25",
20: "$26",
21: "$27",
22: "$28",
23: "$29",
24: "$30",
25: "$31",
26: "$32",
27: "$33",
28: "$34",
};
var l = {
0: "5%",
1: "6%",
2: "7%",
3: "8%",
4: "9%",
5: "10%",
6: "11%",
7: "12%",
8: "13%",
9: "14%",
10: "15%",
11: "17%",
12: "17%",
13: "18%",
14: "19%",
15: "20%",
16: "21%",
17: "22%",
18: "23%",
19: "24%",
20: "25%",
21: "26%",
22: "27%",
23: "28%",
24: "29%",
25: "30%",
};
var st = {
0: "50%",
1: "55%",
2: "60%",
3: "65%",
4: "70%",
5: "75%",
6: "80%",
7: "85%",
8: "90%",
9: "95%",
10: "100%",
};
$(document).ready(function() {
$('.month').on('click',function(event) {
var id = $(this).attr('id');
$('.month').removeClass('selected-month');
$(this).addClass('selected-month');
$(".month").removeClass("active-month");
$(this).addClass("active-month");
$('#ad_load').val(id);
calcualtePrice()
});
$("#slider_amirol1").slider({
range: "min",
animate: true,
min: 0,
max: 32,
step: 1,
slide:
function(event, ui)
{
update1(1,ui.value); //changed
calcualtePrice(ui.value);
}
});
$("#slider_amirol2").slider({
range: "min",
animate: true,
min: 0,
max: 28,
step: 1,
slide:
function(event, ui)
{
update2(1,ui.value); //changed
calcualtePrice(ui.value);
}
});
$("#slider_amirol3").slider({
range: "min",
animate: true,
min: 0,
max: 28,
step: 1,
slide:
function(event, ui)
{
update3(1,ui.value); //changed
calcualtePrice(ui.value);
}
});
$("#slider_amirol4").slider({
range: "min",
animate: true,
min: 0,
max: 25,
step: 1,
slide:
function(event, ui)
{
update4(1,ui.value); //changed
calcualtePrice(ui.value);
}
});
$("#slider_amirol5").slider({
range: "min",
animate: true,
min: 0,
max: 10,
step: 1,
slide:
function(event, ui)
{
update5(1,ui.value); //changed
calcualtePrice(ui.value);
}
});
update1();
update2();
update3();
update4();
update5();
calcualtePrice();
});
function update1(slider,val) {
if(undefined === val) val = 0;
var amount = s[val];
console.log(amount);
$('#sliderVal1').val(val);
$('#slider_amirol1 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function update2(slider,val) {
if(undefined === val) val = 0;
var amount = c[val];
$('#sliderVal2').val(val);
$('#slider_amirol2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function update3(slider,val) {
if(undefined === val) val = 0;
var amount = d[val];
$('#sliderVal3').val(val);
$('#slider_amirol3 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function update4(slider,val) {
if(undefined === val) val = 0;
var amount = l[val];
$('#sliderVal4').val(val);
$('#slider_amirol4 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function update5(slider,val) {
if(undefined === val) val = 0;
var amount = st[val];
$('#sliderVal5').val(val);
$('#slider_amirol5 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function calcualtePrice(val){
if(undefined === val)
val = $('#sliderVal1').val();
var streams = $('#sliderVal1').val();
streams = (Math.floor(streams) + 1) * 1000000;
var ctr = $('#sliderVal2').val();
ctr = (Math.floor(ctr)*.05) + .1;
var inferred_views = streams / ctr;
var neon_serves = .99;
var default_serves = .01;
var default_tracked_views = default_serves * inferred_views;
var neon_tracked_views = neon_serves * inferred_views;
var lift = $('#sliderVal4').val();
var liftnum = 1 + (Math.floor(lift) + 5) / 100;
var neonCTR = ctr * liftnum;
var tracked_default_clicks = default_tracked_views * ctr;
var tracked_neon_clicks = neon_tracked_views * neonCTR;
var inferred_default_clicks = (default_tracked_views + neon_tracked_views) * ctr;
var inferred_neon_clicks = (default_tracked_views + neon_tracked_views) * neonCTR;
var inferred_incremental_clicks = inferred_neon_clicks - inferred_default_clicks;
var actual_inc_clicks = tracked_neon_clicks - (inferred_default_clicks - tracked_default_clicks);
var cpc = .005;
var neon_price = actual_inc_clicks * cpc;
var tmp_ad_load = parseFloat($('#ad_load').val());
var tmp_cpm = parseFloat($('#sliderVal3').val()) + 6;
var tmp_sellthru = (parseFloat($('#sliderVal5').val()) /20) + .5;
var est_new_rev = actual_inc_clicks * (tmp_cpm / 1000) * tmp_sellthru * tmp_ad_load;
console.log('streams: ' + streams + ', inc_clicks: ' + actual_inc_clicks + ', tmp_cpm: ' + tmp_cpm + ', tmp_sellthru' + tmp_sellthru + ', est_new_rev: ' + est_new_rev);
var totalPrice = 100000;
//$("#total").val(parseInt(actual_inc_clicks));
$("#total").val(numberWithCommas(parseInt(actual_inc_clicks)));
$("#total12").val(numberWithCommas(Math.round(est_new_rev).toFixed(2)));
$("#total52").val(numberWithCommas(Math.round(neon_price).toFixed(2)));
}
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
