[% page = "PLUGIN_CUSTOMBROWSE" %]
[% PROCESS settings/header.html %]

[% PROCESS plugins/CustomBrowse/settings/subpage_chooser.html %]
	<div class="settingSection">
		<div class="prefHead">[% "SETUP_PLUGIN_CUSTOMBROWSE_ENABLED_MIXERS" | string | upper %]</div>
		<div class="prefDesc">[% "SETUP_PLUGIN_CUSTOMBROWSE_ENABLED_MIXERS_DESC" | string %]</div>

	<table border="0">
		[%- FOREACH mix IN pluginCustomBrowseMixes.keys.sort %]
			<tr>
				[%- mixid = "mix_" _ pluginCustomBrowseMixes.$mix.id %]
				<td><input type="checkbox" name="[% mixid %]" id="[% mixid %]" value="1" [% pluginCustomBrowseMixes.$mix.enabled ? "checked" : "" %] onclick="changeMixNumSelected(this)">
				<label for="[% mixid %]">[% pluginCustomBrowseMixes.$mix.mixname | html %]</label></td><td>&nbsp;&nbsp;([% mix %])</td>
			</tr>
		[%- END %]
	</table>
	<script type="text/javascript">
	<!--
		var f = document.settingsForm;
		var numMixSelected = 0;
		var numMixCheckBoxes = 0;
		var selectAllMixesString = '[% "PLUGIN_CUSTOMBROWSE_SELECT_MIXES_ALL" | string %]';
		var selectNoneMixesString = '[% "PLUGIN_CUSTOMBROWSE_SELECT_MIXES_NONE" | string %]';

		// Work out how many checkboxes are initially selected
		for (var i=0; i < f.elements.length; i++) {
			if (f.elements[i].type == 'checkbox' && String(f.elements[i].name).substring(0,3) == 'mix') {
				numMixCheckBoxes++;
				if (f.elements[i].checked) {
					numMixSelected++;
				}
			}
		}

		// Select none if all are selected, else select all
		function selectAllMixes() {
			var newState = numMixSelected != numMixCheckBoxes;

			for (var i=0; i < f.elements.length; i++) {
				if (f.elements[i].type == 'checkbox' && String(f.elements[i].name).substring(0,3) == 'mix') {
					f.elements[i].checked = newState;
				}
			}
			if (newState) {
				numMixSelected = numMixCheckBoxes;
				f.selectAllMixesButton.value = selectNoneMixesString;
			} else {
				numMixSelected = 0;
				f.selectAllMixesButton.value = selectAllMixesString;
			}
		}

		// Increase/decrease num selected every time a checkbox changes
		function changeMixNumSelected(checkBox) {
			if (checkBox.checked) {
				numMixSelected++;
			} else {
				numMixSelected--;
			}

			if (numMixSelected == numMixCheckBoxes) {
			        f.selectAllMixesButton.value = selectNoneMixesString;
			} else {
				f.selectAllMixesButton.value = selectAllMixesString;
			}
		}

		// Write the button using js, so it won't appear if js isn't enabled/available
		document.write('<input type="button" value="'
					   + (numMixSelected == numMixCheckBoxes ? selectNoneMixesString : selectAllMixesString)
									 + '" id="selectAllMixesButton" onclick="selectAllMixes()">');
	// -->
	</script>
[% PROCESS settings/footer.html %]