﻿/*
Sample HTML structure
---------------------
<div class="tabsContainer">
	<ul id="tabs">
            <li id="tab1" class="unselected" style="display:none;">
              <iSite:SiteText runat="server" id="SiteText_tabAplications" ResourceName="SiteText_tabAplications" RenderAs="text" />
            </li>
            <li id="tab2" class="unselected" style="display:none;">
              <iSite:SiteText runat="server" id="SiteText_tabInstructions" ResourceName="SiteText_tabInstructions" RenderAs="text" />
            </li>
	</ul>
  	<div class="switching-regions">
            <div id="tabContainer1" style="display:none;"> aplikacije
              <iSite:Region runat="server" ID="Aplications" RegionName="Aplications" Flow="NoFlow"/>
            </div>
            <div id="tabContainer2" style="display:none;"> upute
              <iSite:Region runat="server" ID="Instructions" RegionName="Instructions" Flow="NoFlow"/>
	</div>
</div>

jQuery code sample
------------------
$(".tabContainer").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);
				
					if ($.trim(oTabContentContainer.html()).length > 0) {
						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().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().addClass("unselected");
							oTabContainer.find("div[id^='tabContainer']").hide();
							
							oTab.removeClass().addClass("selected");
							oTabContentContainer.show();
						});	
					}															   
				});
			});
		}
    });
})(jQuery);
