(function($) {
	$.fn.centerslide = function(settings) {
		
		var config = {
			slideDuration: 500,
			width: 100
		};
 		if (settings) $.extend(config, settings);
		
		this.each(function() {
			var $wrapper = $(this);
			var $container = $('> div', this);
			var $arrows_center = $('> div.arrows_center', $container);
			var $arrows_detail = $('> div.arrows_detail', $container);
			var $center = $('> strong', $container);
			var $corners = $('> div', $container);
			var $ems = $('em', $container);
			var centerpos = -config.width/2 + 'px';
			var coords = {
				top_left: { top: 0, left: 0 },
				top_right: { top: 0, left: -config.width + 'px' },
				bottom_right: { top: -config.width + 'px', left: -config.width + 'px' },
				bottom_left: { top: -config.width + 'px', left: 0 }
			};
			
			// configure wrapper
			$wrapper.css({
				width: config.width + 'px',
				height: config.width + 'px',
				overflow: 'hidden'
			});
			
			// set container initial to the center position
			$container.css({
				'top': centerpos,
				'left': centerpos
			}).addClass('center');
			
			// hide center arrows 
			$arrows_center.hide();
			
			// prevent redirect of ems in center view
			$ems.click(function(e){
				e.preventDefault();
				if (!$container.hasClass('center')) $center.click();
			});
			
			// switch to center view
			$center.click(function(){
				$center.animate({ opacity: 1 });
				$container.animate({ top: centerpos, left: centerpos }, config.slideDuration, function(){
					$container.addClass('center');
					
					// handle arrows
					$arrows_detail.fadeIn();
				});

				// handle arrows
				$arrows_center.hide();
			});

			// switch to detail view
			$corners.click(function(){
				// deactivate in detail view
				if (!$container.hasClass('center')) return;
				
				// handle arrows
				$arrows_detail.hide();
				
				$container.removeClass('center');
				$center.animate({ opacity: .01 });
				
				$container.animate(coords[ $(this).attr('class') ], config.slideDuration, function(){
					// handle arrows
					$arrows_center.fadeIn();
				});
			});
			
			var pulsate = function(el) {
				el.animate({ opacity: .5 }, 'slow', function(){
					el.animate({ opacity: .8 }, 'slow', function(){
						pulsate(el);
					});
				})
			}
			pulsate($arrows_center);
			pulsate($arrows_detail);
			
			// set initial corner via data-active="bottom_right" at the wrapper class
			var active = $wrapper.attr('data-active');
			if (typeof(active) != 'undefined' && $corners.filter('.' + active).length > 0) {
				var temp = config.slideDuration;
				config.slideDuration = 0;
				$corners.filter('.' + active).click();
				config.slideDuration = temp;
			}
			
		});

		return this;
	};
})(jQuery);