/*
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(oTabContentContainer_show) {
            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("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");
                            if (oTabContentContainer_show)
                                oTabContentContainer.show(0, function() { oTabContentContainer_show(oTabContentContainer); } );
                            else
                                oTabContentContainer.show();
                        });
                    }
                });
            });
        }
    });
})(jQuery);