var pfzw = {
	settings: {
		duration: 600
	},
	
	element: {},
	component: {},
	references: []
};

$(function ()
{
	pfzw.initializeElements ();
	
	$ (document.documentElement).keydown (function (e)
	{
		if (e.altKey && e.keyCode == 71)
		{
			e.preventDefault ();
			pfzw.toggleDebugMode ();
		}
	});
	
	pfzw.qgo = new pfzw.component.QgoLightbox ();
	
	$ ('a.print').click (function (e)
	{
		e.preventDefault ();
		window.print ();
	});
	
	$ ('html.ie .content img').each (function ()
	{
		var figure = $ ('<div class="figure"/>');
		
		$ (this).wrap (figure);
		
		$ ('<div class="left-top"/>').appendTo (this.parentNode);
		$ ('<div class="right-top"/>').appendTo (this.parentNode);
		$ ('<div class="left-bottom"/>').appendTo (this.parentNode);
		$ ('<div class="right-bottom"/>').appendTo (this.parentNode);
	});
	
	$ ('html.ie .carousel .slide').each (function ()
	{
		$ ('<div class="left-top"/>').appendTo (this);
		$ ('<div class="right-top"/>').appendTo (this);
		$ ('<div class="left-bottom"/>').appendTo (this);
		$ ('<div class="right-bottom"/>').appendTo (this);
	});
	
	$ ('html.ie .banner').each (function ()
	{
		$ ('<div class="left-top"/>').appendTo (this);
		$ ('<div class="right-top"/>').appendTo (this);
		$ ('<div class="left-bottom"/>').appendTo (this);
		$ ('<div class="right-bottom"/>').appendTo (this);
	});
});

pfzw.toggleDebugMode = function ()
{
	$ ('html').toggleClass ('debug');
};

/**
 * Instantiate objects for any html elements that define a
 * constructor. The method marks elements as instantiated,
 * so it can safely be called again and again, for use in
 * AJAX calls or other calls that might spawn new elements
 * that need an object instanstiated.
 */

pfzw.initializeElements = function ()
{
	$ ('[class*=constructor-]').each (function ()
	{
		if (!$ (this).data ('constructor'))
		{
			var constructor = this.className.replace (/^.*?constructor-([^\s]+).*?$/, '$1');
			$ (this).attr ('data-constructor', constructor);
		}
	});
	
	$ ('[data-constructor]').each (function ()
	{
		if (!$ (this).data ('instantiated'))
		{
			if (pfzw.component[$ (this).data ('constructor')] !== undefined)
			{
				$ (this).attr ('data-instance', pfzw.references.length);
				pfzw.references.push (new pfzw.component[$ (this).data ('constructor')] (this));
				
				//new pfzw.component[$ (this).data ('constructor')] (this);
				$ (this).attr ('data-instantiated', true);
			}
			
			if (pfzw.element[$ (this).data ('constructor')] !== undefined)
			{
				new pfzw.element[$ (this).data ('constructor')] (this);
				$ (this).attr ('data-instantiated', true);
			}
		}
	});
};





/**
 * The SelectField object enhances a select field construction
 * by wrapping its <select/> element in a small html structure
 * for styling purposes and by adding its field validator.
 *
 * @param {element} element
 *   The select field construction's root element.
 *

pfzw.component.SelectField = function (element)
{
	var self = this;
	
	this.element = element;
	
	$ ('select', element).wrap ('<span class="wrapper"><span/></span>');
	
	$ ('<div class="value"/>').text ($ ('option:selected', $ ('select', element)).text ()).insertBefore ('.wrapper select', element);
	
	var wrapper = $ ('.wrapper', element);
	this.wrapper = wrapper;
	
	$ ('select', element).focus (function (e)
	{
		setTimeout (function ()
		{
			self.focus ();
		}, 10);
	});
	
	$ ('select', element).blur (function (e)
	{
		self.blur ();
	});
	
	$ ('select', element).change (function (e)
	{
		self.updateValue ();
	});
	
	$ ('select', element).keyup (function (e)
	{
		self.updateValue ();
	});
};

pfzw.component.SelectField.prototype.validate = function ()
{
	return true;
};

pfzw.component.SelectField.prototype.focus = function ()
{
	this.wrapper.addClass ('wrapper-focus');
};

pfzw.component.SelectField.prototype.blur = function ()
{
	this.wrapper.removeClass ('wrapper-focus');
};

pfzw.component.SelectField.prototype.updateValue = function ()
{
	$ ('.value', this.element).text ($ ('option:selected', $ ('select', this.element)).text ());
};
*/


















