/*
Sample HTML structure
---------------------
<div class="tabsContainer">
	<div id="tab1" class="unselected" style="display: none">
		Tab 1
	</div>
	<div id="tab2" class="unselected" style="display: none">
		Tab 2
	</div>
	
	<ul id="tabs">
		<li id="tab1" class="unselected">
			Tab1
		</li>
		<li id="tab2" class="unselected" style="display:none;">
			Tab2
		</li>
	</ul>

	<div class="SwitchingRegions">
		<div id="tabContainer1" style="display: none">
			tab 1 content
		</div>
		<div id="tabContainer2" style="display:none;">
			tab 2 content
		</div>
	</div>
</div>

jQuery code sample
------------------
$(".tabs-wrapper").pmTabs();
*/

(function($) {
    $.fn.extend({
        pmTabs: function() {
			return this.each(function() {
				//	Tab container 
				var oTabContainer = $(this);
				
				var tabIsActive = false;
				
				oTabContainer.find("div[id^='tabContainer']").each(function(){
					oTabContentContainer = $(this);
				
					var strTabId = oTabContentContainer.attr("id");
					strTabId = strTabId.substring(12, strTabId.length);
					
					oTab = $("#tab" + strTabId);
					
					//	Show tab
					oTab.show();
					
					//	Select first tab with content
					if (!tabIsActive) {
						oTab.removeClass("unselected").addClass("selected");
						oTabContentContainer.show();	
						
						tabIsActive = true;
					}
					
					//	Handle tab events
					oTab.click(function(e) {
						oTab = $(this);
					
						oTabContainer = oTab.parents("div[class*='Container']");
						oTabContentContainer = oTabContainer.find("div[id^='tabContainer" + strTabId + "']");
						
						oTabContainer.find(".selected").removeClass("selected").addClass("unselected");
						oTabContainer.find("div[id^='tabContainer']").hide();
						
						oTab.removeClass("unselected").addClass("selected");
						oTabContentContainer.show();
					});															   
				});
			});
		}
    });
})(jQuery);