function unhide(id) {
        document.getElementById(id).style.display = 'block';
}

function unhidein(id) {
        document.getElementById(id).style.display = 'inline';
}

function hide(id) {
        document.getElementById(id).style.display = 'none';
}

function focus(id) {
        document.getElementById(id).focus();
}

function highlight_input(id) {
  if (id) {
    document.getElementById(id).style.backgroundColor = "#ff8888";
  }
}

function refer_change(value) {
	if ((value == 1) || (value == 4) || (value == 5)|| (value == 7) || (value == 8)) {
	      unhide('input_spec');
	} else {
	      hide('input_spec');
	}
}

function change_tariff(clicked) {
	if (clicked == "radio6G") tariff = 6;
	if (clicked == "radio10G") tariff = 10;
	if (clicked == "radio20G") tariff = 20;
	if (clicked == "radio30G") tariff = 30;
	if (clicked == "radio50G") tariff = 50;

	document.getElementById(clicked).checked = true;
	head = "head" + tariff + "G";
	detail = "cap" + tariff + "G";

	//hide all details
	hide('cap6G');
	hide('cap10G');
	hide('cap20G');
	hide('cap30G');
	hide('cap50G');

	document.getElementById('head6G').className = 'cap_sel rad unselected';
	document.getElementById('head10G').className = 'cap_sel rad unselected';
	document.getElementById('head20G').className = 'cap_sel rad unselected';
	document.getElementById('head30G').className = 'cap_sel rad unselected';
	document.getElementById('head50G').className = 'cap_sel rad unselected';


	//show selected tariff only
	unhide(detail);
	document.getElementById(head).className = 'cap_sel rad-top selected';
}

function change_service(clicked) {
	//unselect all
	document.getElementById('service1').className = 'service_select rad unselected';
	document.getElementById('service2').className = 'service_select rad unselected';
	document.getElementById('service3').className = 'service_select rad unselected';
	document.getElementById('service'+clicked).className = 'service_select rad selected_b';
	document.getElementById('radio_service'+clicked).checked = true;
}

function change_terms(clicked) {
	//unselect all
	document.getElementById('terms1').className = 'terms_select rad unselected';
	document.getElementById('terms2').className = 'terms_select rad unselected';
	document.getElementById('terms'+clicked).className = 'terms_select rad selected_b';
	document.getElementById('radio_terms'+clicked).checked = true;
}

function change_contract(clicked) {
	//unselect all
	document.getElementById('con12m').className = 'contract_select rad unselected';
	document.getElementById('con36m').className = 'contract_select rad unselected';
	document.getElementById('con'+clicked+'m').className = 'contract_select rad selected_b';
	document.getElementById('radio'+clicked+'m').checked = true;
}

function change_router(clicked) {
	//unselect all
	document.getElementById('head_router').className = 'cap_sel rad unselected';
	document.getElementById('head_own_router').className = 'cap_sel rad unselected';
	hide('detail_router');
	hide('detail_own_router');

	document.getElementById('head_'+clicked).className = 'cap_sel rad-top selected';
	unhide('detail_'+clicked);
	document.getElementById('radio_'+clicked).checked = true;
}

function change_staticip(clicked) {
	//unselect all
	document.getElementById('head_staticip').className = 'cap_sel rad unselected';
	document.getElementById('head_dynamicip').className = 'cap_sel rad unselected';

	document.getElementById('head_'+clicked).className = 'cap_sel rad selected';
	document.getElementById('radio_'+clicked).checked = true;
}