/* Category show/hide functionality */
/**
* var string holds the active id 
*/
var iActiveId;

/**
* var string holds the active link element
*/
var sActiveLinkEl;

/**
* Show a category block and hide the previous active block
* @param string sID ID of the item to make active
*
*/	
function showItems(iId, iTotItems)
{
	//if active element and active element is not the same as the required one, hide it!
	if(iActiveId && (iId == iActiveId))
	{
		hideActive();
	}
	else
	{
		if(iActiveId)
		{
			hideActive();
		}

		$('cat-'+iId).style.display = 'none';
		$('cat-'+iId).removeClassName('hide');
		new Effect.BlindDown('cat-'+iId, { duration: 1.0, afterFinish: function()
			{
				iActiveId = iId;
				$('cat-head-'+iId).removeClassName('pagetitle_header_inactive');
				$('cat-middle-'+iId).removeClassName('pagetitle_middle_inactive');
				$('cat-foot-'+iId).removeClassName('pagetitle_footer_inactive');
				$('img-'+iId).src = '/images/block_active.gif';
				
				$('cat-'+iId).style.display = 'block';
			}
		});
	}
}
/**
*	Hide a category block
*/
function hideActive()
{
	new Effect.BlindUp('cat-'+iActiveId, { duration: 1.0 });
	$('cat-head-'+iActiveId).addClassName('pagetitle_header_inactive');
	$('cat-middle-'+iActiveId).addClassName('pagetitle_middle_inactive');
	$('cat-foot-'+iActiveId).addClassName('pagetitle_footer_inactive');
	$('img-'+iActiveId).src = '/images/block_inactive.gif';
	
	$('cat-'+iActiveId).addClassName('hide');
	
	iActiveId = null;
}
/* // Category show/hide functionality */

/*
*	Popup Lettergrotte functionality toggle.
*	@param string sPopupID	ID of the main popup template container to show/hide.
*	@return void
*/
function togglePopup(sPopupID, sStatus)
{
	if(sStatus == 'show')
	{
		Effect.toggle(sPopupID, 'appear', { duration:1, beforeStart: function()
		{
			$('popup_underlayer').show();
		}});
	}
	else if(sStatus == 'hide')
	{
		Effect.toggle(sPopupID, 'appear', { duration:1, afterFinish:function()
		{
			$('popup_underlayer').hide();
		} });
	}
	
	return false;
}

/**
*	Function to redirect the newsbrief form submission on the homepage to the 'aanmelden/afmelden' process.
*	@param string	ID of the form to submit
*	@param string	Action to execute
*/
function optInRegistration(sFormId, sAction)
{
	if( $(sFormId) )
	{
		var sURI = '';
		if(sAction == 'aanmelden')
		{
			sURI = '/hulpnavigation/nieuwsbrief/ajax/aanmelden';
		}
		else if(sAction == 'afmelden')
		{
			sURI = '/hulpnavigation/nieuwsbrief/ajax/afmelden';
		}
	
		// Check which group has been selected
		var iGroupID = '';
		if( $(sFormId).group.length )
		{
			// We have here more then 1 groups for sure.
			for(i=0; i < $(sFormId).group.length; i++)
			{
				if ($(sFormId).group[i].checked)
				{
					iGroupID = $(sFormId).group[i].value;
				}
			}
			//console.log( "more groups - selected id: ", iGroupID );return false;
		}
		else
		{
			// We have here just one group (selected as default). With no groups the form is not shown.
			//console.log('1 group - selected id: ', $(sFormId).group.value);return false;
			iGroupID = $(sFormId).group.value;
		}
		
		new Ajax.Request(sURI, {
				method: 'post',
				asynchronous : true,
				parameters:
				{
					name: $(sFormId).name.value,
					email:  $(sFormId).email.value,
					groupID:  iGroupID
				},
				onSuccess: function(transport)
				{
					$('homenewsletter_middle').innerHTML = transport.responseText;
				}
			});
		return false;
	}
}