/**
 *
 */

pfzw.component.DateField = function (element)
{
	$ ('input:text', element).each (function ()
	{
		new pfzw.element.Input (this);
	});
}

/**
 *
 */

pfzw.component.StreetField = function (element)
{
	$ ('input:text', element).each (function ()
	{
		new pfzw.element.Input (this);
	});
};

/**
 * @param {element} element
 * The input field’s root element.
 */

pfzw.component.InputField = function (element)
{
	this.element = element;
	
	$ ('input:text', element).each (function ()
	{
		new pfzw.element.Input (this);
	});
	
	if ($ (element).data ('validate'))
	{
		//alert ($ (element).data ('validate').split (','));
		
		//pfzw.validator.Mandatory.process ('');
	}
};

pfzw.component.InputField.prototype.showError = function (message)
{
	$ ('<p class="error-message"/>').text (message).appendTo (this.element);
}

pfzw.component.InputField.prototype.validate = function ()
{
	var pass = true;
	
	$ (this.element).removeClass ('input-field-error');
	$ ('.error-message', this.element).remove ();
	
	if (!$ (this.element).data ('validate'))
	{
		return true;
	}
	
	var self = this;
	
	$ ($ (this.element).data ('validate').split (',')).each (function ()
	{
		if (this == 'mandatory')
		{
			var failMandatory = false;
			
			$ ('input:text', self.element).each (function ()
			{
				if (!pfzw.validator.Mandatory ($ (this).val ()))
				{
					if (!failMandatory)
					{
						$ (self.element).addClass ('input-field-error');
						self.showError ('Dit veld is verplicht.');
						failMandatory = true;
						pass = false;
					}
				}
			});
		}
		
		if (this == 'email')
		{
			$ ('input:eq(0)', self.element).each (function ()
			{
				if ($ (this).val ())
				{
					if (!pfzw.validator.EmailAddress ($ (this).val ()))
					{
						$ (self.element).addClass ('input-field-error');
						self.showError ('Dit is geen geldig e-mailadres.');
						pass = false;
					}
				}
			});
		}
		
		if (this == 'date')
		{
			var day = $ ('input:eq(0)', self.element).val ();
			var month = $ ('input:eq(1)', self.element).val ();
			var year = $ ('input:eq(2)', self.element).val ();
			
			if (day && month && year)
			{
				day = parseInt (day, 10);
				month = parseInt (month, 10);
				year = parseInt (year, 10);
				
				var date = new Date (year, month - 1, day);
				
				if (date.getFullYear () != year || date.getMonth () + 1 != month || date.getDate () != day)
				{
					$ (self.element).addClass ('input-field-error');
					self.showError ('Dit is geen geldige datum.');
					pass = false;
				}
			}
		}
	});
	
	return pass;
};

/**
 *
 */

pfzw.component.Form = function (element)
{
	var self = this;
	
	this.element = element;
	
	$ (element).submit (function (e)
	{
//e.preventDefault ();
		if (!self.validate ())
		{
			e.preventDefault ();
		}
	});
};

pfzw.component.Form.prototype.validate = function ()
{
	var pass = true;
	
	$ ('.field.input-field', this.element).each (function ()
	{
		if (!pfzw.references [$ (this).data ('instance')].validate ())
		{
			pass = false;
		}
	});
	
	return pass;
};

/**
 *
 */

pfzw.base = {};

pfzw.base.Validator = function ()
{
	this.prototype = pfzw.base.Validator.prototype;
};

pfzw.base.Validator.prototype.process = function (string)
{
	return true;
};

/**
 *
 */

pfzw.validator = {};

//pfzw.validator.Mandatory = new pfzw.base.Validator ();

pfzw.validator.Mandatory = function (string)
{
	if (!string.length)
	{
		return false;
	}
	
	return true;
};

