(function($) {
	
	$.fn.detatabs = function(options) {
		
		var defaults = {
			width: 0
			};
		
		// settings & variable declarations
		var defaultTab = 0;
		var currentTab;
		var currentTabName;
		var openTab;
		var openTabName;
		var tabsArray = new Array();
		var contentDivHeight = 0;
		
		var settings = $.extend({}, defaults, options);
				  
		return $(this).each(function() {
			
			// setup the group
			$(this).addClass('deta_tabs');
			
			// setup the tabs
			var tabNavigation = $(this).find('ul:first');			
			$(tabNavigation).addClass('deta_tabs_nav');
			$(tabNavigation).find('li').each(function(num) {
				if (num == defaultTab) {
					$(this).addClass('selected');
					currentTab = $(this);
					currentTabName = $(this).find('a').attr('href');
				}
				// add the tab into an array
				tabsArray.push($(this).find('a').attr('href'));
			});
			
			// setup the div content elements that make the content area for each tab
			$.each(tabsArray, function(key, value){
				$(value).addClass('deta_tabs_content');
				$(value).css({'width':settings.width});
				if (key != defaultTab) {
					$(value).hide();
				}
				// set the container box height so absolutely positioned elements act as inline block elements
				// set to the largest tab height
				if (contentDivHeight < $(value).height()) {
					contentDivHeight = $(value).height() + 100;
					$('.deta_tabs').css({ 'height': contentDivHeight + 'px'});
				}
			})
			
			/* apply event listeners for tab control */
			
			// mouse click
			$(tabNavigation).find('li').bind('click', function(event){
				event.preventDefault();
				ActivateTab($(this));
			});
			
			// space key press
			$(tabNavigation).find('li a').keypress(function(event){
				if (event.which == 32){
					event.preventDefault();
					ActivateTab($(this).parent());
				}
			});
			
		});
		
		function ActivateTab(tabName) {
			// pull out the clicked tab details
			openTab = $(tabName);
			openTabName = $(tabName).find('a').attr('href')
			
			// unactivate the current tab and hide the associated area
			$(currentTab).removeClass('selected');
			$(currentTabName).hide();
			
			// activate the new tab
			$(openTab).addClass('selected');
			$(openTabName).show();
			
			// assign the new tab values
			currentTab = openTab;
			currentTabName = openTabName;
		}
	}
})(jQuery);