/**
 * Showing the active tab and hiding the inactive tab
 * 
 * @param string sActiveDiv
 * @param string sInactiveDiv
 */
function toggleTabNewsletter(sActiveDiv, sInactiveDiv, sText)
{
	showForm('aanmelden', sText);
	
	if(sText)
	{
		$('homeform_text_row').innerHTML = sText;
	}

	if(sActiveDiv == 'aanmelden')
	{
		if(!$('submit_afmelden').hasClassName( 'hide' ))
		{
			$('submit_afmelden').addClassName( 'hide' );
		}
		if($('submit_aanmelden').hasClassName( 'hide' ))
		{
			$('submit_aanmelden').removeClassName( 'hide' );
		}
	}
	if(sActiveDiv == 'afmelden')
	{
		if(!$('submit_aanmelden').hasClassName( 'hide' ))
		{
			$('submit_aanmelden').addClassName( 'hide' );
		}
		if($('submit_afmelden').hasClassName( 'hide' ))
		{
			$('submit_afmelden').removeClassName( 'hide' );
		}
	}
	
	// Because of a nested bug in IE7, I set a pause of 0,1 seconds to avoid it.
	// Where this bug exactly resides is still not known.
	var switchTabs = function(sActiveDiv)
	{
		$('afmelden_header').removeClassName('tab_active');
		$('aanmelden_header').removeClassName('tab_active');
		$(sActiveDiv+'_header').addClassName('tab_active');
	}
	
	switchTabs.delay(0.1, sActiveDiv);
	
}

/**
*	Function to load all newsletters-group and return then to the template
*	@param string sAction	Action to be executed with the showing of the form. Default value: 'aanmelden'
*/
function showForm(sAction, sText)
{
	if(!sAction)
	{
		sAction = 'aanmelden';
	}
	if(!sText)
	{
		sText = '';
	}
	new Ajax.Request('/output/json/hulpnavigation/nieuwsbrief/ajax/loadgroups/', {
			method: 'get',
			asynchronous : false,
			onSuccess: function(transport, oJson)
			{
				var sOutput = '';
				//console.log(oJson.iTotGroupItems);
				// The subscription form is shown only when at minimum a group is present
				if(oJson.iTotGroupItems > 0)
				{
					if(sText)
					{
						sOutput += '<div id="homeform_text_row">'+sText+'</div>';
					}
					
					sOutput += '<form name="optin_form" id="aanmeldenForm" action="#" method="post">';
					sOutput += '<div class="input_text_fields">';
					sOutput += '	<input type="text" name="name" id="name" value="uw naam"';
					sOutput += '		onfocus="if( this.value == this.defaultValue) {this.value = \'\'; this.style.color=\'#000000\';}" ';
					sOutput += '		onblur="if(this.value == \'\') {this.value = this.defaultValue; this.style.color=\'#AA8DA2\';} else {this.style.color=\'#000000\'}" /><br />';
					sOutput += '	<input type="text" name="email" id="email" value="uw e-mailadres"';
					sOutput += '		onfocus="if( this.value == this.defaultValue) {this.value = \'\'; this.style.color=\'#000000\';}"';
					sOutput += '		onblur="if(this.value == \'\') {this.value = this.defaultValue; this.style.color=\'#AA8DA2\';} else {this.style.color=\'#000000\'}" />';
					sOutput += '</div>';
					
					sOutput += '<div class="input_radio_fields">';
					sOutput += '	<div class="form_row form_row_group">';
					
					sOutput += '		<div class="form_field form_field_group" ';
					if(oJson.iTotGroupItems == 1)
					{
						sOutput += "style='visibility:hidden;' "
					}
					sOutput += '		>';
					
					for(var i = 0; i < oJson.iTotGroupItems; i++)
					{
						var sRowname = 'row'+i;
						sOutput += '	    	<input type="radio" id="in_group_'+ oJson.groups[sRowname].ID +'" name="group" value="'+ oJson.groups[sRowname].ID +'" ';
						if(i == 0)
						{
							sOutput += '			checked="checked"';
						}
						
						sOutput += '			 />';
						sOutput += '			<label for="in_group_'+ oJson.groups[sRowname].ID +'">'+ oJson.groups[sRowname].name +'</label><br />';
						sOutput +='			<div class="clear"></div>';
					};
					
					sOutput += '		</div>';
					sOutput += '		<div class="clear"></div>';
					sOutput += '	</div>';
					sOutput +=  '</div>';
					
					sOutput +=  '<div id="submit">';
					sOutput +=  '	<div id="submit_aanmelden" class="button left';
					
					if(sAction == 'afmelden')
					{
						sOutput += ' hide';
					}
					
					sOutput += ' 			">';
					sOutput +=  '		<a href="javascript:void(0);" onclick="optInRegistration(\'aanmeldenForm\', \'aanmelden\');">';
					sOutput +=  '			<span class="button_left"></span>';
					sOutput +=  '			<span class="button_center">aanmelden</span>';
					sOutput +=  '			<span class="button_right"></span>';
					sOutput +=  '			<div class="clear"></div>';
					sOutput +=  '		</a>';
					sOutput +=  '	</div>';
					sOutput +=  '	<div id="submit_afmelden" class="button left';
					
					if(sAction == 'aanmelden')
					{
						sOutput += ' hide';
					}
					
					sOutput +=  ' 	">';
					sOutput +=  '		<a href="javascript:void(0);" onclick="optInRegistration(\'aanmeldenForm\', \'afmelden\');">';
					sOutput +=  '			<span class="button_left"></span>';
					sOutput +=  '			<span class="button_center">afmelden</span>';
					sOutput +=  '			<span class="button_right"></span>';
					sOutput +=  '			<div class="clear"></div>';
					sOutput +=  '		</a>';
					sOutput +=  '	</div>';
					sOutput +=  '	<div class="clear"></div>';
					sOutput +=  '</div>';
					sOutput +=  '<div class="clear"></div>';
					sOutput +=  '</form>';
				}
				$('homenewsletter_middle').innerHTML = sOutput;
			}
		});
	return false;
}	

