/*
Use filter menu to conditionally display items based on checked menu items.

Same HTML:
<ul id='user_menu'> 
 ...dynamically generated by script...
</ul>
<div class='user super'>...</div>
<div class='user normal'>...</div>
<div class='user normal'>...</div>
<div class='user normal'>...</div>
<div class='user normal'>...</div>
<div class='banned user'>...</div>  <-- transposed is fine
<div class='user banned'>...</div>

Same Script:
<script  language='javascript' type='text/javascript'>
Event.observe(window, 'load', function() {
	checkboxFilterMenu('user_menu', 'div', 'user', new Hash({super: "Super", normal: "Normal", banned: "Banned"}));
	//checkboxFilterMenu('user_menu', 'div', 'user', buildMenuHash('div', 'user'));
});
</script>

Once script runs:
<ul id='user_menu'>
<li><input type='checkbox' value='super'  /> Super</li>
<li><input type='checkbox' value='normal' /> Normal</li>
<li><input type='checkbox' value='banned' /> Banned</li>
</ul>

*/

function classNames(elements) {
  var out = new Array();

  elements.each(function(ele) {
  	out.push(ele.className);
  });
  
  return out;
}

function stripWord(strings, strWord) {
 var out = new Array();

  strings.each(function(str) {
  	out.push(str.replace(strWord, '').strip());
  });
  
  return out;
}

function humanize(strings) {
	var h = new Hash();
	
	strings.each(function(str) {
		h.set(str, str.replace('_', ' ').capitalize());
	});

  return h;
}

function buildMenuHash(strTagName, strClassName) {
	var eles = $$(strTagName + '.' + strClassName);
	return humanize(stripWord(classNames(eles), strClassName).uniq())
}

//take a hash and remove items that cannot be found
function removeUnusedMenuItems(strTagName, strClassName, hash) {
	var unused = new Array();
	hash.each(function(pair) {if ($$(strTagName + '.' + strClassName + '.' + pair.key).length == 0) unused.push(pair.key);});
	unused.each(function(key) {hash.unset(key);});
	return hash;
}

function buildMenu(hshHumanizedClassNames) {
  var html = "";

	hshHumanizedClassNames.each(function(kvp) {
		html += "<li><input type='checkbox' checked=true value='" + kvp[0] + "' /> " + kvp[1] + "</li>";
	});
	
	return html;
}

function checkboxFilterMenu(strMenuID, strTagName, strClassName, hshMenu) {
	var cache = new Hash({});
	$(strMenuID).innerHTML = buildMenu(hshMenu); // strMenuID --> unordered or ordered list

  $$('#' + strMenuID + ' li input').each(function(chk) {
		Event.observe(chk, 'change', function(event) {
			if (typeof(cache[chk.value]) == 'undefined') cache[chk.value] = $$(strTagName + '.' + strClassName + '.' + chk.value);
			cache[chk.value].each(chk.checked ? Element.appear : Element.fade);
		});
  });
}