[FF, Ch, O] Divide and Collapse Categories

[José Pedro]

Changelog:
August 24th:

• Fixed Layout Quirks in IE.

Description:
Divides each category in the front page into it's own section, with little buttons on the right which allow to collapse all boards in that category, thus hiding it. These hidden categories will be saved in a cookie "hiddencats", in a space split list, so that the next time the person loads the front page, these categories remain hidden.

Screenshot: (click on image to enlarge)


Issues:
Category collapsing doesn't work in Internet Explorer, even tough it theory it could. If someone finds the cause, please inform me.
Internet Explorer presents issues properly styling the tables, but nothing some custom CSS (depending on the board's theme) shouldn't be able to solve. -- Solved

Supported Browsers:
Latest versions of Firefox, Google Chrome and Opera are completely functional (although Opera places the toggle button lower).
Internet Explorer is unable to collapse categories, but it is able to properly divide them. Additional works in being made to support IE, thanks to Eton Bones' tips.

License:
Open-source, dual licensed in:

• New BSD license [ www.opensource.org/licenses/bsd-license ] and
  
• WTFPL [ sam.zoy [dot] org/wtfpl/ ] (warning, strong, mature language)

Code:
Add the following code in Global Header and Global Footer respectively. Depending on the way scripts change the page, it should be better to place this code before any other category altering scripts, but if it breaks, try after.

Global Header:

<style type="text/css">
/*	Category Divider with collapsible categories - by José Pedro (Pb username: jparvela)
	This code is open-source and dual licensed under:
	* New BSD license	[http://www.opensource.org/licenses/bsd-license] and
	* WTFPL 		[http://sam.zoy.org/wtfpl/] (warning, NSFW language)					      */

/*	######## ONLY EDIT THIS AREA BELOW ######## */

/*	Change value to change spacing between categories		*/
	.category-wrap {		margin-bottom: 18px; }
	
/*	To hide "Mark as read" button uncomment the following line	*/
/*	.read-table {			display: none; }		*/

/*	######## ONLY EDIT THIS AREA ABOVE ######## */

	.category tbody.hidden {	display: none; }
	.collapse-board {		background: url("http://images.proboards.com/new/hide.png") no-repeat right center;
					display: block; overflow: hidden; float: right;
					padding: 16px 16px 0 0; height: 0; width: 0;
	}
	.collapse-board[data-hidden] {	background-image: url("http://images.proboards.com/new/show.png"); }
</style>
<!--[if IE]><style tpye="text/css">
	.collapse-board {		background-position: left top; text-indent: 16px;
					margin: -16px 0 0; padding: 0; height: 16px; width: 16px; }
</style><![endif]-->

To change the spacing between categories, replace the numbers in blue with the amount of pixels you want.
To hide the "Mark as Read" button and bar, remove the text in red. To show the "Mark as Read" bar again, place the text in red back again.

Global Footer:

<script type="text/javascript">
/*	Category Divider with collapsible categories - by José Pedro (Pb username: jparvela)
	This code is open-source and dual licensed under:
	* New BSD license	[http://www.opensource.org/licenses/bsd-license] and
	* WTFPL 		[http://sam.zoy.org/wtfpl/] (warning, NSFW language)					      */

	/*	Add the categories you want to hide by default in here (use the category ID you defined for it).
		These should be a comma separated list, with each value inside quotes, all of it inside the square brackets.
		Leave it blank to show all categories by default.
		Example:
		var defaulthiddencats = ['category1', 'archive', 'hidetheseboards'];
	*/
	var defaulthiddencats = [];

	if (pb_action == 'home') {
		var tables = document.getElementsByTagName('table');
		for (var i = 0; i < tables.length; i++) {
			// Find which table lists the forums
			if (tables[i].children[0].children.length > 1) {
				if (	tables[i].children[0].children[1].children[0].className == 'catbg' &&
					tables[i].children[0].children[1].children[0].getAttribute('colspan') == '5') {
					table = tables[i];
				}
			}
		}

		// List all category beginnings and their indexes (in relation to the table rows of the table)
		var tr = table.getElementsByTagName('tr');
		var cats = [], catn = [], n = 0;
		for (var i = 0; i < tr.length; i++) {
			if (tr[i].children[0].className == 'catbg' && tr[i].children[0].getAttribute('colspan') == '5') {
				cats[n] = tr[i];
				catn[n] = i;
				n++;
			}
		}

		//	If there are categories in the table, define the default hidden categories and create a container for
		//	the new category listings
		if (cats.length != 0) {
			var hiddencatsstring = ( function () {
				var name = 'hiddencats=';
				var cookies = document.cookie.split(';');
				for (var i = 0; i < cookies.length; i++) {
					var cookie = cookies[i];
					while (cookie.charAt(0) == ' ') cookie = cookie.substring(1,cookie.length);
					if (cookie.indexOf(name) == 0) return cookie.substring(name.length,cookie.length);
				}
			}());
			if (typeof(hiddencatsstring) == 'undefined') {
				hiddencats = defaulthiddencats;
			} else if ( hiddencatsstring == '') {
				hiddencats = [];
			} else {
				var hiddencats = hiddencatsstring.match(/\b(\w+)\b/g);
			}
		

			var headertable = cats[0].previousSibling;
			var parentTable = cats[0].parentNode.parentNode;
			var borderTable = parentTable.parentNode.parentNode.parentNode.parentNode;
			//var catlist = document.createDocumentFragment();
			var catlist = document.createElement('div');
			catlist.id = 'categories';
		
			for (var i = 0; i < cats.length; i++) {
				var cat = cats[i];
				if ( cat.children[0].getElementsByTagName('a')[0].getAttribute('href') != '/index.cgi?action=markallboardsread' ) {
					var newborder = document.createElement('div');
					newborder.className = 'bordercolor category-wrap';
					
					var newtable = document.createElement('table');
					newtable.className = 'category';
					newtable.id = 'cat-' + cat.children[0].getElementsByTagName('a')[0].name;
					newtable.cellSpacing = 1;
					newtable.cellPadding = 4;
					newtableborder = 0;
					newtable.width = '100%';
					newborder.appendChild(newtable);

					var boardishidden = false;
					if (hiddencats.length != 0) {
						for (var j = 0; j < hiddencats.length; j++) {
							if ( hiddencats[j] === cat.children[0].getElementsByTagName('a')[0].name ) {
								boardishidden = true;
							}
						}
					}

					var newhead = document.createElement('thead');
					var newbody = document.createElement('tbody');
					if (boardishidden == true) newbody.className = 'hidden';
					newtable.appendChild(newhead);
					newtable.appendChild(newbody);
					var newcat = cat.cloneNode(true);

					newhead.appendChild(headertable.cloneNode(true));
					newhead.appendChild(newcat);
				
					var toggle = document.createElement('a');
					toggle.className = 'collapse-board';
					toggle.setAttribute('data-cat', cat.children[0].getElementsByTagName('a')[0].name);
					if (boardishidden == true) toggle.setAttribute('data-hidden', 'true');
					toggle.href = '#';
					if (boardishidden == true) {
						toggle.appendChild( document.createTextNode('+') );
					} else {
						toggle.appendChild( document.createTextNode('-') );
					}
			
					newcat.children[0].appendChild(toggle);

					var lasttd = (i != cats.length -1) ? catn[i+1] : tr.length;
					for (var j = catn[i] + 1; j < lasttd; j++) {
						newbody.appendChild(tr[j].cloneNode(true));
					}

					catlist.appendChild(newborder);
				} else {
					var newborder = document.createElement('div');
					newborder.className = 'bordercolor read-wrap';

					var newtable = document.createElement('table');
					newtable.className = 'read-table';
					newtable.cellSpacing = 1;
					newtable.cellPadding = 4;
					newtableborder = 0;
					newtable.width = '100%';
					newborder.appendChild(newtable);
					
					var newcat = cat.cloneNode(true);
					newtable.appendChild(newcat);

					catlist.appendChild(newborder);
				}
			}
			borderTable.parentNode.insertBefore(catlist, borderTable);
			borderTable.parentNode.removeChild(borderTable);
		}
	}

	function toggleCat(e) {
		if (!e) var e = window.event;
		var target;
		if (e.target) {
			target = e.target;
		} else if (e.srcElement) {
			target = e.srcElement;
		}
		if (target.getAttribute('class') == 'collapse-board') {
			if (e.preventDefault) {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}

			var thead = target.parentNode.parentNode.parentNode;
			var tbody = thead.parentNode.getElementsByTagName('tbody')[0];
			var table = thead.parentNode;

			if (tbody.className == 'hidden') {
				tbody.className = '';
				target.removeAttribute('data-hidden');
				target.childNodes[0].value = '-';
		
				if (hiddencats.length != 0) {
					for (var j = 0; j < hiddencats.length; j++) {
						if ( hiddencats[j] == target.getAttribute('data-cat') ) {
							hiddencats.splice(j, 1);
						}
					}
				}
			} else {
				tbody.className = 'hidden';
				target.setAttribute('data-hidden', 'true');
				target.childNodes[0].value = '+';
				hiddencats.push(target.getAttribute('data-cat'));
			}
	
			var cookievalue = '';
			for (var i = 0; i < hiddencats.length; i++) {
				cookievalue += ' ' + hiddencats[i];
			}
			var date = new Date();
			date.setTime( date.getTime() + (30 * 24 * 60 * 60 * 1000) );
			var expires = "; expires=" + date.toGMTString();
			document.cookie = 'hiddencats=' + cookievalue + expires;
		}
	}

	if ( document.getElementById("categories").addEventListener ) {
		document.getElementById('categories').addEventListener('click', toggleCat, false);
	} else if ( document.getElementById("categories").attachEvent ) {
		document.getElementById('categories').attachEvent('onclick',toggleCat);
	} else {
		document.getElementById('categories').onclick = toggleCat;
	}
</script>