//pfzw.validator.EmailAddress = new pfzw.base.Validator ();

pfzw.validator.EmailAddress = function (string)
{
	var regExp = new RegExp ('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?');
	
	if (!regExp.test (string))
	{
		return false;
	}
	
	return true;
};

/**
 *
 *

pfzw.component.InputField = function (element)
{
	$ ('input:text', element).each (function ()
	{
		new pfzw.element.Input (this);
	});
};

/**
 *
 */

pfzw.component.TextareaField = function (element)
{
	var self = this;
	
	this.element = $ (element);
	
	$ ('textarea:first', this.element).wrap ('<span class="custom-textarea-field"/>');
	
	if ($ ('textarea:first', this.element).attr ('disabled'))
	{
		this.element.addClass ('textarea-field-disabled');
	}
	
	if ($ ('textarea:first', element).attr ('title'))
	{
		$ ('<label class="hint"/>').attr ('for', $ ('textarea:first', element).attr ('id')).text ($ ('textarea:first', element).attr ('title')).appendTo ('.custom-textarea-field', element);
	}
	
	$ ('textarea:first', this.element).focus (function (e)
	{
		self.focus ();
	});
	
	$ ('textarea:first', this.element).blur (function (e)
	{
		self.blur ();
	});
	
	$ ('textarea:first', this.element).change (function (e)
	{
		self.change ();
	});
	
	this.change ();
};

pfzw.component.TextareaField.prototype.focus = function ()
{
	this.element.addClass ('textarea-field-focus');
};

pfzw.component.TextareaField.prototype.blur = function ()
{
	this.element.removeClass ('textarea-field-focus');
};

pfzw.component.TextareaField.prototype.change = function ()
{
	if ($ ('textarea:first', this.element).val ())
	{
		this.element.addClass ('textarea-field-value');
	}
	
	else
	{
		this.element.removeClass ('textarea-field-value');
	}
};

/**
 *
 */

pfzw.component.SelectField = function (element)
{
	var self = this;
	
	this.element = $ (element);
	
	$ ('select:first', this.element).wrap ('<span class="custom-select-field"/>');
	$ ('.custom-select-field', this.element).append ('<span class="value"/>');
	
	if ($ ('select:first', this.element).attr ('disabled'))
	{
		this.element.addClass ('select-field-disabled');
	}
	
	$ ('select:first', this.element).focus (function (e)
	{
		setTimeout (function ()
		{
			self.focus ();
		}, 10);
	});
	
	$ ('select:first', this.element).blur (function (e)
	{
		self.blur ();
	});
	
	$ ('select:first', this.element).change (function (e)
	{
		self.change ();
	});
	
	$ ('select:first', this.element).keyup (function (e)
	{
		self.change ();
	});
	
	this.change ();
};

pfzw.component.SelectField.prototype.focus = function ()
{
	this.element.addClass ('select-field-focus');
};

pfzw.component.SelectField.prototype.blur = function ()
{
	this.element.removeClass ('select-field-focus');
};

pfzw.component.SelectField.prototype.change = function ()
{
	$ ('.value', this.element).text ($ ('select:first option:selected', this.element).text ());
};

/**
 *
 */

pfzw.component.RadioField = function (element)
{
	var self = this;
	
	this.element = $ (element);
	
	$ ('input', element).each (function ()
	{
		$ (this).wrap ('<span class="custom-radio-button"/>');
		
		if ($ (this).attr ('disabled'))
		{
			$ (this.parentNode).addClass ('custom-radio-button-disabled');
		}
		
		$ (this).focus (function (e)
		{
			self.focus (this);
		});
		
		$ (this).blur (function (e)
		{
			self.blur (this);
		});
		
		$ (this).change (function (e)
		{
			self.change ();
		});
		
		$ (this).keyup (function (e)
		{
			self.change ();
		});
		
		self.change ();
	});
};

pfzw.component.RadioField.prototype.focus = function (radioButton)
{
	$ (radioButton.parentNode).addClass ('custom-radio-button-focus');
};

pfzw.component.RadioField.prototype.blur = function (radioButton)
{
	$ (radioButton.parentNode).removeClass ('custom-radio-button-focus');
};

