$(document).ready(function() 
{

});

(function($) {
	$.fn.toggler = function(options)
	{
		if (!this.length) { return this; }
		$.toggler = 
		{
			defaults: {
				active: 0,
				closeText: "Sluiten",
				openText: "Antwoord",
				divClick: "question",
				divInfo: "answer",
				divToggle: "toggle"
			}
		};
		gg = $.extend($.toggler.defaults, options || {});
		var id = 0;
		return this.each(function() 
		{
			id++;
			var trigger = $(this),
				screen = $(window),
				$divClick = $('.'+gg.divClick, trigger),
				$divInfo = $('.'+gg.divInfo, trigger),
				$button = $('<div class="'+gg.divToggle+'"><span></span><img></div>'),
				$divToggle = $('.'+gg.divToggle, trigger);

			$(this).prepend($button);

			if(gg.active==id)
			{	
				$(trigger).addClass("active");
				$('.'+gg.divToggle, trigger).addClass("active");
				$divInfo.slideDown("fast");			
			}

			var visibile;
			visibile = $divInfo.is(':visible');		

			var toggle = $('.'+gg.divToggle, trigger);
			toggle.children("span").html(((visibile) ? gg.closeText : gg.openText));
			toggle.children("img").attr('class', ((visibile) ? 'up' : 'down'));
			
			$(this).click(function(event) {
				event.preventDefault();
				$divInfo.slideToggle("fast", function() 
				{
					visibile = $(this).is(':visible');
					if(visibile)
					{
						toggle.children("img").attr('class', 'up');
						toggle.children("span").html(gg.closeText);
					}
					else
					{
						toggle.children("img").attr('class', 'down');
						toggle.children("span").html(gg.openText);
					}
				});
				$('.'+gg.divToggle, trigger).toggleClass("active");

			});
		});
	};
})(jQuery);