function hasClass(ele,cls){return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));}
function addClass(ele,cls){if(!this.hasClass(ele,cls))ele.className+=' '+cls;}
function removeClass(ele,cls){if(hasClass(ele,cls)){var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');ele.className=ele.className.replace(reg,' ');}}

// HTML-tag van class 'js' voorzien
addClass(document.documentElement, 'js');

var PANEL_NORMAL_CLASS		= 'panel';
var PANEL_COLLAPSED_CLASS	= 'panelcollapsed';
var PANEL_HEADING_TAG		= 'h2';
var PANEL_CONTENT_CLASS		= 'panelcontent';
var PANEL_ANIMATION_DELAY	= 20; /*ms*/
var PANEL_ANIMATION_STEPS	= 10;

function setUpPanels() {
	var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG);

	for(var i=0; i<headingTags.length; i++) {
		var el = headingTags[i];

		if(!hasClass(el.parentNode, PANEL_NORMAL_CLASS) && !hasClass(el.parentNode, PANEL_COLLAPSED_CLASS))
			continue;

		var name = el.firstChild.nodeValue;

		el.onclick = function()  {
			var target = this.parentNode;
			var name = this.firstChild.nodeValue;
			var collapsed = hasClass(target, PANEL_COLLAPSED_CLASS);
			animateTogglePanel(target, collapsed);
		};
	}
}

// The expand/collapse animation of the panel
function animateTogglePanel(panel, expanding) {
	var elements = panel.getElementsByTagName('div');
	var panelContent = null;

	for(var i=0; i<elements.length; i++) {
		if(hasClass(elements[i], PANEL_CONTENT_CLASS)) {
			panelContent = elements[i];
			break;
		}
	}

	panelContent.style.display = 'block';

	var contentHeight = panelContent.offsetHeight;

	if(expanding)
		panelContent.style.height = 0;

	var stepHeight = contentHeight / PANEL_ANIMATION_STEPS;
	var direction = !expanding ? -1 : 1;

	setTimeout(function(){animateStep(panelContent, 1, stepHeight, direction);}, PANEL_ANIMATION_DELAY);
}

// Change the height of the target
function animateStep(panelContent, iteration, stepHeight, direction) {
	if(iteration < PANEL_ANIMATION_STEPS) {
		panelContent.style.height = Math.round(((direction>0) ? iteration : 10 - iteration) * stepHeight) + 'px';
		iteration++;

		setTimeout(function() {animateStep(panelContent, iteration, stepHeight, direction);}, PANEL_ANIMATION_DELAY);
	} else {
		removeClass(panelContent.parentNode, !(direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS);
		addClass(panelContent.parentNode, (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS);
		panelContent.style.display = panelContent.style.height = '';
	}
}

// Placeholders in input
function initFormPlaceholders() {
	inputs = document.getElementsByTagName('input');

	for(var i = 0; i < inputs.length; i ++) {
		var input = inputs[i];

		if(input.type != 'text' || !hasClass(input, 'auto-clear'))
			continue;

		if(input.value == '' || input.value == input.title) {
			addClass(input, 'placeholder');
			input.value = input.title;
		}

		input.onfocus = function () {
			if(this.value == this.title) {
				removeClass(this, 'placeholder');
				this.value = '';
			}
		}

		if(input.captureEvents)
			input.captureEvents(Event.FOCUS);

		input.onblur = function () {
			if(this.value == '')
				this.value = this.title;
			if(this.value == this.title)
				addClass(this, 'placeholder');
		}

		if(input.captureEvents)
			input.captureEvents(Event.BLUR);
	}
}

// Execute setUpPanels and initFormPlaceHolders on load
function init() {
	setUpPanels();
	initFormPlaceholders();
}

if (window.addEventListener) { // the "proper" way
	window.addEventListener('load', init, false);
} else if (window.attachEvent) { // the IE way
	window.attachEvent('onload', init);
}