pfzw.component.RadioField.prototype.change = function ()
{
	$ ('input', this.element).each (function ()
	{
		if ($ (this).is (':checked') === true)
		{
			$ (this.parentNode).addClass ('custom-radio-button-checked');
		}
		
		else
		{
			$ (this.parentNode).removeClass ('custom-radio-button-checked');
		}
	});
};

/**
 *
 */

pfzw.component.CheckboxField = function (element)
{
	var self = this;
	
	this.element = $ (element);
	
	$ ('input', element).each (function ()
	{
		$ (this).wrap ('<span class="custom-checkbox"/>');
		
		if ($ (this).attr ('disabled'))
		{
			$ (this.parentNode).addClass ('custom-checkbox-disabled');
		}
		
		$ (this).focus (function (e)
		{
			self.focus (this);
		});
		
		$ (this).blur (function (e)
		{
			self.blur (this);
		});
		
		$ (this).change (function (e)
		{
			self.change ();
		});
		
		$ (this).keyup (function (e)
		{
			self.change ();
		});
		
		self.change ();
	});
};

pfzw.component.CheckboxField.prototype.focus = function (checkbox)
{
	$ (checkbox.parentNode).addClass ('custom-checkbox-focus');
};

pfzw.component.CheckboxField.prototype.blur = function (checkbox)
{
	$ (checkbox.parentNode).removeClass ('custom-checkbox-focus');
};

pfzw.component.CheckboxField.prototype.change = function ()
{
	$ ('input', this.element).each (function ()
	{
		if ($ (this).is (':checked') === true)
		{
			$ (this.parentNode).addClass ('custom-checkbox-checked');
		}
		
		else
		{
			$ (this.parentNode).removeClass ('custom-checkbox-checked');
		}
	});
};


















pfzw.component.NewsOverview = function (element)
{
	var self = this;
	
	this.element = $ (element);
	
	$ ('.news-item', this.element).each (function ()
	{
		$ (this).mouseover (function (e)
		{
			self.mouseOver (this);
		});
		
		$ (this).mouseout (function (e)
		{
			self.mouseOut (this);
		});
	});
};

pfzw.component.NewsOverview.prototype.mouseOver = function (newsItem)
{
	$ (newsItem).addClass ('news-item-hover');
};

pfzw.component.NewsOverview.prototype.mouseOut = function (newsItem)
{
	$ (newsItem).removeClass ('news-item-hover');
};

/**
 * Accordeon
 */

pfzw.component.Accordeon = function (element)
{
	$ ('.section', element).each (function ()
	{
		var section = $ (this);
		
		var closedHeight = section.height ();
		
		section.addClass ('section-expanded');
		
		var openHeight = section.height () + 4;
		
		section.removeClass ('section-expanded');
		
		section.attr ('data-closed-height', closedHeight);
		
		$ ('h2:first', section).click (function (e)
		{
			if (section.hasClass ('section-expanded'))
			{
				section.animate ({
					height: closedHeight
				}, function ()
				{
					section.removeClass ('section-expanded');
					section.removeClass ('section-last-expanded');
				});
			}
			
			else
			{
				$ ('.section-expanded', element).each (function ()
				{
					$ (this).animate ({
						height: $ (this).data ('closed-height')
					}, function ()
					{
						$ (this).removeClass ('section-expanded');
						$ (this).removeClass ('section-first-expanded');
						$ (this).removeClass ('section-last-expanded');
					});
				});
				
				section.animate ({
					height: openHeight
				});
				
				section.addClass ('section-expanded');
				
				if (section.hasClass ('section-first'))
				{
					section.addClass ('section-first-expanded');
				}
				
				if (section.hasClass ('section-last'))
				{
					section.addClass ('section-last-expanded');
				}
			}
		});
	});
};

/**
 *
 */

