if (typeof(Cosmo) == 'undefined') {
    window.Cosmo = {};
}

if (typeof(Cosmo.HomeTabPanels) == 'undefined') {

    Cosmo.HomeTabPanels = {};
    
    (function(HomeTabPanels, $) {
        
        //
        // Object: Properties shared across all functions.
        HomeTabPanels.Constants = {
            TabPanelClass: "TabPanel",
            TabImageClass: "TabImage",
            TabImageContainerClass: "TabImageContainer",
            TabImageContainerActiveClass: "TabImageContainerActive",
            TabImagePanelDataKey: "$tabContent",
            TabImageMovedDataKey: "TabMoved"
        }
    
        //
        // Function: Initializes the display of tabs inside the given container.
        /*  Note: It is assumed that only tab panels are in this container, and they are of the format:
        
                <div class="{TabPanelClass}">
                    <img class="{TabImageClass}" src="{tab graphic}" />
                    <!-- panel content goes here -->
                </div>
        */
        HomeTabPanels.Initialize = function ($container) {
        
            var constants = HomeTabPanels.Constants,
                tabPanelClass = constants.TabPanelClass,
                tabImageClass = constants.TabImageClass,
                tabImagePanelDataKey = constants.TabImagePanelDataKey,
                tabImageMovedDataKey = constants.TabImageMovedDataKey,
                $panels = $("." + tabPanelClass, $container),
                $tabs;
            
            // Bind events to each tab                
            $panels.each(function(i) {
                var $tabPanel, $tabImage;
                
                $tabPanel = $(this);
                $tabImage = $("." + tabImageClass, $tabPanel);
                
                $tabImage.data(tabImagePanelDataKey, $tabPanel);
                
                $tabImage.bind("click", function (e) {
                    $("." + tabPanelClass, $container).hide();
                    $(this).data(tabImagePanelDataKey).show();
                    $("." + tabImageClass, $container).removeClass("Active");
                    $(this).addClass("Active");
                    HomeTabPanels.ToggleTabContainers($container);
                });
            });
            
            // Arrange tabs and panels for display
            $tabs = $("." + tabImageClass);
            if (!($.browser.msie && $.browser.version == '7.0')) { //clearing div breaks IE 7, but needed in other browsers.
                $container.prepend("<div style=\"clear: both; height: 0px; line-height: 0px; font-size: 0px;\"></div>");
            }
            $tabs.prependTo($container);
            $tabs.eq(0).addClass("Active");
            $tabs.data(tabImageMovedDataKey, true);
            
            // Show initial tab
            $tabs.show();
            $panels.eq(0).show();
        },
        
        HomeTabPanels.TabImageReady = function(sender) {
        
            var $tabImage = $(sender),
                constants = HomeTabPanels.Constants,
                tabImageMovedDataKey = constants.TabImageMovedDataKey,
                containerClass = constants.TabImageContainerClass;
            
            if ($tabImage.data(tabImageMovedDataKey) != true) {
                setTimeout(function(){HomeTabPanels.TabImageReady(sender)}, 100);
                return;
            }
            
            if ($tabImage.hasClass("Active")) {
                containerClass += " " + constants.TabImageContainerActiveClass;
            }
            
            var width = $tabImage.width();
            $tabImage.wrap("<div class=\"" + containerClass + "\" style=\"width: " + width + ";\"></div>");
        },
        
        HomeTabPanels.ToggleTabContainers = function($container) {
            var constants = HomeTabPanels.Constants,
                $tabImages = $("." + constants.TabImageClass, $container),
                activeClass = constants.TabImageContainerActiveClass;
            $tabImages.each(function(i) {
                if ($(this).hasClass("Active")) {
                    $(this).parent().addClass(activeClass);
                } else {
                    $(this).parent().removeClass(activeClass);
                }
            });
        
        }
    
    })(Cosmo.HomeTabPanels, jQuery);

}