// foldout elements

AhFoldouts = {};

AhFoldouts.headings = {title:'h3',image:'p img'};
AhFoldouts.paging = {perrow:3, perpage:15};

AhFoldouts.processFoldouts = function() {



	$$('#primary div.foldouts').each(function(foldouts, foldoutsID){

		var row;
		var foldouts_count;

		foldouts.addClassName('foldouts_layout');

		foldouts.getElementsBySelector('div.subsection').each(function(foldout, foldoutID){
			if (foldoutID % AhFoldouts.paging.perrow === 0) {
				row = document.createElement('div');
				row = $(row);
				row.className = 'foldout_row foldout_row_page_' + Math.floor(foldoutID/AhFoldouts.paging.perpage);
				foldouts.appendChild(row);
			}
			var title = foldout.getElementsBySelector(AhFoldouts.headings.title)[0];
			var image = foldout.getElementsBySelector(AhFoldouts.headings.image)[0];

			$(foldout).addClassName('foldout_' + (foldoutID - (AhFoldouts.paging.perrow * Math.floor(foldoutID/AhFoldouts.paging.perrow))));

			if (title) title.remove();
			if (image) image.up(0).remove();

			var contentHTML = foldout.innerHTML;

			foldout.innerHTML = '';

			var heading = document.createElement('a');
			heading = $(heading);
			heading.className = 'foldout_heading';
			heading.href = '#_foldouts_'+foldoutID;


			if (image) {
				heading.insert({bottom: image});
			}
			if (title) {
				heading.insert({bottom: '<em>'+title.innerHTML+'</em>'});
			}

			heading.observe('click',AhFoldouts.on_click);

			foldout.insert({top: heading});

			CorneredBox(heading);

			var content = document.createElement('div');
			content.className = 'foldout_content';

			content.innerHTML = contentHTML;

			foldout.insert({bottom: content});

			row.insert({bottom: foldout});
			foldouts_count = foldoutID;

		});

		// create paging
		var pages = Math.floor(foldouts_count/AhFoldouts.paging.perpage);

		if (pages > 0) {


			var listr = '';

			for (var k=0; k<pages+1; k++) {
				listr += '<li><a id="foldout_row_page_'+k+'" href="#_foldouts_page_'+k+'">'+(k+1)+'</a></li>';
			}

			var str = '<div class="paging fillet">';
			str += '<p>Pagina <span id="current_page_text">1</span> van ' + (pages+1) + '</p>';
			str += '<ul>';
			str += listr;
			str += '</ul>';
			str += '</div>';
			foldouts.insert({bottom: str});

			// create click actions on paging

			foldouts.getElementsBySelector('.paging li a').each(function(link, linkID){

				CorneredBox(link);

				$(link).observe('click',function(ev){
					// remove current from paging
					$$('#primary .paging li.current').each(function(currentLink){
						$(currentLink).removeClassName('current');
					});
					$(this).up(0).addClassName('current');
					// update pagina text

					document.getElementById('current_page_text').innerHTML = parseInt(this.innerHTML);
					// remove active page class
					$$('#primary .foldouts_layout .foldout_active_page').each(function(foldoutRow){
						$(foldoutRow).removeClassName('foldout_active_page');
					});
					// add active page class to selected page
					$$('#primary .foldouts_layout .'+this.id).each(function(foldoutRow){
						$(foldoutRow).addClassName('foldout_active_page');
					});
					Event.stop(ev);



				});

				// activate first page
				$$('#primary .paging li')[0].addClassName('current');
			});
		}
		$$('#primary .foldouts_layout .foldout_row_page_0').each(function(foldoutRow){
			$(foldoutRow).addClassName('foldout_active_page');
		});




		var buttons = foldouts.getElementsBySelector('p.button');
		if (buttons) buttons.each(function(button){
			CorneredBox(button);
		});

		// activate first fold
		var firstFold = foldouts.getElementsBySelector('div.subsection')[0];
		if (firstFold) {
			firstFold.addClassName('active_fold');
			AhFoldouts.activeFold = firstFold;
		}


	});
}

AhFoldouts.on_click = function (ev) {

	if (AhFoldouts.activeFold) {
		$(AhFoldouts.activeFold).removeClassName('active_fold');
	}

	var content = $(this).next(0);
	if (!content) return;

	var foldout = $(this).up(0);
	AhFoldouts.activeFold = foldout;

	$(AhFoldouts.activeFold).addClassName('active_fold');
	new Effect.BlindDown(content, {duration: 0.4});
	Event.stop(ev);
}

if (loader) {
  loader.schedule("process foldouts", AhFoldouts.processFoldouts);
}
