//  *****************************************
//  *                                       *
//  *  LINKOTHEEK WEBSITE                   *
//  *  JAVASCRIPT ENHANCEMENTS              *
//  *                                       *
//  *  Vizi | vorm geven aan inhoud         *
//  *                                       *
//  *  v0.1 - 11/06/2008                    *
//  *                                       *
//  *  DEPENDS ON MOOTOOLS LIBRARY v1.11    *
//  *  Uses: core, class, native,           *
//  *  element, window. effects,            *
//  *  remote (XHR, Ajax, assets)           *
//  *                                       *
//  *****************************************


//  LINKTOHEEK CONFIG START
//
//  Set options for several texts and properties here
//




//
//
//  LINKTOHEEK CONFIG END
//
//  NO USER EDITABLE OPTIONS BEYOND THIS POINT !!!! (No, really)



//  INIT: Set up enhancements
//
function linkotheekInit()
{
	// Set 'js-on' class on body.
	docRoot = $("linkotheek");
	if (docRoot && !docRoot.hasClass("js-on"))
	{
		docRoot.addClass("js-on");
	}

	// Folding of category blocks.
	linkotheekFoldingInit();

	// New window versions of links on results pages.
	linkotheekLinkPopupInit();
}






//  FOLDING: Folding of groups in report
//
function linkotheekFoldingInit()
{
	// Fetch foldables.
	var foldables = $$('.cat ul');
	if (typeof foldables == 'undefined' || foldables.length == 0) return;
	
	foldables.each(function(foldable, index)
	{
		// Setup foldable group content.
		var foldableCoords = foldable.getCoordinates();
		foldable.baseHeight = foldableCoords['height'];
		foldable.setStyle('overflow', 'hidden');
		foldable.fold = new Fx.Style(foldable, 'height', { duration: 400 });
		foldable.getParent().addClass('foldout');
		foldable.getParent().id = "cat-"+index;
		
		// Attach events to header.
		var foldLink = foldable.getPrevious();
		foldLink.addEvent('click', foldToggle);
		foldLink.addEvent('mouseover', foldMouseOver);
		foldLink.addEvent('mouseout', foldMouseOut);
		
		// Inject icon in header.
		var foldIcon = new Element("span", { 'class': 'fold-icon' });
		foldLink.appendChild(foldIcon);
	});
}


//  HELPERS: Fold one block.
//
function foldIn(elem)
{
	var foldable = $(elem);
	if (foldable.getParent().hasClass('foldout'))
	{
		foldable.fold.start(foldable.baseHeight, 0);
		foldable.getParent().removeClass('foldout');
	}
}

function foldOut(elem)
{
	var foldable = $(elem);
	if (!foldable.getParent().hasClass('foldout'))
	{
		foldable.fold.start(0, foldable.baseHeight);
		var addClass = "delayedAddClass('"+foldable.getParent().id+"')";
		setTimeout(addClass, 350);
	}
}

function delayedAddClass(elemid)
{
 $(elemid).addClass('foldout');
}


//  HELPER: Toggle a block after user click
//
function foldToggle()
{
	var foldLink = $(this);
	var foldParent = foldLink.getParent();
	var foldable = $E('ul', foldParent)
	
	if (foldParent.hasClass('foldout'))
	{
		foldIn(foldable);
	}
	else
	{
		foldOut(foldable);
	}
	
}

//  HELPERS: Mouseover styling
//
function foldMouseOver()
{
	var foldLink = $(this);
	if (!foldLink.hasClass('foldover'))
	{
		foldLink.addClass('foldover');
	}
}

function foldMouseOut()
{
	var foldLink = $(this);
	foldLink.removeClass('foldover');
}




//  POPUPS: Open result link in new window.
//
function linkotheekLinkPopupInit()
{
	var resultLinks = $$('p.result-url');
	if (typeof resultLinks == 'undefined' || resultLinks.length == 0) return;

	resultLinks.each(function(resultLink, index)
	{
		// Clone result link
		var resultPopup = resultLink.getElement('a').cloneNode(false);
		
		// Add target, inject image and set class.
		resultPopup.target = "_blank";
		resultPopup.addClass('result-popup');
		resultPopup.innerHTML = "<img src=\"/images/icon-popup.gif\" width=\"12\" height=\"10\" alt=\"Open deze link in nieuw venster\"/>";

		// Inject in result link.
		resultLink.appendChild(resultPopup);
	});
}





//  DOMREADY: Attach init routine to domready event
//
window.addEvent("domready", linkotheekInit);