(function($) {
	$(function() {
		var showFeature = function(feature) {
			var feature = $(feature),
				button = $('#feature-' + feature.attr('id').match(/^feature-image-(\d+)$/)[1]),
				lastFeature = $('#feature .feature-image-active');
			$('#feature .feature-status-active').removeClass('feature-status-active');
			button.parents('li:first').addClass('feature-status-active');

			lastFeature.fadeOut(700, function() {
				lastFeature.removeClass('feature-image-active');
			});
			feature.fadeIn(700, function() {
				feature.addClass('feature-image-active');
			});
		},
			buttons = $('#feature .feature-status button');

		var slideshow = function() {
			if($('#feature').hasClass('clicked')) {
				return;
			}
			var index = buttons.index($('#feature .feature-status-active button')[0]);
			index = index == buttons.length - 1 ? 0 : index + 1;
			var feature = $('#feature-image-' + $(buttons[index]).attr('id').match(/^feature-(\d+)$/)[1]);
			showFeature(feature);
			setTimeout(slideshow, 12000);
		};

		setTimeout(slideshow, 12000);
		
		

		$('#feature-image').live('click', function(e) {
			$('#feature').addClass('clicked');
		});
		$('#feature button').live('click', function(e) {
			$('#feature').addClass('clicked');
			var button = $(e.target).blur(), feature, index;
			if(button.is('#feature-previous')) {
				index = buttons.index($('#feature .feature-status-active button')[0]);
				index = index == 0 ? buttons.length - 1 : index - 1;
				feature = $('#feature-image-' + $(buttons[index]).attr('id').match(/^feature-(\d+)$/)[1]);
			} else if(button.is('#feature-next')) {
				index = buttons.index($('#feature .feature-status-active button')[0]);
				index = index == buttons.length - 1 ? 0 : index + 1;
				feature = $('#feature-image-' + $(buttons[index]).attr('id').match(/^feature-(\d+)$/)[1]);
			} else if(button.attr('id').match(/^feature-\d+$/)) {
				feature = $('#feature-image-' + button.attr('id').match(/^feature-(\d+)$/)[1]);
			}
			showFeature(feature);
		});
	});
})(jQuery);