//*************************************************************************************
//Event Handlers
//*************************************************************************************



function addEvent(element, type, handler)
{
	if (element.addEventListener)
		element.addEventListener(type, handler, false);
	else
	{
		if (!handler.$$guid) handler.$$guid = addEvent.guid++;
		if (!element.events) element.events = {};
		var handlers = element.events[type];
		if (!handlers)
		{
			handlers = element.events[type] = {};
			if (element['on' + type]) handlers[0] = element['on' + type];
			element['on' + type] = handleEvent;
		}
	
		handlers[handler.$$guid] = handler;
	}
}
addEvent.guid = 1;

function removeEvent(element, type, handler)
{
	if (element.removeEventListener)
		element.removeEventListener(type, handler, false);
	else if (element.events && element.events[type] && handler.$$guid)
		delete element.events[type][handler.$$guid];
}

function handleEvent(event)
{
	event = event || fixEvent(window.event);
	var returnValue = true;
	var handlers = this.events[event.type];

	for (var i in handlers)
	{
		if (!Object.prototype[i])
		{
			this.$$handler = handlers[i];
			if (this.$$handler(event) === false) returnValue = false;
		}
	}

	if (this.$$handler) this.$$handler = null;

	return returnValue;
}

function fixEvent(event)
{
	event.preventDefault = fixEvent.preventDefault;
	event.stopPropagation = fixEvent.stopPropagation;
	return event;
}
fixEvent.preventDefault = function()
{
	this.returnValue = false;
}
fixEvent.stopPropagation = function()
{
	this.cancelBubble = true;
}

// This little snippet fixes the problem that the onload attribute on the body-element will overwrite
// previous attached events on the window object for the onload event
if (!window.addEventListener)
{
	document.onreadystatechange = function()
	{
		if (window.onload && window.onload != handleEvent)
		{
			addEvent(window, 'load', window.onload);
			window.onload = handleEvent;
		}
	}
}




//*************************************************************************************
//The Actual Program
//*************************************************************************************

/*Hides the dd's of well-formed dt/dd-list (it is essential that each dt has only one dd assigned)
and makes the dt's clickable so you get a nice hide/unhide effect. 

It also checks if an anchor-id is passed in the URL and unhides the item that matches with the id per default */


function toggle() {
	var dtItems = document.getElementsByTagName('dt');
	var ddItems = document.getElementsByTagName('dd');	
	
	//check if there is an anchor
	var anchorTemp = window.location.hash;
	if (anchorTemp) {
		var anchor = anchorTemp.substr(1,anchorTemp.length-1);
	}

	
	for(var i=0;i<dtItems.length;i++){
		var newItem = new item(dtItems[i],ddItems[i]);
		
		// hide the item
		newItem.ddItem.style.display = 'none';
		newItem.dtItem.style.cursor='pointer';
		
		//unhide it if id matches anchor in URL
		if (newItem.dtItem.id == anchor) {
			newItem.ddItem.style.display = '';	
		}
    }
		
	function item(dtItem, ddItem) {
		var this_ = this;
		this.dtItem = dtItem;
		this_.ddItem = ddItem;		

		var hideButton = document.createElement('span');
	    hideButton.className='hide';
		hideButton.innerHTML='Hide answer';
		hideButton.style.cursor='pointer';
		ddItem.appendChild(hideButton);
		
		addEvent(dtItem, 'mousedown', showDD);		
		addEvent(hideButton, 'mousedown', function() {this_.ddItem.style.display = 'none'});
		
		function showDD() {			
			if (this_.ddItem.style.display == 'none') {
				for(var i=0;i<ddItems.length;i++){
					ddItems[i].style.display = 'none';	
				}
				this_.ddItem.style.display = '';				
			} else {
				this_.ddItem.style.display = 'none';
			}
		}
		
	}
	
}