pfzw.component.HeaderSearch = function (element)
{
	var self = this;
	
	this.element = $ (element);
	
	$ ('input:first', element).wrap ('<span class="custom-input-field"/>');
	
	if ($ ('input:first', element).attr ('title'))
	{
		$ ('<label class="hint"/>').attr ('for', $ ('input:first', element).attr ('id')).text ($ ('input:first', element).attr ('title')).appendTo ($ ('.custom-input-field:first', element));
	}
	
	$ ('input:first', this.element).focus (function (e)
	{
		self.focus ();
	});
	
	$ ('input:first', this.element).blur (function (e)
	{
		self.blur ();
	});
	
	$ ('input:first', this.element).change (function (e)
	{
		self.change ();
	});
	
	this.change ();
	
	$ (element).submit (function (e)
	{
		e.preventDefault ();
		pfzw.qgo.show ($ ('input:first', self.element).val ());
	});
};

pfzw.component.HeaderSearch.prototype.focus = function ()
{
	this.element.addClass ('header-search-focus');
};

pfzw.component.HeaderSearch.prototype.blur = function ()
{
	this.element.removeClass ('header-search-focus');
};

pfzw.component.HeaderSearch.prototype.change = function ()
{
	if ($ ('input:first', this.element).val ())
	{
		this.element.addClass ('header-search-value');
	}
	
	else
	{
		this.element.removeClass ('header-search-value');
	}
};

/**
 * @class QgoLightbox
 *   The QgoLightbox component provides a dialog that shows
 *   a tabbed component that contains Q-go functionality in
 *   iframes.
 */

pfzw.component.QgoLightbox = function ()
{
	var self = this;
	
	this.visible = false;
	
	this.qgo = $ ('<div class="qgo"/>').hide ().appendTo ('body');
	
	this.glass = $ ('<div class="glass"/>').appendTo (this.qgo);
	this.dialog = $ ('<div class="dialog"/>').appendTo (this.qgo);
	
	this.glass.click (function (e)
	{
		self.hide ();
	});
	
	pfzw.initializeElements ();
};

/**
 * @method initialize
 *   Initialize the dialog.
 */

pfzw.component.QgoLightbox.prototype.initialize = function (question)
{
	var self = this;
	
	this.dialog.html ('');
	
	this.closeButton = $ ('<a class="close">Sluit</a>').appendTo (this.dialog);
	
	this.closeButton.click (function (e)
	{
		e.preventDefault ();
		self.hide ();
	});
	
	this.dialog.append ('\
		<div class="tabbed-component" data-constructor="TabbedComponent">\
			<div class="tab" data-title="Vraag stellen">\
				<h2>Zoekresultaten</h2>\
				<iframe src="http://interface.q-go.net/pggm/start.php?sSiteRef=PFZW_Part&q=' + question + '"></iframe>\
			</div>\
			<div class="tab" data-title="Top 10">\
				<h2>Top 10 veelgestelde vragen</h2>\
				<iframe src="http://interface.q-go.net/pggm/faq.php?sSiteRef=PFZW_Part"></iframe>\
			</div>\
			<div class="tab" data-title="Categorie&euml;n">\
				<h2>Overzicht op categorie</h2>\
				<iframe src="http://interface.q-go.net/pggm/faq_cat.php?sSiteRef=PFZW_Part"></iframe>\
			</div>\
		</div>\
	');
}

/**
 * @method show
 *   Show the Q-go lightbox.
 */

pfzw.component.QgoLightbox.prototype.show = function (question)
{
	if (!this.initialized)
	{
		this.initialize (question);
		pfzw.initializeElements ();
	}
	
	this.visible = true;
	
	this.qgo.show ();
	
	this.glass.hide ().fadeTo (250, .5);
	
	if (!$ ('html').hasClass ('ie'))
	{
		this.dialog.hide ().fadeIn (500);
	}
};

/**
 * @method hide
 *   Hide the Q-go lightbox.
 */

pfzw.component.QgoLightbox.prototype.hide = function ()
{
	var self = this;
	
	if ($ ('html').hasClass ('ie'))
	{
		this.glass.fadeOut (250, function ()
		{
			self.qgo.hide ();
		});
	}
	
	else
	{
		this.glass.fadeOut (250);
		
		this.dialog.fadeOut (500, function ()
		{
			self.qgo.hide ();
		});
	}
};

/**
 *
 */

