var listenersvalue = 0;
var bitratevalue = new Array(32,64,128);
var selectvalue = new Array();
document.write('<div class="card"><div class="card-header bg-dark text-white text-center"><strong>Value network - 99.9% uptime</strong></div>'+
'<div class="card-body"><h4>Listeners</h4><div id="range-label-listeners-value"></div></div>' +

'<div class="card-header"><h4>Bitrate (kbps)</h4>' +

'<ul class="range-labels" id="range-labels-br-value">'+
'<li class="range-label-br-value" id="range-label-br-value-0" onclick="selectbrvalue(0)"><span class="range-notch"></span><br>32k</li>'+
'<li class="range-label-br-value" id="range-label-br-value-1" onclick="selectbrvalue(1)"><span class="range-notch"></span><br>64k</li>'+
'<li class="range-label-br-value" id="range-label-br-value-2" onclick="selectbrvalue(2)"><span class="range-notch"></span><br>128k</li>'+
'</ul>'+
'<div style="margin-top:-2.6rem;"></div>'+
'<input type="range" min="0" max="2" value="2" class="custom-range" id="range-br-value" oninput="selectbrvalue(this.value)" onchange="selectbrvalue(this.value)">'+
'<div style="height:18px;"></div>'+
'</div>'+
'<div class="card-body"><div class="row"><div class="col-6"><h4 class="card-title" id="showproduct-value"></h4></div><div class="col-3 card-text" id="showprice-value-1"></div><div class="col-3 card-text" id="showprice-value-2"></div></div></div>'+
'</div>');
var margin = (document.getElementById('range-label-br-value-0').offsetWidth / 2)-5;
document.getElementById("range-labels-br-value").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';

$(document).ready(function() {
	selectbrvalue(2)
});
selectvalue[32] = '{"0":{"id":379,"0":379,"name":"25 listeners @ 32kbps","1":"Value Network (32kbps) - Listener Slots: 25","configoption1":"25","2":"25","pricing":{"monthly":"2.99","annually":"29.99"}},"1":{"id":380,"0":380,"name":"50 listeners @ 32kbps","1":"Value Network (32kbps) - Listener Slots: 50","configoption1":"50","2":"50","pricing":{"monthly":"3.79","annually":"37.99"}},"2":{"id":381,"0":381,"name":"100 listeners @ 32kbps","1":"Value Network (32kbps) - Listener Slots: 100","configoption1":"100","2":"100","pricing":{"monthly":"4.99","annually":"49.99"}},"3":{"id":382,"0":382,"name":"200 listeners @ 32kbps","1":"Value Network (32kbps) - Listener Slots: 200","configoption1":"200","2":"200","pricing":{"monthly":"7.49","annually":"74.99"}},"4":{"id":383,"0":383,"name":"400 listeners @ 32kbps","1":"Value Network (32kbps) - Listener Slots: 400","configoption1":"400","2":"400","pricing":{"monthly":"12.49","annually":"124.99"}},"5":{"id":384,"0":384,"name":"800 listeners @ 32kbps","1":"Value Network (32kbps) - Listener Slots: 800","configoption1":"800","2":"800","pricing":{"monthly":"22.49","annually":"224.99"}},"6":{"id":403,"0":403,"name":"1000 listeners @ 32kbps","1":"Value Network (32kbps) - Listener Slots: 1000","configoption1":"1000","2":"1000","pricing":{"monthly":"31.49","annually":"314.90"}}}'
selectvalue[64] = '{"0":{"id":385,"0":385,"name":"25 listeners @ 64kbps","1":"Value Network (64kbps) - Listener Slots: 25","configoption1":"25","2":"25","pricing":{"monthly":"3.79","annually":"37.99"}},"1":{"id":386,"0":386,"name":"50 listeners @ 64kbps","1":"Value Network (64kbps) - Listener Slots: 50","configoption1":"50","2":"50","pricing":{"monthly":"4.99","annually":"49.99"}},"2":{"id":387,"0":387,"name":"100 listeners @ 64kbps","1":"Value Network (64kbps) - Listener Slots: 100","configoption1":"100","2":"100","pricing":{"monthly":"7.49","annually":"74.99"}},"3":{"id":388,"0":388,"name":"200 listeners @ 64kbps","1":"Value Network (64kbps) - Listener Slots: 200","configoption1":"200","2":"200","pricing":{"monthly":"12.49","annually":"124.99"}},"4":{"id":389,"0":389,"name":"400 listeners @ 64kbps","1":"Value Network (64kbps) - Listener Slots: 400","configoption1":"400","2":"400","pricing":{"monthly":"22.49","annually":"224.99"}},"5":{"id":390,"0":390,"name":"800 listeners @ 64kbps","1":"Value Network (64kbps) - Listener Slots: 800","configoption1":"800","2":"800","pricing":{"monthly":"42.49","annually":"424.99"}},"6":{"id":404,"0":404,"name":"1000 listeners @ 64kbps","1":"Value Network (64kbps) - Listener Slots: 1000","configoption1":"1000","2":"1000","pricing":{"monthly":"47.24","annually":"472.40"}}}'
selectvalue[128] = '{"0":{"id":391,"0":391,"name":"25 listeners @ 128kbps","1":"Value Network (128kbps) - Listener Slots: 25","configoption1":"25","2":"25","pricing":{"monthly":"4.99","annually":"49.99"}},"1":{"id":392,"0":392,"name":"50 listeners @ 128kbps","1":"Value Network (128kbps) - Listener Slots: 50","configoption1":"50","2":"50","pricing":{"monthly":"7.49","annually":"74.99"}},"2":{"id":393,"0":393,"name":"100 listeners @ 128kbps","1":"Value Network (128kbps) - Listener Slots: 100","configoption1":"100","2":"100","pricing":{"monthly":"12.49","annually":"124.99"}},"3":{"id":394,"0":394,"name":"200 listeners @ 128kbps","1":"Value Network (128kbps) - Listener Slots: 200","configoption1":"200","2":"200","pricing":{"monthly":"22.49","annually":"224.99"}},"4":{"id":395,"0":395,"name":"400 listeners @ 128kbps","1":"Value Network (128kbps) - Listener Slots: 400","configoption1":"400","2":"400","pricing":{"monthly":"42.49","annually":"424.99"}},"5":{"id":396,"0":396,"name":"800 listeners @ 128kbps","1":"Value Network (128kbps) - Listener Slots: 800","configoption1":"800","2":"800","pricing":{"monthly":"82.49","annually":"824.99"}},"6":{"id":399,"0":399,"name":"1000 listeners @ 128kbps","1":"Value Network (128kbps) - Listener Slots: 1000","configoption1":"1000","2":"1000","pricing":{"monthly":"94.49","annually":"944.99"}}}'