/**
*	Function used to render a picture as thumbnail with a fixed width and height
*/
function resizeThumb(sId, iWidth, iHeight)
{
	var oImg = $(sId);
	
	var oImgW = oImg.width;
	var oImgH = oImg.height;
	
	if(iWidth > iHeight)
	{
		if(oImgW >= oImgH)
		{
			oImg.setStyle({height: iHeight+'px',clip:'rect(0px '+iWidth+'px '+iHeight+'px 1px)'});
		}
		else
		{
			oImg.setStyle({width: iWidth+'px',clip:'rect(0px '+iWidth+'px '+iHeight+'px 1px)'});
		}
	}
	else
	{
		if(oImgH > oImgW )
		{
			oImg.setStyle({width: iWidth+'px',clip:'rect(0px '+iWidth+'px '+iHeight+'px 1px)'});
		}
		else
		{
			oImg.setStyle({height: iHeight+'px',clip:'rect(0px '+iWidth+'px '+iHeight+'px 1px)'});
		}
	}
	oImg.setStyle({display: 'block'});
}

/**
*	Function invoked by a onchange event on the selectbox
*	in the sort-field dropdown box of Woninglite
*	@return void
*/
function actSorting()
{
	var oObj = $('sort_field_select');
	var sUrl = oObj.options[oObj.selectedIndex].value;
	document.location = sUrl;
}

