﻿function LoadCategoryTabs(tabsAreaSelector)
{
    var tabs = $(tabsAreaSelector + ">div>div>div");
    var currentRow = -1;
    var currentTop = -1;
    var selectedRow = -1;
    
    //set row numbers
    for (var counter = 0; counter < tabs.length; counter ++)
    {

       if ($(tabs[counter]).offset().top != currentTop)
       {
            currentTop = $(tabs[counter]).offset().top;
            currentRow ++;
       }

        if ($(tabs[counter]).attr("class") == "tabActive" ||$(tabs[counter]).attr("class") == "tabAltActive" )
         selectedRow = currentRow;
       
        $(tabs[counter]).addClass("row" + currentRow);           

    }

    var rowWidth = $(tabsAreaSelector).find("#TabContent").width(); 

   

   
    //put in row wrappers so the rows of tabs can be moved
    for (var counter = 0; counter <= currentRow; counter ++)
    {
        
        $(tabsAreaSelector).find("#TabContent").append("<div style='clear:both; float:left; width:100%;' id='tabRow" + counter + "'></div>");
        var rowTabs = $(tabsAreaSelector).find(".row" + counter);
        rowTabs.appendTo($(tabsAreaSelector).find("#tabRow" + counter));            
        
        
        //hide the temporary tabs holder div
        $(tabsAreaSelector).find("#TempTabsHolder:first").css("display", "none");
        
        
        //resize the tabs so they fill the tab row
        var lastTab = $(".row" + counter + ":last")
        var lastTabLeft = lastTab.position().left ;
        var lastTabWidth = lastTab.outerWidth();
        var fillArea =rowWidth - lastTabLeft - lastTabWidth;
        
        
        for (var tabCounter = 0; tabCounter < rowTabs.length -1; tabCounter ++)
        {
           var currentTab =  $(rowTabs[tabCounter]).find(".tabContent");
           var newWidth = currentTab.width() + Math.floor(fillArea / rowTabs.length);
           currentTab.width(newWidth );
        }
        
        //assign the remaining room to the last tab in the row. this will eliminate rounding issues.
        lastTabLeft = lastTab.position().left ;
        fillArea =rowWidth - lastTabLeft - lastTabWidth - 7;
        lastTab.find(".tabContent").width(lastTabWidth + fillArea );
    }
    
    
    //move the row with the selected tab to the bottom
    if (selectedRow > -1 && selectedRow != currentRow)
    {
        $(tabsAreaSelector).find("#tabRow" + selectedRow).insertAfter($(tabsAreaSelector).find("#tabRow" + currentRow));
    } 
        
}
