document.write('<div id="price-calculator-gid11"></div>');
$(document).ready(function() {
	var content;
	content='';
	content+='<div class="card"><div class="card-header">';
	content+='<ul class="range-labels" id="range-labels-gid11">';
	content+='<li class="range-label-gid11" id="range-label-gid11-0" data-id="0" onclick="selectValgid11(0,\'gid11\')"><span class="range-notch"></span><br>Trial</li>';
	content+='<li class="range-label-gid11" id="range-label-gid11-1" data-id="1" onclick="selectValgid11(1,\'gid11\')"><span class="range-notch"></span><br>1</li>';
	content+='<li class="range-label-gid11" id="range-label-gid11-2" data-id="2" onclick="selectValgid11(2,\'gid11\')"><span class="range-notch"></span><br>2</li>';
	content+='<li class="range-label-gid11" id="range-label-gid11-3" data-id="3" onclick="selectValgid11(3,\'gid11\')"><span class="range-notch"></span><br>3</li>';
	content+='<li class="range-label-gid11" id="range-label-gid11-4" data-id="4" onclick="selectValgid11(4,\'gid11\')"><span class="range-notch"></span><br>4</li>';
	content+='<li class="range-label-gid11" id="range-label-gid11-5" data-id="5" onclick="selectValgid11(5,\'gid11\')"><span class="range-notch"></span><br>5</li>';
	content+='</ul>';
	content+='<div style="margin-top:-2.6rem;"></div>';
	content+='<input type="range" min="0" max="5" value="0" class="custom-range" list="tickmarks" id="range-gid11" oninput="showValgid11(this.value)" onchange="showValgid11(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-gid11"></h3></div><div class="col-3 card-text" id="showprice-gid11-1"></div><div class="col-3 card-text" id="showprice-gid11-2"></div></div></div></div>';

	document.getElementById('price-calculator-gid11').innerHTML = content;
	var margin = (document.getElementById('range-label-gid11-0').offsetWidth / 2);
	document.getElementById("range-labels-gid11").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';
	// so nice we do it twice
	var margin = (document.getElementById('range-label-gid11-0').offsetWidth / 2) - 8;
	document.getElementById("range-labels-gid11").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';
	showValgid11(0);
});
function selectValgid11(input,rand) {
	document.getElementById('range-'+rand).value = input;
	showValgid11(input);
}
function showValgid11(input) {
	var elements = document.querySelectorAll('.range-label-gid11');
	for (var i = 0; i < elements.length; i++) {
		elements[i].style.color = "#c7cbcf";
	}
	document.getElementById('range-label-gid11-'+ input).style.color = "#007bff";
	var products='{"0":{"id":349,"name":"Transcoder: Trial","configoption1":"1","displayname":"Trial","pricing":{"monthly":"-1.00"}},"1":{"id":317,"name":"Transcoder: 1 Encoder","configoption1":"1","displayname":"1","pricing":{"monthly":"6.99","annually":"69.90"}},"2":{"id":318,"name":"Transcoder: 2 Encoders","configoption1":"2","displayname":"2","pricing":{"monthly":"11.99","annually":"119.90"}},"3":{"id":319,"name":"Transcoder: 3 Encoders","configoption1":"3","displayname":"3","pricing":{"monthly":"16.99","annually":"169.90"}},"4":{"id":320,"name":"Transcoder: 4 Encoders","configoption1":"4","displayname":"4","pricing":{"monthly":"21.99","annually":"219.90"}},"5":{"id":321,"name":"Transcoder: 5 Encoders","configoption1":"5","displayname":"5","pricing":{"monthly":"26.99","annually":"269.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-gid11").innerHTML = product[input]['name']; 
	document.getElementById("showprice-gid11-1").innerHTML = monthly; 
	document.getElementById("showprice-gid11-2").innerHTML = annually; 
}