(function($) {
	// Een uitbreiding op de nivoSlider die de thumbnails in een "scrollable" zet.
	$.fn.thumbnailScroller = function() {
		$(this).each(function() {
			var controlNav = $('.nivo-controlNav', this);
			
			// thumbnails > (prev, (scrollable > items), next)
			var prev, next, scrollable;
			
			controlNav.wrap('<div class="rd-scrollable" />');
			scrollable = $('.rd-scrollable', this);
			scrollable.wrap('<div class="rd-thumbnails" />');

			var thumnailCount = controlNav.children().length;
			var control = controlNav.children().first();
			var thumbailWidth =  control.outerWidth(true);

			controlNav.width(thumbailWidth * thumnailCount);

			if (scrollable.width() > controlNav.width()) { // Passen de thumbnails in de container?
				return; // Geen prev/next buttons tonen.
			}
			scrollable.before(prev = $('<a class="prev"></a>'));
			scrollable.after(next = $('<a class="next"></a>'));
			prev.click(function(){
				if (controlNav.position().left >= 0) { // eerste item?
					return;
				}
				controlNav.animate({
					left: '+=' + thumbailWidth
				}, 'fast');
			});
			next.click(function(){
				var scrolledWidth =  scrollable.width() - controlNav.position().left;
				if (scrolledWidth > controlNav.width()) // Zijn er geen elementen over
				{
					 return;
				}
				controlNav.animate({
					left: '-=' + thumbailWidth
				}, 'fast');
			});
		});
	};
	// De geselecteerde thumbnail weergeven in de scroller 
	$.fn.syncThumbailScroller = function ()  {
		$(this).each(function () {
			var controlNav = $('.nivo-controlNav', this);
			setTimeout(function () {

				var index = $('.active', controlNav).attr('rel');
				var thumbnailWidth =  controlNav.children().first().outerWidth(true);
				var viewportWidth = controlNav.parent().width();
				
				var offset  = index * thumbnailWidth;
				var viewportLeft = controlNav.position().left * -1;
				var viewportRight = (controlNav.position().left * -1) + viewportWidth;

				if (offset + thumbnailWidth > viewportRight) {
					// Scroll forward
					controlNav.animate({
						left: offset * -1
					}, 'slow');
				} else if (offset <  viewportLeft) {
					// Scroll back
					controlNav.animate({
						left: offset * -1
					}, 'slow');
				}
			}, 100);
		});
	};
	$(document).ready(function() {
		// De mainbanner slider
		$('.mainbanner .slider').nivoSlider({
			captionOpacity: 1,
			directionNav:false,
			controlNavThumbs:true,
			controlNavThumbsFromRel:true,
			pauseTime: 4000,
			afterLoad: function () {
				// Maak van de thumbnails een scrollable
				$('.mainbanner .slider').thumbnailScroller();
			},
			beforeChange: function() {
				$('.mainbanner .slider').syncThumbailScroller();
			}
		});

		// De impressions in de sitebar slider
		$('.impressions .slider').nivoSlider({
			directionNav:false,
			controlNavThumbs:true,
			controlNavThumbsFromRel:true,
			pauseTime: 6000,
			afterLoad: function () {
				// Maak van de thumbnails een scrollable
				$('.impressions .slider').thumbnailScroller();
			},
			beforeChange: function() {
				$('.impressions .slider').syncThumbailScroller();
			}
		});
	});

	// De Contact widget
	$('form.callme_form').submit(function () {
		var form = $(this);
		// Collect form data.
		var data = {};
		$('input', this).each(function (index, el) {
			var name = $(el).attr('name');
			if ( name == "") {
				return;
			}			
			data[name] = $(el).val();
		});
		// Show spinner
		form.html('<img src="' + THEME_URL + 'images/submit-spinner.gif" />');
		// Ajax form post.
		var url = $(this).attr('action');
		$.post(url, data, function (response) {
			// show response
			form.html(response);
		}, 'html');
		return false;
	});
})(jQuery);