addLoadEvent(function() {
	Accordion();
});

function Accordion() {
	var uls           = document.getElementsByTagName('ul'),
		accordions      = [],
		accordionPanels = [],
		accordionHeads  = [],
		i, j;

	// Collect all accordions and push them in to 'accordions' array
	for (i = 0; i < uls.length; i++) {
		if (hasClass(uls[i], 'accordion')) {
			accordions[accordions.length] = uls[i]
		}
	}

	// Collect all accordion panels, collapse them, and push them in to 'accordionPanels' array
	for (i = 0; i < accordions.length; i++) {
		var lis = accordions[i].getElementsByTagName('li');
		for (j = 0; j < lis.length; j++) {
			if (hasClass(lis[j], 'accordionPanel')) {
				if (!hasClass(lis[j], 'accordionExpanded')) {
					// if the pick button is pressed the page is refreshed - dont collapse that panel upon refresh.
					var accordionpannelid = document.getElementById('accordionpanelid').value;
					if (accordionpannelid != lis[j].id) {
						// if there is more than one category - collapse the accordian.
						if (document.getElementById('categoryNo').value > 1) addClass(lis[j], 'accordionPanelContracted');
					}
				}
				accordionPanels[accordionPanels.length] = lis[j];
			}
		}
	}

	// Collect all accordion heads and push them in to 'accordionHeads' array
	for (i = 0; i < accordions.length; i++) {
		var h3s = accordions[i].getElementsByTagName('h3');
		for (j = 0; j < h3s.length; j++) {
			accordionHeads[accordionHeads.length] = h3s[j];
		}
	}

	// Control behaviour of accordion heads on mouseover, mouseout and click
	for (i = 0; i < accordionHeads.length; i++) {

		// Add class of 'accordionHeadHover' on mouseover
		accordionHeads[i].onmouseover = function () {
			addClass(this, 'accordionHeadHover');
		}

		// Remove class of 'accordionHeadHover' on mouseout
		accordionHeads[i].onmouseout = function () {
			removeClass(this, 'accordionHeadHover');
		}

		accordionHeads[i].onclick = function () {

			// Target clicked panel and compute whether to expand it or not
			var panel     = this.parentNode;
				expandPanel = hasClass(panel, 'accordionPanelContracted');

			// Collapse all panels
			for (j = 0; j < accordionPanels.length; j++) {
				addClass(accordionPanels[j], 'accordionPanelContracted');
			}

			// If panel is to be expanded, expand it
			if (expandPanel) {
				removeClass(panel, 'accordionPanelContracted');
				document.getElementById('accordionpanelid').value = panel.id;
			}
		}
	}
}


// Side functions
function hasClass(obj, className) {
	var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
	
	if (typeof(obj) == 'string') {
		return re.test(obj);
	}
	else if (typeof(obj) == 'object' && obj.className) {
		return re.test(obj.className);
	}
	return false;
}

function addClass(el, className) {
	if (hasClass(el, className)) return;
	if (!el.className) {
		el.className = className;
	}
	else {
		el.className = el.className + ' ' + className;
	}
}

function removeClass(el, className) {
	if (el.className == className) {
		el.className = '';
	}
	else {
		el.className = el.className.replace(className, ' ');
	}
}