if (Garmin == undefined) var Garmin = {};
GarminBannerConstants = {
    TAB_MENU_MAP: {
        'tabMotionBasedUsers': 'bannerMotionBasedUsers',
        'tabGarminDevices': 'bannerGarminDevices',
        'tabHowItWorks': 'bannerHowItWorks',
        'tabGettingStarted': 'bannerGettingStarted'
    },
    SELECTED_CLASS: 'selected',
    TAB_PARENT_CLASS: 'homeTab'
}
Garmin.Banner = Class.create({ 
	initialize: function() {
	   this.selectedTab = this.detectSelectedTab();
	   this.selectedContent = this.detectSelectedContent();
	   this.setEventHandlers();
	},
	detectSelectedTab: function() {        
        for ( var tabClass in GarminBannerConstants.TAB_MENU_MAP ) {
            var tabElement = this._getElementByClass(tabClass);
            if( tabElement != null && tabElement.up('.'+GarminBannerConstants.TAB_PARENT_CLASS).hasClassName(GarminBannerConstants.SELECTED_CLASS)) {
                return tabElement;
            }
        }
        return null;
    },
	detectSelectedContent: function() {        
        for ( var tabClass in GarminBannerConstants.TAB_MENU_MAP ) {
            var contentElement = this._getElementByClass(GarminBannerConstants.TAB_MENU_MAP[tabClass]);
            if( contentElement != null && contentElement.visible()) {
                return contentElement;
            }
        }
        return null;
    },
	displayContent: function(contentClass) {
	    // If already displayed, do nothing
	    if( !this.selectedContent.hasClassName(contentClass)) {
    	    this.selectedContent.fade({duration: 0.1}); // Hide displayed content
            this._getElementByClass(contentClass).appear({duration: 0.3, queue: 'end'}); // show the new
	    }
	},
	/** Util method to get a DOM element by class name.  We assume there's only one result on the page. */
	_getElementByClass: function(className) {
	    return $$('.' + className)[0]; 
	},
	_highlightTab: function(tabClass) {
        // Unselect current tab
        this.selectedTab.up('.'+GarminBannerConstants.TAB_PARENT_CLASS).removeClassName(GarminBannerConstants.SELECTED_CLASS);
        // Select the new tab
        this._getElementByClass(tabClass).up('.'+GarminBannerConstants.TAB_PARENT_CLASS).addClassName(GarminBannerConstants.SELECTED_CLASS);
    },    
    selectTab: function(tabClass) {
        // highlight the tab
        this._highlightTab(tabClass);
        // show the content
        this.displayContent(GarminBannerConstants.TAB_MENU_MAP[tabClass]);
        // update the selected tab        
        this.selectedTab = this._getElementByClass(tabClass);
        this.selectedContent = this._getElementByClass(GarminBannerConstants.TAB_MENU_MAP[tabClass]);
    },
	/**
     * Sets handlers for tab elements.  Only sets the events if the tab elements
     * listed in the mapping exist on the page. 
     */
    setEventHandlers: function() {             
        // Tab handlers
        for ( var tabClass in GarminBannerConstants.TAB_MENU_MAP ) {
            var tabElement = this._getElementByClass(tabClass);
            if( tabElement != null ) {
                tabElement.observe('click', this.selectTab.bind(this, tabClass));
            }
        }
    }
});
//document.observe("dom:loaded", function() {
Event.observe(window, 'load', function() {
  homeController = new Garmin.Banner();
});