function selectbrvalue(id) {
	document.getElementById('range-br-value').value = id;
	var elements = document.querySelectorAll('.range-label-br-value');
	for (var i = 0; i < elements.length; i++) {
		elements[i].style.color = "#c7cbcf";
	}
	document.getElementById('range-label-br-value-'+ id).style.color = "#007bff";
	var selected = JSON.parse(selectvalue[bitratevalue[id]]); 
	var options =  Object.keys(selected).length;
	var max =  Object.keys(selected).length-1;
	var rangehtml = '<ul class="range-labels" id="range-labels-listeners-value">';
	for (i = 0; i < options; i++) {
		rangehtml += '<li class="range-label-listeners-value" id="range-label-listeners-value-'+ i +'" onclick="selectplanvalue('+id+','+i+')"><span class="range-notch"></span><br>'+ selected[i]['configoption1'] +'</li>';
	} 
	rangehtml += '</ul>';
	rangehtml +=  '<div style="margin-top:-2.6rem;"></div>';
	rangehtml += '<input type="range" min="0" max="' + max + '" value="0" class="custom-range" id="range-listeners-value" oninput="selectplanvalue('+id+',this.value)" onchange="selectplanvalue('+id+',this.value)"><div style="height:18px;"></div>';
	document.getElementById('range-label-listeners-value').innerHTML = rangehtml;



	var margin = (document.getElementById('range-label-listeners-value-0').offsetWidth / 2);
	document.getElementById("range-labels-listeners-value").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';

	var margin = (document.getElementById('range-label-listeners-value-0').offsetWidth / 2)-8;
	document.getElementById("range-labels-listeners-value").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';

	var margin = (document.getElementById('range-label-br-value-0').offsetWidth / 2);
	document.getElementById("range-labels-br-value").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';

	var margin = (document.getElementById('range-label-br-value-0').offsetWidth / 2)-8;
	document.getElementById("range-labels-br-value").style.cssText = 'margin-left:-'+margin+'px;margin-right:-'+margin+'px;';

	selectplanvalue(id,listenersvalue);



}

function selectplanvalue(id,br) {
	document.getElementById('range-listeners-value').value = br;
	var elements = document.querySelectorAll('.range-label-listeners-value');
	for (var i = 0; i < elements.length; i++) {
		elements[i].style.color = "#c7cbcf";
	}
	document.getElementById('range-label-listeners-value-'+ br).style.color = "#007bff";
	var selected = JSON.parse(selectvalue[bitratevalue[id]]); 
	document.getElementById('showproduct-value').innerHTML = selected[br]['name'];
	if (selected[br]['pricing']['annually'] > 0) {
		var annually = '<button data-pid="'+selected[br]['id']+'" data-cycle="annually" class="btn btn-block btn-primary btn-add">&pound;'+selected[br]['pricing']['annually']+'/year</button>';
	} else {
		var annually = '';
	}
	if (selected[br]['pricing']['monthly'] > 0) {
		var monthly = '<button data-pid="'+selected[br]['id']+'" data-cycle="monthly" class="btn btn-block btn-primary btn-add">&pound;'+selected[br]['pricing']['monthly']+'/month</button>';
	} else {
		var monthly = '<button data-pid="'+selected[br]['id']+'" data-cycle="monthly" class="btn btn-block btn-primary btn-add">FREE</button>';
	}
	if (annually === '') {
		annually = monthly;
		monthly = '';
	}
	document.getElementById("showproduct-value").innerHTML = selected[br]['name']; 
	document.getElementById("showprice-value-1").innerHTML = monthly; 
	document.getElementById("showprice-value-2").innerHTML = annually;
	listenersvalue = br;
}