function LoadTabPanels()
{
    $(document).ready(function() {
        var tabPanelClasses = new Array(".TabPanel", ".TabPanelRightTabs");
        for(var i = 0; i<tabPanelClasses.length; i++)
            $(tabPanelClasses[i]).each(function(tabPanelNum) {
            //Unique IDs
            var tabPanelID = "TabPanel" + tabPanelNum;
            var tabContainerID = "TabContainer" + tabPanelNum;
            var panelsContainerID = "PanelsContainer" + tabPanelNum;
            var multiIDSuffix = "_" + tabPanelNum;

            //Set IDs
            var tabPanel = $(this);
            tabPanel.attr("id", tabPanelID);
            tabPanel.find("#TabContainer").attr("id", tabContainerID);
            tabPanel.find("#PanelsContainer").attr("id", panelsContainerID);

            //Write the tabs to the page
            $("#" + panelsContainerID).find(".Panel").each(function(i) {
                this.id = "Panel_" + i + multiIDSuffix;
                $("#" + tabContainerID).append(WriteTab(this.title, $(this).attr("width")));
                $(this).removeAttr("title").removeAttr("width");
            });
            $("#" + tabContainerID).append("<div class=\"Clear\"></div>");

            //Add IDs and widths to tabs
            var tabs = $("#" + tabContainerID).find(".Tab");
            tabs.each(function(i) {
                this.id = "Tab_" + i + multiIDSuffix;
                $(this).data('TabNumber', i);
            });

            //Add click handlers to tabs
            var animationType = $("#" + panelsContainerID).attr("title");
            tabs.click(function() {
                if (!$(this).hasClass("selected")) {
                    var oldPanel = tabPanel.find(".Panel:visible");
                    var newPanel = $("#Panel_" + $(this).data('TabNumber') + multiIDSuffix);
                    var currentTab = $(this);
                    AnimateChangePanels(oldPanel, newPanel, tabs, currentTab, animationType);
                }
            });
            $("#" + panelsContainerID).removeAttr("title");

            //Show default tab
            var defaultTab = $("#" + tabContainerID).attr("title");
            if (defaultTab == "") defaultTab = 0;
            else defaultTab = Math.max(parseInt(defaultTab, 10) - 1, 0);
            $("#Tab_" + defaultTab + multiIDSuffix).addClass("selected");
            $("#Panel_" + defaultTab + multiIDSuffix).show();
            $("#" + tabContainerID).removeAttr("title");
        });
    });
}

function WriteTab(tabTitle, width)
{
	var tab = $("<div class='Tab'></div>"),
		tabLeft = $("<div class='TabLeft'></div>"),
		tabCenter = $("<div class='TabCenter'></div>").text(tabTitle),
		tabRight = $("<div class='TabRight'></div>"),
		clear = $("<div class='Clear'></div>");
		
	return tab.append(tabLeft).append(tabCenter).append(tabRight).append(clear);
}

function AnimateChangePanels(oldPanel, newPanel, allTabs, selectedTab, animationName)
{
    if (animationName == null || animationName == "None")
    {
        oldPanel.hide(1, function () {
            newPanel.show();
            allTabs.removeClass("selected");
            selectedTab.addClass("selected");            
        });
    }
    else if (animationName == "Fade")
    {
        oldPanel.fadeOut(400, function () {
            newPanel.fadeIn(400);
            allTabs.removeClass("selected");
            selectedTab.addClass("selected");            
        });
    }
    else if (animationName == "Slide")
    {
        oldPanel.slideUp(300, function () {
            newPanel.slideDown(300);
            allTabs.removeClass("selected");
            selectedTab.addClass("selected");   
        });
    }
}