document.write('<div id="price-calculator-gid6"></div>');
$(document).ready(function() {
	var content;
	content='';
	content+='<div class="card"><div class="card-header">';
	content+='<ul class="range-labels" id="range-labels-gid6">';
	content+='<li class="range-label-gid6" id="range-label-gid6-0" data-id="0" onclick="selectValgid6(0,\'gid6\')"><span class="range-notch"></span><br>Trial</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-1" data-id="1" onclick="selectValgid6(1,\'gid6\')"><span class="range-notch"></span><br>256 MB</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-2" data-id="2" onclick="selectValgid6(2,\'gid6\')"><span class="range-notch"></span><br>500 MB</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-3" data-id="3" onclick="selectValgid6(3,\'gid6\')"><span class="range-notch"></span><br>1 GB</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-4" data-id="4" onclick="selectValgid6(4,\'gid6\')"><span class="range-notch"></span><br>5 GB</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-5" data-id="5" onclick="selectValgid6(5,\'gid6\')"><span class="range-notch"></span><br>10 GB</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-6" data-id="6" onclick="selectValgid6(6,\'gid6\')"><span class="range-notch"></span><br>15 GB</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-7" data-id="7" onclick="selectValgid6(7,\'gid6\')"><span class="range-notch"></span><br>20 GB</li>';
	content+='<li class="range-label-gid6" id="range-label-gid6-8" data-id="8" onclick="selectValgid6(8,\'gid6\')"><span class="range-notch"></span><br>30 GB</li>';
	content+='</ul>';
	content+='<div style="margin-top:-2.6rem;"></div>';
	content+='<input type="range" min="0" max="8" value="0" class="custom-range" list="tickmarks" id="range-gid6" oninput="showValgid6(this.value)" onchange="showValgid6(this.value)">';
	content+='<div style="height:18px;"></div>';
	content+='</div><div class="card-body"><div class="row"><div class="col-6"><h3 class="card-title" id="showproduct-gid6"></h3></div><div class="col-3 card-text" id="showprice-gid6-1"></div><div class="col-3 card-text" id="showprice-gid6-2"></div></div></div></div>';

	document.getElementById('price-calculator-gid6').innerHTML = content;
	var margin = (document.getElementById('range-label-gid6-0').offsetWidth / 2);
	document.getElementById("range-labels-gid6").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';
	// so nice we do it twice
	var margin = (document.getElementById('range-label-gid6-0').offsetWidth / 2) - 8;
	document.getElementById("range-labels-gid6").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';
	showValgid6(0);
});
function selectValgid6(input,rand) {
	document.getElementById('range-'+rand).value = input;
	showValgid6(input);
}
function showValgid6(input) {
	var elements = document.querySelectorAll('.range-label-gid6');
	for (var i = 0; i < elements.length; i++) {
		elements[i].style.color = "#c7cbcf";
	}
	document.getElementById('range-label-gid6-'+ input).style.color = "#007bff";
	var products='{"0":{"id":218,"name":"AutoDJ: 14 Day Trial","configoption1":"150","displayname":"Trial","pricing":{"monthly":"0.00"}},"1":{"id":217,"name":"AutoDJ: 256MB ","configoption1":"256","displayname":"256 MB","pricing":{"monthly":"3.99","annually":"39.90"}},"2":{"id":211,"name":"AutoDJ: 500MB","configoption1":"500","displayname":"500 MB","pricing":{"monthly":"5.99","annually":"59.90"}},"3":{"id":212,"name":"AutoDJ: 1,000MB","configoption1":"1000","displayname":"1 GB","pricing":{"monthly":"6.99","annually":"69.90"}},"4":{"id":213,"name":"AutoDJ: 5,000MB","configoption1":"5000","displayname":"5 GB","pricing":{"monthly":"8.99","annually":"89.90"}},"5":{"id":214,"name":"AutoDJ: 10,000MB","configoption1":"10000","displayname":"10 GB","pricing":{"monthly":"11.99","annually":"119.90"}},"6":{"id":358,"name":"AutoDJ: 15,000MB","configoption1":"15000","displayname":"15 GB","pricing":{"monthly":"14.99","annually":"149.90"}},"7":{"id":215,"name":"AutoDJ: 20,000MB","configoption1":"20000","displayname":"20 GB","pricing":{"monthly":"16.99","annually":"169.90"}},"8":{"id":377,"name":"AutoDJ: 30,000MB","configoption1":"30000","displayname":"30 GB","pricing":{"monthly":"24.99","annually":"249.90"}}}';
	var product = JSON.parse(products); 
	if (product[input]['pricing']['annually'] > 0) {
		var annually = '<button data-pid="'+product[input]['id']+'" data-cycle="annually" class="btn btn-block btn-primary btn-add">&pound;'+product[input]['pricing']['annually']+'/year</button>';
	} else {
		var annually = '';
	}
	if (product[input]['pricing']['monthly'] > 0) {
		var monthly = '<button data-pid="'+product[input]['id']+'" data-cycle="monthly" class="btn btn-block btn-primary btn-add">&pound;'+product[input]['pricing']['monthly']+'/month</button>';
	} else {
		var monthly = '<button data-pid="'+product[input]['id']+'" data-cycle="monthly" class="btn btn-block btn-primary btn-add">FREE</button>';
	}
	if (annually === '') {
		annually = monthly;
		monthly = '';
	}
	document.getElementById("showproduct-gid6").innerHTML = product[input]['name']; 
	document.getElementById("showprice-gid6-1").innerHTML = monthly; 
	document.getElementById("showprice-gid6-2").innerHTML = annually; 
}