pfzw.component.TabbedComponent = function (element)
{
	var self = this;
	
	this.element = element;
	
	this.tabs = $ ('<div class="navigation"/>').appendTo (element);
	
	$ ('.tab', element).each (function (index)
	{
		var tab = $ ('<div class="item"/>').text ($ (this).data ('title')).wrapInner ('<span/>').appendTo (self.tabs);
		
		if (index === 0)
		{
			tab.addClass ('active');
		}
		
		tab.click (function (e)
		{
			self.show (index);
		});
	});
};

pfzw.component.TabbedComponent.prototype.show = function (tabIndex)
{
	$ ('.tab:visible', this.element).fadeOut (250);
	$ ('.tab:eq(' + tabIndex + ')', this.element).fadeIn (250);
	
	$ ('.item.active', this.element).removeClass ('active');
	$ ('.item:eq(' + tabIndex + ')', this.element).addClass ('active');
};

/**
 *
 */

pfzw.component.LargeButton = function (element)
{
	$ (element).wrap ('<span class="custom-large-button"/>').wrap ('<span/>');
};







/**
 *
 */

pfzw.component.Overview = function (element)
{
	$ ('.overview-item', element).each (function ()
	{
		var overviewItem = $ (this);
		
		overviewItem.mouseover (function (e)
		{
			overviewItem.addClass ('overview-item-hover');
		});
		
		overviewItem.mouseout (function (e)
		{
			overviewItem.removeClass ('overview-item-hover');
		});
	});
};

/**
 *
 */

pfzw.component.DecisionTree = function (element)
{
	$ ('a.button', element).each (function ()
	{
		new pfzw.element.Button (this);
	});
	
	$ ('.choice', element).each (function ()
	{
		var choice = $ (this);
		
		choice.mouseover (function (e)
		{
			$ (this).addClass ('choice-hover');
		});
		
		choice.mouseout (function (e)
		{
			$ (this).removeClass ('choice-hover');
		});
	});
};

/**
 *
 */

pfzw.component.Feedback = function (element)
{
	$ ('input:submit', element).each (function ()
	{
		new pfzw.element.Button (this);
	});
	
	$ ('.no').click (function (e)
	{
		$ ('fieldset.choices', element).animate (
		{
			height: $ ('fieldset.choices', element) [0].scrollHeight,
			paddingTop: '8px',
			paddingBottom: '4px'
		}, pfzw.settings.duration);
	});
	
	$ ('.yes,input:radio', element).each (function ()
	{
		$ (this).click (function (e)
		{
			$ ('fieldset.submit', element).animate (
			{
				height: this.scrollHeight,
				paddingTop: '10px',
				paddingBottom: '10px'
			}, pfzw.settings.duration);
		});
	});
};

/**
 *
 */

pfzw.component.Carousel = function (element)
{
	var self = this;
	
	this.element = element;
	
	var nav = new pfzw.component.CarouselNavigation (this);
	
	var frame = $ ('<div class="frame"/>').appendTo (element);
	
	if ($.browser.msie && parseInt ($.browser.version) == 7)
	{
		frame.click (function (e)
		{
			location.href = $ ('.slide:eq(' + nav.currentSlide + ') a:first', element).attr ('href');
		});
	}
	
	new pfzw.component.animatedBlock ({
		type: 'accent-block',
		marginLeft: 50,
		opacity: .8,
		width: 87,
		fadeDuration: 3500,
		moveDuration: 5000,
		resizeDuration: 4000,
		moveTo: 60,
		fadeTo: .6
	}).appendTo (element);
	
	new pfzw.component.animatedBlock ({
		type: 'accent-block',
		marginLeft: 0,
		opacity: .6,
		width: 87,
		fadeDuration: 4000,
		moveDuration: 3800,
		resizeDuration: 5500
	}).appendTo (element);
	
	new pfzw.component.animatedBlock ({
		type: 'static-block',
		marginLeft: -80,
		opacity: .7,
		width: 87,
		fadeDuration: 4500,
		moveDuration: 4300,
		resizeDuration: 4500,
		fadeFrom: 0,
		fadeTo: .5
	}).appendTo (element);
};