var Menu = Class.create(
{
	activemenu: '',		// Active menu variablename container initialization
	aMenuDelimiter: [], // Array container for all those DOM objects which will cause the hiding of the navigation menu
	/**
	 * Standard prototype initialize contructor
	 */
	initialize: function()
	{
		oMenu = this;
		oMenu.triggeringMenuHiders();
		
		var aItems = $$('div.button_navigationmenu');
		aItems.each( function(oItem)
		{
			Event.observe(oItem, 'mouseover', function(oElem)
			{
				var iIndex = oItem.id.substring(10, oItem.id.length);
				oMenu.toggleSubmenu('subcontaineritem_'+ iIndex);
			});
		});
		
		/* Trigger the mouse-over and orange color of the section title */
		var aItems1 = $$('div.nav_item_container');
		aItems1.each( function(oItem)
		{
			var iIndex1 = oItem.id.substring(17, oItem.id.length);
			Event.observe(oItem, 'mouseover', function(oElem)
			{
				var oSpan = $('sectionButton_'+ iIndex1);
				if(!oSpan.hasClassName('button_center_active'))
				{
					oSpan.setStyle({ color: '#eb6909' }); // Orange
				}
			});
			
			Event.observe(oItem, 'mouseout', function(oElem)
			{
				var oSpan = $('sectionButton_'+ iIndex1);
				oSpan.setStyle({ color: '#ffffff' });
			});
		});
	},
	/**
	*	Function where initialize the DOM objects responsable for 
	*	the hiding of the navigation menu (if active).
	*/
	triggeringMenuHiders: function()
	{
		oMenu.aMenuDelimiter[0] = $('nav_top_head');
		oMenu.aMenuDelimiter[1] = $('subcontaineritem_top');
		oMenu.aMenuDelimiter[2] = $('subcontaineritem_left');
		oMenu.aMenuDelimiter[3] = $('subcontaineritem_right');
		oMenu.aMenuDelimiter[4] = $('subcontaineritem_bottom');
		oMenu.aMenuDelimiter[5] = $('navmenu_li_last');
		
		oMenu.aMenuDelimiter.each( function(oItem){
			Event.observe(oItem, 'mouseover', function(oElem){
				// If an active menu is defined/shown, then hide it
				if(oMenu.activemenu != '' && $(oMenu.activemenu))
				{
					$(oMenu.activemenu).addClassName('hide');
					$('nav_top_head').addClassName('hide');
					$('subcontaineritem_top').addClassName('hide');
					$('subcontaineritem_left').addClassName('hide');
					$('subcontaineritem_right').addClassName('hide');
					$('subcontaineritem_bottom').addClassName('hide');
					$('navmenu_li_last').addClassName('hide');
				}
			});
		});
	},
	/**
	*	Show/hide the navigation-menu block
	*	@param string sId		ID of the submenu block container to show/hide
	*/
	toggleSubmenu: function(sId)
	{
		if($(sId))
		{
			if(this.activemenu != "")
			{
				$(this.activemenu).addClassName('hide');
			}
			this.activemenu = sId;
			
			$(sId).removeClassName('hide');
			$('nav_top_head').removeClassName('hide');
			$('subcontaineritem_top').removeClassName('hide');
			$('subcontaineritem_left').removeClassName('hide');
			$('subcontaineritem_right').removeClassName('hide');
			$('subcontaineritem_bottom').removeClassName('hide');
			$('navmenu_li_last').removeClassName('hide');
		}
	}
});

/**
*	Callback function where invoke all functions to be start when window is loaded
*
*/
function domLoaded(event)
{
	var oMenu = new Menu();
}

/**
*	Triggering the start of the callback which is responsable of all functions to be
*	started when window is loaded
*/
Event.observe(window, 'load', domLoaded );

