<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">Teachers</h4>
<span class="detail">How many teachers would use SmartMusic?</span>
<div class="col-sm-12">
<div id="teachSlider"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Students</h4>
<span class="detail">How many students would use it?</span>
<div class="col-sm-12">
<div id="playSlider"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Play+</h4>
<span class="detail">How many students would you like to upgrade to Play+?</span>
<div class="col-sm-12">
<div id="plusSlider"></div>
<input name="sliderVal" type="hidden" id="teachSliderVal" value='teachSliderVal' readonly="readonly" />
<input name="month" type="hidden" id="playSliderVal" value='playSliderVal' readonly="readonly" />
<input name="term" type="hidden" id="plusSliderVal" value='plusSliderVal' readonly="readonly" />
</div>
</div>
</div>
<div class="col-sm-6">
<div class="price-form">
<div class="form-group">
<div class="row">
<div class="sum col-sm-6">
<label for="amount" class="control-label">teacher connections</label>
</div>
<div class="col-sm-3">
<input type="hidden" id="amount" class="form-control">
<!-- <p class="price lead" id="teachTotal"></p> -->
<input class="price lead" name="teachPrice" type="text" id="teachTotal" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="sum col-sm-6">
<label for="amount" class="control-label">student connections</label>
</div>
<div class="col-sm-3">
<input type="hidden" id="amount" class="form-control">
<!-- <p class="price lead" id="playTotal"></p> -->
<input class="price lead" name="playPrice" type="text" id="playTotal" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="sum col-sm-6">
<label for="amount" class="control-label">play+ student upgrades</label>
</div>
<div class="col-sm-3">
<input type="hidden" id="amount" class="form-control">
<!-- <p class="price lead" id="plusTotal"></p> -->
<input class="price lead" name="plusPrice" type="text" id="plusTotal" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="sum col-sm-6">
<label for="amount" class="control-label">Total Estimated Cost</label>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount" class="form-control">
<!-- <p class="price lead" id="totalCost"></p> -->
<input class="price lead" name="totalCost" type="text" id="totalCost" 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-lg btn-block" style="background-color:#ea7200; color:#ffffff">Contact Sales</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: #bdbbbb;
padding: 40px 15px;
/*width: 500px;*/
}
.detail {
font-family: 'Lato', Arial, sans-serif;
font-size: 80px;
padding-left: 10px;
}
.ui-widget-content {
border: 1px solid #bdbbbb;
background: #bdbbbb;
color: #d9d6d4;
margin-top: 4px;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 7.2em;
height: 2.7em;
cursor: default;
margin: 0 -50px auto !important;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-weight: 200;
font-family: "Lato",Arial,sans-serif;
font-size: 12px;
}
.ui-slider .ui-slider-handle .glyphicon {
color: #FFFFFF;
margin: 0 1px;
font-weight: 200;
font-size: 11px;
}
.ui-corner-all {
}
.ui-slider-horizontal .ui-slider-handle {
top: -.9em;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
background: #898889;
}
.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-family: 'Lato',Arial, sans-serif
font-weight: 200;
font-size: 24px;
display: inline-block;
line-height: 60px;
border:0;
width: 245px;
}
h4.great {
background: #ea7200;
margin: 0 0 25px -60px;
padding: 7px 15px;
color: #ffffff;
font-size: 20px;
font-family: "Lato",Arial,sans-serif;
font-weight: 200;
display: inline-block;
}
.total {
/*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: 18px;
}
.form-pricing {
background: #ffffff;
padding: 20px;
min-height: 500px;
}
.price-form {
background: #ffffff;
margin-bottom: 10px;
padding: 20px;
min-height: 500px;
}
.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-family: 'Lato',Arial,sans-serif;
font-weight: 200;
font-size: 20px;
font-color: #898889;
padding-top: 20px;
}
.price-form .total {
font-family: 'Lato',Arial,sans-serif;
font-weight: 200;
font-size: 18px;
font-color: #898889;
padding-top: 20px;
}
.ui-slider-range-min {
background: #898889;
}
.btn {
border-radius: 0;
font-weight: 200;
font-family: "Lato",Arial,sans-serif;
font-size: 22px;
font-color: #898889;
}
/* HR */
hr.style {
margin-top: 0px;
border: 0;
border-bottom: 3px solid #bdbbbb;
background: #999;
}
// JavaScript Document
var t = {
0: "1",
1: "3",
2: "6",
3: "9",
4: "12",
5: "15",
6: "18",
7: "21",
8: "24",
9: "27",
10: "30",
11: "33",
12: "36",
13: "39",
14: "42",
15: "45",
16: "48",
17: "51",
18: "54",
19: "57",
20: "60",
21: "63",
22: "66",
23: "69",
24: "72",
25: "75",
26: "78",
27: "81",
28: "84",
29: "87",
30: "90",
31: "93",
32: "96",
33: "99",
34: "102",
35: "105",
36: "108",
37: "111",
38: "114",
39: "117",
40: "120",
41: "123",
42: "126",
43: "129",
44: "132",
45: "135",
46: "138",
47: "141",
48: "144",
49: "147",
50: "150",
51: "153",
52: "156",
53: "159",
54: "162",
55: "165",
56: "168",
57: "171",
58: "174",
59: "177",
60: "180",
61: "183",
62: "186",
63: "189",
64: "192",
65: "195",
66: "198",
67: "201",
68: "204",
69: "207",
70: "210",
71: "213",
72: "216",
73: "219",
74: "222",
75: "225",
76: "228",
77: "231",
78: "234",
79: "237",
80: "240",
81: "243",
82: "246",
83: "249",
84: "252",
85: "255",
86: "258",
87: "261",
88: "264",
89: "267",
90: "270",
91: "273",
92: "276",
93: "279",
94: "282",
95: "285",
96: "288",
97: "291",
98: "294",
99: "297",
100: "300",
};
var tc = {
0: "399",
1: "519",
2: "639",
3: "759",
4: "879",
5: "999",
6: "1119",
7: "1239",
8: "1359",
9: "1479",
10: "1599",
11: "1719",
12: "1839",
13: "1959",
14: "2079",
15: "2199",
16: "2319",
17: "2439",
18: "2559",
19: "2679",
20: "2799",
21: "2919",
22: "3039",
23: "3159",
24: "3279",
25: "3399",
26: "3519",
27: "3639",
28: "3759",
29: "3879",
30: "3999",
31: "4119",
32: "4239",
33: "4359",
34: "4479",
35: "4599",
36: "4719",
37: "4839",
38: "4959",
39: "5079",
40: "5199",
41: "5319",
42: "5439",
43: "5559",
44: "5679",
45: "5799",
46: "5919",
47: "6039",
48: "6159",
49: "6279",
50: "6399",
51: "6519",
52: "6639",
53: "6759",
54: "6879",
55: "6999",
56: "7119",
57: "7239",
58: "7359",
59: "7479",
60: "7599",
61: "7719",
62: "7839",
63: "7959",
64: "8079",
65: "8199",
66: "8319",
67: "8439",
68: "8559",
69: "8679",
70: "8799",
71: "8919",
72: "9039",
73: "9159",
74: "9279",
75: "9399",
76: "9519",
77: "9639",
78: "9759",
79: "9879",
80: "9999",
81: "10119",
82: "10239",
83: "10359",
84: "10479",
85: "10599",
86: "10719",
87: "10839",
88: "10959",
89: "11079",
90: "11199",
91: "11319",
92: "11439",
93: "11559",
94: "11679",
95: "11799",
96: "11919",
97: "12039",
98: "12159",
99: "12279",
100: "12399",
}
var s = {
0: "1",
1: "5",
2: "10",
3: "15",
4: "20",
5: "25",
6: "30",
7: "35",
8: "40",
9: "45",
10: "50",
11: "55",
12: "60",
13: "65",
14: "70",
15: "75",
16: "80",
17: "85",
18: "90",
19: "95",
20: "100",
21: "105",
22: "110",
23: "115",
24: "120",
25: "125",
26: "130",
27: "135",
28: "140",
29: "145",
30: "150",
31: "155",
32: "160",
33: "165",
34: "170",
35: "175",
36: "180",
37: "185",
38: "190",
39: "195",
40: "200",
41: "205",
42: "210",
43: "215",
44: "220",
45: "225",
46: "230",
47: "235",
48: "240",
49: "245",
50: "250",
51: "255",
52: "260",
53: "265",
54: "270",
55: "275",
56: "280",
57: "285",
58: "290",
59: "295",
60: "300",
61: "305",
62: "310",
63: "315",
64: "320",
65: "325",
66: "330",
67: "335",
68: "340",
69: "345",
70: "350",
71: "355",
72: "360",
73: "365",
74: "370",
75: "375",
76: "380",
77: "385",
78: "390",
79: "395",
80: "400",
81: "405",
82: "410",
83: "415",
84: "420",
85: "425",
86: "430",
87: "435",
88: "440",
89: "445",
90: "450",
91: "455",
92: "460",
93: "465",
94: "470",
95: "475",
96: "480",
97: "485",
98: "490",
99: "495",
100: "500",
101: "505",
102: "510",
103: "515",
104: "520",
105: "525",
106: "530",
107: "535",
108: "540",
109: "545",
110: "550",
111: "555",
112: "560",
113: "565",
114: "570",
115: "575",
116: "580",
117: "585",
118: "590",
119: "595",
120: "600",
121: "605",
122: "610",
123: "615",
124: "620",
125: "625",
126: "630",
127: "635",
128: "640",
129: "645",
130: "650",
131: "655",
132: "660",
133: "665",
134: "670",
135: "675",
136: "680",
137: "685",
138: "690",
139: "695",
140: "700",
141: "705",
142: "710",
143: "715",
144: "720",
145: "725",
146: "730",
147: "735",
148: "740",
149: "745",
150: "750",
151: "755",
152: "760",
153: "765",
154: "770",
155: "775",
156: "780",
157: "785",
158: "790",
159: "795",
160: "800",
161: "805",
162: "810",
163: "815",
164: "820",
165: "825",
166: "830",
167: "835",
168: "840",
169: "845",
170: "850",
171: "855",
172: "860",
173: "865",
174: "870",
175: "875",
176: "880",
177: "885",
178: "890",
179: "895",
180: "900",
181: "905",
182: "910",
183: "915",
184: "920",
185: "925",
186: "930",
187: "935",
188: "940",
189: "945",
190: "950",
191: "955",
192: "960",
193: "965",
194: "970",
195: "975",
196: "980",
197: "985",
198: "990",
199: "995",
200: "1000",
};
var sc = {
0: "0",
1: "0",
2: "0",
3: "0",
4: "0",
5: "0",
6: "0",
7: "0",
8: "0",
9: "0",
10: "0",
11: "40",
12: "80",
13: "120",
14: "160",
15: "200",
16: "240",
17: "280",
18: "320",
19: "360",
20: "400",
21: "440",
22: "480",
23: "520",
24: "560",
25: "600",
26: "640",
27: "680",
28: "720",
29: "760",
30: "800",
31: "840",
32: "880",
33: "920",
34: "960",
35: "1000",
36: "1040",
37: "1080",
38: "1120",
39: "1160",
40: "1200",
41: "1240",
42: "1280",
43: "1320",
44: "1360",
45: "1400",
46: "1440",
47: "1480",
48: "1520",
49: "1560",
50: "1600",
51: "1640",
52: "1680",
53: "1720",
54: "1760",
55: "1800",
56: "1840",
57: "1880",
58: "1920",
59: "1960",
60: "2000",
61: "2040",
62: "2080",
63: "2120",
64: "2160",
65: "2200",
66: "2240",
67: "2280",
68: "2320",
69: "2360",
70: "2400",
71: "2440",
72: "2480",
73: "2520",
74: "2560",
75: "2600",
76: "2640",
77: "2680",
78: "2720",
79: "2760",
80: "2800",
81: "2840",
82: "2880",
83: "2920",
84: "2960",
85: "3000",
86: "3040",
87: "3080",
88: "3120",
89: "3160",
90: "3200",
91: "3240",
92: "3280",
93: "3320",
94: "3360",
95: "3400",
96: "3440",
97: "3480",
98: "3520",
99: "3560",
100: "3600",
101: "3640",
102: "3680",
103: "3720",
104: "3760",
105: "3800",
106: "3840",
107: "3880",
108: "3920",
109: "3960",
110: "4000",
111: "4040",
112: "4080",
113: "4120",
114: "4160",
115: "4200",
116: "4240",
117: "4280",
118: "4320",
119: "4360",
120: "4400",
121: "4440",
122: "4480",
123: "4520",
124: "4560",
125: "4600",
126: "4640",
127: "4680",
128: "4720",
129: "4760",
130: "4800",
131: "4840",
132: "4880",
133: "4920",
134: "4960",
135: "5000",
136: "5040",
137: "5080",
138: "5120",
139: "5160",
140: "5200",
141: "5240",
142: "5280",
143: "5320",
144: "5360",
145: "5400",
146: "5440",
147: "5480",
148: "5520",
149: "5560",
150: "5600",
151: "5640",
152: "5680",
153: "5720",
154: "5760",
155: "5800",
156: "5840",
157: "5880",
158: "5920",
159: "5960",
160: "6000",
161: "6040",
162: "6080",
163: "6120",
164: "6160",
165: "6200",
166: "6240",
167: "6280",
168: "6320",
169: "6360",
170: "6400",
171: "6440",
172: "6480",
173: "6520",
174: "6560",
175: "6600",
176: "6640",
177: "6680",
178: "6720",
179: "6760",
180: "6800",
181: "6840",
182: "6880",
183: "6920",
184: "6960",
185: "7000",
186: "7040",
187: "7080",
188: "7120",
189: "7160",
190: "7200",
191: "7240",
192: "7280",
193: "7320",
194: "7360",
195: "7400",
196: "7440",
197: "7480",
198: "7520",
199: "7560",
200: "7600",
}
var p = {
0: "0",
1: "5",
2: "10",
3: "15",
4: "20",
5: "25",
6: "30",
7: "35",
8: "40",
9: "45",
10: "50",
11: "55",
12: "60",
13: "65",
14: "70",
15: "75",
16: "80",
17: "85",
18: "90",
19: "95",
20: "100",
21: "105",
22: "110",
23: "115",
24: "120",
25: "125",
26: "130",
27: "135",
28: "140",
29: "145",
30: "150",
31: "155",
32: "160",
33: "165",
34: "170",
35: "175",
36: "180",
37: "185",
38: "190",
39: "195",
40: "200",
41: "205",
42: "210",
43: "215",
44: "220",
45: "225",
46: "230",
47: "235",
48: "240",
49: "245",
50: "250",
51: "255",
52: "260",
53: "265",
54: "270",
55: "275",
56: "280",
57: "285",
58: "290",
59: "295",
60: "300",
61: "305",
62: "310",
63: "315",
64: "320",
65: "325",
66: "330",
67: "335",
68: "340",
69: "345",
70: "350",
71: "355",
72: "360",
73: "365",
74: "370",
75: "375",
76: "380",
77: "385",
78: "390",
79: "395",
80: "400",
81: "405",
82: "410",
83: "415",
84: "420",
85: "425",
86: "430",
87: "435",
88: "440",
89: "445",
90: "450",
91: "455",
92: "460",
93: "465",
94: "470",
95: "475",
96: "480",
97: "485",
98: "490",
99: "495",
100: "500",
101: "505",
102: "510",
103: "515",
104: "520",
105: "525",
106: "530",
107: "535",
108: "540",
109: "545",
110: "550",
111: "555",
112: "560",
113: "565",
114: "570",
115: "575",
116: "580",
117: "585",
118: "590",
119: "595",
120: "600",
121: "605",
122: "610",
123: "615",
124: "620",
125: "625",
126: "630",
127: "635",
128: "640",
129: "645",
130: "650",
131: "655",
132: "660",
133: "665",
134: "670",
135: "675",
136: "680",
137: "685",
138: "690",
139: "695",
140: "700",
141: "705",
142: "710",
143: "715",
144: "720",
145: "725",
146: "730",
147: "735",
148: "740",
149: "745",
150: "750",
151: "755",
152: "760",
153: "765",
154: "770",
155: "775",
156: "780",
157: "785",
158: "790",
159: "795",
160: "800",
161: "805",
162: "810",
163: "815",
164: "820",
165: "825",
166: "830",
167: "835",
168: "840",
169: "845",
170: "850",
171: "855",
172: "860",
173: "865",
174: "870",
175: "875",
176: "880",
177: "885",
178: "890",
179: "895",
180: "900",
181: "905",
182: "910",
183: "915",
184: "920",
185: "925",
186: "930",
187: "935",
188: "940",
189: "945",
190: "950",
191: "955",
192: "960",
193: "965",
194: "970",
195: "975",
196: "980",
197: "985",
198: "990",
199: "995",
200: "1000",
};
var pc = {
0: "0",
1: "100",
2: "200",
3: "300",
4: "400",
5: "500",
6: "600",
7: "700",
8: "800",
9: "900",
10: "1000",
11: "1100",
12: "1200",
13: "1300",
14: "1400",
15: "1500",
16: "1600",
17: "1700",
18: "1800",
19: "1900",
20: "2000",
21: "2100",
22: "2200",
23: "2300",
24: "2400",
25: "2500",
26: "2600",
27: "2700",
28: "2800",
29: "2900",
30: "3000",
31: "3100",
32: "3200",
33: "3300",
34: "3400",
35: "3500",
36: "3600",
37: "3700",
38: "3800",
39: "3900",
40: "4000",
41: "4100",
42: "4200",
43: "4300",
44: "4400",
45: "4500",
46: "4600",
47: "4700",
48: "4800",
49: "4900",
50: "5000",
51: "5100",
52: "5200",
53: "5300",
54: "5400",
55: "5500",
56: "5600",
57: "5700",
58: "5800",
59: "5900",
60: "6000",
61: "6100",
62: "6200",
63: "6300",
64: "6400",
65: "6500",
66: "6600",
67: "6700",
68: "6800",
69: "6900",
70: "7000",
71: "7100",
72: "7200",
73: "7300",
74: "7400",
75: "7500",
76: "7600",
77: "7700",
78: "7800",
79: "7900",
80: "8000",
81: "8100",
82: "8200",
83: "8300",
84: "8400",
85: "8500",
86: "8600",
87: "8700",
88: "8800",
89: "8900",
90: "9000",
91: "9100",
92: "9200",
93: "9300",
94: "9400",
95: "9500",
96: "9600",
97: "9700",
98: "9800",
99: "9900",
100: "10000",
101: "10100",
102: "10200",
103: "10300",
104: "10400",
105: "10500",
106: "10600",
107: "10700",
108: "10800",
109: "10900",
110: "11000",
111: "11100",
112: "11200",
113: "11300",
114: "11400",
115: "11500",
116: "11600",
117: "11700",
118: "11800",
119: "11900",
120: "12000",
121: "12100",
122: "12200",
123: "12300",
124: "12400",
125: "12500",
126: "12600",
127: "12700",
128: "12800",
129: "12900",
130: "13000",
131: "13100",
132: "13200",
133: "13300",
134: "13400",
135: "13500",
136: "13600",
137: "13700",
138: "13800",
139: "13900",
140: "14000",
141: "14100",
142: "14200",
143: "14300",
144: "14400",
145: "14500",
146: "14600",
147: "14700",
148: "14800",
149: "14900",
150: "15000",
151: "15100",
152: "15200",
153: "15300",
154: "15400",
155: "15500",
156: "15600",
157: "15700",
158: "15800",
159: "15900",
160: "16000",
161: "16100",
162: "16200",
163: "16300",
164: "16400",
165: "16500",
166: "16600",
167: "16700",
168: "16800",
169: "16900",
170: "17000",
171: "17100",
172: "17200",
173: "17300",
174: "17400",
175: "17500",
176: "17600",
177: "17700",
178: "17800",
179: "17900",
180: "18000",
181: "18100",
182: "18200",
183: "18300",
184: "18400",
185: "18500",
186: "18600",
187: "18700",
188: "18800",
189: "18900",
190: "19000",
191: "19100",
192: "19200",
193: "19300",
194: "19400",
195: "19500",
196: "19600",
197: "19700",
198: "19800",
199: "19900",
200: "$20,000.00",
}
$(document).ready(function() {
$("#teachTotal").val("$" + "399.00");
$("#teachSlider").slider({
range: "min",
animate: true,
min: 0,
max: 100,
step: 1,
slide:
function(event, ui)
{
updateTeach(1,ui.value); //changed
calculateTeach(ui.value);
}
});
$("#playSlider").slider({
range: "min",
animate: true,
min: 0,
max: 100,
step: 1,
slide:
function(event, ui)
{
updatePlay(1,ui.value); //changed
calculatePlay(ui.value);
}
});
$("#plusSlider").slider({
range: "min",
animate: true,
min: 0,
max: 100,
step: 1,
slide:
function(event, ui)
{
updatePlus(1,ui.value); //changed
calculatePlus(ui.value);
}
});
});
function updateTeach(slider,val) {
if(undefined === val) val = 0;
var amount = t[val];
$('#teachSliderVal').val(val);
$('#teachSlider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function updatePlay(slider,val) {
if(undefined === val) val = 0;
var amount = s[val];
$('#playSliderVal').val(val);
$('#playSlider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function updatePlus(slider,val) {
if(undefined === val) val = 0;
var amount = p[val];
$('#plusSliderVal').val(val);
$('#plusSlider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function calculateTeach(val){
if(undefined === val)
val = $('#teachSliderVal').val();
var totalPrice = tc[val]*1;
$("#teachTotal").val("$" + totalPrice.toFixed(2));
}
function calculatePlay(val){
if(undefined === val)
val = $('#playSliderVal').val();
var totalPrice = sc[val]*1;
$("#playTotal").val("$" + totalPrice.toFixed(2));
}
function calculatePlus(val){
if(undefined === val)
val = $('#plusSliderVal').val();
var totalPrice = pc[val]*1;
$("#plusTotal").val("$" + totalPrice.toFixed(2));
}