pfzw.component.CarouselNavigation = function (carousel)
{
	var self = this;
	
	this.element = carousel.element;
	
	this.currentSlide = 0;
	this.lastSlide = $ ('.slide', carousel.element).length - 1;
	
	$ ('.slide', carousel.element).each (function (index)
	{
		if (index !== self.currentSlide)
		{
			$ (this).hide ();
			$ ('*', this).hide ();
		}
	});
	
	this.navigation = $ ('<div class="nav"/>').appendTo (carousel.element);
	
	if ($ ('html').hasClass ('ie'))
	{
		$ ('<div class="ie-nav"/>').appendTo (this.navigation);
	}
	
	var width = this.navigation.innerWidth ();
	var totalWidth = 0;
	var items = 0;
	
	$ ('.slide', carousel.element).each (function (index)
	{
		var link = $ ('<a/>').attr ('href', $ ('h2:first a:first', this).attr ('href')).text ($ (this).data ('title')).appendTo (self.navigation);
		
		link.mouseover (function (e)
		{
			self.showSlide (index);
		});
		
		totalWidth += link.innerWidth ();
		items++;
	});
	
	var itemWidth = Math.floor ((width - totalWidth) / items);
	var lastItemWidth = (width - totalWidth) - (itemWidth * (items - 1));
	
	$ ('a', this.navigation).each (function (index)
	{
		if (index === items - 1)
		{
			$ (this).css ('width', $ (this).width () + lastItemWidth);
		}
		
		else
		{
			$ (this).css ('width', $ (this).width () + itemWidth);
		}
	});
	
	this.currentBar = $ ('<div class="current"><div class="right"><div class="left"/></div></div>').appendTo (self.navigation);
	
	this.currentBar.css ({
		width: $ ('a:eq(' + this.currentSlide + ')', self.navigation).innerWidth ()
	});
	
	this.interval = setInterval (function ()
	{
		self.showNextSlide ();
	}, 5000);
};

pfzw.component.CarouselNavigation.prototype.showNextSlide = function ()
{
	var self = this;
	
	var nextSlide = this.currentSlide === this.lastSlide ? 0 : this.currentSlide + 1;
	
	this.showSlide (nextSlide);
};

pfzw.component.CarouselNavigation.prototype.showSlide = function (index)
{
	clearInterval (this.interval);
	
	var self = this;

	var nextSlide = index;

	$ ('.slide:eq(' + this.currentSlide + ') *', this.element).fadeOut (500);
	
	var del = 300;
	var dur = 1000;
	
	$ ('.slide:eq(' + this.currentSlide + ')', this.element).delay (del).fadeOut (dur);
	$ ('.slide:eq(' + nextSlide + ')', this.element).delay (del).fadeIn (dur);
	
	$ ('.slide:eq(' + nextSlide + ') *', this.element).delay (1100).fadeIn (1000);
	
	this.currentBar.delay (del).animate({
		left: $ ('a:eq(' + nextSlide + ')', self.navigation).position ().left,
		width: $ ('a:eq(' + nextSlide + ')', self.navigation).innerWidth ()
    }, 600);

    setTimeout (function (e)
    {
        $(".accent-block").removeClass (function (index, css) {
            return (css.match (/\bslide-\S+/g) || []).join(' ');
        });
        $('.accent-block').addClass('slide-'+nextSlide);
    }, 900);

	this.currentSlide = nextSlide;
	
	this.interval = setInterval (function ()
	{
		self.showNextSlide ();
	}, 8000);
};

pfzw.component.animatedBlock = function (options)
{
	this.options = $.extend ({
		type: 'static-block',
		opacity: 1,
		marginLeft: -40,
		width: 108,
		fadeDuration: 1500,
		moveDuration: 2000,
		resizeDuration: 3000,
		fadeFrom: 0,
		fadeTo: .8,
		moveFrom: 0,
		moveTo: 100
	}, options);
	
	this.element = $('<div class="animated-block ' + this.options.type + '"><div class="right"><div class="left"/></div></div>').css ({
		marginLeft: this.options.marginLeft,
		opacity: this.options.opacity,
		width: this.options.width
	});
	
	this.fadeBlock ();
	this.moveBlock ();
	this.resizeBlock ();
	
	return this.element;
};