var Woning = Class.create(
{
	aItems				: [],
	iNumBlocks			: null,
	iNumTotalItems		: null,
	iNumItemsPerBlock	: 3,
	iCurrentImageID		: '',	// id of the actual active DOM object { 'home_woningaanbod_'+iCurrentID}
	iCurrentID			: 0,	// Position order id of the actual active DOM object
	iCurrentBlockID		: 0,
	iBlockID			: 0,	// ID of the DOM block items container
	iOldBlockID			: 0,	// ID of the previous viewed block
	iTotBlocks			: 0,	// Total number of blocks
	bPaused				: true,
	iSpeed				: 5,
	sNextButton			: 'button_next',
	sPrevButton			: 'buttonn_prev',
	bImageReelShow		: false,
	sActiveBlock		: null,
	
	/**
	 * Standard prototype initialize contructor
	 */
	initialize: function()
	{
		$('woningaanbod_scroll_left').setOpacity(0.5);
		$('woningaanbod_scroll_rigth').setOpacity(0.5);
		
		Event.observe( window, 'load', function(){ oWoning.domLoaded(); } );
		
		return true;
	},
	
	domLoaded: function()
	{
		oWoning.retriveItems();
		oWoning.unsetAllItems();
		
		if(oWoning.iNumTotalItems > 0)
		{
			// At the beginning, the active item is always the first of the 3 visible items
			oWoning.iCurrentImageID = oWoning.aItems[0].id;
			oWoning.iCurrentID = 1;
			oWoning.iBlockID = 1;
			oWoning.iOldBlockID = 1;
			
			// Set the transparency of the buttons to 100 because we can switch between elements
			$('woningaanbod_scroll_left').setOpacity(1.0);
			$('woningaanbod_scroll_rigth').setOpacity(1.0);
			
			// Show the first block of items
			$('block_' + oWoning.iBlockID).setStyle({display: 'block' });
			
			// Show as active the first item
			$( 'image_'+oWoning.iCurrentID ).setOpacity(1.0);
			
			// Assign the switch-function to the buttons "Next item" and "Previous item".
			Event.observe('woningaanbod_scroll_left', 'click', oWoning.switchPrev);
			Event.observe('woningaanbod_scroll_rigth', 'click', oWoning.switchNext);
			
			$$('div.aanbod_block').each(function(oItem){
				Event.observe(oItem, 'mouseover', oWoning.selectAsActive);
				Event.observe(oItem, 'mouseout', function(){
					oWoning.iIntervalID = setInterval(oWoning.intervalHandler, oWoning.iSpeed*1000);
				})
			});
			
			// Triggering the start of the carusel
			oWoning.iIntervalID = setInterval(oWoning.intervalHandler, oWoning.iSpeed*1000);	
		}
		
	},
	retriveItems: function()
	{
		oWoning.aItems = $$('div.aanbod_block');
		oWoning.iNumTotalItems = oWoning.aItems.length;
		oWoning.iTotBlocks = (oWoning.iNumTotalItems / oWoning.iNumItemsPerBlock) - (oWoning.iNumTotalItems % oWoning.iNumItemsPerBlock);
	},
	/**
	*	Set the opacity of all items to 'inactive' state
	*/
	unsetAllItems: function()
	{
		for(var i = 0; i < oWoning.aItems.length; i++)
		{
			oWoning.aItems[i].removeClassName('hide');
			$( 'image_'+(i+1) ).setOpacity(0.6);
		}
	},
	/**
	*	Set actual item as the active one
	*
	*/
	selectAsActive: function()
	{
		oWoning.pause();
		oWoning.unsetActive();
		// ID number to make active.
		oWoning.iCurrentID = this.id.substring(18, this.id.length);
		$( 'image_'+oWoning.iCurrentID ).setOpacity(1.0);
	},
	/**
	*	Unselect actual active item.
	*/
	unsetActive: function()
	{
		$( 'image_'+oWoning.iCurrentID ).setOpacity(0.6);
	},
	/**
	*	Select the previous item as the active item
	* 	@return void
	*/
	switchPrev: function()
	{
		// Show as inactive the last active item
		$( 'image_'+ oWoning.iCurrentID ).setOpacity(0.6);
		
		if(oWoning.iCurrentID == 1)
		{
			// We are on the last item of the array and the next is the first of the list
			oWoning.iCurrentID = oWoning.iNumTotalItems;
		}
		else
		{
			// Just increase the number of 1 unit
			oWoning.iCurrentID--;
		}
		
		// Show as active the new active selected item
		$( 'image_'+ oWoning.iCurrentID ).setOpacity(1.0);
		
		oWoning.iOldBlockID = oWoning.iBlockID;
		
		// Updating the active blockID
		oWoning.updateBlockID(-1);
		
		// Positioning correctly the actual active block
		oWoning.slideView('left');
	},
	/**
	*	Select the next item as the active item
	* 	@return void
	*/
	switchNext: function()
	{
		// Show as inactive the last active item
		$( 'image_'+ oWoning.iCurrentID ).setOpacity(0.6);
		if(oWoning.iCurrentID == oWoning.iNumTotalItems)
		{
			// We are on the last item of the array and the next is the first of the list
			oWoning.iCurrentID = 1;
		}
		else
		{
			// Just increase the number of 1 unit
			oWoning.iCurrentID++;
		}
		// Show as active the new active selected item
		$( 'image_'+ oWoning.iCurrentID ).setOpacity(1.0);
		
		oWoning.iOldBlockID = oWoning.iBlockID;
		
		// Updating the active blockID
		oWoning.updateBlockID(1);
		
		// Positioning correctly the actual active block
		oWoning.slideView('right');
	},
	/**
	*	Updating the actual blockID
	*	@param integer iInt		If '1' then moves to the next item.
	*							If '-1'  then moves to the previous item.							
	*/
	updateBlockID: function(iInt)
	{
		if(iInt == 1)
		{
			if(oWoning.iCurrentID%3 == 1)
			{
				// Calculate the actual blockID when moving to the right
				oWoning.iBlockID = (Math.floor(oWoning.iCurrentID/3)  )+1;
			}
		}
		else if(iInt == -1)
		{
			if(oWoning.iCurrentID%3 == 0)
			{
				// Calculate the actual blockID when moving to the left
				oWoning.iBlockID = Math.floor(oWoning.iCurrentID/3);
			}
		}
	},
	pause: function()
	{
		var iInt = window.clearInterval(oWoning.iIntervalID);
	},
	
	/**
	*	Triggers the starting of the active selection-item
	* 	@return void
	*/
	intervalHandler: function()
	{
		oWoning.switchNext();
	},
	
	/**
	*	Slide to the right or left the 3 items to switch on the previous max. 3 items
	*
	*/
	slideView: function(sDirection)
	{
		if(oWoning.iBlockID != oWoning.iOldBlockID)
		{
			// Resetting the queue of eventual not jet executed effects
			Effect.Queue.each(function(e) { e.cancel() });

			new Effect.Fade('block_'+oWoning.iOldBlockID, {
			//new Effect.SlideUp('block_'+oWoning.iOldBlockID, {
				duration: 0.4,
				//scaleContent: false, // Default: true
				//scaleX: false, // Default: true
				//scaleY: true, // Default: true
				//scaleFrom: 100,
				//scaleTo: 0,
				//scaleFromCenter: false, // Default:false
				afterFinish: function()
				{
					$('block_'+ oWoning.iBlockID).setStyle( {display: 'none'} );
					
					//new Effect.SlideDown('block_'+oWoning.iBlockID, {
					new Effect.Appear('block_'+oWoning.iBlockID, {
						duration: 0.4
					});
				}
			});
			
			return false;
		}
	}
});


function showI(sRemarkName, oObj)
{
	
	var sHtml = ''
	sHtml += '	<div class="remark_close">';
	sHtml += '		<div class="button right">';
	sHtml += '			<a href="javascript:void(0);" onclick="$(\'remark_'+ sRemarkName +'\').toggle();" title="close">';
	sHtml += '				<span class="button_left"></span>';
	sHtml += '				<span class="button_center">X</span>';
	sHtml += '				<span class="button_right"></span>';
	sHtml += '				<div class="clear"></div>';
	sHtml += '			</a>';
	sHtml += '		</div>';
	sHtml += '	</div>';
	sHtml += '	<div id="remark_'+ sRemarkName +'_title" class="remark_title">'+ oObj.title +'</div>';
	sHtml += '	<div id="remark_'+ sRemarkName +'_text" class="remark_text">'+ oObj.content +'</div>';
	sHtml += '	<div class="clear"></div>';
	
	$('remark_'+ sRemarkName).innerHTML = sHtml
	$('remark_' + sRemarkName).toggle();
}