;(function($) {

	$.fn.carousel = function(config) {

		/* apply supplied configuration */
		var config = $.extend({
			autoplay: true,
			directions: false,
			interval: 7000
		}, config);

    $('.carousel p').addClass('visuallyhidden'); 

		/* apply plugin functionality */
		return this.each(function(i, container) {
			var $data, $item, timer,
				$content  = $("<div class='content'/>"),
				$controls = $("<ol class='controls'/>"),
				$next     = $("<button>volgende</button>"),
				$previous = $("<button>vorige</button>"),
				$pause    = $("<li><button class='pause playing'>pauzeer</button></li>"),
				
				$allitems = []
				cid       = i,
				size      = config.items.length,
				autoplay  = function() {
					clearInterval(timer);
					timer = setInterval(function() {
						$controls.find("button.active").data("current") != size ?
							$controls.find("li:has(button.active)").next("li:has(button.item)").find("button").click() :
							$controls.find("li:has(button.item):first > button").click();
					}, config.interval);
				};

			$.each(config.items, function(i, item) {
				var nr = i + 1,
					$button = $("<button id='teaser" + cid + nr + "' class='item'>" + nr + "</button>"),
					$label  = $("<label for='teaser" + cid + nr + "'>" + item.text + "</label>").hide();

				$button.click(function(e) {

					$controls.find("button.active").removeClass("active");
					$controls.find("label").hide();
					$(this).data("current", nr).addClass("active").next("label").css('display', 'inline');

					var $wrapper = $("<div class='wrapper'/>"),
						$current = $content.find("div.wrapper");
						
					
					if(typeof $allitems[item.id] != "undefined") {
            $item= $allitems[item.id];
          } else {
            $item = $data.find("#" + item.id);
            $allitems[item.id]= $item;
          }

					if (!$current.length == 0) {
						$current.fadeOut("slow" /*, function() { $current.remove(); } */);
						
						if($("#" + item.id).is('*')) {
						  $("#" + item.id).parent('.wrapper').fadeIn("slow")
						} else {
						  $content.append($wrapper.append($item.clone()).fadeIn("slow"));
						}
					} else {
						$content.append($wrapper.append($item.clone()));
					}

					if (config.autoplay) { autoplay(); }

					e.preventDefault();
				});

				$controls.append($("<li/>").append($button, $label));


        $pause.find('button').click(function(e) {
            if($(this).hasClass('playing')) {
     					   clearInterval(timer);
                 $(this).text('ga door');
                 $(this).removeClass('playing');
            } else {
      					 timer = setInterval(function() {
        					 $controls.find("button.active").data("current") != size ?
        					 $controls.find("li:has(button.active)").next("li:has(button.item)").find("button").click() :
        					 $controls.find("li:has(button.item):first > button").click();
      					 }, config.interval);
      					 $(this).text('pauzeer');
      					 $(this).addClass('playing');
            }
            return false;
        }).parent().appendTo($controls);

        


			});

			if (config.directions) {
				$next.click(function(e) {
					$("button.active").data("current") != size ?
						$controls.find("li:has(button.active)").next("li:has(button.item)").find("button").click() :
						$controls.find("li:has(button.item):first > button").click();
					if (config.autoplay) { autoplay(); }
					e.preventDefault();
				});

				$previous.click(function(e) {
					$("button.active").data("current") != 1 ?
						$controls.find("li:has(button.active)").prev("li:has(button.item)").find("button").click() :
						$controls.find("li:has(button.item):last > button").click();
					if (config.autoplay) { autoplay(); }
					e.preventDefault();
				});

				$controls.prepend($("<li class='previous'/>").append($previous)).append($("<li class='next'/>").append($next));
			}


			var $carousel= $(this);
			$.get(config.url, function(data) {
			  $carousel.empty().append($content, $controls);
				$data = $(data);
				$controls.find("button.item:first").click();
			});
			
      

		});

	};

})(jQuery);