pfzw.component.animatedBlock.prototype.fadeBlock = function ()
{
	var self = this;
	
	self.element.animate ({
		opacity: self.options.fadeFrom
	}, {
		duration: self.options.fadeDuration,
		queue: false,
		complete: function ()
		{
			self.element.animate ({
				opacity: self.options.fadeTo
			}, {
				duration: self.options.fadeDuration,
				queue: false,
				complete: function ()
				{
					self.fadeBlock ();
				}
			});
		}
	});
};

pfzw.component.animatedBlock.prototype.moveBlock = function ()
{
	var self = this;
	
	self.element.animate ({
		left: self.options.moveTo
	}, {
		duration: self.options.moveDuration,
		queue: false,
		complete: function ()
		{
			self.element.animate ({
				left: self.options.moveFrom
			}, {
				duration: self.options.moveDuration,
				queue: false,
				complete: function ()
				{
					self.moveBlock ();
				}
			});
		}
	});
};

pfzw.component.animatedBlock.prototype.resizeBlock = function ()
{
	var self = this;
	
	self.element.animate ({
		width: 70,
		marginLeft: self.options.marginLeft + 30
	}, {
		duration: self.options.resizeDuration,
		queue: false,
		complete: function ()
		{
			self.element.animate ({
				width: 130,
				marginLeft: self.options.marginLeft
			}, {
				duration: self.options.resizeDuration,
				queue: false,
				complete: function ()
				{
					self.resizeBlock ();
				}
			});
		}
	});
};

/**
 * The Search component is used for small search-like
 * forms that consist of an input element and a submit
 * button.
 *
 * @example
 *   /content-componenten/zoeken.html
 *
 * @param {element} element
 *   The component's containing element.
 */

pfzw.component.Search = function (element)
{
	$ ('input:text', element).each (function ()
	{
		new pfzw.element.Input (this);
	});
	
	$ ('input:submit', element).each (function ()
	{
		new pfzw.element.Button (this);
	});
};














/**
 * @param {element} input
 * The input element.
 */

pfzw.element.Input = function (input)
{
	var input = $ (input);
		
	var customInput = input.wrap ('<span class="custom-input"/>').wrap ('<span class="inner"/>').parent ().parent ();
	
	/** .. */
	
	if (input.attr ('disabled'))
	{
		customInput.addClass ('custom-input-disabled');
	}
	
	/** .. */
	
	if (input.attr ('title'))
	{
		$ ('<label class="hint-value"/>').attr ('for', input.attr ('id')).text (input.attr ('title')).css ('width', input.width ()).appendTo (customInput);
	}
	
	/** .. */
	
	input.focus (function (e)
	{
		customInput.addClass ('custom-input-focus');
	});
	
	input.blur (function (e)
	{
		customInput.removeClass ('custom-input-focus');
	});
	
	/** .. */
	
	input.change (function (e)
	{
		customInput.toggleClass ('custom-input-value', input.val ().length > 0);
	}).change ();
};
/**
 *
 */

pfzw.element.Button = function (element)
{
	var self = this;
	
	this.button = $ (element);
	
	this.lightButton = $ (element).hasClass ('light-button') ? true : false;
	
	if ($ ('html').hasClass ('ie'))
	{
		this.button.wrap ('<span class="custom-button"/>').wrap ('<span />');
		this.customButton = $ (element.parentNode.parentNode);
		
		if (this.lightButton)
		{
			this.customButton.addClass ('custom-light-button');
		}
		
		this.button.focus (function (e)
		{
			self.focus ();
		});
		
		this.button.blur (function (e)
		{
			self.blur ();
		});
		
		this.button.mouseover (function (e)
		{
			self.focus ();
		});
		
		this.button.mouseout (function (e)
		{
			self.blur ();
		});
	}
	
	$ (element).click (function (e)
	{
		var self = this;
		
		$ (this).addClass ('active');
		
		setTimeout (function (e)
		{
			$ (self).removeClass ('active');
		}, 50);
	});
};

pfzw.element.Button.prototype.focus = function ()
{
	this.customButton.addClass ('custom-button-focus');
	
	if (this.lightButton)
	{
		this.customButton.addClass ('custom-light-button-focus');
	}
};

pfzw.element.Button.prototype.blur = function ()
{
	this.customButton.removeClass ('custom-button-focus');
	
	if (this.lightButton)
	{
		this.customButton.removeClass ('custom-light-button-focus');
	}
};